<template> <div class="pages"> <view class="topBar" :style="{'padding-top':statusBarHeight+'px','height':navigationBarHeight+'px'}"> <u-icon @click="goBack" name="arrow-left" color="#000000" size="20"></u-icon> <view class="tabTitle" :style="{'line-height':navigationBarHeight+'px'}">订单详情</view> </view> <div class="order_status" :style="{'margin-top':(statusBarHeight+navigationBarHeight+getPx(32))+'px'}"> <view class="status_text">订单状态:{{ orderStatusText }}</view> <view class="tips"> <view v-if="orderInfo.state == 7">为保持口感,请尽快引用哦~</view> <view v-if="orderInfo.state == 4">订单已制作完成,请尽快取餐~</view> <view v-if="orderInfo.state == 2 || orderInfo.state == 3">请您耐心等候,预计<text class="time">{{waitTime}}</text>分钟后可取</view> </view> <div class="btns"> <a type="primary" @click="cancelOrder" v-if="orderInfo.state == 1" class="btn_cancel">取消订单</a> <a type="primary" @click="PayNow" v-if="orderInfo.state == 1" class="btn">立即支付</a> <a type="primary" @click="toRefund" v-if="orderInfo.state == 2" class="btn_cancel">申请退款</a> <a type="primary" @click="oneMoreOrder(orderInfo)" v-if="orderInfo.state != 1" class="btn">再来一单</a> </div> </div> <div class="order_flow" v-if="qrShow"> <div v-if="qrShow" class="code">取单码 {{ orderInfo.orderNum }}</div> <div class="realQrcodeBox" v-if="qrShow&&isBuild"> <image mode="aspectFit" :src="ewmImg"/> </div> <div v-if="qrShow&&!isBuild" class="qr_code" > <image mode="aspectFit" :src="'/static/imgs/erweimazhedang.png'" class="qr" /> </div> <view class="scan_tips" v-if="qrTextShow">——制作完成后才能扫哦——</view> <canvas v-if="qrShow" class="canvas-code" canvas-id="myQrcode" style="background:#fff;width: 200px;height: 200px; display:block; left:-800rpx;position:absolute;" /> <div v-if="qrShow" class="flow_describe"> <view class="title">扫码流程</view> <image :mode="'aspectFit'" class="flow_img" src="/static/imgs/saomaliucheng.png" /> </div> </div> <div class="shop_info"> <div class="address"> <div class="address_1">{{ orderInfo.shop.name }}</div> <div class="address_2">{{ orderInfo.shop.address }}</div> </div> <div v-for="item in orderInfo.orderDetails" :key="item.id"> <div class="goods"> <div class="goods_item"> <image v-if="jsonParse(item.goods.pics).thumbnailApplet" :src="jsonParse(item.goods.pics).thumbnailApplet" class="goods_img" /> <image v-else :src="jsonParse(item.goods.pics).thumbnail" class="goods_img" /> <div class="goods_text"> <div class="goods_name"> <div class="name">{{ item.goodsName }}</div> <div class="price">¥{{ Utils.isInteger(item.realAmount) }}</div> </div> <div class="goods_psce"> <div class="psce_name"> <span v-for="(rule, index) in jsonParse(item.specRuleDetail)" :key="rule.specId"> {{ rule.ruleName }} <text v-if="index != jsonParse(item.specRuleDetail).length - 1">/</text> </span> </div> <div class="size">x{{ item.num }}</div> </div> </div> </div> </div> <!-- <div class="discount"> <div class="discount_1"> <div class="name">优惠免减</div> <div class="price">¥{{ setPrice(item.amount - item.realAmount) }}</div> </div> <div class="concessional_rate"> <div class="name">特惠价</div> <div class="price">¥{{ setPrice(item.realAmount) }}</div> </div> </div> --> </div> <div class="total"> <div class="size">共{{ totalNum }}件商品</div> <div class="price"> <span class="paid_in">实付</span> <span class="money">¥{{ Utils.isInteger(orderInfo.amount) }}</span> </div> </div> </div> <div class="order_describe"> <view class="title">订单信息</view> <view class="item_cont"> <view class="item"> <span class="label">下单时间:</span> <span class="value">{{ orderInfo.createdAt }}</span> </view> <view class="item1"> <span class="label">取单号码:</span> <span class="value">{{ orderInfo.orderNum }}</span> </view> <view class="item1"> <span class="label">订单编号:</span> <span class="value">{{ orderInfo.orderNo }}</span> </view> </view> </div> <div class="customer_service"> <button class="function_item_text" open-type="contact" bindcontact="handleContact" session-from="sessionFrom"> <view class="serverBox"> <u-icon name="server-fill" color="#000000" size="16"></u-icon> <span :style="{'margin-left':'16rpx'}">联系客服</span> </view> <view > <image class="icno-arrow" :src="'../../../static/imgs/jiantouhei.png'" /> </view> </button> </div> <show-toast ref="toast"/> </div> </template> <script> import Order from '@/request/order'; import QRCode from '@/utils/qrCode' import Menu from '@/request/menu'; import Utils from '@/utils/utils' import { systemInfo } from '@/utils/mixin.js' import { $EventBus } from "@/utils/EventBus"; export default { mixins: [systemInfo], async onLoad(option) { this.getSystemInfo() let oId = 0 // 从订阅消息进入 this.option = JSON.stringify(option) const { orderId } = option if(orderId){ oId = orderId if(!this.userms){ uni.switchTab({ url: '/pages/order/order' }) return } }else{ oId = uni.getStorageSync('orderId'); } // return const {data = {}} = await Order.getOrderDetail({orderId:oId}) this.orderInfo = data?.data const getTime = ['2', '3'].indexOf(this.orderInfo.state) >= 0 const isBuild = ['4', '5'].indexOf(this.orderInfo.state) >= 0; if(getTime){ const {data = {}} = await Order.getOrderWaiteTime({orderId:oId}) this.waitTime = data?.data } if (isBuild) { new QRCode('myQrcode', { text: this.orderInfo.pickCode, width: 141, //canvas 画布的宽 height: 141, //canvas 画布的高 padding: 0, // 生成二维码四周自动留边宽度,不传入默认为0 correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度 callback: (res) => { this.ewmImg = res.path } }) } this.isBuild = isBuild }, data() { return { orderInfo: {}, ewmImg: '', Utils, isBuild:true, waitTime:0 } }, methods: { getPx(rpx) { // console.log((rpx * (wx.getSystemInfoSync().windowWidth / 750))); // console.log(wx.getSystemInfoSync().windowWidth); return rpx * (wx.getSystemInfoSync().windowWidth / 750); }, goBack(){ uni.switchTab({ url: '/pages/order/order' }) }, async oneMoreOrder(item) { uni.removeStorageSync('shopCarInfo'); $EventBus.$emit('updateCar'); const numObj = {} const { id, shopId, orderDetails } = item; orderDetails.forEach(item => { orderDetails[item.skuId] = Number(item.num) }) const { data } = await Order.moreOrder({ orderId: id, shopId }); if(!data || !data.data){ this.showToast({ title: "该订单中的商品已经售罄了" }); return; } let list = new Array(); data.data.forEach(item => { const skuId = item.skus[0].skuId const nextData = { ...item, skuId, num: orderDetails[skuId], flag: true, sku: item.skus[0] } if (nextData.sku.state == 1) { list.push(nextData); } }); if(!list || list.length<=0) { this.showToast({ title: "该订单中的商品已经售罄了", icon: 'error' }); return; } list.forEach(nextData => { Utils.getallNum(nextData); }) uni.switchTab({ url: '/pages/menu/menu' }) }, async PayNow() { const orderInfo = await Order.payOrder({ orderId: this.orderInfo.id }) if (orderInfo) { if (orderInfo && orderInfo.data.code == 200) { await Menu.requestPayment(orderInfo.data.data); } } }, toRefund() { uni.showModal({ title: '确认退款', success: (res) => { if (res.confirm) { Order.orderRefund({ orderId: this.orderInfo.id, refundAmount: this.orderInfo.amount }).then(res => { uni.switchTab({ url: '/pages/menu/menu' }) }) } else if (res.cancel) { console.log('用户点击取消'); } } }) }, jsonParse(json) { return JSON.parse(json) }, cancelOrder() { Order.cancelOrder({ orderId: this.orderInfo.id }).then(res => { uni.switchTab({ url: '/pages/menu/menu' }) }) }, }, computed: { totalNum() { let totalNum = 0; const {orderDetails=[]} = this.orderInfo orderDetails.forEach(item => { totalNum += parseInt(item.num); }) return totalNum; }, qrShow() { return ['2','3','4','5'].indexOf(this.orderInfo.state) >= 0; }, qrTextShow() { return ['2','3'].indexOf(this.orderInfo.state) >= 0; }, // 1 未支付 // 2 已支付 // 3 支付制作中 // 4 制作完成未取 // 5 取餐中 // 6 正常完成 // 7 待取超时 // 8 未支付取消 // 9 支付后制作前取消 // 10 制作中取消 // 11 制作完成取消 // 12 退款中 // 13 退款失败 // 14 部分退款 // 15 已退款 // 50 其他人工干预状态 orderStatusText() { switch (this.orderInfo.state) { case '1': return '待付款' case '2': return '待制作' case '3': return '制作中' case '4': return '待取餐' case '5': return '取餐中' case '6': case '7': return '已完成' case '8': case '9': case '10': case '11': return '已取消' case '12': return '退款中' case '13': return '退款失败' case '14': return '部分退款' case '15': return '已退款' default: return '未知状态' } }, qrText() { switch (this.orderInfo.state) { case '2': return '待制作' case '3': return '制作中' default: return '' } }, userms() { return this.$store.getters.Authorization; }, } } </script> <style lang="scss" scoped> .pages { padding-top: 1rpx; padding-bottom: 30rpx; .topBar{ position: fixed; width: 100%; background: white; display: flex; justify-content: flex-start; align-items: center; z-index: 9999; padding-left: 34rpx; // .arrow-left { // margin-left: 20rpx; // } .tabTitle{ font-size: 32rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; text-align: center; width: 79%; color: #333333 } } } .order_status { // max-height: 174rpx; background: #FFFFFF; margin: 32rpx 32rpx; padding: 24rpx 0rpx 32rpx 0rpx; .status_text { font-size: 32rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #333333; text-align: center; } .tips { text-align: center; margin-top: 15rpx; font-size: 24rpx; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #999999; .time { font-size: 32rpx; font-family: Futura Medium, Arial, sans-serif; font-weight: normal; color: #0050F6; margin: 0 16rpx; } } .btns { padding-top: 28rpx; text-align: center; width: 428rpx; display: flex; margin: 0 auto; justify-content: space-around; a { line-height: 64rpx; } } .btn { font-size: 24rpx; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #FFFFFF; width: 167rpx; height: 64rpx; background: #0050F6; border-radius: 2rpx; } .btn_cancel { box-sizing: border-box; font-size: 24rpx; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #0050F6; width: 167rpx; height: 64rpx; border-radius: 2rpx; border: 2rpx solid #0050F6; } } .order_flow { background: #FFFFFF; margin: 32rpx; padding-top: 56rpx; .code { text-align: center; font-size: 32rpx; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 600; color: #333333; padding-bottom: 20rpx; } .status_text { font-size: 32rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #333333; text-align: center; } .qr_code { height: 351rpx; width: 355rpx; display: block; margin-top: 48rpx; position: relative; padding-bottom: 40rpx; margin-bottom: 0rpx; margin-left: 150rpx; .qr { width: 100%; height: 100%; vertical-align: bottom; } } .scan_tips { padding-bottom: 32rpx; font-size: 28rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #666666; text-align: center; } .realQrcodeBox{ margin: 0 auto; width: 510rpx; height: 510rpx; image{ width: 100%; height: 100%; vertical-align: bottom; } } .flow_describe { padding-top: 50rpx; padding-left: 32rpx; padding-right: 30rpx; padding-bottom: 58rpx; .title { height: 40rpx; line-height: 40rpx; font-size: 28rpx; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 600; color: #000000; } .flow_img { padding: 18rpx 0rpx 0rpx 32rpx; width: 592rpx; height: 244rpx; display: block; vertical-align: bottom; } } } .shop_info { margin: 32rpx; background: #FFFFFF; padding: 40rpx 30rpx 22rpx 30rpx; h3 { font-size: 28rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 600; color: #000000; } .address { border-bottom: 1rpx solid #ECECEC; padding-bottom: 25rpx; .address_1 { font-size: 28rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #333333; line-height: 40rpx; } .address_2 { margin-top: 18rpx; font-size: 24rpx; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #666666; line-height: 34rpx; } } .goods { // padding-top: 20rpx; .goods_item { display: flex; align-items: center; margin-top: 30rpx; } .goods_img { height: 112rpx; width: 112rpx; background-color: #eee; margin-right: 24rpx; } .goods_text { flex: 1; .goods_psce, .goods_name { display: flex; justify-content: space-between; // align-items: center; .name { height: 40rpx; line-height: 40rpx; margin-top: 10rpx; font-size: 28rpx; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #666666; } .price { height: 40rpx; line-height: 40rpx; margin-top: 12rpx; font-size: 28rpx; font-family: Futura-Medium, Futura; font-weight: 500; color: #333333; } .psce_name { height: 34rpx; line-height: 34rpx; margin-top: 18rpx; font-size: 24rpx; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #999999; } .size { height: 34rpx; line-height: 34rpx; margin-top: 24rpx; font-size: 24rpx; font-family: ArialMT; color: #666666; } } } } .discount { margin-top: 24rpx; padding-bottom: 24rpx; border-bottom: 1rpx solid #ECECEC; .discount_1 { display: flex; justify-content: space-between; align-items: center; font-size: 28rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 600; color: #333333; .price { font-family: Arial-BoldMT, Arial; font-weight: normal; color: #EB5F17; } } .concessional_rate { display: flex; justify-content: space-between; align-items: center; font-size: 24rpx; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #666666; margin-top: 18rpx; .price { font-family: Arial-BoldMT, Arial; font-weight: 700; color: #000; } } } .total { display: flex; align-items: center; display: flex; justify-content: space-between; margin-top: 32rpx; border-top: 1rpx solid #EEEEEE; padding-top: 23rpx; .size { height: 40rpx; line-height: 40rpx; font-size: 28rpx; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #666666; } .price { display: flex; align-items: flex-end; .paid_in { height: 40rpx; line-height: 40rpx; font-size: 28rpx; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #333333; } .money { height: 48rpx; line-height: 50rpx; vertical-align: top; font-size: 36rpx; font-family: Futura-Medium, Futura; font-weight: 500; color: #333333; } } } } .order_describe { background: #fff; padding: 24rpx 30rpx 24rpx 32rpx; margin: 30rpx 32rpx 32rpx 32rpx; .title { font-size: 28rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #333333; line-height: 40rpx; height: 40rpx; border-bottom: 1rpx solid #ECECEC; padding-bottom: 24rpx; } .item_cont { padding-top: 6rpx; } .item1, .item { margin-top: 20rpx; line-height: 34rpx; .label { font-size: 24rpx; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #999999; line-height: 34rpx; height: 34rpx; } .value { font-size: 24rpx; font-family: ArialMT; color: #666666; line-height: 28rpx; height: 28rpx; } } .item1 { margin-top: 18rpx; } } .customer_service { height: 90rpx; line-height: 90rpx; background: #FFFFFF; font-weight: 400; color: #000000; padding: 0rpx 31rpx; margin: 32rpx; .function_item_text { width: 100%; margin: 0; padding: 10rpx 10rpx 10rpx 0rpx; background-color: #FFFFFF; font-size: 28rpx; font-family: PingFangSC-Medium, PingFang SC; border-radius: 0px; display: flex; justify-content: space-between; color: #333333; font-weight: 400; font-style: normal; .serverBox{ display: flex; justify-content: flex-start; align-items: center; span { font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #333333; } } .icno-arrow{ width: 15.27rpx; height: 21.68rpx; } } .function_item_text::after { border: unset; } } </style>