Skip to content

U
user
Commit 170cd1d0 by songbingqi
Options

完成倒计时5秒开发

parent b78432e3
Showing with 278 additions and 13 deletions
components/OrderQrCode/index.vue
<template> <template>
<div> <div>
<view class="order-banner" @click="open">
<view class="info">
<view class="first"
>取单码：<text class="first-code">{{
orderInfo.orderNum
}}</text></view
>
<view class="second1" v-if="orderInfo.state == '4'"
>订单已制作完成，请尽快取餐~</view
>
<view class="second" v-else
>请您耐心等候，剩余等候时间<text class="time">{{
orderInfo.waitTime
}}</text
>分钟</view
>
</view>
<view class="line"></view>
<view class="barCode-box">
<view class="barCode">
<image :src="'/static/imgs/icon-barcode.png'"></image>
</view>
<view class="barCode-dis">点击二维码取单</view>
</view>
</view>
<u-popup :show="show" :round="10" mode="bottom" :safeAreaInsetBottom="false" @close="close" zIndex="10078" :customStyle="popupStyle"> <u-popup :show="show" :round="10" mode="bottom" :safeAreaInsetBottom="false" @close="close" zIndex="10078" :customStyle="popupStyle">
<view class="bigBox" :style="{'margin-top':'-20rpx'}" @touchstart="start" @touchmove.stop.prevent="move" @touchend="end" ref="op"> <view class="bigBox" :style="{'margin-top':'-20rpx'}" @touchstart="start" @touchmove.stop.prevent="move" @touchend="end" ref="op">
<scroll-view class="scroll-view" :scroll-y="true"> <scroll-view class="scroll-view" :scroll-y="true">
...@@ -10,7 +35,7 @@ ...@@ -10,7 +35,7 @@
<div class="code">取单码 {{ orderInfo.orderNum }}</div> <div class="code">取单码 {{ orderInfo.orderNum }}</div>
<!-- <image mode="scaleToFill" :src="qrCode" class="qr_code"></image> --> <!-- <image mode="scaleToFill" :src="qrCode" class="qr_code"></image> -->
<div class="qr_code_readly"> <div class="qr_code_readly">
<image mode="scaleToFill" :src="qrCode" class="qr"></image> <image mode="scaleToFill" :src="orderInfo.pickCode" class="qr"></image>
</div> </div>
<!-- <view class="status_text" v-if="showMask">——制作完成后才能扫哦——</view> --> <!-- <view class="status_text" v-if="showMask">——制作完成后才能扫哦——</view> -->
<div class="flow_describe"> <div class="flow_describe">
...@@ -53,18 +78,22 @@ ...@@ -53,18 +78,22 @@
</template> </template>
<script> <script>
import Order from "@/request/order";
export default { export default {
data() { data() {
return { return {
orderInfo: {}, orderInfo: {},
shopInfo:{},
qrCode: '', qrCode: '',
show: false, show: false,
clientYStart:0, clientYStart:0,
clientYEnd:0, clientYEnd:0,
bigBox:{}, bigBox:{},
buied: false,
popupStyle:{ popupStyle:{
'transform':'translate(0rpx, 0rpx)' 'transform':'translate(0rpx, 0rpx)'
} },
timer: ''
} }
}, },
computed: { computed: {
...@@ -97,12 +126,47 @@ export default { ...@@ -97,12 +126,47 @@ export default {
default: default:
return '' return ''
} }
} },
userms() {
return this.$store.getters.Authorization;
},
}, },
mounted() { async mounted() {
// console.log(123,this.shopInfo)
// if (!this.userms) return;
// const res = await Order.getHomeOrder({ shopId: this.shopInfo.id });
// const data = res?.data;
// console.log(data,123)
// if (data?.data) {
// // this.$set(data.data, 'state', '2');
// // console.log("getHomeOrder:"+JSON.stringify(data.data));
// this.buied = true;
// this.orderInfo ={...data.data};
// } else {
// this.buied = false;
// }
}, },
methods: { methods: {
async getOrderInfo(shopInfo) {
console.log(1)
if(shopInfo)this.shopInfo = shopInfo
if (!this.userms) return;
const res = await Order.getHomeOrder({ shopId: this.shopInfo.id });
const data = res?.data;
if (data?.data) {
// this.$set(data.data, 'state', '2');
// console.log("getHomeOrder:"+JSON.stringify(data.data));
this.buied = true;
this.timer = setTimeout(() => {
this.getOrderInfo()
clearTimeout(this.timer)
}, 5000);
this.orderInfo ={...data.data};
} else {
clearTimeout(this.timer)
this.buied = false;
}
},
goShow() { goShow() {
uni.navigateTo({url:'/orderSubPackage/pages/showhow/index'}) uni.navigateTo({url:'/orderSubPackage/pages/showhow/index'})
}, },
...@@ -138,7 +202,7 @@ export default { ...@@ -138,7 +202,7 @@ export default {
open(data, path) { open(data, path) {
this.popupStyle.transform = 'translateY(0px)' this.popupStyle.transform = 'translateY(0px)'
this.show = true; this.show = true;
this.orderInfo = data; // this.orderInfo = data;
// console.log("order:"+JSON.stringify(this.orderInfo)); // console.log("order:"+JSON.stringify(this.orderInfo));
// if(this.showMask) { // if(this.showMask) {
...@@ -150,6 +214,10 @@ export default { ...@@ -150,6 +214,10 @@ export default {
jsonParse(json) { jsonParse(json) {
return JSON.parse(json) return JSON.parse(json)
}, },
cleanTimeout() {
clearTimeout(this.timer)
console.log('onUnload')
}
} }
} }
</script> </script>
...@@ -387,4 +455,104 @@ export default { ...@@ -387,4 +455,104 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.order-banner {
width: 718rpx;
height: 179rpx;
background: #ffffff;
box-shadow: -2px -2px 8px 0px rgba(102, 102, 102, 0.1),
2px 2px 8px 0px rgba(102, 102, 102, 0.1);
box-sizing: border-box;
position: relative;
left: 16rpx;
top: 0rpx;
z-index: 10;
display: flex;
justify-content: flex-start;
.info {
padding-left: 34.48rpx;
.first {
height: 44rpx;
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #666666;
line-height: 44rpx;
margin-top: 44rpx;
.first-code {
font-family: Arial, Helvetica SC;
font-size: 28rpx;
color: #333333;
}
}
.second1,
.second {
margin-top: 12rpx;
width: 400rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
letter-spacing: 0rpx;
text-shadow: -2px -4px 8px rgba(102, 102, 102, 0.1);
white-space: nowrap;
.time {
font-size: 32rpx;
font-family: Futura Medium, Arial, sans-serif;
font-weight: normal;
color: #0050f6;
margin: 0 16rpx;
}
}
.second1 {
margin-top: 20rpx;
}
}
.line {
width: 4rpx;
height: 104rpx;
border-right: 1rpx solid #e8e8e8;
position: absolute;
left: 510rpx;
box-shadow: -2px -4px 8px 0px rgba(102, 102, 102, 0.1);
top: 36rpx;
}
.barCode-box {
margin-top: 30rpx;
margin-left: 115rpx;
width: 150rpx;
height: 122rpx;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex-direction: column;
.barCode {
width: 86rpx;
height: 86rpx;
image {
width: 100%;
height: 100%;
}
}
.barCode-dis {
text-align: center;
margin-top: 12rpx;
font-size: 16rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #999999;
line-height: 22rpx;
}
}
}
</style> </style>
\ No newline at end of file
orderSubPackage/pages/orderInfo/index.vue
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
> >
<view class="code"> <view class="code">
<view class="code_label">取单号:</view> <view class="code_label">取单号:</view>
<view class="code_content">1978</view> <view class="code_content">{{orderInfo.orderNum}}</view>
</view> </view>
<view class="tips"> <view class="tips">
<view v-if="orderInfo.state == 7">制作完成请取杯，享用愉快！</view> <view v-if="orderInfo.state == 7">制作完成请取杯，享用愉快！</view>
...@@ -42,7 +42,10 @@ ...@@ -42,7 +42,10 @@
</view> </view>
<view class="statusTip"> <view class="statusTip">
<view class="tip_box"> <view class="tip_box">
<view class="tip"></view> <view class="tip">
<view class="icon"></view>
<view class="tip_tittle">1待制作</view>
</view>
<view class="tip"></view> <view class="tip"></view>
<view class="tip"></view> <view class="tip"></view>
</view> </view>
...@@ -97,6 +100,7 @@ ...@@ -97,6 +100,7 @@
class="qr" class="qr"
/> />
</div> </div>
<div class="ercodeTip">制作完成后,扫描此二维码取杯。</div>
<!-- <view class="scan_tips" v-if="qrTextShow">——制作完成后才能扫哦——</view> --> <!-- <view class="scan_tips" v-if="qrTextShow">——制作完成后才能扫哦——</view> -->
<canvas <canvas
v-if="qrShow" v-if="qrShow"
...@@ -140,6 +144,17 @@ ...@@ -140,6 +144,17 @@
src="/static/imgs/saomaliucheng.png" src="/static/imgs/saomaliucheng.png"
/> />
</div> </div>
<div class="takeCupTip">
<div class="text">
<view>查看实景取杯演示</view>
<image
class="arrow"
:style="{ height: '18rpx', width: '10rpx' }"
:src="'../../../static/imgs/jiantouhui.png'"
/>
</div>
<div class="btn">退款</div>
</div>
</div> </div>
<div class="shop_info"> <div class="shop_info">
<div class="address"> <div class="address">
...@@ -264,6 +279,10 @@ export default { ...@@ -264,6 +279,10 @@ export default {
uni.setStorageSync("goodsList", {}); uni.setStorageSync("goodsList", {});
// this.backToMneu = false // this.backToMneu = false
}, },
onUnload() {
clearTimeout(this.timer)
console.log('onUnload')
},
// onUnload(){ // onUnload(){
// this.goBack() // this.goBack()
// }, // },
...@@ -277,9 +296,27 @@ export default { ...@@ -277,9 +296,27 @@ export default {
backFlag: false, backFlag: false,
backToMneu: false, backToMneu: false,
Authorization: "", Authorization: "",
timer:""
}; };
}, },
methods: { methods: {
startTimeOut() {
this.timer = setTimeout(async () => {
const { data = {} } = await Order.getOrderDetail({ orderId: this.orderInfo.id, nodLoading:true })
this.orderInfo = data?.data
const getTime = ["2", "3"].indexOf(this.orderInfo.state) >= 0;
const isBuild = ["2", "3", "4", "5"].indexOf(this.orderInfo.state) >= 0;
if (getTime) {
const { data = {} } = (await Order.getOrderWaiteTime({ orderId: this.orderInfo.id, nodLoading:true })) || {};
this.waitTime = data?.data;
}
if (isBuild) {
this.ewmImg = this.orderInfo.pickCode;
}
clearTimeout(this.timer)
this.startTimeOut()
}, 5000);
},
goShow() { goShow() {
uni.navigateTo({ url: "/orderSubPackage/pages/showhow/index" }); uni.navigateTo({ url: "/orderSubPackage/pages/showhow/index" });
}, },
...@@ -393,6 +430,7 @@ export default { ...@@ -393,6 +430,7 @@ export default {
(await Order.getOrderWaiteTime({ orderId: oId })) || {}; (await Order.getOrderWaiteTime({ orderId: oId })) || {};
this.waitTime = data?.data; this.waitTime = data?.data;
} }
this.startTimeOut()
if (isBuild) { if (isBuild) {
// new QRCode('myQrcode', { // new QRCode('myQrcode', {
// text: this.orderInfo.pickCode+'###', // text: this.orderInfo.pickCode+'###',
...@@ -606,9 +644,57 @@ export default { ...@@ -606,9 +644,57 @@ export default {
height: 100%; height: 100%;
width: 100rpx; width: 100rpx;
border: 1rpx solid green; border: 1rpx solid green;
.icon {
width: 60rpx;
height: 60rpx;
margin: 5rpx auto;
border: 1rpx solid pink;
}
.tip_tittle {
text-align: center;
font-size: 25rpx;
}
} }
} }
} }
.ercodeTip {
margin: 10rpx 0rpx;
text-align: center;
font-weight: bolder;
font-size: 30rpx;
}
.takeCupTip {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0rpx 32rpx;
.text {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
display: flex;
align-items: center;
image {
margin-left: 10rpx;
}
}
.btn {
border: 1rpx solid gray;
border-radius: 5rpx;
text-align: center;
background: rgb(255, 255, 255);
color: black;
font-size: 27rpx;
letter-spacing: 5rpx;
line-height: 64rpx;
width: 180rpx;
}
}
.btn { .btn {
font-size: 24rpx; font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
......
pages/menu/menu.vue
...@@ -63,7 +63,8 @@ ...@@ -63,7 +63,8 @@
</view> </view>
</view> </view>
</view> </view>
<view class="order-banner" v-if="buied" @click="openQrcode"> <OrderQrCode ref="OrderQrCode" v-if="buied" :shopInfo="shopInfo" :userms="userms"/>
<!-- <view class="order-banner" v-if="buied" @click="openQrcode">
<view class="info"> <view class="info">
<view class="first" <view class="first"
>取单码：<text class="first-code">{{ >取单码：<text class="first-code">{{
...@@ -87,7 +88,7 @@ ...@@ -87,7 +88,7 @@
</view> </view>
<view class="barCode-dis">点击二维码取单</view> <view class="barCode-dis">点击二维码取单</view>
</view> </view>
</view> </view> -->
<MenuAssembly <MenuAssembly
ref="MenuAssembly" ref="MenuAssembly"
@getallNum="getallNum" @getallNum="getallNum"
...@@ -98,7 +99,6 @@ ...@@ -98,7 +99,6 @@
<!-- <u-picker @cancel="show = false" :show="show" :immediateChange="true" ref="uPicker" :columns="columns" <!-- <u-picker @cancel="show = false" :show="show" :immediateChange="true" ref="uPicker" :columns="columns"
@confirm="confirm" keyName="name" @change="changeHandler"></u-picker> --> @confirm="confirm" keyName="name" @change="changeHandler"></u-picker> -->
<AreaPicker ref="AreaPicker" /> <AreaPicker ref="AreaPicker" />
<OrderQrCode ref="OrderQrCode" />
<canvas <canvas
class="canvas-code" class="canvas-code"
canvas-id="myQrcode2" canvas-id="myQrcode2"
...@@ -257,6 +257,7 @@ export default { ...@@ -257,6 +257,7 @@ export default {
}, },
onHide() { onHide() {
this.$refs.shopbar.showShopCar = false; this.$refs.shopbar.showShopCar = false;
this.$refs.OrderQrCode.cleanTimeout(this.shopInfo);
}, },
// 微信小程序右上角分享 // 微信小程序右上角分享
onShareAppMessage() { onShareAppMessage() {
...@@ -333,6 +334,9 @@ export default { ...@@ -333,6 +334,9 @@ export default {
// console.log("getHomeOrder:"+JSON.stringify(data.data)); // console.log("getHomeOrder:"+JSON.stringify(data.data));
this.buied = true; this.buied = true;
this.orderInfo = data.data; this.orderInfo = data.data;
this.$nextTick(()=>{
this.$refs.OrderQrCode.getOrderInfo(this.shopInfo);
})
} else { } else {
this.buied = false; this.buied = false;
} }
......
request/order/index.js
...@@ -111,7 +111,10 @@ export default { ...@@ -111,7 +111,10 @@ export default {
}, },
getOrderDetail(params) { getOrderDetail(params) {
return uni.$u.http return uni.$u.http
.get(`/order/${params.orderId}`) .get(`/order/${params.orderId}`,{
params: {},
custom: { noLoading: params.nodLoading },
})
.then((res) => res) .then((res) => res)
.catch((err) => { .catch((err) => {
// uni.showToast({ title: '哎哟！刚刚走神了，请退出后重进', icon: 'none' }) // uni.showToast({ title: '哎哟！刚刚走神了，请退出后重进', icon: 'none' })
...@@ -120,7 +123,10 @@ export default { ...@@ -120,7 +123,10 @@ export default {
}, },
getOrderWaiteTime(params) { getOrderWaiteTime(params) {
return uni.$u.http return uni.$u.http
.get(`/app/getWaitTineByOrderId?orderId=${params.orderId}`) .get(`/app/getWaitTineByOrderId?orderId=${params.orderId}`,{
params: {},
custom: { noLoading: params.nodLoading },
})
.then((res) => res) .then((res) => res)
.catch((err) => { .catch((err) => {
// uni.showToast({ title: '哎哟！刚刚走神了，请退出后重进', icon: 'none' }) // uni.showToast({ title: '哎哟！刚刚走神了，请退出后重进', icon: 'none' })
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment