Explorar el Código

商品详情页面,控制台返回门户按钮,门户页面调整

GXL hace 1 año
padre
commit
f92f6456a8

+ 30 - 34
src/layout/components/Sidebar/index.vue

@@ -1,42 +1,27 @@
 <template>
-  <div
-    :class="{ 'has-logo': showLogo }"
-    :style="{
-      backgroundColor:
-        settings.sideTheme === 'theme-dark'
-          ? variables.menuBackground
-          : variables.menuLightBackground,
-    }"
-  >
+  <div :class="{ 'has-logo': showLogo }" :style="{
+    backgroundColor:
+      settings.sideTheme === 'theme-dark'
+        ? variables.menuBackground
+        : variables.menuLightBackground,
+  }">
     <logo v-if="showLogo" :collapse="isCollapse" />
-    <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
-      <el-menu
-        :default-active="activeMenu"
-        :collapse="isCollapse"
-        :background-color="
-          settings.sideTheme === 'theme-dark'
-            ? variables.menuBackground
-            : variables.menuLightBackground
-        "
-        :text-color="
-          settings.sideTheme === 'theme-dark'
-            ? variables.menuColor
-            : variables.menuLightColor
-        "
-        :unique-opened="true"
-        :active-text-color="settings.theme"
-        :collapse-transition="false"
-        mode="vertical"
-      >
+    <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper" style="height: calc(93% - 50px);">
+      <el-menu :default-active="activeMenu" :collapse="isCollapse" :background-color="settings.sideTheme === 'theme-dark'
+    ? variables.menuBackground
+    : variables.menuLightBackground
+    " :text-color="settings.sideTheme === 'theme-dark'
+    ? variables.menuColor
+    : variables.menuLightColor
+    " :unique-opened="true" :active-text-color="settings.theme" :collapse-transition="false" mode="vertical">
         <!-- 根据 sidebarRouters 路由,生成菜单 -->
-        <sidebar-item
-          v-for="(route, index) in sidebarRouters"
-          :key="route.path + index"
-          :item="route"
-          :base-path="route.path"
-        />
+        <sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route"
+          :base-path="route.path" />
       </el-menu>
     </el-scrollbar>
+    <footer class="bottomButton" v-if="this.sidebar.opened">
+      <el-button type="primary" @click="goNavigation">返回门户</el-button>
+    </footer>
   </div>
 </template>
 
@@ -70,5 +55,16 @@ export default {
       return !this.sidebar.opened;
     },
   },
+  methods: {
+    goNavigation() {
+      this.$router.push("/navigation");
+    }
+  },
 };
 </script>
+
+<style scoped>
+.bottomButton {
+  margin-left: 25%;
+}
+</style>

+ 16 - 0
src/router/index.js

@@ -445,6 +445,22 @@ export const constantRoutes = [
     },
     ]
   },
+
+  /*--------------------------------------s u p p l i e r----------------------------------------*/
+  {
+    path: '/supplier',
+    component: Layout,
+    hidden: true,
+    redirect: 'noredirect',
+    children: [{
+      path: 'goodsDetail/detail',
+      component: (resolve) => require(['@/views/supplier/goodsDetail/detail'], resolve),
+      name: '商品详情',
+      meta: { title: '商品详情', icon: 'form', activeMenu: '/supplier/goodsDetail/detail' }
+    }
+    ]
+  },
+
 ]
 
 // 防止连续点击多次路由报错

+ 6 - 6
src/views/navigation.vue

@@ -15,8 +15,8 @@
                         </el-input>
                     </div>
                     <div class="top_one right">
-                        <div style="display: flex;width: 20vh;justify-content: flex-end;align-items: center;font-weight: 400;
-                            font-size: 14px; text-overflow: ellipsis;">
+                        <div style="display: flex;justify-content: flex-end;align-items: center;font-weight: 400;
+                            font-size: 14px; text-overflow: ellipsis;width: 40vh;">
                             <!-- <el-avatar size="medium"
                                 src="https://hzl.willalp.com/static/img/profile.b87e3d56.jpg"></el-avatar> -->
                             <img :src="avatar" class="user-avatar" />
@@ -24,7 +24,7 @@
                         </div>
 
                         <div style="margin-left: 10%;margin-right: 8%">
-                            <span style="cursor: pointer" @click="logout">注销</span>
+                            <span style="cursor: pointer" @click="logout">退出登录</span>
                         </div>
 
                     </div>
@@ -640,13 +640,13 @@ export default {
 
     .user-avatar {
         cursor: pointer;
-        width: 30%;
-        height: 30%;
+        width: 6vh;
+        height: 6vh;
         border-radius: 50%;
     }
 
     .user-nickname {
-        margin-left: 10%;
+        margin-left: 2vh;
         cursor: pointer;
     }
 }

BIN
src/views/supplier/goodsDetail/components/photo/left.png


BIN
src/views/supplier/goodsDetail/components/photo/right.png


+ 128 - 0
src/views/supplier/goodsDetail/components/picListChange.vue

@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <div class="top">
+      <el-carousel height="45vh" @change="changePic" :autoplay="false" ref="carousel" indicator-position="none">
+        <el-carousel-item v-for="(item, index) in picList" :key="index">
+          <img :src="item" alt="" style="width: 100%;height: 100%;">
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+    <div class="content">
+      <div class="left">
+        <img src="./photo/left.png" alt="" style="width: 4%;margin:0;cursor: pointer;" @click="gePre()">
+      </div>
+      <div class="center">
+        <div class="picBottomDiv" v-for="(item, index) in showList"
+          :style="{ 'border': index == currentIndex ? '2px #3CAAF6 solid' : '' }">
+          <img class="picBottomList" :src="item" :key="index" alt="">
+        </div>
+      </div>
+      <div class="right">
+        <img src="./photo/right.png" alt="" style="width: 4%;margin:0;cursor: pointer;" @click="goNext()">
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+export default {
+  name: "PicListChange",
+  props: {
+    picList: {
+      type: Array,
+      default: [],
+    },
+  },
+  data() {
+    return {
+      showList: [],
+      // startIndex: 0,
+      currentIndex: 0,
+    };
+  },
+  methods: {
+    /** 更改轮播图展示图片 */
+    changePic(index) {
+      this.currentIndex = index;
+      if (index < 4) {
+        this.showList = this.picList.slice(0, 4);
+      } else {
+        this.showList = this.picList.slice(index - 3, index + 1);
+        this.currentIndex = 3;
+      }
+    },
+    /** 上一张 */
+    gePre() {
+      this.$refs.carousel.prev();
+    },
+    /** 下一张 */
+    goNext() {
+      this.$refs.carousel.next();
+    },
+  },
+  watch: {},
+  computed: {},
+  components: {},
+  created() {
+    if (this.picList.length > 4) {
+      this.showList = this.picList.slice(0, 4);
+    } else {
+      this.showList = this.picList;
+    }
+  },
+  mounted() { },
+};
+</script>
+
+<style scoped>
+::v-deep .el-carousel__arrow--left {
+  display: none;
+}
+
+::v-deep .el-carousel__arrow--right {
+  display: none;
+}
+
+.picBottomDiv {
+  display: inline-block;
+  width: 21%;
+  height: 80%;
+  padding: 3px;
+  margin: 0 1% 0 1%;
+  /* border: 2px red solid; */
+}
+
+.picBottomList {
+  width: 100%;
+  height: 100%;
+}
+
+.top {
+  height: 100%;
+  width: 98%;
+  display: block;
+  margin: auto;
+  margin-bottom: 30px;
+}
+
+.content {
+  width: 98%;
+  height: 10vh;
+  display: block;
+  margin: auto;
+  margin-top: 2vh;
+}
+
+.left {
+  display: inline;
+}
+
+.center {
+  display: inline;
+}
+
+.right {
+  display: inline;
+}
+</style>

+ 443 - 0
src/views/supplier/goodsDetail/detail.vue

@@ -0,0 +1,443 @@
+<template>
+    <div class="app-container">
+        <div class="left">
+            <div class="leftTop">
+                <span>店铺名称</span>
+            </div>
+            <div class="leftBottom">
+                <!-- <div class="leftBottom1">
+                    <el-carousel height="45vh">
+                        <el-carousel-item v-for="(item,index) in picList" :key="index">
+                            <img :src="item.picture" alt="" style="width: 100%;height: 100%;">
+                        </el-carousel-item>
+                    </el-carousel>
+                </div> -->
+                <!-- <div class="leftBottom2">
+                    <img v-for="item in picList" :src="item.picture" alt="" style="width: 20%;">
+                    <PicListChange :picList="picList"></PicListChange>
+                </div> -->
+                <PicListChange :picList="goodsDetail.picture"></PicListChange>
+                <div style="width: 100%;display: block;">
+                    <el-button class="leftBottom3" type="text">举报</el-button>
+                </div>
+                <div class="leftBottom4">
+                    <el-button type="primary">进入店铺</el-button>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="rightTop">
+                <div class="goodsName">
+                    <span>{{ goodsDetail.name }}</span>
+                </div>
+                <div class="detail1">
+                    <div style="width: 100%; float: left;">
+                        <div class="detail1-1">商品单价</div>
+                        <div class="detail1-2">¥{{ goodsDetail.platPrice }}/{{ goodsDetail.unit }}</div>
+                        <div class="detail1-3">¥{{ goodsDetail.marketPrice }}/{{ goodsDetail.unit }}</div>
+                    </div>
+                    <div class="detail1-4">
+                        <el-tag v-for="item in goodsDetail.keyword" size="mini" style="margin-right: 2%;"> {{ item
+                            }}</el-tag>
+                    </div>
+                </div>
+                <div class="detail2">
+                    <div class="rightBottomDetail">
+                        <div class="rightBottom-1" style="height: 35px;">剩余库存</div>
+                        <div class="rightBottom-2">{{ goodsDetail.num }}&nbsp;{{ goodsDetail.unit }}</div>
+                    </div>
+                    <div class="rightBottomDetail">
+                        <div class="rightBottom-1" style="height: 35px;">价格策略</div>
+                        <div class="rightBottom-2">
+                            aaaaafasdfafqwefqwfefqawedsfasdfqwefasdfqwefasdfwqefaefasdfqawefasedfqawegfqwgqwerfqwefdwe
+                        </div>
+                    </div>
+                </div>
+                <!-- <el-divider class="divider" :dashed="true"></el-divider> -->
+
+            </div>
+            <div class="rightBottom">
+                <el-tabs v-model="bottomChoice" @tab-click="" style="width: 98%; margin: 0px auto">
+                    <el-tab-pane label="商品介绍" name="1">
+                        <div class="rightBottomDetail">
+                            <div class="rightBottom-1" style="height: 35px;">商品名称</div>
+                            <div class="rightBottom-2">{{ goodsDetail.name }}</div>
+                        </div>
+                        <div class="rightBottomDetail">
+                            <div class="rightBottom-1" style="height: 35px;">商品编号</div>
+                            <div class="rightBottom-2">{{ goodsDetail.code }}</div>
+                        </div>
+                        <div class="rightBottomDetail">
+                            <div class="rightBottom-1" style="height: 35px;">商品品牌</div>
+                            <div class="rightBottom-2">{{ goodsDetail.brand }}</div>
+                        </div>
+                        <div class="rightBottomDetail">
+                            <div class="rightBottom-1" style="height: 35px;">商品产地</div>
+                            <div class="rightBottom-2">暂时没有商品产地</div>
+                        </div>
+                        <div class="rightBottomDetail">
+                            <div class="rightBottom-1" style="min-height: 35px;">商品描述</div>
+                            <!-- <div class="rightBottom-2">{{ goodsDetail.productDetail }}</div> -->
+                            <div class="rightBottom-2">
+                                <div v-html="goodsDetail.productDetail"></div>
+                            </div>
+                        </div>
+                        <div class="rightBottomDetail">
+                            <div class="rightBottom-1" style="min-height: 35px;">平台申明</div>
+                            <div class="rightBottom-2">
+                                Lorem isum dolor sit amet, conseclelur adipiscing elt. Aenean euismod
+                                bibendum aoreet Proin gravda dolorsit amet lacus accumsan etvvea ustocommodo.
+                                Proin sodalespulvinar sic tempor. Socis natoquepenatibus etmagnis dis paturient
+                                montes, nasceturridiculus mus. Nam fermentum, nulaluctus pharetravulputate
+                            </div>
+                        </div>
+                    </el-tab-pane>
+                    <el-tab-pane label="规格与包装" name="2"></el-tab-pane>
+                    <el-tab-pane label="售后保障" name="3"></el-tab-pane>
+                    <el-tab-pane label="商品评价" name="4"></el-tab-pane>
+                </el-tabs>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+import {
+    createGoodsDetail,
+    updateGoodsDetail,
+    deleteGoodsDetail,
+    getGoodsDetail,
+    getGoodsDetailPage,
+    exportGoodsDetailExcel,
+    addGoodsDetailUpNum,
+    changeGoodsDetailStatus,
+    getAddAgainLog,
+} from "@/api/supplier/goodsDetail";
+import PicListChange from "./components/picListChange.vue";
+
+export default {
+    name: "GoodsDetail",
+    components: {
+        PicListChange,
+    },
+    data() {
+        return {
+            goodsDetail: {name:"商品名称"},
+            bottomChoice: '1',
+            picList: [
+                { id: "1", picture: "https://ts.willalp.com:9002/willalpbucket/微信图片_2024032809233720240328092531.png" },
+                { id: "2", picture: "http://60.188.249.11:9002/willalpbucket/fm0220240407170915.jpg" },
+                { id: "3", picture: "http://60.188.249.11:9002/willalpbucket/lunbo320240402180418.png" },
+                { id: "4", picture: "http://60.188.249.11:9002/willalpbucket/lunbo120240402180243.png" },
+                { id: "5", picture: "http://60.188.249.11:9002/willalpbucket/lunbo420240403110118.png" },
+                { id: "6", picture: "http://60.188.249.11:9002/willalpbucket/%E5%85%B3%E5%BF%83%E5%85%B3%E7%88%B120240403110925.png" },
+            ],
+        }
+    },
+    created() {
+        this.id = this.$route.query.id;
+        if (!this.id) {
+            this.$message.error("未传递 id 参数,无法查看商品详情信息");
+            return;
+        }
+        this.getDetail();
+    },
+    methods: {
+        getDetail() {
+            this.goodsDetail = {name:"商品名称"};
+            getGoodsDetail(this.id).then((response) => {
+                this.goodsDetail = response.data;
+                if (typeof this.goodsDetail.platPrice == 'number') {
+                    this.goodsDetail.platPrice = this.goodsDetail.platPrice.toFixed(2);
+                }
+                if (typeof this.goodsDetail.marketPrice == 'number') {
+                    this.goodsDetail.marketPrice = this.goodsDetail.marketPrice.toFixed(2);
+                }
+                if (this.goodsDetail.keyword) {
+                    this.goodsDetail.keyword = this.goodsDetail.keyword.split(",")
+                }
+                if (this.goodsDetail.picture) {
+                    this.goodsDetail.picture = this.goodsDetail.picture.split(",")
+                }
+                console.log(this.goodsDetail)
+            });
+        },
+    }
+}
+</script>
+<style scoped>
+.app-container {
+    display: flex;
+    background: #F5F7FB;
+    border-radius: 0px 0px 0px 0px;
+    padding: 0 20px;
+}
+
+.left {
+    float: left;
+    width: 37%;
+    background: #FFFFFF;
+    margin-top: 1vh;
+    height: 100vh
+}
+
+.leftTop {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: auto;
+
+    width: 98%;
+    height: 10vh;
+    position: relative;
+    margin-bottom: 1vh;
+    padding: auto;
+    background: #FFFFFF;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+
+    span {
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: bold;
+        font-size: 24px;
+        color: #333333;
+        line-height: 28px;
+        letter-spacing: 13px;
+        text-align: center;
+    }
+}
+
+.leftBottom {
+    background: #FFFFFF;
+    width: 98%;
+    height: 65vh;
+    position: relative;
+    margin-bottom: 1vh;
+    display: block;
+    margin: auto;
+}
+
+.leftBottom1 {
+    height: 100%;
+    width: 98%;
+    display: block;
+    margin: auto;
+}
+
+.leftBottom2 {
+    width: 98%;
+    height: 10vh;
+    display: block;
+    margin: auto;
+    margin-top: 2vh;
+}
+
+.leftBottom3 {
+    font-family: Microsoft YaHei, Microsoft YaHei;
+    font-weight: 400;
+    font-size: 16px;
+    color: #6F6F6F;
+    line-height: 19px;
+    letter-spacing: 1px;
+    text-align: center;
+    float: right;
+
+}
+
+.leftBottom4 {
+    height: 20vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.right {
+    float: left;
+    margin-top: 1vh;
+    margin-left: 1vh;
+    width: 62%;
+}
+
+.goodsName {
+    font-family: Microsoft YaHei, Microsoft YaHei;
+    font-weight: bold;
+    font-size: 24px;
+    color: #333333;
+    line-height: 28px;
+    letter-spacing: 1px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+    margin-left: 2.5vh;
+    padding-top: 2.5vh;
+}
+
+.detail1 {
+    float: left;
+    width: 70%;
+    height: 12vh;
+    margin: 1%;
+    background: linear-gradient(90deg, #FFEFE0 0%, #FDE6E6 100%);
+    border-radius: 0px 0px 0px 0px;
+}
+
+.detail1-1 {
+    float: left;
+    display: flex;
+    justify-content: right;
+    align-items: center;
+    font-family: Microsoft YaHei, Microsoft YaHei;
+    font-weight: 400;
+    font-size: 16px;
+    color: #6F6F6F;
+    letter-spacing: 1px;
+    font-style: normal;
+    text-transform: none;
+
+    /* width: 80px; */
+    margin-left: 2vh;
+    height: 50px;
+}
+
+.detail1-2 {
+    float: left;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: Microsoft YaHei, Microsoft YaHei;
+    font-weight: bold;
+    font-size: 24px;
+    color: #FF0000;
+    letter-spacing: 1px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+    min-width: 120px;
+    height: 50px;
+    padding-left: 15px;
+    padding-right: 15px;
+}
+
+.detail1-3 {
+    float: left;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    font-family: Microsoft YaHei, Microsoft YaHei;
+    font-weight: 400;
+    font-size: 16px;
+    color: #ADADAD;
+    letter-spacing: 1px;
+    font-style: normal;
+    text-transform: none;
+    min-width: 100px;
+    height: 50px;
+    text-decoration: line-through;
+}
+
+.detail1-4 {
+    float: left;
+    width: 100%;
+    margin-left: 2vh;
+}
+
+.detail2 {
+    float: left;
+    width: 70%;
+    /* height: 12vh; */
+}
+
+.detail2-1 {
+    font-family: Microsoft YaHei, Microsoft YaHei;
+    font-weight: 400;
+    font-size: 16px;
+    color: #333333;
+    letter-spacing: 1px;
+    text-align: left;
+
+    height: 35px;
+    display: flex;
+    justify-content: left;
+    /* align-items: center; */
+    align-content: flex-start;
+    padding-left: 20px;
+    word-break: break-all;
+}
+
+.divider {
+    float: left;
+}
+
+.rightTop {
+    background: #FFFFFF;
+    width: 100%;
+    height: 34vh;
+    position: relative;
+    margin-bottom: 1vh;
+}
+
+.rightBottom {
+    background: #FFFFFF;
+    width: 100%;
+    min-height: 44vh;
+    float: left;
+    display: flex;
+    align-content: flex-start;
+}
+
+.rightBottom-1 {
+    float: left;
+    display: flex;
+    justify-content: right;
+    align-content: flex-start;
+    font-weight: 400;
+    font-size: 16px;
+    color: #6F6F6F;
+    letter-spacing: 1px;
+    font-style: normal;
+    text-transform: none;
+    text-align: left;
+    word-break: break-all;
+
+    /* width: 80px; */
+    margin-left: 2vh;
+    height: 35px;
+}
+
+.rightBottom-2 {
+    font-weight: 400;
+    font-size: 16px;
+    color: #333333;
+    letter-spacing: 1px;
+    text-align: left;
+    word-break: break-all;
+
+    min-height: 35px;
+    width: 80%;
+    display: flex;
+    justify-content: left;
+    align-content: flex-start;
+    padding-left: 20px;
+}
+
+.rightBottomDetail {
+    width: 100%;
+    float: left;
+}
+
+.el-carousel__item h3 {
+    color: #475669;
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 150px;
+    margin: 0;
+}
+
+.el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+}
+
+.el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+}
+</style>

+ 43 - 5
src/views/supplier/goodsDetail/index.vue

@@ -408,8 +408,8 @@
         </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="submitForm" :disabled="buttonDisable">确 定</el-button>
+        <el-button @click="cancel" :disabled="buttonDisable">取 消</el-button>
       </div>
     </el-dialog>
 
@@ -427,8 +427,8 @@
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitFormAdd">确 定</el-button>
-        <el-button @click="cancelAdd">取 消</el-button>
+        <el-button type="primary" @click="submitFormAdd" :disabled="buttonDisable">确 定</el-button>
+        <el-button @click="cancelAdd" :disabled="buttonDisable">取 消</el-button>
       </div>
     </el-dialog>
 
@@ -474,6 +474,7 @@ export default {
   },
   data() {
     return {
+      buttonDisable: false,
       categoryOptions: [],
       categoryList: [],
       listAddLog: [],
@@ -483,6 +484,7 @@ export default {
       },
       // 遮罩层
       loading: true,
+      loadingAddLog: false,
       // 导出遮罩层
       exportLoading: false,
       // 显示搜索条件
@@ -535,6 +537,7 @@ export default {
   methods: {
     /** 商品补货 */
     submitFormAdd() {
+      this.buttonDisable = true;
       this.$refs["formAdd"].validate(valid => {
         if (!valid) {
           return;
@@ -544,6 +547,7 @@ export default {
           addGoodsDetailUpNum(this.formAdd).then(response => {
             this.$modal.msgSuccess("补货成功");
             this.openAdd = false;
+            this.buttonDisable = false;
             this.getList();
           });
           return;
@@ -553,6 +557,7 @@ export default {
     /** 取消补货 */
     cancelAdd() {
       this.openAdd = false;
+      this.buttonDisable = false;
       this.resetAdd();
     },
     /** tab查询 */
@@ -608,6 +613,7 @@ export default {
     /** 取消按钮 */
     cancel() {
       this.open = false;
+      this.buttonDisable = false;
       this.reset();
     },
     /** 表单重置 */
@@ -667,11 +673,15 @@ export default {
     },
     /** 详情 */
     handleDetail(row) {
-
+      this.$router.push({
+        path: "/supplier/goodsDetail/detail",
+        query: { id: row.id },
+      });
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
+      this.buttonDisable = false;
       const id = row.id;
       getGoodsDetail(id).then(response => {
         this.form = response.data;
@@ -705,22 +715,49 @@ export default {
     /** 补货记录 */
     handleOnLog(row) {
       const id = row.id;
+      this.loadingAddLog = true;
       getAddAgainLog(id).then(res => {
         this.listAddLog = res.data;
         this.openAddLog = true;
+        this.loadingAddLog = false;
       })
     },
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {
+        this.buttonDisable = true;
         if (!valid) {
+          this.buttonDisable = false;
           return;
         }
+        if (this.form.payMethod != null) {
+          let temp = "";
+          for (let i = 0; i < this.form.payMethod.length; i++) {
+            if (!temp) {
+              temp = this.form.payMethod[i];
+            } else {
+              temp = temp + "," + this.form.payMethod[i];
+            }
+          }
+          this.form.payMethod = temp;
+        }
+        if (this.form.picture != null) {
+          let temp = "";
+          for (let i = 0; i < this.form.picture.length; i++) {
+            if (!temp) {
+              temp = this.form.picture[i];
+            } else {
+              temp = temp + "," + this.form.picture[i];
+            }
+          }
+          this.form.picture = temp;
+        }
         // 修改的提交
         if (this.form.id != null) {
           updateGoodsDetail(this.form).then(response => {
             this.$modal.msgSuccess("修改成功");
             this.open = false;
+            this.buttonDisable = false;
             this.getList();
           });
           return;
@@ -729,6 +766,7 @@ export default {
         createGoodsDetail(this.form).then(response => {
           this.$modal.msgSuccess("新增成功");
           this.open = false;
+          this.buttonDisable = false;
           this.getList();
         });
       });