WindowBird/HomeLease
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

订单页面分页加载的完善

Browse Source
This commit is contained in:
WindowBird 2025-08-25 14:12:27 +08:00
parent 8f2434e592
commit 757777de50
3 changed files with 129 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
pages/myOrder/OrderDetail.vue
View File

@ -8,14 +8,14 @@ const loading = ref(false)
const orderId = ref('') const orderId = ref('')
// 页面加载时获取参数 // 页面加载时获取参数
onLoad((options) => { onLoad(options => {
if (options.id) { if (options.id) {
orderId.value = options.id orderId.value = options.id
loadOrderDetail() loadOrderDetail()
} else { } else {
uni.showToast({ uni.showToast({
title: '订单ID不能为空', title: '订单ID不能为空',
icon: 'none' icon: 'none',
}) })
setTimeout(() => { setTimeout(() => {
uni.navigateBack() uni.navigateBack()
@ -32,20 +32,20 @@ onLoad((options) => {
function mapOrderStatus(type, value) { function mapOrderStatus(type, value) {
const maps = { const maps = {
status: { status: {
'1': '未支付', 1: '未支付',
'2': '支付成功', 2: '支付成功',
'3': '退款', 3: '退款',
'未支付': '1', 未支付: '1',
'支付成功': '2', 支付成功: '2',
'退款': '3', 退款: '3',
}, },
logistic: { logistic: {
'1': '未签收', 1: '未签收',
'2': '已签收', 2: '已签收',
'3': '已归还', 3: '已归还',
'未签收': '1', 未签收: '1',
'已签收': '2', 已签收: '2',
'已归还': '3', 已归还: '3',
}, },
} }
@ -59,9 +59,9 @@ function mapOrderStatus(type, value) {
*/ */
function getStatusClass(status) { function getStatusClass(status) {
const statusMap = { const statusMap = {
'1': 'status-pending', 1: 'status-pending',
'2': 'status-success', 2: 'status-success',
'3': 'status-refund' 3: 'status-refund',
} }
return statusMap[status] || 'status-unknown' return statusMap[status] || 'status-unknown'
} }
@ -73,9 +73,9 @@ function getStatusClass(status) {
*/ */
function getLogisticClass(status) { function getLogisticClass(status) {
const statusMap = { const statusMap = {
'1': 'logistic-pending', 1: 'logistic-pending',
'2': 'logistic-success', 2: 'logistic-success',
'3': 'logistic-returned' 3: 'logistic-returned',
} }
return statusMap[status] || 'logistic-unknown' return statusMap[status] || 'logistic-unknown'
} }
@ -87,7 +87,7 @@ function getLogisticClass(status) {
*/ */
function formatTime(timeStr) { function formatTime(timeStr) {
if (!timeStr) return '--' if (!timeStr) return '--'
try { try {
// 处理iOS兼容性问题，将 "yyyy-MM-dd HH:mm:ss" 转换为 "yyyy/MM/dd HH:mm:ss" // 处理iOS兼容性问题，将 "yyyy-MM-dd HH:mm:ss" 转换为 "yyyy/MM/dd HH:mm:ss"
let normalizedTimeStr = timeStr let normalizedTimeStr = timeStr
@ -95,20 +95,20 @@ function formatTime(timeStr) {
// 将 "2027-08-22 17:17:01" 转换为 "2027/08/22 17:17:01" // 将 "2027-08-22 17:17:01" 转换为 "2027/08/22 17:17:01"
normalizedTimeStr = timeStr.replace(/-/g, '/') normalizedTimeStr = timeStr.replace(/-/g, '/')
} }
const date = new Date(normalizedTimeStr) const date = new Date(normalizedTimeStr)
// 检查日期是否有效 // 检查日期是否有效
if (isNaN(date.getTime())) { if (isNaN(date.getTime())) {
return timeStr return timeStr
} }
const year = date.getFullYear() const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0') const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0') const day = String(date.getDate()).padStart(2, '0')
const hours = String(date.getHours()).padStart(2, '0') const hours = String(date.getHours()).padStart(2, '0')
const minutes = String(date.getMinutes()).padStart(2, '0') const minutes = String(date.getMinutes()).padStart(2, '0')
return `${year}-${month}-${day} ${hours}:${minutes}` return `${year}-${month}-${day} ${hours}:${minutes}`
} catch (error) { } catch (error) {
console.error('时间格式化错误:', error, '原始时间:', timeStr) console.error('时间格式化错误:', error, '原始时间:', timeStr)
@ -121,11 +121,11 @@ function formatTime(timeStr) {
*/ */
const loadOrderDetail = async () => { const loadOrderDetail = async () => {
if (!orderId.value) return if (!orderId.value) return
try { try {
loading.value = true loading.value = true
const res = await getOrderDetail(orderId.value) const res = await getOrderDetail(orderId.value)
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
orderDetail.value = res.data orderDetail.value = res.data
console.log('订单详情:', orderDetail.value) console.log('订单详情:', orderDetail.value)
@ -151,14 +151,14 @@ const loadOrderDetail = async () => {
<view v-if="loading" class="loading-container"> <view v-if="loading" class="loading-container">
<text class="loading-text">正在加载订单详情...</text> <text class="loading-text">正在加载订单详情...</text>
</view> </view>
<!-- 订单详情内容 --> <!-- 订单详情内容 -->
<view v-else-if="orderDetail" class="detail-content"> <view v-else-if="orderDetail" class="detail-content">
<!-- 订单状态卡片 --> <!-- 订单状态卡片 -->
<view class="status-card"> <view class="status-card">
<view class="status-header"> <view class="status-header">
<text class="status-title">订单状态</text> <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) }} {{ mapOrderStatus('status', orderDetail.status) }}
</text> </text>
</view> </view>
@ -167,7 +167,7 @@ const loadOrderDetail = async () => {
<text class="create-time">创建时间：{{ formatTime(orderDetail.createTime) }}</text> <text class="create-time">创建时间：{{ formatTime(orderDetail.createTime) }}</text>
</view> </view>
</view> </view>
<!-- 设备信息卡片 --> <!-- 设备信息卡片 -->
<view class="info-card"> <view class="info-card">
<view class="card-title"> <view class="card-title">
@ -196,7 +196,7 @@ const loadOrderDetail = async () => {
</view> </view>
</view> </view>
</view> </view>
<!-- 用户信息卡片 --> <!-- 用户信息卡片 -->
<view class="info-card"> <view class="info-card">
<view class="card-title"> <view class="card-title">
@ -215,13 +215,13 @@ const loadOrderDetail = async () => {
<text class="label">安装地址：</text> <text class="label">安装地址：</text>
<text class="value">{{ orderDetail.address || '--' }}</text> <text class="value">{{ orderDetail.address || '--' }}</text>
</view> </view>
<view class="info-item" v-if="orderDetail.detailed"> <view v-if="orderDetail.detailed" class="info-item">
<text class="label">详细地址：</text> <text class="label">详细地址：</text>
<text class="value">{{ orderDetail.detailed }}</text> <text class="value">{{ orderDetail.detailed }}</text>
</view> </view>
</view> </view>
</view> </view>
<!-- 支付信息卡片 --> <!-- 支付信息卡片 -->
<view class="info-card"> <view class="info-card">
<view class="card-title"> <view class="card-title">
@ -234,23 +234,23 @@ const loadOrderDetail = async () => {
</view> </view>
<view class="info-item"> <view class="info-item">
<text class="label">支付状态：</text> <text class="label">支付状态：</text>
<text class="value" :class="getStatusClass(orderDetail.status)"> <text :class="getStatusClass(orderDetail.status)" class="value">
{{ mapOrderStatus('status', orderDetail.status) }} {{ mapOrderStatus('status', orderDetail.status) }}
</text> </text>
</view> </view>
<view class="info-item"> <view class="info-item">
<text class="label">物流状态：</text> <text class="label">物流状态：</text>
<text class="value" :class="getLogisticClass(orderDetail.logisticStatus)"> <text :class="getLogisticClass(orderDetail.logisticStatus)" class="value">
{{ mapOrderStatus('logistic', orderDetail.logisticStatus) }} {{ mapOrderStatus('logistic', orderDetail.logisticStatus) }}
</text> </text>
</view> </view>
<view class="info-item" v-if="orderDetail.payId"> <view v-if="orderDetail.payId" class="info-item">
<text class="label">支付单号：</text> <text class="label">支付单号：</text>
<text class="value">{{ orderDetail.payId }}</text> <text class="value">{{ orderDetail.payId }}</text>
</view> </view>
</view> </view>
</view> </view>
<!-- 其他信息卡片 --> <!-- 其他信息卡片 -->
<view class="info-card"> <view class="info-card">
<view class="card-title"> <view class="card-title">
@ -265,14 +265,14 @@ const loadOrderDetail = async () => {
<text class="label">是否续租：</text> <text class="label">是否续租：</text>
<text class="value">{{ orderDetail.renew ? '是' : '否' }}</text> <text class="value">{{ orderDetail.renew ? '是' : '否' }}</text>
</view> </view>
<view class="info-item" v-if="orderDetail.remark"> <view v-if="orderDetail.remark" class="info-item">
<text class="label">备注信息：</text> <text class="label">备注信息：</text>
<text class="value">{{ orderDetail.remark }}</text> <text class="value">{{ orderDetail.remark }}</text>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<!-- 错误状态 --> <!-- 错误状态 -->
<view v-else class="error-container"> <view v-else class="error-container">
<view class="error-icon">❌</view> <view class="error-icon">❌</view>
@ -294,7 +294,7 @@ const loadOrderDetail = async () => {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 400rpx; height: 400rpx;
.loading-text { .loading-text {
font-size: 28rpx; font-size: 28rpx;
color: #666; color: #666;
@ -307,18 +307,18 @@ const loadOrderDetail = async () => {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 400rpx; height: 400rpx;
.error-icon { .error-icon {
font-size: 80rpx; font-size: 80rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
.error-text { .error-text {
font-size: 28rpx; font-size: 28rpx;
color: #999; color: #999;
margin-bottom: 30rpx; margin-bottom: 30rpx;
} }
.retry-btn { .retry-btn {
background-color: #007aff; background-color: #007aff;
color: #fff; color: #fff;
@ -331,44 +331,44 @@ const loadOrderDetail = async () => {
.detail-content { .detail-content {
.status-card { .status-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #f15a04 0%, #f15a04 100%);
border-radius: 16rpx; border-radius: 16rpx;
padding: 40rpx 30rpx; padding: 40rpx 30rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
color: #fff; color: #fff;
.status-header { .status-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 20rpx; margin-bottom: 20rpx;
.status-title { .status-title {
font-size: 32rpx; font-size: 32rpx;
font-weight: 600; font-weight: 600;
} }
.status-value { .status-value {
font-size: 26rpx; font-size: 26rpx;
padding: 8rpx 16rpx; padding: 8rpx 16rpx;
border-radius: 20rpx; border-radius: 20rpx;
background-color: rgba(255, 255, 255, 0.2); background-color: rgba(255, 255, 255, 0.2);
font-weight: 500; font-weight: 500;
&.status-pending { &.status-pending {
background-color: rgba(250, 140, 22, 0.8); background-color: rgba(250, 140, 22, 0.8);
} }
&.status-success { &.status-success {
background-color: rgba(82, 196, 26, 0.8); background-color: rgba(82, 196, 26, 0.8);
} }
&.status-refund { &.status-refund {
background-color: rgba(255, 77, 79, 0.8); background-color: rgba(255, 77, 79, 0.8);
} }
} }
} }
.status-info { .status-info {
.order-number { .order-number {
display: block; display: block;
@ -376,7 +376,7 @@ const loadOrderDetail = async () => {
margin-bottom: 10rpx; margin-bottom: 10rpx;
opacity: 0.9; opacity: 0.9;
} }
.create-time { .create-time {
display: block; display: block;
font-size: 24rpx; font-size: 24rpx;
@ -384,79 +384,79 @@ const loadOrderDetail = async () => {
} }
} }
} }
.info-card { .info-card {
background-color: #fff; background-color: #fff;
border-radius: 16rpx; border-radius: 16rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
overflow: hidden; overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
.card-title { .card-title {
background-color: #f8f9fa; background-color: #f8f9fa;
padding: 20rpx 30rpx; padding: 20rpx 30rpx;
border-bottom: 1rpx solid #f0f0f0; border-bottom: 1rpx solid #f0f0f0;
.title-text { .title-text {
font-size: 30rpx; font-size: 30rpx;
font-weight: 600; font-weight: 600;
color: #333; color: #333;
} }
} }
.card-content { .card-content {
padding: 30rpx; padding: 30rpx;
.info-item { .info-item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
margin-bottom: 20rpx; margin-bottom: 20rpx;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.label { .label {
font-size: 28rpx; font-size: 28rpx;
color: #666; color: #666;
min-width: 160rpx; min-width: 160rpx;
flex-shrink: 0; flex-shrink: 0;
} }
.value { .value {
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333;
flex: 1; flex: 1;
text-align: right; text-align: right;
word-break: break-all; word-break: break-all;
&.amount { &.amount {
font-size: 32rpx; font-size: 32rpx;
color: #f15a04; color: #f15a04;
font-weight: bold; font-weight: bold;
} }
&.status-pending { &.status-pending {
color: #fa8c16; color: #fa8c16;
} }
&.status-success { &.status-success {
color: #52c41a; color: #52c41a;
} }
&.status-refund { &.status-refund {
color: #ff4d4f; color: #ff4d4f;
} }
&.logistic-pending { &.logistic-pending {
color: #fa8c16; color: #fa8c16;
} }
&.logistic-success { &.logistic-success {
color: #52c41a; color: #52c41a;
} }
&.logistic-returned { &.logistic-returned {
color: #1890ff; color: #1890ff;
} }

114
pages/myOrder/myOrder.vue
View File

@ -4,32 +4,32 @@
<view v-if="loading" class="loading-container"> <view v-if="loading" class="loading-container">
<text class="loading-text">正在加载...</text> <text class="loading-text">正在加载...</text>
</view> </view>
<!-- 空数据状态 --> <!-- 空数据状态 -->
<view v-else-if="list.length === 0 && !loading" class="empty-container"> <view v-else-if="list.length === 0 && !loading" class="empty-container">
<view class="empty-icon">📋</view> <view class="empty-icon">📋</view>
<text class="empty-text">暂无订单数据</text> <text class="empty-text">暂无订单数据</text>
</view> </view>
<!-- 订单列表 --> <!-- 订单列表 -->
<view v-else> <view v-else>
<view v-for="item in list" :key="item.id" class="order-item" @click="onClick(item)"> <view v-for="item in list" :key="item.id" class="order-item" @click="onClick(item)">
<view class="order-header"> <view class="order-header">
<view class="order-title"> <view class="order-title">
<text class="title-text">{{ item.typeName || '订单详情' }}</text> <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) }} {{ mapOrderStatus('status', item.status) }}
</text> </text>
</view> </view>
<text class="order-time">{{ formatTime(item.createTime) }}</text> <text class="order-time">{{ formatTime(item.createTime) }}</text>
</view> </view>
<view class="order-content"> <view class="order-content">
<view class="order-info"> <view class="order-info">
<text class="order-id">订单号：{{ item.orderNumber || item.id }}</text> <text class="order-id">订单号：{{ item.orderNumber || item.id }}</text>
<text class="order-amount">¥{{ item.amount || '0.00' }}</text> <text class="order-amount">¥{{ item.amount || '0.00' }}</text>
</view> </view>
<view class="order-details"> <view class="order-details">
<view class="detail-item"> <view class="detail-item">
<text class="label">租赁套餐：</text> <text class="label">租赁套餐：</text>
@ -45,14 +45,14 @@
</view> </view>
<view class="detail-item"> <view class="detail-item">
<text class="label">物流状态：</text> <text class="label">物流状态：</text>
<text class="value" :class="getLogisticClass(item.logisticStatus)"> <text :class="getLogisticClass(item.logisticStatus)" class="value">
{{ mapOrderStatus('logistic', item.logisticStatus) }} {{ mapOrderStatus('logistic', item.logisticStatus) }}
</text> </text>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<!-- 加载更多状态 --> <!-- 加载更多状态 -->
<view v-if="noData && list.length > 0" class="load-more"> <view v-if="noData && list.length > 0" class="load-more">
<text class="no-more-text">没有更多数据了</text> <text class="no-more-text">没有更多数据了</text>
@ -79,20 +79,20 @@ const loading = ref(false)
function mapOrderStatus(type, value) { function mapOrderStatus(type, value) {
const maps = { const maps = {
status: { status: {
'1': '未支付', 1: '未支付',
'2': '支付成功', 2: '支付成功',
'3': '退款', 3: '退款',
'未支付': '1', 未支付: '1',
'支付成功': '2', 支付成功: '2',
'退款': '3', 退款: '3',
}, },
logistic: { logistic: {
'1': '未签收', 1: '未签收',
'2': '已签收', 2: '已签收',
'3': '已归还', 3: '已归还',
'未签收': '1', 未签收: '1',
'已签收': '2', 已签收: '2',
'已归还': '3', 已归还: '3',
}, },
} }
@ -106,9 +106,9 @@ function mapOrderStatus(type, value) {
*/ */
function getStatusClass(status) { function getStatusClass(status) {
const statusMap = { const statusMap = {
'1': 'status-pending', 1: 'status-pending',
'2': 'status-success', 2: 'status-success',
'3': 'status-refund' 3: 'status-refund',
} }
return statusMap[status] || 'status-unknown' return statusMap[status] || 'status-unknown'
} }
@ -120,9 +120,9 @@ function getStatusClass(status) {
*/ */
function getLogisticClass(status) { function getLogisticClass(status) {
const statusMap = { const statusMap = {
'1': 'logistic-pending', 1: 'logistic-pending',
'2': 'logistic-success', 2: 'logistic-success',
'3': 'logistic-returned' 3: 'logistic-returned',
} }
return statusMap[status] || 'logistic-unknown' return statusMap[status] || 'logistic-unknown'
} }
@ -134,7 +134,7 @@ function getLogisticClass(status) {
*/ */
function formatTime(timeStr) { function formatTime(timeStr) {
if (!timeStr) return '--' if (!timeStr) return '--'
try { try {
// 处理iOS兼容性问题，将 "yyyy-MM-dd HH:mm:ss" 转换为 "yyyy/MM/dd HH:mm:ss" // 处理iOS兼容性问题，将 "yyyy-MM-dd HH:mm:ss" 转换为 "yyyy/MM/dd HH:mm:ss"
let normalizedTimeStr = timeStr let normalizedTimeStr = timeStr
@ -142,20 +142,20 @@ function formatTime(timeStr) {
// 将 "2027-08-22 17:17:01" 转换为 "2027/08/22 17:17:01" // 将 "2027-08-22 17:17:01" 转换为 "2027/08/22 17:17:01"
normalizedTimeStr = timeStr.replace(/-/g, '/') normalizedTimeStr = timeStr.replace(/-/g, '/')
} }
const date = new Date(normalizedTimeStr) const date = new Date(normalizedTimeStr)
// 检查日期是否有效 // 检查日期是否有效
if (isNaN(date.getTime())) { if (isNaN(date.getTime())) {
return timeStr return timeStr
} }
const year = date.getFullYear() const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0') const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0') const day = String(date.getDate()).padStart(2, '0')
const hours = String(date.getHours()).padStart(2, '0') const hours = String(date.getHours()).padStart(2, '0')
const minutes = String(date.getMinutes()).padStart(2, '0') const minutes = String(date.getMinutes()).padStart(2, '0')
return `${year}-${month}-${day} ${hours}:${minutes}` return `${year}-${month}-${day} ${hours}:${minutes}`
} catch (error) { } catch (error) {
console.error('时间格式化错误:', error, '原始时间:', timeStr) console.error('时间格式化错误:', error, '原始时间:', timeStr)
@ -183,7 +183,7 @@ onReachBottom(() => {
// 获取列表 // 获取列表
const getList = async () => { const getList = async () => {
if (loading.value) return if (loading.value) return
try { try {
loading.value = true loading.value = true
let res = await getMyOrder(queryParams) let res = await getMyOrder(queryParams)
@ -198,10 +198,10 @@ const getList = async () => {
list.value = [...list.value, ...newData] list.value = [...list.value, ...newData]
} }
if (newData.length < queryParams.pageSize) { if (queryParams.pageNum * queryParams.pageSize >= res.total) {
noData.value = true noData.value = true
} }
console.log('订单列表:', list.value) console.log('订单列表:', list.value)
} catch (error) { } catch (error) {
console.error('获取订单列表失败:', error) console.error('获取订单列表失败:', error)
@ -215,11 +215,11 @@ const getList = async () => {
} }
// 点击订单卡片 // 点击订单卡片
const onClick = (item) => { const onClick = item => {
console.log('点击订单:', item) console.log('点击订单:', item)
// 跳转到订单详情页 // 跳转到订单详情页
uni.navigateTo({ uni.navigateTo({
url: `/pages/myOrder/orderDetail?id=${item.id}` url: `/pages/myOrder/orderDetail?id=${item.id}`,
}) })
} }
@ -244,7 +244,7 @@ onUnload(() => {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 200rpx; height: 200rpx;
.loading-text { .loading-text {
font-size: 28rpx; font-size: 28rpx;
color: #666; color: #666;
@ -257,12 +257,12 @@ onUnload(() => {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 400rpx; height: 400rpx;
.empty-icon { .empty-icon {
font-size: 80rpx; font-size: 80rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
.empty-text { .empty-text {
font-size: 28rpx; font-size: 28rpx;
color: #999; color: #999;
@ -275,7 +275,7 @@ onUnload(() => {
margin-bottom: 20rpx; margin-bottom: 20rpx;
padding: 30rpx; padding: 30rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
&:active { &:active {
background-color: #f8f8f8; background-color: #f8f8f8;
} }
@ -283,47 +283,47 @@ onUnload(() => {
.order-header { .order-header {
margin-bottom: 20rpx; margin-bottom: 20rpx;
.order-title { .order-title {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 10rpx; margin-bottom: 10rpx;
.title-text { .title-text {
font-size: 32rpx; font-size: 32rpx;
font-weight: 600; font-weight: 600;
color: #333; color: #333;
} }
.status-text { .status-text {
font-size: 24rpx; font-size: 24rpx;
padding: 6rpx 12rpx; padding: 6rpx 12rpx;
border-radius: 20rpx; border-radius: 20rpx;
font-weight: 500; font-weight: 500;
&.status-pending { &.status-pending {
background-color: #fff7e6; background-color: #fff7e6;
color: #fa8c16; color: #fa8c16;
} }
&.status-success { &.status-success {
background-color: #f6ffed; background-color: #f6ffed;
color: #52c41a; color: #52c41a;
} }
&.status-refund { &.status-refund {
background-color: #fff2f0; background-color: #fff2f0;
color: #ff4d4f; color: #ff4d4f;
} }
&.status-unknown { &.status-unknown {
background-color: #f5f5f5; background-color: #f5f5f5;
color: #999; color: #999;
} }
} }
} }
.order-time { .order-time {
font-size: 24rpx; font-size: 24rpx;
color: #999; color: #999;
@ -338,49 +338,49 @@ onUnload(() => {
margin-bottom: 20rpx; margin-bottom: 20rpx;
padding-bottom: 15rpx; padding-bottom: 15rpx;
border-bottom: 1rpx solid #f0f0f0; border-bottom: 1rpx solid #f0f0f0;
.order-id { .order-id {
font-size: 26rpx; font-size: 26rpx;
color: #666; color: #666;
} }
.order-amount { .order-amount {
font-size: 32rpx; font-size: 32rpx;
color: #f15a04; color: #f15a04;
font-weight: bold; font-weight: bold;
} }
} }
.order-details { .order-details {
.detail-item { .detail-item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 12rpx; margin-bottom: 12rpx;
.label { .label {
font-size: 26rpx; font-size: 26rpx;
color: #666; color: #666;
min-width: 140rpx; min-width: 140rpx;
} }
.value { .value {
font-size: 26rpx; font-size: 26rpx;
color: #333; color: #333;
flex: 1; flex: 1;
text-align: right; text-align: right;
&.logistic-pending { &.logistic-pending {
color: #fa8c16; color: #fa8c16;
} }
&.logistic-success { &.logistic-success {
color: #52c41a; color: #52c41a;
} }
&.logistic-returned { &.logistic-returned {
color: #1890ff; color: #1890ff;
} }
&.logistic-unknown { &.logistic-unknown {
color: #999; color: #999;
} }
@ -392,7 +392,7 @@ onUnload(() => {
.load-more { .load-more {
margin-top: 20rpx; margin-top: 20rpx;
text-align: center; text-align: center;
.no-more-text { .no-more-text {
font-size: 24rpx; font-size: 24rpx;
color: #999; color: #999;

17
pages/profile/profile.vue
View File

@ -98,13 +98,13 @@
</view> </view>
<text class="function-text">申请代理</text> <text class="function-text">申请代理</text>
</view> </view>
<view class="function-item" @click="goToAgentBenefits"> <view class="function-item" @click="goToMyOrderList">
<view class="function-icon"> <view class="function-icon">
<image :src="commonEnum.AGENCY_INTERESTS" class="function-img" mode="aspectFit"></image> <image :src="commonEnum.AGENCY_INTERESTS" class="function-img" mode="aspectFit"></image>
</view> </view>
<text class="function-text">我的订单</text> <text class="function-text">我的订单</text>
</view> </view>
<view class="function-item" @click="goToCustomerService"> <view class="function-item" @click="goToMyOrderList">
<view class="function-icon"> <view class="function-icon">
<image <image
:src="commonEnum.ONLINE_CUSTOMER_SERVICE" :src="commonEnum.ONLINE_CUSTOMER_SERVICE"
@ -287,16 +287,9 @@ export default {
url: '/pages/agents/agents', url: '/pages/agents/agents',
}) })
}, },
goToAgentBenefits() { goToMyOrderList() {
uni.showToast({ uni.navigateTo({
title: '我的订单', url: '/pages/myOrder/myOrder',
icon: 'none',
})
},
goToCustomerService() {
uni.showToast({
title: '在线客服',
icon: 'none',
}) })
}, },
goToIncomeExpense() { goToIncomeExpense() {