多规格编辑

releaselog.md

@@ -1,4 +1,7 @@
 
+# 0.2.4 (20.11.18 19:00)
+### 多规格编辑
+
 # 0.2.3 (20.11.17 19:00)
 ### 修改bug
 

src/common/js/function.js

@@ -358,4 +358,14 @@ export default {
 
         return groups
     },
+
+    /**
+     * guid
+     */
+    guid() {
+        function S4() {
+            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+        }
+        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
+    },
 }

src/common/store/common.js

@@ -11,6 +11,7 @@ const module = {
         tabIndex:0,
         editClassify:null,  // manage/classify-form 编辑时保存的临时数据
         specData: null,   // manage/spec-edit 编辑时零时保存
+        skuItem: null,   // manage/spec-item-form 编辑时零时保存
     },
 
     // 同步方法

src/components/easy-upload/easy-upload.vue

@@ -106,9 +106,14 @@ export default {
             uploadUrl: process.env.VUE_APP_API_BASE_URL + "/Upload/Image",
         };
     },
+    mounted() {
+        this.uploads = [];
+        console.log(1);
+    },
     watch: {
         value: {
             handler(val) {
+                console.log("12", val);
                 this.uploads = val;
             },
             immediate: true,

src/pages/manage/add-good-form.vue

@@ -1,141 +1,6 @@
 <template>
     <div class="page" :class="{ 'page--iphoneX': iphoneX }">
-        <!-- 多规格 -->
-        <!-- <div class="form-card sepc-card">
-            <div class="head">
-                <div class="tit">规格</div>
-                <div class="switch">
-                </div>
-            </div>
-            <section class="form-item">
-                <div class="label">
-                    <span class="required">*</span>
-                    规格数目：
-                </div>
-                <div class="box">
-                    <ul class="spec-list">
-                        <li
-                            :class="{ on: specIndex === 0 }"
-                            @click="specClick(0)"
-                        >
-                            单品
-                        </li>
-                        <li
-                            :class="{ on: specIndex === 1 }"
-                            @click="specClick(1)"
-                        >
-                            一种
-                        </li>
-                        <li
-                            :class="{ on: specIndex === 2 }"
-                            @click="specClick(2)"
-                        >
-                            两种
-                        </li>
-                        <li
-                            :class="{ on: specIndex === 3 }"
-                            @click="specClick(3)"
-                        >
-                            三种
-                        </li>
-                    </ul>
-                </div>
-            </section>
-            <section
-                class="form-item"
-                v-if="specIndex === 1 || specIndex === 2 || specIndex === 3"
-            >
-                <div class="label">
-                    <span class="required">*</span>
-                    规格一：
-                </div>
-                <div class="box">
-                    <div class="spec-view" @click="specEdit(1)">
-                        <span class="text" :class="{ dis: !specData1 }">{{
-                            specData1 | arrView
-                        }}</span>
-                        <my-image
-                            class="spec-link"
-                            src="/static/common/arrows_left.png"
-                        ></my-image>
-                    </div>
-                </div>
-            </section>
-            <section
-                class="form-item"
-                v-if="specIndex === 2 || specIndex === 3"
-            >
-                <div class="label">
-                    <span class="required">*</span>
-                    规格二：
-                </div>
-                <div class="box">
-                    <div class="spec-view" @click="specEdit(2)">
-                        <span class="text" :class="{ dis: !specData2 }">{{
-                            specData2 | arrView
-                        }}</span>
-                        <my-image
-                            class="spec-link"
-                            src="/static/common/arrows_left.png"
-                        ></my-image>
-                    </div>
-                </div>
-            </section>
-            <section class="form-item" v-if="specIndex === 3">
-                <div class="label">
-                    <span class="required">*</span>
-                    规格三：
-                </div>
-                <div class="box">
-                    <div class="spec-view" @click="specEdit(3)">
-                        <span class="text" :class="{ dis: !specData3 }">{{
-                            specData3 | arrView
-                        }}</span>
-                        <my-image
-                            class="spec-link"
-                            src="/static/common/arrows_left.png"
-                        ></my-image>
-                    </div>
-                </div>
-            </section>
-
-            <section class="spec-item">
-                <div class="spec-head" @click="specForm()">
-                    <span class="name">组合一：红色,甜的</span>
-                    <my-image
-                        class="img"
-                        src="/static/common/arrows_left.png"
-                    ></my-image>
-                </div>
-                <div class="con">
-                    <div class="con-item">
-                        价格<span class="required">*</span>：10.0
-                    </div>
-                    <div class="con-item">
-                        库存<span class="required">*</span>：100
-                    </div>
-                </div>
-            </section>
-
-            <section class="spec-item">
-                <div class="spec-head" @click="specForm()">
-                    <span class="name">组合二：红色,甜的</span>
-                    <my-image
-                        class="img"
-                        src="/static/common/arrows_left.png"
-                    ></my-image>
-                </div>
-                <div class="con">
-                    <div class="con-item">
-                        价格<span class="required">*</span>：10.0
-                    </div>
-                    <div class="con-item">
-                        库存<span class="required">*</span>：100
-                    </div>
-                </div>
-            </section>
-        </div> -->
-
+        <!-- 基本信息 -->
         <div class="form-card">
             <div class="head">
                 <div class="tit">基本信息</div>
@@ -243,103 +108,222 @@
                 </div>
             </section>
         </div>
-        <div class="form-card">
+        <!-- 规格 -->
+        <div class="form-card sepc-card">
             <div class="head">
-                <div class="tit">规格库存</div>
+                <div class="tit">规格</div>
                 <div class="switch"></div>
             </div>
-
             <section class="form-item">
                 <div class="label">
                     <span class="required">*</span>
-                    价格：
+                    规格数目：
                 </div>
                 <div class="box">
-                    <input type="digit" v-model="baseInfo.price" />
-                </div>
-                <div class="tool">
-                    <span class="">元</span>
+                    <ul class="spec-list">
+                        <li
+                            :class="{ on: specIndex === 0 }"
+                            @click="specClick(0)"
+                        >
+                            单品
+                        </li>
+                        <li
+                            :class="{ on: specIndex === 1 }"
+                            @click="specClick(1)"
+                        >
+                            一种
+                        </li>
+                        <li
+                            :class="{ on: specIndex === 2 }"
+                            @click="specClick(2)"
+                        >
+                            两种
+                        </li>
+                        <li
+                            :class="{ on: specIndex === 3 }"
+                            @click="specClick(3)"
+                        >
+                            三种
+                        </li>
+                    </ul>
                 </div>
             </section>
-
-            <section class="form-item">
+            <section
+                class="form-item"
+                v-if="specIndex === 1 || specIndex === 2 || specIndex === 3"
+            >
                 <div class="label">
                     <span class="required">*</span>
-                    重量：
+                    规格一：
                 </div>
                 <div class="box">
-                    <input type="digit" v-model="baseInfo.weight" />
-                </div>
-                <div class="tool">
-                    <span class="">克</span>
+                    <div class="spec-view" @click="specEdit(1)">
+                        <span class="text" :class="{ dis: !specData1 }">{{
+                            specData1 | arrView
+                        }}</span>
+                        <my-image
+                            class="spec-link"
+                            src="/static/common/arrows_left.png"
+                        ></my-image>
+                    </div>
                 </div>
             </section>
-
-            <section class="form-item">
+            <section
+                class="form-item"
+                v-if="specIndex === 2 || specIndex === 3"
+            >
                 <div class="label">
                     <span class="required">*</span>
-                    库存：
+                    规格二：
                 </div>
                 <div class="box">
-                    <input type="digit" v-model="baseInfo.stock" />
+                    <div class="spec-view" @click="specEdit(2)">
+                        <span class="text" :class="{ dis: !specData2 }">{{
+                            specData2 | arrView
+                        }}</span>
+                        <my-image
+                            class="spec-link"
+                            src="/static/common/arrows_left.png"
+                        ></my-image>
+                    </div>
                 </div>
             </section>
-
-            <section class="form-item">
+            <section class="form-item" v-if="specIndex === 3">
                 <div class="label">
                     <span class="required">*</span>
-                    sku编码：
+                    规格三：
                 </div>
                 <div class="box">
-                    <input type="digit" v-model="baseInfo.skuCode" />
-                </div>
-                <div class="tool code-tool">
-                    <span class="generate" @click="generateCode('skuCode')"
-                        >生成</span
-                    >
+                    <div class="spec-view" @click="specEdit(3)">
+                        <span class="text" :class="{ dis: !specData3 }">{{
+                            specData3 | arrView
+                        }}</span>
+                        <my-image
+                            class="spec-link"
+                            src="/static/common/arrows_left.png"
+                        ></my-image>
+                    </div>
                 </div>
             </section>
 
-            <section class="form-item">
-                <div class="label">
-                    <span class="required hide">*</span>
-                    进货价：
-                </div>
-                <div class="box">
-                    <input type="digit" v-model="baseInfo.supplyPrice" />
-                </div>
-                <div class="tool">
-                    <span class="">元</span>
-                </div>
-            </section>
+            <!-- 单品 -->
+            <black v-if="specIndex === 0">
+                <section class="form-item">
+                    <div class="label">
+                        <span class="required">*</span>
+                        价格：
+                    </div>
+                    <div class="box">
+                        <input type="digit" v-model="baseInfo.price" />
+                    </div>
+                    <div class="tool">
+                        <span class="">元</span>
+                    </div>
+                </section>
+                <section class="form-item">
+                    <div class="label">
+                        <span class="required hide">*</span>
+                        进货价：
+                    </div>
+                    <div class="box">
+                        <input type="digit" v-model="baseInfo.supplyPrice" />
+                    </div>
+                    <div class="tool">
+                        <span class="">元</span>
+                    </div>
+                </section>
 
-            <section class="form-item">
-                <div class="label">
-                    <span class="required hide">*</span>
-                    成本：
-                </div>
-                <div class="box">
-                    <input type="digit" v-model="baseInfo.cost" />
-                </div>
-                <div class="tool">
-                    <span class="">元</span>
-                </div>
-            </section>
+                <section class="form-item">
+                    <div class="label">
+                        <span class="required hide">*</span>
+                        成本：
+                    </div>
+                    <div class="box">
+                        <input type="digit" v-model="baseInfo.cost" />
+                    </div>
+                    <div class="tool">
+                        <span class="">元</span>
+                    </div>
+                </section>
+                <section class="form-item">
+                    <div class="label">
+                        <span class="required hide">*</span>
+                        划线价：
+                    </div>
+                    <div class="box">
+                        <input type="digit" v-model="baseInfo.tagPrice" />
+                    </div>
+                    <div class="tool">
+                        <span class="">元</span>
+                    </div>
+                </section>
+                <section class="form-item">
+                    <div class="label">
+                        <span class="required">*</span>
+                        重量：
+                    </div>
+                    <div class="box">
+                        <input type="digit" v-model="baseInfo.weight" />
+                    </div>
+                    <div class="tool">
+                        <span class="">克</span>
+                    </div>
+                </section>
 
-            <section class="form-item">
-                <div class="label">
-                    <span class="required hide">*</span>
-                    划线价：
-                </div>
-                <div class="box">
-                    <input type="digit" v-model="baseInfo.tagPrice" />
-                </div>
-                <div class="tool">
-                    <span class="">元</span>
-                </div>
-            </section>
-        </div>
+                <section class="form-item">
+                    <div class="label">
+                        <span class="required">*</span>
+                        库存：
+                    </div>
+                    <div class="box">
+                        <input type="number" v-model="baseInfo.stock" />
+                    </div>
+                </section>
 
+                <section class="form-item">
+                    <div class="label">
+                        <span class="required">*</span>
+                        sku编码：
+                    </div>
+                    <div class="box">
+                        <input type="digit" v-model="baseInfo.skuCode" />
+                    </div>
+                    <div class="tool code-tool">
+                        <span class="generate" @click="generateCode('skuCode')"
+                            >生成</span
+                        >
+                    </div>
+                </section>
+            </black>
+            <black v-if="specIndex !== 0">
+                <section
+                    class="spec-item"
+                    v-for="item of skuTableData"
+                    :key="item.key"
+                >
+                    <div class="spec-head" @click="specForm(item)">
+                        <span class="name">组合一：{{ item.key }}</span>
+                        <my-image
+                            class="img"
+                            src="/static/common/arrows_left.png"
+                        ></my-image>
+                    </div>
+                    <div class="con">
+                        <div class="con-item">
+                            价格<span class="required">*</span>：{{
+                                item.price
+                            }}
+                        </div>
+                        <div class="con-item">
+                            库存<span class="required">*</span>：{{
+                                item.stock
+                            }}
+                        </div>
+                    </div>
+                </section>
+            </black>
+        </div>
+        <!-- 图片 -->
         <div class="form-card img-card">
             <section class="form-img-item">
                 <div class="tit"><span class="required">*</span>封面图</div>
@@ -377,7 +361,7 @@
                 </div>
             </section>
         </div>
-
+        <!-- 其他 -->
         <div class="form-card">
             <div class="head">
                 <div class="tit">其他信息</div>
@@ -574,10 +558,12 @@ export default {
 
             // 规格
             specIndex: 0,
-            specData1: null, // {name,list}
-            specData2: null, // {name,list}
-            specData3: null, // {name,list}
+            specData1: null, // {name,list,columnName}
+            specData2: null, // {name,list,columnName}
+            specData3: null, // {name,list,columnName}
             curSpecIndex: 0, // 当前编辑specData
+            skuTableData: [], // sku表格数据  详情见initSkuTable
+            skuAttrs: {}, // sku后台保存用
         };
     },
     onLoad() {
@@ -595,7 +581,7 @@ export default {
 
     async onShow() {
         // 规格设置
-        console.log(this.$store.state.common.specData);
+        console.log("specData", this.$store.state.common.specData);
         if (this.$store.state.common.specData) {
             switch (this.curSpecIndex) {
                 case 1:
@@ -608,6 +594,28 @@ export default {
                     this.specData3 = this.$store.state.common.specData;
                     break;
             }
+            this.$store.commit("common/update", {
+                specData: null,
+            });
+            this.initSkuTable();
+        }
+
+        // sku值
+        console.log("skuItem", this.$store.state.common.skuItem);
+        if (this.$store.state.common.skuItem) {
+            let d = this.$store.state.common.skuItem;
+            let arr = [];
+            for (let item of this.skuTableData) {
+                if (item.key === d.key) {
+                    arr.push(d);
+                } else {
+                    arr.push(item);
+                }
+            }
+            this.$store.commit("common/update", {
+                skuItem: null,
+            });
+            this.skuTableData = arr;
         }
     },
 
@@ -652,14 +660,18 @@ export default {
                 scanType: "barCode",
                 success(res) {
                     console.log("扫码", res);
-                    let code = res.result;
-                    self.baseInfo.barCode = code;
-                    self.baseInfo.code = code;
-                    self.baseInfo.skuCode = code;
-                    uni.showLoading({
-                        title: "识别条码中...",
-                    });
-                    self.getBarCodeGood();
+                    if (res.scanType === "EAN_13") {
+                        let code = res.result;
+                        self.baseInfo.barCode = code;
+                        self.baseInfo.code = code;
+                        self.baseInfo.skuCode = code;
+                        uni.showLoading({
+                            title: "识别条码中...",
+                        });
+                        self.getBarCodeGood();
+                    } else {
+                        self.fn.showToast("扫码失败,不是有效条码,请重新扫描");
+                    }
                 },
                 fail(res) {
                     self.fn.showToast("扫码失败");
@@ -763,6 +775,17 @@ export default {
                 this.baseInfo.skuCode = this.baseInfo.barCode;
             }
 
+            // 多规格还原
+            this.specClick(0);
+            this.specData1 = null;
+            this.specData2 = null;
+            this.specData3 = null;
+            this.curSpecIndex = 0;
+            this.skuTableData = [];
+            this.skuAttrs = {};
+
+            console.log(this.baseInfo);
+
             this.$forceUpdate();
         },
 
@@ -898,6 +921,12 @@ export default {
                     type: "array",
                     msg: "请选择分类",
                 },
+                {
+                    key: "mainImage",
+                    msg: "请上传封面图",
+                },
+            ];
+            let requiredSku = [
                 {
                     key: "price",
                     msg: "请输入价格",
@@ -916,10 +945,6 @@ export default {
                     key: "skuCode",
                     msg: "请输入sku编码",
                 },
-                {
-                    key: "mainImage",
-                    msg: "请上传封面图",
-                },
             ];
             let requiredFile2 = [
                 {
@@ -940,11 +965,10 @@ export default {
                         return this.fn.showToast(item.msg);
                     }
                 } else if (item.type === "number") {
-                    if (
-                        !this.baseInfo[item.key] &&
-                        this.baseInfo[item.key] != 0
-                    ) {
-                        return this.fn.showToast(item.msg);
+                    if (!this.baseInfo[item.key]) {
+                        if (String(this.baseInfo[item.key]) !== "0") {
+                            return this.fn.showToast(item.msg);
+                        }
                     }
                 } else {
                     if (!this.baseInfo[item.key]) {
@@ -959,11 +983,10 @@ export default {
                         return this.fn.showToast(item.msg);
                     }
                 } else if (item.type === "number") {
-                    if (
-                        !this.baseInfo[item.key] &&
-                        this.baseInfo[item.key] != 0
-                    ) {
-                        return this.fn.showToast(item.msg);
+                    if (!this.productForm[item.key]) {
+                        if (String(this.productForm[item.key]) !== "0") {
+                            return this.fn.showToast(item.msg);
+                        }
                     }
                 } else {
                     if (!this.productForm[item.key]) {
@@ -971,6 +994,43 @@ export default {
                     }
                 }
             }
+            // 规格判断
+            let skuInfo = "";
+            if (this.specIndex === 0) {
+                for (let item of requiredSku) {
+                    if (item.type === "array") {
+                        if (this.productForm[item.key].length === 0) {
+                            return this.fn.showToast(item.msg);
+                        }
+                    } else if (item.type === "number") {
+                        if (!this.baseInfo[item.key]) {
+                            if (String(this.baseInfo[item.key]) !== "0") {
+                                return this.fn.showToast(item.msg);
+                            }
+                        }
+                    } else {
+                        if (!this.productForm[item.key]) {
+                            return this.fn.showToast(item.msg);
+                        }
+                    }
+                }
+            } else {
+                if (this.skuTableData.length === 0) {
+                    return this.fn.showToast("请先选择规格");
+                }
+                // 价格转换
+                let arr = JSON.parse(JSON.stringify(this.skuTableData));
+                for (let item of arr) {
+                    item.price = parseInt(Number(item.price) * 100);
+                    item.supplyPrice = parseInt(Number(item.supplyPrice) * 100);
+                    item.cost = parseInt(Number(item.cost) * 100);
+                    item.tagPrice = parseInt(Number(item.tagPrice) * 100);
+                }
+                skuInfo = JSON.stringify({
+                    skuAttrs: this.skuAttrs,
+                    skus: arr,
+                });
+            }
 
             let sendData = {
                 baseInfo: {
@@ -981,14 +1041,24 @@ export default {
                 businessRecommendIds: [],
                 participated: false,
                 video: "",
+                skuInfo: skuInfo,
             };
+            //规格判断
+            if (this.specIndex === 0) {
+                sendData.baseInfo.price = parseInt(
+                    Number(sendData.baseInfo.price) * 100
+                );
+                sendData.baseInfo.supplyPrice = parseInt(
+                    Number(sendData.baseInfo.supplyPrice) * 100
+                );
+                sendData.baseInfo.cost = parseInt(
+                    Number(sendData.baseInfo.cost) * 100
+                );
+                sendData.baseInfo.tagPrice = parseInt(
+                    Number(sendData.baseInfo.tagPrice) * 100
+                );
+            }
 
-            sendData.baseInfo.price = Number(sendData.baseInfo.price) * 100;
-            sendData.baseInfo.supplyPrice =
-                Number(sendData.baseInfo.supplyPrice) * 100;
-            sendData.baseInfo.cost = Number(sendData.baseInfo.cost) * 100;
-            sendData.baseInfo.tagPrice =
-                Number(sendData.baseInfo.tagPrice) * 100;
             this.api.post("/product/SaveEdit", sendData).then((res) => {
                 if (res.success) {
                     if (type === "next") {
@@ -1049,6 +1119,15 @@ export default {
                 this.baseInfo.storeId = this.$store.state.common.manageShop.id;
                 this.baseInfo._storeName = this.$store.state.common.manageShop.name;
             }
+
+            this.specIndex = 0;
+            this.specData1 = null;
+            this.specData2 = null;
+            this.specData3 = null;
+            this.curSpecIndex = 0;
+            this.skuTableData = [];
+            this.skuAttrs = {};
+
             uni.pageScrollTo({
                 scrollTop: 0,
             });
@@ -1063,6 +1142,9 @@ export default {
                     this.specData1 = null;
                     this.specData2 = null;
                     this.specData3 = null;
+                    this.skuTableData = [];
+                    this.skuAttrs = {};
+                    this.curSpecIndex = 0;
                     break;
                 case 1:
                     this.specData2 = null;
@@ -1072,6 +1154,15 @@ export default {
                     this.specData3 = null;
                     break;
             }
+            if (index !== 0) {
+                this.baseInfo.price = 0;
+                this.baseInfo.supplyPrice = 0;
+                this.baseInfo.cost = 0;
+                this.baseInfo.tagPrice = 0;
+                this.baseInfo.weight = 0;
+                this.baseInfo.stock = 0;
+                this.baseInfo.skuCode = "";
+            }
         },
 
         // 规格设置
@@ -1098,9 +1189,106 @@ export default {
         },
 
         // 规格表单
-        specForm(){
+        specForm(item) {
+            console.log(item);
+            this.$store.commit("common/update", {
+                skuItem: item,
+            });
             this.router.push("/pages/manage/spec-item-form");
-        }
+        },
+
+        // 生成skuTable
+        initSkuTable() {
+            let arr = [];
+            let skuAttrs = {};
+            if (this.specData1) {
+                for (let item of this.specData1.list) {
+                    if (this.specData2) {
+                        for (let item2 of this.specData2.list) {
+                            if (this.specData3) {
+                                for (let item3 of this.specData3.list) {
+                                    let tabItem = this.initSkuItem({
+                                        key: item + "-" + item2 + "-" + item3,
+                                        [this.specData1.columnName]: item,
+                                        [this.specData2.columnName]: item2,
+                                        [this.specData3.columnName]: item3,
+                                    });
+                                    skuAttrs[
+                                        this.specData1.columnName
+                                    ] = this.specData1.name;
+                                    skuAttrs[
+                                        this.specData2.columnName
+                                    ] = this.specData2.name;
+                                    skuAttrs[
+                                        this.specData3.columnName
+                                    ] = this.specData3.name;
+                                    arr.push(tabItem);
+                                }
+                            } else {
+                                let tabItem = this.initSkuItem({
+                                    key: item + "-" + item2,
+                                    [this.specData1.columnName]: item,
+                                    [this.specData2.columnName]: item2,
+                                });
+                                skuAttrs[
+                                    this.specData1.columnName
+                                ] = this.specData1.name;
+                                skuAttrs[
+                                    this.specData2.columnName
+                                ] = this.specData2.name;
+                                arr.push(tabItem);
+                            }
+                        }
+                    } else {
+                        let tabItem = this.initSkuItem({
+                            key: item,
+                            [this.specData1.columnName]: item,
+                        });
+                        skuAttrs[
+                            this.specData1.columnName
+                        ] = this.specData1.name;
+                        arr.push(tabItem);
+                    }
+                }
+            }
+
+            let arr2 = [];
+            for (let item of arr) {
+                let f = false;
+                for (let skuItem of this.skuTableData) {
+                    if (item.key === skuItem.key) {
+                        arr2.push(skuItem);
+                        f = true;
+                    }
+                }
+                if (!f) {
+                    arr2.push(item);
+                }
+            }
+            this.skuTableData = arr2;
+            this.skuAttrs = skuAttrs;
+        },
+
+        // 生成sku某一项
+        initSkuItem(obj = {}) {
+            //
+            //this.fn.guid()
+            return {
+                code: String(Date.now()), // 编码
+                cost: 0, // 成本
+                img:
+                    "https://oss.ixiaokejia.com/images/common/20201021094129.png", // sku图
+                key: "", //关键字
+                order: 0, // 顺序
+                price: 0,
+                skuId: "",
+                stock: 0, // 库存
+                supplyPrice: 0, // 进货价
+                tagPrice: 0, // 标签价
+                weight: 0, // 重量
+                ...obj,
+            };
+        },
     },
 
     // 数据计算
@@ -1363,7 +1551,7 @@ button::before {
         color: #333;
     }
 }
-.sepc-card{
+.sepc-card {
     padding-bottom: px(30);
 }
 </style>

src/pages/manage/edit-good-form.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="page" :class="{ 'page--iphoneX': iphoneX }">
+        <!-- 基本 -->
         <div class="form-card">
             <div class="head">
                 <div class="tit">基本信息</div>
@@ -107,103 +108,222 @@
                 </div>
             </section>
         </div>
-        <div class="form-card">
+        <!-- 规格 -->
+        <div class="form-card sepc-card">
             <div class="head">
-                <div class="tit">规格库存</div>
+                <div class="tit">规格</div>
                 <div class="switch"></div>
             </div>
-
             <section class="form-item">
                 <div class="label">
                     <span class="required">*</span>
-                    价格：
+                    规格数目：
                 </div>
                 <div class="box">
-                    <input type="digit" v-model="baseInfo.price" />
-                </div>
-                <div class="tool">
-                    <span class="">元</span>
+                    <ul class="spec-list">
+                        <li
+                            :class="{ on: specIndex === 0 }"
+                            @click="specClick(0)"
+                        >
+                            单品
+                        </li>
+                        <li
+                            :class="{ on: specIndex === 1 }"
+                            @click="specClick(1)"
+                        >
+                            一种
+                        </li>
+                        <li
+                            :class="{ on: specIndex === 2 }"
+                            @click="specClick(2)"
+                        >
+                            两种
+                        </li>
+                        <li
+                            :class="{ on: specIndex === 3 }"
+                            @click="specClick(3)"
+                        >
+                            三种
+                        </li>
+                    </ul>
                 </div>
             </section>
-
-            <section class="form-item">
+            <section
+                class="form-item"
+                v-if="specIndex === 1 || specIndex === 2 || specIndex === 3"
+            >
                 <div class="label">
                     <span class="required">*</span>
-                    重量：
+                    规格一：
                 </div>
                 <div class="box">
-                    <input type="digit" v-model="baseInfo.weight" />
-                </div>
-                <div class="tool">
-                    <span class="">克</span>
+                    <div class="spec-view" @click="specEdit(1)">
+                        <span class="text" :class="{ dis: !specData1 }">{{
+                            specData1 | arrView
+                        }}</span>
+                        <my-image
+                            class="spec-link"
+                            src="/static/common/arrows_left.png"
+                        ></my-image>
+                    </div>
                 </div>
             </section>
-
-            <section class="form-item">
+            <section
+                class="form-item"
+                v-if="specIndex === 2 || specIndex === 3"
+            >
                 <div class="label">
                     <span class="required">*</span>
-                    库存：
+                    规格二：
                 </div>
                 <div class="box">
-                    <input type="digit" v-model="baseInfo.stock" />
+                    <div class="spec-view" @click="specEdit(2)">
+                        <span class="text" :class="{ dis: !specData2 }">{{
+                            specData2 | arrView
+                        }}</span>
+                        <my-image
+                            class="spec-link"
+                            src="/static/common/arrows_left.png"
+                        ></my-image>
+                    </div>
                 </div>
             </section>
-
-            <section class="form-item">
+            <section class="form-item" v-if="specIndex === 3">
                 <div class="label">
                     <span class="required">*</span>
-                    sku编码：
+                    规格三：
                 </div>
                 <div class="box">
-                    <input type="digit" v-model="baseInfo.skuCode" />
-                </div>
-                <div class="tool code-tool">
-                    <span class="generate" @click="generateCode('skuCode')"
-                        >生成</span
-                    >
+                    <div class="spec-view" @click="specEdit(3)">
+                        <span class="text" :class="{ dis: !specData3 }">{{
+                            specData3 | arrView
+                        }}</span>
+                        <my-image
+                            class="spec-link"
+                            src="/static/common/arrows_left.png"
+                        ></my-image>
+                    </div>
                 </div>
             </section>
 
-            <section class="form-item">
-                <div class="label">
-                    <span class="required hide">*</span>
-                    进货价：
-                </div>
-                <div class="box">
-                    <input type="digit" v-model="baseInfo.supplyPrice" />
-                </div>
-                <div class="tool">
-                    <span class="">元</span>
-                </div>
-            </section>
+            <!-- 单品 -->
+            <black v-if="specIndex === 0">
+                <section class="form-item">
+                    <div class="label">
+                        <span class="required">*</span>
+                        价格：
+                    </div>
+                    <div class="box">
+                        <input type="digit" v-model="baseInfo.price" />
+                    </div>
+                    <div class="tool">
+                        <span class="">元</span>
+                    </div>
+                </section>
+                <section class="form-item">
+                    <div class="label">
+                        <span class="required hide">*</span>
+                        进货价：
+                    </div>
+                    <div class="box">
+                        <input type="digit" v-model="baseInfo.supplyPrice" />
+                    </div>
+                    <div class="tool">
+                        <span class="">元</span>
+                    </div>
+                </section>
 
-            <section class="form-item">
-                <div class="label">
-                    <span class="required hide">*</span>
-                    成本：
-                </div>
-                <div class="box">
-                    <input type="digit" v-model="baseInfo.cost" />
-                </div>
-                <div class="tool">
-                    <span class="">元</span>
-                </div>
-            </section>
+                <section class="form-item">
+                    <div class="label">
+                        <span class="required hide">*</span>
+                        成本：
+                    </div>
+                    <div class="box">
+                        <input type="digit" v-model="baseInfo.cost" />
+                    </div>
+                    <div class="tool">
+                        <span class="">元</span>
+                    </div>
+                </section>
+                <section class="form-item">
+                    <div class="label">
+                        <span class="required hide">*</span>
+                        划线价：
+                    </div>
+                    <div class="box">
+                        <input type="digit" v-model="baseInfo.tagPrice" />
+                    </div>
+                    <div class="tool">
+                        <span class="">元</span>
+                    </div>
+                </section>
+                <section class="form-item">
+                    <div class="label">
+                        <span class="required">*</span>
+                        重量：
+                    </div>
+                    <div class="box">
+                        <input type="digit" v-model="baseInfo.weight" />
+                    </div>
+                    <div class="tool">
+                        <span class="">克</span>
+                    </div>
+                </section>
 
-            <section class="form-item">
-                <div class="label">
-                    <span class="required hide">*</span>
-                    划线价：
-                </div>
-                <div class="box">
-                    <input type="digit" v-model="baseInfo.tagPrice" />
-                </div>
-                <div class="tool">
-                    <span class="">元</span>
-                </div>
-            </section>
-        </div>
+                <section class="form-item">
+                    <div class="label">
+                        <span class="required">*</span>
+                        库存：
+                    </div>
+                    <div class="box">
+                        <input type="number" v-model="baseInfo.stock" />
+                    </div>
+                </section>
 
+                <section class="form-item">
+                    <div class="label">
+                        <span class="required">*</span>
+                        sku编码：
+                    </div>
+                    <div class="box">
+                        <input type="digit" v-model="baseInfo.skuCode" />
+                    </div>
+                    <div class="tool code-tool">
+                        <span class="generate" @click="generateCode('skuCode')"
+                            >生成</span
+                        >
+                    </div>
+                </section>
+            </black>
+            <black v-if="specIndex !== 0">
+                <section
+                    class="spec-item"
+                    v-for="item of skuTableData"
+                    :key="item.key"
+                >
+                    <div class="spec-head" @click="specForm(item)">
+                        <span class="name">组合一：{{ item.key }}</span>
+                        <my-image
+                            class="img"
+                            src="/static/common/arrows_left.png"
+                        ></my-image>
+                    </div>
+                    <div class="con">
+                        <div class="con-item">
+                            价格<span class="required">*</span>：{{
+                                item.price
+                            }}
+                        </div>
+                        <div class="con-item">
+                            库存<span class="required">*</span>：{{
+                                item.stock
+                            }}
+                        </div>
+                    </div>
+                </section>
+            </black>
+        </div>
+        <!-- 图片 -->
         <div class="form-card img-card">
             <section class="form-img-item">
                 <div class="tit"><span class="required">*</span>封面图</div>
@@ -241,7 +361,7 @@
                 </div>
             </section>
         </div>
-
+        <!-- 其他 -->
         <div class="form-card">
             <div class="head">
                 <div class="tit">其他信息</div>
@@ -368,6 +488,19 @@ import easyUpload from "../../components/easy-upload/easy-upload";
 export default {
     name: "",
     components: { MyImage, easyUpload },
+    filters: {
+        arrView(val) {
+            let str = "";
+            if (val) {
+                str += val.name + ": ";
+                for (let item of val.list) {
+                    str += item + ",";
+                }
+                str = str.replace(/,$/, "");
+            }
+            return str;
+        },
+    },
 
     // 数据
     data() {
@@ -422,6 +555,15 @@ export default {
             },
 
             mainImage: [],
+
+            // 规格
+            specIndex: 0,
+            specData1: null, // {name,list}
+            specData2: null, // {name,list}
+            specData3: null, // {name,list}
+            curSpecIndex: 0, // 当前编辑specData
+            skuTableData: [], // sku表格数据  详情见initSkuTable
+            skuAttrs: {}, // sku后台保存用
         };
     },
     onLoad(opts) {
@@ -430,7 +572,45 @@ export default {
         this.getData();
     },
 
-    async onShow() {},
+    async onShow() {
+        // 规格设置
+        console.log("specData", this.$store.state.common.specData);
+        if (this.$store.state.common.specData) {
+            switch (this.curSpecIndex) {
+                case 1:
+                    this.specData1 = this.$store.state.common.specData;
+                    break;
+                case 2:
+                    this.specData2 = this.$store.state.common.specData;
+                    break;
+                case 3:
+                    this.specData3 = this.$store.state.common.specData;
+                    break;
+            }
+            this.$store.commit("common/update", {
+                specData: null,
+            });
+            this.initSkuTable();
+        }
+
+        // sku值
+        console.log("skuItem", this.$store.state.common.skuItem);
+        if (this.$store.state.common.skuItem) {
+            let d = this.$store.state.common.skuItem;
+            let arr = [];
+            for (let item of this.skuTableData) {
+                if (item.key === d.key) {
+                    arr.push(d);
+                } else {
+                    arr.push(item);
+                }
+            }
+            this.$store.commit("common/update", {
+                skuItem: null,
+            });
+            this.skuTableData = arr;
+        }
+    },
 
     // 函数
     methods: {
@@ -448,7 +628,11 @@ export default {
 
         // 获取详情
         getData() {
+            uni.showLoading({
+                title: "加载中...",
+            });
             this.api.get("/Product/Detail", { id: this.dataId }).then((res) => {
+                uni.hideLoading();
                 this.oldData = res.data;
                 this.baseInfo = {
                     ...this.oldData.baseInfo,
@@ -469,13 +653,60 @@ export default {
                     this.baseInfo._statusName = "立即出售";
                 }
 
-                this.$forceUpdate();
-
                 this.getStore();
                 this.getClassify(res.data.storeId);
+                // 是否为多规格
+                if (this.oldData.skuInfo) {
+                    this.pullSku();
+                }
+                this.$forceUpdate();
             });
         },
 
+        // 赋值sku
+        pullSku() {
+            let skuInfo = JSON.parse(this.oldData.skuInfo);
+            let arr = [];
+            for (let n in skuInfo.skuAttrs) {
+                arr.push({
+                    columnName: n,
+                    name: skuInfo.skuAttrs[n],
+                    list: [],
+                });
+            }
+
+            for (let item of arr) {
+                for (let sku of skuInfo.skus) {
+                    let name = sku[item.columnName];
+                    if (item.list.indexOf(name) === -1) {
+                        item.list.push(name);
+                    }
+                }
+            }
+
+            this.specClick(arr.length);
+            if (arr.length === 1) {
+                this.specData1 = arr[0];
+            } else if (arr.length === 2) {
+                this.specData1 = arr[0];
+                this.specData2 = arr[1];
+            } else if (arr.length === 3) {
+                this.specData1 = arr[0];
+                this.specData2 = arr[1];
+                this.specData3 = arr[2];
+            }
+
+            let skuTableData = [...skuInfo.skus];
+            for (let item of skuTableData) {
+                item.price = Number(item.price) / 100;
+                item.supplyPrice = Number(item.supplyPrice) / 100;
+                item.cost = Number(item.cost) / 100;
+                item.tagPrice = Number(item.tagPrice) / 100;
+            }
+            this.skuTableData = skuTableData;
+            this.skuAttrs = skuInfo.skuAttrs;
+        },
+
         // 获取分类
         getClassify(storeId) {
             this.api
@@ -542,14 +773,18 @@ export default {
                 scanType: "barCode",
                 success(res) {
                     console.log("扫码", res);
-                    let code = res.result;
-                    self.baseInfo.barCode = code;
-                    self.baseInfo.code = code;
-                    self.baseInfo.skuCode = code;
-                    uni.showLoading({
-                        title: "识别条码中...",
-                    });
-                    self.getBarCodeGood();
+                    if (res.scanType === "EAN_13") {
+                        let code = res.result;
+                        self.baseInfo.barCode = code;
+                        self.baseInfo.code = code;
+                        self.baseInfo.skuCode = code;
+                        uni.showLoading({
+                            title: "识别条码中...",
+                        });
+                        self.getBarCodeGood();
+                    } else {
+                        self.fn.showToast("扫码失败,不是有效条码,请重新扫描");
+                    }
                 },
                 fail(res) {
                     self.fn.showToast("扫码失败");
@@ -806,6 +1041,12 @@ export default {
                     type: "array",
                     msg: "请选择分类",
                 },
+                {
+                    key: "mainImage",
+                    msg: "请上传封面图",
+                },
+            ];
+            let requiredSku = [
                 {
                     key: "price",
                     msg: "请输入价格",
@@ -824,10 +1065,6 @@ export default {
                     key: "skuCode",
                     msg: "请输入sku编码",
                 },
-                {
-                    key: "mainImage",
-                    msg: "请上传封面图",
-                },
             ];
             let requiredFile2 = [
                 {
@@ -839,20 +1076,18 @@ export default {
                 //     key: "detailImages",
                 //     type: "array",
                 //     msg: "请上传详情图",
-                // },
+                // }
             ];
-
             for (let item of requiredFile1) {
                 if (item.type === "array") {
                     if (this.baseInfo[item.key].length === 0) {
                         return this.fn.showToast(item.msg);
                     }
                 } else if (item.type === "number") {
-                    if (
-                        !this.baseInfo[item.key] &&
-                        this.baseInfo[item.key] != 0
-                    ) {
-                        return this.fn.showToast(item.msg);
+                    if (!this.baseInfo[item.key]) {
+                        if (String(this.baseInfo[item.key]) !== "0") {
+                            return this.fn.showToast(item.msg);
+                        }
                     }
                 } else {
                     if (!this.baseInfo[item.key]) {
@@ -867,11 +1102,10 @@ export default {
                         return this.fn.showToast(item.msg);
                     }
                 } else if (item.type === "number") {
-                    if (
-                        !this.baseInfo[item.key] &&
-                        this.baseInfo[item.key] != 0
-                    ) {
-                        return this.fn.showToast(item.msg);
+                    if (!this.productForm[item.key]) {
+                        if (String(this.productForm[item.key]) !== "0") {
+                            return this.fn.showToast(item.msg);
+                        }
                     }
                 } else {
                     if (!this.productForm[item.key]) {
@@ -879,22 +1113,69 @@ export default {
                     }
                 }
             }
+            // 规格判断
+            let skuInfo = "";
+            if (this.specIndex === 0) {
+                for (let item of requiredSku) {
+                    if (item.type === "array") {
+                        if (this.productForm[item.key].length === 0) {
+                            return this.fn.showToast(item.msg);
+                        }
+                    } else if (item.type === "number") {
+                        if (!this.baseInfo[item.key]) {
+                            if (String(this.baseInfo[item.key]) !== "0") {
+                                return this.fn.showToast(item.msg);
+                            }
+                        }
+                    } else {
+                        if (!this.productForm[item.key]) {
+                            return this.fn.showToast(item.msg);
+                        }
+                    }
+                }
+            } else {
+                if (this.skuTableData.length === 0) {
+                    return this.fn.showToast("请先选择规格");
+                }
+                // 价格转换
+                let arr = JSON.parse(JSON.stringify(this.skuTableData));
+                for (let item of arr) {
+                    item.price = parseInt(Number(item.price) * 100);
+                    item.supplyPrice = parseInt(Number(item.supplyPrice) * 100);
+                    item.cost = parseInt(Number(item.cost) * 100);
+                    item.tagPrice = parseInt(Number(item.tagPrice) * 100);
+                }
+                skuInfo = JSON.stringify({
+                    skuAttrs: this.skuAttrs,
+                    skus: arr,
+                });
+            }
 
             let sendData = JSON.parse(JSON.stringify(this.oldData));
             sendData = {
                 ...sendData,
                 ...this.productForm,
+                skuInfo: skuInfo,
             };
             sendData.baseInfo = {
                 ...sendData.baseInfo,
                 ...this.baseInfo,
             };
-            sendData.baseInfo.price = Number(sendData.baseInfo.price) * 100;
-            sendData.baseInfo.supplyPrice =
-                Number(sendData.baseInfo.supplyPrice) * 100;
-            sendData.baseInfo.cost = Number(sendData.baseInfo.cost) * 100;
-            sendData.baseInfo.tagPrice =
-                Number(sendData.baseInfo.tagPrice) * 100;
+            //规格判断
+            if (this.specIndex === 0) {
+                sendData.baseInfo.price = parseInt(
+                    Number(sendData.baseInfo.price) * 100
+                );
+                sendData.baseInfo.supplyPrice = parseInt(
+                    Number(sendData.baseInfo.supplyPrice) * 100
+                );
+                sendData.baseInfo.cost = parseInt(
+                    Number(sendData.baseInfo.cost) * 100
+                );
+                sendData.baseInfo.tagPrice = parseInt(
+                    Number(sendData.baseInfo.tagPrice) * 100
+                );
+            }
             this.api.post("/product/SaveEdit", sendData).then((res) => {
                 if (res.success) {
                     if (type === "next") {
@@ -909,6 +1190,162 @@ export default {
                 }
             });
         },
+
+        // 规格点击
+        specClick(index) {
+            this.specIndex = index;
+            switch (index) {
+                case 0:
+                    this.specData1 = null;
+                    this.specData2 = null;
+                    this.specData3 = null;
+                    this.skuTableData = [];
+                    this.skuAttrs = {};
+                    this.curSpecIndex = 0;
+                    break;
+                case 1:
+                    this.specData2 = null;
+                    this.specData3 = null;
+                    break;
+                case 2:
+                    this.specData3 = null;
+                    break;
+            }
+            if (index !== 0) {
+                this.baseInfo.price = 0;
+                this.baseInfo.supplyPrice = 0;
+                this.baseInfo.cost = 0;
+                this.baseInfo.tagPrice = 0;
+                this.baseInfo.weight = 0;
+                this.baseInfo.stock = 0;
+                this.baseInfo.skuCode = "";
+            }
+        },
+
+        // 规格设置
+        specEdit(index) {
+            switch (index) {
+                case 1:
+                    this.$store.commit("common/update", {
+                        specData: this.specData1,
+                    });
+                    break;
+                case 2:
+                    this.$store.commit("common/update", {
+                        specData: this.specData2,
+                    });
+                    break;
+                case 3:
+                    this.$store.commit("common/update", {
+                        specData: this.specData3,
+                    });
+                    break;
+            }
+            this.curSpecIndex = index;
+            this.router.push("/pages/manage/spec-edit");
+        },
+
+        // 规格表单
+        specForm(item) {
+            console.log(item);
+            this.$store.commit("common/update", {
+                skuItem: item,
+            });
+            this.router.push("/pages/manage/spec-item-form");
+        },
+
+        // 生成skuTable
+        initSkuTable() {
+            let arr = [];
+            let skuAttrs = {};
+            if (this.specData1) {
+                for (let item of this.specData1.list) {
+                    if (this.specData2) {
+                        for (let item2 of this.specData2.list) {
+                            if (this.specData3) {
+                                for (let item3 of this.specData3.list) {
+                                    let tabItem = this.initSkuItem({
+                                        key: item + "-" + item2 + "-" + item3,
+                                        [this.specData1.columnName]: item,
+                                        [this.specData2.columnName]: item2,
+                                        [this.specData3.columnName]: item3,
+                                    });
+                                    skuAttrs[
+                                        this.specData1.columnName
+                                    ] = this.specData1.name;
+                                    skuAttrs[
+                                        this.specData2.columnName
+                                    ] = this.specData2.name;
+                                    skuAttrs[
+                                        this.specData3.columnName
+                                    ] = this.specData3.name;
+                                    arr.push(tabItem);
+                                }
+                            } else {
+                                let tabItem = this.initSkuItem({
+                                    key: item + "-" + item2,
+                                    [this.specData1.columnName]: item,
+                                    [this.specData2.columnName]: item2,
+                                });
+                                skuAttrs[
+                                    this.specData1.columnName
+                                ] = this.specData1.name;
+                                skuAttrs[
+                                    this.specData2.columnName
+                                ] = this.specData2.name;
+                                arr.push(tabItem);
+                            }
+                        }
+                    } else {
+                        let tabItem = this.initSkuItem({
+                            key: item,
+                            [this.specData1.columnName]: item,
+                        });
+                        skuAttrs[
+                            this.specData1.columnName
+                        ] = this.specData1.name;
+                        arr.push(tabItem);
+                    }
+                }
+            }
+
+            let arr2 = [];
+            for (let item of arr) {
+                let f = false;
+                for (let skuItem of this.skuTableData) {
+                    if (item.key === skuItem.key) {
+                        arr2.push(skuItem);
+                        f = true;
+                    }
+                }
+                if (!f) {
+                    arr2.push(item);
+                }
+            }
+            this.skuTableData = arr2;
+            this.skuAttrs = skuAttrs;
+        },
+
+        // 生成sku某一项
+        initSkuItem(obj = {}) {
+            //
+            //this.fn.guid()
+            return {
+                code: String(Date.now()), // 编码
+                cost: 0, // 成本
+                img:
+                    "https://oss.ixiaokejia.com/images/common/20201021094129.png", // sku图
+                key: "", //关键字
+                order: 0, // 顺序
+                price: 0,
+                skuId: "",
+                stock: 0, // 库存
+                supplyPrice: 0, // 进货价
+                tagPrice: 0, // 标签价
+                weight: 0, // 重量
+                ...obj,
+            };
+        },
     },
 
     // 数据计算
@@ -1088,4 +1525,90 @@ button::before {
     align-items: center;
     pointer-events: none;
 }
+.min-radio {
+    transform: scale(0.8);
+}
+.spec-list {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    li {
+        width: 25%;
+        font-size: px(40);
+        height: px(100);
+        border: 1px solid #f1f1f1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #999;
+        & ~ li {
+            // border-left: none;
+        }
+        &.on {
+            color: rgb(0, 188, 38);
+            border-color: rgb(0, 188, 38);
+        }
+    }
+}
+.spec-view {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    .text {
+        font-size: px(40);
+        &.dis {
+            color: #999;
+        }
+    }
+    .spec-link {
+        width: px(50);
+        height: px(50);
+        margin-left: px(20);
+        transform: rotate(180deg);
+        /deep/ img {
+            width: px(50);
+            height: px(50);
+        }
+    }
+}
+.spec-item {
+    border: 1px solid #f1f1f1;
+    margin-top: px(30);
+    .spec-head {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background-color: #f9f9f9;
+        border-bottom: 1px solid #f1f1f1;
+        padding: px(0) px(30);
+        height: px(120);
+        line-height: px(100);
+        font-size: px(44);
+
+        .img {
+            width: px(40);
+            height: px(40);
+            transform: rotate(180deg);
+            /deep/ img {
+                width: px(40);
+                height: px(40);
+            }
+        }
+    }
+    .con {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: px(30) px(30);
+    }
+    .con-item {
+        width: 50%;
+        font-size: px(44);
+        color: #333;
+    }
+}
+.sepc-card {
+    padding-bottom: px(30);
+}
 </style>

src/pages/manage/good-list.vue

@@ -612,6 +612,7 @@ export default {
                     return;
                 }
                 num *= 100;
+                num = parseInt(num);
                 this.api
                     .post("/Product/UpPrice", {
                         id: this.rePriceData.id,

src/pages/manage/index.vue

@@ -48,7 +48,7 @@
 
         <button class="btn" @click="layout">退出登录</button>
 
-        <div class="ver">0.2.3</div>
+        <div class="ver">0.2.4</div>
     </div>
 </template>
 

src/pages/manage/spec-edit.vue

@@ -50,6 +50,7 @@
                 mode="input"
                 :title="'规格名称'"
                 :content="false"
+                :inputType="'text'"
                 :value="editVal"
                 placeholder="请输入规格名称"
                 @confirm="popupConfirm"
@@ -69,11 +70,9 @@ export default {
     // 数据
     data() {
         return {
-            specNameList: [
-                { key: "颜色", value: 1 },
-                { key: "尺码", value: 0 },
-            ], // 出售方式
+            specNameList: [], // 出售方式
             specName: "",
+            specColumnName: "",
             specList: [],
             type: "add", // 编辑方式 add edit
             editIndex: 0,
@@ -81,17 +80,32 @@ export default {
         };
     },
 
-    onLoad() {
+    onLoad() {},
+
+    onShow() {
         if (this.$store.state.common.specData) {
             this.specList = this.$store.state.common.specData.list;
             this.specName = this.$store.state.common.specData.name;
+            this.specColumnName = this.$store.state.common.specData.columnName;
+            this.$store.commit("common/update", {
+                specData: null,
+            });
         }
+        this.getSpec();
     },
 
-    onShow() {},
-
     // 函数
     methods: {
+        getSpec() {
+            this.api.get("/Product/GetSpecDropdownList").then((res) => {
+                for (let item of res.data) {
+                    item.key = item.name;
+                    item.value = item.id;
+                }
+                this.specNameList = res.data;
+            });
+        },
+
         remove(i) {
             this.specList.splice(i, 1);
             this.specList = [...this.specList];
@@ -102,9 +116,7 @@ export default {
             this.type = "edit";
             this.editVal = val;
             this.$refs.popup.open({
-                type: "dialog",
-                inputType: "text",
-                value: val,
+                type: "dialog"
             });
         },
 
@@ -112,7 +124,6 @@ export default {
             this.type = "add";
             this.$refs.popup.open({
                 type: "dialog",
-                inputType: "text",
             });
         },
 
@@ -136,13 +147,14 @@ export default {
             if (!this.specList === 0) {
                 return this.fn.showToast("请设置规格值");
             }
-            this.router.back();
             this.$store.commit("common/update", {
                 specData: {
                     name: this.specName,
                     list: this.specList,
+                    columnName: this.specColumnName,
                 },
             });
+            this.router.back();
         },
 
         pickerChange(e) {
@@ -150,6 +162,7 @@ export default {
             var name = this.specNameList[index].key;
             if (name != this.specName) {
                 this.specName = name;
+                this.specColumnName = this.specNameList[index].columnName;
                 this.specList = [];
             }
         },
@@ -241,6 +254,10 @@ export default {
         justify-content: space-between;
         align-items: center;
     }
+    .name {
+        max-width: 75%;
+        @include omit(75%);
+    }
     .tools {
         display: flex;
         align-items: center;
@@ -287,4 +304,11 @@ export default {
     border: 1px solid #ccc;
     border-radius: px(10);
 }
+.required {
+    color: #f00;
+    font-size: px(44);
+    &.hide {
+        visibility: hidden;
+    }
+}
 </style>

src/pages/manage/spec-item-form.vue

@@ -3,20 +3,16 @@
         <div class="form-card">
             <section class="form-item">
                 <div class="label">
-                    <span class="required">*</span>
-                    口味：
-                </div>
-                <div class="box">
-                    <input type="text" :placeholder="' '" :value="'酸的'" :disabled="true"/>
-                </div>
-            </section>
-            <section class="form-item">
-                <div class="label">
-                    <span class="required">*</span>
-                    颜色：
+                    <span class="required hide">*</span>
+                    规格：
                 </div>
                 <div class="box">
-                    <input type="text" :placeholder="' '" :value="'红色'" :disabled="true"/>
+                    <input
+                        type="text"
+                        class="inp-dis"
+                        v-model="form.key"
+                        :disabled="true"
+                    />
                 </div>
             </section>
 
@@ -26,7 +22,10 @@
                     价格：
                 </div>
                 <div class="box">
-                    <input type="text" :placeholder="' '" />
+                    <input type="digit" v-model="form.price" />
+                </div>
+                <div class="tool">
+                    <span class="">元</span>
                 </div>
             </section>
             <section class="form-item">
@@ -35,7 +34,10 @@
                     进货价：
                 </div>
                 <div class="box">
-                    <input type="text" :placeholder="' '" />
+                    <input type="digit" v-model="form.supplyPrice" />
+                </div>
+                <div class="tool">
+                    <span class="">元</span>
                 </div>
             </section>
             <section class="form-item">
@@ -44,7 +46,7 @@
                     成本：
                 </div>
                 <div class="box">
-                    <input type="text" :placeholder="' '" />
+                    <input type="digit" v-model="form.cost" />
                 </div>
             </section>
             <section class="form-item">
@@ -53,7 +55,10 @@
                     划线价：
                 </div>
                 <div class="box">
-                    <input type="text" :placeholder="' '" />
+                    <input type="digit" v-model="form.tagPrice" />
+                </div>
+                <div class="tool">
+                    <span class="">元</span>
                 </div>
             </section>
             <section class="form-item">
@@ -62,7 +67,10 @@
                     重量：
                 </div>
                 <div class="box">
-                    <input type="text" :placeholder="' '" />
+                    <input type="digit" v-model="form.weight" />
+                </div>
+                <div class="tool">
+                    <span class="">克</span>
                 </div>
             </section>
             <section class="form-item">
@@ -71,7 +79,7 @@
                     库存：
                 </div>
                 <div class="box">
-                    <input type="text" :placeholder="' '" />
+                    <input type="number" v-model="form.stock" />
                 </div>
             </section>
             <section class="form-item">
@@ -80,7 +88,26 @@
                     sku码：
                 </div>
                 <div class="box">
-                    <input type="text" :placeholder="' '" />
+                    <input type="text" v-model="form.code" />
+                </div>
+                <div class="tool code-tool">
+                    <span class="generate" @click="generateCode('skuCode')"
+                        >生成</span
+                    >
+                </div>
+            </section>
+        </div>
+        <!-- 图片 -->
+        <div class="form-card img-card">
+            <section class="form-img-item">
+                <div class="tit"><span class="required">*</span>sku图</div>
+                <div class="list">
+                    <easy-upload
+                        :types="'image'"
+                        v-model="skuImg"
+                        :uploadCount="1"
+                        @change="skuImgChange"
+                    ></easy-upload>
                 </div>
             </section>
         </div>
@@ -97,89 +124,95 @@ export default {
     // 数据
     data() {
         return {
-            specNameList: [
-                { key: "颜色", value: 1 },
-                { key: "尺码", value: 0 },
-            ], // 出售方式
-            specName: "",
-            specList: [],
-            type: "add", // 编辑方式 add edit
-            editIndex: 0,
-            editVal: "",
+            form: {
+                key: "",
+                price: 0,
+                supplyPrice: 0,
+                cost: 0,
+                tagPrice: 0,
+                weight: 0,
+                stock: 0,
+                code: "",
+            },
+            skuImg: [],
+            oldData: {},
+            index: 0, // 判断进入的
         };
     },
 
-    onLoad() {
-        if (this.$store.state.common.specData) {
-            this.specList = this.$store.state.common.specData.list;
-            this.specName = this.$store.state.common.specData.name;
+    onLoad() {},
+
+    onShow() {
+        console.log(this.$store.state.common.skuItem);
+        if (this.index !== 0) {
+            return;
+        }
+        if (this.$store.state.common.skuItem) {
+            this.index = 1;
+            let d = this.$store.state.common.skuItem;
+            this.oldData = d;
+            this.form.key = d.key;
+            this.form.price = d.price;
+            this.form.supplyPrice = d.supplyPrice;
+            this.form.cost = d.cost;
+            this.form.tagPrice = d.tagPrice;
+            this.form.weight = d.weight;
+            this.form.stock = d.stock;
+            this.form.code = d.code;
+            this.form.img = d.img;
+            setTimeout(() => {
+                this.skuImg = [this.form.img];
+            }, 100);
+            // this.$store.commit("common/update", {
+            //     skuItem: null,
+            // });
+        } else {
+            this.router.back();
         }
     },
 
-    onShow() {},
-
     // 函数
     methods: {
-        remove(i) {
-            this.specList.splice(i, 1);
-            this.specList = [...this.specList];
+        // 图
+        skuImgChange(e) {
+            this.form.img = e[0] || "";
         },
-
-        edit(val, index) {
-            this.editIndex = index;
-            this.type = "edit";
-            this.editVal = val;
-            this.$refs.popup.open({
-                type: "dialog",
-                inputType: "text",
-                value: val,
-            });
+        // 生成编码
+        generateCode(name) {
+            // 后台编码生成方式
+            const timestamp = Date.parse(new Date());
+            this.baseInfo[name] = timestamp;
         },
-
-        add() {
-            this.type = "add";
-            this.$refs.popup.open({
-                type: "dialog",
-                inputType: "text",
-            });
-        },
-
-        popupConfirm(done, value) {
-            if (!value) {
-                return this.fn.showToast("请输入规格名");
+        saveOk() {
+            if (!this.form.price) {
+                if (String(this.form.price) !== "0") {
+                    return this.fn.showToast("请输入价格");
+                }
             }
-            if (this.type === "add") {
-                this.specList.push(value);
-            } else {
-                this.specList.splice(this.editIndex, 1, value);
+            if (!this.form.weight) {
+                if (String(this.form.weight) !== "0") {
+                    return this.fn.showToast("请输入重量");
+                }
             }
-            this.specList = [...this.specList];
-            done();
-        },
-
-        saveOk() {
-            if (!this.specName) {
-                return this.fn.showToast("请设置规格名");
+            if (!this.form.stock) {
+                if (String(this.form.stock) !== "0") {
+                    return this.fn.showToast("请输入库存");
+                }
             }
-            if (!this.specList === 0) {
-                return this.fn.showToast("请设置规格值");
+            if (!this.form.code) {
+                if (String(this.form.code) !== "0") {
+                    return this.fn.showToast("请输入sku码");
+                }
             }
-            this.router.back();
+            if (!this.form.img) {
+                return this.fn.showToast("请上传sku图");
+            }
+            let data = { ...this.oldData, ...this.form };
+            data.stock = Number(data.stock) || 0;
             this.$store.commit("common/update", {
-                specData: {
-                    name: this.specName,
-                    list: this.specList,
-                },
+                skuItem: data,
             });
-        },
-
-        pickerChange(e) {
-            var index = e.detail.value;
-            var name = this.specNameList[index].key;
-            if (name != this.specName) {
-                this.specName = name;
-                this.specList = [];
-            }
+            this.router.back();
         },
     },
 
@@ -315,4 +348,44 @@ export default {
     border: 1px solid #ccc;
     border-radius: px(10);
 }
+.code-tool {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    .scan-img {
+        flex-shrink: 0;
+        width: px(80);
+        height: px(80);
+        /deep/ img {
+            width: px(80);
+            height: px(80);
+        }
+    }
+    .generate {
+        color: #0097d1;
+        margin-right: px(30);
+        flex-shrink: 0;
+    }
+}
+.required {
+    color: #f00;
+    font-size: px(44);
+    &.hide {
+        visibility: hidden;
+    }
+}
+.inp-dis {
+    color: #999;
+}
+
+.img-card {
+    padding-top: px(30);
+    padding-bottom: px(30);
+}
+.form-img-item {
+    .tit {
+        padding: px(30);
+        font-size: px(44);
+    }
+}
 </style>