优化：商品及订单优惠价格；支付说明；

components/order/GoodsSelector.vue

@@ -2,18 +2,14 @@
   <wd-popup 
     v-model="visible" 
     position="bottom"
-    @close="handleClose"
   >
     <view class="goods-selector">
       <view v-if="selectedIndex !== -1" class="goods-info-mini">
         <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 +28,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 +45,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 +71,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)
-})
-
 /**
  * 选择商品
  */
@@ -135,13 +96,6 @@ const handleConfirm = () => {
   emit('confirm', props.goods[selectedIndex.value])
 }
 
-/**
- * 关闭选择器
- */
-const handleClose = () => {
-  emit('close')
-}
-
 // 监听显示状态，重置选择
 watch(() => props.show, (newVal: boolean) => {
   if (newVal && props.goods.length > 0) {
@@ -175,30 +129,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 +156,10 @@ watch(() => props.show, (newVal: boolean) => {
 
     .price-info {
       padding-top: 20rpx;
-    }
-    
-    .price {
-      font-size: 36rpx;
+
+      :deep(.price) {
+        font-size: 36rpx;
+      }
     }
   }
 }