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>
<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">
<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">
......@@ -10,7 +35,7 @@
<div class="code">取单码 {{ orderInfo.orderNum }}</div>
<!-- <image mode="scaleToFill" :src="qrCode" class="qr_code"></image> -->
<div class="qr_code_readly">
<image mode="scaleToFill" :src="qrCode" class="qr"></image>
<image mode="scaleToFill" :src="orderInfo.pickCode" class="qr"></image>
</div>
<!-- <view class="status_text" v-if="showMask">——制作完成后才能扫哦——</view> -->
<div class="flow_describe">
......@@ -53,18 +78,22 @@
</template>
<script>
import Order from "@/request/order";
export default {
data() {
return {
orderInfo: {},
shopInfo:{},
qrCode: '',
show: false,
clientYStart:0,
clientYEnd:0,
bigBox:{},
buied: false,
popupStyle:{
'transform':'translate(0rpx, 0rpx)'
}
},
timer: ''
}
},
computed: {
......@@ -97,12 +126,47 @@ export default {
default:
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: {
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() {
uni.navigateTo({url:'/orderSubPackage/pages/showhow/index'})
},
......@@ -138,7 +202,7 @@ export default {
open(data, path) {
this.popupStyle.transform = 'translateY(0px)'
this.show = true;
this.orderInfo = data;
// this.orderInfo = data;
// console.log("order:"+JSON.stringify(this.orderInfo));
// if(this.showMask) {
......@@ -150,6 +214,10 @@ export default {
jsonParse(json) {
return JSON.parse(json)
},
cleanTimeout() {
clearTimeout(this.timer)
console.log('onUnload')
}
}
}
</script>
......@@ -387,4 +455,104 @@ export default {
display: flex;
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>
\ No newline at end of file
orderSubPackage/pages/orderInfo/index.vue
......@@ -27,7 +27,7 @@
>
<view class="code">
<view class="code_label">取单号:</view>
<view class="code_content">1978</view>
<view class="code_content">{{orderInfo.orderNum}}</view>
</view>
<view class="tips">
<view v-if="orderInfo.state == 7">制作完成请取杯，享用愉快！</view>
......@@ -42,7 +42,10 @@
</view>
<view class="statusTip">
<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>
......@@ -97,6 +100,7 @@
class="qr"
/>
</div>
<div class="ercodeTip">制作完成后,扫描此二维码取杯。</div>
<!-- <view class="scan_tips" v-if="qrTextShow">——制作完成后才能扫哦——</view> -->
<canvas
v-if="qrShow"
......@@ -140,6 +144,17 @@
src="/static/imgs/saomaliucheng.png"
/>
</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 class="shop_info">
<div class="address">
......@@ -264,6 +279,10 @@ export default {
uni.setStorageSync("goodsList", {});
// this.backToMneu = false
},
onUnload() {
clearTimeout(this.timer)
console.log('onUnload')
},
// onUnload(){
// this.goBack()
// },
......@@ -277,9 +296,27 @@ export default {
backFlag: false,
backToMneu: false,
Authorization: "",
timer:""
};
},
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() {
uni.navigateTo({ url: "/orderSubPackage/pages/showhow/index" });
},
......@@ -393,6 +430,7 @@ export default {
(await Order.getOrderWaiteTime({ orderId: oId })) || {};
this.waitTime = data?.data;
}
this.startTimeOut()
if (isBuild) {
// new QRCode('myQrcode', {
// text: this.orderInfo.pickCode+'###',
......@@ -606,9 +644,57 @@ export default {
height: 100%;
width: 100rpx;
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 {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
......
pages/menu/menu.vue
......@@ -63,7 +63,8 @@
</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="first"
>取单码：<text class="first-code">{{
......@@ -87,7 +88,7 @@
</view>
<view class="barCode-dis">点击二维码取单</view>
</view>
</view>
</view> -->
<MenuAssembly
ref="MenuAssembly"
@getallNum="getallNum"
......@@ -98,7 +99,6 @@
<!-- <u-picker @cancel="show = false" :show="show" :immediateChange="true" ref="uPicker" :columns="columns"
@confirm="confirm" keyName="name" @change="changeHandler"></u-picker> -->
<AreaPicker ref="AreaPicker" />
<OrderQrCode ref="OrderQrCode" />
<canvas
class="canvas-code"
canvas-id="myQrcode2"
......@@ -257,6 +257,7 @@ export default {
},
onHide() {
this.$refs.shopbar.showShopCar = false;
this.$refs.OrderQrCode.cleanTimeout(this.shopInfo);
},
// 微信小程序右上角分享
onShareAppMessage() {
......@@ -333,6 +334,9 @@ export default {
// console.log("getHomeOrder:"+JSON.stringify(data.data));
this.buied = true;
this.orderInfo = data.data;
this.$nextTick(()=>{
this.$refs.OrderQrCode.getOrderInfo(this.shopInfo);
})
} else {
this.buied = false;
}
......
request/order/index.js
......@@ -111,7 +111,10 @@ export default {
},
getOrderDetail(params) {
return uni.$u.http
.get(`/order/${params.orderId}`)
.get(`/order/${params.orderId}`,{
params: {},
custom: { noLoading: params.nodLoading },
})
.then((res) => res)
.catch((err) => {
// uni.showToast({ title: '哎哟！刚刚走神了，请退出后重进', icon: 'none' })
......@@ -120,7 +123,10 @@ export default {
},
getOrderWaiteTime(params) {
return uni.$u.http
.get(`/app/getWaitTineByOrderId?orderId=${params.orderId}`)
.get(`/app/getWaitTineByOrderId?orderId=${params.orderId}`,{
params: {},
custom: { noLoading: params.nodLoading },
})
.then((res) => res)
.catch((err) => {
// 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