suojin
/
pillow_customize_pc
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

商品增加商品名称字段

Browse Source
main
xuechunyuan 2 years ago
parent 98cfb8d51a
commit fd540fee0a
3 changed files with 87 additions and 24 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 23
      src/api/product/product.js
  2. 84
      src/views/product/index.vue
  3. 4
      vue.config.js

23
src/api/product/product.js
Unescape View File

@ -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
});
};

84
src/views/product/index.vue
Unescape View File

@ -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>
<img :src="productDetail.src" style="width: 100%; height: auto;" />
<el-button class="btn-del" size="mini" icon="el-icon-delete" type="danger" @click="delImgPath">删 除</el-button>
<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="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> -->
<el-button type="primary" size="small" @click="doSave" :loading="loading">确 定</el-button>
</div>
</el-form>
</basic-container>
</template>
<script>
// import {getBaseList,getTypeList} from "@/api/base"
import {
getList,
exportList,
deleteList,
detailList,
} from "@/api/statistics/statistics";
import { getGoodInfo, saveGoodInfo } from "@/api/product/product";
export default {
data() {
return {
productDetail: {
src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
status: 1
// shopName: '',
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);
overflow: auto;
height: calc(100vh - 380px);
.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>

4
vue.config.js
Unescape View File

@ -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,

Write Preview
Loading…
Cancel
Save