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

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

2、商品-商品信息模块,增加填写拦截提示;
3、商品-增加新增并直接提交商品上架审核功能,原“提交”功能,修改为“保存草稿”;
4、商品-下架商品-增加批量以及单个商品下架功能;
5、商品-上架商品-增加搜索功能|| 去掉“删除”功能
上级 bbdf1006
...@@ -6,7 +6,13 @@ ...@@ -6,7 +6,13 @@
</div> </div>
<el-table v-loading="loading" :data="withdrawlogList" :height="tableHeight"> <el-table v-loading="loading" :data="withdrawlogList" :height="tableHeight">
<el-table-column label="提现流水单号" align="center" prop="ReflectSn"/> <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="提现金额" :formatter="formatFee" align="center" prop="ReflectMoney"/>
<el-table-column label="提现状态" align="center" :formatter="formatType" prop="Status"/> <el-table-column label="提现状态" align="center" :formatter="formatType" prop="Status"/>
<el-table-column label="提现审核说明" align="center" prop="Des"/> <el-table-column label="提现审核说明" align="center" prop="Des"/>
......
<template> <template>
<div class="app-container"> <div class="app-container" v-loading="loading">
<div style="margin: auto"> <div style="margin: auto">
<p><span class="tipH4">商品主图</span><span class="tipText"><i class="el-icon-question tipIcon"></i>要求上传高清图片,大小在2M以内,支持png、jpg格式,尺寸要求为正方形。</span> <p><span class="tipH4">商品主图</span><span class="tipText"><i class="el-icon-question tipIcon"></i>要求上传高清图片,大小在2M以内,支持png、jpg格式,尺寸要求为正方形。</span>
</p> </p>
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
:on-exceed="limitCount1" :on-exceed="limitCount1"
:before-upload = "beforeUpGoodsMainImg" :before-upload = "beforeUpGoodsMainImg"
:before-remove = "beforeRemoveMainImg" :before-remove = "beforeRemoveMainImg"
:on-remove="removeMainImg"
:on-preview="handleMainImgPreview" :on-preview="handleMainImgPreview"
> >
<i class="el-icon-plus"></i> <i class="el-icon-plus"></i>
...@@ -34,6 +35,7 @@ ...@@ -34,6 +35,7 @@
:on-exceed="limitCount5" :on-exceed="limitCount5"
:before-upload = "beforeUpCarouselImg" :before-upload = "beforeUpCarouselImg"
:before-remove="beforeRemoveCarouselImg" :before-remove="beforeRemoveCarouselImg"
:on-remove="removeCarouseImg"
:on-preview="handlePictureCardPreview" :on-preview="handlePictureCardPreview"
> >
<i class="el-icon-plus"></i> <i class="el-icon-plus"></i>
...@@ -61,6 +63,7 @@ ...@@ -61,6 +63,7 @@
}, },
data() { data() {
return { return {
loading: false, // 全屏加载
picall: { picall: {
ruleFormdialogImageUrl: [], ruleFormdialogImageUrl: [],
ruleFormdialogImageUrlplus: [], //主图 ruleFormdialogImageUrlplus: [], //主图
...@@ -149,11 +152,13 @@ ...@@ -149,11 +152,13 @@
// 上传商品主图 // 上传商品主图
uploadGoodsMain(param) { uploadGoodsMain(param) {
this.loading = true;
this.getBase64(param.file).then((res) => { this.getBase64(param.file).then((res) => {
let result = res.split(","); let result = res.split(",");
this.Base64img = result[1]; this.Base64img = result[1];
let data = {"image": this.Base64img} let data = {"image": this.Base64img}
UploadImg(data).then(res => { UploadImg(data).then(res => {
this.loading = false;
if (res && res.data.code == 1) { if (res && res.data.code == 1) {
this.ruleFormdialogImageUrlplus.push({'url': res.data.data.imageUrl}) this.ruleFormdialogImageUrlplus.push({'url': res.data.data.imageUrl})
this.$message({ message:'上传成功',type:'success'}); this.$message({ message:'上传成功',type:'success'});
...@@ -166,22 +171,13 @@ ...@@ -166,22 +171,13 @@
// 商品主图 删除移除前 // 商品主图 删除移除前
beforeRemoveMainImg(file,fileList) { beforeRemoveMainImg(file,fileList) {
if(file.status === 'success') { if(file.status === "success") {
return new Promise((res, rej) => { return new Promise((res, rej) => {
this.$confirm(`是否删除此图片`, '提示', { this.$confirm(`是否删除此图片`, '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).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(); return res();
}).catch(() => { }).catch(() => {
this.$message({ this.$message({
...@@ -193,6 +189,20 @@ ...@@ -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) { handleMainImgPreview(file) {
...@@ -202,7 +212,7 @@ ...@@ -202,7 +212,7 @@
// 轮播图 数量限制 // 轮播图 数量限制
limitCount5(files,fileList){ limitCount5(files,fileList){
this.$message({message: '最多上传1张图片', type: 'warning'}); this.$message({message: '最多上传5张图片', type: 'warning'});
}, },
// 轮播图 大小格式样式校验 // 轮播图 大小格式样式校验
beforeUpCarouselImg(file) { beforeUpCarouselImg(file) {
...@@ -246,6 +256,7 @@ ...@@ -246,6 +256,7 @@
// 轮播图上传 // 轮播图上传
uploadSectionFile(param) { uploadSectionFile(param) {
this.loading = true;
this.getBase64(param.file).then((res) => { this.getBase64(param.file).then((res) => {
let result = res.split(","); let result = res.split(",");
this.Base64img = result[1]; this.Base64img = result[1];
...@@ -257,31 +268,20 @@ ...@@ -257,31 +268,20 @@
}else { }else {
this.$message({ message:'上传失败,请重新上传',type:'error'}); this.$message({ message:'上传失败,请重新上传',type:'error'});
} }
this.loading = false;
}) })
}); });
}, },
// 轮播图 删除前 // 轮播图 删除前
beforeRemoveCarouselImg(file,fileList) { beforeRemoveCarouselImg(file,fileList) {
console.log("轮播图删除前66", file); if(file.status === "success") {
console.log("轮播图删除前77", fileList);
if(file.status === 'success') {
return new Promise((res, rej) => { return new Promise((res, rej) => {
this.$confirm(`是否删除此图片`, '提示', { this.$confirm(`是否删除此图片`, '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).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(); return res();
}).catch(() => { }).catch(() => {
this.$message({ this.$message({
...@@ -293,7 +293,21 @@ ...@@ -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) { handlePictureCardPreview(file) {
this.dialogImageUrl = file.url; this.dialogImageUrl = file.url;
...@@ -309,27 +323,10 @@ ...@@ -309,27 +323,10 @@
this.$emit('imgclicks', pic) 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 // 图片转换为 base64
getBase64(file) { getBase64(file) {
......
...@@ -3,12 +3,14 @@ ...@@ -3,12 +3,14 @@
<el-card class="box-card"> <el-card class="box-card">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>{{title}}</span> <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> </el-button>
</div> </div>
<el-tabs type="border-card"> <el-tabs type="border-card">
<el-tab-pane label="商品信息"> <el-tab-pane label="商品信息">
<Goodsinfomation :infomationdatas='infomationdata' @infomationclick='infomationclick'/> <Goodsinfomation ref="childGoodsInf" :infomationdatas='infomationdata' @infomationclick='infomationclick'/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="商品图片"> <el-tab-pane label="商品图片">
<Goodsimg :imgdata='imgdate' @imgclicks='imgclick'/> <Goodsimg :imgdata='imgdate' @imgclicks='imgclick'/>
...@@ -40,11 +42,14 @@ ...@@ -40,11 +42,14 @@
parameterdata: {}, parameterdata: {},
goodsOnsale: 0, goodsOnsale: 0,
loading: false, loading: false,
applyStatus: '',
title: "添加新商品", title: "添加新商品",
imgdate: [], imgdate: [],
guidedate: {}, guidedate: {},
parameterdate: {}, parameterdate: {},
params: {} params: {
applyStatus: 0
}
} }
}, },
components: { components: {
...@@ -58,19 +63,18 @@ ...@@ -58,19 +63,18 @@
}, },
methods: { methods: {
getParams() { getParams() {
var goodsId = this.$route.query.goodsId let goodsId = this.$route.query.goodsId
if (goodsId > 0) { if (goodsId > 0) {
this.title = "编辑商品信息" this.title = "编辑商品信息";
this.genGoodsInfo(goodsId) this.genGoodsInfo(goodsId);
} }
// if (goodsId > 0 ) {
// this.genGoodsInfo(goodsId)
// }
}, },
// 获取商品详情 // 获取商品详情
genGoodsInfo(goodsId) { genGoodsInfo(goodsId) {
const goods_id = goodsId this.loading = true;
const goods_id = goodsId;
getGoods(goods_id).then(response => { getGoods(goods_id).then(response => {
if(response.data.code === 1 && response.data.data) {
this.goodsOnsale = response.data.data.isOnsale; this.goodsOnsale = response.data.data.isOnsale;
this.infomationdata = { this.infomationdata = {
goodsId: response.data.data.goodsId, goodsId: response.data.data.goodsId,
...@@ -93,14 +97,21 @@ ...@@ -93,14 +97,21 @@
freightId: response.data.data.freightId, freightId: response.data.data.freightId,
outGoodsId: response.data.data.outGoodsId, outGoodsId: response.data.data.outGoodsId,
}; };
this.guidedate = response.data.data.goodsSpecs this.guidedate = response.data.data.goodsSpecs;
this.guidedate["goodsSpec"] = response.data.data.goodsSpec this.guidedate["goodsSpec"] = response.data.data.goodsSpec;
this.parameterdata = response.data.data.Params this.parameterdata = response.data.data.Params;
this.imgdate = { this.imgdate = {
"ruleFormdialogImageUrl": response.data.data.image, "ruleFormdialogImageUrl": response.data.data.image,
"ruleFormdialogImageUrlplus": response.data.data.defaultImage "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() { info() {
...@@ -116,12 +127,15 @@ ...@@ -116,12 +127,15 @@
}, },
//商品图片 //商品图片
imgclick(type) { imgclick(type) {
let img = [] let img = [];
type.ruleFormdialogImageUrl.forEach((res, index) => { type.ruleFormdialogImageUrl.forEach((res, index) => {
img.push(res.url) img.push(res.url)
}) })
this.params["imgs"] = img this.params["imgs"] = img;
this.params["defaultImg"] = type.ruleFormdialogImageUrlplus[0].url this.params["defaultImg"] = ''
if(type.ruleFormdialogImageUrlplus.length > 0) {
this.params["defaultImg"] = type.ruleFormdialogImageUrlplus[0].url;
}
}, },
//规格 //规格
guideclick(type, specsGroup) { guideclick(type, specsGroup) {
...@@ -134,30 +148,130 @@ ...@@ -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; this.loading = true;
addGoods(this.params).then(response => { addGoods(this.params).then(response => {
if (response.data.code == 1) { if (response.code === 1) {
this.$message({ this.$message({
message: response.data.msg, message: response.msg,
type: 'success' type: 'success'
}); });
this.$emit('closeDialog',false); this.$emit('closeDialog',false);
if (this.goodsOnsale) { if (this.goodsOnsale) {
var redUrl = '/system/goods/onsale' var redUrl = '/system/goods/onsale';
} else { } else {
var redUrl = '/system/goods/offsale' var redUrl = '/system/goods/offsale';
} }
this.$router.push({ this.$router.push({
path: redUrl path: redUrl
}); });
} else { } else if(response.code === 0) {
this.$message.error(response.data.msg); if(response.msg) {
this.$message.error(response.msg);
}else {
this.$message.error("操作失败!");
}
} }
this.loading = false; 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> </script>
......
...@@ -173,10 +173,16 @@ ...@@ -173,10 +173,16 @@
/** 查询goods列表 */ /** 查询goods列表 */
getList() { getList() {
this.loading = true; this.loading = true;
listGoods(this.queryParams).then(response => { listGoods(this.queryParams).then(res => {
if (response.data != null) { if(res.code === 1 && res.data) {
this.goodsList = response.data.data.list; this.goodsList = res.data.list;
this.total = response.data.data.count; 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; this.loading = false;
}); });
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论