From 7d6f46454505dc212fdbf0627510b232db2efe27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=AE=87?= <2020377497@qq.com>
Date: Fri, 29 Dec 2023 17:50:43 +0800
Subject: [PATCH] upda

---
 store/goods/components/skuEdit.vue | 328 +++++++++++++++++++++++++++++
 store/goods/edit.vue               |  67 ++++--
 store/goods/index.vue              |   2 +-
 3 files changed, 379 insertions(+), 18 deletions(-)
 create mode 100644 store/goods/components/skuEdit.vue

diff --git a/store/goods/components/skuEdit.vue b/store/goods/components/skuEdit.vue
new file mode 100644
index 0000000..df49547
--- /dev/null
+++ b/store/goods/components/skuEdit.vue
@@ -0,0 +1,328 @@
+<template>
+  <view class="skuEdit">
+
+    <wd-table :data="skuLibrary" :stripe="false">
+      <wd-table-col prop="name" label="SKU">
+
+        <template #value="scope">
+          <view class="custom-class">
+            <span style="margin-right: 4px" v-for="(item, index) of scope.row
+              .attr_list" :key="index">
+              {{ item.name }}
+            </span>
+          </view>
+        </template>
+
+      </wd-table-col>
+      <wd-table-col prop="school" label="售价">
+        <template #value="scope">
+          <view class="px-2 pb-1 bg-white">
+            <wd-input placeholder="售价" v-model="scope.row.price" type="number" />
+          </view>
+        </template>
+      </wd-table-col>
+      <wd-table-col prop="major" label="原价">
+        <template #value="scope">
+          <view class="px-2 pb-1 bg-white">
+            <wd-input placeholder="原价" v-model="scope.row.original_price" type="number">
+            </wd-input>
+          </view>
+        </template>
+      </wd-table-col>
+      <wd-table-col prop="major" label="库存">
+        <template #value="scope">
+          <view class="px-2 pb-1 bg-white">
+            <wd-input placeholder="库存" v-model="scope.row.stock" type="number">
+            </wd-input>
+          </view>
+        </template>
+      </wd-table-col>
+      <wd-table-col prop="major" label="产品号">
+        <template #value="scope">
+          <view class="px-2 pb-1 bg-white">
+            <wd-input placeholder="产品号" v-model="scope.row.no">
+            </wd-input>
+          </view>
+        </template>
+      </wd-table-col>
+    </wd-table>
+
+    <view class="bg-gray-100  rounded mb-2">
+      <div class="p-2 bg-white w-full">
+        <div class="name mb-2 text-xs">规格设置</div>
+        <view class="flex bg-white px-3 py-1 rounded w-full">
+          <div class="flex-1 mr-4">
+            <wd-input type="text" v-model="addGroupData.name" />
+          </div>
+          <wd-button @click="addSkuGroup">添加规格组</wd-button>
+        </view>
+      </div>
+
+
+      <div class="p-2 bg-white">
+        <div style="display: flex; flex-flow: column; align-items: flex-start;">
+          <div class="name mb-2 text-xs">规格组</div>
+
+          <div class="w-full bg-gray-100 p-2" v-for="(item, index) in skuGroup" :key="index">
+            <div class="flex items-center justify-between w-full bg-white p-2">
+              <div class="mr-3">
+                <wd-tag type="primary" custom-class="space" closable @close="moveGroup(index)">{{
+                  item.name }}</wd-tag>
+              </div>
+              <div class="mr-3">
+                <wd-input type="text" v-model="addGouppItemData[index]" />
+              </div>
+              <wd-button type="warning" @click="addGroupItem(index)">添加规格</wd-button>
+            </div>
+            <div type="flex" style="margin: 12px 0;">
+              <div class="name mb-2 text-xs">规格:</div>
+              <view class="flex gap-2 flex-wrap">
+                <wd-tag custom-class="space1" closable round type="warning" class="mx-1"
+                  v-for="(value, key) in item.groupItem" :key="key" style="margin-left: 10px"
+                  @close="removeGroupItem(index, key)">{{ value.name
+                  }}</wd-tag>
+              </view>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </view>
+
+    <wd-toast />
+
+  </view>
+</template>
+
+<script>
+import { useToast } from '@/uni_modules/wot-design-uni'
+const toast = useToast()
+
+export default {
+  name: "skuEdit",
+  data() {
+    return {
+      // sku规格开始
+      skuDefault: [
+        {
+          attr_list: [{ group_name: "默认", name: "默认" }],
+          price: "", // 售价
+          original_price: "", // 原价
+          stock: "", // 库存
+          pic_url: "", // 图片
+          no: "", // 货号
+        },
+      ],
+      skuGroup: [],
+      addGroupData: {
+        name: "",
+        groupItem: [],
+      }, //添加规格组默认数据
+      addGouppItemData: [],
+      skuLibrary: [], // 规格库
+      // 批量设置
+      all_price: "",
+      all_original_price: "",
+      all_stock: "",
+      all_no: "",
+      // sku规格结束
+    }
+  },
+  methods: {
+    /**
+* 处理规格数据
+*/
+    setGoodsAttrItem(attrGroup, attrList, index) {
+      var attrList1 = [];
+      if (index < attrGroup.length) {
+        if (index === 0 || attrList.length === 0) {
+          if (attrGroup[index].groupItem.length > 0) {
+            attrGroup[index].groupItem.forEach((element) => {
+              element.group_name = attrGroup[index].name;
+              attrList1.push([element]);
+            });
+          }
+        } else {
+          if (attrGroup[index].groupItem.length > 0) {
+            attrList.forEach((element) => {
+              attrGroup[index].groupItem.forEach((element1) => {
+                element1.group_name = attrGroup[index].name;
+                attrList1.push(element.concat([element1]));
+              });
+            });
+          } else {
+            attrList1 = attrList;
+          }
+        }
+        ++index;
+        return this.setGoodsAttrItem(attrGroup, attrList1, index);
+      } else {
+        return attrList;
+      }
+    },
+
+    /**
+     * 获取其他详细数据
+     */
+    getAttrDataInfo(attr) {
+      var attrList = [];
+      attr.forEach((element) => {
+        var setAttr = {};
+        if (this.skuLibrary) {
+          this.skuLibrary.forEach((element2) => {
+            if (element2.attr_list.length === element.length) {
+              var loading = true;
+              if (
+                loading &&
+                this.compareAttr(element2.attr_list, element)
+              ) {
+                setAttr = element2;
+                loading = false;
+              }
+            }
+          });
+        }
+
+        var data = {
+          id: setAttr && setAttr.id ? setAttr.id : 0,
+          attr_list: element,
+          price: setAttr && setAttr.price ? setAttr.price : element.reduce((price, i) => price + i.price, 0).toFixed(2),
+          original_price:
+            setAttr && setAttr.original_price
+              ? setAttr.original_price
+              : element.reduce((price, i) => price + i.price, 0).toFixed(2),
+          stock: setAttr && setAttr.stock ? setAttr.stock : 0,
+          pic_url: setAttr && setAttr.pic_url ? setAttr.pic_url : "",
+          no: setAttr && setAttr.no ? setAttr.no : "",
+        };
+        for (const key in setAttr) {
+          if (key.indexOf("member") !== -1) {
+            data[key] = setAttr[key];
+          }
+        }
+        attrList.push(data);
+      });
+      return attrList;
+    },
+    compareAttr(val1, val2) {
+      var compareLen = 0;
+      val1.forEach((element1) => {
+        val2.forEach((element2) => {
+          if (element1.name === element2.name) {
+            compareLen++;
+          }
+        });
+      });
+      return compareLen === val1.length;
+    },
+    // 添加规格组
+    addSkuGroup() {
+      // 添加一个一个规格类
+      console.log("添加了一个规格组");
+      this.skuGroup.push(this.addGroupData);
+      console.log("skuGroup发生了变换");
+      // 回复默认数据
+      this.addGroupData = {
+        name: "",
+        groupItem: [],
+      };
+    },
+
+    // 删除规格组
+    moveGroup(index) {
+      if (this.skuGroup[index].groupItem.length === 0) {
+        console.log("删除的组合没有规格！！！");
+        this.skuGroup.splice(index, 1);
+
+        return
+      }
+
+      this.skuGroup.splice(index, 1);
+      var attrList = this.setGoodsAttrItem(this.skuGroup, [], 0);
+      this.skuLibrary = this.getAttrDataInfo(attrList);
+      this.calculateCombinationPrice(this.skuLibrary);
+    },
+    // 计算组合价格的方法
+    calculateCombinationPrice(skuLibrary) {
+      console.log(skuLibrary);
+      skuLibrary.forEach((sku) => {
+        // 计算每个 SKU 组合的价格
+        let combinationPrice = 0;
+
+        // 遍历 SKU 的属性列表
+        sku.attr_list.forEach((attr) => {
+          // 累加每个属性项的价格
+          combinationPrice += attr.price;
+        });
+
+        // 将组合价格保存到 SKU 对象中
+        sku.price = combinationPrice.toFixed(2);
+        sku.original_price = combinationPrice.toFixed(2);
+      });
+
+      this.skuLibrary = skuLibrary
+
+    },
+    // 添加规格
+    addGroupItem(index) {
+      const _skuGroup = this.skuGroup
+
+      if (this.skuGroup[index].groupItem.length === 0) {
+        console.log("新的组合出现了！！！");
+        // 计算组合价格
+        setTimeout(() => {
+          // console.log(this.skuGroup);
+          this.calculateCombinationPrice(this.skuLibrary);
+        });
+      } else {
+        console.log(_skuGroup);
+      }
+
+
+      if (!this.addGouppItemData[index]) {
+        toast.error('请填写规格名称!')
+        return
+      }
+
+      this.skuGroup[index].groupItem.push({
+        group_name: this.skuGroup[index].name,
+        name: this.addGouppItemData[index],
+        price: 0
+      });
+      console.log(this.skuGroup);
+
+      // todo 这里还有问题
+      var attrList = this.setGoodsAttrItem(this.skuGroup, [], 0);
+      console.log(attrList);
+      this.skuLibrary = this.getAttrDataInfo(attrList);
+      this.addGouppItemData = [];
+
+      // // 计算组合价格
+      // this.calculateCombinationPrice(this.skuLibrary);
+    },
+
+    // 删除规格
+    removeGroupItem(index, key) {
+      this.skuGroup[index].groupItem.splice(key, 1);
+      var attrList = this.setGoodsAttrItem(this.skuGroup, [], 0);
+      this.skuLibrary = this.getAttrDataInfo(attrList);
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.space) {
+  padding: 6px 10px;
+}
+
+:deep(.space1) {
+  padding: 6px 10px;
+  background: #f0883a !important;
+  color: white !important;
+
+  .wd-tag__close {
+    color: white;
+  }
+}
+</style>
diff --git a/store/goods/edit.vue b/store/goods/edit.vue
index bea6289..bec9966 100644
--- a/store/goods/edit.vue
+++ b/store/goods/edit.vue
@@ -1,5 +1,7 @@
 <template>
   <view class="content p-2 bg-gray-100">
+
+
     <wd-form ref="form" :model="model">
       <wd-cell-group border>
 
@@ -7,13 +9,13 @@
           <div class="bg-gray-100 rounded mb-2">
             <div class="bg-white flex flex-col pt-3 pl-3">
               <div class="name mb-2 text-xs">缩略图</div>
-              <wd-upload :file-list="fileList" :action="action" :formData="formData" :header="header"
-                @change="handleChange" name="image"></wd-upload>
+              <wd-upload :limit="1" :file-list="fileList" :action="action" :formData="formData" :header="header"
+                @success="successImage" name="image" :before-remove="beforeRemove"></wd-upload>
             </div>
           </div>
         </div>
 
-        <div class="bg-gray-100">
+        <!-- <div class="bg-gray-100">
           <div class="bg-gray-100 rounded mb-2">
             <div class="bg-white flex flex-col pt-3 pl-3">
               <div class="name mb-2 text-xs">商品主图</div>
@@ -21,7 +23,7 @@
                 @change="handleChange" name="image"></wd-upload>
             </div>
           </div>
-        </div>
+        </div> -->
 
         <view class="h-2 bg-gray-100"></view>
 
@@ -53,33 +55,44 @@
             <view class="text-xs from-neutral-300 ml-4">千克</view>
           </view>
 
-          <wd-picker class="w-full" :columns="freightRules" label="运费模板" v-model="model.freight_id"
-            @confirm="handleConfirm" />
+          <wd-picker class="w-full" :columns="freightRules" label="运费模板" v-model="model.freight_id" />
 
         </view>
 
+        <view class="h-2 bg-gray-100"></view>
 
+        <view class="p-3 rounded mb-2">
+          <div class="name mb-2 text-xs">商品状态</div>
+          <view class="bg-white px-3 py-2 rounded flex items-center mb-4">
+            <wd-switch v-model="model.status" />
+          </view>
+        </view>
+
+        <view class="h-2 bg-gray-100"></view>
 
+        <skuEdit></skuEdit>
 
       </wd-cell-group>
       <view class="footer mt-4">
-        <wd-button type="primary" size="large" @click="handleSubmit" block>保存</wd-button>
+        <wd-button type="primary" size="large" block>保存</wd-button>
       </view>
     </wd-form>
   </view>
 </template>
 
 <script setup>
-// const { success } = useToast()
 import { ref } from 'vue'
 import system from '@/api/modules/system.js'
 import goods from '@/api/store/goods.js'
+import { useToast, useMessage } from '@/uni_modules/wot-design-uni'
+import skuEdit from "./components/skuEdit.vue"
 
-const fileList = ref([
-  {
-    url: 'https://img12.360buyimg.com//n0/jfs/t1/29118/6/4823/55969/5c35c16bE7c262192/c9fdecec4b419355.jpg'
-  }
-])
+const fileList = ref([])
+
+const beforeRemove = ({ file, resolve, index }) => {
+  fileList.value.splice(index, 1)
+  resolve(true)
+}
 
 const action = 'https://saasdemo.byin.vip/admin/system/uploadImage'
 const token = uni.getStorageSync("token");
@@ -91,13 +104,33 @@ const formData = {
   type: "image",
 }
 
-function handleChange({ files }) {
-  fileList.value = files
+function successImage(e) {
+  fileList.value.push({
+    url: e.file.url
+  })
 }
 
 const model = ref({
-  value1: '',
-  value2: ''
+  classify_list: [], // 商品分类组
+  name: "", // 商品名称
+  keywords: "", // 商品关键词
+  sort: 1000,
+  status: 0, // 商品状态
+  freight_id: 0, //运费规则
+  weight: 0, // 商品重量
+  pic_url: "", // 商品缩略图
+  pic_list: [], // 商品图组
+  video: "", // 商品视频
+  detail: "", // 图文详情
+  use_sku: 0, // 是否使用规格
+  sku_list: [], // 规格信息
+  is_discount: 0, // 是否有折扣
+  discount: 50, // 折扣比例（小数）
+  dist_price: 0, // 分销价格
+  limit: 0, // 限购
+  is_check: 0, // 自定义核销佣金
+  check_type: 0, // 佣金类型
+  check_price: 0, // 佣金
 })
 
 const form = ref()
diff --git a/store/goods/index.vue b/store/goods/index.vue
index 090f9d7..83d6db3 100644
--- a/store/goods/index.vue
+++ b/store/goods/index.vue
@@ -48,7 +48,7 @@
 											style="margin-right: 8px;">下架</wd-button>
 										<wd-button @click="changeS(item)" v-if="item.status !== 1" size="small"
 											style="margin-right: 8px;">上架</wd-button>
-										<wd-button size="small">编辑</wd-button>
+										<wd-button @click="utils.toUrl('/store/goods/edit')" size="small">编辑</wd-button>
 									</view>
 								</template>
 							</wd-card>