122 lines
3.2 KiB
Vue
122 lines
3.2 KiB
Vue
<template>
|
|
<view class="card" v-if="isEmpty">
|
|
<view class="cell" v-for="cell in orderFields" :key="cell.label">
|
|
<text class="width-200">{{ cell.label }}</text>
|
|
<text class="flex-1 overflow-ellipsis-line">{{ setUnit(cell.value, cell.unit) }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="loading" v-else-if="!isLoading">
|
|
<u-loading></u-loading>
|
|
<view>加载中...</view>
|
|
</view>
|
|
<view class="empty" v-else>
|
|
<u-empty text="" mode="data"></u-empty>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, reactive, ref, unref } from 'vue'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import { useLockFn } from '@/hooks/useLockFn'
|
|
import { getDistributorOrderDetail } from '@/api/distributor_center'
|
|
import { setUnit } from '@/utils/util'
|
|
|
|
interface OrderProps {
|
|
[key: string]: string | number
|
|
id: number
|
|
commission: number
|
|
orderNo: number
|
|
goodsCategoryName: string
|
|
goodsName: string
|
|
goodsNum: number
|
|
orderAmount: number
|
|
finishTime: string
|
|
commissionRate: number
|
|
appointTimeStart: string
|
|
appointTimeEnd: string
|
|
}
|
|
const fieldsMap: Record<string, string | string[]> = {
|
|
orderNo: '订单编号',
|
|
goodsCategoryName: '服务类别',
|
|
goodsName: '服务名称',
|
|
goodsNum: ['商品数量', '个'],
|
|
orderAmount: ['实付金额', '元'],
|
|
address: '上门地址',
|
|
appointTime: '预约时间',
|
|
finishTime: '完成时间'
|
|
// commissionRate: ['最终抽佣比', '%'],
|
|
// commission: ['抽佣金额', '元']
|
|
}
|
|
const orderFields = ref<any[]>([])
|
|
const orderDetail = reactive<Partial<OrderProps>>({})
|
|
const isEmpty = computed(() => unref(orderFields).length > 0)
|
|
const isLoading = computed(() => Object.keys(orderDetail).length > 0)
|
|
|
|
onLoad(options => {
|
|
const { id } = options
|
|
initOrderDetail(id)
|
|
})
|
|
|
|
/**订单详情 */
|
|
const { lockFn: initOrderDetail } = useLockFn(async id => {
|
|
const data = await getDistributorOrderDetail({ id })
|
|
Object.keys(data).length > 0 && setDetailData(data)
|
|
})
|
|
|
|
/**保存信息 */
|
|
function setDetailData(data: any) {
|
|
for (const key in data) {
|
|
orderDetail[key] = data[key]
|
|
}
|
|
orderDetail.appointTime = `${orderDetail.appointTimeStart?.replace(
|
|
/:\d{2}$/,
|
|
''
|
|
)}-${orderDetail.appointTimeEnd?.split(' ')[1].replace(/:\d{2}$/, '')}`
|
|
|
|
// 订单未完成，不显示订单完成时间
|
|
if (orderDetail.orderStatus !== 3 && orderDetail.orderStatus !== 4) {
|
|
delete fieldsMap.finishTime
|
|
}
|
|
orderFields.value = Object.keys(fieldsMap).map(field => {
|
|
const text = fieldsMap[field]
|
|
const [label, unit] = Array.isArray(text) ? text : [text, '']
|
|
return {
|
|
label: label,
|
|
value: orderDetail[field],
|
|
unit
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.card {
|
|
background-color: $white;
|
|
margin: 20rpx 40rpx 0;
|
|
padding: 30rpx;
|
|
border-radius: 16rpx;
|
|
|
|
.cell {
|
|
display: flex;
|
|
line-height: 1.8;
|
|
|
|
.width-200 {
|
|
width: 220rpx;
|
|
height: 70rpx;
|
|
color: #827e7e;
|
|
}
|
|
}
|
|
}
|
|
|
|
.empty {
|
|
@include center;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.loading {
|
|
@include center;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
}
|
|
</style>
|