user_xiaochengxu_vue3/src/components/CXBSkuPopup/CXBSkuPopup.vue

<script setup lang="ts">
import FPopup from "~/components/FPopup/FPopup.vue";
import { CANCEL_EVENT, CONFIRM_EVENT } from "~/constants/event";
import FPrice from "~/components/FPrice/FPrice.vue";
import { SkuModel } from "~/apis/model/product.model";
import { computed } from "vue";
import { PopupProps } from "~/components/FPopup";
import { CLOSE_EVENT, OPEN_EVENT, UPDATE_SHOW_EVENT } from "~/components/constants";
import CXBButton from "~/components/CXBButton/CXBButton.vue";
import FButton from "~/components/FButton/FButton.vue";
import { findLast } from "lodash-es";
const emit = defineEmits()
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  detail: {
    type: Object,
    required: true
  },
  sku: {
    type: Array,
    default: () => {
      return []
    }
  },
  isTo: {
    type: Number,
    required: true
  }
})



const show = ref(props.show || false)

const showValue = computed<PopupProps['show']>({
  get: () => props.show || show.value,
  set(val) {
    if (val)
      emit(OPEN_EVENT)
    else
      emit(CLOSE_EVENT)
    show.value = val
    emit(UPDATE_SHOW_EVENT, val)
  },
})
const currentSku = ref(null)
const onConfirm = () => {
  show.value = false
  showValue.value = false
  console.log(showValue.value)
  emit(CONFIRM_EVENT)
}


const onCancel = () => {
  // show.value = false
  showValue.value = false

  emit(CANCEL_EVENT)
}
const count = ref(1)

const skuList = computed(() => {
  const skuData = []
  if (props.detail && props.detail.sku) {
    for (let key in props.detail.sku) {
      const skuItem: SkuModel = props.detail.sku[key]
      skuData.push(skuItem)
      if (skuItem.unique === props.detail.unique) {
        currentSku.value = skuItem
      }
    }
  }
  return skuData
})

// currentSku.value = findLast(skuList, (item) => {
//   return item.unique === props.detail.unique
// })

onMounted(() => {
  emit('selected:item', currentSku)

})

function handleSelectedSku(skuItem: any) {
  console.log(skuItem);

  currentSku.value = skuItem
  console.log('我是数据', currentSku.value);

  emit('selected:item', currentSku)
}
function handleClose() {
  showValue.value = false

  emit(CLOSE_EVENT)
}

function handleAddCart() {
  emit('submit')
}
function handleBuyNow() {
  emit('subBuy')
}
function handleJiaCart() {
  emit('subAdd')
}
function handleSubQg() {
  emit('subQg')
}

function handleCountChange(value) {
  emit('count-change', value)
}

</script>

<template>
  <FPopup v-model:show="showValue" @close="onCancel" position="bottom"
    exClass="rounded-rt-xl rounded-lt-xl flex flex-col pb-safe min-h-[55%] max-h-[70%] h-full">
    <div class="flex flex-col justify-between h-full">
      <div class="flex-1">
        <div class="p-3 flex flex-col gap-3">
          <div class="flex flex-row gap-3">
            <image :src="currentSku.image" v-if="currentSku" mode="aspectFit" class="w-25 h-25 rounded"></image>
            <div class="flex flex-col w-full">

              <div class="flex gap-2 justify-between w-full">
                <div class="text-overflow text-xs flex-1 line-clamp-2 h-fit" v-if="detail && detail.store_name">
                  {{ detail.store_name }}
                </div>
                <div @tap="handleClose" class="i-tabler-x w-5 h-5 text-gray-500"></div>
              </div>


              <div class="flex flex-col" v-if="currentSku">
                <div class="text-[12px] text-right text-gray-500 ">
                  剩余库存{{ currentSku.stock }}
                </div>
                <div class="flex items-end gap-2" v-if="detail.mer_id === '148'">
                  {{  Math.round(currentSku.price * 30) }} 积分
                </div>
                <div class="flex items-end gap-2" v-else>
                  <FPrice :price="detail.seckill_s==0? currentSku.price:currentSku.dacang" />
                  <FPrice v-if="currentSku.ot_price" :price="currentSku.ot_price"
                    :ex-class="'!text-black text-xs font-bold'" need-symbol strike-through />
                </div>
              </div>

            </div>
          </div>

          <!--          <template v-if="skuList && skuList.length > 0"></template>-->
          <!--          <scroll-view-->
          <!--              :scroll-y="true"-->
          <!--              class="h-20"-->
          <!--          >-->

          <div class="text-xs flex" v-if="skuList && skuList.length > 0">规格</div>
          <div class="flex flex-row gap-2  flex-wrap ">
            <div v-for="(item, index) in skuList" :key="index" @tap="handleSelectedSku(item)">
              <div v-if="item.sku && item.sku !== ''" class="text-[11px] border border-solid rounded p-1 px-1 "
                :class="currentSku.unique === item.unique ? 'border-primary text-primary' : 'border-gray-500 text-gray-500'">
                {{ item.sku }}

              </div>



            </div>
          </div>

          <!--          </scroll-view>-->
        </div>
        <div class="p-3">
          <div class="flex  justify-between text-sm">
            数量
            <nut-input-number v-model="count" @change="handleCountChange" />
          </div>


        </div>
      </div>

      <div class="px-3 pb-12" v-if="isTo == 1">
        <FButton @click="handleAddCart" size="small" :exClass="['!bg-primary', 'rounded-full', 'text-white']" block>
          确定
        </FButton>

      </div>
      <div class="px-3 pb-10" v-if="isTo == 4">
        <FButton @click="handleSubQg" size="small" :exClass="['!bg-primary', 'rounded-full', 'text-white']" block>
          立即抢购
        </FButton>

      </div>
      <div class="px-3 pb-10" v-if="isTo == 5">
        <FButton @click="handleAddCart" size="small" :exClass="['!bg-primary', 'rounded-full', 'text-white']" block>
          立即抢购
        </FButton>

      </div>
      <div class="px-3 pb-10" v-if="isTo == 3">
        <FButton @click="handleAddCart" size="small" :exClass="['!bg-primary', 'rounded-full', 'text-white']" block>
          立即兑换
        </FButton>

      </div>
      <div class="px-4 flex box_1 flex-row justify-between text-sm text-white gap-3 " v-if="isTo == 2">
        <button @click="handleJiaCart" size="small"
          class="bg-[#FFA319] rounded-full w-50 flex justify-center items-center h-9 clor">
          加入购物车
        </button>
        <button @click="handleBuyNow" size="small"
          class="bg-[#F94032] rounded-full w-50 flex justify-center items-center h-9 clor ">
          立即购买
        </button>

      </div>
    </div>

  </FPopup>
</template>
<style scoped>
.box_1 {
  padding-top: 10rpx;
  padding-bottom: 30rpx;
  border-top: 1px solid rgba(182, 185, 192, 50%);
}

.clor {
  color: aliceblue;
  font-size: 28rpx;
}
</style>