109 lines
4.3 KiB
Vue
109 lines
4.3 KiB
Vue
<template>
|
|
<view class="hsm-page">
|
|
<view class="hsm-list">
|
|
<view class="hsm-card" v-for="o in orders" :key="o.id">
|
|
<view class="hsm-head">
|
|
<text class="hsm-no">{{ o.order_no }}</text>
|
|
<text class="hsm-status">{{ statusText(o) }}</text>
|
|
</view>
|
|
<view class="hsm-body" @tap="toDetail(o)">
|
|
<image class="hsm-pic" :src="picUrl + (o.service_pic || '')" mode="aspectFill" />
|
|
<view class="hsm-info">
|
|
<view class="hsm-name">{{ o.service_name }}</view>
|
|
<view class="hsm-kind">{{ kindText(o.order_kind) }}</view>
|
|
<view class="hsm-amount">¥{{ o.amount }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="hsm-foot" v-if="o.pay_status === 1 && o.status !== 5 && o.status !== 4">
|
|
<view class="hsm-cancel" @tap="cancelOrder(o)">取消订单</view>
|
|
<view class="hsm-pay" @tap="payOrder(o)">去支付</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="orders.length === 0" class="hsm-empty">暂无服务订单</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { request, picUrl, NavgateTo } from '@/utils'
|
|
import { apiArr } from '@/api/homeService'
|
|
|
|
export default {
|
|
data() {
|
|
return { picUrl, orders: [] }
|
|
},
|
|
onShow() {
|
|
this.loadOrders()
|
|
},
|
|
methods: {
|
|
loadOrders() {
|
|
const userId = uni.getStorageSync('userId')
|
|
request(apiArr.orderList, 'POST', { user_id: userId, page_num: 1, page_size: 50 }, {}, false).then(res => {
|
|
this.orders = res.rows || []
|
|
})
|
|
},
|
|
kindText(k) {
|
|
return k === 1 ? '定金/上门费' : k === 2 ? '补差/尾款' : k === 3 ? '月账单' : ''
|
|
},
|
|
statusText(o) {
|
|
if (o.status === 5) return '已取消'
|
|
if (o.status === 4) return '已完成'
|
|
if (o.pay_status === 1) return '待支付'
|
|
const map = { 1: '待上门', 2: '服务中', 3: '待补款' }
|
|
return map[o.status] || ''
|
|
},
|
|
toDetail(o) {
|
|
NavgateTo('/packages/homeService/orderDetail/index?id=' + o.id)
|
|
},
|
|
cancelOrder(o) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定取消该订单吗？',
|
|
success: (r) => {
|
|
if (!r.confirm) return
|
|
const userId = uni.getStorageSync('userId')
|
|
request(apiArr.orderCancel, 'POST', { id: o.id, user_id: Number(userId) || 0 }).then(() => {
|
|
uni.showToast({ title: '已取消', icon: 'none' })
|
|
this.loadOrders()
|
|
})
|
|
}
|
|
})
|
|
},
|
|
payOrder(o) {
|
|
const userId = uni.getStorageSync('userId')
|
|
request(apiArr.preorder, 'POST', { order_id: o.id, user_id: userId, trans_type: '71' }).then(pay => {
|
|
uni.requestPayment({
|
|
provider: 'wxpay',
|
|
timeStamp: pay.timeStamp,
|
|
nonceStr: pay.nonceStr,
|
|
package: pay.package,
|
|
signType: pay.signType || 'RSA',
|
|
paySign: pay.paySign,
|
|
success: () => {
|
|
request(apiArr.tradeQuery, 'POST', { order_id: o.id }, {}, false).finally(() => this.loadOrders())
|
|
},
|
|
fail: () => { uni.showToast({ title: '支付已取消', icon: 'none' }) }
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.hsm-page { background: #f5f5f5; min-height: 100vh; padding: 20rpx; box-sizing: border-box; }
|
|
.hsm-card { background: #fff; border-radius: 12rpx; padding: 20rpx; margin-bottom: 18rpx; }
|
|
.hsm-head { display: flex; justify-content: space-between; align-items: center; font-size: 24rpx; color: #999; margin-bottom: 16rpx; }
|
|
.hsm-status { color: #FF370B; }
|
|
.hsm-body { display: flex; }
|
|
.hsm-pic { width: 150rpx; height: 150rpx; border-radius: 8rpx; background: #f0f0f0; flex-shrink: 0; }
|
|
.hsm-info { flex: 1; margin-left: 18rpx; display: flex; flex-direction: column; }
|
|
.hsm-name { font-size: 30rpx; color: #222; font-weight: 600; }
|
|
.hsm-kind { font-size: 24rpx; color: #999; margin-top: 10rpx; flex: 1; }
|
|
.hsm-amount { font-size: 32rpx; color: #FF370B; font-weight: 600; }
|
|
.hsm-foot { display: flex; justify-content: flex-end; align-items: center; margin-top: 16rpx; }
|
|
.hsm-cancel { border: 1rpx solid #ccc; color: #666; font-size: 26rpx; padding: 11rpx 36rpx; border-radius: 40rpx; margin-right: 20rpx; }
|
|
.hsm-pay { background: linear-gradient(91deg, #FF7658, #FF370B); color: #fff; font-size: 26rpx; padding: 12rpx 40rpx; border-radius: 40rpx; }
|
|
.hsm-empty { text-align: center; color: #999; font-size: 26rpx; padding: 80rpx 0; }
|
|
</style>
|