商品增加商品名称字段

src/api/product/product.js

@@ -0,0 +1,23 @@
+import request from "@/router/axios";
+//查询商品信息
+export const getGoodInfo = () => {
+  return request({
+    url: "/api/blade-system/dict-biz/get-goods-info",
+    method: "get",
+  });
+};
+//保存商品信息
+export const saveGoodInfo = (data) => {
+  let formdata = new FormData();
+  Object.keys(data).map(key => {
+    formdata.append(key, data[key]);
+  })
+  return request({
+    url: "/api/blade-system/dict-biz/save-goods-info",
+    method: "post",
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    },
+    data: formdata
+  });
+};

src/views/product/index.vue

@@ -1,11 +1,17 @@
 <template>
   <basic-container>
     <el-form label-width="140px">
+      <!-- <el-form-item label="商家名称：" required>
+        <el-input style="width:360px;" v-model="productDetail.shopName" placeholder="请输入商家名称" maxlength="30" />
+      </el-form-item> -->
+      <el-form-item label="商品名称：" required>
+        <el-input style="width:360px;" v-model="productDetail.goodsName" placeholder="请输入商品名称" maxlength="30" />
+      </el-form-item>
       <el-form-item label="商品价格：" required>
         <el-input style="width:360px;" v-model="productDetail.price" placeholder="请输入价格" maxlength="10" @input="NumberCheck" />
       </el-form-item>
       <el-form-item label="商品介绍详情图片：">
-        <el-upload v-if="productDetail.src == ''" class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
+        <el-upload v-if="productDetail.imgPath == ''" class="avatar-uploader" action="/api/blade-resource/oss/endpoint/put-file" :show-file-list="false"
           :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
           <template>
             <i class="el-icon-plus avatar-uploader-icon"></i>
@@ -13,41 +19,42 @@
           </template>
         </el-upload>
         <div v-else class="img-box">
-          <el-button class="btn-del" size="mini" icon="el-icon-delete" type="danger" @click="productDetail.src == ''">删 除</el-button>
+          <el-button class="btn-del" size="mini" icon="el-icon-delete" type="danger" @click="delImgPath">删 除</el-button>
-          <img :src="productDetail.src" style="width: 100%; height: auto;" />
+          <div class="img-box-scroll">
+            <img :src="productDetail.imgPath" style="width: 100%; height: auto;" />
+          </div>
         </div>
       </el-form-item>
       <div style="text-align:right;padding: 20px 0;">
-        <el-button type="primary" size="small" @click="doSave">确 定</el-button>
+        <el-button type="primary" size="small" @click="doSave" :loading="loading">确 定</el-button>
-        <!-- <el-button type="info" size="small" @click="cancelPublish" v-if="productDetail.status == 2">取消发布</el-button>
-        <el-button type="primary" size="small" @click="doPublish" v-if="productDetail.status == 1">发 布</el-button> -->
       </div>
     </el-form>
   </basic-container>
 </template>
 
 <script>
-// import {getBaseList,getTypeList} from "@/api/base"
+import { getGoodInfo, saveGoodInfo } from "@/api/product/product";
-import {
-  getList,
-  exportList,
-  deleteList,
-  detailList,
-} from "@/api/statistics/statistics";
 export default {
   data() {
     return {
       productDetail: {
-        src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
+        // shopName: '',
-        status: 1
+        goodsName: '',
+        imgPath : '',
+        price: ''
       },
-      imageUrl: ''
+      loading: false
 
     };
   },
   created() {
+    this.queryProduct();
   },
   methods: {
+    //清除图片
+    delImgPath() {
+      this.productDetail.imgPath = '';
+    },
     //价格格式限制
     NumberCheck() {
       let str = this.productDetail.price;
@@ -64,15 +71,29 @@ export default {
     },
     //商品详情
     queryProduct() {
-      
+      getGoodInfo().then(res => {
+        if(JSON.stringify(res.data.data) !== '{}') {
+          this.productDetail.goodsName = res.data.data.goodsName;
+          this.productDetail.imgPath = res.data.data.imgPath;
+          this.productDetail.price = res.data.data.price;
+        }
+      })
     },
     //重新上传
     doSave() {
+      // if(this.productDetail.shopName == '') {
+      //   this.$message.warning("请填写商家名称");
+      //   return;
+      // }
+      if(this.productDetail.goodsName == '') {
+        this.$message.warning("请填写商品名称");
+        return;
+      }
       if(this.productDetail.price == '') {
         this.$message.warning("请填写商品价格");
         return;
       }
-      if(this.productDetail.src == '') {
+      if(this.productDetail.imgPath == '') {
         this.$message.warning("请先上传图片");
         return;
       }
@@ -81,7 +102,13 @@ export default {
         cancelButtonText: "取消",
         type: "warning",
       }).then(() => {
-        this.$message.success("发布成功");
+        this.loading = true;
+        saveGoodInfo(this.productDetail).then(res => {
+          this.loading = false;
+          this.$message.success("发布成功");
+        }, () => {
+          this.loading = false;
+        })
       });
     },
     //取消发布
@@ -105,7 +132,12 @@ export default {
       });
     },
     handleAvatarSuccess(res, file) {
-      this.productDetail.src = URL.createObjectURL(file.raw);
+      if(res.code == 200){
+        this.productDetail.imgPath = res.data.link;
+      }
+      else{
+        this.$message.warning(res.msg)
+      }
     },
     beforeAvatarUpload(file) {
       const isJPG = file.type === 'image/jpeg';
@@ -156,12 +188,20 @@ export default {
 .img-box{
   position:relative; 
   width: 360px; 
-  height: calc(100vh - 280px); 
+  height: calc(100vh - 380px); 
-  overflow: auto;
+  .img-box-scroll{
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    overflow: auto;
+  }
   .btn-del {
     position: absolute;
     right: 0;
     top: 0;
+    z-index: 99;
   }
 }
 </style>

vue.config.js

@@ -26,9 +26,9 @@ module.exports = {
     proxy: {
       "/api": {
         //本地服务接口地址
-        target: "http://192.168.3.32:80",
+        // target: "http://192.168.3.32:80",
         // target: "http://47.104.224.41:80",
-        // target: "http://192.168.1.106:80",
+        target: "http://192.168.1.106:80",
         //远程演示服务地址,可用于直接启动项目
         //target: 'https://saber.bladex.vip/api',
         ws: true,