商品发布

.env.development

@@ -7,5 +7,7 @@ ENV = 'development'
 # 农商网商家管理系统/开发环境
 VUE_APP_BASE_API = '/shop'
 
+VUE_APP_NSY_UPLOAD_API="https://app.sxdirectpurchase.com"
+
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

.env.production

@@ -4,5 +4,7 @@ VUE_APP_TITLE = 农商网商家管理系统
 # 生产环境配置
 ENV = 'production'
 
+VUE_APP_NSY_UPLOAD_API="https://app.sxdirectpurchase.com"
+
 # 农商网商家管理系统/生产环境
 VUE_APP_BASE_API = '/prod-api/api/merchant'

package-lock.json

@@ -9,6 +9,7 @@
       "version": "3.8.8",
       "license": "MIT",
       "dependencies": {
+        "@amap/amap-jsapi-loader": "^1.0.1",
         "@riophae/vue-treeselect": "0.4.0",
         "axios": "0.28.1",
         "clipboard": "2.0.8",
@@ -22,16 +23,18 @@
         "js-beautify": "1.13.0",
         "js-cookie": "3.0.1",
         "jsencrypt": "3.0.0-rc.1",
+        "moment": "^2.30.1",
         "nprogress": "0.2.0",
         "quill": "2.0.2",
         "screenfull": "5.0.2",
         "sortablejs": "1.10.2",
         "vue": "2.6.12",
+        "vue-amap": "^0.5.10",
         "vue-count-to": "1.0.13",
         "vue-cropper": "0.5.5",
         "vue-meta": "2.4.0",
         "vue-router": "3.4.9",
-        "vuedraggable": "2.24.3",
+        "vuedraggable": "^2.24.3",
         "vuex": "3.6.0"
       },
       "devDependencies": {
@@ -72,6 +75,11 @@
         "node": "8 || 10 || 12 || 14 || 16 || 17"
       }
     },
+    "node_modules/@amap/amap-jsapi-loader": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
+      "integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -11419,6 +11427,14 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmmirror.com/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -17272,6 +17288,22 @@
       "integrity": "sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA==",
       "dev": true
     },
+    "node_modules/uppercamelcase": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/uppercamelcase/-/uppercamelcase-1.1.0.tgz",
+      "integrity": "sha512-C7YEMvhgrvTEKEEVqA7LXNID/1TvvIwYZqNIKLquS6y/MGSkRQAav9LnTTILlC1RqUM8eTVBOe1U/fnB652PRA==",
+      "dependencies": {
+        "camelcase": "^1.2.1"
+      }
+    },
+    "node_modules/uppercamelcase/node_modules/camelcase": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/camelcase/-/camelcase-1.2.1.tgz",
+      "integrity": "sha512-wzLkDa4K/mzI1OSITC+DUyjgIl/ETNHE9QvYgy6J6Jvqyyz4C0Xfd+lQhb19sX2jMpZV4IssUn0VDVmglV+s4g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmmirror.com/uri-js/-/uri-js-4.4.1.tgz",
@@ -17515,6 +17547,19 @@
       "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==",
       "deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details."
     },
+    "node_modules/vue-amap": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npmmirror.com/vue-amap/-/vue-amap-0.5.10.tgz",
+      "integrity": "sha512-9ViNCev1vx32+zZ5RvF/TmUZNbwL9QrdA2/OnD2GlXMfQBkJy7D08Vb7379t6guqnopDPtWJ8K6gg72h9+4GUg==",
+      "dependencies": {
+        "uppercamelcase": "^1.1.0"
+      },
+      "engines": {
+        "core-js": "^2.5.0",
+        "node": ">= 4.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
     "node_modules/vue-count-to": {
       "version": "1.0.13",
       "resolved": "https://registry.npmmirror.com/vue-count-to/-/vue-count-to-1.0.13.tgz",
@@ -19189,6 +19234,11 @@
         "js-message": "1.0.7"
       }
     },
+    "@amap/amap-jsapi-loader": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
+      "integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
+    },
     "@ampproject/remapping": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -27996,6 +28046,11 @@
         "minimist": "^1.2.6"
       }
     },
+    "moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmmirror.com/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -32747,6 +32802,21 @@
       "integrity": "sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA==",
       "dev": true
     },
+    "uppercamelcase": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/uppercamelcase/-/uppercamelcase-1.1.0.tgz",
+      "integrity": "sha512-C7YEMvhgrvTEKEEVqA7LXNID/1TvvIwYZqNIKLquS6y/MGSkRQAav9LnTTILlC1RqUM8eTVBOe1U/fnB652PRA==",
+      "requires": {
+        "camelcase": "^1.2.1"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmmirror.com/camelcase/-/camelcase-1.2.1.tgz",
+          "integrity": "sha512-wzLkDa4K/mzI1OSITC+DUyjgIl/ETNHE9QvYgy6J6Jvqyyz4C0Xfd+lQhb19sX2jMpZV4IssUn0VDVmglV+s4g=="
+        }
+      }
+    },
     "uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmmirror.com/uri-js/-/uri-js-4.4.1.tgz",
@@ -32947,6 +33017,14 @@
       "resolved": "https://registry.npmmirror.com/vue/-/vue-2.6.12.tgz",
       "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
     },
+    "vue-amap": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npmmirror.com/vue-amap/-/vue-amap-0.5.10.tgz",
+      "integrity": "sha512-9ViNCev1vx32+zZ5RvF/TmUZNbwL9QrdA2/OnD2GlXMfQBkJy7D08Vb7379t6guqnopDPtWJ8K6gg72h9+4GUg==",
+      "requires": {
+        "uppercamelcase": "^1.1.0"
+      }
+    },
     "vue-count-to": {
       "version": "1.0.13",
       "resolved": "https://registry.npmmirror.com/vue-count-to/-/vue-count-to-1.0.13.tgz",

package.json

@@ -36,6 +36,7 @@
     "url": "https://gitee.com/y_project/RuoYi-Vue.git"
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.28.1",
     "clipboard": "2.0.8",
@@ -55,11 +56,12 @@
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
     "vue": "2.6.12",
+    "vue-amap": "^0.5.10",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
     "vue-meta": "2.4.0",
     "vue-router": "3.4.9",
-    "vuedraggable": "2.24.3",
+    "vuedraggable": "^2.24.3",
     "vuex": "3.6.0"
   },
   "devDependencies": {

src/api/common/index.js

@@ -23,4 +23,12 @@ export function getStoreInfo(query) {
         method: 'get',
         params: query
     })
-}
+}
+
+export function getDict(query) {
+    return request({
+        url: '/system/dict/data/type/' + query,
+        method: 'get',
+    })
+}
+

src/api/manage/product.js

@@ -9,3 +9,52 @@ export function getGoodsListPage(query) {
     })
 }
 
+export function getGoodsInfo(query) {
+    return request({
+        url: '/system/goods/getGoodsInfo',
+        method: 'get',
+        params: query
+    })
+}
+
+export function GoodsUpOrDown(query) {
+    return request({
+        url: '/system/goods/GoodsUpOrDown',
+        method: 'get',
+        params: query
+    })
+}
+
+export function editGoods(query) {
+    return request({
+        url: '/system/goods/editGoods',
+        method: 'post',
+        data: query
+    })
+}
+
+export function goodsRemove(query) {
+    return request({
+        url: '/system/goods/remove',
+        method: 'post',
+        data: query
+    })
+}
+
+
+export function saveGoodsDraft(query) {
+    return request({
+        url: '/system/goods/saveGoodsDraft',
+        method: 'post',
+        data: query
+    })
+}
+
+
+export function getGoodsDraftByUserId(query) {
+    return request({
+        url: '/system/goods/getGoodsDraftByUserId',
+        method: 'post',
+        data: query
+    })
+}

src/api/publish/index.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function publishGoods(query) {
+    return request({
+        url: '/system/goods/publishGoods',
+        method: 'post',
+        data: query
+    })
+}

src/components/Map/map.vue

@@ -0,0 +1,274 @@
+<template>
+  <el-dialog
+    title="地图选点"
+    :visible.sync="dialogVisible"
+    width="1200px"
+    :before-close="dialogVisible == false"
+    :destroy-on-close="true"
+  >
+    <div>
+      <el-input
+        placeholder="请输入内容"
+        v-model="input"
+        class="input-with-select"
+        id="input"
+        style="width: 90%"
+      >
+      </el-input>
+      <el-button type="primary" icon="el-icon-search" @click="autoInput"></el-button>
+    </div>
+
+    <!-- <el-select v-model="value" filterable placeholder="请选择" :filter-method="autoInput">
+      <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      >
+      </el-option>
+    </el-select> -->
+
+    <div style="margin-top: 10px">已选择地址:{{ address }}</div>
+    <div id="container" style="margin-top: 10px"></div>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="SubmitMapPoint">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<style scoped>
+#container {
+  padding: 0px;
+  margin: 0px;
+  width: 100%;
+  height: 600px;
+}
+</style>
+<script>
+import AMapLoader from "@amap/amap-jsapi-loader";
+export default {
+  data() {
+    return {
+      map: null,
+      marker: null,
+      geocoder: null,
+      dialogVisible: false,
+      input: "",
+      markers: [],
+      address: "",
+      addressParams: {},
+    };
+  },
+  mounted() {
+    this.initAMap();
+  },
+  unmounted() {
+    this.map?.destroy();
+  },
+  methods: {
+    loadMap() {
+      this.dialogVisible = true;
+      this.initAMap();
+    },
+    closeMap() {
+      this.address = "";
+      this.input = "";
+      this.dialogVisible = false;
+      this.map?.destroy();
+    },
+    SubmitMapPoint() {
+      this.$emit("address", this.addressParams);
+    },
+    // 获取搜索信息
+    autoInput() {
+      let that = this;
+      var keywords = this.input;
+
+      if (this.markers.length > 0) {
+        this.map.remove(this.markers);
+      }
+      AMap.plugin(["AMap.PlaceSearch"], function () {
+        //构造地点查询类
+        var placeSearch = new AMap.PlaceSearch({
+          pageSize: 5, // 单页显示结果条数
+          pageIndex: 1, // 页码
+          map: that.map, // 展现结果的地图实例
+          // panel: "panel", // 结果列表将在此容器中进行展示。
+          autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
+        });
+        placeSearch.search(keywords);
+        placeSearch.on("markerClick", function (e) {
+          e.data.address =
+            e.data.pname +
+            "" +
+            e.data.cityname +
+            "" +
+            e.data.adname +
+            "" +
+            e.data.address +
+            "" +
+            e.data.name;
+
+          console.log("s", e.data);
+          e.data.cityCode = e.data.adcode.substring(0, 4) + "00";
+          that.addressParams = e.data;
+          console.log("z", that.addressParams);
+          that.address = e.data.address;
+        });
+      });
+    },
+
+    getLocation() {
+      const _this = this;
+      AMap.plugin("AMap.CitySearch", function () {
+        var citySearch = new AMap.CitySearch();
+        citySearch.getLocalCity(function (status, result) {
+          if (status === "complete" && result.info === "OK") {
+            console.log(result.rectangle.split(";"));
+            let xy = result.rectangle.split(";")[0].split(",");
+            console.log("xxx", _this.map.getCenter());
+            _this.map.setCenter(xy);
+          }
+        });
+      });
+    },
+    initAMap() {
+      window._AMapSecurityConfig = {
+        securityJsCode: "4990f840a53760ad4a153076bfd6c4dc",
+      };
+      let that = this;
+      AMapLoader.load({
+        key: "aeb9d882fa88154234bf135e75b7ef9d", // 申请好的Web端开发者Key，首次调用 load 时必填
+        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+        plugins: [
+          "AMap.Geocoder",
+          "AMap.Autocomplete",
+          "AMap.PlaceSearch",
+          "AMap.Scale",
+          "AMap.OverView",
+          "AMap.Geolocation",
+          "AMap.ToolBar",
+          "AMap.MapType",
+          "AMap.PolyEditor",
+          "AMap.CircleEditor",
+        ], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
+      })
+        .then((AMap) => {
+          that.map = new AMap.Map("container", {
+            // 设置地图容器id
+            viewMode: "2D", // 是否为3D地图模式
+            zoom: 11, // 初始化地图级别
+            resizeEnable: true,
+          });
+          that.geocoder = new AMap.Geocoder();
+          that.map.on("click", that.handleMapClick);
+
+          setTimeout(() => {
+            that.getLocation();
+          }, 500);
+        })
+        .catch((e) => {
+          console.log(e);
+        });
+    },
+    handleMapClick(e) {
+      console.log(e);
+      if (this.marker) {
+        if (this.marker) {
+          this.marker.setMap(null);
+          this.marker = null;
+        }
+      }
+      if (!this.marker) {
+        this.marker = new AMap.Marker({
+          icon:
+            "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
+          position: [e.lnglat.lng, e.lnglat.lat],
+          imageSize: new AMap.Size(12, 12),
+          offset: new AMap.Pixel(-13, -30),
+        });
+        this.marker.setMap(this.map);
+        this.regeoCode(e.lnglat);
+      }
+    },
+    markerBlur(e) {
+      console.log(e);
+    },
+    regeoCode(lnglat) {
+      console.log(lnglat);
+      let that = this;
+      this.map.add(this.marker);
+      this.marker.setPosition(lnglat);
+      // 创建高德地图的 Geocoder 实例
+      this.geocoder.getAddress(lnglat, function (status, result) {
+        if (status === "complete" && result.regeocode) {
+          var address = result.regeocode.formattedAddress;
+          result.regeocode.addressComponent.location = lnglat;
+          result.regeocode.addressComponent.address = address;
+
+          let addrs = result.regeocode.addressComponent;
+          result.regeocode.addressComponent.pname = addrs.province;
+          result.regeocode.addressComponent.cityname = addrs.city;
+          result.regeocode.addressComponent.adname = addrs.district;
+
+          result.regeocode.addressComponent.pcode =
+            result.regeocode.addressComponent.adcode.substring(0, 3) + "000";
+
+          result.regeocode.addressComponent.cityCode =
+            result.regeocode.addressComponent.adcode.substring(0, 4) + "00";
+          console.log("zxczxczx", result);
+          that.address = address;
+          console.log("cccc", that.address);
+          that.$forceUpdate();
+          that.addressParams = result.regeocode.addressComponent;
+        } else {
+          that.$message.error("根据经纬度查询地址失败");
+        }
+      });
+    },
+  },
+};
+</script>
+<style>
+html,
+body,
+#container {
+  height: 100%;
+  width: 100%;
+}
+
+.amap-icon img,
+.amap-marker-content img {
+  width: 25px;
+  height: 34px;
+}
+
+.marker {
+  position: absolute;
+  top: -20px;
+  right: -118px;
+  color: #fff;
+  padding: 4px 10px;
+  box-shadow: 1px 1px 1px rgba(10, 10, 10, 0.2);
+  white-space: nowrap;
+  font-size: 12px;
+  font-family: "";
+  background-color: #25a5f7;
+  border-radius: 3px;
+}
+
+.input-card {
+  width: 18rem;
+  z-index: 170;
+}
+
+.input-card .btn {
+  margin-right: 0.8rem;
+}
+
+.input-card .btn:last-child {
+  margin-right: 0;
+}
+</style>

src/main.js

@@ -65,6 +65,19 @@ Vue.use(plugins)
 Vue.use(VueMeta)
 DictData.install()
 
+// import VueAMap from 'vue-amap';
+
+// Vue.use(VueAMap);
+
+// VueAMap.initAMapApiLoader({
+//   // 高德的keye
+//   key: 'aeb9d882fa88154234bf135e75b7ef9d',
+//   uiVersion: '1.0.11',// 版本号
+//   // 插件集合
+//   plugin: ['AMap.Geocoder', 'AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.Geolocation', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
+//   // 高德 sdk 版本，默认为 1.4.4
+//   v: '1.4.4'
+// });
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api

src/views/manage/active.vue

@@ -67,7 +67,7 @@
           <el-image
             v-if="scope.row.bgImg"
             style="width: 60px; height: 60px"
-            :src="scope.row.img"
+            :src="scope.row.bgImg"
             :preview-src-list="[scope.row.bgImg]"
           >
           </el-image>
@@ -347,7 +347,7 @@
 
 <script>
 import { promotionList, promotionSku, spuList, spuRemove } from "@/api/active/index";
-import productList from "./product.vue";
+import productList from "../product/index.vue";
 import moment from "moment";
 export default {
   components: { productList },

src/views/manage/product.vue

@@ -1,855 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-form
-      :model="queryParams"
-      ref="queryForm"
-      size="small"
-      :inline="true"
-      v-show="showSearch"
-      label-width="80px"
-    >
-      <el-form-item label="商品名称" prop="spuName">
-        <el-input
-          v-model="queryParams.spuName"
-          placeholder="请输入商品名称"
-          clearable
-          style="width: 240px"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="分类" prop="categoryId">
-        <el-cascader
-          v-model="queryParams.categoryId"
-          ref="formCascader"
-          placeholder="请选择分类"
-          :props="categoryprops"
-          @change="cascaderChange"
-        />
-      </el-form-item>
-
-      <el-form-item label="商品状态" prop="spuStatus">
-        <el-select v-model="queryParams.spuStatus" placeholder="请选择商品状态">
-          <el-option label="售罄" value="2"> </el-option>
-          <el-option label="上架" value="0"> </el-option>
-          <el-option label="下架" value="1"> </el-option>
-        </el-select>
-      </el-form-item>
-
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
-          >搜索</el-button
-        >
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5" v-if="!activeShowBtn">
-        <el-button
-          type="primary"
-          plain
-          size="mini"
-          @click="addActive"
-          :disabled="!multipleSelection.length > 0"
-          >添加商品到活动</el-button
-        >
-      </el-col>
-      <el-col :span="1.5" v-else>
-        <el-button type="primary" plain size="mini" @click="prouctAdd"
-          >新增商品</el-button
-        >
-      </el-col>
-    </el-row>
-
-    <el-table
-      v-loading="loading"
-      :data="configList"
-      @selection-change="handleSelectionChange"
-      row-key="id"
-    >
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="商品图片" align="center">
-        <template slot-scope="scope">
-          <el-image
-            style="width: 60px; height: 60px"
-            :src="scope.row.pic"
-            :preview-src-list="[scope.row.pic]"
-          >
-          </el-image>
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="商品名称"
-        align="center"
-        prop="spuName"
-        :show-overflow-tooltip="true"
-      />
-      <el-table-column label="分类" align="center" prop="categoryName" />
-      <el-table-column label="价格" align="center">
-        <template slot-scope="scope">
-          {{ scope.row.lowestPrice }} {{ scope.row.unit }}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="起批量" align="center">
-        <template slot-scope="scope">
-          {{ scope.row.lowestPurchase }} {{ scope.row.unit }}
-        </template>
-      </el-table-column>
-      <el-table-column label="库存" align="center">
-        <template slot-scope="scope">
-          {{ scope.row.totalStocks }} {{ scope.row.unit }}
-        </template>
-      </el-table-column>
-      <el-table-column label="销量" align="center" prop="salesVolume"> </el-table-column>
-      <el-table-column label="分销比例" align="center" prop="shareRate" />
-      <el-table-column label="销售模式" align="center">
-        <template slot-scope="scope">
-          {{ scope.row.saleModel == 1 ? "现货" : "预售" }}
-        </template>
-      </el-table-column>
-      <el-table-column label="销售方式" align="center">
-        <template slot-scope="scope">
-          {{
-            scope.row.saleType == 0
-              ? "整车"
-              : scope.row.saleType == 1
-              ? "零售"
-              : scope.row.saleType == 2
-              ? "拼车"
-              : scope.row.saleType == 3
-              ? "一件代发"
-              : ""
-          }}
-        </template>
-      </el-table-column>
-      <el-table-column label="发布状态" align="center">
-        <template slot-scope="scope">
-          {{
-            scope.row.releaseStatus == 0
-              ? "未发布"
-              : scope.row.releaseStatus == 1
-              ? "已发布"
-              : ""
-          }}
-        </template>
-      </el-table-column>
-      <el-table-column label="商品属性" align="center" width="150">
-        <template slot-scope="scope">
-          <div
-            v-for="(item, index) in scope.row.props ? JSON.parse(scope.row.props) : []"
-            :key="index"
-          >
-            <div style="text-align: left">属性{{ index + 1 }}：{{ item.name }}</div>
-            <div style="text-align: left">属性值{{ index + 1 }}：{{ item.value }}</div>
-          </div>
-        </template>
-      </el-table-column>
-
-      <!-- <el-table-column label="发货时间" align="center" prop="shippingTimeDesc">
-      </el-table-column> -->
-      <el-table-column label="商品状态" align="center">
-        <template slot-scope="scope">
-          {{
-            scope.row.spuStatus == 2
-              ? "售罄"
-              : scope.row.spuStatus == 0
-              ? "上架"
-              : scope.row.spuStatus == 1
-              ? "下架"
-              : ""
-          }}
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <!-- <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['manage:order:detail']"
-            >订单详情</el-button
-          > -->
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      :page.sync="queryParams.pageNo"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
-
-    <!-- 添加或修改参数配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
-      <el-form ref="form" :model="form" label-width="140px">
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="商品名称：" prop="configName">
-              <el-input v-model="form.configName" placeholder="请输入参数名称" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="商品分类：" prop="configKey">
-              <el-input v-model="form.configKey" placeholder="请输入参数键名" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="商品描述：" prop="configValue">
-              <el-input v-model="form.configValue" placeholder="请输入参数键值" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="商品封面图：" prop="configKey">
-              <span style="font-size: 12px">商品封面的展示</span>
-              <el-upload
-                action="https://jsonplaceholder.typicode.com/posts/"
-                list-type="picture-card"
-              >
-                <i class="el-icon-plus"></i>
-              </el-upload>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="商品视频：" prop="configKey">
-              <span style="font-size: 12px; color: red"
-                >上传视频有利于用户看的更直接</span
-              >
-              <el-upload
-                action="https://jsonplaceholder.typicode.com/posts/"
-                list-type="picture-card"
-              >
-                <i class="el-icon-plus"></i>
-              </el-upload>
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="商品图：" prop="configKey">
-              <span style="font-size: 12px">可上传最多10张图</span>
-              <el-upload
-                action="https://jsonplaceholder.typicode.com/posts/"
-                list-type="picture-card"
-              >
-                <i class="el-icon-plus"></i>
-              </el-upload>
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="详情图：" prop="configKey">
-              <span style="font-size: 12px">可上传最多10张图</span>
-              <el-upload
-                action="https://jsonplaceholder.typicode.com/posts/"
-                list-type="picture-card"
-              >
-                <i class="el-icon-plus"></i>
-              </el-upload>
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="特殊资质图：" prop="configKey">
-              <span style="font-size: 12px"
-                >如有特殊资质例如农产检查有机认证最多10张图</span
-              >
-              <el-upload
-                action="https://jsonplaceholder.typicode.com/posts/"
-                list-type="picture-card"
-              >
-                <i class="el-icon-plus"></i>
-              </el-upload>
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="商品价格与规格：" prop="configKey">
-              <span style="color: #0fd70f">{{
-                specification.length > 0 ? "已添加" + specification.length + "个规格" : ""
-              }}</span>
-              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-
-              <el-button type="text" @click="custom('specification')">添加规格</el-button>
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="运费：" prop="configKey">
-              <el-button type="text" @click="custom('freight')">添加运费模版</el-button>
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="发货地址：" prop="configKey">
-              <div style="display: flex; flex-direction: row">
-                <el-cascader
-                  v-model="form.area"
-                  ref="myCascader"
-                  placeholder="请选择城市"
-                  :props="props"
-                  style="width: 300px"
-                  @change="(res) => araeChange(res, 'query')"
-                />
-                <el-input v-model="form.configKey" placeholder="请输入详细地址" />
-              </div>
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="添加商品属性：" prop="configKey">
-              <el-button type="text" @click="custom('stats')">添加商品属性</el-button>
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="分销比例：" prop="configKey">
-              <el-input
-                v-model="form.configKey"
-                placeholder="请输入分销比例"
-                style="width: 200px"
-              >
-                <span slot="suffix">%</span>
-              </el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
-
-    <!-- 规格列表 -->
-    <el-dialog
-      :title="specificationTitle"
-      :visible.sync="specificationOpen"
-      width="700px"
-      append-to-body
-    >
-      <el-form
-        :model="queryParams"
-        ref="queryForm"
-        size="small"
-        :inline="true"
-        label-width="120px"
-      >
-        <el-form-item label="计量单位" prop="configName">
-          <el-input
-            v-model="queryParams.configName"
-            placeholder="请选择计量单位"
-            clearable
-            style="width: 240px"
-          />
-        </el-form-item>
-        <el-button
-          type="primary"
-          @click="specificationAdd"
-          size="mini"
-          style="position: absolute; right: 20px"
-          >添加规格</el-button
-        >
-        <div style="max-height: 500px; overflow: auto">
-          <el-row
-            v-for="(item, index) in specification"
-            :key="index"
-            style="
-              padding: 20px 0px;
-              border: 1px solid #f1f1f1;
-              border-radius: 20px;
-              margin-bottom: 20px;
-            "
-          >
-            <el-col
-              :span="24"
-              style="text-align: right; padding: 0px 20px; position: absolute; top: 10px"
-            >
-              <i
-                class="el-icon-edit-outline"
-                style="font-size: 26px"
-                @click="specificationEdit(item)"
-              ></i>
-              <i
-                @click="specificationRemove(item, inex)"
-                class="el-icon-delete"
-                style="font-size: 26px; margin-left: 10px; color: red"
-              ></i>
-            </el-col>
-
-            <el-col :span="12">
-              <el-form-item label="规格名称：" prop="configName">
-                {{ item.name }}
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="规格内容：" prop="configName">
-                {{ item.contont }}
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="库存：" prop="configName">
-                {{ item.inventory }} 斤
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="起批量：" prop="configName">
-                {{ item.starting }}斤
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="批发价：" prop="configName">
-                {{ item.wholesale }}元/斤
-              </el-form-item>
-            </el-col>
-            <el-col :span="24">
-              <el-form-item label="商品单价：" prop="configName">
-                {{ item.wholesale }}元/斤
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </div>
-      </el-form>
-
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary">确 定</el-button>
-        <el-button @click="specificationOpen = false">取 消</el-button>
-      </div>
-    </el-dialog>
-
-    <el-dialog :title="subTitle" :visible.sync="subOpen" width="700px" append-to-body>
-      <el-form
-        :model="rules"
-        ref="queryForm"
-        size="small"
-        :inline="true"
-        label-width="80px"
-      >
-        <el-row v-if="subType == 'specification'">
-          <el-col :span="12">
-            <el-form-item label="规格名称" prop="name">
-              <el-input
-                v-model="rules.specification.name"
-                placeholder="请输入规格名称"
-                clearable
-                style="width: 240px"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="规格内容" prop="contont">
-              <el-input
-                v-model="rules.specification.contont"
-                placeholder="请输入规格内容"
-                clearable
-                style="width: 240px"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="库存" prop="inventory">
-              <el-input
-                v-model="rules.specification.inventory"
-                placeholder="请输入库存"
-                clearable
-                style="width: 240px"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="起批量" prop="starting">
-              <el-input
-                v-model="rules.specification.starting"
-                placeholder="请输入起批量"
-                clearable
-                style="width: 240px"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="批发价" prop="wholesale">
-              <el-input
-                v-model="rules.specification.wholesale"
-                placeholder="请输入批发价"
-                clearable
-                style="width: 240px"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="商品单价" prop="configName">
-              {{ rules.wholesale ? rules.wholesale + "元/斤" : "" }}
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row v-if="subType == 'freight'">
-          <el-col :span="24">
-            <el-form-item label="运费模版名称" prop="configName" label-width="130px">
-              <el-input
-                v-model="queryParams.configName"
-                placeholder="请输入运费模版名称"
-                clearable
-                @keyup.enter.native="handleQuery"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="小于商品金额" prop="configName" label-width="130px">
-              <el-input
-                v-model="queryParams.configName"
-                placeholder="请输入商品金额"
-                style="with: 100px"
-                clearable
-              />
-            </el-form-item>
-            <el-form-item label="运费" prop="configName">
-              <el-input
-                style="with: 100px"
-                v-model="queryParams.configName"
-                placeholder="请输入运费"
-                clearable
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="大于等于商品金额" prop="configName" label-width="130px">
-              <div style="width: 200px; display: flex; flex-direction: row">
-                <el-input
-                  v-model="queryParams.configName"
-                  placeholder="请输入起批量"
-                  clearable
-                />
-                <div style="width: 100px; margin-left: 5px">元免运费</div>
-              </div>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row v-if="subType == 'stats'">
-          <el-col :span="24" style="text-align: right; position: absolute; top: -40px">
-            <el-button type="primary" @click="productAdd" size="mini"
-              >自定义添加</el-button
-            ></el-col
-          >
-          <el-col :span="24">
-            <el-form-item label="包装方式" prop="configName" label-width="100px">
-              <el-select v-model="rules.stats.packing" placeholder="请选择包装方式">
-                <el-option label="纸箱装" value="1"> </el-option>
-                <el-option label="礼盒装" value="2"> </el-option>
-                <el-option label="胶框装" value="3"> </el-option>
-                <el-option label="泡沫箱装" value="4"> </el-option>
-                <el-option label="袋装" value="5"> </el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="发货时间" prop="configName" label-width="100px">
-              <el-radio-group
-                v-model="rules.stats.deliveryTime"
-                style="width: 500px; line-height: 30px"
-              >
-                <el-radio
-                  :label="item.value"
-                  v-for="(item, index) in deliveryTimes"
-                  :key="index"
-                >
-                  {{ item.label }}
-                  <span
-                    v-if="item.type == 'add'"
-                    style="color: red"
-                    @click="removeRadio(index)"
-                    >删除</span
-                  >
-                </el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-          <el-col :span="24" v-if="rules.stats.deliveryTime == 99">
-            <el-form-item label="自定义添加" prop="configName" label-width="100px">
-              <div style="margin-left: 20px">
-                <el-input
-                  v-model="optionTime"
-                  placeholder="请输入自定义发货时间"
-                  clearable
-                  style="width: 200px"
-                />
-                <span style="margin-left: 5px" @click="addOption">确定</span>
-              </div>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="costumSubmit">确 定</el-button>
-        <el-button @click="subOpen = false">取 消</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { getGoodsListPage } from "@/api/manage/product";
-import { getClassificationListPage } from "@/api/common/index";
-export default {
-  name: "Config",
-  //   dicts: ["sys_yes_no"],
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 参数表格数据
-      configList: [],
-      // 弹出层标题
-      title: "",
-      subTitle: "",
-      // 是否显示弹出层
-      open: false,
-      subOpen: false,
-      // 日期范围
-      dateRange: [],
-      // 查询参数
-      queryParams: {
-        pageNo: 1,
-        pageSize: 10,
-        categoryId: "",
-        spuStatus: "",
-        spuName: "",
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-
-      specification: [],
-      freight: [],
-      subType: "",
-      specificationOpen: false,
-      specificationTitle: "",
-      rules: {
-        specification: {
-          name: "",
-          contont: "",
-          inventory: "",
-          starting: "",
-          wholesale: "",
-        },
-        stats: {
-          packing: "",
-          deliveryTime: "",
-        },
-      },
-      deliveryTimes: [
-        {
-          label: "付款24小时",
-          value: "1",
-        },
-        {
-          label: "付款36小时",
-          value: "2",
-        },
-        {
-          label: "付款48小时",
-          value: "3",
-        },
-        {
-          label: "自定义",
-          value: "99",
-        },
-      ],
-      optionTime: "",
-      categoryprops: {
-        checkStrictly: true,
-        lazy: true,
-        lazyLoad: this.categoryLazyLoad,
-      },
-
-      activeShowBtn: true,
-      multipleSelection: [],
-    };
-  },
-
-  mounted() {
-    this.getList();
-  },
-  methods: {
-    handRef(type, scope) {
-      if (type == "active") {
-        this.queryParams.scope = scope;
-        this.multipleSelection = [];
-        this.activeShowBtn = false;
-        this.getList();
-      }
-    },
-
-    addActive() {
-      this.$emit("multipleTable", this.multipleSelection);
-    },
-    handleSelectionChange(val) {
-      this.multipleSelection = val;
-    },
-    addOption() {
-      if (this.optionTime) {
-        this.deliveryTimes.push({
-          label: this.optionTime,
-          value: this.deliveryTimes.length,
-          type: "add",
-        });
-        this.deliveryTimes.sort(function (a, b) {
-          return a.value - b.value;
-        });
-        this.optionTime = "";
-      }
-    },
-    removeRadio(index) {
-      this.deliveryTimes.splice(index, 1);
-    },
-    specificationAdd() {
-      for (const key in this.rules.specification) {
-        this.rules.specification[key] = "";
-      }
-      this.subTitle = "自定义添加规格";
-      this.subOpen = true;
-    },
-    specificationRemove(record, index) {
-      this.specification.splice(index, 1);
-    },
-    specificationEdit(record) {
-      this.subTitle = "编辑规格";
-      this.subOpen = true;
-      this.specification = record;
-    },
-    custom(type) {
-      this.subType = type;
-      if (type == "specification") {
-        this.specificationOpen = true;
-        this.specificationTitle = "自定义规格";
-      } else if (type == "freight") {
-        this.subTitle = "自定义运费模版";
-        this.subOpen = true;
-      } else if (type == "stats") {
-        this.subTitle = "添加商品属性";
-        this.subOpen = true;
-      }
-    },
-    costumSubmit() {
-      console.log(this.rules);
-      this.subOpen = false;
-      this.specification.push(this.rules.specification);
-      console.log(this.specification);
-    },
-
-    /** 查询参数列表 */
-    getList() {
-      this.loading = true;
-      getGoodsListPage(this.queryParams).then((res) => {
-        this.configList = res.data.records;
-        this.total = res.data.total;
-        this.loading = false;
-      });
-    },
-
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        configId: undefined,
-        configName: undefined,
-        configKey: undefined,
-        configValue: undefined,
-        configType: "Y",
-        remark: undefined,
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNo = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.dateRange = [];
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    /**
-     * 新增商品
-     */
-    prouctAdd() {
-      this.title = "添加商品";
-      this.open = true;
-    },
-    cascaderChange(val) {
-      if (val.length == 1) {
-        this.queryParams.categoryId = val[0];
-      } else if (val.length == 2) {
-        this.queryParams.categoryId = val[1];
-      } else if (val.length == 3) {
-        this.queryParams.categoryId = val[2];
-      }
-      // this.getList();
-    },
-    categoryLazyLoad(node, resolve) {
-      let that = this;
-      let level = node.level;
-      console.log(node);
-      if (!node.data) {
-        getClassificationListPage({ parentId: 0 }).then((res) => {
-          //接口
-          const nodes = Array.from(res.data).map((item, index) => ({
-            value: item.id,
-            label: `${item.className}`,
-            leaf: level >= 2,
-          }));
-          console.log("111", node);
-          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
-          resolve(nodes);
-        });
-      } else if (level == 1) {
-        getClassificationListPage({ parentId: node.data.value }).then((res) => {
-          const nodes = Array.from(res.data).map((item) => ({
-            value: item.id,
-            label: `${item.className}`,
-            leaf: level >= 2,
-            // level: 2,
-          }));
-          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
-          resolve(nodes);
-        });
-      } else if (level == 2) {
-        getClassificationListPage({ parentId: node.data.value }).then((res) => {
-          const nodes = Array.from(res.data).map((item) => ({
-            value: item.id,
-            label: `${item.className}`,
-            leaf: level >= 1,
-            level: 1,
-          }));
-          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
-          resolve(nodes);
-        });
-      } else {
-        resolve({});
-      }
-    },
-  },
-};
-</script>
-<style>
-.el-form-item {
-  margin-bottom: 10px;
-}
-.el-upload--picture-card {
-  width: 50px;
-  height: 50px;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-}
-</style>

src/views/manage/voucher/index.vue

@@ -61,7 +61,7 @@
                     v-model="item.min"
                     placeholder="请输入金额"
                     style="width: 140px"
-                    :min="1"
+                    min="1"
                   >
                     <span slot="suffix">元 </span>
                   </el-input>

src/views/product/createProduct.vue

@@ -0,0 +1,388 @@
+<template>
+  <div class="app-container">
+    <div style="width: 100%; height: 85vh; overflow: auto">
+      <el-row style="padding-top: 20px">
+        <el-col :span="24">
+          <el-descriptions title="基本信息" column="1"> </el-descriptions>
+          <basicInfo @updateValue="updateValue"></basicInfo>
+          <el-descriptions title="销售信息" column="1"> </el-descriptions>
+          <salesInfo @updateValue="updateValue"></salesInfo>
+          <el-descriptions title="商品详情" column="1"> </el-descriptions>
+          <productInfo @updateValue="updateValue"></productInfo>
+
+          <div class="dialog-footer" style="text-align: center">
+            <el-button type="primary" @click="submitForm">保 存</el-button>
+
+            <el-button type="primary" @click="submitFormDraft">存入草稿箱</el-button>
+          </div>
+        </el-col>
+        <phoneView style="position: absolute; bottom: 50px; right: 50px">
+          <div slot="conts">
+            <div>
+              <el-carousel height="200px">
+                <el-carousel-item
+                  v-for="(item, index) in headerImg.slice(1)"
+                  :key="index"
+                >
+                  <el-image
+                    v-if="item.type == 'img'"
+                    style="width: 100%; height: 200px"
+                    :src="item.src"
+                    :preview-src-list="[item.src]"
+                  >
+                  </el-image>
+                  <video
+                    v-if="item.type == 'video'"
+                    :key="index"
+                    controls
+                    :src="item.src"
+                    style="width: 100%; height: 200px"
+                  ></video>
+                </el-carousel-item>
+              </el-carousel>
+            </div>
+            <img
+              style="width: 100%"
+              src="https://bucket.sxdirectpurchase.com/fileUpload/test/47fc6132-0b3e-4b5c-b858-f78d363eba90.png"
+              alt=""
+            />
+            <div class="card">
+              <div class="spuName">{{ form ? form.title : "" }}</div>
+              <div class="price_info">
+                <div class="price_group">
+                  <span>￥</span>
+                  <span
+                    class="price"
+                    :key="item"
+                    v-for="item in form.skuList ? form.skuList.slice(0, 1) : []"
+                    >{{ item.skuPriceList ? item.skuPriceList[0].price : 0 }}元</span
+                  >
+
+                  <span>/{{ form.unit }}</span>
+                </div>
+                <span class="ys">已售 0</span>
+              </div>
+            </div>
+            <div class="card" style="margin-top: 10px">
+              <div class="spuName">规格/价格</div>
+              <div v-for="(item, index) in form.skuList" :key="index">
+                <div class="price_info">
+                  <span
+                    >{{ item.skuSpecsList[0] ? item.skuSpecsList[0].specsName : "" }}
+                    {{
+                      item.skuSpecsList[0].specsValue
+                        ? item.skuSpecsList[0].specsValue
+                        : ""
+                    }}</span
+                  >
+                </div>
+                <div
+                  style="
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-between;
+                  "
+                >
+                  <span style="font-size: 14px; color: red">
+                    <span>￥</span>
+                    <span
+                      >{{
+                        item.skuPriceList
+                          ? item.skuPriceList[0].price
+                            ? item.skuPriceList[0].price
+                            : ""
+                          : ""
+                      }}元</span
+                    ><span>/{{ form.unit }}</span></span
+                  >
+                  <span style="font-size: 14px"
+                    >{{
+                      item.skuPriceList
+                        ? item.skuPriceList[0].minPurchase
+                          ? item.skuPriceList[0].minPurchase
+                          : ""
+                        : ""
+                    }}/{{ form.unit }}起购</span
+                  >
+                  <span style="font-size: 14px"
+                    >库存:{{ item.stock }}{{ form.unit }}</span
+                  >
+                </div>
+              </div>
+            </div>
+            <div class="card" style="margin-top: 10px">
+              <el-form
+                :model="form"
+                ref="queryForm"
+                size="small"
+                :inline="true"
+                label-width="80px"
+                label-position="left"
+              >
+                <el-row>
+                  <el-col :span="24">
+                    <el-form-item label="发货地" prop="spuName">
+                      <div style="width: 185px">
+                        {{ form.shippingAddrBean ? form.shippingAddrBean.addr : "" }}
+                        {{
+                          form.shippingAddrBean
+                            ? form.shippingAddrBean.addrDetail
+                              ? form.shippingAddrBean.addrDetail
+                              : ""
+                            : ""
+                        }}
+                      </div>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="24">
+                    <el-form-item label="发货时间" prop="spuName">
+                      {{ form.shippingTimeDesc }}
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="24">
+                    <el-form-item label="商品属性" prop="spuName">
+                      <div>查看></div>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="24">
+                    <el-form-item label="包装方式" prop="spuName">
+                      {{ form.packing }}
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+              </el-form>
+            </div>
+            <div class="card" style="margin-top: 10px">
+              <div
+                style="
+                  display: flex;
+                  flex-direction: row;
+                  justify-content: space-between;
+                  align-items: center;
+                "
+              >
+                <span class="spuName">商品评价</span>
+                <span>好评率 <span style="color: red">100%</span></span>
+              </div>
+              <div
+                style="
+                  display: flex;
+                  flex-direction: column;
+                  justify-content: center;
+                  align-items: center;
+                "
+              >
+                <img
+                  style="width: 40%"
+                  src="https://directpurchase-oss-dev.oss-cn-chengdu.aliyuncs.com/wx/static/images/kong.png"
+                  alt=""
+                />
+                <span>还没有评价~</span>
+              </div>
+            </div>
+            <div class="card" style="margin-top: 10px">
+              <div class="spuName">商品介绍</div>
+              <div style="font-size: 14px; line-height: 25px">
+                {{ form.spuDesc }}
+              </div>
+            </div>
+            <div class="card" style="margin-top: 10px">
+              <div class="spuName">商品详情</div>
+              <div style="font-size: 14px; line-height: 25px">
+                <el-image
+                  v-for="(item, index) in form.spuDetailList"
+                  :key="index"
+                  :src="item.fileUrl"
+                  fit="fill"
+                  :preview-src-list="[item.fileUrl]"
+                >
+                </el-image>
+              </div>
+              <div style="font-size: 14px; line-height: 25px">
+                <el-image
+                  v-for="(item, index) in form.specialList"
+                  :key="index"
+                  :src="item.fileUrl"
+                  fit="fill"
+                  :preview-src-list="[item.fileUrl]"
+                >
+                </el-image>
+              </div>
+            </div>
+          </div>
+        </phoneView>
+      </el-row>
+    </div>
+
+    <Amap></Amap>
+  </div>
+</template>
+
+<script>
+import { publishGoods } from "@/api/publish/index";
+import { saveGoodsDraft } from "@/api/manage/product";
+import basicInfo from "./module/basic-info.vue";
+import productInfo from "./module/product-info.vue";
+import salesInfo from "./module/sales-info.vue";
+import phoneView from "@/components/phoneView/index.vue";
+import Amap from "@/components/Map/map.vue";
+export default {
+  components: { Amap, phoneView, basicInfo, salesInfo, productInfo },
+  data() {
+    return {
+      form: {},
+      headerImg: [],
+    };
+  },
+  methods: {
+    submitFormDraft() {
+      saveGoodsDraft(this.form).then((res) => {
+        if (res.code == 200) {
+          this.$message.success(`保存成功！请前往草稿箱查看`);
+          this.$store.dispatch("tagsView/delView", this.$route); //关闭当前页
+          this.$router.replace({ path: "/product/product/index" });
+        }
+      });
+    },
+    submitForm() {
+      if (this.form.scope === "") {
+        this.$message.error(`经营区域不能为空！`);
+        return;
+      } else if (this.form.saleType === "") {
+        this.$message.error(`销售方式不能为空`);
+        return;
+      } else if (this.form.saleType === "") {
+        this.$message.error(`销售方式不能为空`);
+        return;
+      } else if (this.form.categoryId === "") {
+        this.$message.error(`商品分类不能为空`);
+        return;
+      } else if (this.form.pic === "") {
+        this.$message.error(`商品封面图不能为空`);
+        return;
+      } else if (this.form.unit === "") {
+        this.$message.error(`商品封面图不能为空`);
+        return;
+      } else if (this.form.skuList === "") {
+        this.$message.error(`商品规格不能为空`);
+        return;
+      } else if (this.form.packing === "") {
+        this.$message.error(`包装方式不能为空`);
+        return;
+      } else if (this.form.shippingTimeDesc === "") {
+        this.$message.error(`发货时间不能为空`);
+        return;
+      } else if (this.form.freeShipping === "") {
+        this.$message.error(`运费不能为空`);
+        return;
+      } else if (this.form.shippingAddr === "") {
+        this.$message.error(`发货地址不能为空`);
+        return;
+      } else if (this.form.spuDesc === "") {
+        this.$message.error(`商品介绍不能为空`);
+        return;
+      } else if (this.form.saleModel === "2") {
+        if (this.form.presaleStartTime === "" || this.form.presaleEndTime === "") {
+          this.$message.error(`预售时间不能为空`);
+          return;
+        }
+      }
+      publishGoods(this.form).then((res) => {
+        if (res.code == 200) {
+          this.$message.success(`发布成功！`);
+          this.$store.dispatch("tagsView/delView", this.$route); //关闭当前页
+          this.$router.replace({ path: "/product/product/index" });
+        }
+      });
+    },
+    updateValue(val) {
+      console.log(val);
+      this.form = { ...this.form, ...val };
+
+      this.headerImg = [];
+      if (val.vid || this.form.vid) {
+        this.headerImg.push({
+          type: "video",
+          src: val.vid ? val.vid : this.form.vid,
+          sort: 1,
+        });
+      }
+      if (this.form?.bannerList && this.form?.bannerList.length > 0) {
+        this.form.bannerList.shift();
+        this.form.bannerList.forEach((e, index) => {
+          this.headerImg.push({
+            type: "img",
+            src: e.fileUrl,
+            sort: index + 4,
+          });
+        });
+      }
+
+      this.headerImg.sort((a, b) => a.sort - b.sort); //排序 视频在最前面>封面>商品banner
+    },
+    unique(arr) {
+      const res = new Map();
+      return arr.filter((arr) => !res.has(arr.src) && res.set(arr.src, 1));
+    },
+  },
+};
+</script>
+
+<style>
+.required {
+  color: red;
+}
+.el-upload-list__item {
+  width: 60px !important;
+  height: 60px !important;
+}
+.el-upload--picture-card {
+  width: 80px;
+  height: 80px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.tips {
+  font-size: 12px;
+  color: red;
+}
+</style>
+<style scoped>
+.card {
+  /* height: 85px; */
+  width: 95%;
+  background: white;
+  margin: auto;
+  border-radius: 10px;
+  line-height: 30px;
+  padding: 10px;
+}
+.spuName {
+  text-decoration: none;
+  font-weight: bold;
+  word-wrap: normal;
+  font-size: 18px;
+  color: #333333;
+}
+.price_group {
+  color: #ff2f2f;
+}
+.price {
+  text-decoration: none;
+  font-weight: bold;
+  word-wrap: normal;
+  font-size: 25px;
+  color: #ff2f2f;
+}
+.price_info {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+.ys {
+  font-size: 14px;
+}
+</style>

src/views/product/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="app-container">
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="全部商品" :name="1">
+        <allProduct></allProduct>
+      </el-tab-pane>
+      <el-tab-pane label="草稿箱" :name="2">
+        <draftProduct></draftProduct>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import allProduct from "./list/allProduct.vue";
+import draftProduct from "./list/draftProduct.vue";
+export default {
+  components: {
+    allProduct,
+    draftProduct,
+  },
+  name: "product",
+  data() {
+    return {
+      activeName: 1,
+    };
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
+<style>
+.el-form-item {
+  margin-bottom: 10px;
+}
+</style>

src/views/product/list/allProduct.vue

@@ -0,0 +1,649 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="80px"
+    >
+      <el-form-item label="商品名称" prop="spuName">
+        <el-input
+          v-model="queryParams.spuName"
+          placeholder="请输入商品名称"
+          clearable
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="分类" prop="categoryId">
+        <el-cascader
+          v-model="queryParams.categoryId"
+          ref="formCascader"
+          placeholder="请选择分类"
+          :props="categoryprops"
+          @change="cascaderChange"
+        />
+      </el-form-item>
+
+      <el-form-item label="商品状态" prop="spuStatus">
+        <el-select v-model="queryParams.spuStatus" placeholder="请选择商品状态">
+          <el-option label="售罄" value="2"> </el-option>
+          <el-option label="上架" value="0"> </el-option>
+          <el-option label="下架" value="1"> </el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5" v-if="!activeShowBtn">
+        <el-button
+          type="primary"
+          plain
+          size="mini"
+          @click="addActive"
+          :disabled="!multipleSelection.length > 0"
+          >添加商品到活动</el-button
+        >
+      </el-col>
+      <template v-else>
+        <el-col :span="1.5">
+          <el-button type="primary" plain size="mini" @click="prouctAdd"
+            >发布商品</el-button
+          >
+        </el-col>
+        <el-dropdown>
+          <el-button type="primary" plain size="mini">
+            更多批量操作<i class="el-icon-arrow-down el-icon--right"></i>
+          </el-button>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item style="color: red">批量删除</el-dropdown-item>
+            <el-dropdown-item>批量加入活动</el-dropdown-item>
+            <el-dropdown-item>批量导出</el-dropdown-item>
+            <el-dropdown-item>批量下架</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </template>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      :data="configList"
+      @selection-change="handleSelectionChange"
+      row-key="id"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="商品图片" align="center">
+        <template slot-scope="scope">
+          <el-image
+            style="width: 60px; height: 60px"
+            :src="scope.row.pic"
+            :preview-src-list="[scope.row.pic]"
+          >
+          </el-image>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="商品名称"
+        align="center"
+        prop="spuName"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column label="分类" align="center" prop="categoryName" />
+      <el-table-column label="价格" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.lowestPrice }}/{{ scope.row.unit }}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="起批量" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.lowestPurchase }}{{ scope.row.unit }}
+        </template>
+      </el-table-column>
+      <el-table-column label="库存" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.totalStocks }}{{ scope.row.unit }}
+        </template>
+      </el-table-column>
+      <el-table-column label="销量" align="center" prop="salesVolume"> </el-table-column>
+      <!-- <el-table-column label="分销比例" align="center" prop="shareRate" /> -->
+      <el-table-column label="销售模式" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.saleModel == 1 ? "现货" : "预售" }}
+        </template>
+      </el-table-column>
+      <el-table-column label="销售方式" align="center">
+        <template slot-scope="scope">
+          {{
+            scope.row.saleType == 0
+              ? "整车"
+              : scope.row.saleType == 1
+              ? "零售"
+              : scope.row.saleType == 2
+              ? "拼车"
+              : scope.row.saleType == 3
+              ? "一件代发"
+              : ""
+          }}
+        </template>
+      </el-table-column>
+      <el-table-column label="发布状态" align="center">
+        <template slot-scope="scope">
+          {{
+            scope.row.releaseStatus == 0
+              ? "未发布"
+              : scope.row.releaseStatus == 1
+              ? "已发布"
+              : ""
+          }}
+        </template>
+      </el-table-column>
+      <el-table-column label="商品属性" align="center" width="150">
+        <template slot-scope="scope">
+          <div v-for="(item, index) in scope.row.propNew" :key="index">
+            <div style="text-align: left">属性{{ index + 1 }}：{{ item.name }}</div>
+            <div style="text-align: left">属性值{{ index + 1 }}：{{ item.value }}</div>
+          </div>
+        </template>
+      </el-table-column>
+
+      <!-- <el-table-column label="发货时间" align="center" prop="shippingTimeDesc">
+          </el-table-column> -->
+      <el-table-column label="商品状态" align="center">
+        <template slot-scope="scope">
+          {{
+            scope.row.spuStatus == 2
+              ? "售罄"
+              : scope.row.spuStatus == 0
+              ? "上架"
+              : scope.row.spuStatus == 1
+              ? "下架"
+              : ""
+          }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+        width="200"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            @click="handleLook(scope.row)"
+            v-hasPermi="['manage:order:detail']"
+            >预览</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            :style="scope.row.spuStatus == 1 ? 'color:green' : 'color:red'"
+            @click="handleStatus(scope.row)"
+            v-hasPermi="['manage:order:detail']"
+            >{{
+              scope.row.spuStatus == 1 ? "上架" : scope.row.spuStatus == 0 ? "下架" : ""
+            }}</el-button
+          >
+
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['manage:order:detail']"
+            >编辑商品</el-button
+          >
+          <!-- <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleSpecification(scope.row)"
+            v-hasPermi="['manage:order:detail']"
+            >编辑</el-button
+          >
+         -->
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            style="color: red"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['manage:order:detail']"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNo"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <lookProduct ref="lookProductRefs"></lookProduct>
+    <el-dialog
+      title="编辑"
+      :visible.sync="dialogVisible"
+      width="60%"
+      :before-close="dialogVisible == false"
+    >
+      <el-table :data="dataTable.skuList" style="width: 100%; margin-top: 20px">
+        <el-table-column prop="name" label="规格名称" width="160">
+          <template slot-scope="scope">
+            <el-input
+              v-model="scope.row.skuSpecsList[0].specsName"
+              placeholder="请输入规格名称"
+              clearable
+              @input="passValue"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column prop="address" label="规格内容" width="160">
+          <template slot-scope="scope">
+            <el-input
+              v-model="scope.row.skuSpecsList[0].specsValue"
+              placeholder="规格内容"
+              clearable
+              @input="passValue"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="库存" width="160">
+          <template slot-scope="scope">
+            <el-input
+              v-model="scope.row.stock"
+              placeholder="库存"
+              clearable
+              @input="passValue"
+            >
+              <template slot="suffix"> {{ unit }} </template>
+            </el-input>
+          </template>
+        </el-table-column>
+        <el-table-column prop="address" label="起批量" width="160">
+          <template slot-scope="scope">
+            <el-input
+              v-model="scope.row.minPurchase"
+              placeholder="起批量"
+              clearable
+              @input="passValue"
+            >
+              <template slot="suffix">
+                {{ unit }}
+              </template>
+            </el-input>
+          </template>
+        </el-table-column>
+        <el-table-column prop="address" label="收购价" width="160">
+          <template slot-scope="scope">
+            <el-input
+              v-model="scope.row.skuCost.purchaseFee"
+              placeholder="收购价"
+              clearable
+              @input="passValue"
+            >
+              <template slot="suffix"> {{ unit }}/元 </template>
+            </el-input>
+          </template>
+        </el-table-column>
+        <el-table-column prop="address" label="人工费" width="160">
+          <template slot-scope="scope">
+            <el-input
+              v-model="scope.row.skuCost.laborFee"
+              placeholder="人工费"
+              clearable
+              @input="passValue"
+            >
+              <template slot="suffix"> {{ unit }}/元 </template>
+            </el-input>
+          </template>
+        </el-table-column>
+        <el-table-column prop="address" label="代办费" width="160">
+          <template slot-scope="scope">
+            <el-input
+              v-model="scope.row.skuCost.agencyFee"
+              placeholder="代办费"
+              clearable
+              @input="passValue"
+            >
+              <template slot="suffix"> {{ unit }}/元 </template>
+            </el-input>
+          </template>
+        </el-table-column>
+        <el-table-column prop="address" label="材料费" width="160">
+          <template slot-scope="scope">
+            <el-input
+              @input="passValue"
+              v-model="scope.row.skuCost.materialFee"
+              placeholder="材料费"
+              clearable
+            >
+              <template slot="suffix"> {{ unit }}/元 </template>
+            </el-input>
+          </template>
+        </el-table-column>
+        <el-table-column prop="address" label="商品单价" width="80">
+          <template slot-scope="scope">
+            {{ computePrice(scope.row) }}元/{{ unit }}
+          </template>
+        </el-table-column>
+        <!-- <el-table-column prop="address" label="操作" width="160">
+            <template slot-scope="scope">
+              <el-button
+                type="text"
+                style="color: red"
+                @click="removeSpecification(scope, scope.$index)"
+                >删除</el-button
+              >
+            </template>
+          </el-table-column> -->
+      </el-table>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitGg">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getGoodsListPage,
+  getGoodsInfo,
+  GoodsUpOrDown,
+  editGoods,
+  goodsRemove,
+} from "@/api/manage/product";
+import { getClassificationListPage } from "@/api/common/index";
+import lookProduct from "../lookProduct.vue";
+export default {
+  components: { lookProduct },
+  name: "product",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      showSearch: true,
+      total: 0,
+      configList: [],
+      title: "",
+      subTitle: "",
+      open: false,
+      subOpen: false,
+      dialogVisible: false,
+      // 日期范围
+      dateRange: [],
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        categoryId: "",
+        spuStatus: "",
+        spuName: "",
+      },
+      // 表单参数
+      form: {},
+      categoryprops: {
+        checkStrictly: true,
+        lazy: true,
+        lazyLoad: this.categoryLazyLoad,
+      },
+      activeShowBtn: true,
+      multipleSelection: [],
+      toggle: true,
+      dataTable: {},
+      unit: "",
+      skuId: "",
+    };
+  },
+  mounted() {
+    this.getList();
+  },
+  methods: {
+    back() {
+      this.toggle = true;
+    },
+    handleDelete(record) {
+      this.$confirm("是否确认删除该商品？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          goodsRemove({
+            spuId: record.id,
+          }).then((res) => {
+            if (res.code == 200) {
+              this.$message.success(`删除成功！`);
+              this.getList();
+            }
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消操作",
+          });
+        });
+    },
+
+    submitGg() {
+      console.log(this.dataTable);
+      console.log(this.dataTable.skuList);
+      let params = {
+        spuId: this.skuId,
+        skuList: this.dataTable.skuList,
+      };
+      // this.dataTable.skuList.forEach((e) => {
+      //   params.skuPriceList.push(e.skuPriceList[0]);
+      //   params.skuSpecsList.push(e.skuSpecsList[0]);
+      // });
+      editGoods(params).then((res) => {
+        if (res.code == 200) {
+          this.$message.success("编辑成功");
+          this.dialogVisible = false;
+          this.getList();
+        }
+      });
+      console.log(params);
+    },
+
+    handRef(type, scope) {
+      if (type == "active") {
+        this.queryParams.scope = scope;
+        this.multipleSelection = [];
+        this.activeShowBtn = false;
+        this.getList();
+      }
+    },
+    addActive() {
+      this.$emit("multipleTable", this.multipleSelection);
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    /** 查询参数列表 */
+    getList() {
+      this.loading = true;
+      getGoodsListPage(this.queryParams).then((res) => {
+        this.configList = res.data.records;
+        this.total = res.data.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {};
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    prouctAdd() {
+      this.$router.push({ path: "/product/product/createProduct" });
+      // this.toggle = false;
+    },
+    handleStatus(record) {
+      let title = "";
+      if (record.spuStatus == 0) {
+        title = "是否确认下架该商品";
+      } else {
+        title = "是否确认上架该商品";
+      }
+      this.$confirm(title, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          GoodsUpOrDown({
+            spuId: record.id,
+            spuStatus: record.spuStatus == 1 ? 0 : record.spuStatus == 0 ? 1 : "",
+          }).then((res) => {
+            if (res.code == 200) {
+              this.$message.success(`操作成功！`);
+              this.getList();
+            }
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消操作",
+          });
+        });
+    },
+    handleSpecification(record) {
+      this.skuId = record.id;
+      getGoodsInfo({ spuId: record.id }).then((res) => {
+        if (res.code == 200) {
+          let params = res.data;
+          this.dataTable = params;
+          this.dataTable = JSON.parse(JSON.stringify(this.dataTable));
+          this.unit = record.unit;
+          console.log("1321231", this.dataTable);
+          this.dialogVisible = true;
+        }
+      });
+    },
+
+    handleUpdate(record) {
+      getGoodsInfo({ spuId: record.id }).then((res) => {
+        if (res.code == 200) {
+          let params = res.data;
+          this.$router.push({
+            path: "/product/product/updateProduct",
+            query: { params },
+          });
+        }
+      });
+    },
+    computePrice(data) {
+      if (
+        data.skuCost.purchaseFee &&
+        data.skuCost.laborFee &&
+        data.skuCost.agencyFee &&
+        data.skuCost.materialFee
+      ) {
+        return (
+          parseInt(data.skuCost.purchaseFee) +
+          parseInt(data.skuCost.laborFee) +
+          parseInt(data.skuCost.agencyFee) +
+          parseInt(data.skuCost.materialFee)
+        );
+      } else {
+        return 0;
+      }
+    },
+    handleLook(record) {
+      getGoodsInfo({ spuId: record.id }).then((res) => {
+        if (res.code == 200) {
+          this.$refs.lookProductRefs.openDialog(res.data);
+        }
+      });
+    },
+
+    cascaderChange(val) {
+      if (val.length == 1) {
+        this.queryParams.categoryId = val[0];
+      } else if (val.length == 2) {
+        this.queryParams.categoryId = val[1];
+      } else if (val.length == 3) {
+        this.queryParams.categoryId = val[2];
+      }
+      // this.getList();
+    },
+    categoryLazyLoad(node, resolve) {
+      let level = node.level;
+      console.log(node);
+      if (!node.data) {
+        getClassificationListPage({ parentId: 0 }).then((res) => {
+          //接口
+          const nodes = Array.from(res.data).map((item, index) => ({
+            value: item.id,
+            label: `${item.className}`,
+            leaf: level >= 2,
+          }));
+          console.log("111", node);
+          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
+          resolve(nodes);
+        });
+      } else if (level == 1) {
+        getClassificationListPage({ parentId: node.data.value }).then((res) => {
+          const nodes = Array.from(res.data).map((item) => ({
+            value: item.id,
+            label: `${item.className}`,
+            leaf: level >= 2,
+            // level: 2,
+          }));
+          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
+          resolve(nodes);
+        });
+      } else if (level == 2) {
+        getClassificationListPage({ parentId: node.data.value }).then((res) => {
+          const nodes = Array.from(res.data).map((item) => ({
+            value: item.id,
+            label: `${item.className}`,
+            leaf: level >= 1,
+            level: 1,
+          }));
+          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
+          resolve(nodes);
+        });
+      } else {
+        resolve({});
+      }
+    },
+  },
+};
+</script>
+<style>
+.el-form-item {
+  margin-bottom: 10px;
+}
+</style>

src/views/product/list/draftProduct.vue

@@ -0,0 +1,230 @@
+<template>
+  <div class="app-container">
+    <!-- <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      label-width="80px"
+    >
+      <el-form-item label="商品名称" prop="spuName">
+        <el-input
+          v-model="queryParams.spuName"
+          placeholder="请输入商品名称"
+          clearable
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form> -->
+
+    <el-table v-loading="loading" :data="configList" row-key="id">
+      <!-- <el-table-column type="selection" width="55" align="center" /> -->
+      <el-table-column label="商品图片" align="center">
+        <template slot-scope="scope">
+          <el-image
+            style="width: 60px; height: 60px"
+            :src="scope.row.goodsDto.pic"
+            :preview-src-list="[scope.row.goodsDto.pic]"
+          >
+          </el-image>
+        </template>
+      </el-table-column>
+      <el-table-column label="商品名称" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.goodsDto.title }}
+        </template>
+      </el-table-column>
+      <el-table-column label="分类" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.goodsDto.categoryName }}
+        </template>
+      </el-table-column>
+      <el-table-column label="价格" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.goodsDto.skuList[0].skuPriceList[0].price }}/{{
+            scope.row.goodsDto.unit
+          }}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="起批量" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.goodsDto.skuList[0].skuPriceList[0].minPurchase
+          }}{{ scope.row.goodsDto.unit }}
+        </template>
+      </el-table-column>
+      <el-table-column label="库存" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.goodsDto.skuList[0].stock }}{{ scope.row.goodsDto.unit }}
+        </template>
+      </el-table-column>
+      <el-table-column label="销售模式" align="center">
+        <template slot-scope="scope">
+          {{
+            scope.row.goodsDto.saleModel == 1
+              ? "现货"
+              : scope.row.goodsDto.saleModel == 2
+              ? "预售"
+              : ""
+          }}
+        </template>
+      </el-table-column>
+      <el-table-column label="销售方式" align="center">
+        <template slot-scope="scope">
+          {{
+            scope.row.goodsDto.saleType == 0
+              ? "整车"
+              : scope.row.goodsDto.saleType == 1
+              ? "同城"
+              : scope.row.goodsDto.saleType == 2
+              ? "拼车"
+              : scope.row.goodsDto.saleType == 3
+              ? "一件代发"
+              : ""
+          }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+        width="200"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['manage:order:detail']"
+            >编辑商品</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            style="color: red"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['manage:order:detail']"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import {
+  getGoodsListPage,
+  getGoodsInfo,
+  GoodsUpOrDown,
+  editGoods,
+  goodsRemove,
+  getGoodsDraftByUserId,
+} from "@/api/manage/product";
+export default {
+  name: "product",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      configList: [],
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+      },
+      // 表单参数
+      form: {},
+    };
+  },
+  mounted() {
+    this.getList();
+  },
+  methods: {
+    /** 查询参数列表 */
+    getList() {
+      this.loading = true;
+      getGoodsDraftByUserId().then((res) => {
+        this.configList = res.data;
+        console.log(this.configList);
+        this.loading = false;
+      });
+    },
+    handleDelete(record) {
+      this.$confirm("是否确认删除该商品？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          goodsRemove({
+            spuId: record.id,
+          }).then((res) => {
+            if (res.code == 200) {
+              this.$message.success(`删除成功！`);
+              this.getList();
+            }
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消操作",
+          });
+        });
+    },
+
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {};
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    handleUpdate(record) {
+      getGoodsInfo({ spuId: record.id }).then((res) => {
+        if (res.code == 200) {
+          let params = res.data;
+          this.$router.push({
+            path: "/product/product/updateProduct",
+            query: { params },
+          });
+        }
+      });
+    },
+  },
+};
+</script>
+<style>
+.el-form-item {
+  margin-bottom: 10px;
+}
+</style>

src/views/product/lookProduct.vue

@@ -0,0 +1,295 @@
+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    width="20%"
+    :before-close="closeDialog"
+    custom-class="phone"
+    :destroy-on-close="true"
+  >
+    <phoneView>
+      <div slot="conts">
+        <div>
+          <el-carousel height="200px">
+            <el-carousel-item v-for="(item, index) in headerImg" :key="index">
+              <el-image
+                v-if="item.type == 'img'"
+                style="width: 100%; height: 200px"
+                :src="item.src"
+                :preview-src-list="[item.src]"
+              >
+              </el-image>
+              <video
+                v-if="item.type == 'video'"
+                :key="index"
+                controls
+                :src="item.src"
+                style="width: 100%; height: 200px"
+              ></video>
+            </el-carousel-item>
+          </el-carousel>
+        </div>
+        <img
+          style="width: 100%"
+          src="https://bucket.sxdirectpurchase.com/fileUpload/test/47fc6132-0b3e-4b5c-b858-f78d363eba90.png"
+          alt=""
+        />
+        <div class="card">
+          <div class="spuName">{{ form ? form.title : "" }}</div>
+          <div class="price_info">
+            <div class="price_group">
+              <span>￥</span
+              ><span class="price"
+                >{{
+                  form.skuList
+                    ? form.skuList[0].skuPriceList
+                      ? form.skuList[0].skuPriceList[0].price
+                      : 0
+                    : 0
+                }}元</span
+              ><span>/{{ form.unit }}</span>
+            </div>
+            <span class="ys">已售 0</span>
+          </div>
+        </div>
+        <div class="card" style="margin-top: 10px">
+          <div class="spuName">规格/价格</div>
+          <div v-for="(item, index) in form.skuList" :key="index">
+            <div class="price_info">
+              <span
+                >{{ item.skuSpecsList ? item.skuSpecsList[0].specsName : "" }}
+                {{ item.skuSpecsList ? item.skuSpecsList[0].specsValue : "" }}</span
+              >
+            </div>
+            <div
+              style="display: flex; flex-direction: row; justify-content: space-between"
+            >
+              <span style="font-size: 14px; color: red">
+                <span>￥</span>
+                <span>{{ item.skuPriceList ? item.skuPriceList[0].price : 0 }}元</span
+                ><span>/{{ form.unit }}</span></span
+              >
+              <span style="font-size: 14px"
+                >{{ item.skuPriceList ? item.skuPriceList[0].minPurchase : 0 }}/{{
+                  form.unit
+                }}起购</span
+              >
+              <span style="font-size: 14px">库存:{{ item.stock }}{{ form.unit }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="card" style="margin-top: 10px">
+          <el-form
+            :model="form"
+            ref="queryForm"
+            size="small"
+            :inline="true"
+            label-width="80px"
+            label-position="left"
+          >
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="发货地" prop="spuName">
+                  <div style="width: 185px">
+                    {{ form.shippingAddrBean ? form.shippingAddrBean.addr : "" }}
+                    {{ form.shippingAddrBean ? form.shippingAddrBean.addrDetail : "" }}
+                  </div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item label="发货时间" prop="spuName">
+                  {{ form.shippingTimeDesc }}
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item label="商品属性" prop="spuName">
+                  <div>查看></div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item label="包装方式" prop="spuName">
+                  {{ form.packing }}
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+        <div class="card" style="margin-top: 10px">
+          <div
+            style="
+              display: flex;
+              flex-direction: row;
+              justify-content: space-between;
+              align-items: center;
+            "
+          >
+            <span class="spuName">商品评价</span>
+            <span>好评率 <span style="color: red">100%</span></span>
+          </div>
+          <div
+            style="
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: center;
+            "
+          >
+            <img
+              style="width: 40%"
+              src="https://directpurchase-oss-dev.oss-cn-chengdu.aliyuncs.com/wx/static/images/kong.png"
+              alt=""
+            />
+            <span>还没有评价~</span>
+          </div>
+        </div>
+        <div class="card" style="margin-top: 10px">
+          <div class="spuName">商品介绍</div>
+          <div style="font-size: 14px; line-height: 25px">
+            {{ form.spuDesc }}
+          </div>
+        </div>
+        <div class="card" style="margin-top: 10px">
+          <div class="spuName">商品详情</div>
+          <div style="font-size: 14px; line-height: 25px">
+            <el-image
+              v-for="(item, index) in form.spuDetailList"
+              :key="index"
+              :src="item.fileUrl"
+              fit="fill"
+              :preview-src-list="[item.fileUrl]"
+            >
+            </el-image>
+          </div>
+          <div style="font-size: 14px; line-height: 25px">
+            <el-image
+              v-for="(item, index) in form.specialList"
+              :key="index"
+              :src="item.fileUrl"
+              fit="fill"
+              :preview-src-list="[item.fileUrl]"
+            >
+            </el-image>
+          </div>
+        </div>
+      </div>
+    </phoneView>
+  </el-dialog>
+</template>
+
+<script>
+import phoneView from "@/components/phoneView/index.vue";
+export default {
+  components: { phoneView },
+  data() {
+    return {
+      dialogVisible: false,
+      form: {},
+      headerImg: [],
+    };
+  },
+  methods: {
+    openDialog(record) {
+      this.form = record;
+      this.headerImg = [];
+      if (this.form.vid) {
+        this.headerImg.push({
+          type: "video",
+          src: this.form.vid,
+          sort: 1,
+        });
+      }
+      if (this.form.pic) {
+        this.headerImg.push({
+          type: "img",
+          src: this.form.pic,
+          sort: 2,
+        });
+      }
+      this.headerImg = this.unique(this.headerImg);
+      if (this.form.bannerList) {
+        this.form.bannerList.forEach((e, index) => {
+          this.headerImg.push({
+            type: "img",
+            src: e.fileUrl,
+            sort: index + 4,
+          });
+        });
+      }
+      this.headerImg.sort((a, b) => a.sort - b.sort); //排序 视频在最前面>封面>商品banner
+      this.dialogVisible = true;
+    },
+    unique(arr) {
+      const res = new Map();
+      return arr.filter((arr) => !res.has(arr.src) && res.set(arr.src, 1));
+    },
+    closeDialog() {
+      this.dialogVisible = false;
+    },
+  },
+};
+</script>
+<style scoped>
+/deep/ .el-dialog {
+  background: transparent !important;
+  /* margin: 0px !important; */
+  box-shadow: none !important;
+  padding: 0px !important;
+}
+/deep/ .el-dialog__body {
+  margin: 0px !important;
+  padding: 0px !important;
+}
+/deep/ .el-dialog__header {
+  margin: 0px !important;
+  padding: 0px !important;
+}
+/deep/ .phone {
+  margin: auto;
+}
+/* .phone /deep/ .el-dialog__headerbtn {
+  border-radius: 50%;
+  width: 30px !important;
+  height: 30px !important;
+  background: #fff !important;
+  top: -5px !important;
+  right: 6px !important;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+} */
+.card {
+  /* height: 85px; */
+  width: 95%;
+  background: white;
+  margin: auto;
+  border-radius: 10px;
+  line-height: 30px;
+  padding: 10px;
+}
+.spuName {
+  text-decoration: none;
+  font-weight: bold;
+  word-wrap: normal;
+  font-size: 18px;
+  color: #333333;
+}
+.price_group {
+  color: #ff2f2f;
+}
+.price {
+  text-decoration: none;
+  font-weight: bold;
+  word-wrap: normal;
+  font-size: 25px;
+  color: #ff2f2f;
+}
+.price_info {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+.ys {
+  font-size: 14px;
+}
+</style>

src/views/product/module/basic-info.vue

@@ -0,0 +1,408 @@
+<template>
+  <el-form
+    :model="form"
+    ref="queryForm"
+    size="small"
+    :inline="true"
+    label-width="120px"
+    :rules="rules"
+  >
+    <el-row>
+      <!-- <el-col :span="24">
+          <el-form-item>
+            <span slot="label"><span class="required">*</span> 经营区域</span>
+            <el-radio-group v-model="form.scope" @change="passValue">
+              <el-radio :label="0" v-if="shopInfo.scope == 0">全国</el-radio>
+              <el-radio :label="1" v-if="shopInfo.scope == 1">同城</el-radio>
+              <el-radio :label="2" v-if="shopInfo.scope == 1">特价</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col> -->
+      <el-col :span="24">
+        <el-form-item>
+          <span slot="label"><span class="required">*</span> 销售方式</span>
+          <el-radio-group v-model="form.saleType" @change="passValue">
+            <el-radio :label="0" v-if="shopInfo.scope == 0">整车</el-radio>
+            <el-radio :label="2" v-if="shopInfo.scope == 0">拼车</el-radio>
+            <!-- <el-radio :label="3">预售</el-radio> -->
+            <el-radio :label="4" v-if="shopInfo.scope == 1">礼包</el-radio>
+            <el-radio :label="1" v-if="shopInfo.scope == 1">同城商品</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" v-if="form.saleType == 0">
+        <el-form-item>
+          <span slot="label"><span class="required">*</span> 销售模式</span>
+          <el-radio-group v-model="form.saleModel" @change="passValue">
+            <el-radio :label="1">现货</el-radio>
+            <el-radio :label="2">预售</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" v-if="form.saleModel == 2">
+        <el-form-item>
+          <span slot="label"><span class="required">*</span> 预售时间</span>
+          <el-date-picker
+            v-model="datePicker"
+            type="datetimerange"
+            range-separator="至"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            @change="picker"
+          >
+          </el-date-picker>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="24">
+        <el-form-item>
+          <span slot="label"><span class="required">*</span> 商品分类</span>
+          <el-cascader
+            v-model="form.categoryId"
+            ref="formCascader"
+            placeholder="请选择分类"
+            :props="categoryprops"
+            @change="cascaderChange"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item>
+          <span slot="label"><span class="required">*</span> 商品名称</span>
+          <el-input
+            v-model="form.title"
+            placeholder="请输入商品名称"
+            clearable
+            style="width: 260px"
+            @input="passValue"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" v-if="form.saleType == 4">
+        <el-form-item>
+          <span slot="label"><span class="required">*</span> 礼包描述</span>
+          <el-input
+            @input="passValue"
+            v-model="form.giftDesc"
+            placeholder="请输入礼包描述"
+            clearable
+            style="width: 600px"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="商品视频">
+          <span class="tips">上传视频用户看的更直接</span>
+          <el-upload
+            list-type="picture-card"
+            :show-file-list="false"
+            :http-request="(data) => requestUpload(data, 'video')"
+            :limit="1"
+            action="#"
+            accept=".mp4"
+            ref="files"
+          >
+            <video
+              v-if="form.vid"
+              controls
+              :src="form.vid"
+              style="width: 80px; height: 80px"
+            ></video>
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </el-form-item>
+      </el-col>
+      <!-- <el-col :span="24">
+          <el-form-item>
+            <span slot="label"><span class="required">*</span> 商品封面图</span>
+            <span class="tips">商品的封面展示图</span>
+            <el-upload
+              list-type="picture-card"
+              :http-request="(data) => requestUpload(data, 'image')"
+              :show-file-list="false"
+              :limit="1"
+              action="#"
+              accept=".png,.jpg,.jpeg"
+              ref="files"
+            >
+              <img v-if="form.pic" :src="form.pic" style="width: 60px; height: 60px" />
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+          </el-form-item>
+        </el-col> -->
+      <el-col :span="24">
+        <el-form-item prop="bannerList">
+          <span slot="label"><span class="required">*</span> 商品图</span>
+          <span class="tips"
+            >图片要求:大小3M内,至多可上传10张,第一张图默认为商品封面图</span
+          >
+          <div style="display: flex; flex-direction: row; align-items: center">
+            <draggable
+              style="display: flex; flex-direction: row; align-items: center"
+              v-model="bannerList"
+              group="people"
+              @change="draggableChange"
+              @start="start"
+              @end="end"
+            >
+              <div class="item" v-for="(item, index) in this.bannerList" :key="index">
+                <div class="fmt" v-if="index == 0">封面图</div>
+                <div class="gb" @click="removeImg(index)">X</div>
+                <img :src="item.url" style="width: 70px; height: 70px" />
+              </div>
+            </draggable>
+            <!-- <div class="fmt" v-if="index == 0">封面图</div>
+                <img :src="item.url" style="width: 70px; height: 75px" /> -->
+            <el-upload
+              list-type="picture-card"
+              :file-list="bannerList"
+              :before-remove="requestRemove"
+              :http-request="(data) => requestUpload(data, 'banner')"
+              :show-file-list="false"
+              :limit="11"
+              action="#"
+              :multiple="true"
+              accept=".png,.jpg,.jpeg"
+              ref="files"
+            >
+              <i class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+          </div>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+import draggable from "vuedraggable";
+import { getStoreInfo } from "@/api/common/index";
+import { getClassificationListPage } from "@/api/common/index.js";
+import { getToken } from "@/utils/auth";
+import axios from "axios";
+export default {
+  props: ["data"],
+  components: { draggable },
+  data() {
+    return {
+      form: {
+        bannerList: [],
+      },
+      bannerList: [],
+      headers: { Auth: "Bearer " + getToken(), "Content-type": "multipart/form-data" },
+      categoryprops: {
+        checkStrictly: true,
+        lazy: true,
+        lazyLoad: this.categoryLazyLoad,
+        label: "label",
+        value: "value",
+      },
+      rules: {
+        scope: [{ required: true, message: "经营区域不能为空", trigger: "blur" }],
+        saleType: [{ required: true, message: "销售方式不能为空", trigger: "blur" }],
+        saleModel: [{ required: true, message: "销售模式不能为空", trigger: "blur" }],
+        categoryId: [{ required: true, message: "分类不能为空", trigger: "blur" }],
+        title: [{ required: true, message: "商品名称不能为空", trigger: "blur" }],
+        giftDesc: [{ required: true, message: "礼包描述不能为空", trigger: "blur" }],
+        pic: [{ required: true, message: "封面图不能为空", trigger: "blur" }],
+      },
+      index: 0,
+      shopInfo: {},
+      datePicker: [],
+    };
+  },
+  watch: {
+    //监听info对象
+    data: {
+      handler(newVal, oldVal) {
+        //监听info对象变化
+        console.log("newVal", newVal);
+        if (this.newVal) {
+          console.log("xxxx", this.newVal);
+          for (const key in this.form) {
+            this.form[key] = this.newVal[key];
+          }
+          this.datePicker = [this.newVal.presaleStartTime, this.newVal.presaleEndTime];
+          this.form.bannerList.forEach((e) => {
+            this.bannerList.push({
+              url: e.fileUrl,
+            });
+          });
+        }
+      },
+      deep: true, //深度监听
+      immediate: true,
+    },
+  },
+
+  mounted() {
+    this.getInfo();
+  },
+  methods: {
+    removeImg(index) {
+      this.bannerList.splice(index, 1);
+      this.passValue();
+    },
+    picker() {
+      console.log(this.datePicker);
+      this.form.presaleStartTime = this.datePicker[0];
+      this.form.presaleEndTime = this.datePicker[1];
+      this.passValue();
+    },
+    getInfo() {
+      getStoreInfo().then((res) => {
+        if (res.code == 200) {
+          this.shopInfo = res.data;
+          this.form.scope = res.data.scope;
+        }
+      });
+    },
+    draggableChange() {
+      this.passValue();
+    },
+
+    passValue() {
+      this.form.bannerList = [];
+      console.log("111", this.bannerList);
+      for (let index = 0; index < this.bannerList.length; index++) {
+        this.form.bannerList.push({
+          fileUrl: this.bannerList[index].url,
+          sort: this.bannerList[index].name,
+        });
+      }
+      this.form.pic = this.bannerList[0].url;
+
+      this.$emit("updateValue", this.form);
+    },
+
+    requestRemove(val, list, index) {
+      console.log(val);
+      this.bannerList.forEach((e, index) => {
+        if (e.uid == val.uid) {
+          this.bannerList.splice(index, 1);
+        }
+      });
+      this.passValue();
+    },
+    cascaderChange(val) {
+      let nodes = this.$refs.formCascader.getCheckedNodes();
+      this.form.categoryName = nodes[0].label;
+      this.form.categoryIds = val;
+      if (val.length == 1) {
+        this.form.categoryId = val[0];
+      } else if (val.length == 2) {
+        this.form.categoryId = val[1];
+      } else if (val.length == 3) {
+        this.form.categoryId = val[2];
+      }
+      this.passValue();
+    },
+    categoryLazyLoad(node, resolve) {
+      let that = this;
+      let level = node.level;
+      console.log(node);
+      if (!node.data) {
+        getClassificationListPage({ parentId: 0 }).then((res) => {
+          //接口
+          const nodes = Array.from(res.data).map((item, index) => ({
+            value: item.id,
+            label: `${item.className}`,
+            leaf: level >= 2,
+          }));
+          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
+          resolve(nodes);
+        });
+      } else if (level == 1) {
+        getClassificationListPage({ parentId: node.data.value }).then((res) => {
+          const nodes = Array.from(res.data).map((item) => ({
+            value: item.id,
+            label: `${item.className}`,
+            leaf: level >= 2,
+            // level: 2,
+          }));
+          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
+          resolve(nodes);
+        });
+      } else if (level == 2) {
+        getClassificationListPage({ parentId: node.data.value }).then((res) => {
+          const nodes = Array.from(res.data).map((item) => ({
+            value: item.id,
+            label: `${item.className}`,
+            leaf: level >= 1,
+            level: 1,
+          }));
+          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
+          resolve(nodes);
+        });
+      } else {
+        resolve({});
+      }
+    },
+
+    // 可以获取图片参数
+    async requestUpload(data, type) {
+      const formdata = new FormData();
+      formdata.append("file", data.file);
+      const res = await axios.post(
+        `${process.env.VUE_APP_NSY_UPLOAD_API}/api/third/op/v1/third/uploadPic`,
+        formdata,
+        {
+          headers: this.headers,
+        }
+      );
+      if (res.data.data) {
+        if (type == "video") {
+          this.form.vid = res.data.data;
+        } else if (type == "banner") {
+          this.bannerList.push({
+            name: this.index,
+            url: res.data.data,
+          });
+          this.index++;
+        }
+        this.passValue();
+        this.$forceUpdate();
+      }
+    },
+  },
+};
+</script>
+
+<style>
+.el-cascader-panel
+  > .el-scrollbar:first-child
+  > .el-cascader-menu__wrap
+  > .el-cascader-menu__list
+  > .el-cascader-node
+  > .el-radio {
+  display: none;
+}
+/* .el-cascader-menu__wrap > .el-cascader-menu__list > .el-cascader-node > .el-radio {
+    display: none;
+  } */
+</style>
+
+<style scoped>
+.item {
+  position: relative;
+}
+.gb {
+  position: absolute;
+  left: 59px;
+  top: -8px;
+  cursor: pointer;
+}
+.fmt {
+  position: absolute;
+  width: 70px;
+  height: 20px;
+  background: #0000003d;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  bottom: 10px;
+}
+</style>

src/views/product/module/product-info.vue

@@ -0,0 +1,158 @@
+<template>
+  <el-form :model="form" ref="queryForm" size="small" :inline="true" label-width="120px">
+    <el-row>
+      <el-col :span="24">
+        <el-form-item>
+          <span slot="label"><span class="required">*</span> 商品介绍</span>
+          <el-input
+            style="width: 700px"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入商品介绍"
+            v-model="form.spuDesc"
+            @input="passValue"
+          >
+          </el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="商品详情图" prop="spuName">
+          <span class="tips">最多可上传10张</span>
+          <el-upload
+            list-type="picture-card"
+            :file-list="spuDetailList"
+            :before-remove="requestRemove"
+            :http-request="(data) => requestUpload(data, 'detail')"
+            :show-file-list="true"
+            :limit="10"
+            action="#"
+            :multiple="true"
+            accept=".png,.jpg,.jpeg"
+            ref="files"
+          >
+            <i class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="特殊资质图" prop="spuName">
+          <span class="tips">例如农残检测报告等，最多可上传10张</span>
+          <el-upload
+            list-type="picture-card"
+            :file-list="specialList"
+            :before-remove="requestRemove1"
+            :http-request="(data) => requestUpload(data, 'zz')"
+            :show-file-list="true"
+            :limit="10"
+            action="#"
+            :multiple="true"
+            accept=".png,.jpg,.jpeg"
+            ref="files"
+          >
+            <i class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+import { getToken } from "@/utils/auth";
+import axios from "axios";
+export default {
+  props: ["data"],
+  data() {
+    return {
+      form: {
+        spuDetailList: [],
+        specialList: [],
+      },
+      headers: { Auth: "Bearer " + getToken(), "Content-type": "multipart/form-data" },
+      spuDetailList: [],
+      specialList: [],
+      index: 0,
+      index1: 0,
+    };
+  },
+  mounted() {
+    console.log("base", this.data);
+    if (this.data) {
+      this.form = this.data;
+    }
+  },
+  methods: {
+    passValue() {
+      if (this.specialList) {
+        this.form.specialList = [];
+        for (let index = 0; index < this.specialList.length; index++) {
+          this.form.specialList.push({
+            fileUrl: this.specialList[index].url,
+            sort: this.specialList[index].name,
+          });
+        }
+      }
+      if (this.spuDetailList) {
+        this.form.spuDetailList = [];
+        for (let index = 0; index < this.spuDetailList.length; index++) {
+          this.form.spuDetailList.push({
+            fileUrl: this.spuDetailList[index].url,
+            sort: this.spuDetailList[index].name,
+          });
+        }
+      }
+      this.$emit("updateValue", this.form);
+    },
+    requestRemove1(val) {
+      console.log(val);
+      this.specialList.forEach((e, index) => {
+        if (e.uid == val.uid) {
+          this.specialList.splice(index, 1);
+        }
+      });
+      this.passValue();
+    },
+    requestRemove(val) {
+      console.log(val);
+      this.spuDetailList.forEach((e, index) => {
+        if (e.uid == val.uid) {
+          this.spuDetailList.splice(index, 1);
+        }
+      });
+      this.passValue();
+    },
+
+    // 可以获取图片参数
+    async requestUpload(data, type) {
+      const formdata = new FormData();
+      formdata.append("file", data.file);
+      const res = await axios.post(
+        `${process.env.VUE_APP_NSY_UPLOAD_API}/api/third/op/v1/third/uploadPic`,
+        formdata,
+        {
+          headers: this.headers,
+        }
+      );
+      if (res.data.data) {
+        if (type == "detail") {
+          this.spuDetailList.push({
+            name: this.index,
+            url: res.data.data,
+          });
+          this.index++;
+        } else if (type == "zz") {
+          this.specialList.push({
+            name: this.index1,
+            url: res.data.data,
+          });
+          this.index1++;
+        }
+        this.passValue();
+        this.$forceUpdate();
+      }
+    },
+  },
+};
+</script>
+
+<style></style>

src/views/product/module/sales-info.vue

@@ -0,0 +1,564 @@
+<template>
+  <el-form
+    :model="form"
+    ref="queryForm"
+    size="small"
+    :inline="true"
+    label-width="120px"
+    :rules="rules"
+  >
+    <el-row>
+      <el-col :span="24">
+        <el-form-item>
+          <span slot="label"><span class="required">*</span> 计量单位</span>
+          <el-select v-model="form.unit" placeholder="请选择" @change="passValue">
+            <el-option
+              v-for="item in measure"
+              :key="item.dictLabel"
+              :label="item.dictLabel"
+              :value="item.dictLabel"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item>
+          <span slot="label"><span class="required">*</span> 商品规格</span>
+          <el-button @click="addSpecification" type="primary">添加规格</el-button>
+          <el-table
+            :data="form.skuList"
+            style="width: 100%; margin-top: 20px"
+            v-if="shopInfo.scope == 0"
+          >
+            <el-table-column prop="name" label="规格名称" width="160">
+              <template slot-scope="scope">
+                <el-input
+                  v-model="scope.row.skuSpecsList[0].specsName"
+                  placeholder="请输入规格名称"
+                  clearable
+                  @input="passValue"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column prop="address" label="规格内容" width="160">
+              <template slot-scope="scope">
+                <el-input
+                  v-model="scope.row.skuSpecsList[0].specsValue"
+                  placeholder="规格内容"
+                  clearable
+                  @input="passValue"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column prop="name" label="库存" width="160">
+              <template slot-scope="scope">
+                <el-input
+                  v-model="scope.row.stock"
+                  placeholder="库存"
+                  clearable
+                  @input="passValue"
+                >
+                  <template slot="suffix"> {{ form.unit }} </template>
+                </el-input>
+              </template>
+            </el-table-column>
+            <el-table-column prop="address" label="起批量" width="160">
+              <template slot-scope="scope">
+                <el-input
+                  v-model="scope.row.skuPriceList[0].minPurchase"
+                  placeholder="起批量"
+                  clearable
+                  @input="passValue"
+                >
+                  <template slot="suffix">
+                    {{ form.unit }}
+                  </template>
+                </el-input>
+              </template>
+            </el-table-column>
+            <el-table-column prop="address" label="收购价" width="160">
+              <template slot-scope="scope">
+                <el-input
+                  v-model="scope.row.skuCost.purchaseFee"
+                  placeholder="收购价"
+                  clearable
+                  @input="passValue"
+                >
+                  <template slot="suffix"> {{ form.unit }}/元 </template>
+                </el-input>
+              </template>
+            </el-table-column>
+            <el-table-column prop="address" label="人工费" width="160">
+              <template slot-scope="scope">
+                <el-input
+                  v-model="scope.row.skuCost.laborFee"
+                  placeholder="人工费"
+                  clearable
+                  @input="passValue"
+                >
+                  <template slot="suffix"> {{ form.unit }}/元 </template>
+                </el-input>
+              </template>
+            </el-table-column>
+            <el-table-column prop="address" label="代办费" width="160">
+              <template slot-scope="scope">
+                <el-input
+                  v-model="scope.row.skuCost.agencyFee"
+                  placeholder="代办费"
+                  clearable
+                  @input="passValue"
+                >
+                  <template slot="suffix"> {{ form.unit }}/元 </template>
+                </el-input>
+              </template>
+            </el-table-column>
+            <el-table-column prop="address" label="材料费" width="160">
+              <template slot-scope="scope">
+                <el-input
+                  @input="passValue"
+                  v-model="scope.row.skuCost.materialFee"
+                  placeholder="材料费"
+                  clearable
+                >
+                  <template slot="suffix"> {{ form.unit }}/元 </template>
+                </el-input>
+              </template>
+            </el-table-column>
+            <!-- <el-table-column prop="name" label="原价" width="180"> </el-table-column> -->
+            <el-table-column prop="address" label="商品单价" width="80">
+              <template slot-scope="scope">
+                {{ computePrice(scope.row) }}元/{{ form.unit }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="address" label="操作" width="160">
+              <template slot-scope="scope">
+                <el-button
+                  type="text"
+                  style="color: red"
+                  @click="removeSpecification(scope, scope.$index)"
+                  >删除</el-button
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-table
+            :data="form.skuList"
+            style="width: 100%; margin-top: 20px"
+            v-if="shopInfo.scope == 1"
+          >
+            <el-table-column prop="name" label="规格名称" width="160">
+              <template slot-scope="scope">
+                <el-input
+                  v-model="scope.row.skuSpecsList[0].specsName"
+                  placeholder="请输入规格名称"
+                  clearable
+                  @input="passValue"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column prop="address" label="规格内容" width="160">
+              <template slot-scope="scope">
+                <el-input
+                  v-model="scope.row.skuSpecsList[0].specsValue"
+                  placeholder="规格内容"
+                  clearable
+                  @input="passValue"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column prop="name" label="库存" width="160">
+              <template slot-scope="scope">
+                <el-input
+                  v-model="scope.row.stock"
+                  placeholder="库存"
+                  clearable
+                  @input="passValue"
+                >
+                  <template slot="suffix"> {{ form.unit }} </template>
+                </el-input>
+              </template>
+            </el-table-column>
+            <el-table-column label="起批量" width="160">
+              <template slot-scope="scope">
+                <el-input
+                  v-model="scope.row.skuPriceList[0].minPurchase"
+                  placeholder="起批量"
+                  clearable
+                  @input="passValue"
+                >
+                  <template slot="suffix">
+                    {{ form.unit }}
+                  </template>
+                </el-input>
+              </template>
+            </el-table-column>
+            <el-table-column label="批发价" width="160">
+              <template slot-scope="scope">
+                <el-input
+                  v-model="scope.row.skuPriceList[0].originalPrice"
+                  placeholder="收购价"
+                  clearable
+                  @input="passValue"
+                >
+                  <template slot="suffix"> {{ form.unit }}/元 </template>
+                </el-input>
+              </template>
+            </el-table-column>
+            <el-table-column prop="address" label="商品单价" width="80">
+              <template slot-scope="scope">
+                {{
+                  scope.row.skuPriceList[0].originalPrice
+                    ? scope.row.skuPriceList[0].originalPrice
+                    : 0
+                }}
+                元/{{ form.unit }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="address" label="操作" width="160">
+              <template slot-scope="scope">
+                <el-button
+                  type="text"
+                  style="color: red"
+                  @click="removeSpecification(scope, scope.$index)"
+                  >删除</el-button
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="margin-top: 20px">
+        <el-form-item>
+          <span slot="label"><span class="required">*</span> 商品属性</span>
+          <div class="main">
+            <div style="padding-top: 20px">
+              <el-form-item label="包装方式" prop="packing">
+                <el-select
+                  v-model="form.packing"
+                  placeholder="请选择包装方式"
+                  @change="passValue"
+                >
+                  <el-option
+                    v-for="item in package"
+                    :key="item.dictLabel"
+                    :label="item.dictLabel"
+                    :value="item.dictLabel"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item>
+                <span slot="label"><span class="required">*</span> 发货时间</span>
+                <el-select
+                  v-model="form.shippingTimeDesc"
+                  placeholder="请选择包装方式"
+                  @change="passValue"
+                >
+                  <el-option label="付款24小时之内" value="付款24小时之内" />
+                  <el-option label="付款36小时之内" value="付款36小时之内" />
+                  <el-option label="付款48小时之内" value="付款48小时之内" />
+                </el-select>
+              </el-form-item>
+            </div>
+
+            <el-form-item label="自定义属性" v-if="form.props && form.props.length > 0">
+              <div
+                style="
+                  width: 100%;
+                  display: flex;
+                  flex-direction: row;
+                  flex-flow: wrap;
+                  justify-content: center;
+                "
+              >
+                <div
+                  class="item"
+                  v-for="(item, index) in form.props ? form.props : []"
+                  :key="index"
+                >
+                  <el-input
+                    v-model="item.name"
+                    placeholder="请输入属性名称"
+                    clearable
+                    maxlength="8"
+                    show-word-limit
+                    @input="passValue"
+                    style="width: 200px"
+                  />
+                  <el-input
+                    v-model="item.value"
+                    placeholder="请输入属性值"
+                    clearable
+                    maxlength="8"
+                    show-word-limit
+                    @input="passValue"
+                    style="width: 200px"
+                  />
+                  <i
+                    class="el-icon-delete"
+                    size="22"
+                    style="color: red"
+                    @click="removeAttribute(item, index)"
+                  ></i>
+                </div>
+              </div>
+            </el-form-item>
+          </div>
+          <div class="item1" style="width: 180px">
+            <span @click="addattribute">
+              <i class="el-icon-plus" size="22"></i>自定义添加商品属性</span
+            >
+          </div>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="margin-top: 20px" v-if="shopInfo.scope == 0">
+        <el-form-item>
+          <span slot="label"><span class="required">*</span> 运费</span>
+          <div class="main1">
+            <el-radio-group
+              v-model="form.freeShipping"
+              class="radios"
+              @change="passValue"
+            >
+              <el-radio :label="0">双方协商后卖家进行修改，买家和订单一起支付</el-radio>
+              <el-radio :label="1">全国包邮，由卖家承担运费</el-radio>
+            </el-radio-group>
+          </div>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="margin-top: 20px">
+        <el-form-item>
+          <span slot="label"><span class="required">*</span> 发货地址</span>
+          <div style="display: flex; flex-direction: row; align-items: center">
+            <el-button
+              @click="selectAddr"
+              type="text"
+              style="
+                font-size: 16px;
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+              "
+              ><img src="@/assets/images/point.png" style="width: 20px; height: 20px" />
+              选择地址</el-button
+            >
+            <span style="margin-left: 20px">已选择地址:{{ addr }}</span>
+          </div>
+
+          <el-input
+            type="textarea"
+            :rows="3"
+            placeholder="请输入详细地址"
+            v-model="form.shippingAddrBean.addrDetail"
+            style="width: 700px"
+            @input="passValue"
+          >
+          </el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <Amap ref="mapOpen" @address="Mapaddress"></Amap>
+  </el-form>
+</template>
+
+<script>
+import { getStoreInfo } from "@/api/common/index";
+import Amap from "@/components/Map/map.vue";
+import { getDict } from "@/api/common/index.js";
+export default {
+  props: ["data"],
+  components: { Amap },
+  data() {
+    return {
+      form: {
+        unit: "斤",
+        props: [],
+        shippingAddrBean: {},
+        shippingAddr: "",
+        skuList: [],
+      },
+      addr: "",
+      measure: [],
+      package: [],
+      rules: {
+        freeShipping: [{ required: true, message: "请选择运费方式", trigger: "blur" }],
+        props: [{ required: true, message: "商品属性不能为空", trigger: "blur" }],
+        unit: [{ required: true, message: "请选择计量单位", trigger: "blur" }],
+        skuList: [{ required: true, message: "规格不能为空", trigger: "blur" }],
+        packing: [{ required: true, message: "包装方式不能为空", trigger: "blur" }],
+      },
+      shopInfo: {},
+    };
+  },
+  mounted() {
+    this.getInfo();
+    this.getdictImpl();
+    if (this.data) {
+      this.form = this.data;
+      this.$forceUpdate();
+    }
+  },
+  methods: {
+    getInfo() {
+      getStoreInfo().then((res) => {
+        if (res.code == 200) {
+          this.shopInfo = res.data;
+        }
+      });
+    },
+    getdictImpl() {
+      getDict("stockUnit").then((res) => {
+        if (res.code == 200) {
+          this.measure = res.data;
+        }
+      });
+      getDict("packType").then((res) => {
+        if (res.code == 200) {
+          this.package = res.data;
+        }
+      });
+    },
+    computePrice(data) {
+      if (this.shopInfo.scope == 0) {
+        if (
+          data.skuCost.purchaseFee &&
+          data.skuCost.laborFee &&
+          data.skuCost.agencyFee &&
+          data.skuCost.materialFee
+        ) {
+          return (
+            parseInt(data.skuCost.purchaseFee) +
+            parseInt(data.skuCost.laborFee) +
+            parseInt(data.skuCost.agencyFee) +
+            parseInt(data.skuCost.materialFee)
+          );
+        } else {
+          return 0;
+        }
+      }
+    },
+    passValue() {
+      console.log(this.form);
+      if (this.shopInfo.scope == 0) {
+        this.form.skuList.forEach((e) => {
+          e.skuPriceList.forEach((a) => {
+            a.price = this.computePrice(e);
+            a.originalPrice = this.computePrice(e);
+            a.lowestPrice = this.computePrice(e);
+          });
+        });
+      } else {
+        this.form.skuList.forEach((e) => {
+          e.skuPriceList.forEach((a) => {
+            a.price = a.originalPrice;
+          });
+        });
+      }
+
+      console.log("pppppp", this.form);
+      this.$emit("updateValue", this.form);
+    },
+
+    Mapaddress(data) {
+      console.log("map", data);
+      this.form.shippingAddr = data.pname + data.cityname + data.adname;
+      this.form.shippingAddrBean.addr = data.pname + data.cityname + data.adname;
+      // this.form.shippingAddrBean.addrDetail = data.name ? data.name : undefined;
+      this.form.shippingAddrBean.cityCode = data.cityCode;
+      this.form.shippingAddrBean.countyCode = data.adcode;
+      if (data.location) {
+        this.form.shippingAddrBean.latitude = data.location.lat;
+        this.form.shippingAddrBean.longitude = data.location.lng;
+      }
+      this.form.shippingAddrBean.provinceCode = data.pcode;
+      console.log("this.form", this.form);
+      this.addr = data.address;
+      this.$refs.mapOpen.closeMap();
+      this.passValue();
+    },
+    selectAddr() {
+      this.$refs.mapOpen.loadMap();
+    },
+    addattribute() {
+      this.form.props.push({
+        name: "",
+        id: "",
+        value: "",
+      });
+    },
+    removeAttribute(record, index) {
+      this.form.props.splice(index, 1);
+      this.passValue();
+    },
+    removeSpecification(record, index) {
+      this.form.skuList.splice(index, 1);
+    },
+    addSpecification() {
+      this.form.skuList.push({
+        stock: "",
+        skuCost: {
+          purchaseFee: "",
+          laborFee: "",
+          agencyFee: "",
+          materialFee: "",
+        },
+        skuSpecsList: [
+          {
+            specsId: "0",
+            specsName: "",
+            specsValue: "",
+          },
+        ],
+        skuPriceList: [
+          {
+            minPurchase: "",
+            maxPurchase: "",
+            price: "",
+            originalPrice: "",
+            lowestPrice: 1,
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+/deep/ .el-radio-group {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  height: 50px;
+}
+.item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 20px;
+  margin-right: 10px;
+}
+.main1 {
+  background: #f1f1f1;
+  min-height: 80px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 0px 20px;
+}
+.main {
+  width: 58vw;
+  background: #f1f1f1;
+  min-height: 80px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  /* display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 20px 20px 0px 20px; */
+}
+</style>

src/views/product/updateProduct.vue

@@ -0,0 +1,417 @@
+<template>
+  <div class="app-container">
+    <div style="width: 100%; height: 85vh; overflow: auto">
+      <el-row style="padding-top: 20px">
+        <el-col :span="24">
+          <el-descriptions title="基本信息" column="1"> </el-descriptions>
+          <basicInfo @updateValue="updateValue" :data="form"></basicInfo>
+          <el-descriptions title="销售信息" column="1"> </el-descriptions>
+          <salesInfo @updateValue="updateValue" :data="form"></salesInfo>
+          <el-descriptions title="商品详情" column="1"> </el-descriptions>
+          <productInfo @updateValue="updateValue" :data="form"></productInfo>
+          <div class="dialog-footer" style="text-align: center">
+            <el-button type="primary" @click="submitForm">保 存</el-button>
+
+            <el-button type="primary" @click="submitFormDraft">存入草稿箱</el-button>
+          </div>
+        </el-col>
+        <phoneView style="position: absolute; bottom: 50px; right: 50px">
+          <div slot="conts">
+            <div>
+              <el-carousel height="200px">
+                <el-carousel-item
+                  v-for="(item, index) in headerImg.slice(1)"
+                  :key="index"
+                >
+                  <el-image
+                    v-if="item.type == 'img'"
+                    style="width: 100%; height: 200px"
+                    :src="item.src"
+                    :preview-src-list="[item.src]"
+                  >
+                  </el-image>
+                  <video
+                    v-if="item.type == 'video'"
+                    :key="index"
+                    controls
+                    :src="item.src"
+                    style="width: 100%; height: 200px"
+                  ></video>
+                </el-carousel-item>
+              </el-carousel>
+            </div>
+            <img
+              style="width: 100%"
+              src="https://bucket.sxdirectpurchase.com/fileUpload/test/47fc6132-0b3e-4b5c-b858-f78d363eba90.png"
+              alt=""
+            />
+            <div class="card">
+              <div class="spuName">{{ form ? form.title : "" }}</div>
+              <div class="price_info">
+                <div class="price_group">
+                  <span>￥</span>
+                  <span
+                    class="price"
+                    :key="item"
+                    v-for="item in form.skuList ? form.skuList.slice(0, 1) : []"
+                    >{{ item.skuPriceList ? item.skuPriceList[0].price : 0 }}元</span
+                  >
+
+                  <span>/{{ form.unit }}</span>
+                </div>
+                <span class="ys">已售 0</span>
+              </div>
+            </div>
+            <div class="card" style="margin-top: 10px">
+              <div class="spuName">规格/价格</div>
+              <div v-for="(item, index) in form.skuList" :key="index">
+                <div class="price_info">
+                  <span
+                    >{{ item.skuSpecsList[0] ? item.skuSpecsList[0].specsName : "" }}
+                    {{
+                      item.skuSpecsList[0].specsValue
+                        ? item.skuSpecsList[0].specsValue
+                        : ""
+                    }}</span
+                  >
+                </div>
+                <div
+                  style="
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-between;
+                  "
+                >
+                  <span style="font-size: 14px; color: red">
+                    <span>￥</span>
+                    <span
+                      >{{
+                        item.skuPriceList
+                          ? item.skuPriceList[0].price
+                            ? item.skuPriceList[0].price
+                            : ""
+                          : ""
+                      }}元</span
+                    ><span>/{{ form.unit }}</span></span
+                  >
+                  <span style="font-size: 14px"
+                    >{{
+                      item.skuPriceList
+                        ? item.skuPriceList[0].minPurchase
+                          ? item.skuPriceList[0].minPurchase
+                          : ""
+                        : ""
+                    }}/{{ form.unit }}起购</span
+                  >
+                  <span style="font-size: 14px"
+                    >库存:{{ item.stock }}{{ form.unit }}</span
+                  >
+                </div>
+              </div>
+            </div>
+            <div class="card" style="margin-top: 10px">
+              <el-form
+                :model="form"
+                ref="queryForm"
+                size="small"
+                :inline="true"
+                label-width="80px"
+                label-position="left"
+              >
+                <el-row>
+                  <el-col :span="24">
+                    <el-form-item label="发货地" prop="spuName">
+                      <div style="width: 185px">
+                        {{ form.shippingAddrBean ? form.shippingAddrBean.addr : "" }}
+                        {{
+                          form.shippingAddrBean
+                            ? form.shippingAddrBean.addrDetail
+                              ? form.shippingAddrBean.addrDetail
+                              : ""
+                            : ""
+                        }}
+                      </div>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="24">
+                    <el-form-item label="发货时间" prop="spuName">
+                      {{ form.shippingTimeDesc }}
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="24">
+                    <el-form-item label="商品属性" prop="spuName">
+                      <div>查看></div>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="24">
+                    <el-form-item label="包装方式" prop="spuName">
+                      {{ form.packing }}
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+              </el-form>
+            </div>
+            <div class="card" style="margin-top: 10px">
+              <div
+                style="
+                  display: flex;
+                  flex-direction: row;
+                  justify-content: space-between;
+                  align-items: center;
+                "
+              >
+                <span class="spuName">商品评价</span>
+                <span>好评率 <span style="color: red">100%</span></span>
+              </div>
+              <div
+                style="
+                  display: flex;
+                  flex-direction: column;
+                  justify-content: center;
+                  align-items: center;
+                "
+              >
+                <img
+                  style="width: 40%"
+                  src="https://directpurchase-oss-dev.oss-cn-chengdu.aliyuncs.com/wx/static/images/kong.png"
+                  alt=""
+                />
+                <span>还没有评价~</span>
+              </div>
+            </div>
+            <div class="card" style="margin-top: 10px">
+              <div class="spuName">商品介绍</div>
+              <div style="font-size: 14px; line-height: 25px">
+                {{ form.spuDesc }}
+              </div>
+            </div>
+            <div class="card" style="margin-top: 10px">
+              <div class="spuName">商品详情</div>
+              <div style="font-size: 14px; line-height: 25px">
+                <el-image
+                  v-for="(item, index) in form.spuDetailList"
+                  :key="index"
+                  :src="item.fileUrl"
+                  fit="fill"
+                  :preview-src-list="[item.fileUrl]"
+                >
+                </el-image>
+              </div>
+              <div style="font-size: 14px; line-height: 25px">
+                <el-image
+                  v-for="(item, index) in form.specialList"
+                  :key="index"
+                  :src="item.fileUrl"
+                  fit="fill"
+                  :preview-src-list="[item.fileUrl]"
+                >
+                </el-image>
+              </div>
+            </div>
+          </div>
+        </phoneView>
+      </el-row>
+    </div>
+
+    <Amap></Amap>
+  </div>
+</template>
+
+<script>
+import { publishGoods } from "@/api/publish/index";
+import { saveGoodsDraft } from "@/api/manage/product";
+import basicInfo from "./module/basic-info.vue";
+import productInfo from "./module/product-info.vue";
+import salesInfo from "./module/sales-info.vue";
+import phoneView from "@/components/phoneView/index.vue";
+import Amap from "@/components/Map/map.vue";
+export default {
+  components: { Amap, phoneView, basicInfo, salesInfo, productInfo },
+  data() {
+    return {
+      form: {},
+      headerImg: [],
+    };
+  },
+  mounted() {
+    if (this.$route.query.params) {
+      this.form = this.$route.query.params;
+      this.headerImg = [];
+      if (this.form.vid) {
+        this.headerImg.push({
+          type: "video",
+          src: this.form.vid,
+          sort: 1,
+        });
+      }
+      if (this.form.pic) {
+        this.headerImg.push({
+          type: "img",
+          src: this.form.pic,
+          sort: 2,
+        });
+      }
+      this.headerImg = this.unique(this.headerImg);
+      if (this.form.bannerList) {
+        this.form.bannerList.forEach((e, index) => {
+          this.headerImg.push({
+            type: "img",
+            src: e.fileUrl,
+            sort: index + 4,
+          });
+        });
+      }
+      this.headerImg.sort((a, b) => a.sort - b.sort); //排序 视频在最前面>封面>商品banner
+    }
+  },
+  methods: {
+    submitFormDraft() {
+      saveGoodsDraft(this.form).then((res) => {
+        if (res.code == 200) {
+          this.$message.success(`保存成功！请前往草稿箱查看`);
+          this.$store.dispatch("tagsView/delView", this.$route); //关闭当前页
+          this.$router.replace({ path: "/product/product/index" });
+        }
+      });
+    },
+    submitForm() {
+      if (this.form.scope === "") {
+        this.$message.error(`经营区域不能为空！`);
+        return;
+      } else if (this.form.saleType === "") {
+        this.$message.error(`销售方式不能为空`);
+        return;
+      } else if (this.form.saleType === "") {
+        this.$message.error(`销售方式不能为空`);
+        return;
+      } else if (this.form.categoryId === "") {
+        this.$message.error(`商品分类不能为空`);
+        return;
+      } else if (this.form.pic === "") {
+        this.$message.error(`商品封面图不能为空`);
+        return;
+      } else if (this.form.unit === "") {
+        this.$message.error(`商品封面图不能为空`);
+        return;
+      } else if (this.form.skuList === "") {
+        this.$message.error(`商品规格不能为空`);
+        return;
+      } else if (this.form.packing === "") {
+        this.$message.error(`包装方式不能为空`);
+        return;
+      } else if (this.form.shippingTimeDesc === "") {
+        this.$message.error(`发货时间不能为空`);
+        return;
+      } else if (this.form.freeShipping === "") {
+        this.$message.error(`运费不能为空`);
+        return;
+      } else if (this.form.shippingAddr === "") {
+        this.$message.error(`发货地址不能为空`);
+        return;
+      } else if (this.form.spuDesc === "") {
+        this.$message.error(`商品介绍不能为空`);
+        return;
+      } else if (this.form.saleModel === "2") {
+        if (this.form.presaleStartTime === "" || this.form.presaleEndTime === "") {
+          this.$message.error(`预售时间不能为空`);
+          return;
+        }
+      }
+      publishGoods(this.form).then((res) => {
+        if (res.code == 200) {
+          this.$message.success(`发布成功！`);
+          this.$store.dispatch("tagsView/delView", this.$route); //关闭当前页
+          this.$router.replace({ path: "/product/product/index" });
+        }
+      });
+    },
+    updateValue(val) {
+      console.log(val);
+      this.form = { ...this.form, ...val };
+      console.log(this.form);
+      this.headerImg = [];
+      if (val.vid || this.form.vid) {
+        this.headerImg.push({
+          type: "video",
+          src: val.vid ? val.vid : this.form.vid,
+          sort: 1,
+        });
+      }
+      if (this.form?.bannerList && this.form?.bannerList.length > 0) {
+        this.form.bannerList.forEach((e, index) => {
+          this.headerImg.push({
+            type: "img",
+            src: e.fileUrl,
+            sort: index + 4,
+          });
+        });
+      }
+
+      this.headerImg.sort((a, b) => a.sort - b.sort); //排序 视频在最前面>封面>商品banner
+    },
+    unique(arr) {
+      const res = new Map();
+      return arr.filter((arr) => !res.has(arr.src) && res.set(arr.src, 1));
+    },
+  },
+};
+</script>
+
+<style>
+.required {
+  color: red;
+}
+.el-upload-list__item {
+  width: 60px !important;
+  height: 60px !important;
+}
+.el-upload--picture-card {
+  width: 80px;
+  height: 80px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.tips {
+  font-size: 12px;
+  color: red;
+}
+</style>
+<style scoped>
+.card {
+  /* height: 85px; */
+  width: 95%;
+  background: white;
+  margin: auto;
+  border-radius: 10px;
+  line-height: 30px;
+  padding: 10px;
+}
+.spuName {
+  text-decoration: none;
+  font-weight: bold;
+  word-wrap: normal;
+  font-size: 18px;
+  color: #333333;
+}
+.price_group {
+  color: #ff2f2f;
+}
+.price {
+  text-decoration: none;
+  font-weight: bold;
+  word-wrap: normal;
+  font-size: 25px;
+  color: #ff2f2f;
+}
+.price_info {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+.ys {
+  font-size: 14px;
+}
+</style>