xpz2018
3 years ago
13 changed files with 1178 additions and 178 deletions
Unified View
Diff Options
-
10apis/factoryApi.js
-
13apis/orderApi.js
-
264components/countdown/countdown.vue
-
27components/uni-status-bar/uni-status-bar.vue
-
4components/uni-steps/uni-steps.vue
-
43enums/index.js
-
8pages.json
-
47pages/digital-workshops/DeviceItem.vue
-
278pages/digital-workshops/OrderItem.vue
-
532pages/digital-workshops/index.vue
-
2pages/factory/index.vue
-
128pages/order-info/index.vue
-
BINstatic/imgs/cart/icon-time.png
@ -0,0 +1,264 @@ |
|||||
|
<template> |
||||
|
<view class="uni-countdown"> |
||||
|
<text v-if="showDay" :style="[timeStyle]" class="uni-countdown__number">{{ d }}</text> |
||||
|
<text v-if="showDay" :style="[splitorStyle]" class="uni-countdown__splitor">{{dayText}}</text> |
||||
|
<text :style="[timeStyle]" class="uni-countdown__number">{{ h }}</text> |
||||
|
<text :style="[splitorStyle]" class="uni-countdown__splitor">{{ showColon ? ':' : hourText }}</text> |
||||
|
<text :style="[timeStyle]" class="uni-countdown__number">{{ i }}</text> |
||||
|
<text :style="[splitorStyle]" class="uni-countdown__splitor">{{ showColon ? ':' : minuteText }}</text> |
||||
|
<text :style="[timeStyle]" class="uni-countdown__number">{{ s }}</text> |
||||
|
<text v-if="!showColon" :style="[splitorStyle]" class="uni-countdown__splitor">{{secondText}}</text> |
||||
|
</view> |
||||
|
</template> |
||||
|
<script> |
||||
|
/** |
||||
|
* Countdown 倒计时 |
||||
|
* @description 倒计时组件 |
||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=25 |
||||
|
* @property {String} backgroundColor 背景色 |
||||
|
* @property {String} color 文字颜色 |
||||
|
* @property {Number} day 天数 |
||||
|
* @property {Number} hour 小时 |
||||
|
* @property {Number} minute 分钟 |
||||
|
* @property {Number} second 秒 |
||||
|
* @property {Number} timestamp 时间戳 |
||||
|
* @property {Boolean} showDay = [true|false] 是否显示天数 |
||||
|
* @property {Boolean} show-colon = [true|false] 是否以冒号为分隔符 |
||||
|
* @property {String} splitorColor 分割符号颜色 |
||||
|
* @event {Function} timeup 倒计时时间到触发事件 |
||||
|
* @example <uni-countdown :day="1" :hour="1" :minute="12" :second="40"></uni-countdown> |
||||
|
*/ |
||||
|
export default { |
||||
|
name: 'UniCountdown', |
||||
|
emits: ['timeup'], |
||||
|
props: { |
||||
|
showDay: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
showColon: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
start: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
backgroundColor: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
color: { |
||||
|
type: String, |
||||
|
default: '#333' |
||||
|
}, |
||||
|
fontSize: { |
||||
|
type: Number, |
||||
|
default: 14 |
||||
|
}, |
||||
|
splitorColor: { |
||||
|
type: String, |
||||
|
default: '#333' |
||||
|
}, |
||||
|
day: { |
||||
|
type: Number, |
||||
|
default: 0 |
||||
|
}, |
||||
|
hour: { |
||||
|
type: Number, |
||||
|
default: 0 |
||||
|
}, |
||||
|
minute: { |
||||
|
type: Number, |
||||
|
default: 0 |
||||
|
}, |
||||
|
second: { |
||||
|
type: Number, |
||||
|
default: 0 |
||||
|
}, |
||||
|
timestamp: { |
||||
|
type: Number, |
||||
|
default: 0 |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
timer: null, |
||||
|
syncFlag: false, |
||||
|
d: '00', |
||||
|
h: '00', |
||||
|
i: '00', |
||||
|
s: '00', |
||||
|
leftTime: 0, |
||||
|
seconds: 0 |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
dayText() { |
||||
|
return '天' |
||||
|
}, |
||||
|
hourText(val) { |
||||
|
return '时' |
||||
|
}, |
||||
|
minuteText(val) { |
||||
|
return '分' |
||||
|
}, |
||||
|
secondText(val) { |
||||
|
return '秒' |
||||
|
}, |
||||
|
timeStyle() { |
||||
|
const { |
||||
|
color, |
||||
|
backgroundColor, |
||||
|
fontSize |
||||
|
} = this |
||||
|
return { |
||||
|
color, |
||||
|
backgroundColor, |
||||
|
fontSize: `${fontSize}px`, |
||||
|
width: `${fontSize * 22 / 14}px`, // 按字体大小为 14px 时的比例缩放 |
||||
|
lineHeight: `${fontSize * 20 / 14}px`, |
||||
|
borderRadius: `${fontSize * 3 / 14}px`, |
||||
|
} |
||||
|
}, |
||||
|
splitorStyle() { |
||||
|
const { splitorColor, fontSize, backgroundColor } = this |
||||
|
return { |
||||
|
color: splitorColor, |
||||
|
fontSize: `${fontSize * 12 / 14}px`, |
||||
|
margin: backgroundColor ? `${fontSize * 4 / 14}px` : '' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
day(val) { |
||||
|
this.changeFlag() |
||||
|
}, |
||||
|
hour(val) { |
||||
|
this.changeFlag() |
||||
|
}, |
||||
|
minute(val) { |
||||
|
this.changeFlag() |
||||
|
}, |
||||
|
second(val) { |
||||
|
this.changeFlag() |
||||
|
}, |
||||
|
start: { |
||||
|
immediate: true, |
||||
|
handler(newVal, oldVal) { |
||||
|
if (newVal) { |
||||
|
this.startData(); |
||||
|
} else { |
||||
|
if (!oldVal) return |
||||
|
clearInterval(this.timer) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
created: function(e) { |
||||
|
this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second) |
||||
|
this.countDown() |
||||
|
}, |
||||
|
// #ifndef VUE3 |
||||
|
destroyed() { |
||||
|
clearInterval(this.timer) |
||||
|
}, |
||||
|
// #endif |
||||
|
// #ifdef VUE3 |
||||
|
unmounted() { |
||||
|
clearInterval(this.timer) |
||||
|
}, |
||||
|
// #endif |
||||
|
methods: { |
||||
|
toSeconds(timestamp, day, hours, minutes, seconds) { |
||||
|
if (timestamp) { |
||||
|
return timestamp - parseInt(new Date().getTime() / 1000, 10) |
||||
|
} |
||||
|
return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds |
||||
|
}, |
||||
|
timeUp() { |
||||
|
clearInterval(this.timer) |
||||
|
this.$emit('timeup') |
||||
|
}, |
||||
|
countDown() { |
||||
|
let seconds = this.seconds |
||||
|
let [day, hour, minute, second] = [0, 0, 0, 0] |
||||
|
if (seconds > 0) { |
||||
|
day = Math.floor(seconds / (60 * 60 * 24)) |
||||
|
hour = Math.floor(seconds / (60 * 60)) - (day * 24) |
||||
|
minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60) |
||||
|
second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60) |
||||
|
} else { |
||||
|
this.timeUp() |
||||
|
} |
||||
|
if (day < 10) { |
||||
|
day = '0' + day |
||||
|
} |
||||
|
if (hour < 10) { |
||||
|
hour = '0' + hour |
||||
|
} |
||||
|
if (minute < 10) { |
||||
|
minute = '0' + minute |
||||
|
} |
||||
|
if (second < 10) { |
||||
|
second = '0' + second |
||||
|
} |
||||
|
this.d = day |
||||
|
this.h = hour |
||||
|
this.i = minute |
||||
|
this.s = second |
||||
|
}, |
||||
|
startData() { |
||||
|
this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second) |
||||
|
if (this.seconds <= 0) { |
||||
|
this.seconds = this.toSeconds(0, 0, 0, 0, 0) |
||||
|
this.countDown() |
||||
|
return |
||||
|
} |
||||
|
clearInterval(this.timer) |
||||
|
this.countDown() |
||||
|
this.timer = setInterval(() => { |
||||
|
this.seconds-- |
||||
|
if (this.seconds < 0) { |
||||
|
this.timeUp() |
||||
|
return |
||||
|
} |
||||
|
this.countDown() |
||||
|
}, 1000) |
||||
|
}, |
||||
|
update(){ |
||||
|
this.startData(); |
||||
|
}, |
||||
|
changeFlag() { |
||||
|
if (!this.syncFlag) { |
||||
|
this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second) |
||||
|
this.startData(); |
||||
|
this.syncFlag = true; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
$font-size: 14px; |
||||
|
|
||||
|
.uni-countdown { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
|
||||
|
&__splitor { |
||||
|
margin: 0 2px; |
||||
|
font-size: $font-size; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
&__number { |
||||
|
border-radius: 3px; |
||||
|
text-align: center; |
||||
|
font-size: $font-size; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,27 @@ |
|||||
|
<template> |
||||
|
<view :style="{ height: statusBarHeight }" class="uni-status-bar"> |
||||
|
<slot /> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'UniStatusBar', |
||||
|
data() { |
||||
|
return { |
||||
|
statusBarHeight: 20 |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px' |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.uni-status-bar { |
||||
|
// width: 750rpx; |
||||
|
height: 20px; |
||||
|
// height: var(--status-bar-height); |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,278 @@ |
|||||
|
<template> |
||||
|
<view style="padding: 0rpx 24rpx;"> |
||||
|
<view class="list-item flex-col" @click="emit"> |
||||
|
<view class="flex-row-center-space" style="height: 72rpx;font-size: 28rpx;"> |
||||
|
<view class="flex-row-center-center"> |
||||
|
<image src="/static/imgs/tabbar/mine-gray.png" style="width: 48rpx;height: 48rpx;"/> |
||||
|
<view style="margin-left: 8rpx;font-size: 28rpx;">{{item.customerEnterpriseName}}</view> |
||||
|
</view> |
||||
|
<view :style="{ color: statusColor(item.status) }">{{orderStatusMap[item.status]}}</view> |
||||
|
</view> |
||||
|
<view class="flex-row" style="padding: 16rpx 0rpx;border-top: 1rpx solid #f3f3f3;" v-if="item.productInfoList && item.productInfoList.length"> |
||||
|
<image style="height: 160rpx;width: 160rpx;" :src="item.productInfoList[0].img"></image> |
||||
|
<view class="flex-col" style="margin-left: 16rpx;flex: 1;"> |
||||
|
<view class="flex-row-center-space"> |
||||
|
<view style="font-size: 30rpx;">{{item.productInfoList[0].productName}}</view> |
||||
|
<view style="font-size: 28rpx;">{{item.productInfoList[0].quantity}} {{item.productInfoList[0].unit || '个'}}</view> |
||||
|
</view> |
||||
|
<view style="font-size: 24rpx;color: #cccccc;margin-top: 16rpx;">尺寸：{{item.productInfoList[0].trimmedSize}}</view> |
||||
|
<view style="font-size: 24rpx;color: #cccccc;margin-top: 4rpx;">材质：{{item.productInfoList[0].materialsRequirement}}</view> |
||||
|
<view class="flex-row-center-start" style="margin-top: 24rpx;"> |
||||
|
<image src="/static/imgs/cart/icon-time.png" style="width: 40rpx;height: 40rpx;"/> |
||||
|
<view style="font-size: 28rpx;color: #cccccc;">缴费日期：{{item.deliveryDate}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
#f3f3f3 |
||||
|
<script> |
||||
|
import { StatusMap } from '@/enums/index' |
||||
|
export default { |
||||
|
props: { |
||||
|
item: { |
||||
|
type: Object, |
||||
|
default: () => ({}) |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
orderStatusMap: Object.freeze(StatusMap) |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
emit() { |
||||
|
this.$emit('click', this.item) |
||||
|
}, |
||||
|
statusColor(status){ |
||||
|
if(status == 3){ |
||||
|
return '#028A00' |
||||
|
} |
||||
|
if(status == 4){ |
||||
|
return '#007AFF' |
||||
|
} |
||||
|
return '#999999' |
||||
|
}, |
||||
|
translate(time) { |
||||
|
if (!time) { |
||||
|
return '' |
||||
|
} |
||||
|
time = time.replace(/-/g, '/') |
||||
|
let date = new Date(time) |
||||
|
let month = date.getMonth() + 1 |
||||
|
let day = date.getDate() |
||||
|
let hour = date.getHours() |
||||
|
let minute = date.getMinutes() |
||||
|
if (minute < 10) { |
||||
|
minute = '0' + minute |
||||
|
} |
||||
|
return `最近开机 ${month}月${day}日 ${hour}:${minute}` |
||||
|
} |
||||
|
}, |
||||
|
filters: { |
||||
|
translateRate(rate) { |
||||
|
if (!rate) { |
||||
|
rate = 0 |
||||
|
} else { |
||||
|
rate = rate.toFixed(2) |
||||
|
} |
||||
|
return rate |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.list-item { |
||||
|
padding: 0rpx 20rpx; |
||||
|
background-color: white; |
||||
|
border-radius: 16rpx; |
||||
|
&:last-of-type { |
||||
|
margin-top: 20rpx; |
||||
|
} |
||||
|
.left-section_2 { |
||||
|
color: rgb(255, 255, 255); |
||||
|
font-size: 20rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 28rpx; |
||||
|
white-space: nowrap; |
||||
|
border-radius: 15rpx; |
||||
|
width: 180rpx; |
||||
|
height: 180rpx; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
.text-wrapper_3 { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
padding-top: 4rpx; |
||||
|
background-color: rgb(82, 196, 26); |
||||
|
border-radius: 15rpx 0px 15rpx 0px; |
||||
|
.text_21 { |
||||
|
margin-left: 6rpx; |
||||
|
margin-right: 7rpx; |
||||
|
} |
||||
|
} |
||||
|
.text-wrapper_4 { |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
padding: 4rpx; |
||||
|
background-color: #cccccc88; |
||||
|
border-radius: 0rpx 8px 0rpx 15rpx; |
||||
|
.text_21 { |
||||
|
margin-left: 6rpx; |
||||
|
margin-right: 7rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.text-wrapper_3 { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
padding-top: 4rpx; |
||||
|
background-color: rgb(82, 196, 26); |
||||
|
border-radius: 15rpx 0px 15rpx 0px; |
||||
|
.text_21 { |
||||
|
margin-left: 6rpx; |
||||
|
margin-right: 7rpx; |
||||
|
} |
||||
|
} .view_16 { |
||||
|
padding-top: initial; |
||||
|
background-color: rgb(255, 72, 73); |
||||
|
padding: 3rpx 0 2rpx; |
||||
|
width: 73rpx; |
||||
|
} |
||||
|
.avatar { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
.right-group { |
||||
|
margin-left: 5rpx; |
||||
|
flex: 1 1 auto; |
||||
|
.top-group { |
||||
|
padding: 0 0 0 26rpx; |
||||
|
color: rgb(0, 0, 0); |
||||
|
font-size: 30rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 42rpx; |
||||
|
white-space: nowrap; |
||||
|
align-items: center; |
||||
|
.name { |
||||
|
max-width: 360rpx; |
||||
|
} |
||||
|
.image_5 { |
||||
|
margin-left: 8rpx; |
||||
|
width: 24rpx; |
||||
|
height: 24rpx; |
||||
|
} |
||||
|
} |
||||
|
.equal-division { |
||||
|
margin-left: 26rpx; |
||||
|
.equal-division-item { |
||||
|
padding: 10rpx 0; |
||||
|
flex: 1 1 146rpx; |
||||
|
.text_24 { |
||||
|
color: rgb(24, 16, 89); |
||||
|
font-size: 22rpx; |
||||
|
line-height: 30rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.bottom-group_1 { |
||||
|
margin-top: 4rpx; |
||||
|
.text_26 { |
||||
|
color: rgb(24, 16, 89); |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 45rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.text_28 { |
||||
|
margin: 8rpx 0 6rpx 10rpx; |
||||
|
color: rgb(24, 16, 89); |
||||
|
font-size: 22rpx; |
||||
|
line-height: 30rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.equal-division-item_1 { |
||||
|
padding: 10rpx 23rpx 10rpx 36rpx; |
||||
|
flex: 1 1 146rpx; |
||||
|
.text_30 { |
||||
|
color: rgb(24, 16, 89); |
||||
|
font-size: 22rpx; |
||||
|
line-height: 30rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.bottom-group_2 { |
||||
|
margin-top: 4rpx; |
||||
|
.text_32 { |
||||
|
color: rgb(24, 16, 89); |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 45rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.text_34 { |
||||
|
margin: 8rpx 0 6rpx 10rpx; |
||||
|
color: rgb(24, 16, 89); |
||||
|
font-size: 22rpx; |
||||
|
line-height: 30rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.equal-division-item_2 { |
||||
|
padding: 10rpx 24rpx 10rpx 26rpx; |
||||
|
flex: 1 1 146rpx; |
||||
|
.text_36 { |
||||
|
color: rgb(24, 16, 89); |
||||
|
font-size: 22rpx; |
||||
|
line-height: 30rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.bottom-group_3 { |
||||
|
margin-top: 4rpx; |
||||
|
.text_38 { |
||||
|
color: rgb(24, 16, 89); |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 45rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.text_40 { |
||||
|
margin: 8rpx 0 6rpx 10rpx; |
||||
|
color: rgb(24, 16, 89); |
||||
|
font-size: 22rpx; |
||||
|
line-height: 30rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.bottom-group_4 { |
||||
|
margin-top: 14rpx; |
||||
|
padding: 0 26rpx; |
||||
|
color: rgb(136, 136, 136); |
||||
|
font-size: 20rpx; |
||||
|
line-height: 28rpx; |
||||
|
white-space: nowrap; |
||||
|
.text_43 { |
||||
|
margin-left: 11rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.text_59 { |
||||
|
margin-top: 23rpx; |
||||
|
padding-left: 26rpx; |
||||
|
color: rgb(24, 16, 89); |
||||
|
font-size: 26rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 37rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,128 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="订单详情"></uni-nav-bar> |
||||
|
<view style="padding: 0rpx 24rpx;background-color: white;" v-if="orderInfo"> |
||||
|
<view class="list-item flex-col"> |
||||
|
<view class="flex-row-center-space" style="height: 72rpx;font-size: 28rpx;"> |
||||
|
<view class="flex-row-center-center"> |
||||
|
<image src="/static/imgs/tabbar/mine-gray.png" style="width: 48rpx;height: 48rpx;"/> |
||||
|
<view style="margin-left: 8rpx;font-size: 28rpx;">{{orderInfo.customerEnterpriseName}}</view> |
||||
|
</view> |
||||
|
<view :style="{ color: statusColor(orderInfo.status) }">{{orderStatusMap[orderInfo.status]}}</view> |
||||
|
</view> |
||||
|
<view class="flex-row" style="padding: 16rpx 0rpx;border-top: 1rpx solid #f3f3f3;"> |
||||
|
<image style="height: 160rpx;width: 160rpx;" :src="orderInfo.purchasingOrderItems[0].imgUrlList[0]"></image> |
||||
|
<view class="flex-col" style="margin-left: 16rpx;flex: 1;"> |
||||
|
<view class="flex-row-center-space"> |
||||
|
<view style="font-size: 30rpx;">{{orderInfo.purchasingOrderItems[0].productName}}</view> |
||||
|
<view style="font-size: 28rpx;">{{orderInfo.purchasingOrderItems[0].quantity}} {{orderInfo.purchasingOrderItems[0].unit || '个'}}</view> |
||||
|
</view> |
||||
|
<view style="font-size: 24rpx;color: #cccccc;margin-top: 16rpx;">尺寸：{{orderInfo.purchasingOrderItems[0].trimmedSize}}</view> |
||||
|
<view style="font-size: 24rpx;color: #cccccc;margin-top: 4rpx;">材质：{{orderInfo.purchasingOrderItems[0].materialsRequirement}}</view> |
||||
|
<view class="flex-row-center-start" style="margin-top: 24rpx;"> |
||||
|
<image src="/static/imgs/cart/icon-time.png" style="width: 40rpx;height: 40rpx;"/> |
||||
|
<view style="font-size: 28rpx;color: #cccccc;">缴费日期：{{orderInfo.deliveryDate}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="margin-top: 16rpx;display: flex;align-items: center;justify-content: center;" v-if="diff"> |
||||
|
<text style="margin-right: 12px;font-size: 16px;">还剩</text> |
||||
|
<countdown :day="diff.day" :hour="diff.hours" :minute="diff.minutes" :second="diff.seconds" color="#007AFF" font-size="18"/> |
||||
|
</view> |
||||
|
<view style="display: flex;align-items: center;padding: 24rpx 48rpx 12rpx 48rpx;" v-if="orderInfo"> |
||||
|
<view style="background-color: #cccccc;flex: 1;height: 1px;"></view> |
||||
|
<view style="font-size: 28rpx;margin: 0 24rpx;color: #cccccc;">工艺进度</view> |
||||
|
<view style="background-color: #cccccc;flex: 1;height: 1px;"></view> |
||||
|
</view> |
||||
|
<view style="margin-top: 16rpx;background-color: white;padding: 24rpx;" v-if="orderInfo"> |
||||
|
<text>{{orderInfo.purchasingOrderItems[0].processRequirement}}</text> |
||||
|
</view> |
||||
|
<view style="padding: 12rpx 24rpx 24rpx 24rpx;" v-if="orderInfo"> |
||||
|
<uni-steps :options="stepList" active-color="#007AFF" :active="active" direction="column" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { go2, back } from '@/utils/hook.js' |
||||
|
import { difTime } from '@/utils/index.js' |
||||
|
import { getProdOrderInfo } from '@/apis/orderApi.js' |
||||
|
import { StatusMap } from '@/enums/index' |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
orderId: null, |
||||
|
orderInfo: null, |
||||
|
orderStatusMap: Object.freeze(StatusMap), |
||||
|
active: 1, |
||||
|
stepList: [] |
||||
|
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
if (option.orderId) { |
||||
|
this.orderId = option.orderId |
||||
|
this.init(this.orderId) |
||||
|
} else { |
||||
|
uni.showToast({ |
||||
|
title: '订单信息错误', |
||||
|
icon: 'error', |
||||
|
success: () => { |
||||
|
setTimeout(() => { |
||||
|
back() |
||||
|
}, 2000) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
onPullDownRefresh() { |
||||
|
uni.stopPullDownRefresh() |
||||
|
}, |
||||
|
methods: { |
||||
|
go2, |
||||
|
back, |
||||
|
init(orderId) { |
||||
|
getProdOrderInfo(orderId).then((res) => { |
||||
|
if (res) { |
||||
|
this.orderInfo = res |
||||
|
if(this.orderInfo.deliveryDate){ |
||||
|
this.diff = difTime(this.orderInfo.deliveryDate, new Date().getTime()) |
||||
|
} |
||||
|
var steps = [] |
||||
|
var act = 0 |
||||
|
const nodeList = this.orderInfo.purchasingOrderItems[0].processNodeList |
||||
|
for (var i = 0; i < nodeList.length; i++) { |
||||
|
const item = nodeList[i] |
||||
|
if(item.completedQuantity >= item.planQuantity){ |
||||
|
act++ |
||||
|
} |
||||
|
var desc = item.completedTime || '' |
||||
|
if(item.completedQuantity > 0){ |
||||
|
desc += ' 完成' + item.completedQuantity + (item.nodeUnit || '张') + '/' |
||||
|
} |
||||
|
desc += '计划' + item.planQuantity + (item.nodeUnit || '张') |
||||
|
steps.push({title: item.nodeTypeName, desc }) |
||||
|
} |
||||
|
this.stepList = steps |
||||
|
this.active = act |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
statusColor(status){ |
||||
|
if(status == 3){ |
||||
|
return '#028A00' |
||||
|
} |
||||
|
if(status == 4){ |
||||
|
return '#007AFF' |
||||
|
} |
||||
|
return '#999999' |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
|
||||
|
</style> |
||||
| Before | After |
|---|---|
|
|
| Width: 48 | Height: 48 | Size: 1.2 KiB |
Write
Preview
Loading…
Cancel
Save