提交 336687e8 authored 作者: huaxinzhu's avatar huaxinzhu

1、商品-商品图片模块,增加上传拦截提示;

2、商品-商品信息模块,增加填写拦截提示;
3、商品-增加新增并直接提交商品上架审核功能,原“提交”功能,修改为“保存草稿”;
4、商品-下架商品-增加批量以及单个商品下架功能;
5、商品-上架商品-增加搜索功能|| 去掉“删除”功能
上级 bbdf1006
......@@ -6,7 +6,13 @@
</div>
<el-table v-loading="loading" :data="withdrawlogList" :height="tableHeight">
<el-table-column label="提现流水单号" align="center" prop="ReflectSn"/>
<el-table-column label="提现账号" align="center" prop="BankName"/>
<el-table-column label="提现账号" align="center" prop="BankName">
<template slot-scope="scope">
<div>
{{ scope.row.BankAccountNo }}
</div>
</template>
</el-table-column>
<el-table-column label="提现金额" :formatter="formatFee" align="center" prop="ReflectMoney"/>
<el-table-column label="提现状态" align="center" :formatter="formatType" prop="Status"/>
<el-table-column label="提现审核说明" align="center" prop="Des"/>
......
<template>
<div class="app-container">
<div class="app-container" v-loading="loading">
<div style="margin: auto">
<p><span class="tipH4">商品主图</span><span class="tipText"><i class="el-icon-question tipIcon"></i>要求上传高清图片,大小在2M以内,支持png、jpg格式,尺寸要求为正方形。</span>
</p>
......@@ -13,6 +13,7 @@
:on-exceed="limitCount1"
:before-upload = "beforeUpGoodsMainImg"
:before-remove = "beforeRemoveMainImg"
:on-remove="removeMainImg"
:on-preview="handleMainImgPreview"
>
<i class="el-icon-plus"></i>
......@@ -34,6 +35,7 @@
:on-exceed="limitCount5"
:before-upload = "beforeUpCarouselImg"
:before-remove="beforeRemoveCarouselImg"
:on-remove="removeCarouseImg"
:on-preview="handlePictureCardPreview"
>
<i class="el-icon-plus"></i>
......@@ -61,6 +63,7 @@
},
data() {
return {
loading: false, // 全屏加载
picall: {
ruleFormdialogImageUrl: [],
ruleFormdialogImageUrlplus: [], //主图
......@@ -149,11 +152,13 @@
// 上传商品主图
uploadGoodsMain(param) {
this.loading = true;
this.getBase64(param.file).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"image": this.Base64img}
UploadImg(data).then(res => {
this.loading = false;
if (res && res.data.code == 1) {
this.ruleFormdialogImageUrlplus.push({'url': res.data.data.imageUrl})
this.$message({ message:'上传成功',type:'success'});
......@@ -166,22 +171,13 @@
// 商品主图 删除移除前
beforeRemoveMainImg(file,fileList) {
if(file.status === 'success') {
if(file.status === "success") {
return new Promise((res, rej) => {
this.$confirm(`是否删除此图片`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
for(let i = 0; i < this.ruleFormdialogImageUrlplus.length; i++) {
if(file.uid === this.ruleFormdialogImageUrlplus[i].uid) {
this.ruleFormdialogImageUrlplus.splice(i,1);
}
}
this.$message({
type: 'success',
message: '删除成功!'
});
return res();
}).catch(() => {
this.$message({
......@@ -193,6 +189,20 @@
});
}
},
// 主图删除
removeMainImg(file) {
if(file.status === "success") {
for(let i = 0; i < this.ruleFormdialogImageUrlplus.length; i++) {
if(file.uid === this.ruleFormdialogImageUrlplus[i].uid) {
this.ruleFormdialogImageUrlplus.splice(i,1);
}
}
this.$message({
type: 'success',
message: '删除成功!'
});
}
},
// 商品主图 预览
handleMainImgPreview(file) {
......@@ -202,7 +212,7 @@
// 轮播图 数量限制
limitCount5(files,fileList){
this.$message({message: '最多上传1张图片', type: 'warning'});
this.$message({message: '最多上传5张图片', type: 'warning'});
},
// 轮播图 大小格式样式校验
beforeUpCarouselImg(file) {
......@@ -246,6 +256,7 @@
// 轮播图上传
uploadSectionFile(param) {
this.loading = true;
this.getBase64(param.file).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
......@@ -257,31 +268,20 @@
}else {
this.$message({ message:'上传失败,请重新上传',type:'error'});
}
this.loading = false;
})
});
},
// 轮播图 删除前
beforeRemoveCarouselImg(file,fileList) {
console.log("轮播图删除前66", file);
console.log("轮播图删除前77", fileList);
if(file.status === 'success') {
if(file.status === "success") {
return new Promise((res, rej) => {
this.$confirm(`是否删除此图片`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
for(let i = 0; i < this.ruleFormdialogImageUrl.length; i++) {
if(file.uid === this.ruleFormdialogImageUrl[i].uid) {
this.ruleFormdialogImageUrl.splice(i,1);
}
}
console.log(275,this.ruleFormdialogImageUrl);
this.$message({
type: 'success',
message: '删除成功!'
});
return res();
}).catch(() => {
this.$message({
......@@ -293,7 +293,21 @@
});
}
},
// 商品轮播图删除
removeCarouseImg(file){
if(file.status === "success") {
for(let i = 0; i < this.ruleFormdialogImageUrl.length; i++) {
if(file.uid === this.ruleFormdialogImageUrl[i].uid) {
this.ruleFormdialogImageUrl.splice(i,1);
}
}
this.$message({
type: 'success',
message: '删除成功!'
});
}
},
// 轮播图预览
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
......@@ -309,27 +323,10 @@
this.$emit('imgclicks', pic)
},
// 重置
resetGoodsImgForm(form) {
resetGoodsImgForm() {
this.ruleFormdialogImageUrl = [];
this.ruleFormdialogImageUrlplus = [];
},
// removeAaary(_arr, _obj) {
// var length = _arr.length;
// for (var i = 0; i < length; i++) {
// if (_arr[i] == _obj) {
// if (i == 0) {
// _arr.shift(); //删除并返回数组的第一个元素
// return _arr;
// } else if (i == length - 1) {
// _arr.pop(); //删除并返回数组的最后一个元素
// return _arr;
// } else {
// _arr.splice(i, 1); //删除下标为i的元素
// return _arr;
// }
// }
// }
// },
// -------------------------通用
// 图片转换为 base64
getBase64(file) {
......
......@@ -3,12 +3,14 @@
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>{{title}}</span>
<el-button style="float: right; " icon="el-icon-check" size="mini" type="primary" @click="submitForm">提 交
<el-button style="float: right; margin:0 20px;" size="mini" type="info" plain @click="submitForm(0)">保 存 草 稿
</el-button>
<el-button style="float: right; " size="mini" type="primary" @click="submitForm(1)">提 交 上 架
</el-button>
</div>
<el-tabs type="border-card">
<el-tab-pane label="商品信息">
<Goodsinfomation :infomationdatas='infomationdata' @infomationclick='infomationclick'/>
<Goodsinfomation ref="childGoodsInf" :infomationdatas='infomationdata' @infomationclick='infomationclick'/>
</el-tab-pane>
<el-tab-pane label="商品图片">
<Goodsimg :imgdata='imgdate' @imgclicks='imgclick'/>
......@@ -40,11 +42,14 @@
parameterdata: {},
goodsOnsale: 0,
loading: false,
applyStatus: '',
title: "添加新商品",
imgdate: [],
guidedate: {},
parameterdate: {},
params: {}
params: {
applyStatus: 0
}
}
},
components: {
......@@ -58,20 +63,19 @@
},
methods: {
getParams() {
var goodsId = this.$route.query.goodsId
let goodsId = this.$route.query.goodsId
if (goodsId > 0) {
this.title = "编辑商品信息"
this.genGoodsInfo(goodsId)
this.title = "编辑商品信息";
this.genGoodsInfo(goodsId);
}
// if (goodsId > 0 ) {
// this.genGoodsInfo(goodsId)
// }
},
// 获取商品详情
genGoodsInfo(goodsId) {
const goods_id = goodsId
this.loading = true;
const goods_id = goodsId;
getGoods(goods_id).then(response => {
this.goodsOnsale = response.data.data.isOnsale;
if(response.data.code === 1 && response.data.data) {
this.goodsOnsale = response.data.data.isOnsale;
this.infomationdata = {
goodsId: response.data.data.goodsId,
goodsName: response.data.data.goodsName,
......@@ -93,14 +97,21 @@
freightId: response.data.data.freightId,
outGoodsId: response.data.data.outGoodsId,
};
this.guidedate = response.data.data.goodsSpecs
this.guidedate["goodsSpec"] = response.data.data.goodsSpec
this.parameterdata = response.data.data.Params
this.imgdate = {
"ruleFormdialogImageUrl": response.data.data.image,
"ruleFormdialogImageUrlplus": response.data.data.defaultImage
this.guidedate = response.data.data.goodsSpecs;
this.guidedate["goodsSpec"] = response.data.data.goodsSpec;
this.parameterdata = response.data.data.Params;
this.imgdate = {
"ruleFormdialogImageUrl": response.data.data.image,
"ruleFormdialogImageUrlplus": response.data.data.defaultImage
};
}else if(response.data.code === 0) {
if(response.data.msg) {
this.$message({type:'error',message: response.data.msg});
}else {
this.$message({type:'error',message: '数据出错啦'});
}
}
this.loading = false;
});
},
info() {
......@@ -116,12 +127,15 @@
},
//商品图片
imgclick(type) {
let img = []
let img = [];
type.ruleFormdialogImageUrl.forEach((res, index) => {
img.push(res.url)
})
this.params["imgs"] = img
this.params["defaultImg"] = type.ruleFormdialogImageUrlplus[0].url
this.params["imgs"] = img;
this.params["defaultImg"] = ''
if(type.ruleFormdialogImageUrlplus.length > 0) {
this.params["defaultImg"] = type.ruleFormdialogImageUrlplus[0].url;
}
},
//规格
guideclick(type, specsGroup) {
......@@ -134,30 +148,130 @@
},
/** 确定按钮 */
submitForm() {
submitForm(status) {
this.params.applyStatus = 0;
this.params.isOnsale = this.goodsOnsale;
if(status === 1) {
this.params.applyStatus = 1;
}
// console.log("gogogogog",this.params);
// 商品信息 表单字段校验
let isGoodInfMsg = this.$refs['childGoodsInf'].validateGoodsInfForm();
// 商品图片 校验
let isGoodSImgMsg = 'defaultImg' in this.params;
if(!isGoodInfMsg) {
if(!('goodsName' in this.params)) {
this.$message({type: 'error',message: '[ 商品信息 ] 未填写完整!'});
return;
}
if('goodsName' in this.params) {
if(this.params.goodsName === '') {
this.$message({type: 'error',message: '[ 商品信息 ] 中 商品名称未填写!'});
return;
}
if(this.params.categoryId === 0) {
this.$message({type: 'error',message: '[ 商品信息 ] 中 商品分类未填写!'});
return;
}
if(this.params.scPrice === '') {
this.$message({type: 'error',message: '[ 商品信息 ] 中 市场原价未填写!'});
return;
}
if(this.params.price === '') {
this.$message({type: 'error',message: '[ 商品信息 ] 中 指导售价未填写!'});
return;
}
if(this.params.jsPrice === '') {
this.$message({type: 'error',message: '[ 商品信息 ] 中 结算价格未填写!'});
return;
}
if(this.params.goodsNowStock === '') {
this.$message({type: 'error',message: '[ 商品信息 ] 中 商品库存未填写!'});
return;
}
if(this.params.unit === '') {
this.$message({type: 'error',message: '[ 商品信息 ] 中 商品单位未填写!'});
return;
}
if(this.params.goodsBrand === '') {
this.$message({type: 'error',message: '[ 商品信息 ] 中 商品名称未填写!'});
return;
}
}
}
if(!isGoodSImgMsg) {
this.$message({type: 'error',message: '[ 商品图片 ] 未上传图片!'});
return;
}else {
if('defaultImg' in this.params) {
if(this.params.defaultImg === '') {
this.$message({type: 'error',message: '[ 商品图片 ] 中 商品主图未上传!'});
return;
}
if(this.params.imgs.length === 0) {
this.$message({type: 'error',message: '[ 商品图片 ] 中 商品轮播图未上传!'});
return;
}
}
}
this.loading = true;
addGoods(this.params).then(response => {
if (response.data.code == 1) {
if (response.code === 1) {
this.$message({
message: response.data.msg,
message: response.msg,
type: 'success'
});
this.$emit('closeDialog',false);
if (this.goodsOnsale) {
var redUrl = '/system/goods/onsale'
var redUrl = '/system/goods/onsale';
} else {
var redUrl = '/system/goods/offsale'
var redUrl = '/system/goods/offsale';
}
this.$router.push({
path: redUrl
});
} else {
this.$message.error(response.data.msg);
} else if(response.code === 0) {
if(response.msg) {
this.$message.error(response.msg);
}else {
this.$message.error("操作失败!");
}
}
this.loading = false;
});
},
//------ 通用方法 -----
verifiesForm(type,fieldName,obj) {
// 先判断类型,字符串类型type === text, 下拉形式字段 select
if(type === 'text') {
// 没有这个属性,肯定没有填写,抛出提示
if(!(fieldName in obj)) {
return 1;
}
}
if(type === 'select') {
}
// 如果有这个属性,那么进一步判断,这个必填值是否填写
// if(fieldName in obj && !obj[fieldName]) {
// return 2
// }
}
}
}
</script>
......
......@@ -173,10 +173,16 @@
/** 查询goods列表 */
getList() {
this.loading = true;
listGoods(this.queryParams).then(response => {
if (response.data != null) {
this.goodsList = response.data.data.list;
this.total = response.data.data.count;
listGoods(this.queryParams).then(res => {
if(res.code === 1 && res.data) {
this.goodsList = res.data.list;
this.total = res.data.count;
}else if(res.code === 0) {
if(res.msg) {
this.$message({type: 'error',message: res.msg});
}else {
this.$message({type: 'error',message: '数据出错啦!'});
}
}
this.loading = false;
});
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论