taimed-international-app/components/order/Price.vue

<template>
  <view class="">
    <!-- 商品总价 -->
    <!-- <view class="price-item">
      <text class="label">{{ $t('order.totalPrice') }}</text>
      <text class="value">￥{{ totalPrice.toFixed(2) }}</text>
    </view> -->
    
    <!-- 优惠券 -->
    <!-- <view class="price-item" @click="showCouponPopup = true">
      <view class="label-row">
        <text class="label">{{ $t('order.coupon') }}</text>
      </view>
      <view class="value-row">
        <template v-if="!selectedCoupon">
          <view v-if="availableCouponCount > 0" class="coupon-badge">
            <text>{{ $t('order.couponCount', { count: availableCouponCount }) }}</text>
          </view>
          <text v-else-if="couponList.length === 0" class="unavailable-text">
            {{ $t('order.noCoupon') }}
          </text>
          <text v-else class="unavailable-text">
            {{ $t('order.unavailable') }}
          </text>
        </template>
        <template v-else>
          <text class="discount-value">-￥{{ selectedCoupon.couponEntity.couponAmount }}</text>
          <text class="reselect-btn">{{ $t('order.reselect') }}</text>
        </template>
        <image
          v-if="availableCouponCount > 0 || selectedCoupon"
          src="/static/icon/icon_right.png"
          class="arrow-icon"
        />
      </view>
    </view> -->
    
    <!-- 活动立减 -->
    <view v-if="hasActivityDiscount" class="price-item">
      <text class="label">{{ $t('order.activityDiscount') }}</text>
      <text class="discount-value">-￥{{ activityDiscountAmount.toFixed(2) }}</text>
    </view>
    
    <!-- VIP专享立减 -->
    <view v-if="vipPrice > 0" class="price-item">
      <view class="label-row">
        <text class="vip-icon">VIP</text>
        <text class="label">{{ $t('order.vipDiscount') }}</text>
      </view>
      <text class="discount-value">-￥{{ vipPrice.toFixed(2) }}</text>
    </view>
    
    <!-- 地区优惠 -->
    <view v-if="districtAmount > 0" class="price-item">
      <text class="label">{{ $t('order.districtDiscount') }}</text>
      <text class="discount-value">-￥{{ districtAmount.toFixed(2) }}</text>
    </view>
    
    <!-- 积分 -->
    <view v-if="initData && initData.user.jf > 0" class="price-item">
      <view class="label-row">
        <image src="/static/icon/jifen.png" class="icon-img" />
        <text class="label">{{ $t('order.points') }}</text>
        <text class="points-total">
          ({{ $t('order.allPoints') }}：{{ initData.user.jf }})
        </text>
      </view>
      <text class="discount-value">-￥{{ jfNumberShow }}</text>
    </view>
    
    <!-- 积分输入 -->
    <view v-if="initData && initData.user.jf > 0" class="points-input-section">
      <text class="points-label">
        {{ $t('order.maxPoints', { max: jfNumberMax }) }}
      </text>
      <view class="points-input-box">
        <wd-input
          v-model="jfNumber"
          type="number"
          :placeholder="$t('order.pointsPlaceholder')"
          @input="handlePointsInput"
          @clear="handlePointsClear"
          clearable
        />
      </view>
    </view>
    <wd-cell-group border class="p-0!">
      <wd-cell title="商品总价" :value="`${totalPrice.toFixed(2)}天医币`" />
      <wd-cell title="优惠券" :value="`-${selectedCoupon?.couponEntity?.couponAmount || 0}天医币`" />
      <wd-cell title="活动立减" :value="`-${selectedCoupon?.couponEntity?.couponAmount || 0}天医币`" />
      <wd-cell :value="`-${vipPrice.toFixed(2)}天医币`">
        <template #title><text class="text-[#f94f04] font-bold">VIP</text>专项立减</template>
      </wd-cell>
      <wd-cell title="地区优惠" :value="`-${selectedCoupon?.couponEntity?.couponAmount || 0}天医币`" />
    </wd-cell-group>
  </view>
</template>

<script lang="ts" setup>
const props = defineProps({
  value: {
    type: Number,
    default: 0
  },
  totalPrice: {
    type: Number,
    default: 0
  },
  vipPrice: {
    type: Number,
    default: 0
  }
})
</script>

<style lang="scss" scoped>
:deep(.wd-cell__wrapper) {
  padding: 5px 0;

  .wd-cell__title {
    color: #666;
  }
}
.price-section {
  .price-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15rpx 0;
    font-size: 28rpx;
    
    .label-row {
      display: flex;
      align-items: center;
      gap: 10rpx;
      
      .label {
        color: #666;
      }
      
      .vip-icon {
        padding: 2rpx 8rpx;
        background-color: #f94f04;
        color: #fff;
        font-size: 20rpx;
        border-radius: 4rpx;
        font-weight: bold;
      }
      
      .icon-img {
        width: 40rpx;
        height: 40rpx;
      }
      
      .points-total {
        font-size: 24rpx;
        color: #aaa;
      }
    }
    
    .label {
      color: #666;
    }
    
    .value {
      color: #333;
      font-weight: 500;
    }
    
    .value-row {
      display: flex;
      align-items: center;
      gap: 10rpx;
      
      .coupon-badge {
        padding: 4rpx 20rpx;
        background-color: #fceeeb;
        color: #ec4729;
        font-size: 24rpx;
        border-radius: 10rpx;
      }
      
      .unavailable-text {
        font-size: 24rpx;
        color: #999;
      }
      
      .reselect-btn {
        padding: 4rpx 12rpx;
        background-color: #fe6035;
        color: #fff;
        font-size: 24rpx;
        border-radius: 30rpx;
      }
      
      .arrow-icon {
        width: 24rpx;
        height: 24rpx;
      }
    }
    
    .discount-value {
      color: #fe6035;
      font-weight: 500;
    }
  }
  
  .points-input-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15rpx 0;
    margin-top: 10rpx;
    background-color: #f5f5f5;
    border-radius: 20rpx;
    padding: 20rpx;
    
    .points-label {
      font-size: 28rpx;
      color: #7dc1f0;
      font-weight: 600;
    }
    
    .points-input-box {
      width: 320rpx;
    }
  }
}
</style>