67 lines
3.0 KiB
Vue
67 lines
3.0 KiB
Vue
<template>
|
|
<view class="hsod-page" v-if="order.id">
|
|
<view class="hsod-status">{{ statusText }}</view>
|
|
<view class="hsod-card">
|
|
<image class="hsod-pic" :src="picUrl + (order.service_pic || '')" mode="aspectFill" />
|
|
<view class="hsod-info">
|
|
<view class="hsod-name">{{ order.service_name }}</view>
|
|
<view class="hsod-kind">{{ kindText(order.order_kind) }}</view>
|
|
<view class="hsod-amount">¥{{ order.amount }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="hsod-block">
|
|
<view class="hsod-row"><text>订单号</text><text>{{ order.order_no }}</text></view>
|
|
<view class="hsod-row"><text>联系人</text><text>{{ order.contact_name }}</text></view>
|
|
<view class="hsod-row"><text>联系电话</text><text>{{ order.contact_phone }}</text></view>
|
|
<view class="hsod-row"><text>服务地址</text><text>{{ order.service_address }}</text></view>
|
|
<view class="hsod-row" v-if="order.service_time"><text>上门时间</text><text>{{ order.service_time }}</text></view>
|
|
<view class="hsod-row" v-if="order.remark"><text>备注</text><text>{{ order.remark }}</text></view>
|
|
<view class="hsod-row"><text>支付状态</text><text>{{ order.pay_status === 2 ? '已支付' : '待支付' }}</text></view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { request, picUrl } from '@/utils'
|
|
import { apiArr } from '@/api/homeService'
|
|
|
|
export default {
|
|
data() {
|
|
return { picUrl, order: {} }
|
|
},
|
|
onLoad(options) {
|
|
request(apiArr.orderInfo, 'POST', { id: Number(options.id) }, {}, false).then(res => {
|
|
this.order = res || {}
|
|
})
|
|
},
|
|
computed: {
|
|
statusText() {
|
|
const o = this.order
|
|
if (o.pay_status === 1) return '待支付'
|
|
const map = { 1: '待上门', 2: '服务中', 3: '待补款', 4: '已完成', 5: '已取消' }
|
|
return map[o.status] || ''
|
|
}
|
|
},
|
|
methods: {
|
|
kindText(k) {
|
|
return k === 1 ? '定金/上门费' : k === 2 ? '补差/尾款' : k === 3 ? '月账单' : ''
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.hsod-page { background: #f5f5f5; min-height: 100vh; }
|
|
.hsod-status { background: linear-gradient(91deg, #FF7658, #FF370B); color: #fff; font-size: 34rpx; font-weight: 600; padding: 40rpx 24rpx; }
|
|
.hsod-card { background: #fff; display: flex; padding: 24rpx; margin-top: 16rpx; }
|
|
.hsod-pic { width: 150rpx; height: 150rpx; border-radius: 8rpx; background: #f0f0f0; flex-shrink: 0; }
|
|
.hsod-info { flex: 1; margin-left: 18rpx; display: flex; flex-direction: column; }
|
|
.hsod-name { font-size: 30rpx; color: #222; font-weight: 600; }
|
|
.hsod-kind { font-size: 24rpx; color: #999; margin-top: 10rpx; flex: 1; }
|
|
.hsod-amount { font-size: 32rpx; color: #FF370B; font-weight: 600; }
|
|
.hsod-block { background: #fff; margin-top: 16rpx; padding: 8rpx 24rpx; }
|
|
.hsod-row { display: flex; justify-content: space-between; font-size: 26rpx; color: #333; padding: 22rpx 0; border-bottom: 1rpx solid #f5f5f5; }
|
|
.hsod-row text:first-child { color: #999; }
|
|
.hsod-row:last-child { border-bottom: none; }
|
|
</style>
|