|
@@ -7,9 +7,15 @@
|
|
|
<!-- 标题区域 -->
|
|
<!-- 标题区域 -->
|
|
|
<view class="header_title">订单详情</view>
|
|
<view class="header_title">订单详情</view>
|
|
|
<!-- 返回图标区域 -->
|
|
<!-- 返回图标区域 -->
|
|
|
- <img class="header_icon" src="../../static/index/left.png" @click="handleBack" />
|
|
|
|
|
|
|
+ <view class="header_icon" @click="handleBack">
|
|
|
|
|
+ <img src="../../static/index/left.png" />
|
|
|
|
|
+ </view>
|
|
|
|
|
|
|
|
<view class="header_type" v-if="info.orderStatus === '1'">待支付</view>
|
|
<view class="header_type" v-if="info.orderStatus === '1'">待支付</view>
|
|
|
|
|
+ <view class="header_time" v-if="info.orderStatus === '1'">
|
|
|
|
|
+ 剩余
|
|
|
|
|
+ <uv-count-down :time="info.countDownTime" format="mm:ss" @finish="finish(info)"></uv-count-down>
|
|
|
|
|
+ </view>
|
|
|
<view class="header_info" v-if="info.orderStatus === '1'">超时后,订单将会自动取消</view>
|
|
<view class="header_info" v-if="info.orderStatus === '1'">超时后,订单将会自动取消</view>
|
|
|
<view class="header_type" v-if="info.orderStatus === '2'">已支付</view>
|
|
<view class="header_type" v-if="info.orderStatus === '2'">已支付</view>
|
|
|
<view class="header_info" v-if="info.orderStatus === '2'">订单已支付,请等待商家接单</view>
|
|
<view class="header_info" v-if="info.orderStatus === '2'">订单已支付,请等待商家接单</view>
|
|
@@ -164,6 +170,9 @@ export default {
|
|
|
// console.log(res)
|
|
// console.log(res)
|
|
|
if (res.code === 200) {
|
|
if (res.code === 200) {
|
|
|
this.info = res.data
|
|
this.info = res.data
|
|
|
|
|
+ // 计算出倒计时时间(毫秒)
|
|
|
|
|
+ let temLockTime = this.info.lockTime ? this.info.lockTime * 1 : 15
|
|
|
|
|
+ this.info.countDownTime = new Date(this.info.createTime.slice(0, 19)).getTime() + temLockTime * 60 * 1000 - new Date().getTime()
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
// 点击复制文字回调
|
|
// 点击复制文字回调
|
|
@@ -318,6 +327,19 @@ export default {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
|
|
+ },
|
|
|
|
|
+ // 倒计时结束回调
|
|
|
|
|
+ async finish(item) {
|
|
|
|
|
+ const res = await this.$myRequest({
|
|
|
|
|
+ url: '/mhotel/abkupdateOrderStatus.action',
|
|
|
|
|
+ data: {
|
|
|
|
|
+ bookingId: item.id
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ // console.log(res)
|
|
|
|
|
+ if (res.code === 200) {
|
|
|
|
|
+ item.orderStatus = '6'
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -350,7 +372,12 @@ export default {
|
|
|
top: 76rpx;
|
|
top: 76rpx;
|
|
|
left: 10rpx;
|
|
left: 10rpx;
|
|
|
width: 47rpx;
|
|
width: 47rpx;
|
|
|
- height: 47rpx;
|
|
|
|
|
|
|
+ height: 70rpx;
|
|
|
|
|
+
|
|
|
|
|
+ img {
|
|
|
|
|
+ width: 47rpx;
|
|
|
|
|
+ height: 47rpx;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.header_type {
|
|
.header_type {
|
|
@@ -361,6 +388,16 @@ export default {
|
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ .header_time {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 162rpx;
|
|
|
|
|
+ left: 530rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
.header_info {
|
|
.header_info {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
top: 235rpx;
|
|
top: 235rpx;
|
|
@@ -608,4 +645,9 @@ export default {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+// 修改倒计时字体颜色
|
|
|
|
|
+::v-deep .uv-count-down .uv-count-down__text {
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|