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.
266 lines
8.4 KiB
266 lines
8.4 KiB
<template>
|
|
<view>
|
|
<view class="width100 height220 headsbg backcorfff fotct" v-if="orderList.orderStatus == 1">
|
|
<view class="height20"></view>
|
|
<view class="headstu font18 fontwig6">
|
|
{{countdownm}}:{{countdowns}}
|
|
</view>
|
|
<!-- && orderList.orderStatus != 2 -->
|
|
|
|
|
|
<view class="width100 font18 colorc72 mart5" v-if="orderList.orderStatus == 1">
|
|
{{typeText[orderList.orderStatus]}}</view>
|
|
<view class="width100 font14 fcor666 mart5" v-if="orderList.orderStatus == 1">若超时未支付,订单将自动取消</view>
|
|
<view class="stubtn mart15 backcorf2f6" v-if="typeid == 9 && orderList.orderStatus == 1">立即支付</view>
|
|
<view class="stubtn mart15" v-if="typeid == 4 && orderList.orderStatus == 1"
|
|
style="background-color: #c72a20;">立即支付</view>
|
|
</view>
|
|
|
|
<view class="width100 height150 headsbg backcorfff fotct" v-if="orderList.orderStatus != 1 && orderList.orderStatus != 3">
|
|
<view class="headotherstu alijus font18 fontwig6">
|
|
<image mode="widthFix" class="width50" src="../static/imgs/otherstu.png"></image>
|
|
</view>
|
|
<view class="width100 font18 fcor666 mart15" v-if="orderList.orderStatus != 1">
|
|
{{typeText[orderList.orderStatus]}}</view>
|
|
</view>
|
|
<!-- <view class="width96 mart20 colorc3 font12 fotct">
|
|
注:约5分钟后取餐,请尽快到餐厅取餐哦
|
|
</view> -->
|
|
|
|
<view class="concont width94 mart10 backcorfff">
|
|
<view class="width94 paddtop10 font16 fontwig6">
|
|
餐品明细
|
|
</view>
|
|
<view class="width100 bor-botm1 mart10 marb10"></view>
|
|
<view class="width100">
|
|
<view class="width100 alijusstart mart10 bor-botm1" v-for="(item,index) in orderList.highChildOrderList"
|
|
:key="index">
|
|
<view class="width30">
|
|
<image :src="item.goodsImg" mode="widthFix" class="width100"></image>
|
|
</view>
|
|
<view class="width40 font13 fcor666">{{item.goodsName}}</view>
|
|
<view class="width10 font12 fcor999">x{{item.saleCount}}</view>
|
|
<view class="width20">
|
|
<view class="width100 fcor333 font12">¥<text class="fontwig6 font16">{{item.totalPrice}}</text>
|
|
</view>
|
|
<view class="width100 fcor999 font12" style="text-decoration: line-through;">
|
|
¥{{item.goodsPrice}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="width90 fotrt height50 font13 fcor999">
|
|
共 <text class="fcor333 fontwig6" style="margin: 0px 5px;"> {{coutnums}} </text> 件 小计:
|
|
<text class="font16 colorc3 fontwig6 margle" v-if="typeid == 4 "> ¥{{orderList.payRealPrice}}</text>
|
|
<text class="font16 color2f6f43 fontwig6 margle" v-if="typeid == 9 ">
|
|
¥{{orderList.payRealPrice}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="concont width94 mart10 backcorfff marb30">
|
|
<view class="width94 alijusstart paddtop10 font14 fcor666">
|
|
订单信息
|
|
</view>
|
|
<!-- <view class="width94 alijusstart mart20 font14 fcor666">
|
|
<view class="width30">取餐门店</view>
|
|
<view class="width70 fotrt">{{orderList.storeName}}-{{orderList.storeAddress}}</view>
|
|
</view> -->
|
|
<view class="width94 alijusstart mart20 font14 fcor666">
|
|
<view class="width30">订单号</view>
|
|
<view class="width70 fotrt">{{orderList.orderNo}}</view>
|
|
</view>
|
|
<view class="width94 alijusstart mart20 font14 fcor666" v-if="typeid == 4">
|
|
<view class="width30">就餐方式</view>
|
|
<view class="width70 fotrt" v-if="orderList.eatType == 1">店内就餐</view>
|
|
<view class="width70 fotrt" v-if="orderList.eatType == 2">打包带走</view>
|
|
</view>
|
|
<view class="width94 alijusstart mart20 font14 fcor666">
|
|
<view class="width30">支付方式</view>
|
|
<view class="width70 fotrt">{{typeText[orderList.orderStatus]}}</view>
|
|
</view>
|
|
<view class="width94 alijusstart mart20 font14 fcor666" v-if="orderList.kfcOrderMobileRemark">
|
|
<view class="width30">联系方式</view>
|
|
<view class="width70 fotrt">{{orderList.kfcOrderMobileRemark}}</view>
|
|
</view>
|
|
|
|
<view class="width94 alijusend mart20 font14 fcor666 paddbotm20" v-if="orderList.orderStatus == 1">
|
|
<view class="canbtn height30 marRight20">取消订单</view>
|
|
<!-- <view class="canbtn height30">联系客服</view> -->
|
|
</view>
|
|
</view>
|
|
<view class="width90 mart10 font13 fcor666">友情提示</view>
|
|
<view class="width90 mart10 font12 fcor999">1、如遇到商品售罄，将导致您无法取到所定食物，系统将自动为您安排退款，1个工作日内到账；</view>
|
|
<view class="width90 mart5 font12 fcor999 marb40">2、如遇更多问题，请及时联系在线客服处理。</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getThirdOrderByOrderId
|
|
} from '../../Utils/Api.js';
|
|
export default {
|
|
data() {
|
|
return {
|
|
orderList: '',
|
|
sttypeid: 1,
|
|
countdownh: '',
|
|
countdownm: '',
|
|
countdowns: '',
|
|
productType: '',
|
|
timer: null, //重复执行
|
|
typeid: '', //类型区分
|
|
orderId: '', //订单id
|
|
coutnums: 0, //商品数量
|
|
typeText: {
|
|
1: '待支付',
|
|
2: '已支付',
|
|
3: '已完成',
|
|
4: '已退款',
|
|
5: '已取消',
|
|
6: '退款中',
|
|
7: '退款失败'
|
|
},
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.orderId = options.id;
|
|
this.getThirdOrderByOrderId();
|
|
this.timer = setInterval(() => {
|
|
this.showtime()
|
|
})
|
|
},
|
|
onUnload() {
|
|
clearInterval(this.timer);
|
|
},
|
|
methods: {
|
|
getAllCount() {
|
|
this.orderList.highChildOrderList.forEach((food) => {
|
|
this.coutnums += food.saleCount
|
|
})
|
|
},
|
|
//查询订单详情
|
|
getThirdOrderByOrderId() {
|
|
uni.showLoading({
|
|
title: '加载中...'
|
|
})
|
|
let datas = {
|
|
orderId: this.orderId
|
|
}
|
|
getThirdOrderByOrderId(datas).then(res => {
|
|
uni.hideLoading();
|
|
if (res.return_code == '000000') {
|
|
this.typeid = res.return_data.highChildOrderList[0].goodsType;
|
|
this.orderList = res.return_data;
|
|
this.getAllCount();
|
|
}
|
|
})
|
|
},
|
|
//选择方式
|
|
changedissr(item) {
|
|
this.sttypeid = item;
|
|
},
|
|
//倒计时
|
|
showtime() {
|
|
// console.log('======'+nowtime.getTime());
|
|
var nowtime = new Date(), //获取当前时间
|
|
endtime = new Date("2022/7/5"); //定义结束时间
|
|
var lefttime = endtime.getTime() - nowtime.getTime(), //距离结束时间的毫秒数
|
|
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.countdownh = this.countdownm = this.countdowns = "00"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.headstu {
|
|
width: 80px;
|
|
height: 80px;
|
|
line-height: 80px;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
background-color: #faf1f1;
|
|
color: #c72a20;
|
|
margin-left: 40%;
|
|
border: 1px solid #c72a20;
|
|
}
|
|
|
|
.headotherstu {
|
|
width: 80px;
|
|
height: 80px;
|
|
line-height: 80px;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
margin-left: 40%;
|
|
background-color: #999999;
|
|
}
|
|
|
|
.stubtn {
|
|
width: 30%;
|
|
height: 35px;
|
|
line-height: 35px;
|
|
border-radius: 25px;
|
|
color: #ffffff;
|
|
margin-left: 35%;
|
|
}
|
|
|
|
.colorc72 {
|
|
color: #c72a20;
|
|
}
|
|
|
|
.headsbg {
|
|
border-radius: 0 0 30px 30px;
|
|
}
|
|
|
|
.concont {
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
</style>
|
|
|