更新：我的订单兼容多种商品订单（电子书、课程、vip）显示
This commit is contained in:
@@ -10,34 +10,32 @@
|
||||
|
||||
<!-- 订单列表 -->
|
||||
<view class="order-list">
|
||||
<view
|
||||
v-for="order in orderList"
|
||||
:key="order.id"
|
||||
class="order-item"
|
||||
>
|
||||
<view class="order-header">
|
||||
<text class="book-name">{{ order.bookEntity.name }}</text>
|
||||
<view class="price-info">
|
||||
<image
|
||||
v-if="order.paymentMethod === '4'"
|
||||
src="/static/icon/coin.png"
|
||||
class="payment-icon"
|
||||
/>
|
||||
<image
|
||||
v-else
|
||||
src="/static/icon/currency.png"
|
||||
class="payment-icon"
|
||||
/>
|
||||
<text class="price">{{ order.orderMoney }}</text>
|
||||
<text class="currency">NZD</text>
|
||||
<wd-card v-for="order in orderList" :key="order.id" type="rectangle" custom-class="order-item">
|
||||
<template #title>
|
||||
<view class="order-item-title">
|
||||
<view class="order-item-sn">
|
||||
{{ order.orderSn }}
|
||||
<wd-icon name="file-copy" size="14px" color="#65A1FA" class="ml-1!" @click="copyToClipboard(order.orderSn)"></wd-icon>
|
||||
<!-- <wd-button type="icon" icon="file-copy" size="small"></wd-button> -->
|
||||
</view>
|
||||
<view class="order-item-status">{{ orderStatusMap[order.orderStatus] }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="order-sn">
|
||||
{{ $t('user.orderSn') }}
|
||||
{{ order.orderSn }}
|
||||
</text>
|
||||
<text class="create-time">{{ order.createTime }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- 三种订单类型商品信息 -->
|
||||
<ProductInfo v-if="order.orderType === 'order'" :data="order.productList" :type="order.orderType" />
|
||||
<ProductInfo v-if="order.orderType === 'abroadBook'" :data="order.bookEntity" :type="order.orderType" />
|
||||
<ProductInfo v-if="order.orderType === 'vip'" :data="order.vipBuyConfigEntity" :type="order.orderType" />
|
||||
<!-- 三种订单类型商品信息 end -->
|
||||
<view class="order-item-total-price">实付款：{{ order.orderMoney }} 天医币</view>
|
||||
|
||||
<template #footer>
|
||||
<view>
|
||||
<!-- <wd-button size="small" plain>申请售后</wd-button> -->
|
||||
<wd-button v-if="order.orderStatus === 0" size="small" plain class="ml-2.5!">继续付款</wd-button>
|
||||
</view>
|
||||
</template>
|
||||
</wd-card>
|
||||
</view>
|
||||
</z-paging>
|
||||
</template>
|
||||
@@ -45,8 +43,10 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { getOrderList } from '@/api/modules/user'
|
||||
import type { IOrder } from '@/types/user'
|
||||
import type { IOrder } from '@/types/order'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { copyToClipboard } from '@/utils/index'
|
||||
import ProductInfo from '@/components/order/ProductInfo.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
const paging = ref<any>(null)
|
||||
@@ -71,6 +71,12 @@ const ordersTabs = [
|
||||
},
|
||||
]
|
||||
|
||||
// 订单状态映射
|
||||
const orderStatusMap = {
|
||||
'0': '待付款',
|
||||
'3': '已完成',
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理订单状态切换
|
||||
*/
|
||||
@@ -96,135 +102,127 @@ const getData = async (page: number, pageSize: number) => {
|
||||
console.error('获取订单列表失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取订单图片
|
||||
*/
|
||||
const getOrderImage = (order: IOrder) => {
|
||||
switch (order.orderType) {
|
||||
case 'order':
|
||||
return order.productList[0]?.product?.productImages || ''
|
||||
case 'abroadBook':
|
||||
return order.bookEntity?.images || ''
|
||||
case 'vip':
|
||||
return '/static/vip.png'
|
||||
case 'point':
|
||||
return '/static/jifen.png'
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
const getOrderTitle = (order: IOrder) => {
|
||||
switch (order.orderType) {
|
||||
case 'order':
|
||||
return order.productList[0]?.product?.productName || ''
|
||||
case 'abroadBook':
|
||||
return order.bookEntity?.name || ''
|
||||
case 'vip':
|
||||
return order.vipBuyConfigEntity?.title || ''
|
||||
case 'point':
|
||||
return ''
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$theme-color: #54a966;
|
||||
|
||||
.order-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f7faf9;
|
||||
}
|
||||
|
||||
.custom-navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
background-color: #fff;
|
||||
border-bottom: 1rpx solid #e5e5e5;
|
||||
|
||||
.navbar-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 44px;
|
||||
position: relative;
|
||||
|
||||
.navbar-left {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-scroll {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.order-list {
|
||||
padding: 0 20rpx 10rpx;
|
||||
padding: 10px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.order-item {
|
||||
background: #fff;
|
||||
border-radius: 15rpx;
|
||||
padding: 30rpx;
|
||||
margin-top: 20rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
|
||||
border-radius: 8px !important;
|
||||
|
||||
.order-header {
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
:deep() {
|
||||
.wd-card__title-content {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.wd-card__content{
|
||||
padding: 10px 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.order-item-title {
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.book-name {
|
||||
flex: 1;
|
||||
font-size: 34rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
max-width: 85%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.order-item-sn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.price-info {
|
||||
.order-item-status {
|
||||
font-size: 12px;
|
||||
color: #e55f18;
|
||||
}
|
||||
|
||||
.order-item-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
|
||||
.order-item-product-info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.payment-icon {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
margin-right: 5rpx;
|
||||
.order-item-product-name {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.order-item-product-price {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
|
||||
.price {
|
||||
font-size: 36rpx;
|
||||
color: $theme-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.currency {
|
||||
font-size: 32rpx;
|
||||
color: $theme-color;
|
||||
font-weight: bold;
|
||||
margin-left: 5rpx;
|
||||
.count {
|
||||
font-weight: normal;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-sn {
|
||||
display: block;
|
||||
font-size: 30rpx;
|
||||
color: #666;
|
||||
line-height: 38rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.create-time {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
.load-tips {
|
||||
padding: 40rpx 0 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 60vh;
|
||||
padding-top: 100rpx;
|
||||
|
||||
.empty-text {
|
||||
font-size: 30rpx;
|
||||
color: #999;
|
||||
.order-item-total-price {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-top: 10px;
|
||||
text-align: right;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user