|
@@ -1,27 +1,405 @@
|
|
|
<template>
|
|
<template>
|
|
|
<view class="flex-common-css">
|
|
<view class="flex-common-css">
|
|
|
- <Nav title="代取详情" leftIconColor="#333" titleColor="#333"></Nav>
|
|
|
|
|
- <scroll-view :scroll-y="true" class="scroll-view-css" @scrolltolower="scrolltolower">
|
|
|
|
|
|
|
+ <Nav title=" " leftIconColor="#333" titleColor="#333" bgckgroundBox='transparent'></Nav>
|
|
|
|
|
+ <image class="bg-img" src="@/static/img/order/bg.png" mode=""></image>
|
|
|
|
|
+ <view class="p-24-24-0 box-border-box">
|
|
|
|
|
+ <view class="mb-24" v-if="infoData.order_status == 1">
|
|
|
|
|
+ <view class="fs-40 fc-3 mb-8">
|
|
|
|
|
+ {{infoData.order_status_str}},剩余{{time.m}}:{{time.s}}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="fs-24 fc-FB3D03">
|
|
|
|
|
+ 10分钟内未支付,订单将自动取消
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="mb-24" v-else>
|
|
|
|
|
+ <view class="fs-48 fc-3 fw-600">
|
|
|
|
|
+ {{infoData.order_status_str}}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="bgc-f b-rad-20 p-24 box-border-box">
|
|
|
|
|
+ <view class="p-b-20 mb-24 b-b-F9F9F9 fs-32 fc-3" v-show="infoData.order_status == 1">
|
|
|
|
|
+ 请尽快支付
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="p-b-20 mb-24 b-b-F9F9F9 fs-32 fc-3" v-show="infoData.order_status == 4">
|
|
|
|
|
+ 感谢你对君子校园的信任,期待你再次光临
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="align-items-center flex-wrap-wrap">
|
|
|
|
|
+ <view class="w-33 flex-direction align-items-center" @click="pay"
|
|
|
|
|
+ v-show="infoData.order_status == 1">
|
|
|
|
|
+ <image class="mb-4 icon" src="@/static/img/order/qzf.png" mode=""></image>
|
|
|
|
|
+ <view class="fs-24 fc-41ABF5">
|
|
|
|
|
+ 去支付
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="w-33 flex-direction align-items-center"
|
|
|
|
|
+ v-show="infoData.order_status == 1 || infoData.order_status == 2">
|
|
|
|
|
+ <image class="mb-4 icon" src="@/static/img/order/xgdd.png" mode=""></image>
|
|
|
|
|
+ <view class="fs-24 fc-3">
|
|
|
|
|
+ 修改订单信息
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="w-33 flex-direction align-items-center"
|
|
|
|
|
+ v-show="infoData.order_status == 4 || infoData.order_status == 6">
|
|
|
|
|
+ <image class="mb-4 icon" src="@/static/img/order/zlyd.png" mode=""></image>
|
|
|
|
|
+ <view class="fs-24 fc-41ABF5">
|
|
|
|
|
+ 再来一单
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="w-33 flex-direction align-items-center">
|
|
|
|
|
+ <image class="mb-4 icon" src="@/static/img/order/lxkf.png" mode=""></image>
|
|
|
|
|
+ <view class="fs-24 fc-3">
|
|
|
|
|
+ 联系客服
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="w-33 flex-direction align-items-center" v-show="infoData.order_status == 2"
|
|
|
|
|
+ @click="cancelOrder">
|
|
|
|
|
+ <image class="mb-4 icon" src="@/static/img/order/qxdd.png" mode=""></image>
|
|
|
|
|
+ <view class="fs-24 fc-3">
|
|
|
|
|
+ 取消订单
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <scroll-view :scroll-y="true" class="scroll-view-css p-24 box-border-box" @scrolltolower="scrolltolower">
|
|
|
|
|
+ <view class="bgc-f b-rad-20 p-24 box-border-box mb-20">
|
|
|
|
|
+ <view class="w-420 fc-3 fs-32 fw-600 text-overflow-ellipsis-one mb-24">
|
|
|
|
|
+ {{infoData.site_name}}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="goods-box" :class="infoData.item.length >= 4 && goodsShow?'goodsShowOne':'goodsShowTwo'">
|
|
|
|
|
+ <view class="align-items-center flex-justify-space mb-20" v-for="(item,index) in infoData.item">
|
|
|
|
|
+ <image class="goods-img mr-16" :src="item.goods_img" mode=""></image>
|
|
|
|
|
+ <view class="">
|
|
|
|
|
+ <view class="align-items-center flex-justify-space mb-2">
|
|
|
|
|
+ <view class="fs-28 fc-3 w-376 text-overflow-ellipsis-one mr-36">
|
|
|
|
|
+ {{item.goods_name}}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="fs-32 fc-3 fw-600">
|
|
|
|
|
+ ¥{{item.goods_money}}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <!-- <view class="mb-2 fs-24 fc-9">
|
|
|
|
|
+ {{item.goods_name}}
|
|
|
|
|
+ </view> -->
|
|
|
|
|
+ <view class="fs-24 fc-9">
|
|
|
|
|
+ x{{item.goods_num}}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="align-items-center flex-justify-center p-24 b-b-F9F9F9 mb-32" @click="openGoods"
|
|
|
|
|
+ v-if="infoData.item.length > 4">
|
|
|
|
|
+ <view class="fs-24 fc-9 mr-4">
|
|
|
|
|
+ {{goodsShow?'展开':'收起'}}{{infoData.item.length - 4}}件商品
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <image v-if="goodsShow" class="icon-right" src="@/static/img/order/top.png" mode=""></image>
|
|
|
|
|
+ <image v-else class="icon-right" src="@/static/img/order/bottom.png" mode=""></image>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <!-- <view class="align-items-center flex-justify-space mb-24">
|
|
|
|
|
+ <view class="fs-28 fc-3">
|
|
|
|
|
+ 打包费
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="fs-32 fc-3">
|
|
|
|
|
+ 打包费
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="align-items-center flex-justify-space mb-24">
|
|
|
|
|
+ <view class="fs-28 fc-3">
|
|
|
|
|
+ 配送费
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="fs-32 fc-3">
|
|
|
|
|
+ 打包费
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view> -->
|
|
|
|
|
+ <view class="align-items-center flex-justify-space pb-36 b-b-F9F9F9 mb-22">
|
|
|
|
|
+ <view class="align-items-center">
|
|
|
|
|
+ <image class="mr-6 icon-right" src="@/static/img/order/yhq.png" mode=""></image>
|
|
|
|
|
+ <view class="fs-28 fc-3">
|
|
|
|
|
+ 优惠券
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="fs-32 fc-FB3D03">
|
|
|
|
|
+ -¥{{infoData.coupon_money}}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="align-items-center flex-justify-end">
|
|
|
|
|
+ <view class="fs-28 fc-9">
|
|
|
|
|
+ 共{{infoData.goods_number}}件,
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="fs-28 fc-3">
|
|
|
|
|
+ 金额
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="fs-24 fw-600 fc-3">
|
|
|
|
|
+ ¥
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="fs-36 fw-600 fc-3">
|
|
|
|
|
+ {{infoData.pay_money}}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="bgc-f b-rad-20 p-24 box-border-box mb-20">
|
|
|
|
|
+ <view class="display-flex flex-justify-space mb-26">
|
|
|
|
|
+ <view class="fs-28 fc-9">
|
|
|
|
|
+ 配送地址
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="fs-28 fc-3 w-480 text-align-right">
|
|
|
|
|
+ {{infoData.school_name}}{{infoData.dorm_name}}{{infoData.address}}{{infoData.consignee}}{{infoData.consignee_tel}}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <!-- <view class="display-flex flex-justify-space mb-26">
|
|
|
|
|
+ <view class="fs-28 fc-9">
|
|
|
|
|
+ 配送时间
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="fs-28 fc-3 w-480 text-align-right">
|
|
|
|
|
+ 预约配送
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view> -->
|
|
|
|
|
+ <view class="display-flex flex-justify-space pb-20 b-b-F9F9F9 mb-26"
|
|
|
|
|
+ v-show="infoData.order_status == 3">
|
|
|
|
|
+ <view class="fs-28 fc-9">
|
|
|
|
|
+ 骑手信息
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="fs-28 fc-3 w-480 text-align-right">
|
|
|
|
|
+ {{infoData.rider.rider_name}}{{infoData.rider.phone}}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="display-flex flex-justify-space mb-26">
|
|
|
|
|
+ <view class="fs-28 fc-9">
|
|
|
|
|
+ 订单编号
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="align-items-center flex-justify-end">
|
|
|
|
|
+ <view class="fs-28 fc-3 w-480 mr-8 text-align-right">
|
|
|
|
|
+ {{infoData.order_sn}}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <image class="icon-fz" src="@/static/img/order/fz.png" mode=""></image>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="display-flex flex-justify-space mb-26">
|
|
|
|
|
+ <view class="fs-28 fc-9">
|
|
|
|
|
+ 下单时间
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="fs-28 fc-3 w-480 text-align-right">
|
|
|
|
|
+ {{infoData.created_at}}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="display-flex flex-justify-space mb-26">
|
|
|
|
|
+ <view class="fs-28 fc-9">
|
|
|
|
|
+ 支付方式
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="fs-28 fc-3 w-480 text-align-right">
|
|
|
|
|
+ {{infoData.pay_type_str}}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="display-flex flex-justify-space mb-26">
|
|
|
|
|
+ <view class="fs-28 fc-9">
|
|
|
|
|
+ 备注
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="fs-28 fc-3 w-480 text-align-right">
|
|
|
|
|
+ {{infoData.note?infoData.note:'无'}}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
</scroll-view>
|
|
</scroll-view>
|
|
|
</view>
|
|
</view>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
|
+ import {
|
|
|
|
|
+ expressOrderInfo,
|
|
|
|
|
+ expressOrderCancel
|
|
|
|
|
+ } from "@/api/expressOrder.js"
|
|
|
|
|
+ import {
|
|
|
|
|
+ getExpressPay
|
|
|
|
|
+ } from "@/api/express.js"
|
|
|
|
|
+ import tools from "@/service/tools";
|
|
|
export default {
|
|
export default {
|
|
|
components: {},
|
|
components: {},
|
|
|
data() {
|
|
data() {
|
|
|
- return {};
|
|
|
|
|
|
|
+ return {
|
|
|
|
|
+ goodsData: [{
|
|
|
|
|
+ name: '1'
|
|
|
|
|
+ }, {
|
|
|
|
|
+ name: '2'
|
|
|
|
|
+ }],
|
|
|
|
|
+ goodsShow: true,
|
|
|
|
|
+ infoData: {},
|
|
|
|
|
+ time: {
|
|
|
|
|
+ day: '',
|
|
|
|
|
+ h: "",
|
|
|
|
|
+ m: '',
|
|
|
|
|
+ s: '',
|
|
|
|
|
+ },
|
|
|
|
|
+ isAJAX: false
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+ onLoad(data) {
|
|
|
|
|
+ if (data) {
|
|
|
|
|
+ console.log(data);
|
|
|
|
|
+ this.expressOrderInfo(data.orderId)
|
|
|
|
|
+ }
|
|
|
},
|
|
},
|
|
|
- onLoad(data) {},
|
|
|
|
|
mounted() {},
|
|
mounted() {},
|
|
|
methods: {
|
|
methods: {
|
|
|
|
|
+ pay() {
|
|
|
|
|
+ this.getExpressPay(this.infoData.id)
|
|
|
|
|
+ },
|
|
|
|
|
+ getExpressPay(id) {
|
|
|
|
|
+ // 代取支付
|
|
|
|
|
+ getExpressPay({
|
|
|
|
|
+ order_id: id
|
|
|
|
|
+ }).then((ret) => {
|
|
|
|
|
+ if (ret.code === 1) {
|
|
|
|
|
+ uni.requestPayment({
|
|
|
|
|
+ provider: "wxpay", //支付类型-固定值
|
|
|
|
|
+ timeStamp: ret.data.wx_pay.timeStamp + "", // 时间戳(单位:秒)
|
|
|
|
|
+ nonceStr: ret.data.wx_pay.nonceStr, // 随机字符串
|
|
|
|
|
+ package: ret.data.wx_pay.package, // 固定值
|
|
|
|
|
+ signType: ret.data.wx_pay.signType, //固定值
|
|
|
|
|
+ paySign: ret.data.wx_pay.paySign, //签名
|
|
|
|
|
+ success: (ren) => {
|
|
|
|
|
+ tools.success("支付成功");
|
|
|
|
|
+ this.isAJAX = false;
|
|
|
|
|
+ this.expressOrderInfo(this.infoData.id)
|
|
|
|
|
+ },
|
|
|
|
|
+ fail: (err) => {
|
|
|
|
|
+ this.isAJAX = false;
|
|
|
|
|
+ tools.error("支付失败");
|
|
|
|
|
+ },
|
|
|
|
|
+ });
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.isAJAX = false;
|
|
|
|
|
+ tools.error("支付失败");
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ cancelOrder() {
|
|
|
|
|
+ // 代取取消订单
|
|
|
|
|
+ expressOrderCancel({
|
|
|
|
|
+ order_id: infoData.id
|
|
|
|
|
+ }).then((res) => {
|
|
|
|
|
+ if (res.code == 1) {
|
|
|
|
|
+ tools.success(res.msg)
|
|
|
|
|
+ this.expressOrderInfo(this.infoData.id)
|
|
|
|
|
+ } else {
|
|
|
|
|
+ tools.error(res.msg)
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ openGoods() {
|
|
|
|
|
+ this.goodsShow = !this.goodsShow
|
|
|
|
|
+ },
|
|
|
scrolltolower() {
|
|
scrolltolower() {
|
|
|
- console.log('触底');
|
|
|
|
|
|
|
+ // console.log('触底');
|
|
|
|
|
+ },
|
|
|
|
|
+ expressOrderInfo(id) {
|
|
|
|
|
+ expressOrderInfo({
|
|
|
|
|
+ order_id: id
|
|
|
|
|
+ }).then((res) => {
|
|
|
|
|
+ if (res.code == 1) {
|
|
|
|
|
+ this.infoData = res.data
|
|
|
|
|
+ if (this.infoData.order_status == 1) {
|
|
|
|
|
+ let createDate = new Date(res.data.created_at); //格式化订单创建时候的时间
|
|
|
|
|
+ createDate.setMinutes(createDate.getMinutes() + 10)
|
|
|
|
|
+ this.setCountDown(createDate)
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
},
|
|
},
|
|
|
|
|
+ setCountDown(sTime) {
|
|
|
|
|
+ let end = new Date(sTime).getTime();
|
|
|
|
|
+ let now = new Date().getTime();
|
|
|
|
|
+ let msec = end - now;
|
|
|
|
|
+ this.time.day = parseInt(msec / 1000 / 60 / 60 / 24);
|
|
|
|
|
+ let h = parseInt(msec / 1000 / 60 / 60 % 24);
|
|
|
|
|
+ let m = parseInt(msec / 1000 / 60 % 60);
|
|
|
|
|
+ let s = parseInt(msec / 1000 % 60);
|
|
|
|
|
+ this.time.h = h > 9 ? h : '0' + h;
|
|
|
|
|
+ this.time.m = m > 9 ? m : '0' + m;
|
|
|
|
|
+ this.time.s = s > 9 ? s : '0' + s;
|
|
|
|
|
+ msec -= 1000;
|
|
|
|
|
+ if (this.time.day >= 1) {
|
|
|
|
|
+ this.showTime = true;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.showTime = false;
|
|
|
|
|
+ };
|
|
|
|
|
+ if (msec >= 0) {
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ this.setCountDown(sTime);
|
|
|
|
|
+ }, 1000);
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.isTimeEnd = true;
|
|
|
|
|
+ this.bText = '活动结束';
|
|
|
|
|
+ this.time.h = '--';
|
|
|
|
|
+ this.time.m = '--';
|
|
|
|
|
+ this.time.s = '--';
|
|
|
|
|
+ };
|
|
|
|
|
+ }
|
|
|
},
|
|
},
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
|
|
+ .bg-img {
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ z-index: -1;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 320rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .w-33 {
|
|
|
|
|
+ width: 33%;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .p-24-24-0 {
|
|
|
|
|
+ padding: 24rpx 24rpx 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .icon {
|
|
|
|
|
+ width: 48rpx;
|
|
|
|
|
+ height: 48rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .w-420 {
|
|
|
|
|
+ width: 420rpx;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
-</style>
|
|
|
|
|
|
|
+ .goods-img {
|
|
|
|
|
+ width: 108rpx;
|
|
|
|
|
+ height: 108rpx;
|
|
|
|
|
+ border-radius: 8rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .w-376 {
|
|
|
|
|
+ width: 376rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .icon-right {
|
|
|
|
|
+ width: 32rpx;
|
|
|
|
|
+ height: 32rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .w-480 {
|
|
|
|
|
+ width: 480rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .icon-fz {
|
|
|
|
|
+ width: 24rpx;
|
|
|
|
|
+ height: 24rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .goods-box {
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .goodsShowOne {
|
|
|
|
|
+ max-height: 508rpx;
|
|
|
|
|
+ transition: all .5s linear;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .goodsShowTwo {
|
|
|
|
|
+ height: auto;
|
|
|
|
|
+ transition: all .5s linear;
|
|
|
|
|
+ }
|
|
|
|
|
+</style>
|