<template> <view> <view class="width100 paddtop10 paddbotm10 backcorfff fotct" v-if="orderList.orderStatus == 1"> <view class="height20"></view> <view class="headstu font24 fontwig6"> {{countdownm}}:{{countdowns}} </view> <view class="width100 font13 fcor666 mart10">若超时未支付,订单将自动取消</view> <view class="stubtn mart15" style="background-color: #0F8FE8;" @click="jumppay()">立即支付 </view> </view> <view class=" paddtop10 paddbotm10 headsbg backcorfff fotct" v-if="orderList.orderStatus != 1 && typeid != 10"> <!-- <view class="headotherstu alijus font18 fontwig6" v-if="orderList.orderStatus != 2 && orderList.orderStatus != 3"> <image mode="widthFix" class="width50" src="../static/imgs/otherstu.png"></image> </view> --> <view class="width100 font18 fcorfff mart15" v-if=" orderList.orderStatus != 2 && orderList.orderStatus != 3"> {{typeText[orderList.orderStatus]}} </view> <view v-if="(orderList.orderStatus == 2 || orderList.orderStatus == 3 )"> <view v-if="typeid == 4 && recinfo.list && phonestu == 2"> <view class="width90 mart15" style="display: flow-root;"> <view class="fcor333 mart15 font24 fontspec width50 fotlt flleft height30h fontwig6" v-for="(item,index) in recinfo.list" :key='index'>{{item.code}} <text class="medldcode fcorfff border-r font11">尾号{{item.phone}}</text> </view> </view> </view> <view class="fotct" v-if="typeid == 4 && recinfo.list && phonestu == 1"> <view class="width90 mart15" style="display: flow-root;"> <view class="fcor333 mart15 font24 fontspec width50 fotlt flleft height30h fontwig6" v-for="(item,index) in recinfo.list" :key='index'>{{item.code}} <text class="medldcode fcorfff border-r font11">取餐码</text> </view> </view> </view> <view class="font12 width90 fcor666 mart10 marb10 fotlt" v-if="recinfo.list">订单已准备完毕,喜欢您再来</view> <view class="width90 height70 backcorfff border-r alijusstart paddbotm10" v-if="recinfo.list"> <view class="width70 fotlt"> <view class="width94 fcor333 font14">请至柜台凭取餐码取餐</view> <view class="width94 fcor666 font12 mart5">如有询问手机尾号请点击右侧按钮查看</view> </view> <view class="width30"> <view class="phoneck width85 border-r" v-if="typeid == 4 && recinfo.list && phonestu == 1" @click="updatestu(2)"> 查看手机尾号 </view> <view class="phoneck width85 border-r" v-if="typeid == 4 && recinfo.list && phonestu == 2" @click="updatestu(1)"> 隐藏手机尾号 </view> </view> </view> <!-- 星巴克 --> <view v-if="typeid == 9 && recinfo.object.orderItems[0].code"> <view class="fotct font18 width100 mart10 color2f6f43" v-for="(item,index) in recinfo.object.orderItems" :key='index'>取餐口令:{{item.code}}</view> </view> <view class="fotct font20 width100 mart10 colorc3" v-if="typeid == 4 && !recinfo.list"> <!-- {{recinfo.statusDesc}} --> {{typeText[orderList.orderStatus]}} </view> <view class="fotct font20 width100 mart10 color2f6f43" v-if="typeid == 9 && !recinfo.object.orderItems[0].code">{{recinfo.statusDesc}}</view> </view> </view> <view class="width94 mart10 backcorfff"> <view class="width94 paddtop15 font16 fontwig6" v-if="typeid == 10"> 充值明细 </view> <view class="width94 paddtop15 font16 fontwig6 alijusstart" v-else> <image src="../static/imgs/desloca.png" mode="widthFix" class="icon20 marglerig"></image> {{orderList.highChildOrderList[0].storeName}} </view> <view class="width100 mart5"> <view class="width90 alijusstart mart15" v-for="(item,index) in orderList.highChildOrderList" :key="index"> <view class="width30"> <image :src="item.goodsImg" v-if="item.goodsImg" mode="widthFix" class="width100"></image> <image src="../static/imgs/vipcz.png" v-else mode="widthFix" class="width90w"></image> </view> <view class="width50 font13 fcor333 fontwig6"> <view>{{item.goodsName}}</view> <view class="font13 fcor999">{{item.saleCount}} 份</view> </view> <view class="width20"> <view class="width100 fcor333 font12 fotrt">¥<text class="fontwig6 font16">{{item.goodsActualPrice}}</text> </view> <view class="width100 fcor999 font14 fotrt" v-if="item.goodsActualPrice != item.goodsPrice" style="text-decoration: line-through;"> ¥{{item.goodsPrice}}</view> </view> </view> </view> <view class="width100" style="height: 10px;"> <view class="cro_left_bottom flleft"></view> <view class="cro_right_bottom flright"></view> </view> </view> <view class="width95 alijusnostart"> <view style="width: 6%;"></view> <view style="border-bottom: 1px dashed #bebcbc;width: 93%;"></view> </view> <view class="width94 backcorfff marb20"> <view class="width100" style="height: 10px;"> <view class="cro_left_top flleft"></view> <view class="cro_right_top flright"></view> </view> <view class="width94 alijusstart paddtop10 "> <view class="font15 fcor333 fontwig6 width50">商品小计</view> <view class="font14 fcor666 fotrt width50">金额 <text class="margle fontwig6 font18 fcor333">¥{{orderList.totalPrice}}</text> </view> </view> <view class="width92 fotrt mart5 font14 fcor999"> 优惠券优惠 <text class="margle fcoreb5 font16 fontwig6">¥ {{orderList.deductionCouponPrice}}</text> </view> <view class="width92 fotrt mart5 font14 fcor999"> 商品优惠 <text class="margle fcoreb5 font16 fontwig6">¥ {{orderList.deductionProductPrice}}</text> </view> <view class="width92 fotrt mart5 font14 fcor999"> 积分抵扣 <text class="margle fcoreb5 font16 fontwig6">¥ {{(orderList.payGold / 100).toFixed(2)}}</text> </view> <view class="width90 mart10 marb10" style="border-bottom: 1px dashed #bebcbc;"></view> <view class="width92 fotrt mart14 font14 fcor333"> 实付 <text class="margle fcoreb5 font22 fontwig6">¥ {{orderList.payPrice}}</text> </view> <view class="width100 height20"></view> </view> <view class="width94 backcorfff marb30" style="border-radius: 12px;"> <view class="width94 alijusstart paddtop10 font16 fontwig6 fcor333"> 订单信息 </view> <view class="width94 alijusstart mart20 font14 fcor666"> <view class="width30">交易单号</view> <view class="width70 fcor333 fotrt">{{orderList.orderNo}}</view> </view> <view class="width94 alijusstart mart20 font14 fcor666" v-if="orderList.paySerialNo"> <view class="width30">流水号</view> <view class="width70 fcor333 fotrt">{{orderList.paySerialNo}}</view> </view> <view class="width94 alijusstart mart20 font14 fcor666"> <view class="width30">下单时间</view> <view class="width70 fcor333 fotrt">{{orderList.createTime | timeFormat('yyyy-mm-dd hh:mm:ss')}}</view> </view> <view class="width94 alijusstart mart20 font14 fcor666"> <view class="width30">支付时间</view> <view class="width70 fcor333 fotrt">{{orderList.payTime | timeFormat('yyyy-mm-dd hh:mm:ss')}}</view> </view> <view class="width94 alijusstart mart20 font14 fcor666" v-if="typeid == 4"> <view class="width30">就餐方式</view> <view class="width70 fotrt" v-if="recinfo.eatType == 1">店内就餐</view> <view class="width70 fcor333 fotrt" v-if="recinfo.eatType == 2">打包带走</view> </view> <view class="width94 alijusstart mart20 font14 fcor666" v-if="orderList.payType"> <view class="width30">支付方式</view> <view class="width70 fcor333 fotrt" v-if="orderList.payType == 2">微信支付</view> <view class="width70 fcor333 fotrt" v-if="orderList.payType == 3">积分兑换</view> <view class="width70 fcor333 fotrt" v-if="orderList.payType == 4">汇联通工会卡</view> <view class="width70 fcor333 fotrt" v-if="orderList.payType == 5">银联支付</view> </view> <view class="width94 alijusstart mart20 font14 fcor666" v-if="typeid == 10"> <view class="width30">充值手机号</view> <view class="width70 fotrt fcor333">{{orderList.remarks}}</view> </view> <view class="width100 height20"></view> </view> <view class="width90 mart10 font13 fcor666" v-if="typeid != 10">友情提示</view> <view class="width90 mart10 font12 fcor999" v-if="typeid != 10">1、如遇到商品售罄,将导致您无法取到所定食物,系统将自动为您安排退款,1个工作日内到账; </view> <view class="width90 mart5 font12 fcor999 marb40" v-if="typeid != 10">2、如遇更多问题,请及时联系在线客服处理。</view> <!-- 再来一单 --> <view class="height50 width100"></view> <view class="bottomstu backcorfff width100 height50 alijusend" v-if="orderList.orderStatus == 3 || orderList.orderStatus == 1"> <!-- #ifdef MP--> <button open-type="contact" class="cusservice font12 fcor666" v-if="orderList.orderStatus == 3">联系客服</button> <!-- #endif --> <!-- #ifdef H5--> <view class="cusservice font12 fcor666 alijus" v-if="orderList.orderStatus == 3" @click="playPhone">联系客服</view> <!-- #endif --> <view class="buybtn font12 fcorfff" v-if="orderList.orderStatus == 1" @click="thirdCancelOrder">取消订单</view> </view> </view> </template> <script> import { getThirdOrderByOrderNo, cancel, getDetailByOrderNo } from '../../Utils/Api.js'; export default { data() { return { orderList: '', sttypeid: 1, countdownh: '', countdownm: '', countdowns: '', productType: '', timer: null, //重复执行 timerdjs: null, //倒计时刷新 typeid: '', //类型区分 orderId: '', //订单id coutnums: 0, //商品数量 typeText: { 1: '待支付', 2: '已支付', 3: '已完成', 4: '已退款', 5: '已取消', 6: '退款中', 7: '退款失败' }, phonestu: 1, // 手机号查看状态 recinfo: [], // 订单详情 } }, onLoad(options) { this.orderId = options.id; }, onShow() { this.getDetailByOrderNo(); }, onUnload() { clearInterval(this.timer); clearInterval(this.timerdjs); console.log('') }, methods: { //修改状态 updatestu(item) { this.phonestu = item; }, getAllCount() { this.orderList.highChildOrderList.forEach((food) => { this.coutnums += food.saleCount }) }, //查询订单详情 getDetailByOrderNo() { uni.showLoading({ title: '加载中...' }) let params = { orderNo: this.orderId, } getDetailByOrderNo(params).then(res => { uni.hideLoading(); // if (res.return_code == '000000') { // this.recinfo = res.return_data; // } if (res.return_code == '000000') { this.typeid = res.return_data.highChildOrderList[0].goodsType; this.orderList = res.return_data; if (this.orderList.orderStatus == 1) { this.timer = setInterval(() => { this.showtime() }, 1000) } if (this.orderList.orderStatus == 2) { this.setTimer(); } this.coutnums = 0; this.getAllCount(); this.getThirdOrderByOrderNo(); } else { uni.showToast({ title: res.return_msg, icon: 'none', duration: 2000 }) } }) }, //查询商品详情 getThirdOrderByOrderNo() { let datas = { orderNo: this.orderId } getThirdOrderByOrderNo(datas).then(res => { uni.hideLoading(); if (res.return_code == '000000') { this.recinfo = res.return_data; } else { uni.showToast({ title: res.return_msg, icon: 'none', duration: 2000 }) } }) }, //取消订单 thirdCancelOrder() { let that = this; uni.showModal({ title: '取消订单', content: '确定取消此订单?', success: (res) => { if (res.confirm) { uni.showLoading({ title: '加载中...' }) let params = { orderNo: this.orderId, } cancel(params).then(res => { if (res.return_code == '000000') { uni.hideLoading(); uni.showToast({ title: res.return_data, icon: 'none', duration: 2000 }) let pages = getCurrentPages() //页面栈 let prePage = pages[pages.length - 2] //上一页 prePage.$vm.reFresh = Math.random() //触发上一页监听器 uni.navigateBack({}) } else { uni.showToast({ title: res.return_msg, icon: 'none', duration: 2000 }) uni.hideLoading() } }) return; } else if (res.cancel) { console.log('用户点击取消'); } } }); }, //跳转支付 jumppay() { uni.redirectTo({ url: '/qianzhu-KFC/payment-method/payment-method?orderId=' + this.orderList.orderNo + '&amount=' + this.orderList.payPrice + '&productType=' + this.orderList.productType }) }, //选择方式 changedissr(item) { this.sttypeid = item; }, //定时刷新 setTimer() { let holdTime = 10; this.timerdjs = setInterval(() => { if (holdTime <= 0) { clearInterval(this.timerdjs); this.getThirdOrderByOrderNo(); holdTime = 10; return; } holdTime--; }, 1000) }, //拨打客服电话 playPhone() { uni.showModal({ title: '客服', content: '4006780738', success: function(res) { if (res.confirm) { uni.makePhoneCall({ phoneNumber: '4006780738', //电话号码 success: function(e) { console.log(e); }, fail: function(e) { console.log(e); } }) } } }) }, //倒计时 showtime() { var nowtime = new Date(), //获取当前时间 endtime = this.orderList.createTime + 600000; //定义结束时间 var lefttime = endtime - nowtime, //距离结束时间的毫秒数 leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)), //计算天数 lefth = Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd * 24) < 10 ? "0" + Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd * 24) : Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd * 24), //计算小时数 leftm = Math.floor(lefttime / (1000 * 60) % 60) < 10 ? "0" + Math.floor(lefttime / (1000 * 60) % 60) : Math.floor(lefttime / (1000 * 60) % 60), //计算分钟数 lefts = Math.floor(lefttime / 1000 % 60) < 10 ? "0" + Math.floor(lefttime / 1000 % 60) : Math.floor( lefttime / 1000 % 60); //计算秒数 this.countdownh = lefth //返回倒计时的字符串 this.countdownm = leftm //返回倒计时的字符串 this.countdowns = lefts //返回倒计时的字符串 // 倒计时结束时,显示00:00:00 if (lefttime < 0) { this.getThirdOrderByOrderNo(); clearInterval(this.timer); this.countdownh = this.countdownm = this.countdowns = "00" } } } } </script> <style lang="scss"> page { background-color: #f0f0f0; } .headstu { width: 90px; height: 90px; line-height: 90px; text-align: center; border-radius: 50%; background-color: #C6DEF4; color: #0189E7; margin-left: auto; margin-right: auto; border: 1px solid #0096FF; } .headotherstu { width: 80px; height: 80px; line-height: 80px; text-align: center; border-radius: 50%; margin-left: auto; margin-right: auto; background-color: #999999; } .stubtn { width: 30%; height: 35px; line-height: 35px; border-radius: 25px; color: #ffffff; margin-left: 35%; } .colorc72 { color: #c72a20; } .phoneck { height: 35px; line-height: 35px; font-size: 12px; box-sizing: border-box; background-color: #0F8FE8; color: #ffffff; } .headsbg { // border-radius: 0 0 30px 30px; background: linear-gradient(to bottom, #3da7e7, #e8eff4); } .cro_left_top, .cro_right_top, .cro_left_bottom, .cro_right_bottom { width: 20rpx; height: 20rpx; background: #f0f0f0; } .cro_left_top { border-radius: 0px 0px 20rpx 0px; } .cro_right_top { border-radius: 0px 0px 0px 20rpx; } .cro_left_bottom { border-radius: 0px 20rpx 0px 0px; } .cro_right_bottom { border-radius: 20rpx 0px 0px 0px; } .footbtn { bottom: 0px; position: fixed; } .btnpay { width: 90px; background-color: #c72a20; border-radius: 22px; height: 36px; line-height: 36px; } .takemode { width: 48%; border-radius: 5px; border: 1px solid #999999; } .aftermode { background-color: #faf1f1; color: #c72a20; } .canbtn { border: 1px solid #313131; color: #333333; width: 80px; border-radius: 25px; text-align: center; } .bottomstu { position: fixed; bottom: 0px; border-top: 1px solid #cecdcd; } .cusservice { height: 30px; width: 90px; margin-right: 20px; border: 1px solid #6c6c6c; border-radius: 25px; } .buybtn { height: 30px; width: 90px; line-height: 30px; text-align: center; margin-right: 20px; background-color: #999999; border-radius: 25px; } .medldcode { background-color: #D20507; padding-left: 8px; padding-right: 8px; position: absolute; margin-left: 2px; } </style>