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

更新：课程与图书下单支付功能初步完成

Browse Source
This commit is contained in:
chenghuan
2025-11-25 11:23:42 +08:00
parent bfe0c09242
commit 7dea269e6a
14 changed files with 1490 additions and 2361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

795
components/order/Confirm.vue Normal file
View File

@@ -0,0 +1,795 @@
<template>
<view class="confirm-order-page">
<!-- 商品列表区域 -->
<view class="common-section">
<view class="section-title">{{ $t('order.goodsInfo') }}</view>
<slot name="goodsList" />
</view>
<!-- 订单备注区域 -->
<view class="remark-section common-section" @click="showRemarkPopup = true">
<view class="remark-row">
<text class="remark-label">{{ $t('order.remark') }}</text>
<view class="remark-value">
<text :class="remark ? 'remark-text' : 'remark-placeholder'">
{{ remark || $t('order.remarkPlaceholder') }}
</text>
<image src="/static/icon/icon_right.png" class="arrow-icon" />
</view>
</view>
</view>
<!-- 价格明细区域 -->
<view class="price-section common-section">
<view class="section-title">{{ $t('order.priceDetail') }}</view>
<!-- 商品总价 -->
<view class="price-item">
<text class="label">{{ $t('order.totalPrice') }}</text>
<text class="value">{{ totalPrice.toFixed(2) }} 天医币</text>
</view>
<!-- 优惠券 -->
<!-- <coupon v-model="selectedCoupon" /> -->
<!-- 活动立减 -->
<view v-if="hasActivityDiscount" class="price-item">
<text class="label">{{ $t('order.activityDiscount') }}</text>
<text class="discount-value">-￥{{ activityDiscountAmount.toFixed(2) }}</text>
</view>
<!-- VIP专享立减 -->
<view v-if="vipPrice > 0" class="price-item">
<view class="label-row">
<text class="vip-icon">VIP</text>
<text class="label">{{ $t('order.vipDiscount') }}</text>
</view>
<text class="discount-value">-￥{{ vipPrice.toFixed(2) }}</text>
</view>
<!-- 地区优惠 -->
<view v-if="districtAmount > 0" class="price-item">
<text class="label">{{ $t('order.districtDiscount') }}</text>
<text class="discount-value">-￥{{ districtAmount.toFixed(2) }}</text>
</view>
<!-- 积分 -->
<view v-if="allowPointPay && userInfo.jf > 0" class="price-item">
<view class="label-row">
<image src="/static/icon/jifen.png" class="icon-img" />
<text class="label">{{ $t('order.points') }}</text>
<text class="points-total">
({{ $t('order.allPoints') }}：{{ userInfo.jf }})
</text>
</view>
<text class="discount-value">-{{ jfNumber.toFixed(2) }}</text>
</view>
<!-- 积分输入 -->
<view v-if="allowPointPay && userInfo.jf > 0" class="points-input-section">
<text class="points-label">
{{ $t('order.maxPoints', { max: jfNumberMax }) }}
</text>
<view class="points-input-box">
<input
v-model="jfNumber"
type="number"
clearable
:placeholder="$t('order.pointsPlaceholder')"
class="text-right"
@input="handlePointsInput"
@clear="handlePointsClear"
/>
</view>
</view>
</view>
<!-- 支付方式区域 -->
<view class="common-section">
<view class="section-title">{{ $t('order.paymentMethod') }}</view>
<PayWay :peanutCoin="userInfo?.peanutCoin || 0" />
</view>
<!-- 底部汇总栏 -->
<view class="bottom-bar">
<view class="total-info">
<text class="label">{{ $t('order.total') }}：</text>
<text class="amount">{{ actualPayment.toFixed(2) }} 天医币</text>
</view>
<wd-button type="primary" :loading="submitting" @click="handleSubmit">
{{ $t('order.submit') }}
</wd-button>
</view>
<!-- 订单备注弹窗 -->
<wd-popup
v-model="showRemarkPopup"
position="bottom"
>
<view class="remark-popup">
<view class="popup-header">{{ $t('order.remarkTitle') }}</view>
<view class="remark-content">
<wd-textarea
v-model="remark"
:placeholder="$t('order.remarkPlaceholder')"
:maxlength="200"
show-word-limit
class="pb-0!"
/>
</view>
<view class="popup-footer">
<wd-button type="primary" block @click="handleRemarkConfirm">{{ $t('global.ok') }}</wd-button>
</view>
</view>
</wd-popup>
</view>
</template>
<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { orderApi } from '@/api/modules/order'
import { t } from '@/utils/i18n'
import type { IOrderGoods } from '@/types/order'
import PayWay from '@/components/order/PayWay.vue'
// 使用页面传参
interface Props {
goodsList: IOrderGoods[],
userInfo: object
}
const props = withDefaults(defineProps<Props>(), {
goodsList: () => [],
userInfo: () => ({}),
allowPointPay: () => true
})
// 价格相关
const totalPrice = ref(0)
const vipPrice = ref(0)
const districtAmount = ref(0)
const actualPayment = ref(0)
// 积分相关
const jfNumber = ref(0)
const jfNumberMax = ref(0)
// 优惠券相关
// 订单备注
const remark = ref('')
const showRemarkPopup = ref(false)
// 支付相关
// UI状态
const submitting = ref(false)
watch(() => props.goodsList, () => {
// 初始化价格
calculateAllPrices()
})
/**
* 是否有活动优惠
*/
const hasActivityDiscount = computed(() => {
return props.goodsList.some(item => item.activityPrice && item.activityPrice > 0)
})
/**
* 活动优惠金额
*/
const activityDiscountAmount = computed(() => {
return props.goodsList.reduce((sum, item) => {
if (item.activityPrice && item.activityPrice > 0) {
return sum + (item.price - item.activityPrice) * item.productAmount
}
return sum
}, 0)
})
/**
* 处理商品数量变化
*/
const handleQuantityChange = async (item: IOrderGoods, value: number) => {
try {
// 更新购物车
await orderApi.updateCart({
productId: item.productId,
productAmount: value,
price: item.price
})
// 重新获取商品列表和计算价格
// await getGoodsList()
} catch (error) {
console.error('更新数量失败:', error)
uni.showToast({
title: '更新失败',
icon: 'none'
})
}
}
/**
* 计算所有价格
*/
const calculateAllPrices = async () => {
try {
// 计算商品总价
calculateTotalPrice()
// 获取VIP优惠
// await calculateVipDiscount()
// 获取地区优惠
// await calculateDistrictDiscount()
// 获取优惠券列表
// await getAvailableCoupons()
// 计算最终价格
calculateFinalPrice()
} catch (error) {
console.error('计算价格失败:', error)
}
}
/**
* 计算商品总价
*/
const calculateTotalPrice = () => {
console.log('商品列表:', props.goodsList)
totalPrice.value = props.goodsList.reduce((sum, item) => {
// return sum + (item.price * item.productAmount)
return sum + (item.price * 1)
}, 0)
}
/**
* 计算VIP优惠
*/
const calculateVipDiscount = async () => {
try {
const productList = props.goodsList.map(item => ({
productId: item.productId,
quantity: item.productAmount
}))
const res = await orderApi.getVipDiscountAmount(productList)
if (res.code === 0 && res.data) {
vipPrice.value = res.data.discountAmount
}
} catch (error) {
console.error('获取VIP优惠失败:', error)
}
}
/**
* 计算活动优惠
*/
const calculateDistrictDiscount = async () => {
try {
const productList = props.goodsList.map(item => ({
productId: item.productId,
quantity: item.productAmount
}))
const res = await orderApi.getDistrictAmount(productList)
if (res.code === 0 && res.data) {
districtAmount.value = res.data.districtAmount
}
} catch (error) {
console.error('获取地区优惠失败:', error)
}
}
/**
* 获取可用优惠券
*/
const getAvailableCoupons = async () => {
try {
const shopProductInfos = props.goodsList.map(item => {
const price = item.activityPrice && item.activityPrice > 0 ? item.activityPrice : item.price
return `${item.productId}:${price}:${item.productAmount}`
}).join(',')
const res = await orderApi.getCouponListPayment(shopProductInfos)
if (res.code === 0 && res.data) {
couponList.value = res.data.couponHistoryList || []
// 如果当前选中的优惠券不可用，清除选择
if (selectedCoupon.value) {
const stillAvailable = couponList.value.find(
c => c.couponId === selectedCoupon.value?.couponId && c.canUse === 1
)
if (!stillAvailable) {
selectedCoupon.value = null
}
}
}
} catch (error) {
console.error('获取优惠券失败:', error)
}
}
/**
* 计算最终价格
*/
const calculateFinalPrice = () => {
const couponAmount = selectedCoupon.value?.couponEntity.couponAmount || 0
// 计算最大可用积分
const orderAmountAfterDiscount = totalPrice.value - districtAmount.value - vipPrice.value
jfNumberMax.value = Math.min(
props.userInfo.jf || 0,
Math.floor(orderAmountAfterDiscount - couponAmount)
)
// 限制当前积分不超过最大值
if (jfNumber.value > jfNumberMax.value) {
jfNumber.value = jfNumberMax.value
}
// 计算实付款
actualPayment.value = Math.max(
0,
totalPrice.value - couponAmount - jfNumber.value - districtAmount.value - vipPrice.value
)
}
/**
* 处理积分输入
*/
const handlePointsInput = (value: any) => {
let val = String(value.detail.value)
// 只允许数字字符，去掉小数点
val = val.replace(/[^0-9]/g, '')
if (val === '0' || val === '') {
jfNumber.value = 0
} else {
let numericValue = parseInt(val, 10)
if (numericValue < 0 || isNaN(numericValue)) {
numericValue = 0
}
// 确保不超过最大值
if (numericValue >= jfNumberMax.value) {
numericValue = jfNumberMax.value
}
jfNumber.value = numericValue
}
// 重新计算实付款
calculateFinalPrice()
}
/**
* 清除积分输入
*/
const handlePointsClear = () => {
jfNumber.value = 0
calculateFinalPrice()
}
/**
* 跳转到充值页面
*/
const goToRecharge = () => {
uni.navigateTo({
url: '/pages/user/wallet/recharge/index?source=order'
})
}
/**
* 确认备注
*/
const handleRemarkConfirm = () => {
showRemarkPopup.value = false
}
/**
* 验证订单
*/
const validateOrder = (): boolean => {
// 验证天医币余额
if (actualPayment.value > props.userInfo.peanutCoin) {
uni.showToast({
title: t('order.insufficientBalance'),
icon: 'none'
})
return false
}
return true
}
/**
* 提交订单
*/
const handleSubmit = async () => {
if (submitting.value) {
uni.showToast({
title: t('order.tooFrequent'),
icon: 'none'
})
return
}
// 验证订单
if (!validateOrder()) {
return
}
try {
submitting.value = true
// 创建订单 此app用天医币支付，创建订单成功即支付成功
await createOrder()
uni.showToast({
title: t('order.orderSuccess'),
icon: 'success'
})
} catch (error) {
console.error('提交订单失败:', error)
uni.showToast({
title: t('order.orderFailed'),
icon: 'none'
})
} finally {
submitting.value = false
}
}
/**
* 创建订单
*/
const createOrder = async (): Promise<string | null> => {
try {
const orderParams = {
userId: props.userInfo.id,
paymentMethod: 4, // 天医币
orderMoney: totalPrice.value,
realMoney: actualPayment.value,
jfDeduction: jfNumber.value,
// couponId: selectedCoupon.value?.id,
// couponName: selectedCoupon.value?.couponEntity.couponName,
// vipDiscountAmount: vipPrice.value,
// districtMoney: districtAmount.value,
remark: remark.value,
productList: props.goodsList.map(item => ({
productId: item.productId,
quantity: item.productAmount || 1
})),
orderType: 'order',
come: 10
}
const res = await orderApi.placeCourseOrder(orderParams)
if (res.code === 0 && res.orderSn) {
return res.orderSn
}
return null
} catch (error) {
console.error('创建订单失败:', error)
throw error
}
}
</script>
<style lang="scss" scoped>
.confirm-order-page {
min-height: 100vh;
background-color: #f5f5f5;
padding: 20rpx;
padding-bottom: 60px;
}
.common-section {
background-color: #fff;
border-radius: 12rpx;
padding: 20rpx;
margin-bottom: 20rpx;
}
.section-title {
font-size: 28rpx;
font-weight: bold;
color: #333;
margin-bottom: 20rpx;
}
.price-section {
.price-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15rpx 0;
font-size: 28rpx;
.label-row {
display: flex;
align-items: center;
gap: 10rpx;
.label {
color: #666;
}
.vip-icon {
padding: 2rpx 8rpx;
background-color: #f94f04;
color: #fff;
font-size: 20rpx;
border-radius: 4rpx;
font-weight: bold;
}
.icon-img {
width: 40rpx;
height: 40rpx;
}
.points-total {
font-size: 24rpx;
color: #aaa;
}
}
.label {
color: #666;
}
.value {
color: #333;
font-weight: 500;
}
.value-row {
display: flex;
align-items: center;
gap: 10rpx;
}
.discount-value {
color: #fe6035;
font-weight: 500;
}
}
.points-input-section {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15rpx 0;
margin-top: 10rpx;
background-color: #f5f5f5;
border-radius: 20rpx;
padding: 20rpx;
.points-label {
font-size: 28rpx;
color: #7dc1f0;
font-weight: 600;
}
.points-input-box {
width: 320rpx;
}
}
}
.goods-section {
.goods-item {
position: relative;
display: flex;
padding-bottom: 20rpx;
border-bottom: 1px solid #f0f0f0;
&:last-child {
border-bottom: none;
padding-bottom: 0;
}
.vip-badge {
position: absolute;
top: 20rpx;
left: 0;
z-index: 1;
}
.goods-image {
width: 140rpx;
height: 140rpx;
flex-shrink: 0;
margin-right: 20rpx;
background-color: #f5f5f5;
border-radius: 8rpx;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
.goods-info {
flex: 1;
display: flex;
flex-direction: column;
.goods-name {
font-size: 28rpx;
color: #333;
line-height: 1.4;
margin-bottom: 10rpx;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.price-info {
.price-row {
display: flex;
align-items: baseline;
gap: 10rpx;
.vip-price,
.activity-price {
font-size: 32rpx;
font-weight: bold;
color: #e97512;
}
.normal-price {
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.vip-label {
font-size: 22rpx;
color: #fa2d12;
}
.activity-label {
font-size: 22rpx;
color: #613804;
}
.original-price {
font-size: 24rpx;
color: #999;
text-decoration: line-through;
}
}
}
.quantity-row {
display: flex;
align-items: center;
font-size: 24rpx;
color: #999;
.quantity-label {
margin-right: 10rpx;
}
.quantity-control {
display: flex;
align-items: center;
}
}
}
}
}
.remark-section {
.remark-row {
display: flex;
justify-content: space-between;
align-items: center;
.remark-label {
font-size: 28rpx;
font-weight: bold;
color: #333;
}
.remark-value {
display: flex;
align-items: center;
gap: 10rpx;
max-width: 500rpx;
.remark-text {
font-size: 24rpx;
color: #333;
text-align: right;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.remark-placeholder {
font-size: 24rpx;
color: #b0b0b0;
}
.arrow-icon {
width: 24rpx;
height: 24rpx;
}
}
}
}
.remark-popup {
background-color: #fff;
border-radius: 20rpx 20rpx 0 0;
.popup-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx;
border-bottom: 1px solid #f0f0f0;
.popup-title {
font-size: 32rpx;
font-weight: 500;
color: #333;
}
}
.remark-content {
min-height: 300rpx;
}
.popup-footer {
padding: 20rpx;
border-top: 1px solid #f0f0f0;
}
}
.bottom-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx;
background-color: #fff;
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
z-index: 999;
.total-info {
flex: 1;
.label {
font-size: 28rpx;
color: #666;
}
.amount {
font-size: 36rpx;
color: #ff4444;
font-weight: bold;
margin-left: 10rpx;
}
}
}
</style>

328
components/order/Coupon.vue Normal file
View File

@@ -0,0 +1,328 @@
<template>
<view>
<view class="price-item" @click="showCouponPopup = true">
<view class="label-row">
<text class="label">{{ $t('order.coupon') }}</text>
</view>
<view class="value-row">
<template v-if="!selectedCoupon">
<view v-if="availableCouponCount > 0" class="coupon-badge">
<text>{{ $t('order.couponCount', { count: availableCouponCount }) }}</text>
</view>
<text v-else-if="couponList.length === 0" class="unavailable-text">
{{ $t('order.noCoupon') }}
</text>
<text v-else class="unavailable-text">
{{ $t('order.unavailable') }}
</text>
</template>
<template v-else>
<text class="discount-value">-￥{{ selectedCoupon.couponEntity.couponAmount }}</text>
<text class="reselect-btn">{{ $t('order.reselect') }}</text>
</template>
<image
v-if="availableCouponCount > 0 || selectedCoupon"
src="/static/icon/icon_right.png"
class="arrow-icon"
/>
</view>
</view>
<!-- 优惠券选择弹窗 -->
<wd-popup
v-model="showCouponPopup"
position="bottom"
:close-on-click-modal="false"
>
<view class="coupon-popup">
<view class="popup-header">
<text class="popup-title">{{ $t('order.selectCoupon') }}</text>
<wd-icon name="close" @click="showCouponPopup = false" />
</view>
<view class="coupon-list">
<view
v-for="(coupon, index) in couponList"
:key="index"
:class="['coupon-item', coupon.canUse === 0 ? 'disabled' : '', selectedCoupon?.couponId === coupon.couponId ? 'selected' : '']"
@click="handleCouponSelect(coupon)"
>
<view class="coupon-type-badge">
{{ getCouponTypeText(coupon.couponEntity.couponRange) }}
</view>
<view class="coupon-amount">
<text class="currency">￥</text>
<text class="amount">{{ coupon.couponEntity.couponAmount }}</text>
</view>
<view class="coupon-info">
<text class="coupon-name">{{ coupon.couponEntity.couponName }}</text>
<text class="coupon-condition">
{{ $t('order.couponUseLevel', { level: coupon.couponEntity.useLevel }) }}
</text>
<text class="coupon-expiry">
{{ $t('order.couponExpiry') }}：
{{ coupon.effectType === 0 ? $t('order.couponForever') : coupon.endTime }}
</text>
<text v-if="coupon.canUse === 0" class="unavailable-reason">
{{ $t('order.couponReason') }}：{{ coupon.canUseReason }}
</text>
</view>
<view class="coupon-select">
<wd-icon
v-if="coupon.canUse === 1"
:name="selectedCoupon?.couponId === coupon.couponId ? 'checkmark-circle-fill' : 'circle'"
:color="selectedCoupon?.couponId === coupon.couponId ? '#fd6004' : '#d9d9d9'"
size="20"
/>
</view>
</view>
<view v-if="couponList.length === 0" class="empty-coupon">
<text>{{ $t('order.noCoupon') }}</text>
</view>
</view>
<view class="popup-footer">
<wd-button
v-if="availableCouponCount > 0"
type="default"
@click="handleCouponConfirm(null)"
>
{{ $t('order.notUseCoupon') }}
</wd-button>
<wd-button
v-if="availableCouponCount > 0"
type="primary"
@click="handleCouponConfirm(selectedCoupon)"
>
{{ $t('order.selected') }}
</wd-button>
<wd-button
v-else
type="default"
@click="showCouponPopup = false"
>
{{ $t('order.confirm') }}
</wd-button>
</view>
</view>
</wd-popup>
</view>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue'
import { orderApi } from '@/api/modules/order'
import { t } from '@/utils/i18n'
import type {
ICoupon
} from '@/types/order'
const emit = defineEmits(['selectCoupon'])
const couponList = ref<ICoupon[]>([])
const selectedCoupon = ref<ICoupon | null>(null)
const showCouponPopup = ref(false)
/**
* 可用优惠券数量
*/
const availableCouponCount = computed(() => {
return couponList.value.filter(c => c.canUse === 1).length
})
/**
* 获取优惠券类型文本
*/
const getCouponTypeText = (type: number) => {
const typeMap: Record<number, string> = {
0: 'couponType0',
1: 'couponType1',
2: 'couponType2'
}
return typeMap[type] || 'couponType0'
}
/**
* 选择优惠券
*/
const handleCouponSelect = (coupon: ICoupon) => {
if (coupon.canUse === 0) {
return
}
if (selectedCoupon.value?.couponId === coupon.couponId) {
selectedCoupon.value = null
} else {
selectedCoupon.value = coupon
}
}
/**
* 确认优惠券选择
*/
const handleCouponConfirm = (coupon: ICoupon | null) => {
selectedCoupon.value = coupon
showCouponPopup.value = false
// 回传优惠券选择
emit('selectCoupon', coupon)
}
</script>
<style lang="scss" scoped>
.coupon-badge {
padding: 4rpx 20rpx;
background-color: #fceeeb;
color: #ec4729;
font-size: 24rpx;
border-radius: 10rpx;
}
.unavailable-text {
font-size: 24rpx;
color: #999;
}
.reselect-btn {
padding: 4rpx 12rpx;
background-color: #fe6035;
color: #fff;
font-size: 24rpx;
border-radius: 30rpx;
}
.arrow-icon {
width: 24rpx;
height: 24rpx;
}
.coupon-popup {
max-height: 80vh;
background-color: #fff;
border-radius: 20rpx 20rpx 0 0;
.popup-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx;
border-bottom: 1px solid #f0f0f0;
.popup-title {
font-size: 32rpx;
font-weight: 500;
color: #333;
}
}
.coupon-list {
max-height: 60vh;
overflow-y: auto;
padding: 20rpx;
.coupon-item {
position: relative;
display: flex;
align-items: center;
padding: 30rpx 20rpx;
margin-bottom: 20rpx;
background: linear-gradient(to top right, #fff, #fef2f4);
border: 1px solid #d9d9d9;
border-radius: 10rpx;
&.selected {
border-color: #fd6004;
}
&.disabled {
background: linear-gradient(to top right, #fafafa, #fafafa);
color: #979797;
.coupon-amount {
color: #979797;
}
}
.coupon-type-badge {
position: absolute;
top: 10rpx;
right: 10rpx;
padding: 6rpx;
background-color: #ffe3e9;
color: #c81346;
font-size: 20rpx;
border-radius: 10rpx;
}
.coupon-amount {
width: 25%;
text-align: center;
color: #ff0043;
.currency {
font-size: 24rpx;
}
.amount {
font-size: 45rpx;
font-weight: bold;
}
}
.coupon-info {
flex: 1;
padding-left: 5%;
display: flex;
flex-direction: column;
gap: 10rpx;
.coupon-name {
font-size: 28rpx;
font-weight: 500;
color: #333;
}
.coupon-condition {
font-size: 24rpx;
color: #666;
}
.coupon-expiry {
font-size: 22rpx;
color: #999;
}
.unavailable-reason {
font-size: 20rpx;
color: #333;
}
}
.coupon-select {
width: 7%;
display: flex;
justify-content: center;
}
}
.empty-coupon {
padding: 60rpx 0;
text-align: center;
color: #999;
font-size: 28rpx;
}
}
.popup-footer {
display: flex;
gap: 20rpx;
padding: 20rpx;
border-top: 1px solid #f0f0f0;
}
}
</style>

125
components/order/PayWay.vue Normal file
View File

@@ -0,0 +1,125 @@
<template>
<view>
<!-- 天医币支付 -->
<view class="payment-item">
<view class="payment-left">
<image src="/static/icon/pay_3.png" class="payment-icon" />
<text class="">{{ $t('order.virtualCoin') }}</text>
<text class="text-[#7dc1f0]">
({{ $t('order.balance') }}：{{ peanutCoin || 0 }})
</text>
</view>
</view>
<!-- 支付说明 -->
<view class="payment-tips">
<view class="tips-header">
<wd-icon name="error-circle" color="#7dc1f0" size="20" />
<text>{{ $t('order.ensureBalance') }}</text>
<text class="recharge-btn" @click="goToRecharge">
{{ $t('order.recharge') }}
</text>
</view>
<view class="tips-content">
<view class="tip-title">{{ $t('order.paymentTipTitle') }}</view>
<view class="tip-item">{{ $t('order.paymentTip1') }}</view>
<view class="tip-item">
{{ $t('order.paymentTip2') }}
<text class="link-text" @click="makePhoneCall('022-24142321')">022-24142321</text>
</view>
<view class="tip-item">
{{ $t('order.paymentTip3') }}
<text class="link-text" @click="copyToClipboard('publisher@tmrjournals.com')">
publisher@tmrjournals.com
</text>
{{ $t('order.paymentTip3_1') }}
<text class="link-text" @click="copyToClipboard('yilujiankangkefu')">
yilujiankangkefu
</text>
{{ $t('order.paymentTip3_2') }}
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import { makePhoneCall, copyToClipboard } from '@/utils/index'
const props = defineProps({
peanutCoin: {
type: Number,
default: 0
}
})
</script>
<style lang="scss" scoped>
.payment-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 0;
.payment-left {
display: flex;
align-items: center;
gap: 10rpx;
font-size: 28rpx;
font-weight: bold;
.payment-icon {
width: 40rpx;
height: 40rpx;
}
}
}
.payment-tips {
margin-top: 20rpx;
padding: 20rpx;
background-color: #f7f8f9;
border-radius: 10rpx;
.tips-header {
display: flex;
align-items: center;
gap: 10rpx;
margin-bottom: 12rpx;
font-size: 28rpx;
color: #333;
.recharge-btn {
margin-left: auto;
padding: 4rpx 14rpx;
background-color: #7dc1f0;
color: #fff;
font-size: 24rpx;
border-radius: 10rpx;
}
}
.tips-content {
font-size: 28rpx;
color: #5a5a5a;
line-height: 1.6;
.tip-title {
font-weight: 500;
margin-bottom: 10rpx;
}
.tip-item {
margin-bottom: 10rpx;
word-wrap: break-word;
word-break: break-all;
}
.link-text {
color: #7dc1f0;
text-decoration: underline;
}
}
}
</style>

0
components/order/Payment.vue
View File

229
components/order/Price.vue
View File

@@ -1,229 +0,0 @@
<template>
<view class="">
<!-- 商品总价 -->
<!-- <view class="price-item">
<text class="label">{{ $t('order.totalPrice') }}</text>
<text class="value">￥{{ totalPrice.toFixed(2) }}</text>
</view> -->
<!-- 优惠券 -->
<!-- <view class="price-item" @click="showCouponPopup = true">
<view class="label-row">
<text class="label">{{ $t('order.coupon') }}</text>
</view>
<view class="value-row">
<template v-if="!selectedCoupon">
<view v-if="availableCouponCount > 0" class="coupon-badge">
<text>{{ $t('order.couponCount', { count: availableCouponCount }) }}</text>
</view>
<text v-else-if="couponList.length === 0" class="unavailable-text">
{{ $t('order.noCoupon') }}
</text>
<text v-else class="unavailable-text">
{{ $t('order.unavailable') }}
</text>
</template>
<template v-else>
<text class="discount-value">-￥{{ selectedCoupon.couponEntity.couponAmount }}</text>
<text class="reselect-btn">{{ $t('order.reselect') }}</text>
</template>
<image
v-if="availableCouponCount > 0 || selectedCoupon"
src="/static/icon/icon_right.png"
class="arrow-icon"
/>
</view>
</view> -->
<!-- 活动立减 -->
<view v-if="hasActivityDiscount" class="price-item">
<text class="label">{{ $t('order.activityDiscount') }}</text>
<text class="discount-value">-￥{{ activityDiscountAmount.toFixed(2) }}</text>
</view>
<!-- VIP专享立减 -->
<view v-if="vipPrice > 0" class="price-item">
<view class="label-row">
<text class="vip-icon">VIP</text>
<text class="label">{{ $t('order.vipDiscount') }}</text>
</view>
<text class="discount-value">-￥{{ vipPrice.toFixed(2) }}</text>
</view>
<!-- 地区优惠 -->
<view v-if="districtAmount > 0" class="price-item">
<text class="label">{{ $t('order.districtDiscount') }}</text>
<text class="discount-value">-￥{{ districtAmount.toFixed(2) }}</text>
</view>
<!-- 积分 -->
<view v-if="initData && initData.user.jf > 0" class="price-item">
<view class="label-row">
<image src="/static/icon/jifen.png" class="icon-img" />
<text class="label">{{ $t('order.points') }}</text>
<text class="points-total">
({{ $t('order.allPoints') }}：{{ initData.user.jf }})
</text>
</view>
<text class="discount-value">-￥{{ jfNumberShow }}</text>
</view>
<!-- 积分输入 -->
<view v-if="initData && initData.user.jf > 0" class="points-input-section">
<text class="points-label">
{{ $t('order.maxPoints', { max: jfNumberMax }) }}
</text>
<view class="points-input-box">
<wd-input
v-model="jfNumber"
type="number"
:placeholder="$t('order.pointsPlaceholder')"
@input="handlePointsInput"
@clear="handlePointsClear"
clearable
/>
</view>
</view>
<wd-cell-group border class="p-0!">
<wd-cell title="商品总价" :value="`${totalPrice.toFixed(2)}天医币`" />
<wd-cell title="优惠券" :value="`-${selectedCoupon?.couponEntity?.couponAmount || 0}天医币`" />
<wd-cell title="活动立减" :value="`-${selectedCoupon?.couponEntity?.couponAmount || 0}天医币`" />
<wd-cell :value="`-${vipPrice.toFixed(2)}天医币`">
<template #title><text class="text-[#f94f04] font-bold">VIP</text>专项立减</template>
</wd-cell>
<wd-cell title="地区优惠" :value="`-${selectedCoupon?.couponEntity?.couponAmount || 0}天医币`" />
</wd-cell-group>
</view>
</template>
<script lang="ts" setup>
const props = defineProps({
value: {
type: Number,
default: 0
},
totalPrice: {
type: Number,
default: 0
},
vipPrice: {
type: Number,
default: 0
}
})
</script>
<style lang="scss" scoped>
:deep(.wd-cell__wrapper) {
padding: 5px 0;
.wd-cell__title {
color: #666;
}
}
.price-section {
.price-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15rpx 0;
font-size: 28rpx;
.label-row {
display: flex;
align-items: center;
gap: 10rpx;
.label {
color: #666;
}
.vip-icon {
padding: 2rpx 8rpx;
background-color: #f94f04;
color: #fff;
font-size: 20rpx;
border-radius: 4rpx;
font-weight: bold;
}
.icon-img {
width: 40rpx;
height: 40rpx;
}
.points-total {
font-size: 24rpx;
color: #aaa;
}
}
.label {
color: #666;
}
.value {
color: #333;
font-weight: 500;
}
.value-row {
display: flex;
align-items: center;
gap: 10rpx;
.coupon-badge {
padding: 4rpx 20rpx;
background-color: #fceeeb;
color: #ec4729;
font-size: 24rpx;
border-radius: 10rpx;
}
.unavailable-text {
font-size: 24rpx;
color: #999;
}
.reselect-btn {
padding: 4rpx 12rpx;
background-color: #fe6035;
color: #fff;
font-size: 24rpx;
border-radius: 30rpx;
}
.arrow-icon {
width: 24rpx;
height: 24rpx;
}
}
.discount-value {
color: #fe6035;
font-weight: 500;
}
}
.points-input-section {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15rpx 0;
margin-top: 10rpx;
background-color: #f5f5f5;
border-radius: 20rpx;
padding: 20rpx;
.points-label {
font-size: 28rpx;
color: #7dc1f0;
font-weight: 600;
}
.points-input-box {
width: 320rpx;
}
}
}
</style>

1
locale/en.json
View File

@@ -463,7 +463,6 @@
"activityLabel": "Activity Price",
"vipPriceLabel": "VIP Price",
"quantity": "Quantity",
"couponAmount": "￥",
"couponUseLevel": "Min. {level} CNY",
"couponExpiry": "Valid until",
"couponForever": "Permanent",

1
locale/zh-Hans.json
View File

@@ -464,7 +464,6 @@
"activityLabel": "活动价",
"vipPriceLabel": "VIP到手价",
"quantity": "数量",
"couponAmount": "￥",
"couponUseLevel": "满{level}元可用",
"couponExpiry": "有效期至",
"couponForever": "永久有效",

2
pages.json
View File

@@ -152,7 +152,7 @@
"navigationBarTitleText": "%courseDetails.chapter%"
}
}, {
"path": "pages/order/confirmOrder",
"path": "pages/order/goodsConfirm",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "%order.confirmTitle%"

2
pages/book/detail.vue
View File

@@ -307,7 +307,7 @@ function closePurchasePopup() {
// 处理购买
function handlePurchase() {
uni.navigateTo({
url: `/pages/book/order?id=${bookId.value}`
url: `/pages/order/goodsConfirm?goods=${bookId.value}`
})
}

12
pages/course/details/course.vue
View File

@@ -454,18 +454,8 @@ const confirmPurchase = () => {
showProtocol.value = false
// 跳转到确认订单页
const orderData = {
goods: [{ ...selectedGoods.value, productAmount: 1 }],
// typeId: 0,
// navTitle: courseDetail.value?.title,
// title: courseDetail.value?.title,
// isFudu: isFudu.value,
// fuduId: isFudu.value ? fuduCatalogueId.value : undefined
}
uni.navigateTo({
// url: `/pages/order/confirmOrder?data=${encodeURIComponent(JSON.stringify(orderData))}`
url: `/pages/order/confirmOrder?goods=${selectedGoods.value.productId}`
url: `/pages/order/goodsConfirm?goods=${selectedGoods.value.productId}`
})
}

672
pages/course/order.vue
View File

@@ -1,672 +0,0 @@
<template>
<view class="course-order-page">
<!-- 自定义导航栏 -->
<nav-bar :title="$t('courseOrder.orderTitle')" />
<!-- 页面内容 -->
<view class="page-content">
<!-- 商品列表 -->
<view class="goods-section">
<view class="section-title">商品信息</view>
<view
v-for="(item, index) in goodsList"
:key="index"
class="goods-item"
>
<view class="goods-image">
<!-- VIP优惠标签 -->
<view
v-if="item.isVipPrice === 1 && item.vipPrice"
class="vip-badge"
>
VIP优惠
</view>
<image
:src="item.productImages || '/static/nobg.jpg'"
mode="aspectFit"
/>
</view>
<view class="goods-info">
<text class="goods-name">{{ item.productName }}</text>
<!-- 价格信息 -->
<view class="price-info">
<!-- VIP优惠价 -->
<view v-if="item.isVipPrice === 1 && item.vipPrice" class="price-row">
<text class="vip-price">￥{{ item.vipPrice.toFixed(2) }}</text>
<text class="vip-label">VIP到手价</text>
<text class="original-price">￥{{ item.price.toFixed(2) }}</text>
</view>
<!-- 活动价 -->
<view v-else-if="item.activityPrice && item.activityPrice > 0" class="price-row">
<text class="activity-price">￥{{ item.activityPrice.toFixed(2) }}</text>
<text class="activity-label">活动价</text>
<text class="original-price">￥{{ item.price.toFixed(2) }}</text>
</view>
<!-- 普通价格 -->
<view v-else class="price-row">
<text class="normal-price">￥{{ item.price.toFixed(2) }}</text>
</view>
</view>
<!-- 数量 -->
<view class="quantity">
<text>数量：{{ item.productAmount || 1 }}</text>
</view>
</view>
</view>
</view>
<!-- 收货地址（仅实体商品显示） -->
<view v-if="!isHideAddress" class="address-section">
<view class="section-title">收货地址</view>
<view v-if="selectedAddress" class="address-info" @click="selectAddress">
<view class="address-row">
<text class="name">{{ selectedAddress.name }}</text>
<text class="phone">{{ selectedAddress.phone }}</text>
</view>
<view class="address-detail">
{{ selectedAddress.province }} {{ selectedAddress.city }} {{ selectedAddress.district }} {{ selectedAddress.detail }}
</view>
</view>
<view v-else class="no-address" @click="selectAddress">
<wd-icon name="add-circle" size="24px" />
<text>添加收货地址</text>
</view>
</view>
<!-- 订单信息 -->
<view class="order-info-section">
<view class="info-row">
<text class="label">商品金额</text>
<text class="value">￥{{ goodsAmount.toFixed(2) }}</text>
</view>
<view v-if="!isHideAddress" class="info-row">
<text class="label">运费</text>
<text class="value">￥{{ freight.toFixed(2) }}</text>
</view>
<view v-if="availablePoints > 0" class="info-row">
<text class="label">可用积分</text>
<text class="value">{{ availablePoints }} 分（可抵扣 ￥{{ pointsDiscount.toFixed(2) }}）</text>
</view>
</view>
<!-- 订单总价 -->
<view class="total-section">
<view class="total-row">
<text class="label">订单总价</text>
<text class="value">￥{{ totalAmount.toFixed(2) }}</text>
</view>
</view>
</view>
<!-- 底部操作栏 -->
<view class="bottom-bar">
<view class="total-info">
<text class="label">合计：</text>
<text class="amount">￥{{ totalAmount.toFixed(2) }}</text>
</view>
<wd-button
type="primary"
:loading="submitting"
@click="submitOrder"
>
提交订单
</wd-button>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useUserStore } from '@/stores/user'
import NavBar from '@/components/nav-bar/nav-bar.vue'
import type { IOrderGoods, IOrderInitData } from '@/types/course'
interface OrderData {
goods: IOrderGoods[]
typeId?: number
navTitle?: string
title?: string
isFudu?: boolean
fuduId?: number
isVip?: boolean
}
// Stores
const userStore = useUserStore()
// 页面数据
const orderData = ref<OrderData>({
goods: []
})
const goodsList = ref<IOrderGoods[]>([])
const initData = ref<IOrderInitData | null>(null)
const selectedAddress = ref<any>(null)
const isHideAddress = ref(false)
const availablePoints = ref(0)
const freight = ref(0)
const submitting = ref(false)
/**
* 商品金额
*/
const goodsAmount = computed(() => {
return goodsList.value.reduce((sum, item) => {
const price = item.isVipPrice === 1 && item.vipPrice
? item.vipPrice
: item.activityPrice || item.price
return sum + price * (item.productAmount || 1)
}, 0)
})
/**
* 积分抵扣金额
*/
const pointsDiscount = computed(() => {
// 假设100积分可抵扣1元
return Math.min(availablePoints.value / 100, goodsAmount.value * 0.1)
})
/**
* 订单总价
*/
const totalAmount = computed(() => {
return Math.max(0, goodsAmount.value + freight.value - pointsDiscount.value)
})
/**
* 页面加载
*/
onLoad(async (options: any) => {
if (options.data) {
try {
orderData.value = JSON.parse(decodeURIComponent(options.data))
goodsList.value = orderData.value.goods || []
await initOrder()
} catch (error) {
console.error('解析订单数据失败:', error)
uni.showToast({
title: '订单数据错误',
icon: 'none'
})
}
}
})
/**
* 初始化订单
*/
const initOrder = async () => {
try {
uni.showLoading({ title: '加载中...' })
// 根据订单类型调用不同的初始化接口
if (orderData.value.isVip) {
// VIP订单
await initVipOrder()
} else if (orderData.value.isFudu) {
// 复读订单
await initFuduOrder()
} else {
// 普通订单
await initNormalOrder()
}
} catch (error) {
console.error('初始化订单失败:', error)
} finally {
uni.hideLoading()
}
}
/**
* 初始化普通订单
*/
const initNormalOrder = async () => {
try {
const res = await uni.request({
url: uni.getStorageSync('baseURL') + 'common/buyOrder/initPrepareOrder',
method: 'POST',
header: {
'Content-Type': 'application/json',
'token': userStore.token
},
data: {
uid: userStore.userInfo.id,
productList: goodsList.value.map(item => ({
productId: item.productId,
quantity: item.productAmount || 1
}))
}
})
const data = res.data as any
if (data.code === 0 && data.data) {
initData.value = data.data
isHideAddress.value = data.data.is_course || false
availablePoints.value = data.data.user?.jf || 0
// 如果有默认地址，设置为选中地址
if (data.data.addressList && data.data.addressList.length > 0) {
selectedAddress.value = data.data.addressList.find((addr: any) => addr.isDefault === 1)
|| data.data.addressList[0]
}
}
} catch (error) {
console.error('初始化普通订单失败:', error)
}
}
/**
* 初始化复读订单
*/
const initFuduOrder = async () => {
// 复读订单不需要地址
isHideAddress.value = true
// 获取用户信息
try {
const res = await uni.request({
url: uni.getStorageSync('baseURL') + 'common/user/getUserInfo',
method: 'POST',
header: {
'Content-Type': 'application/json',
'token': userStore.token
},
data: {}
})
const data = res.data as any
if (data.code === 0 && data.result) {
initData.value = {
user: data.result,
is_course: true
}
availablePoints.value = data.result.jf || 0
}
} catch (error) {
console.error('获取用户信息失败:', error)
}
}
/**
* 初始化VIP订单
*/
const initVipOrder = async () => {
// VIP订单不需要地址
isHideAddress.value = true
// 获取用户信息
try {
const res = await uni.request({
url: uni.getStorageSync('baseURL') + 'common/user/getUserInfo',
method: 'POST',
header: {
'Content-Type': 'application/json',
'token': userStore.token
},
data: {}
})
const data = res.data as any
if (data.code === 0 && data.result) {
initData.value = {
user: data.result,
is_course: true
}
// VIP订单不使用积分
availablePoints.value = 0
}
} catch (error) {
console.error('获取用户信息失败:', error)
}
}
/**
* 选择地址
*/
const selectAddress = () => {
// 跳转到地址选择页面
uni.navigateTo({
url: '/pages/user/address/list'
})
}
/**
* 提交订单
*/
const submitOrder = async () => {
// 验证
if (!isHideAddress.value && !selectedAddress.value) {
uni.showToast({
title: '请选择收货地址',
icon: 'none'
})
return
}
try {
submitting.value = true
let orderUrl = ''
let orderParams: any = {}
if (orderData.value.isVip) {
// VIP订单
orderUrl = 'common/userVip/placeVipOrder'
orderParams = {
vipConfigId: goodsList.value[0].productId,
payType: 1 // 默认支付方式
}
} else if (orderData.value.isFudu) {
// 复读订单
orderUrl = 'common/courseRelearn/relearnSave'
orderParams = {
catalogueId: orderData.value.fuduId,
productId: goodsList.value[0].productId,
quantity: 1
}
} else {
// 普通订单
orderUrl = 'book/buyOrder/placeOrder'
orderParams = {
uid: userStore.userInfo.id,
addressId: selectedAddress.value?.id,
productList: goodsList.value.map(item => ({
productId: item.productId,
quantity: item.productAmount || 1
})),
usePoints: pointsDiscount.value > 0
}
}
const res = await uni.request({
url: uni.getStorageSync('baseURL') + orderUrl,
method: 'POST',
header: {
'Content-Type': 'application/json',
'token': userStore.token
},
data: orderParams
})
const data = res.data as any
if (data.code === 0) {
uni.showToast({
title: '订单创建成功',
icon: 'success'
})
// 跳转到支付页面或订单详情
setTimeout(() => {
uni.redirectTo({
url: `/pages/user/order/index`
})
}, 1500)
} else {
uni.showToast({
title: data.errMsg || '订单创建失败',
icon: 'none'
})
}
} catch (error) {
console.error('提交订单失败:', error)
uni.showToast({
title: '提交失败',
icon: 'none'
})
} finally {
submitting.value = false
}
}
</script>
<style lang="scss" scoped>
.course-order-page {
min-height: 100vh;
background-color: #f5f5f5;
padding-bottom: 120rpx;
}
.page-content {
padding: 20rpx;
}
.section-title {
font-size: 30rpx;
font-weight: 500;
color: #333;
margin-bottom: 20rpx;
}
.goods-section {
background-color: #fff;
padding: 20rpx;
border-radius: 12rpx;
margin-bottom: 20rpx;
.goods-item {
display: flex;
padding: 20rpx 0;
border-bottom: 1px solid #f0f0f0;
&:last-child {
border-bottom: none;
}
.goods-image {
position: relative;
width: 140rpx;
height: 140rpx;
flex-shrink: 0;
margin-right: 20rpx;
background-color: #f5f5f5;
border-radius: 8rpx;
overflow: hidden;
.vip-badge {
position: absolute;
top: 0;
left: 0;
padding: 4rpx 10rpx;
background-color: #f94f04;
color: #fff;
font-size: 20rpx;
border-radius: 8rpx 0 8rpx 0;
z-index: 1;
}
image {
width: 100%;
height: 100%;
}
}
.goods-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
.goods-name {
font-size: 28rpx;
color: #333;
line-height: 1.4;
margin-bottom: 10rpx;
}
.price-info {
.price-row {
display: flex;
align-items: baseline;
gap: 10rpx;
.vip-price,
.activity-price {
font-size: 32rpx;
font-weight: bold;
color: #e97512;
}
.normal-price {
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.vip-label {
font-size: 22rpx;
color: #fa2d12;
}
.activity-label {
font-size: 22rpx;
color: #613804;
}
.original-price {
font-size: 24rpx;
color: #999;
text-decoration: line-through;
}
}
}
.quantity {
font-size: 24rpx;
color: #999;
}
}
}
}
.address-section {
background-color: #fff;
padding: 20rpx;
border-radius: 12rpx;
margin-bottom: 20rpx;
.address-info {
padding: 20rpx;
background-color: #f7f8f9;
border-radius: 8rpx;
.address-row {
display: flex;
justify-content: space-between;
margin-bottom: 10rpx;
.name {
font-size: 28rpx;
font-weight: 500;
color: #333;
}
.phone {
font-size: 28rpx;
color: #666;
}
}
.address-detail {
font-size: 26rpx;
color: #666;
line-height: 1.5;
}
}
.no-address {
display: flex;
align-items: center;
justify-content: center;
gap: 10rpx;
padding: 40rpx 20rpx;
background-color: #f7f8f9;
border-radius: 8rpx;
color: #999;
font-size: 28rpx;
}
}
.order-info-section {
background-color: #fff;
padding: 20rpx;
border-radius: 12rpx;
margin-bottom: 20rpx;
.info-row {
display: flex;
justify-content: space-between;
padding: 15rpx 0;
font-size: 28rpx;
.label {
color: #666;
}
.value {
color: #333;
font-weight: 500;
}
}
}
.total-section {
background-color: #fff;
padding: 20rpx;
border-radius: 12rpx;
.total-row {
display: flex;
justify-content: space-between;
align-items: center;
.label {
font-size: 30rpx;
color: #333;
font-weight: 500;
}
.value {
font-size: 36rpx;
color: #ff4444;
font-weight: bold;
}
}
}
.bottom-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx;
background-color: #fff;
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
z-index: 999;
.total-info {
flex: 1;
.label {
font-size: 28rpx;
color: #666;
}
.amount {
font-size: 36rpx;
color: #ff4444;
font-weight: bold;
margin-left: 10rpx;
}
}
}
</style>

1419
pages/order/confirmOrder.vue
View File

File diff suppressed because it is too large Load Diff

239
pages/order/goodsConfirm.vue Normal file
View File

@@ -0,0 +1,239 @@
<template>
<view>
<!-- 自定义导航栏 -->
<nav-bar :title="$t('order.confirmTitle')" />
<!-- 确认订单组件 -->
<Confirm :goodsList="goodsList" :userInfo="userInfo">
<template #goodsList>
<!-- 商品列表内容 -->
<view
v-for="(item, index) in goodsList"
:key="index"
class="goods-item"
>
<!-- VIP优惠标签 -->
<wd-tag v-if="item.isVipPrice === 1 && item.vipPrice" type="danger" mark custom-class="vip-badge">{{ $t('order.vipLabel') }}</wd-tag>
<!-- 商品图片 -->
<view class="goods-image">
<image
:src="item.productImages || '/static/nobg.jpg'"
mode="aspectFit"
/>
</view>
<!-- 商品信息 -->
<view class="goods-info">
<text class="goods-name">{{ item.productName }}</text>
<!-- 价格信息 -->
<view class="price-info">
<!-- VIP优惠价 -->
<!-- <view v-if="item.isVipPrice === 1 && item.vipPrice" class="price-row">
<text class="vip-price">￥{{ item.vipPrice.toFixed(2) }}</text>
<text class="vip-label">{{ $t('order.vipPriceLabel') }}</text>
<text class="original-price">￥{{ item.price.toFixed(2) }}</text>
</view> -->
<!-- 活动价 -->
<!-- <view v-else-if="item.activityPrice && item.activityPrice > 0" class="price-row">
<text class="activity-price">￥{{ item.activityPrice.toFixed(2) }}</text>
<text class="activity-label">{{ $t('order.activityLabel') }}</text>
<text class="original-price">￥{{ item.price.toFixed(2) }}</text>
</view> -->
<!-- 普通价格 -->
<view class="price-row">
<text class="normal-price">{{ item.price.toFixed(2) }} 天医币</text>
</view>
</view>
<!-- 数量 -->
<!-- <view class="quantity-row">
<text class="quantity-label">{{ $t('order.quantity') }}：</text>
<view v-if="showNumber" class="quantity-control">
<wd-number-box
v-model="item.productAmount"
:min="1"
@change="handleQuantityChange(item, $event)"
/>
</view>
<text v-else>X {{ item.productAmount }}</text>
</view> -->
</view>
</view>
</template>
</Confirm>
</view>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { orderApi } from '@/api/modules/order'
import Confirm from '@/components/order/Confirm.vue';
import type { IOrderGoods } from '@/types/order'
/**
* 获取用户信息
*/
const userInfo = ref(null)
const getUserInfo = async () => {
try {
const res = await orderApi.getUserInfo()
if (res.code === 0) {
userInfo.value = res.result || {}
}
} catch (error) {
console.error('获取用户信息失败:', error)
}
}
/**
* 获取商品列表
*/
const goodsIds = ref<string>('')
const goodsList = ref<IOrderGoods[]>([])
const getGoodsList = async () => {
try {
// 获取商品详情
const res = await orderApi.getShopProductListByIds(goodsIds.value)
if (res.code === 0 && res.shopProductList?.length > 0) {
goodsList.value = res.shopProductList
}
} catch (error) {
console.error('获取商品列表失败:', error)
}
}
/**
* 页面加载
*/
onLoad(async (options: any) => {
if (options.goods) {
try {
// 获取用户信息
await getUserInfo()
// 根据商品ID获取商品详细信息
goodsIds.value = options.goods || ''
getGoodsList()
} catch (error) {
console.error('解析商品数据失败:', error)
uni.showToast({
title: '商品数据错误',
icon: 'none'
})
}
}
})
</script>
<style lang="scss" scoped>
.goods-item {
position: relative;
display: flex;
padding-bottom: 20rpx;
border-bottom: 1px solid #f0f0f0;
&:last-child {
border-bottom: none;
padding-bottom: 0;
}
.vip-badge {
position: absolute;
top: 20rpx;
left: 0;
z-index: 1;
}
.goods-image {
width: 140rpx;
height: 140rpx;
flex-shrink: 0;
margin-right: 20rpx;
background-color: #f5f5f5;
border-radius: 8rpx;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
.goods-info {
flex: 1;
display: flex;
flex-direction: column;
.goods-name {
font-size: 28rpx;
color: #333;
line-height: 1.4;
margin-bottom: 10rpx;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.price-info {
.price-row {
display: flex;
align-items: baseline;
gap: 10rpx;
.vip-price,
.activity-price {
font-size: 32rpx;
font-weight: bold;
color: #e97512;
}
.normal-price {
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.vip-label {
font-size: 22rpx;
color: #fa2d12;
}
.activity-label {
font-size: 22rpx;
color: #613804;
}
.original-price {
font-size: 24rpx;
color: #999;
text-decoration: line-through;
}
}
}
.quantity-row {
display: flex;
align-items: center;
font-size: 24rpx;
color: #999;
.quantity-label {
margin-right: 10rpx;
}
.quantity-control {
display: flex;
align-items: center;
}
}
}
}
</style>

26
types/order.d.ts vendored
View File

@@ -90,30 +90,6 @@ export interface ICourseOrderCreateParams {
come: number // 2
}
/**
* 订单初始化数据
*/
export interface IOrderInitData {
user: {
id: number
jf: number // 积分
peanutCoin: number // 天医币余额
vip?: number // VIP状态
}
is_course: boolean
}
/**
* 订单路由参数
*/
export interface IOrderRouteParams {
goods: IOrderGoods[]
typeId: number
sourceType?: string
navTitle?: string
title?: string
}
/**
* 价格明细项
*/
@@ -128,9 +104,7 @@ export interface IPriceBreakdownItem {
* 订单状态
*/
export interface IOrderState {
orderData: IOrderRouteParams
goodsList: IOrderGoods[]
initData: IOrderInitData | null
totalPrice: number
vipPrice: number
districtAmount: number