Compare commits
2 Commits
b357225703
...
7dea269e6a
| Author | SHA1 | Date | |
|---|---|---|---|
| 7dea269e6a | |||
| bfe0c09242 |
@@ -4,7 +4,11 @@ import type { IApiResponse } from '@/api/types'
|
||||
import type {
|
||||
ICreateOrderParams,
|
||||
IGooglePayVerifyParams,
|
||||
ICreateOrderResponse
|
||||
ICreateOrderResponse,
|
||||
IOrderGoods,
|
||||
ICoupon,
|
||||
ICourseOrderCreateParams,
|
||||
IOrderInitData
|
||||
} from '@/types/order'
|
||||
import type { IUserInfo } from '@/types/user'
|
||||
|
||||
@@ -59,5 +63,96 @@ export const orderApi = {
|
||||
method: 'POST'
|
||||
})
|
||||
return res
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化订单准备数据
|
||||
* @param params 初始化参数
|
||||
*/
|
||||
async initPrepareOrder(params: { uid: number; productList: Array<{ productId: number; quantity: number }> }) {
|
||||
const res = await mainClient.request<IApiResponse<IOrderInitData>>({
|
||||
url: 'common/buyOrder/initPrepareOrder',
|
||||
method: 'POST',
|
||||
data: params
|
||||
})
|
||||
return res
|
||||
},
|
||||
|
||||
/**
|
||||
* 根据商品ID获取商品详情列表
|
||||
* @param productIds 商品ID字符串(逗号分隔)
|
||||
*/
|
||||
async getShopProductListByIds(productIds: string) {
|
||||
const res = await mainClient.request<IApiResponse<{ shopProductList: IOrderGoods[] }>>({
|
||||
url: 'book/buyOrder/getShopProductListByIds',
|
||||
method: 'POST',
|
||||
data: { productIds }
|
||||
})
|
||||
return res
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取VIP优惠金额
|
||||
* @param productList 商品列表
|
||||
*/
|
||||
async getVipDiscountAmount(productList: Array<{ productId: number; quantity: number }>) {
|
||||
const res = await mainClient.request<IApiResponse<{ discountAmount: number }>>({
|
||||
url: 'book/buyOrder/getVipDiscountAmount',
|
||||
method: 'POST',
|
||||
data: { productList }
|
||||
})
|
||||
return res
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取地区优惠金额
|
||||
* @param productList 商品列表
|
||||
*/
|
||||
async getDistrictAmount(productList: Array<{ productId: number; quantity: number }>) {
|
||||
const res = await mainClient.request<IApiResponse<{ districtAmount: number }>>({
|
||||
url: 'book/buyOrder/getDistrictAmount',
|
||||
method: 'POST',
|
||||
data: { productList }
|
||||
})
|
||||
return res
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取可用优惠券列表
|
||||
* @param shopProductInfos 商品信息字符串(格式:productId:price:quantity,productId:price:quantity)
|
||||
*/
|
||||
async getCouponListPayment(shopProductInfos: string) {
|
||||
const res = await mainClient.request<IApiResponse<{ couponHistoryList: ICoupon[] }>>({
|
||||
url: 'common/coupon/getCouponListPayment',
|
||||
method: 'POST',
|
||||
data: { shopProductInfos }
|
||||
})
|
||||
return res
|
||||
},
|
||||
|
||||
/**
|
||||
* 更新购物车商品
|
||||
* @param data 商品数据
|
||||
*/
|
||||
async updateCart(data: { productId: number; productAmount: number; price: number }) {
|
||||
const res = await mainClient.request<IApiResponse>({
|
||||
url: 'book/ordercart/update',
|
||||
method: 'POST',
|
||||
data
|
||||
})
|
||||
return res
|
||||
},
|
||||
|
||||
/**
|
||||
* 创建课程订单
|
||||
* @param data 订单数据
|
||||
*/
|
||||
async placeCourseOrder(data: ICourseOrderCreateParams) {
|
||||
const res = await mainClient.request<IApiResponse<{ orderSn: string; money: number }>>({
|
||||
url: 'book/buyOrder/placeOrder',
|
||||
method: 'POST',
|
||||
data
|
||||
})
|
||||
return res
|
||||
}
|
||||
}
|
||||
|
||||
@@ -39,11 +39,11 @@ export async function getVipInfo() {
|
||||
* @param current 当前页码
|
||||
* @param limit 每页数量
|
||||
*/
|
||||
export async function getOrderList(current: number, limit: number, orderStatus: string) {
|
||||
export async function getOrderList(page: number, limit: number, orderStatus: string) {
|
||||
const res = await mainClient.request<IApiResponse<{ orders: IPageData<IOrder> }>>({
|
||||
url: 'common/buyOrder/commonBuyOrderList',
|
||||
method: 'POST',
|
||||
data: { current, limit, orderStatus, come: '10', userId: uni.getStorageSync('userInfo').id }
|
||||
data: { page, limit, orderStatus, come: '10', userId: uni.getStorageSync('userInfo').id }
|
||||
})
|
||||
return res
|
||||
}
|
||||
|
||||
795
components/order/Confirm.vue
Normal file
795
components/order/Confirm.vue
Normal 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
328
components/order/Coupon.vue
Normal 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>
|
||||
@@ -31,7 +31,7 @@
|
||||
<!-- VIP优惠价 -->
|
||||
<view v-if="item.isVipPrice === 1 && item.vipPrice" class="price-info">
|
||||
<text class="vip-price">{{ parseFloat(item.vipPrice).toFixed(2) }} 天医币</text>
|
||||
<text class="vip-label">VIP到手价</text>
|
||||
<text class="vip-label">VIP优惠价</text>
|
||||
<text class="original-price">{{ parseFloat(item.price).toFixed(2) }} 天医币</text>
|
||||
</view>
|
||||
|
||||
|
||||
125
components/order/PayWay.vue
Normal file
125
components/order/PayWay.vue
Normal 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>
|
||||
@@ -412,6 +412,65 @@
|
||||
},
|
||||
"order": {
|
||||
"selectFuduScheme": "Select Fudu Scheme",
|
||||
"selectPurchaseScheme": "Select Purchase Scheme"
|
||||
"selectPurchaseScheme": "Select Purchase Scheme",
|
||||
"confirmTitle": "Confirm Order",
|
||||
"goodsInfo": "Product Information",
|
||||
"priceDetail": "Price Details",
|
||||
"totalPrice": "Subtotal",
|
||||
"coupon": "Coupon",
|
||||
"points": "Points",
|
||||
"vipDiscount": "VIP Exclusive Discount",
|
||||
"activityDiscount": "Activity Discount",
|
||||
"districtDiscount": "Regional Discount",
|
||||
"actualPayment": "Total",
|
||||
"paymentMethod": "Payment Method",
|
||||
"virtualCoin": "Virtual Coin",
|
||||
"balance": "Balance",
|
||||
"recharge": "Recharge Now",
|
||||
"remark": "Order Remark",
|
||||
"remarkPlaceholder": "Optional: Leave a message",
|
||||
"remarkTitle": "Order Remark",
|
||||
"submit": "Pay Now",
|
||||
"submitting": "Submitting...",
|
||||
"total": "Total",
|
||||
"noCoupon": "No coupons available",
|
||||
"unavailable": "Unavailable",
|
||||
"selectCoupon": "Please select a coupon",
|
||||
"notUseCoupon": "Don't use coupon",
|
||||
"reselect": "Reselect",
|
||||
"selected": "Confirm",
|
||||
"maxPoints": "Available Points ({max} pts)",
|
||||
"pointsPlaceholder": "Enter points",
|
||||
"allPoints": "Total Points",
|
||||
"insufficientBalance": "Insufficient virtual coin balance",
|
||||
"orderCreating": "Creating order",
|
||||
"orderSuccess": "Purchase successful",
|
||||
"orderFailed": "Failed, please try again",
|
||||
"tooFrequent": "Too frequent, please wait",
|
||||
"duplicateOrder": "You have a similar order recently. Continue?",
|
||||
"duplicateConfirm": "Continue",
|
||||
"duplicateCancel": "Cancel",
|
||||
"customerService": "Customer Service",
|
||||
"paymentTip": "1 Virtual Coin = 1 CNY",
|
||||
"paymentTipTitle": "Notes",
|
||||
"paymentTip1": "1. 1 Virtual Coin = 1 CNY",
|
||||
"paymentTip2": "2. For questions, please call customer service",
|
||||
"paymentTip3": "3. Non-mainland China users can pay by credit card. Simple and fast, recommended! Credit cards with Visa or MasterCard logos are accepted. Please send payment request to email",
|
||||
"paymentTip3_1": "(click to copy) with course name, amount, registered name and phone number, or add WeChat customer service (",
|
||||
"paymentTip3_2": ") (click to copy). We will send payment link within 24 hours.",
|
||||
"ensureBalance": "Ensure sufficient virtual coin balance",
|
||||
"vipLabel": "VIP Discount",
|
||||
"activityLabel": "Activity Price",
|
||||
"vipPriceLabel": "VIP Price",
|
||||
"quantity": "Quantity",
|
||||
"couponUseLevel": "Min. {level} CNY",
|
||||
"couponExpiry": "Valid until",
|
||||
"couponForever": "Permanent",
|
||||
"couponReason": "Reason",
|
||||
"couponUsage": "Usage",
|
||||
"couponType0": "All Products",
|
||||
"couponType1": "Specific Courses",
|
||||
"couponType2": "Course Categories",
|
||||
"couponCount": "{count} coupons"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -413,6 +413,65 @@
|
||||
},
|
||||
"order": {
|
||||
"selectFuduScheme": "选择复读方案",
|
||||
"selectPurchaseScheme": "选择购买方案"
|
||||
"selectPurchaseScheme": "选择购买方案",
|
||||
"confirmTitle": "确认订单",
|
||||
"goodsInfo": "商品信息",
|
||||
"priceDetail": "价格明细",
|
||||
"totalPrice": "商品总价",
|
||||
"coupon": "优惠券",
|
||||
"points": "积分",
|
||||
"vipDiscount": "VIP专享立减",
|
||||
"activityDiscount": "活动立减",
|
||||
"districtDiscount": "地区优惠",
|
||||
"actualPayment": "实付款",
|
||||
"paymentMethod": "支付方式",
|
||||
"virtualCoin": "天医币",
|
||||
"balance": "余额",
|
||||
"recharge": "立即充值",
|
||||
"remark": "订单备注",
|
||||
"remarkPlaceholder": "选填:给商家留言",
|
||||
"remarkTitle": "订单备注",
|
||||
"submit": "立即支付",
|
||||
"submitting": "提交中...",
|
||||
"total": "合计",
|
||||
"noCoupon": "暂无可用优惠券",
|
||||
"unavailable": "不可用",
|
||||
"selectCoupon": "请选择优惠券",
|
||||
"notUseCoupon": "不使用优惠券",
|
||||
"reselect": "重新选择",
|
||||
"selected": "选好了",
|
||||
"maxPoints": "可用积分({max}分)",
|
||||
"pointsPlaceholder": "请输入积分",
|
||||
"allPoints": "全部积分",
|
||||
"insufficientBalance": "天医币余额不足",
|
||||
"orderCreating": "正在请求订单",
|
||||
"orderSuccess": "购买成功",
|
||||
"orderFailed": "失败,请重新下单",
|
||||
"tooFrequent": "操作太频繁了,休息下吧",
|
||||
"duplicateOrder": "您短时间内有一笔相同金额的订单,是否确定继续下单?",
|
||||
"duplicateConfirm": "继续操作",
|
||||
"duplicateCancel": "点错了",
|
||||
"customerService": "客服",
|
||||
"paymentTip": "1天医币 = 1元人民币",
|
||||
"paymentTipTitle": "说明",
|
||||
"paymentTip1": "1. 1天医币 = 1元人民币",
|
||||
"paymentTip2": "2.若有疑问或意见请致电客服",
|
||||
"paymentTip3": "3.非中国大陆用户可以信用卡支付。简单快捷,推荐使用!支付时使用的信用卡需要带有Visa或MasterCard的标识。请向邮箱",
|
||||
"paymentTip3_1": "(点击复制)发送支付请求,内容需包含:拟购买的课程名称、支付金额、APP注册姓名及手机号码,或者加一路健康客服微信(",
|
||||
"paymentTip3_2": ")(点击复制)联系我们,我们将在24小时内向您的邮箱或者微信发送支付链接,根据提示即可完成信用卡支付,无需兑换外币。",
|
||||
"ensureBalance": "确保您的天医币足够支付",
|
||||
"vipLabel": "VIP优惠",
|
||||
"activityLabel": "活动价",
|
||||
"vipPriceLabel": "VIP到手价",
|
||||
"quantity": "数量",
|
||||
"couponUseLevel": "满{level}元可用",
|
||||
"couponExpiry": "有效期至",
|
||||
"couponForever": "永久有效",
|
||||
"couponReason": "不可用原因",
|
||||
"couponUsage": "使用说明",
|
||||
"couponType0": "全场通用",
|
||||
"couponType1": "指定课程可用",
|
||||
"couponType2": "指定课程品类可用",
|
||||
"couponCount": "共 {count} 张"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -152,10 +152,10 @@
|
||||
"navigationBarTitleText": "%courseDetails.chapter%"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/course/order",
|
||||
"path": "pages/order/goodsConfirm",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "%courseOrder.orderTitle%"
|
||||
"navigationBarTitleText": "%order.confirmTitle%"
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
@@ -307,7 +307,7 @@ function closePurchasePopup() {
|
||||
// 处理购买
|
||||
function handlePurchase() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/book/order?id=${bookId.value}`
|
||||
url: `/pages/order/goodsConfirm?goods=${bookId.value}`
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -449,24 +449,13 @@ const closeGoodsSelector = () => {
|
||||
*/
|
||||
const confirmPurchase = () => {
|
||||
showProtocol.value = false
|
||||
uni.showToast({ icon: 'none', title: '订单及支付功能开发中' })
|
||||
return false
|
||||
if (!selectedGoods.value) return
|
||||
|
||||
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/course/order?data=${encodeURIComponent(JSON.stringify(orderData))}`
|
||||
url: `/pages/order/goodsConfirm?goods=${selectedGoods.value.productId}`
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
239
pages/order/goodsConfirm.vue
Normal file
239
pages/order/goodsConfirm.vue
Normal 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>
|
||||
BIN
static/icon/jifen.png
Normal file
BIN
static/icon/jifen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
BIN
static/icon/pay_3.png
Normal file
BIN
static/icon/pay_3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
@@ -10,6 +10,7 @@
|
||||
--color-red-500: oklch(63.7% 0.237 25.331);
|
||||
--color-white: #fff;
|
||||
--spacing: 0.25rem;
|
||||
--font-weight-bold: 700;
|
||||
--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);
|
||||
@@ -293,15 +294,40 @@
|
||||
.bg-red-500 {
|
||||
background-color: var(--color-red-500);
|
||||
}
|
||||
.p-0 {
|
||||
padding: calc(var(--spacing) * 0);
|
||||
}
|
||||
.p-0\! {
|
||||
padding: calc(var(--spacing) * 0) !important;
|
||||
}
|
||||
.pt-\[40px\] {
|
||||
padding-top: 40px;
|
||||
}
|
||||
.pb-0 {
|
||||
padding-bottom: calc(var(--spacing) * 0);
|
||||
}
|
||||
.pb-0\! {
|
||||
padding-bottom: calc(var(--spacing) * 0) !important;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
.font-bold {
|
||||
--tw-font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
.text-\[\#000\] {
|
||||
color: #000;
|
||||
}
|
||||
.text-\[\#7dc1f0\] {
|
||||
color: #7dc1f0;
|
||||
}
|
||||
.text-\[\#f94f04\] {
|
||||
color: #f94f04;
|
||||
}
|
||||
.text-\[\#fff\] {
|
||||
color: #fff;
|
||||
}
|
||||
@@ -393,6 +419,10 @@
|
||||
inherits: false;
|
||||
initial-value: solid;
|
||||
}
|
||||
@property --tw-font-weight {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-ordinal {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
@@ -585,6 +615,7 @@
|
||||
--tw-skew-x: initial;
|
||||
--tw-skew-y: initial;
|
||||
--tw-border-style: solid;
|
||||
--tw-font-weight: initial;
|
||||
--tw-ordinal: initial;
|
||||
--tw-slashed-zero: initial;
|
||||
--tw-numeric-figure: initial;
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
:root,
|
||||
page {
|
||||
/* 文字字号 */
|
||||
--wot-fs-title: 18px; // 标题字号/重要正文字号
|
||||
--wot-fs-content: 16px; // 普通正文
|
||||
--wot-fs-secondary: 14px; // 次要信息,注释/补充/正文
|
||||
--wot-fs-tertiary: 12px; // 次次要信息,注释/补充/正文
|
||||
--wot-fs-title: 36rpx; // 标题字号/重要正文字号
|
||||
--wot-fs-content: 28rpx; // 普通正文
|
||||
--wot-fs-secondary: 24rpx; // 次要信息,注释/补充/正文
|
||||
--wot-fs-tertiary: 20rpx; // 次次要信息,注释/补充/正文
|
||||
|
||||
// 导航栏
|
||||
--wot-navbar-background: #fff;
|
||||
@@ -16,7 +16,7 @@ page {
|
||||
// --wot-tabbar-item-title-font-size: 16px;
|
||||
|
||||
// cell
|
||||
--wot-cell-title-fs: 16px;
|
||||
--wot-cell-title-fs: 28rpx;
|
||||
|
||||
// dropdown
|
||||
// --wot-drop-menu-selected-color: #5355C8;
|
||||
|
||||
122
types/order.d.ts
vendored
122
types/order.d.ts
vendored
@@ -26,61 +26,101 @@ export interface IOrder {
|
||||
}
|
||||
|
||||
/**
|
||||
* 订单创建参数接口
|
||||
* 课程订单商品信息
|
||||
*/
|
||||
export interface ICreateOrderParams {
|
||||
paymentMethod: '4' | '5' // 支付方式: 4-虚拟币, 5-Google Pay
|
||||
orderMoney: number | string // 订单金额
|
||||
abroadBookId: number // 图书ID
|
||||
orderType: 'abroadBook' // 订单类型
|
||||
export interface IOrderGoods {
|
||||
productId: number
|
||||
productName: string
|
||||
productImages: string
|
||||
price: number
|
||||
vipPrice: number | null
|
||||
activityPrice: number | null
|
||||
isVipPrice: number // 是否有VIP优惠 0-否 1-是
|
||||
productAmount: number // 购买数量
|
||||
goodsType: string // 商品类型 "05" for course
|
||||
}
|
||||
|
||||
/**
|
||||
* Google Pay 验证参数接口
|
||||
* 优惠券实体信息
|
||||
*/
|
||||
export interface IGooglePayVerifyParams {
|
||||
purchaseToken: string // 购买凭证
|
||||
orderSn: string // 订单号
|
||||
productId: string // 产品ID
|
||||
export interface ICouponEntity {
|
||||
id: number
|
||||
couponName: string
|
||||
couponAmount: number
|
||||
useLevel: number // 满多少可用
|
||||
couponRange: number // 0-全场 1-指定课程 2-指定品类
|
||||
remark?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 订单创建响应接口
|
||||
* 优惠券信息
|
||||
*/
|
||||
export interface ICreateOrderResponse {
|
||||
code: number
|
||||
orderSn: string // 订单号
|
||||
msg?: string
|
||||
export interface ICoupon {
|
||||
id: number
|
||||
couponId: number
|
||||
canUse: number // 0-不可用 1-可用
|
||||
canUseReason?: string
|
||||
effectType: number // 0-永久有效
|
||||
endTime?: string
|
||||
couponEntity: ICouponEntity
|
||||
}
|
||||
|
||||
/**
|
||||
* Google Pay SKU 信息接口
|
||||
* 课程订单创建参数
|
||||
*/
|
||||
export interface IGooglePaySku {
|
||||
productId: string
|
||||
type: string
|
||||
price: string
|
||||
price_amount_micros: number
|
||||
price_currency_code: string
|
||||
title: string
|
||||
description: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Google Pay 支付结果接口
|
||||
*/
|
||||
export interface IGooglePayResult {
|
||||
code: number
|
||||
data?: Array<{
|
||||
original: {
|
||||
purchaseToken: string
|
||||
orderId: string
|
||||
packageName: string
|
||||
productId: string
|
||||
purchaseTime: number
|
||||
purchaseState: number
|
||||
}
|
||||
export interface ICourseOrderCreateParams {
|
||||
buyType: number // 0-商品页直接下单 1-购物车结算
|
||||
userId: number
|
||||
paymentMethod: number // 4-天医币
|
||||
orderMoney: number // 订单金额
|
||||
realMoney: number // 实收金额
|
||||
jfDeduction: number // 积分抵扣
|
||||
couponId?: number // 优惠券ID
|
||||
couponName?: string // 优惠券名称
|
||||
vipDiscountAmount: number // VIP折扣金额
|
||||
districtMoney: number // 地区优惠金额
|
||||
remark?: string // 备注
|
||||
productList: Array<{
|
||||
productId: number
|
||||
quantity: number
|
||||
}>
|
||||
orderType: string // "order"
|
||||
addressId: number // 0 for course products
|
||||
appName: string // "wumen"
|
||||
come: number // 2
|
||||
}
|
||||
|
||||
/**
|
||||
* 价格明细项
|
||||
*/
|
||||
export interface IPriceBreakdownItem {
|
||||
type: number // 1-商品总价 2-运费 3-优惠券 4-积分 5-活动立减 6-VIP立减
|
||||
text: string
|
||||
imgUrl?: string
|
||||
icon?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 订单状态
|
||||
*/
|
||||
export interface IOrderState {
|
||||
goodsList: IOrderGoods[]
|
||||
totalPrice: number
|
||||
vipPrice: number
|
||||
districtAmount: number
|
||||
actualPayment: number
|
||||
jfNumber: number
|
||||
jfNumberMax: number
|
||||
jfNumberShow: string
|
||||
couponList: ICoupon[]
|
||||
selectedCoupon: ICoupon | null
|
||||
showCouponPopup: boolean
|
||||
remark: string
|
||||
showRemarkPopup: boolean
|
||||
payType: number
|
||||
loading: boolean
|
||||
submitting: boolean
|
||||
buyingFlag: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -18,7 +18,7 @@ export const onPageBack = () => {
|
||||
/**
|
||||
* 拨打电话
|
||||
*/
|
||||
export const makePhoneCall = (phoneNumber: string, title: string) => {
|
||||
export const makePhoneCall = (phoneNumber: string, title: string = '') => {
|
||||
uni.showModal({
|
||||
title: title,
|
||||
content: phoneNumber,
|
||||
|
||||
Reference in New Issue
Block a user