cxb-minapp-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";
const emit = defineEmits()
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  detail: {
    type: Object,
    required: true
  },
  sku: {
    type: Array,
    default: () => {
      return []
    }
  }
})
const show = ref(props.show || false)

const showValue = computed<PopupProps['show']>({
  get: () => props.show || show.value,
  set(val) {
    // console.log(val + 'xxxx')
    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]
      // if (skuItem.sku !== '') {
      skuData.push(skuItem)
      // }
      currentSku.value = skuData[0]
    }
  }
  return skuData
})

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

})

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

  emit(CLOSE_EVENT)
}

function handleAddCart() {
  emit('submit')
}
// function handleSelectedSku(item) {
//
// }

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-[40%] max-h-[80%]"

  >
    <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="detail.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" 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'">
                  {{ currentSku.ot_price * 30 }} 积分
                </div>
                <div class="flex items-end gap-2" v-else>
                  <FPrice :price="currentSku.price"/>
                  <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-[12px] border border-solid rounded p-1 px-2 "
                    :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 ">
        <FButton
            @click="handleAddCart"
            size="small"
            :exClass="['!bg-primary', 'rounded-full', 'text-white']"
            block
        >
          确定
        </FButton>

      </div>
    </div>

  </FPopup>
</template>