订单页面分页加载的完善
This commit is contained in:
WindowBird
parent
8f2434e592
commit
757777de50
|
|
@ -8,14 +8,14 @@ const loading = ref(false)
|
|||
const orderId = ref('')
|
||||
|
||||
// 页面加载时获取参数
|
||||
onLoad((options) => {
|
||||
onLoad(options => {
|
||||
if (options.id) {
|
||||
orderId.value = options.id
|
||||
loadOrderDetail()
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '订单ID不能为空',
|
||||
icon: 'none'
|
||||
icon: 'none',
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
|
|
@ -32,20 +32,20 @@ onLoad((options) => {
|
|||
function mapOrderStatus(type, value) {
|
||||
const maps = {
|
||||
status: {
|
||||
'1': '未支付',
|
||||
'2': '支付成功',
|
||||
'3': '退款',
|
||||
'未支付': '1',
|
||||
'支付成功': '2',
|
||||
'退款': '3',
|
||||
1: '未支付',
|
||||
2: '支付成功',
|
||||
3: '退款',
|
||||
未支付: '1',
|
||||
支付成功: '2',
|
||||
退款: '3',
|
||||
},
|
||||
logistic: {
|
||||
'1': '未签收',
|
||||
'2': '已签收',
|
||||
'3': '已归还',
|
||||
'未签收': '1',
|
||||
'已签收': '2',
|
||||
'已归还': '3',
|
||||
1: '未签收',
|
||||
2: '已签收',
|
||||
3: '已归还',
|
||||
未签收: '1',
|
||||
已签收: '2',
|
||||
已归还: '3',
|
||||
},
|
||||
}
|
||||
|
||||
|
|
@ -59,9 +59,9 @@ function mapOrderStatus(type, value) {
|
|||
*/
|
||||
function getStatusClass(status) {
|
||||
const statusMap = {
|
||||
'1': 'status-pending',
|
||||
'2': 'status-success',
|
||||
'3': 'status-refund'
|
||||
1: 'status-pending',
|
||||
2: 'status-success',
|
||||
3: 'status-refund',
|
||||
}
|
||||
return statusMap[status] || 'status-unknown'
|
||||
}
|
||||
|
|
@ -73,9 +73,9 @@ function getStatusClass(status) {
|
|||
*/
|
||||
function getLogisticClass(status) {
|
||||
const statusMap = {
|
||||
'1': 'logistic-pending',
|
||||
'2': 'logistic-success',
|
||||
'3': 'logistic-returned'
|
||||
1: 'logistic-pending',
|
||||
2: 'logistic-success',
|
||||
3: 'logistic-returned',
|
||||
}
|
||||
return statusMap[status] || 'logistic-unknown'
|
||||
}
|
||||
|
|
@ -158,7 +158,7 @@ const loadOrderDetail = async () => {
|
|||
<view class="status-card">
|
||||
<view class="status-header">
|
||||
<text class="status-title">订单状态</text>
|
||||
<text class="status-value" :class="getStatusClass(orderDetail.status)">
|
||||
<text :class="getStatusClass(orderDetail.status)" class="status-value">
|
||||
{{ mapOrderStatus('status', orderDetail.status) }}
|
||||
</text>
|
||||
</view>
|
||||
|
|
@ -215,7 +215,7 @@ const loadOrderDetail = async () => {
|
|||
<text class="label">安装地址：</text>
|
||||
<text class="value">{{ orderDetail.address || '--' }}</text>
|
||||
</view>
|
||||
<view class="info-item" v-if="orderDetail.detailed">
|
||||
<view v-if="orderDetail.detailed" class="info-item">
|
||||
<text class="label">详细地址：</text>
|
||||
<text class="value">{{ orderDetail.detailed }}</text>
|
||||
</view>
|
||||
|
|
@ -234,17 +234,17 @@ const loadOrderDetail = async () => {
|
|||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">支付状态：</text>
|
||||
<text class="value" :class="getStatusClass(orderDetail.status)">
|
||||
<text :class="getStatusClass(orderDetail.status)" class="value">
|
||||
{{ mapOrderStatus('status', orderDetail.status) }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">物流状态：</text>
|
||||
<text class="value" :class="getLogisticClass(orderDetail.logisticStatus)">
|
||||
<text :class="getLogisticClass(orderDetail.logisticStatus)" class="value">
|
||||
{{ mapOrderStatus('logistic', orderDetail.logisticStatus) }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="info-item" v-if="orderDetail.payId">
|
||||
<view v-if="orderDetail.payId" class="info-item">
|
||||
<text class="label">支付单号：</text>
|
||||
<text class="value">{{ orderDetail.payId }}</text>
|
||||
</view>
|
||||
|
|
@ -265,7 +265,7 @@ const loadOrderDetail = async () => {
|
|||
<text class="label">是否续租：</text>
|
||||
<text class="value">{{ orderDetail.renew ? '是' : '否' }}</text>
|
||||
</view>
|
||||
<view class="info-item" v-if="orderDetail.remark">
|
||||
<view v-if="orderDetail.remark" class="info-item">
|
||||
<text class="label">备注信息：</text>
|
||||
<text class="value">{{ orderDetail.remark }}</text>
|
||||
</view>
|
||||
|
|
@ -331,7 +331,7 @@ const loadOrderDetail = async () => {
|
|||
|
||||
.detail-content {
|
||||
.status-card {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background: linear-gradient(135deg, #f15a04 0%, #f15a04 100%);
|
||||
border-radius: 16rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
<view class="order-header">
|
||||
<view class="order-title">
|
||||
<text class="title-text">{{ item.typeName || '订单详情' }}</text>
|
||||
<text class="status-text" :class="getStatusClass(item.status)">
|
||||
<text :class="getStatusClass(item.status)" class="status-text">
|
||||
{{ mapOrderStatus('status', item.status) }}
|
||||
</text>
|
||||
</view>
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
</view>
|
||||
<view class="detail-item">
|
||||
<text class="label">物流状态：</text>
|
||||
<text class="value" :class="getLogisticClass(item.logisticStatus)">
|
||||
<text :class="getLogisticClass(item.logisticStatus)" class="value">
|
||||
{{ mapOrderStatus('logistic', item.logisticStatus) }}
|
||||
</text>
|
||||
</view>
|
||||
|
|
@ -79,20 +79,20 @@ const loading = ref(false)
|
|||
function mapOrderStatus(type, value) {
|
||||
const maps = {
|
||||
status: {
|
||||
'1': '未支付',
|
||||
'2': '支付成功',
|
||||
'3': '退款',
|
||||
'未支付': '1',
|
||||
'支付成功': '2',
|
||||
'退款': '3',
|
||||
1: '未支付',
|
||||
2: '支付成功',
|
||||
3: '退款',
|
||||
未支付: '1',
|
||||
支付成功: '2',
|
||||
退款: '3',
|
||||
},
|
||||
logistic: {
|
||||
'1': '未签收',
|
||||
'2': '已签收',
|
||||
'3': '已归还',
|
||||
'未签收': '1',
|
||||
'已签收': '2',
|
||||
'已归还': '3',
|
||||
1: '未签收',
|
||||
2: '已签收',
|
||||
3: '已归还',
|
||||
未签收: '1',
|
||||
已签收: '2',
|
||||
已归还: '3',
|
||||
},
|
||||
}
|
||||
|
||||
|
|
@ -106,9 +106,9 @@ function mapOrderStatus(type, value) {
|
|||
*/
|
||||
function getStatusClass(status) {
|
||||
const statusMap = {
|
||||
'1': 'status-pending',
|
||||
'2': 'status-success',
|
||||
'3': 'status-refund'
|
||||
1: 'status-pending',
|
||||
2: 'status-success',
|
||||
3: 'status-refund',
|
||||
}
|
||||
return statusMap[status] || 'status-unknown'
|
||||
}
|
||||
|
|
@ -120,9 +120,9 @@ function getStatusClass(status) {
|
|||
*/
|
||||
function getLogisticClass(status) {
|
||||
const statusMap = {
|
||||
'1': 'logistic-pending',
|
||||
'2': 'logistic-success',
|
||||
'3': 'logistic-returned'
|
||||
1: 'logistic-pending',
|
||||
2: 'logistic-success',
|
||||
3: 'logistic-returned',
|
||||
}
|
||||
return statusMap[status] || 'logistic-unknown'
|
||||
}
|
||||
|
|
@ -198,7 +198,7 @@ const getList = async () => {
|
|||
list.value = [...list.value, ...newData]
|
||||
}
|
||||
|
||||
if (newData.length < queryParams.pageSize) {
|
||||
if (queryParams.pageNum * queryParams.pageSize >= res.total) {
|
||||
noData.value = true
|
||||
}
|
||||
|
||||
|
|
@ -215,11 +215,11 @@ const getList = async () => {
|
|||
}
|
||||
|
||||
// 点击订单卡片
|
||||
const onClick = (item) => {
|
||||
const onClick = item => {
|
||||
console.log('点击订单:', item)
|
||||
// 跳转到订单详情页
|
||||
uni.navigateTo({
|
||||
url: `/pages/myOrder/orderDetail?id=${item.id}`
|
||||
url: `/pages/myOrder/orderDetail?id=${item.id}`,
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -98,13 +98,13 @@
|
|||
</view>
|
||||
<text class="function-text">申请代理</text>
|
||||
</view>
|
||||
<view class="function-item" @click="goToAgentBenefits">
|
||||
<view class="function-item" @click="goToMyOrderList">
|
||||
<view class="function-icon">
|
||||
<image :src="commonEnum.AGENCY_INTERESTS" class="function-img" mode="aspectFit"></image>
|
||||
</view>
|
||||
<text class="function-text">我的订单</text>
|
||||
</view>
|
||||
<view class="function-item" @click="goToCustomerService">
|
||||
<view class="function-item" @click="goToMyOrderList">
|
||||
<view class="function-icon">
|
||||
<image
|
||||
:src="commonEnum.ONLINE_CUSTOMER_SERVICE"
|
||||
|
|
@ -287,16 +287,9 @@ export default {
|
|||
url: '/pages/agents/agents',
|
||||
})
|
||||
},
|
||||
goToAgentBenefits() {
|
||||
uni.showToast({
|
||||
title: '我的订单',
|
||||
icon: 'none',
|
||||
})
|
||||
},
|
||||
goToCustomerService() {
|
||||
uni.showToast({
|
||||
title: '在线客服',
|
||||
icon: 'none',
|
||||
goToMyOrderList() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/myOrder/myOrder',
|
||||
})
|
||||
},
|
||||
goToIncomeExpense() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user