ch
3 years ago
parent
e0b7d9d534
commit
39d7c5a2d5
@ -0,0 +1,77 @@
|
||||
<!--
|
||||
* @Author: ch
|
||||
* @Date: 2022-03-31 14:49:33
|
||||
* @LastEditors: ch
|
||||
* @LastEditTime: 2022-03-31 20:26:25
|
||||
* @Description: file content
|
||||
-->
|
||||
<template>
|
||||
<view class="uiGoods">
|
||||
<image class="uiGoods--image" mode="widthFix" :src="data.productImageUrl" />
|
||||
<view >
|
||||
<view class="uiGoods--con">
|
||||
<text class="uiGoods--title">{{data.productName}}</text>
|
||||
<text class="uiGoods--pirce">￥{{data.realAmount}}</text>
|
||||
</view>
|
||||
<view class="uiGoods--desc">
|
||||
<text>{{data.skuDescribe}}</text>
|
||||
<text class="uiGoods--num">x{{data.quantity}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props : {
|
||||
data : {
|
||||
type : Object,
|
||||
default : {}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.uiGoods{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx;
|
||||
border-bottom: 1px solid #eee;
|
||||
&--image{
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
&--con{
|
||||
width: 510rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 39rpx;
|
||||
}
|
||||
&--title{
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
display:-webkit-box;
|
||||
-webkit-box-orient:vertical;
|
||||
-webkit-line-clamp:2;
|
||||
}
|
||||
&--pirce{
|
||||
font-size: 22rpx;
|
||||
margin-left: 60rpx;
|
||||
}
|
||||
&--desc{
|
||||
width: 510rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 20rpx;
|
||||
line-height: 39rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
&--num{
|
||||
font-size: 28rpx;
|
||||
margin-left: 60rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,19 @@
|
||||
<!--
|
||||
* @Author: ch
|
||||
* @Date: 2022-03-31 15:42:55
|
||||
* @LastEditors: ch
|
||||
* @LastEditTime: 2022-03-31 16:23:32
|
||||
* @Description: file content
|
||||
-->
|
||||
<template>
|
||||
<view class="uiWhiteBox">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.uiWhiteBox{
|
||||
margin: 20rpx 30rpx;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,103 @@
|
||||
<!--
|
||||
* @Author: ch
|
||||
* @Date: 2022-03-31 17:53:43
|
||||
* @LastEditors: ch
|
||||
* @LastEditTime: 2022-03-31 20:43:19
|
||||
* @Description: file content
|
||||
-->
|
||||
<template>
|
||||
<view class="status">
|
||||
<image class="status--icon" :src="ctxCon.icon"></image>
|
||||
<view class="status--name">{{ctxCon.name}}</view>
|
||||
<view class="status--desc">{{ctxCon.tips}}</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {DictOrderStatus } from '@/common/dicts/order'
|
||||
import Enum from "@/common/plugins/enum"
|
||||
export default {
|
||||
props : {
|
||||
orderInfo : {
|
||||
type : Object,
|
||||
default : {}
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
ctxData : {
|
||||
awaitPay : {name:'待付款', tips:'', icon: require('@/static/order/fk.png')},
|
||||
close : {name:'交易关闭' , tips:'关闭原因', icon: require('@/static/order/qx.png')},
|
||||
awaitSend : {name:'等待发货', tips:'您的包裹整装待发', icon: require('@/static/order/fh.png')},
|
||||
finishSend : {name:'已发货', tips:'您的包裹正向您飞来', icon: require('@/static/order/fh.png')},
|
||||
finishReceiving : {name:'已收货', icon: require('@/static/order/fh.png')},
|
||||
end : {name:'交易成功', icon: require('@/static/order/cg.png')},
|
||||
},
|
||||
ctxCon : {},
|
||||
secondNum : 0
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
watch : {
|
||||
orderInfo(nVal){
|
||||
this.ctxCon = this.ctxData[this.statusKey];
|
||||
if(this.statusKey === 'awaitPay'){
|
||||
let expireTime = (new Date(this.orderInfo.expireTime)).getTime(),
|
||||
curTime = (new Date(this.orderInfo.serverTime)).getTime(),
|
||||
second = Math.floor((expireTime - curTime) / 1000);
|
||||
this.secondNum = second > 0 ? second : 0;
|
||||
this.timer()
|
||||
}else if(this.statusKey === 'close'){
|
||||
this.ctxCon.tips = this.orderInfo.closeReason;
|
||||
}
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
// 从字典表获取状态key
|
||||
statusKey (){
|
||||
return DictOrderStatus[this.orderInfo.orderStatus].value
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
/**
|
||||
* 待付款的计时器
|
||||
*/
|
||||
timer(){
|
||||
if(this.secondNum == 0){
|
||||
this.$emit('close');
|
||||
return;
|
||||
}
|
||||
this.secondNum--;
|
||||
let minute = parseInt(this.secondNum / 60);
|
||||
let second = parseInt(this.secondNum % 60);
|
||||
this.ctxCon.tips = `剩余${minute > 0 ? `${minute}分` : ''} ${second}秒`;
|
||||
// console.log(this.ctxCon.tips);
|
||||
setTimeout(()=>this.timer(),1000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.status{
|
||||
padding: 30rpx 60rpx 0;
|
||||
position: relative;
|
||||
&--icon{
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
position: absolute;
|
||||
right: 60rpx;
|
||||
top: 10rpx;
|
||||
}
|
||||
&--name{
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
&--desc{
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 760 B After Width: | Height: | Size: 760 B |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
Loading…
Reference in new issue