zm/taimed-international-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新：我的订单兼容多种商品订单（电子书、课程、vip）显示

Browse Source
This commit is contained in:
chenghuan
2025-11-24 10:21:02 +08:00
parent ac60a863e3
commit b357225703
14 changed files with 307 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/order/GoodsSelector.vue
View File

@@ -9,7 +9,7 @@
<image :src="goods[selectedIndex].productImages" mode="aspectFit" class="goods-cover" />
<view class="info">
<text class="name">{{ goods[selectedIndex].productName }}</text>
<text v-if="selectedGoodsPrice" class="price">NZ$ {{ selectedGoodsPrice }}</text>
<text v-if="selectedGoodsPrice" class="price">{{ selectedGoodsPrice }} 天医币</text>
</view>
</view>
@@ -30,21 +30,21 @@
<!-- VIP优惠价 -->
<view v-if="item.isVipPrice === 1 && item.vipPrice" class="price-info">
<text class="vip-price">NZ$ {{ parseFloat(item.vipPrice).toFixed(2) }}</text>
<text class="vip-price">{{ parseFloat(item.vipPrice).toFixed(2) }} 天医币</text>
<text class="vip-label">VIP到手价</text>
<text class="original-price">NZ$ {{ parseFloat(item.price).toFixed(2) }}</text>
<text class="original-price">{{ parseFloat(item.price).toFixed(2) }} 天医币</text>
</view>
<!-- 活动价 -->
<view v-else-if="item.activityPrice && item.activityPrice > 0" class="price-info">
<text class="activity-price">NZ$ {{ parseFloat(item.activityPrice).toFixed(2) }}</text>
<text class="activity-price">{{ parseFloat(item.activityPrice).toFixed(2) }} 天医币</text>
<text class="activity-label">活动价</text>
<text class="original-price">NZ$ {{ parseFloat(item.price).toFixed(2) }}</text>
<text class="original-price">{{ parseFloat(item.price).toFixed(2) }} 天医币</text>
</view>
<!-- 普通价格 -->
<view v-else class="price-info">
<text class="normal-price">NZ$ {{ parseFloat(item.price).toFixed(2) }}</text>
<text class="normal-price">{{ parseFloat(item.price).toFixed(2) }} 天医币</text>
</view>
</view>
</view>

110
components/order/ProductInfo.vue Normal file
View File

@@ -0,0 +1,110 @@
<template>
<view class="order-item-content">
<view class="order-item-product-info">
<image
:src="productImg"
mode="aspectFit"
class="order-item-product-cover"
/>
<view class="order-item-product-name" v-html="title"></view>
</view>
<view class="order-item-product-price">
<view class="price">{{ price }} 天医币</view>
<view class="count">x {{ 1 }}</view>
</view>
</view>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
interface Props {
data: any
type: string
}
const props = defineProps<Props>()
const productImg = computed(() => {
switch (props.type) {
case 'order':
return props.data[0]?.product?.productImages || ''
case 'abroadBook':
return props.data?.images || ''
case 'vip':
return '/static/vip.png'
case 'point':
return '/static/jifen.png'
default:
return ''
}
})
const title = computed(() => {
switch (props.type) {
case 'order':
return props.data[0]?.product?.productName || ''
case 'abroadBook':
return props.data?.name || ''
case 'vip':
return props.data?.title + '<text style="color: #ff4703; font-weight: bold;">(' + props.data?.year + '年)</text>' || ''
case 'point':
return ''
default:
return ''
}
})
const price = computed(() => {
switch (props.type) {
case 'order':
return props.data[0]?.product?.price || 0
case 'abroadBook':
return props.data?.abroadPrice || 0
case 'vip':
return props.data?.fee || 0
case 'point':
return ''
default:
return ''
}
})
</script>
<style lang="scss" scoped>
.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;
.order-item-product-cover {
margin-right: 12px;
width: 40px;
height: 40px;
border-radius: 4px;
background-color: #f5f5f5;
}
.order-item-product-name {
color: #333;
}
}
.order-item-product-price {
font-weight: bold;
color: #333;
text-align: right;
font-size: 12px;
.count {
font-weight: normal;
color: #999;
}
}
}
</style>

2
pages/book/detail.vue
View File

@@ -238,7 +238,7 @@ async function loadBookInfo() {
productId: bookId.value,
productName: bookInfo.value.name,
productImages: bookInfo.value.images,
price: bookInfo.value.priceData?.dictValue || 0,
price: bookInfo.value.abroadPrice || 0,
vipPrice: null,
activityPrice: null,
isVipPrice: 0,

4
pages/book/index.vue
View File

@@ -162,9 +162,7 @@
>
<image :src="item.images" />
<text class="book-text">{{ item.name }}</text>
<text v-if="formatPrice(item)" class="book-price">{{
formatPrice(item)
}}</text>
<text class="book-price">{{ item.abroadPrice }} 天医币</text>
<text v-if="formatStats(item)" class="book-flag">{{
formatStats(item)
}}</text>

0
pages/order/confirmOrder.vue Normal file
View File

268
pages/user/order/index.vue
View File

@@ -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>
</view>
</view>
<text class="order-sn">
{{ $t('user.orderSn') }}
<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 }}
</text>
<text class="create-time">{{ order.createTime }}</text>
<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>
</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;
.order-item-sn {
display: flex;
align-items: center;
height: 36px;
line-height: 36px;
}
.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;
.order-item-product-name {
color: #333;
}
}
.order-item-product-price {
font-weight: bold;
max-width: 85%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
color: #333;
text-align: right;
font-size: 12px;
.price-info {
display: flex;
align-items: center;
.payment-icon {
width: 38rpx;
height: 38rpx;
margin-right: 5rpx;
}
.price {
font-size: 36rpx;
color: $theme-color;
font-weight: bold;
}
.currency {
font-size: 32rpx;
color: $theme-color;
font-weight: bold;
margin-left: 5rpx;
}
}
}
.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;
.count {
font-weight: normal;
color: #999;
}
}
}
.order-item-total-price {
font-weight: bold;
font-size: 14px;
color: #333;
margin-top: 10px;
text-align: right;
line-height: 1;
}
}
</style>

BIN
static/jifen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
static/vip.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

41
style/tailwind.css
View File

@@ -8,6 +8,8 @@
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
--color-red-500: oklch(63.7% 0.237 25.331);
--color-white: #fff;
--spacing: 0.25rem;
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--default-transition-duration: 150ms;
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -203,6 +205,30 @@
max-width: 96rem;
}
}
.\!ml-2 {
margin-left: calc(var(--spacing) * 2) !important;
}
.\!ml-12 {
margin-left: calc(var(--spacing) * 12) !important;
}
.\!ml-\[10px\] {
margin-left: 10px !important;
}
.ml-1 {
margin-left: calc(var(--spacing) * 1);
}
.ml-1\! {
margin-left: calc(var(--spacing) * 1) !important;
}
.ml-2 {
margin-left: calc(var(--spacing) * 2);
}
.ml-2\.5\! {
margin-left: calc(var(--spacing) * 2.5) !important;
}
.ml-12 {
margin-left: calc(var(--spacing) * 12);
}
.block {
display: block;
}
@@ -236,6 +262,9 @@
.flex-shrink {
flex-shrink: 1;
}
.border-collapse {
border-collapse: collapse;
}
.transform {
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
@@ -249,6 +278,9 @@
border-style: var(--tw-border-style);
border-width: 1px;
}
.bg-\[\#e55f18\] {
background-color: #e55f18;
}
.bg-\[blue\] {
background-color: blue;
}
@@ -258,6 +290,9 @@
.bg-\[transparent\] {
background-color: transparent;
}
.bg-red-500 {
background-color: var(--color-red-500);
}
.pt-\[40px\] {
padding-top: 40px;
}
@@ -273,6 +308,9 @@
.text-\[red\] {
color: red;
}
.text-white {
color: var(--color-white);
}
.lowercase {
text-transform: lowercase;
}
@@ -283,6 +321,9 @@
--tw-ordinal: ordinal;
font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
}
.underline {
text-decoration-line: underline;
}
.ring {
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);

4
tailwind.config.js
View File

@@ -15,8 +15,8 @@ module.exports = {
// 指定要处理的文件
content: [
'./pages/**/*.{vue,js}',
'./components/**/*.{vue,js}',
'./pages/**/*.{vue,js,ts}',
'./components/**/*.{vue,js,ts}',
'./main.js',
'./App.vue',
'./index.html'

12
types/order.d.ts vendored
View File

@@ -13,6 +13,18 @@ export interface IGoods {
delFlag?: number // 删除标记 -1-已下架
}
/**
* 订单接口
*/
export interface IOrder {
id: number
orderSn: string
orderMoney: number
paymentMethod: string // '4'-虚拟货币, '5'-真实货币
createTime: string
[key: string]: any
}
/**
* 订单创建参数接口
*/

17
types/user.ts
View File

@@ -68,23 +68,6 @@ export interface IVipInfo {
[key: string]: any
}
/**
* 订单接口
*/
export interface IOrder {
id: number
orderSn: string
bookEntity: {
id: number
name: string
images: string
}
orderMoney: number
paymentMethod: string // '4'-虚拟货币, '5'-真实货币
createTime: string
[key: string]: any
}
/**
* VIP套餐接口
*/

4
utils/index.ts
View File

@@ -43,7 +43,7 @@ export const makePhoneCall = (phoneNumber: string, title: string) => {
/**
* 复制到剪贴板
*/
export const copyToClipboard = (content: string, title: string, t: Function) => {
export const copyToClipboard = (content: string, title: string = '') => {
uni.setClipboardData({
data: content,
success: () => {
@@ -52,7 +52,7 @@ export const copyToClipboard = (content: string, title: string, t: Function) =>
icon: 'none'
})
},
fail: (error) => {
fail: (error: any) => {
console.error('复制失败:', error)
}
})