yshop-pro-uniapp/pages/goodsDetail/components/DetailInfoExhibition.vue

<!--
    @name: DetailInfoExhibition
    @author: kahu4
    @date: 2024-01-16 14:10
    @description：商品信息展示
    @update: 2024-01-16 14:10
-->
<script setup>
import { computed, onMounted, toRefs } from "vue";
import Common from "@/pages/goodsDetail/components/GoodsPrice/Common.vue";
import Activity from "@/pages/goodsDetail/components/GoodsPrice/Activity.vue";

const emits = defineEmits(['timeOver'])
/**
 * @property goodsDetail 商品信息
 * @property sku 商品sku信息（使用这个判断）
 */
const props = defineProps({
  goodsDetail: {
    type: Object,
    required: true
  },
  sku: {
    type: Object,
  }
})
const {goodsDetail, sku} = toRefs(props)

const goodsInDetail = computed(() => goodsDetail.value.storeInfo)

onMounted(() => {
  // console.log(goodsInDetail.value, sku.value)
})

// ========================== 活动属性相关 ==============================
/** 活动类型 1、拼团，2、秒杀，3、限时折扣 */
const activityType = computed(() => Number(sku.value && sku.value.campaignType))
const activityOldPrice = computed(() => (sku.value && sku.value.price || (goodsInDetail.value && goodsInDetail.value.otPrice)).toFixed(2))
const activityPrice = computed(() => (sku.value && sku.value.campaignPrice).toFixed(2))
/** 活动状态 0-未开始 1-进行中 2-已结束 3-预热*/
const activityState = computed(() => Number(sku.value && sku.value.campaignState))
const activityTime = computed(() => {
  // 判断状态
  if ([0, 3].includes(activityState.value)) {
    console.log('预热', sku.value.startTime)
    // 未开始、预热
    return sku.value && sku.value.startTime
  } else if ([1].includes(activityState.value)) {
    // 已经开始
    return sku.value && sku.value.endTime
  }
})
/** 是否是活动商品 */
const isActivity = computed(() => {
  if (!sku.value) return false
  return [1, 2, 3].includes(Number(sku.value.campaignType))
})
</script>

<template>
  <view
      class="goods-info"
      v-if="sku&&goodsInDetail">
    <!-- price row -->
    <!-- 普通商品 -->
    <Common
        v-if="!isActivity"
        :old-price="sku.otPrice||goodsInDetail.otPrice ||'0.00'"
        :price="sku.price || goodsInDetail.price || '0.00'"
    />
    <!-- 活动商品 -->
    <Activity
        v-else
        :type="activityType"
        :old-price="activityOldPrice"
        :price="activityPrice"
        :state="activityState"
        :time="activityTime"
        @time-over="emits('timeOver')"
    />
    <!-- name row -->
    <view class="name-row box">
      {{ goodsInDetail.storeName }}
    </view>
    <!-- label stock -->
    <view class="label-row box">
      <view class="label-col">
        <template v-if="false">
          <view class="label-item">
            多买优惠
          </view>
        </template>
      </view>
      <view class="stock-col">
        仅剩{{ isActivity ? sku.campaignStock : goodsInDetail.stock }}件
      </view>
    </view>
  </view>
</template>

<style
    lang="scss"
    scoped>
.goods-info {
  width: 100%;

  .box {
    width: 100%;
    @include usePadding(30, 30);
  }

  .name-row {
    padding-top: 10rpx;
    background: $white-color;
    font-weight: 500;
    font-size: 32rpx;
    word-break: break-all;
  }

  .label-row {
    font-size: 24rpx;
    background: $white-color;
    padding-top: 10rpx;
    @include useFlex(space-between, flex-start);

    .label-col {
      @include useFlex(flex-start, center);
      flex-wrap: wrap;
      gap: 10rpx;

      .label-item {
        flex-shrink: 0;
        color: $primary-color;
        border: 1rpx solid $primary-color;
        padding: 3rpx 6rpx;
        box-sizing: border-box;
      }
    }

    .stock-col {
      flex-shrink: 0;
      color: $tips-color;
    }
  }
}
</style>