新建sku

vue-admin-template-master/src/api/shop.js

@@ -57,3 +57,11 @@ export function downLoadImg(data) {
     responseType: "arraybuffer"
   });
 }
+// 新建sku
+export function createSku(data) {
+  return request({
+    url: "dashboard/sku",
+    method: "post",
+    data
+  });
+}

vue-admin-template-master/src/views/goods/index.vue

@@ -1,23 +1,69 @@
 <template>
   <div class="container">
     <el-card class="box-card">
+      <div class="filter-container">
+        <el-button type="primary" @click="dialogVisible = true"
+          >新建sku</el-button
+        >
+      </div>
       <el-table
         :data="tableData"
-        style="width: 100%;fontSize:12px;"
+        style="width: 100%; fontsize: 12px"
         v-loading="listLoading"
-        :cell-style="{padding:'6px 0'}"
+        :cell-style="{ padding: '6px 0' }"
       >
         <el-table-column prop="id" label="ID" width="50px"></el-table-column>
-        <el-table-column prop="category" label="category" width="100"></el-table-column>
-        <el-table-column prop="description" label="description" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="image" show-overflow-tooltip label="image"></el-table-column>
-        <el-table-column prop="name" label="name" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="nameeng" label="nameeng" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="pricenow" label="pricenow" width="100"></el-table-column>
-        <el-table-column prop="priceorigin" label="priceorigin" width="100"></el-table-column>
-        <el-table-column prop="property" label="property" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="recommendation" label="recommendation" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="rule" show-overflow-tooltip label="rule" width="120"></el-table-column>
+        <el-table-column
+          prop="category"
+          label="category"
+          width="100"
+        ></el-table-column>
+        <el-table-column
+          prop="description"
+          label="description"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          prop="image"
+          show-overflow-tooltip
+          label="image"
+        ></el-table-column>
+        <el-table-column
+          prop="name"
+          label="name"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          prop="nameeng"
+          label="nameeng"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          prop="pricenow"
+          label="pricenow"
+          width="100"
+        ></el-table-column>
+        <el-table-column
+          prop="priceorigin"
+          label="priceorigin"
+          width="100"
+        ></el-table-column>
+        <el-table-column
+          prop="property"
+          label="property"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          prop="recommendation"
+          label="recommendation"
+          show-overflow-tooltip
+        ></el-table-column>
+        <el-table-column
+          prop="rule"
+          show-overflow-tooltip
+          label="rule"
+          width="120"
+        ></el-table-column>
         <!-- 
         <el-table-column prop="isbuild" label="状态">
           <template slot-scope="{row}">
@@ -26,16 +72,250 @@
         </el-table-column>-->
       </el-table>
     </el-card>
+    <!-- 弹窗 -->
+    <el-dialog title="新增" :visible.sync="dialogVisible">
+      <!-- 新增sku -->
+      <el-form
+        :model="dynamicValidateForm"
+        ref="dynamicValidateForm"
+        label-width="100px"
+        class="demo-dynamic"
+        :rules="rules"
+      >
+        <el-form-item prop="id" label="菜单id">
+          <el-row :span="24">
+            <el-col :span="10">
+              <el-input
+                type="number"
+                v-model="dynamicValidateForm.id"
+                placeholder="菜单id,尽量把同一类别的放一块"
+              ></el-input>
+            </el-col>
+            <el-col :span="10" :offset="1"
+              >菜单id,尽量把同一类别的放一块</el-col
+            >
+          </el-row>
+        </el-form-item>
+
+        <el-form-item prop="name" label="名称">
+          <el-row :span="24">
+            <el-col :span="10">
+              <el-input
+                v-model="dynamicValidateForm.name"
+                placeholder="神奇咖啡"
+              ></el-input>
+            </el-col>
+          </el-row>
+        </el-form-item>
+
+        <el-form-item prop="nameeng" label="英文名">
+          <el-row :span="24">
+            <el-col :span="10">
+              <el-input
+                v-model="dynamicValidateForm.nameeng"
+                placeholder="legend coffee"
+              ></el-input>
+            </el-col>
+          </el-row>
+        </el-form-item>
+
+        <el-form-item prop="pricenow" label="现价">
+          <el-row :span="24">
+            <el-col :span="10">
+              <el-input
+                type="number"
+                v-model="dynamicValidateForm.pricenow"
+                placeholder="现价"
+              ></el-input>
+            </el-col>
+            <el-col :span="10" :offset="1">
+              <span>现价，2.0/3.0门店有统一折扣，则此字段没什么用</span>
+            </el-col>
+          </el-row>
+        </el-form-item>
+
+        <el-form-item prop="priceorigin" label="原价">
+          <el-row :span="24">
+            <el-col :span="10">
+              <el-input
+                type="number"
+                v-model="dynamicValidateForm.priceorigin"
+                placeholder="原价"
+              ></el-input>
+            </el-col>
+          </el-row>
+        </el-form-item>
+
+        <el-form-item prop="image" label="产品图片">
+          <el-row :span="24">
+            <el-col :span="10">
+              <el-input
+                v-model="dynamicValidateForm.image"
+                placeholder="元气樱樱抹茶拿铁.jpg"
+              ></el-input>
+            </el-col>
+            <el-col :span="10" :offset="1">
+              <span>
+                请先把该名字命名的大图和小图分别传到mpmedium和mpthumb目录下</span
+              >
+            </el-col>
+          </el-row>
+        </el-form-item>
+
+        <el-form-item prop="slides" label="大图轮播">
+          <el-row :span="24">
+            <el-col :span="10">
+              <el-tag
+                :key="tag"
+                v-for="tag in dynamicValidateForm.slides"
+                closable
+                :disable-transitions="false"
+                @close="handleClose(tag)"
+              >
+                {{ tag }}
+              </el-tag>
+              <el-input
+                class="input-new-tag"
+                v-if="inputVisible"
+                v-model="inputValue"
+                ref="saveTagInput"
+                size="small"
+                @keyup.enter.native="handleInputConfirm"
+                @blur="handleInputConfirm"
+              >
+              </el-input>
+              <el-button
+                v-else
+                class="button-new-tag"
+                size="small"
+                @click="showInput"
+                >+</el-button
+              >
+            </el-col>
+            <el-col :span="10" :offset="1">
+              <span> 元气樱樱抹茶拿铁.jpg</span>
+            </el-col>
+          </el-row>
+        </el-form-item>
+
+        <el-form-item prop="category" label="新品推荐">
+          <el-row :span="24">
+            <el-col :span="10">
+              <el-input
+                v-model="dynamicValidateForm.category"
+                placeholder="新品推荐"
+              ></el-input>
+            </el-col>
+            <el-col :span="10" :offset="1">
+              <span> 同一类别的咖啡会归一起</span>
+            </el-col>
+          </el-row>
+        </el-form-item>
+
+        <el-form-item prop="recommendation" label="推荐语">
+          <el-row :span="24">
+            <el-col :span="10">
+              <el-input
+                type="textarea"
+                :rows="2"
+                v-model="dynamicValidateForm.recommendation"
+                placeholder="有颜有料,樱你而美"
+              ></el-input>
+            </el-col>
+            <el-col :span="10" :offset="1">
+              <span> 推荐语,同一类别的咖啡共用一个推荐语</span>
+            </el-col>
+          </el-row>
+        </el-form-item>
+
+        <el-form-item prop="description" label="商品描述">
+          <el-row :span="24">
+            <el-col :span="10">
+              <el-input
+                type="textarea"
+                :rows="2"
+                v-model="dynamicValidateForm.description"
+                placeholder="限量赠网红樱花饼干。优选宇治抹茶，精细石 磨研磨，搭配进口樱花粉，碰撞绝妙层次感。"
+              ></el-input>
+            </el-col>
+          </el-row>
+        </el-form-item>
+
+        <el-form-item prop="property" label="属性">
+          <el-row :span="24">
+            <el-col :span="10">
+              <el-input
+                type="textarea"
+                :rows="2"
+                v-model="dynamicValidateForm.property"
+                placeholder="热,冰,少冰,去冰;标准糖,半糖; 含咖啡"
+              ></el-input>
+            </el-col>
+            <el-col :span="10" :offset="1">
+              <span> 不同类的属性用分号隔开，同类属性用逗号隔开</span>
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <!-- --------------------------------------------- -->
+      </el-form>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="cancel('dynamicValidateForm')">取 消</el-button>
+        <el-button type="primary" @click="submitForm('dynamicValidateForm')"
+          >确 定</el-button
+        >
+      </span>
+
+      <div>
+        <el-link
+          href="https://help.aliyun.com/document_detail/195868.html?spm=a2c4g.11186623.6.620.74d062e7wbqjEy"
+          target="_blank"
+          type="success"
+          >图片上传工具下载</el-link
+        >
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { getGoodsList } from "@/api/order";
+import { createSku } from "@/api/shop";
 export default {
   data() {
     return {
       tableData: [],
       listLoading: true,
+      dialogVisible: false,
+      // form
+      inputVisible: false,
+      inputValue: "",
+      dynamicValidateForm: {
+        id: "",
+        name: "",
+        nameeng: "",
+        pricenow: "",
+        priceorigin: "",
+        image: "",
+        slides: [],
+        category: "",
+        recommendation: "",
+        description: "",
+        property: ""
+      },
+      rules: {
+        id: [{ required: true, message: " ", trigger: "blur" }],
+        name: [{ required: true, message: " ", trigger: "blur" }],
+        nameeng: [{ required: true, message: " ", trigger: "blur" }],
+        pricenow: [{ required: true, message: " ", trigger: "blur" }],
+        priceorigin: [{ required: true, message: " ", trigger: "blur" }],
+        image: [{ required: true, message: " ", trigger: "blur" }],
+        slides: [{ required: true, message: " ", trigger: "change" }],
+        category: [{ required: true, message: " ", trigger: "blur" }],
+        recommendation: [{ required: true, message: " ", trigger: "blur" }],
+        description: [{ required: true, message: " ", trigger: "blur" }],
+        property: [{ required: true, message: " ", trigger: "blur" }]
+      }
     };
   },
   created() {
@@ -44,13 +324,71 @@ export default {
   methods: {
     getList() {
       this.listLoading = true;
-      getGoodsList().then((res) => {
+      getGoodsList().then(res => {
         console.log(res);
         this.tableData = res;
         this.listLoading = false;
       });
     },
-  },
+    // form
+    submitForm(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          let params = Object.assign({}, this.dynamicValidateForm, {
+            id: this.dynamicValidateForm.id - 0,
+            slides: this.dynamicValidateForm.slides.join(";"),
+            pricenow: this.dynamicValidateForm.pricenow - 0,
+            priceorigin: this.dynamicValidateForm.priceorigin - 0
+          });
+          createSku(params)
+            .then(res => {
+              console.log(res);
+              if (res === "OK") {
+                this.cancel("dynamicValidateForm");
+                this.$message.success("sku创建成功！");
+              }
+            })
+            .catch(err => {
+              console.log(err);
+            });
+          console.log(params);
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+    cancel(formName) {
+      this.dialogVisible = false;
+      this.$refs[formName].resetFields();
+    },
+    // tag
+    handleClose(tag) {
+      this.dynamicValidateForm.slides.splice(
+        this.dynamicValidateForm.slides.indexOf(tag),
+        1
+      );
+    },
+
+    showInput() {
+      this.inputVisible = true;
+      this.$nextTick(_ => {
+        this.$refs.saveTagInput.$refs.input.focus();
+      });
+    },
+
+    handleInputConfirm() {
+      let inputValue = this.inputValue;
+      if (inputValue) {
+        this.dynamicValidateForm.slides.push(inputValue);
+      }
+      this.inputVisible = false;
+      this.inputValue = "";
+    }
+  }
 };
 </script>
 
@@ -58,4 +396,23 @@ export default {
 .container {
   padding: 20px;
 }
-</style>
+.filter-container {
+  padding: 20px;
+  // text-align: right;
+}
+.el-tag + .el-tag {
+  margin-left: 10px;
+}
+.button-new-tag {
+  margin-left: 10px;
+  height: 32px;
+  line-height: 30px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.input-new-tag {
+  width: 90px;
+  margin-left: 10px;
+  vertical-align: bottom;
+}
+</style>

vue-admin-template-master/src/views/shop/setStore/index.vue

@@ -51,7 +51,7 @@
             </el-form-item>
           </el-col>
           <el-col :span="10">
-            <el-form-item label="banner" prop="banner">
+            <el-form-item label="banner">
               <el-input
                 v-model="ruleForm.banner"
                 placeholder="门店banner"
@@ -244,7 +244,7 @@
             <el-link
               type="primary"
               target="_blank"
-              link="https://lbs.qq.com/getPoint/"
+              href="https://lbs.qq.com/getPoint/"
               >腾讯地图地址</el-link
             >
           </div>
@@ -252,7 +252,7 @@
             <el-link
               type="primary"
               target="_blank"
-              link="https://lbs.amap.com/tools/picker"
+              href="https://lbs.amap.com/tools/picker"
               >高德地图地址</el-link
             >
           </div>
@@ -339,7 +339,7 @@ export default {
         city: [{ required: true, message: " ", trigger: "blur" }],
         district: [{ required: true, message: " ", trigger: "blur" }],
         address: [{ required: true, message: " ", trigger: "blur" }],
-        banner: [{ required: true, message: " ", trigger: "blur" }],
+        // banner: [{ required: true, message: " ", trigger: "blur" }],
         txlat: [{ required: true, message: " ", trigger: "blur" }],
         txlng: [{ required: true, message: " ", trigger: "blur" }],
         gdlat: [{ required: true, message: " ", trigger: "blur" }],