You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
547 lines
17 KiB
547 lines
17 KiB
<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">
|
|
<button open-type="contact" class="cusservice font12 fcor666">联系客服</button>
|
|
<!-- <view class="buybtn font12 fcorfff">再来一单</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()
|
|
})
|
|
}
|
|
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)
|
|
},
|
|
//倒计时
|
|
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: #009dff;
|
|
border-radius: 25px;
|
|
}
|
|
|
|
.medldcode {
|
|
background-color: #D20507;
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
position: absolute;
|
|
margin-left: 2px;
|
|
}
|
|
</style>
|
|
|