cashier-web/src/views/tool/Instead/components/dialog-goods-sel.vue

<template>
  <!-- 选择规格 -->
  <el-dialog width="410px" :title="goods.name" v-model="show" @close="close">
    <div class="tag-group">
      <div class="tag-item" v-for="(item, key) in goods.selectSpecInfo" :key="key">
        <div class="tag-name">{{ key }}</div>
        <div>
          <span style="margin: 0 10px 10px 0" v-for="(val, valIndex) in item.list" :key="valIndex">
            <el-button
              plain
              :type="val === item.sel ? 'primary' : ''"
              :disabled="val.disabled"
              @click="changeSkuSel(key, val)"
            >
              {{ val }}
            </el-button>
          </span>
        </div>
      </div>
    </div>
    <template #footer>
      <template v-if="skuData">
        <div class="u-flex u-row-between">
          <div>
            <div class="price">￥ {{ skuData.salePrice }}</div>
            <div class="sku-group-text">
              <span>{{ skuName }}</span>
              <span>库存：{{ goods.stockNumber || 0 }}</span>
            </div>
          </div>
          <div class="u-flex">
            <el-input-number v-model="number" :min="skuData.suitNum"></el-input-number>
          </div>
        </div>
        <div class="u-flex" style="margin-top: 14px">
          <el-button v-if="!skuData.isGrounding" disabled style="width: 100%">已下架</el-button>
          <template v-else>
            <el-button type="primary" style="width: 100%" @click="confirm">确 定</el-button>
          </template>
        </div>
      </template>
      <div v-else>
        <el-button type="primary" style="width: 100%" disabled>确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup >
let show = ref(false);
// const props = defineProps({
//   goods: {
//     type: Object,
//     default: () => ({}),
//   },
// });

let number = ref(1);

const defaultGoods = { selectSpecInfo: {}, skuList: [] };
let goods = ref({ ...defaultGoods });

function resetData() {
  goods.value = { ...defaultGoods };
}

function changeSkuSel(key, val) {
  console.log(key, val);
  goods.value.selectSpecInfo[key].sel = val;
}

function open(data) {
  show.value = true;
  if (data) {
    let selectSpecInfo = {};
    for (let i in data.selectSpecInfo) {
      if (data.selectSpecInfo[i].length > 0) {
        selectSpecInfo[i] = {
          list: data.selectSpecInfo[i],
          sel: "",
          disabled: false,
        };
      }
    }
    goods.value = { ...data, selectSpecInfo };
    console.log(goods.value);
  }
}
function close() {
  show.value = false;
  number.value = 1;
  resetData();
}
const skuName = computed(() => {
  if (goods.value.selectSpecInfo) {
    let sku = [];
    for (let i in goods.value.selectSpecInfo) {
      sku.push(goods.value.selectSpecInfo[i].sel);
    }
    return sku.join(",");
  } else {
    return "";
  }
});

const skuData = computed(() => {
  if (goods.value.skuList.length <= 0) {
    return undefined;
  }
  return goods.value.skuList.find((item) => {
    return item.specInfo === skuName.value;
  });
});

watch(
  () => skuData.value,
  (newval) => {
    if (newval) {
      number.value = newval.suitNum;
    }
  }
);

const emits = defineEmits(["confirm"]);
function confirm() {
  if (skuData.value) {
    emits("confirm", {
      sku_id: skuData.value.id,
      product_id: goods.value.id,
      number: number.value,
      product_type: goods.value.type,
      suitNum: skuData.value.suitNum || 1,
    });
    close();
  }
}

defineExpose({ open, close });
</script>

<style scoped lang="scss">
.tag-group {
  margin-top: 10px;

  .tag-item {
    margin-bottom: 20px;

    .tag-name {
      margin-bottom: 10px;
      font-size: 12px;
      color: #999;
    }
  }
}
.price {
  font-size: 18px;
  text-align: left;
  color: #ff5152;
  font-weight: 600;
}
.sku-group-text {
  text-align: left;
  color: #666;
  font-size: 11px;
  margin-top: 2px;
}
:deep(.number-box .el-input__inner) {
  border: none;
  padding: 0 4px;
  text-align: center;
}
</style>