增加代客下单页面

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

@@ -0,0 +1,147 @@
+<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>库存：{{ 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%">确 定</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;
+  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;
+  });
+});
+
+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;
+}
+::v-deep .number-box .el-input__inner {
+  border: none;
+  padding: 0 4px;
+  text-align: center;
+}
+</style>