修复：合并丢失的代码

2025-11-27 17:32:58 +08:00
parent 3b596e0a70
commit 38c4519e79
19 changed files with 1284 additions and 460 deletions
--- a/api/modules/order.ts
+++ b/api/modules/order.ts
@@ -8,7 +8,8 @@ import type {
  IOrderGoods,
  ICoupon,
  ICourseOrderCreateParams,
-  IOrderInitData
+  IOrderInitData,
+  IGoodsDiscountParams
 } from '@/types/order'
 import type { IUserInfo } from '@/types/user'

@@ -108,7 +109,7 @@ export const orderApi = {
   * 获取地区优惠金额
   * @param productList 商品列表
   */
-  async getDistrictAmount(productList: Array<{ productId: number; quantity: number }>) {
+  async getDistrictAmount(productList: IGoodsDiscountParams[]) {
    const res = await mainClient.request<IApiResponse<{ districtAmount: number }>>({
      url: 'book/buyOrder/getDistrictAmount',
      method: 'POST',
@@ -144,10 +145,10 @@ export const orderApi = {
  },

  /**
-   * 创建课程订单
+   * 创建订单
   * @param data 订单数据
   */
-  async placeCourseOrder(data: ICourseOrderCreateParams) {
+  async placeOrder(data: ICourseOrderCreateParams) {
    const res = await mainClient.request<IApiResponse<{ orderSn: string; money: number }>>({
      url: 'book/buyOrder/placeOrder',
      method: 'POST',
--- a/api/modules/vip.ts
+++ b/api/modules/vip.ts
@@ -0,0 +1,27 @@
+import { mainClient } from '@/api/clients/main'
+import type { IApiResponse } from '@/api/types'
+import type { IVipItem } from '@/types/vip'
+
+export const vipApi = {
+  /**
+   * 获取VIP购买配置列表
+   */
+  getVipBuyConfigList: async () => {
+    const res = await mainClient.request<IApiResponse<{ res: IVipItem[] }>>({
+      url: 'common/userVip/getVipBuyConfigList',
+      method: 'POST'
+    })
+    return res
+  },
+
+  /**
+   * 获取图书VIP列表
+   */
+  getBookVipList: async () => {
+    const res = await mainClient.request<IApiResponse<any>>({
+      url: 'bookAbroad/ebookvip/getEbookvipBuyConfigList',
+      method: 'POST'
+    })
+    return res
+  }
+}
--- a/components/course/ChapterList.vue
+++ b/components/course/ChapterList.vue
@@ -263,6 +263,7 @@ const handleChapterClick = (chapter: IChapter) => {
    left: 0;
    top: 0;
    font-size: 24rpx;
+		display: inline-block;
    background: linear-gradient(90deg, #6429db 0%, #0075ed 100%);
    color: #fff;
    padding: 10rpx 20rpx;
--- a/components/order/Confirm.vue
+++ b/components/order/Confirm.vue
@@ -26,53 +26,47 @@
      <!-- 商品总价 -->
      <view class="price-item">
        <text class="label">{{ $t('order.totalPrice') }}</text>
-        <text class="value">{{ totalPrice.toFixed(2) }} 天医币</text>
+        <text class="value">{{ totalAmount.toFixed(2) }} {{ t('global.coin') }}</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 v-if="promotionDiscounted > 0" class="price-item">
+        <text class="label">{{ $t('order.promotionDiscounted') }}</text>
+        <text class="discount-value">-{{ promotionDiscounted.toFixed(2) }} {{ t('global.coin') }}</text>
      </view>
      
      <!-- VIP专享立减 -->
-      <view v-if="vipPrice > 0" class="price-item">
+      <view v-if="vipDiscounted > 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>
+        <text class="discount-value">-{{ vipDiscounted.toFixed(2) }} {{ t('global.coin') }}</text>
      </view>
      
      <!-- 积分 -->
-      <view v-if="allowPointPay && userInfo.jf > 0" class="price-item">
+      <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 }})
+            ({{ $t('order.allPoints') }}：{{ userInfo?.jf || 0 }})
          </text>
        </view>
-        <text class="discount-value">-{{ jfNumber.toFixed(2) }}</text>
+        <text class="discount-value">-{{ pointsDiscounted.toFixed(2) }}</text>
      </view>
      
      <!-- 积分输入 -->
-      <view v-if="allowPointPay && userInfo.jf > 0" class="points-input-section">
+      <view v-if="allowPointPay && userInfo?.jf > 0" class="points-input-section">
        <text class="points-label">
-          {{ $t('order.maxPoints', { max: jfNumberMax }) }}
+          {{ $t('order.maxPoints', { max: pointsUsableMax }) }}
        </text>
        <view class="points-input-box">
          <input
-            v-model="jfNumber"
+            v-model="pointsDiscounted"
            type="number"
            clearable
            :placeholder="$t('order.pointsPlaceholder')"
@@ -94,9 +88,9 @@
    <view class="bottom-bar">
      <view class="total-info">
        <text class="label">{{ $t('order.total') }}：</text>
-        <text class="amount">{{ actualPayment.toFixed(2) }} 天医币</text>
+        <text class="amount">{{ finalAmount }} {{ t('global.coin') }}</text>
      </view>
-      <wd-button type="primary" :loading="submitting" @click="handleSubmit">
+      <wd-button type="primary" @click="handleSubmit">
        {{ $t('order.submit') }}
      </wd-button>
    </view>
@@ -120,7 +114,7 @@
        </view>
        
        <view class="popup-footer">
-          <wd-button type="primary" block @click="handleRemarkConfirm">{{ $t('global.ok') }}</wd-button>
+          <wd-button type="primary" block @click="showRemarkPopup = false">{{ $t('global.ok') }}</wd-button>
        </view>
      </view>
    </wd-popup>
@@ -128,93 +122,67 @@
 </template>

 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { orderApi } from '@/api/modules/order'
+import { getUserInfo } from '@/api/modules/user'
+import { useUserStore } from '@/stores/user'
 import { t } from '@/utils/i18n'
-import type { IOrderGoods } from '@/types/order'
+import type { IGoods, IGoodsDiscountParams } from '@/types/order'
 import PayWay from '@/components/order/PayWay.vue'

+const userStore = useUserStore()
+
 // 使用页面传参
 interface Props {
-  goodsList: IOrderGoods[],
+  goodsList: IGoods[],
  userInfo: object,
  allowPointPay: boolean,
+  orderType: string,
+  backStep: number // 购买完成后返回几层页面
 }
 const props = withDefaults(defineProps<Props>(), {
  goodsList: () => [],
  userInfo: () => ({}),
-  allowPointPay: () => true
+  allowPointPay: true,
+  orderType: 'order',
+  backStep: 1
 })

-// 价格相关
-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)

-// 支付相关
+// 价格相关
+const totalAmount = ref(0) // 商品总价
+const vipDiscounted = ref(0) // VIP专享立减
+const promotionDiscounted = ref(0) // 活动优惠金额
+const couponDiscounted = ref(0) // 优惠券优惠金额
+const finalAmount = ref<string | number>('--') // 最终支付金额

-// UI状态
-const submitting = ref(false)
+// 积分相关
+const pointsDiscounted = ref(0) // 积分支付金额
+const pointsUsableMax = ref(0) // 最大可用积分

+// 优惠券相关
+
+/**
+ * 优惠价格的请求参数
+ */
+const goodsListParams = ref<IGoodsDiscountParams[]>([])
+const getDiscountParams = (goodsList: IGoods[]) => {
+  goodsListParams.value = goodsList.map(item => ({
+    productId: item.productId,
+    quantity: item.productAmount || 1
+  }))
+}
+
+// 监听商品列表变化，更新价格
 watch(() => props.goodsList, () => {
+  getDiscountParams(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'
-    })
-  }
-}
-
 /**
 * 计算所有价格
 */
@@ -223,15 +191,17 @@ const calculateAllPrices = async () => {
    // 计算商品总价
    calculateTotalPrice()
    
-    // 获取VIP优惠
-    // await calculateVipDiscount()
-    
-    // 获取地区优惠
-    // await calculateDistrictDiscount()
-    
-    // 获取优惠券列表
-    // await getAvailableCoupons()
-    
+    props.orderType === 'order' && await Promise.all([
+      // 获取VIP优惠
+      calculateVipDiscounted(),
+      
+      // 获取活动优惠
+      calculatePromotionDiscounted()
+
+      // 获取优惠券列表
+      // await getAvailableCoupons()
+    ])
+
    // 计算最终价格
    calculateFinalPrice()
  } catch (error) {
@@ -243,8 +213,7 @@ const calculateAllPrices = async () => {
 * 计算商品总价
 */
 const calculateTotalPrice = () => {
-  console.log('商品列表:', props.goodsList)
-  totalPrice.value = props.goodsList.reduce((sum, item) => {
+  totalAmount.value = props.goodsList.reduce((sum: number, item: IGoods) => {
    // return sum + (item.price * item.productAmount)
    return sum + (item.price * 1)
  }, 0)
@@ -253,95 +222,47 @@ const calculateTotalPrice = () => {
 /**
 * 计算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 calculateVipDiscounted = async () => {
+  const res = await orderApi.getVipDiscountAmount(goodsListParams.value)
+  vipDiscounted.value = res.discountAmount
 }

 /**
 * 计算活动优惠
 */
-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 calculatePromotionDiscounted = async () => {
+  const res = await orderApi.getDistrictAmount(goodsListParams.value)
+  promotionDiscounted.value = res.districtAmount
 }

 /**
 * 获取可用优惠券
 */
-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 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 || []
+//     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 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
-  )
-}
+//       // 如果当前选中的优惠券不可用，清除选择
+//       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)
+//   }
+// }

 /**
 * 处理积分输入
@@ -353,7 +274,7 @@ const handlePointsInput = (value: any) => {
  val = val.replace(/[^0-9]/g, '')
  
  if (val === '0' || val === '') {
-    jfNumber.value = 0
+    pointsDiscounted.value = 0
  } else {
    let numericValue = parseInt(val, 10)
    if (numericValue < 0 || isNaN(numericValue)) {
@@ -361,11 +282,11 @@ const handlePointsInput = (value: any) => {
    }
    
    // 确保不超过最大值
-    if (numericValue >= jfNumberMax.value) {
-      numericValue = jfNumberMax.value
+    if (numericValue >= pointsUsableMax.value) {
+      numericValue = pointsUsableMax.value
    }
    
-    jfNumber.value = numericValue
+    pointsDiscounted.value = numericValue
  }
  
  // 重新计算实付款
@@ -376,32 +297,52 @@ const handlePointsInput = (value: any) => {
 * 清除积分输入
 */
 const handlePointsClear = () => {
-  jfNumber.value = 0
+  pointsDiscounted.value = 0
  calculateFinalPrice()
 }

 /**
- * 跳转到充值页面
+ * 计算最终价格
 */
-const goToRecharge = () => {
-  uni.navigateTo({
-    url: '/pages/user/wallet/recharge/index?source=order'
-  })
-}
-
-/**
- * 确认备注
- */
-const handleRemarkConfirm = () => {
-  showRemarkPopup.value = false
+const calculateFinalPrice = () => {
+  // const couponAmount = selectedCoupon.value?.couponEntity.couponAmount || 0
+  const couponAmount = 0
+  
+  // 计算最大可用积分
+  const orderAmountAfterDiscount = totalAmount.value - promotionDiscounted.value - vipDiscounted.value
+  pointsUsableMax.value = Math.min(
+    props?.userInfo?.jf || 0,
+    Math.floor(orderAmountAfterDiscount - couponAmount)
+  )
+  
+  // 限制当前积分不超过最大值
+  if (pointsDiscounted.value > pointsUsableMax.value) {
+    pointsDiscounted.value = pointsUsableMax.value
+  }
+  
+  // 计算实付款
+  const result = Math.max(
+    0,
+    totalAmount.value - couponAmount - pointsDiscounted.value - promotionDiscounted.value - vipDiscounted.value
+  )
+  finalAmount.value = result
 }

 /**
 * 验证订单
 */
 const validateOrder = (): boolean => {
+  // 验证实付金额是否计算完成
+  if (isNaN(parseFloat(finalAmount.value))) {
+    uni.showToast({
+      title: t('order.invalidPaymentAmount'),
+      icon: 'none'
+    })
+    return false
+  }
+
  // 验证天医币余额
-  if (actualPayment.value > props.userInfo.peanutCoin) {
+  if (finalAmount.value > props.userInfo.peanutCoin) {
    uni.showToast({
      title: t('order.insufficientBalance'),
      icon: 'none'
@@ -415,77 +356,56 @@ const validateOrder = (): boolean => {
 /**
 * 提交订单
 */
-const handleSubmit = async () => {
-  if (submitting.value) {
-    uni.showToast({
-      title: t('order.tooFrequent'),
-      icon: 'none'
-    })
-    return
-  }
-  
+const handleSubmit = async () => {  
  // 验证订单
-  if (!validateOrder()) {
-    return
-  }
-  
-  try {
-    submitting.value = true
-    
-    // 创建订单 此app用天医币支付，创建订单成功即支付成功
-    await createOrder()
+  if (!validateOrder()) return

-    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
-  }
+  // 创建订单 此app用天医币支付，创建订单成功即支付成功
+  await createOrder()
+
+  // 重新获取用户信息更新store和本地缓存
+  const res = await getUserInfo()
+  userStore.setUserInfo(res.result)
+
+  uni.showToast({
+    title: t('order.orderSuccess'),
+    icon: 'success'
+  })
+
+  // 返回上一页
+  uni.navigateBack({
+    delta: props.backStep
+  })
 }

 /**
 * 创建订单
 */
 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
+  const orderParams = {
+    userId: props.userInfo.id,
+    paymentMethod: 4, // 天医币
+    orderMoney: totalAmount.value,
+    realMoney: finalAmount.value,
+    jfDeduction: pointsDiscounted.value,
+    // couponId: selectedCoupon.value?.id,
+    // couponName: selectedCoupon.value?.couponEntity.couponName,
+    vipDiscountAmount: vipDiscounted.value,
+    districtMoney: promotionDiscounted.value,
+    remark: remark.value,
+    orderType: props.orderType,
+    productList: props.orderType === 'order' ? goodsListParams.value : null,
+    vipBuyConfigId: props.orderType === 'vip' ? props.goodsList[0].productId : null,
+    abroadVipId: props.orderType === 'abroadVip' ? props.goodsList[0].productId : null,
+    come: 10
  }
+  
+  const res = await orderApi.placeOrder(orderParams)
+  
+  if (res.orderSn) {
+    return res.orderSn
+  }
+  return null
 }
 </script>

--- a/components/order/GoodsSelector.vue
+++ b/components/order/GoodsSelector.vue
@@ -9,11 +9,8 @@
        <image :src="goods[selectedIndex].productImages" mode="aspectFit" class="goods-cover" />
        <view class="info">
          <view class="name">{{ goods[selectedIndex].productName }}</view>
-          <view class="price-info">
-            <text class="price">{{ selectedGoodsPrice.lowestPrice }} 天医币</text>
-            <text class="price-label">{{ selectedGoodsPrice.priceLabel }}</text>
-            <text v-if="selectedGoodsPrice.priceLabel" class="original-price">{{ goods[selectedIndex].price }} 天医币</text>
-          </view>
+          <!-- 商品价格组件 -->
+          <GoodsPrice :goods="goods[selectedIndex]" />
        </view>
      </view>
      
@@ -32,11 +29,8 @@
          <view class="goods-info">
            <text class="goods-name">{{ item.productName }}</text>

-            <view class="price-info">
-              <text class="price">{{ calculatePrice(item).lowestPrice }} 天医币</text>
-              <text class="price-label">{{ calculatePrice(item).priceLabel }}</text>
-              <text v-if="calculatePrice(item).priceLabel" class="original-price">{{ item.price }} 天医币</text>
-            </view>
+            <!-- 商品价格组件 -->
+            <GoodsPrice :goods="item" />
          </view>
        </view>
      </view>
@@ -52,12 +46,10 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useUserStore } from '@/stores/user'
-import { calculateLowestPrice } from '@/utils/index'
 import type { IGoods } from '@/types/order'
+import GoodsPrice from '@/components/order/GoodsPrice.vue';

 const { t } = useI18n()
-const userStore = useUserStore()

 interface Props {
  show: boolean
@@ -80,38 +72,8 @@ const visible = computed({
  }
 })

-// 计算商品价格
-const calculatePrice = (goods: IGoods) => {
-  const { activityPrice, vipPrice, price } = goods
-  const isVipUser = userStore.userVips && userStore.userVips.length > 0
-  const priceLabel = {
-    vipPrice: 'VIP优惠价',
-    activityPrice: '活动价',
-    price: ''
-  }
-  
-  let priceData = null
-  if (isVipUser) {
-    priceData = { activityPrice, vipPrice, price }
-  } else {
-    priceData = { activityPrice, price }
-  }
-  const lowestPrice = calculateLowestPrice(priceData)
-  
-  return {
-    lowestPrice: parseFloat(lowestPrice.value).toFixed(2),
-    priceLabel: priceLabel[lowestPrice.key as keyof typeof priceLabel]
-  }
-}
-
+// 选中商品的索引
 const selectedIndex = ref(-1)
-// 选中商品的价格
-const selectedGoodsPrice = computed(() => {
-  if (selectedIndex.value === -1) return 0
-  const selectedGoods = props.goods[selectedIndex.value]
-  return calculatePrice(selectedGoods)
-})
-
 /**
 * 选择商品
 */
@@ -132,16 +94,20 @@ const handleConfirm = () => {
    return
  }
  
+  visible.value = false
  emit('confirm', props.goods[selectedIndex.value])
 }

 /**
- * 关闭选择器
+ * 关闭弹窗
 */
 const handleClose = () => {
+  visible.value = false
  emit('close')
 }

+
+
 // 监听显示状态，重置选择
 watch(() => props.show, (newVal: boolean) => {
  if (newVal && props.goods.length > 0) {
@@ -175,30 +141,6 @@ watch(() => props.show, (newVal: boolean) => {
  }
 }

-.price-info {
-  display: flex;
-  align-items: baseline;
-  gap: 10rpx;
-  color: #e97512;
-  
-  .price {
-    font-size: 16px;
-    font-weight: bold;
-    color: #e97512;
-  }
-  
-  .price-label {
-    font-size: 12px;
-    color: #e97512;
-  }
-  
-  .original-price {
-    font-size: 12px;
-    color: #8a8a8a;
-    text-decoration: line-through;
-  }
-}
-
 .goods-info-mini {
  display: flex;
  align-items: center;
@@ -226,10 +168,10 @@ watch(() => props.show, (newVal: boolean) => {

    .price-info {
      padding-top: 20rpx;
-    }
-    
-    .price {
-      font-size: 36rpx;
+
+      :deep(.price) {
+        font-size: 36rpx;
+      }
    }
  }
 }
--- a/components/order/ProductInfo.vue
+++ b/components/order/ProductInfo.vue
@@ -9,7 +9,7 @@
      <view class="order-item-product-name" v-html="title"></view>
    </view>
    <view class="order-item-product-price">
-      <view class="price">{{ price }} 天医币</view>
+      <view class="price">{{ price }} {{ t('global.coin') }}</view>
      <view class="count">x {{ 1 }}</view>
    </view>
  </view>
@@ -17,6 +17,7 @@

 <script lang="ts" setup>
 import { computed } from 'vue'
+import { t } from '@/utils/i18n'
 interface Props {
  data: any
  type: string
--- a/components/video-player/index.vue
+++ b/components/video-player/index.vue
@@ -362,13 +362,13 @@ const retry = () => {

 .video-wrapper {
  width: 100%;
-  height: 100%;
+  height: 400rpx;
  position: relative;
 }

 .video-element {
  width: 100%;
-  height: 400rpx;
+  height: 100%;
 }

 .error-display {
@@ -401,10 +401,12 @@ const retry = () => {
 }

 .btn-retry {
+  display: inline-block;
  background-color: #1989fa;
  color: #fff;
  border: none;
  padding: 20rpx 40rpx;
+  line-height: 1;
  border-radius: 8rpx;
  font-size: 28rpx;
 }
--- a/locale/en.json
+++ b/locale/en.json
@@ -16,7 +16,9 @@
    "dataNull": "No data available",
    "networkConnectionError": "Network connection error.",
    "loginExpired": "Login expired. Please log in again.",
-    "requestException": "Request exception"
+    "requestException": "Request exception",
+    "coin": "Coin",
+    "days": "Days"
  },
  "tabar.course": "COURSE",
  "tabar.book": "EBOOK",
@@ -238,7 +240,6 @@
    "amount": "Amount",
    "paymentMethod": "Payment Method",
    "googlePay": "Google Pay",
-    "virtualCoin": "Virtual Coin",
    "balance": "Balance",
    "confirm": "Confirm Order",
    "creating": "Creating order...",
@@ -247,6 +248,7 @@
    "paymentFailed": "Payment failed",
    "paymentCancelled": "Payment cancelled",
    "insufficientBalance": "Insufficient virtual coin balance",
+    "invalidPaymentAmount": "Final amount calculation incomplete",
    "googlePayNotAvailable": "Google Pay not available",
    "productNotFound": "Product not found",
    "orderCreateFailed": "Failed to create order",
@@ -421,11 +423,9 @@
    "coupon": "Coupon",
    "points": "Points",
    "vipDiscount": "VIP Exclusive Discount",
-    "activityDiscount": "Activity Discount",
-    "districtDiscount": "Regional Discount",
+    "promotionDiscounted": "Promotion Discount",
    "actualPayment": "Total",
    "paymentMethod": "Payment Method",
-    "virtualCoin": "Virtual Coin",
    "balance": "Balance",
    "recharge": "Recharge Now",
    "remark": "Order Remark",
@@ -452,14 +452,11 @@
    "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",
+    "paymentTip1": "1.1 points = 1 Tianyi coin",
+    "paymentTip2-1": "2.1 For assistance, please contact our customer service on WeChat",
+    "paymentTip2-2": "or by email at",
+    "ensureBalance": "Ensure sufficient Tianyi coin balance",
    "vipLabel": "VIP Discount",
    "activityLabel": "Activity Price",
    "vipPriceLabel": "VIP Price",
@@ -478,5 +475,12 @@
 		"valueAddedServices": "Value-added services",
 		"readAgree": "I have read and agreed",
 		"readAgreeServices": "Please read and agree to the value-added services first"
+  },
+  "vip": {
+    "courseVip": "Course VIP",
+    "bookVip": "E-Book VIP",
+    "openVip": "Open Now",
+    "renewal": "Renewal",
+    "daily": "Daily"
  }
 }
--- a/locale/zh-Hans.json
+++ b/locale/zh-Hans.json
@@ -16,7 +16,9 @@
    "dataNull": "暂无数据",
    "networkConnectionError": "网络连接错误。",
    "loginExpired": "登录失效，请重新登录。",
-    "requestException": "请求异常"
+    "requestException": "请求异常",
+    "coin": "天医币",
+    "days": "天"
  },
  "tabar.course": "课程",
  "tabar.book": "图书",
@@ -265,7 +267,6 @@
    "amount": "金额",
    "paymentMethod": "支付方式",
    "googlePay": "Google Pay",
-    "virtualCoin": "虚拟币",
    "balance": "余额",
    "confirm": "确认下单",
    "creating": "创建订单中...",
@@ -422,11 +423,9 @@
    "coupon": "优惠券",
    "points": "积分",
    "vipDiscount": "VIP专享立减",
-    "activityDiscount": "活动立减",
-    "districtDiscount": "地区优惠",
+    "promotionDiscounted": "活动立减",
    "actualPayment": "实付款",
    "paymentMethod": "支付方式",
-    "virtualCoin": "天医币",
    "balance": "余额",
    "recharge": "立即充值",
    "remark": "订单备注",
@@ -445,6 +444,7 @@
    "pointsPlaceholder": "请输入积分",
    "allPoints": "全部积分",
    "insufficientBalance": "天医币余额不足",
+    "invalidPaymentAmount": "实付金额计算未完成",
    "orderCreating": "正在请求订单",
    "orderSuccess": "购买成功",
    "orderFailed": "失败,请重新下单",
@@ -453,13 +453,10 @@
    "duplicateConfirm": "继续操作",
    "duplicateCancel": "点错了",
    "customerService": "客服",
-    "paymentTip": "1天医币 = 1元人民币",
    "paymentTipTitle": "说明",
-    "paymentTip1": "1. 1天医币 = 1元人民币",
-    "paymentTip2": "2.若有疑问或意见请致电客服",
-    "paymentTip3": "3.非中国大陆用户可以信用卡支付。简单快捷，推荐使用！支付时使用的信用卡需要带有Visa或MasterCard的标识。请向邮箱",
-    "paymentTip3_1": "（点击复制）发送支付请求，内容需包含：拟购买的课程名称、支付金额、APP注册姓名及手机号码，或者加一路健康客服微信（",
-    "paymentTip3_2": "）（点击复制）联系我们，我们将在24小时内向您的邮箱或者微信发送支付链接，根据提示即可完成信用卡支付，无需兑换外币。",
+    "paymentTip1": "1. 1积分=1天医币",
+    "paymentTip2-1": "2. 若有疑问请加客服微信：{ customerServiceWechat }  { customerServiceEmail }",
+    "paymentTip2-2": "或邮箱联系",
    "ensureBalance": "确保您的天医币足够支付",
    "vipLabel": "VIP优惠",
    "activityLabel": "活动价",
@@ -479,5 +476,12 @@
 		"valueAddedServices": "增值服务",
 		"readAgree": "我已阅读并同意",
 		"readAgreeServices": "请先阅读并同意增值服务"
+  },
+  "vip": {
+    "courseVip": "课程VIP",
+    "bookVip": "电子书VIP",
+    "openVip": "立即开通",
+    "renewal": "续费",
+    "daily": "日均"
  }
 }
--- a/pages.json
+++ b/pages.json
@@ -169,6 +169,24 @@
 				"navigationStyle": "custom",
 				"navigationBarTitleText": "%order.confirmTitle%"
 			}
+		}, {
+			"path": "pages/order/vipConfirm",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": "%order.confirmTitle%"
+			}
+		}, {
+			"path": "pages/vip/course",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": "%order.courseVip%"
+			}
+		}, {
+			"path": "pages/vip/book",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": "%order.bookVip%"
+			}
 		}, {
 			"path": "uni_modules/uni-upgrade-center-app/pages/upgrade-popup",
 			"style": {
--- a/pages/course/details/course.vue
+++ b/pages/course/details/course.vue
@@ -13,7 +13,7 @@
    </view>

    <!-- 课程信息 -->
-    <CourseInfo v-if="courseDetail" :course="courseDetail" class="pt-[40px]" />
+    <CourseInfo v-if="courseDetail" :course="courseDetail" :class="{'pt-10': !!vipTip}" />

    <!-- 课程内容包装器 -->
    <view class="course-content-wrapper">
@@ -259,60 +259,47 @@ onLoad(async (options: any) => {
 * 加载页面数据
 */
 const loadPageData = async () => {
-  try {
-    uni.showLoading({ title: '加载中...' })
+  // 获取课程详情
+  const res = await courseApi.getCourseDetail(courseId.value)
+  if (res.code === 0 && res.data) {
+    courseDetail.value = res.data.course
+    catalogueList.value = res.data.catalogues || []
+    relatedBooks.value = res.data.shopProductList || []
    
-    // 获取课程详情
-    const res = await courseApi.getCourseDetail(courseId.value)
-    if (res.code === 0 && res.data) {
-      courseDetail.value = res.data.course
-      catalogueList.value = res.data.catalogues || []
-      relatedBooks.value = res.data.shopProductList || []
-      
-      // 计算学习进度
-      if (catalogueList.value.length > 0) {
-        const totalProgress = catalogueList.value.reduce((sum, cat) => sum + cat.completion, 0)
-        learningProgress.value = Number((totalProgress / catalogueList.value.length).toFixed(2))
-      }
-      
-      // 默认选择第一个目录
-      if (catalogueList.value.length > 0) {
-        await switchCatalogue(0)
-      }
+    // 计算学习进度
+    if (catalogueList.value.length > 0) {
+      const totalProgress = catalogueList.value.reduce((sum, cat) => sum + cat.completion, 0)
+      learningProgress.value = Number((totalProgress / catalogueList.value.length).toFixed(2))
    }
    
-    // 检查VIP权益
-    await checkVipStatus()
-    
-    // 加载评论
-    await loadComments()
-    
-  } catch (error) {
-    console.error('加载页面数据失败:', error)
-  } finally {
-    uni.hideLoading()
+    // 默认选择第一个目录
+    if (catalogueList.value.length > 0) {
+      await switchCatalogue(0)
+    }
  }
+  
+  // 检查VIP权益
+  await checkVipStatus()
+  
+  // 加载评论
+  await loadComments()
 }

 /**
 * 检查VIP状态
 */
 const checkVipStatus = async () => {
-  try {
-    const res = await courseApi.checkCourseVip(courseId.value)
-    if (res.code === 0) {
-      userVip.value = res.userVip || null
-      
-      // 如果不是VIP，获取需要的VIP类型
-      if (!userVip.value) {
-        const moduleRes = await courseApi.getCourseVipModule(courseId.value)
-        if (moduleRes.code === 0) {
-          vipModuleList.value = moduleRes.list || []
-        }
+  const res = await courseApi.checkCourseVip(courseId.value)
+  if (res.code === 0) {
+    userVip.value = res.userVip || null
+    
+    // 如果不是VIP，获取需要的VIP类型
+    if (!userVip.value) {
+      const moduleRes = await courseApi.getCourseVipModule(courseId.value)
+      if (moduleRes.code === 0) {
+        vipModuleList.value = moduleRes.list || []
      }
    }
-  } catch (error) {
-    console.error('检查VIP状态失败:', error)
  }
 }

@@ -324,21 +311,17 @@ const switchCatalogue = async (index: number) => {
  const catalogue = catalogueList.value[index]
  
  // 获取章节列表
-  try {
-    const res = await courseApi.getCatalogueChapterList(catalogue.id)
-    if (res.code === 0) {
-      chapterList.value = res.chapterList || []
-    }
-    
-    // 检查是否支持复读
-    if (catalogue.isBuy === 0 && !userVip.value) {
-      const renewRes = await courseApi.checkRenewPayment(catalogue.id)
-      showRenewBtn.value = renewRes.canRelearn || false
-    } else {
-      showRenewBtn.value = false
-    }
-  } catch (error) {
-    console.error('切换目录失败:', error)
+  const res = await courseApi.getCatalogueChapterList(catalogue.id)
+  if (res.code === 0) {
+    chapterList.value = res.chapterList || []
+  }
+  
+  // 检查是否支持复读
+  if (catalogue.isBuy === 0 && !userVip.value) {
+    const renewRes = await courseApi.checkRenewPayment(catalogue.id)
+    showRenewBtn.value = renewRes.canRelearn || false
+  } else {
+    showRenewBtn.value = false
  }
 }

@@ -366,18 +349,12 @@ const handleChapterClick = (chapter: IChapter) => {
 const handleGetFreeCourse = async () => {
  if (!currentCatalogue.value) return
  
-  try {
-    uni.showLoading({ title: '领取中...' })
-    const res = await courseApi.startStudyForMF(currentCatalogue.value.id)
-    if (res.code === 0) {
-      uni.showToast({ title: '领取成功', icon: 'success' })
-      // 刷新页面数据
-      await loadPageData()
-    }
-  } catch (error) {
-    console.error('领取免费课程失败:', error)
-  } finally {
-    uni.hideLoading()
+  uni.showLoading({ title: '领取中...' })
+  const res = await courseApi.startStudyForMF(currentCatalogue.value.id)
+  if (res.code === 0) {
+    uni.showToast({ title: '领取成功', icon: 'success' })
+    // 刷新页面数据
+    await loadPageData()
  }
 }

@@ -387,17 +364,13 @@ const handleGetFreeCourse = async () => {
 const handlePurchase = async () => {
  if (!currentCatalogue.value) return
  
-  try {
-    isFudu.value = false
-    const res = await courseApi.getProductListForCourse(currentCatalogue.value.id)
-    if (res.code === 0 && res.productList.length > 0) {
-      goodsList.value = res.productList
-      showGoodsSelector.value = true
-    } else {
-      uni.showToast({ title: '此课程暂无购买方式', icon: 'none' })
-    }
-  } catch (error) {
-    console.error('获取商品列表失败:', error)
+  isFudu.value = false
+  const res = await courseApi.getProductListForCourse(currentCatalogue.value.id)
+  if (res.code === 0 && res.productList.length > 0) {
+    goodsList.value = res.productList
+    showGoodsSelector.value = true
+  } else {
+    uni.showToast({ title: '此课程暂无购买方式', icon: 'none' })
  }
 }

@@ -407,18 +380,14 @@ const handlePurchase = async () => {
 const handleRenew = async () => {
  if (!currentCatalogue.value) return
  
-  try {
-    isFudu.value = true
-    fuduCatalogueId.value = currentCatalogue.value.id
-    const res = await courseApi.getRenewProductList(currentCatalogue.value.id)
-    if (res.code === 0 && res.productList.length > 0) {
-      goodsList.value = res.productList
-      showGoodsSelector.value = true
-    } else {
-      uni.showToast({ title: '暂无复读方案', icon: 'none' })
-    }
-  } catch (error) {
-    console.error('获取复读商品列表失败:', error)
+  isFudu.value = true
+  fuduCatalogueId.value = currentCatalogue.value.id
+  const res = await courseApi.getRenewProductList(currentCatalogue.value.id)
+  if (res.code === 0 && res.productList.length > 0) {
+    goodsList.value = res.productList
+    showGoodsSelector.value = true
+  } else {
+    uni.showToast({ title: '暂无复读方案', icon: 'none' })
  }
 }

@@ -463,10 +432,8 @@ const confirmPurchase = () => {
 * 跳转到VIP页面
 */
 const goToVip = () => {
-  uni.showToast({ icon: 'none', title: 'VIP功能开发中' })
-  return false
  uni.navigateTo({
-    url: '/pages/user/wallet/index'
+    url: '/pages/vip/course'
  })
 }

--- a/pages/order/vipConfirm.vue
+++ b/pages/order/vipConfirm.vue
@@ -0,0 +1,152 @@
+<template>
+  <view>
+    <!-- 自定义导航栏 -->
+    <nav-bar :title="$t('order.confirmTitle')" />
+
+    <!-- 确认订单组件 -->
+    <Confirm :goodsList="goodsList" :userInfo="userInfo" :orderType="orderType" :allowPointPay="isLengthen" :backStep="orderType === 'abroadVip' ? 2 : 1">
+      <!-- 商品列表内容 -->
+      <template #goodsList>
+        <view class="goods-item" v-for="goods in goodsList" :key="goods.productId">
+          <!-- VIP优惠标签 -->
+          <wd-tag v-if="goods.isVipPrice === 1 && goods.vipPrice" type="danger" mark custom-class="vip-badge">{{ $t('order.vipLabel') }}</wd-tag>
+          
+          <!-- 商品图片 -->
+          <view class="goods-image">
+            <image
+              :src="goods.productImages || '/static/nobg.jpg'"
+              mode="aspectFit"
+            />
+          </view>
+          
+          <!-- 商品信息 -->
+          <view class="goods-info">
+            <text class="goods-name">{{ goods.productName }}</text>
+            <!-- 商品价格组件 -->
+            <GoodsPrice :goods="goods" />
+          </view>
+        </view>
+      </template>
+    </Confirm>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { onLoad, onUnload } from '@dcloudio/uni-app'
+import { orderApi } from '@/api/modules/order'
+import type { IOrderGoods } from '@/types/order'
+import Confirm from '@/components/order/Confirm.vue';
+import GoodsPrice from '@/components/order/GoodsPrice.vue';
+
+/**
+ * 获取用户信息
+ */
+const userInfo = ref({})
+const getUserInfo = async () => {
+  const res = await orderApi.getUserInfo()
+  userInfo.value = res.result || {}
+}
+
+// 商品列表
+const goodsList = ref<IOrderGoods[]>([])
+const isLengthen = ref<boolean>(false)
+const orderType = ref<string>('')
+
+/**
+ * 页面加载
+ */
+onLoad(async () => {
+  try {
+    // 获取商品列表
+    uni.$on('selectedGoods', (data: IOrderGoods) => {
+      console.log('监听到传入的商品数据:', data)
+      isLengthen.value = data.state !== null
+      orderType.value = data.orderType || ''
+      goodsList.value = [ data ]
+    })
+    // 获取用户信息
+    getUserInfo()
+  } catch (error) {
+    console.error('解析商品数据失败:', error)
+    uni.showToast({
+      title: '商品数据错误',
+      icon: 'none'
+    })
+  }
+})
+
+onUnload(() => {
+  uni.$off('selectedGoods')
+})
+</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;
+    }
+    
+    .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>
--- a/pages/vip/book.vue
+++ b/pages/vip/book.vue
@@ -0,0 +1,400 @@
+<template>
+  <view class="page-wrapper">
+    <!-- 自定义导航栏 -->
+    <nav-bar :title="$t('vip.bookVip')" />
+
+    <!-- VIP介绍卡片 -->
+    <view class="vip-intro-card">
+      <view class="vip-intro-header">
+        <text class="vip-intro-title">📚 读书VIP特权</text>
+        <!-- <text class="vip-intro-subtitle">畅享海量电子图书</text> -->
+      </view>
+      <view class="vip-intro-features">
+        <view class="feature-item">
+          <wd-icon name="check-circle" size="16px" color="#258feb" />
+          <text>畅享海量电子图书</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- VIP套餐列表 -->
+    <view class="vip-packages">
+      <text class="section-title">选择套餐</text>
+      <view class="package-grid">
+        <view 
+          class="package-card"
+          :class="{ 'package-card--popular': vip.isRecommend }"
+          v-for="(vip, index) in vipList"
+          :key="index"
+          @click="selectPackage(vip)"
+        >
+          <view class="package-header">
+            <view class="package-title-wrapper">
+              <text class="package-title package-title--vip">{{ vip.title }}</text>
+            </view>
+          </view>
+          
+          <view class="package-price">
+            <text class="price-amount">{{ vip.money }}</text>
+            <text class="price-unit">{{ $t('global.coin') }}</text>
+          </view>
+          
+          <view class="package-duration">
+            <view class="duration-text">{{ vip.days }} {{ $t('global.days') }}</view>
+            <view class="daily-price">{{ $t('vip.daily') }}{{ Math.round(vip.money / vip.days * 100) / 100 }}{{ $t('global.coin') }}</view>
+          </view>
+
+          <wd-button 
+            type="primary" 
+            size="small" 
+            class="package-btn"
+            @click="handlePurchase(vip)"
+          >
+            {{ $t('vip.openVip') }}
+          </wd-button>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import { onShow } from '@dcloudio/uni-app'
+import { useUserStore } from '@/stores/user'
+import { vipApi } from '@/api/modules/vip'
+
+const userStore = useUserStore()
+
+const vipList = ref([])
+const getVipList = async () => {
+  const res = await vipApi.getBookVipList()
+  // 模拟推荐标识，实际项目中应该从后端获取
+  vipList.value = res.lableList || []
+}
+
+// 选择套餐
+const selectPackage = (vip: any) => {
+  // 这里可以添加跳转到订单确认页面的逻辑
+  uni.showToast({
+    title: `已选择: ${vip.title}`,
+    icon: 'none'
+  })
+}
+
+// 处理购买
+const handlePurchase = (vip: any) => {
+  const selectedGoods = { 
+    productId: vip.id,
+    productName: `${vip.title}`,
+    price: vip.money,
+    productImages: '/static/vip.png',
+    state: null,
+    orderType: 'abroadVip'
+  }
+  uni.navigateTo({
+    url: `/pages/order/vipConfirm`,
+    success: () => {
+      setTimeout(() => {
+        uni.$emit('selectedGoods', selectedGoods)
+      }, 100)
+    }
+  })
+}
+
+onShow(() => {
+  getVipList()
+})
+</script>
+
+<style lang="scss" scoped>
+.page-wrapper {
+  padding: 20rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-height: 100vh;
+}
+
+// VIP介绍卡片
+.vip-intro-card {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 20rpx;
+  padding: 30rpx 30rpx;
+  margin-bottom: 30rpx;
+  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(10rpx);
+}
+
+.vip-intro-header {
+  text-align: center;
+}
+
+.vip-intro-title {
+  display: block;
+  font-size: 40rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 10rpx;
+}
+
+.vip-intro-subtitle {
+  display: block;
+  font-size: 28rpx;
+  color: #666;
+}
+
+.vip-intro-features {
+  margin-top: 20rpx;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+
+.feature-item {
+  display: flex;
+  align-items: center;
+  margin: 10rpx;
+  font-size: 28rpx;
+  color: #555;
+}
+
+.feature-item text {
+  margin-left: 8rpx;
+}
+
+// 套餐区域
+.vip-packages {
+  margin-bottom: 30rpx;
+}
+
+.section-title {
+  display: block;
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #fff;
+  margin-bottom: 20rpx;
+  text-align: center;
+}
+
+.package-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 20rpx;
+}
+
+.package-card {
+  flex: 0 0 calc(50% - 10rpx);
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 20rpx;
+  padding: 30rpx;
+  box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.15);
+  backdrop-filter: blur(10rpx);
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  
+  &:active {
+    transform: scale(0.98);
+  }
+}
+
+.package-card--popular {
+  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
+  border: 2rpx solid #ff6b6b;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 0;
+    height: 0;
+    border-left: 60rpx solid transparent;
+    border-top: 60rpx solid #ff6b6b;
+  }
+}
+
+.package-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20rpx;
+}
+
+// .package-title-wrapper {
+//   position: relative;
+//   display: inline-block;
+// }
+
+.package-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 2;
+  display: inline-block;
+  width: 3em;
+  text-align: center;
+  padding: 8rpx 0;
+  border-radius: 12rpx;
+  transition: all 0.3s ease;
+}
+
+.package-title--vip {
+  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 25%, #ffd700 50%, #ffed4e 75%, #ffd700 100%);
+  color: #8b4513;
+  box-shadow: 
+    0 4rpx 15rpx rgba(255, 215, 0, 0.6),
+    0 0 20rpx rgba(255, 215, 0, 0.4),
+    inset 0 2rpx 0 rgba(255, 255, 255, 0.3);
+  border: 1rpx solid rgba(255, 215, 0, 0.5);
+  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
+}
+
+.package-title--popular {
+  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 25%, #ffd700 50%, #ffed4e 75%, #ffd700 100%);
+  color: #8b4513;
+  box-shadow: 
+    0 6rpx 20rpx rgba(255, 215, 0, 0.8),
+    0 0 30rpx rgba(255, 215, 0, 0.6),
+    inset 0 2rpx 0 rgba(255, 255, 255, 0.4);
+  border: 2rpx solid rgba(255, 215, 0, 0.7);
+  text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
+  font-size: 38rpx;
+}
+
+.title-decoration {
+  position: absolute;
+  top: -10rpx;
+  right: -10rpx;
+  width: 20rpx;
+  height: 20rpx;
+  background: linear-gradient(45deg, #ffd700, #ffed4e);
+  border-radius: 50%;
+  animation: decorationPulse 2s ease-in-out infinite;
+  z-index: 1;
+}
+
+@keyframes crownFloat {
+  0%, 100% { transform: translateY(0rpx); }
+  50% { transform: translateY(-4rpx); }
+}
+
+@keyframes starSparkle {
+  0%, 100% { 
+    transform: scale(1) rotate(0deg);
+    filter: brightness(1);
+  }
+  50% { 
+    transform: scale(1.2) rotate(180deg);
+    filter: brightness(1.3);
+  }
+}
+
+@keyframes decorationPulse {
+  0%, 100% { 
+    transform: scale(1);
+    opacity: 0.8;
+  }
+  50% { 
+    transform: scale(1.3);
+    opacity: 1;
+  }
+}
+
+.popular-badge {
+  background: #ff6b6b;
+  padding: 4rpx 12rpx;
+  border-radius: 20rpx;
+}
+
+.popular-text {
+  color: #fff;
+  font-size: 20rpx;
+  font-weight: bold;
+}
+
+.package-price {
+  text-align: center;
+  margin-bottom: 20rpx;
+}
+
+.price-amount {
+  font-size: 48rpx;
+  font-weight: bold;
+  color: #ff6b6b;
+}
+
+.price-unit {
+  font-size: 28rpx;
+  color: #666;
+  margin-left: 8rpx;
+}
+
+.package-duration {
+  margin-bottom: 20rpx;
+  padding: 15rpx;
+  background: rgba(102, 126, 234, 0.1);
+  border-radius: 12rpx;
+  text-align: center;
+}
+
+.duration-text {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: bold;
+  margin-bottom: 10rpx;
+}
+
+.daily-price {
+  font-size: 24rpx;
+  color: #666;
+}
+
+.package-features {
+  margin-bottom: 30rpx;
+}
+
+.feature-dot {
+  font-size: 24rpx;
+  color: #555;
+  margin-bottom: 10rpx;
+  padding-left: 20rpx;
+  position: relative;
+  
+  &::before {
+    content: '•';
+    position: absolute;
+    left: 0;
+    color: #667eea;
+    font-weight: bold;
+  }
+}
+
+.package-btn {
+  width: 100%;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border: none !important;
+  border-radius: 50rpx !important;
+  font-size: 28rpx !important;
+  font-weight: bold;
+  padding: 30rpx !important;
+  transition: all 0.3s ease;
+  
+  &:active {
+    transform: scale(0.95);
+  }
+}
+
+.package-btn--popular {
+  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%) !important;
+}
+
+// 响应式设计
+@media (max-width: 480px) {
+  .package-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
--- a/pages/vip/course.vue
+++ b/pages/vip/course.vue
@@ -0,0 +1,251 @@
+<template>
+  <view class="page-wrapper">
+    <!-- 自定义导航栏 -->
+    <nav-bar :title="$t('vip.courseVip')" />
+    <view
+      class="info"
+      :class="{
+        'vip-item-special': item.type == 1 || item.type == 2,
+        'vip-item-overdue': item.state == 1,
+        'vip-item-special-effective': (item.type == 1 || item.type == 2) && item.state == 0,
+        'vip-item-ordinary-effective': item.type != 1 && item.type != 2 && item.state == 0,
+      }"
+      v-for="(item, index) in list"
+      :key="index"
+    >
+      <!-- 购买按钮 -->
+      <wd-button
+        type="error"
+        size="small"
+        plain
+        class="vip-item-btn"
+        @click="handlePurchase(item)"
+      >
+        {{ item.state == null ? '去办理' : '去续费' }}
+      </wd-button>
+
+      <!-- vip标志 -->
+      <view>
+        <text class="vip-item-title">{{ item.title }}</text>
+        <text v-if="item.tip && item.tip < 100">
+          <wd-icon name="warning" size="14px" color="#ff1f00"/> 还有{{ item.tip }}天到期
+        </text>
+        <text v-if="item.state == 1">
+          <wd-icon name="warning" size="14px" color="#999"/> 已过期
+        </text>
+      </view>
+      
+      <view class="info-row pt-1">
+        <text class="info-label">课程价格：</text>
+        <view class="info-content">一年<text class="course-price">{{ item.originalPrice || 0 }}</text>天医币</view>
+      </view>
+
+      <view class="info-row">
+        <text class="info-label">
+          <template v-if="item.state !== null">延期价格：</template>
+          <template v-else>{{ `${item.type == 1 || item.type == 2 ? '超级' : ''}VIP价格：` }}</template>
+        </text>
+        <view class="info-content">
+          <text
+            class="vip-product"
+            v-for="(item_price, index_price) in (item.yanqiList ?? item.vcbList)"
+            :key="index_price"
+            @click="openorderModal(item, index_price)"
+          >
+            {{ item_price.year }}年<text>{{ item_price.rebateFee }}</text>{{ t('global.coin') }}
+          </text>
+        </view>
+      </view>
+      <view class="info-row">
+        <text class="info-label" style="display: block">{{ `${item.type == 1 || item.type == 2 ? '超级' : ''}VIP权限：` }}</text>
+        <view class="info-content" v-html="vipIntro[item.type]"></view>
+      </view>
+    </view>
+
+    <!-- 商品选择器 -->
+    <GoodsSelector
+      :show="showGoodsSelector"
+      :goods="goodsList"
+      @select="handleGoodsSelect"
+      @confirm="handleGoodsConfirm"
+      @close="closeGoodsSelector"
+    />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { onShow } from '@dcloudio/uni-app'
+import { vipApi } from '@/api/modules/vip'
+import { t } from '@/utils/i18n'
+import type { IVipItem, IVipItemProduct } from '@/types/vip'
+import type { IGoods } from '@/types/order'
+import GoodsSelector from '@/components/order/GoodsSelector.vue'
+
+const vipIntro = {
+  1: '<p>无限制观看中医学、中西汇通学、针灸学、肿瘤学四个板块任意课程；</p><p>购买电子图书价格享受<b style="font-size: 16px; color: #ff1f00;">8折</b>优惠。</p>',
+  2: '<p>无限制观看国学与心理学任意课程；</p><p>购买电子图书价格享受<b style="font-size: 16px; color: #ff1f00;">8折</b>优惠。</p>',
+  4: '<p>无限制观看中医任意课程；</p><p>购买电子图书价格享受<b style="font-size: 16px; color: #ff1f00;">9折</b>优惠。</p>',
+  5: '<p>无限制观看针灸任意课程；</p><p>购买电子图书价格享受<b style="font-size: 16px; color: #ff1f00;">9折</b>优惠。</p>',
+  6: '<p>无限制观看肿瘤学任意课程；</p><p>购买电子图书价格享受<b style="font-size: 16px; color: #ff1f00;">9折</b>优惠。</p>',
+  7: '<p>无限制观看国学任意课程；</p><p>购买电子图书价格享受<b style="font-size: 16px; color: #ff1f00;">9折</b>优惠。</p>',
+  8: '<p>无限制观看心理学任意课程；</p><p>购买电子图书价格享受<b style="font-size: 16px; color: #ff1f00;">9折</b>优惠。</p>',
+  9: '<p>无限制观看中医学板块任意课程；</p><p>购买电子图书价格享受<b style="font-size: 16px; color: #ff1f00;">9折</b>优惠。</p>'
+}
+
+// 获取VIP列表
+const list = ref<IVipItem[]>([])
+const getData = async () => {  
+  const res = await vipApi.getVipBuyConfigList()
+  list.value = res.res
+}
+onShow(() => {
+  getData()
+})
+
+// 商品选择
+const showGoodsSelector = ref(false)
+const goodsList = ref<IGoods[]>([])
+const selectedGoods = ref<IGoods | null>(null)
+
+/**
+ * 打开商品选择器
+ */
+const handlePurchase = async (item: IVipItem) => {
+  const currentVipProductList = item[item.state == null ? 'vcbList' : 'yanqiList']
+  goodsList.value = currentVipProductList.map((e: IVipItemProduct) => {
+    return { 
+      productId: e.id,
+      productName: `${e.title} ${e.year}年`,
+      price: item.state == null ? e.fee : e.rebateFee,
+      productImages: '/static/vip.png',
+      state: item.state,
+      orderType: 'vip'
+    }
+  })
+  showGoodsSelector.value = true
+}
+/**
+ * 关闭商品选择器
+ */
+const closeGoodsSelector = () => {
+  showGoodsSelector.value = false
+}
+
+// 处理选择商品
+const handleGoodsSelect = (data: IGoods) => {
+  selectedGoods.value = data
+}
+
+// 购买商品
+const handleGoodsConfirm = () => {
+  uni.navigateTo({
+    url: `/pages/order/vipConfirm`,
+    success: () => {
+      setTimeout(() => {
+        uni.$emit('selectedGoods', selectedGoods.value)
+      }, 100)
+    }
+  })
+}
+
+</script>
+
+<style lang="scss" scoped>
+.page-wrapper {
+  padding: 20rpx;
+}
+
+.info {
+  width: 100%;
+  padding: 20rpx 30rpx;
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0px 0px 5px 0px #a7bbe4;
+  margin-bottom: 20rpx;
+  position: relative;
+  font-size: 28rpx;
+
+  .info-row {
+    display: flex;
+    margin-bottom: 3px;
+    font-size: 28rpx;
+    line-height: 40rpx;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .info-label {
+    display: inline-block;
+    white-space: nowrap;
+    font-weight: bold;
+  }
+  .info-content {
+    display: inline-block;
+  }
+}
+
+.course-price {
+  font-size: 34rpx !important;
+  color: #258feb;
+  font-weight: bold;
+  text-decoration: line-through;
+  font-style: italic;
+  padding: 0 5rpx;
+}
+.vip-product {
+  display: inline-block;
+  color: #ff1f00;
+  border: 1rpx solid #ff1f00;
+  border-radius: 10rpx;
+  margin-right: 15rpx;
+  margin-bottom: 10rpx;
+  padding: 0 10rpx;
+}
+.vip-item-btn {
+  position: absolute !important;
+  right: 20rpx;
+  top: 20rpx;
+  padding: 2rpx 10rpx !important;
+  height: auto !important;
+  line-height: 1.5 !important;
+  border-radius: 5px !important;
+}
+.vip-item-title {
+  display: inline-block;
+  font-size: 24rpx;
+  font-weight: bold;
+  line-height: 1;
+  color: #fff;
+  padding: 10rpx 12rpx;
+  border-radius: 15rpx;
+  background-image: linear-gradient(90deg, #258feb 0%, #00e1ec 100%);
+}
+
+// 超级vip
+.vip-item-special {
+  .vip-item-title {
+    font-size: 26rpx;
+    background-image: linear-gradient(90deg, #ff1f00 0%, #fa9f93 100%);
+  }
+}
+// 已过期
+.vip-item-overdue{
+  background: rgba(220, 223, 225, 0.9) !important;
+  opacity: 0.75;
+  
+  .vip-item-title {
+    background-image: linear-gradient(90deg, #999 0%, #ccc 100%);
+    color: #000;
+  }
+}
+// 普通vip生效中
+.vip-item-ordinary-effective {
+  background-color: rgba(64, 148, 222, 0.3) !important;
+}
+// 超级vip生效中
+.vip-item-special-effective {
+  background: rgba(227, 120, 125, 0.3) !important;
+}
+</style>
--- a/stores/sys.ts
+++ b/stores/sys.ts
@@ -6,6 +6,16 @@ import type { IUserInfo } from '@/types/user'
 export const useSysStore = defineStore('sys', {
  state: (): IUserInfo => ({
    language: uni.getStorageSync('appLanguage') || 'zh-CN',
+    vipTypeDict: {
+      1: '医学超V',
+      2: '国学与心理学超V',
+      4: '中医学VIP',
+      5: '针灸学VIP',
+      6: '肿瘤学VIP',
+      7: '国学VIP',
+      8: '心理学VIP',
+      9: '中西汇通学VIP',
+    }
  }),

  getters: {
--- a/style/tailwind.css
+++ b/style/tailwind.css
@@ -9,6 +9,7 @@
      "Courier New", monospace;
    --color-red-500: oklch(63.7% 0.237 25.331);
    --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);
@@ -204,9 +205,18 @@
      max-width: 96rem;
    }
  }
+  .mr-1 {
+    margin-right: calc(var(--spacing) * 1);
+  }
+  .ml-1 {
+    margin-left: calc(var(--spacing) * 1);
+  }
  .ml-1\! {
    margin-left: calc(var(--spacing) * 1) !important;
  }
+  .ml-2 {
+    margin-left: calc(var(--spacing) * 2);
+  }
  .ml-2\.5\! {
    margin-left: calc(var(--spacing) * 2.5) !important;
  }
@@ -243,6 +253,9 @@
  .flex-shrink {
    flex-shrink: 1;
  }
+  .border-collapse {
+    border-collapse: collapse;
+  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
@@ -265,9 +278,18 @@
  .bg-\[transparent\] {
    background-color: transparent;
  }
+  .pt-1 {
+    padding-top: calc(var(--spacing) * 1);
+  }
+  .pt-10 {
+    padding-top: calc(var(--spacing) * 10);
+  }
  .pt-\[40px\] {
    padding-top: 40px;
  }
+  .pb-0 {
+    padding-bottom: calc(var(--spacing) * 0);
+  }
  .pb-0\! {
    padding-bottom: calc(var(--spacing) * 0) !important;
  }
@@ -277,6 +299,10 @@
  .text-right {
    text-align: right;
  }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
  .text-\[\#000\] {
    color: #000;
  }
@@ -299,6 +325,9 @@
    --tw-ordinal: ordinal;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
+  .underline {
+    text-decoration-line: underline;
+  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -368,6 +397,10 @@
  inherits: false;
  initial-value: solid;
 }
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
@@ -560,6 +593,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;
--- a/types/order.d.ts
+++ b/types/order.d.ts
@@ -4,15 +4,23 @@
 export interface IGoods {
  productId: number
  productName: string
-  productImages: string
+  productImages?: string
  price: number
-  vipPrice: number | null
-  activityPrice: number | null
-  isVipPrice: number               // 是否有VIP优惠 0-否 1-是
-  productAmount: number            // 购买数量
+  vipPrice?: number | null
+  activityPrice?: number | null
+  isVipPrice?: number               // 是否有VIP优惠 0-否 1-是
+  productAmount?: number            // 购买数量
  delFlag?: number                 // 删除标记 -1-已下架
 }

+/**
+ * 获取优惠价格参数
+ **/
+export interface IGoodsDiscountParams {
+  productId: number
+  quantity: number
+}
+
 /**
 * 订单接口
 */
@@ -31,12 +39,12 @@ export interface IOrder {
 export interface IOrderGoods {
  productId: number
  productName: string
-  productImages: string
+  productImages?: string
  price: number
-  vipPrice: number | null
-  activityPrice: number | null
-  isVipPrice: number          // 是否有VIP优惠 0-否 1-是
-  productAmount: number       // 购买数量
+  vipPrice?: number | null
+  activityPrice?: number | null
+  isVipPrice?: number          // 是否有VIP优惠 0-否 1-是
+  productAmount?: number       // 购买数量
  goodsType: string           // 商品类型 "05" for course
 }

--- a/types/vip.d.ts
+++ b/types/vip.d.ts
@@ -0,0 +1,27 @@
+/**
+ * vip套餐项
+ */
+export interface IVipItem {
+  courseCount: number | null // 课程数量
+  state: number | null // 状态 0：在有效期, 1：已过期, null: 未购买
+  originalPrice: number | null // 原价
+  title: string // 套餐名称
+  type: number
+  vcbList?: IVipItemProduct[] // 未办理过使用的商品列表
+  yanqiList?: IVipItemProduct[] // 延期使用商品列表
+  [key: string]: any
+}
+
+/**
+ * vip套餐项商品
+ */
+export interface IVipItemProduct {
+  id: number
+  type: number
+  title: string
+  year: number // vip年数
+  rebateFee: number | null, // 折扣后价格
+  fee: number | null, // 课程价格
+  lastFee?: number | null, // 未使用字段
+  [key: string]: any
+}
--- a/utils/index.ts
+++ b/utils/index.ts
@@ -1,6 +1,7 @@
 import { t } from '@/utils/i18n'
 /**
 * 页面跳转
+ * @param {string} path - 要跳转的页面路径
 */
 export const onPageJump = (path: string) => {
  uni.navigateTo({
@@ -17,6 +18,8 @@ export const onPageBack = () => {

 /**
 * 拨打电话
+ * @param {string} phoneNumber - 要拨打的电话号码
+ * @param {string} title - 拨打电话提示的标题，默认值为空字符串
 */
 export const makePhoneCall = (phoneNumber: string, title: string = '') => {
  uni.showModal({
@@ -42,6 +45,8 @@ export const makePhoneCall = (phoneNumber: string, title: string = '') => {

 /**
 * 复制到剪贴板
+ * @param {string} content - 要复制的内容
+ * @param {string} title - 复制成功提示的标题，默认值为空字符串
 */
 export const copyToClipboard = (content: string, title: string = '') => {
  uni.setClipboardData({
@@ -60,6 +65,8 @@ export const copyToClipboard = (content: string, title: string = '') => {

 /**
 * 计算最低价格
+ * @param {object} priceData - 价格数据对象，键为价格类型，值为价格
+ * @returns {object} - 包含最低价格的键值对，{ key: 价格类型, value: 最低价格 }
 */
 export const calculateLowestPrice = (priceData: object): { key: string, value: number } => {
  const validEntries = Object.entries(priceData)
@@ -74,4 +81,52 @@ export const calculateLowestPrice = (priceData: object): { key: string, value: n
    );
    
    return { key: minKey, value: minValue };
+}
+
+/**
+ * Parse the time to string
+ * @param {(Object|string|number)} time
+ * @param {string} cFormat
+ * @returns {string | null}
+ */
+export function parseTime(time: any, cFormat: string) {
+  if (arguments.length === 0 || !time) {
+    return null
+  }
+  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
+  let date
+  if (typeof time === 'object') {
+    date = time
+  } else {
+    if ((typeof time === 'string')) {
+      if ((/^[0-9]+$/.test(time))) {
+        // support "1548221490638"
+        time = parseInt(time)
+      } else {
+        // support safari
+        time = time.replace(new RegExp(/-/gm), '/')
+      }
+    }
+
+    if ((typeof time === 'number') && (time.toString().length === 10)) {
+      time = time * 1000
+    }
+    date = new Date(time)
+  }
+  const formatObj = {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    i: date.getMinutes(),
+    s: date.getSeconds(),
+    a: date.getDay()
+  }
+  const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
+    const value = formatObj[key as keyof typeof formatObj]
+    // Note: getDay() returns 0 on Sunday
+    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value as number] }
+    return value.toString().padStart(2, '0')
+  })
+  return time_str
 }