Skip to content

O
op-web-service
Commit 09eb0adf authored by mengwenhao's avatar mengwenhao
Browse files
Options

feature:商品图片上传格式修改

parent 06e8b187
Show whitespace changes
Inline Side-by-side
Showing with 127 additions and 114 deletions
src/pages/Goods/Detail/index.vue
View file @ 09eb0adf
......@@ -99,7 +99,7 @@
:action="uploadUrl"
:on-preview="previewImage"
:on-success="handleDetailSuccess"
:on-remove="removeDetailFiles"
:before-remove="removeDetailFiles"
:file-list="descPicUrlList"
auto-upload
:disabled="$route.params.operation !== 'EDIT'"
......@@ -153,7 +153,7 @@
multiple
ref="intrUpload"
:on-success="introduceSuccess"
:on-remove="intrRemove"
:before-remove="intrRemove"
:file-list="introducePicUrlList"
>
<template #default>
......@@ -455,6 +455,7 @@
</el-form-item>
<el-form-item label="过期时间">
<el-date-picker
v-if="$route.params.operation === 'EDIT'"
:disabledDate="disableExpirDate"
v-model="expirationTime"
type="datetime"
......@@ -462,6 +463,7 @@
placeholder="选择日期时间"
>
</el-date-picker>
<span v-else>{{ expirationTime }}</span>
</el-form-item>
<el-form-item label="使用规则：">
<el-input
......@@ -682,7 +684,6 @@ export default {
// 使用规则表单
rulesForm: {
rule_limit: "", // 单人可买上限
// 退款选项
rulesOptions: [
{ value: 1, label: "到期自动退款" },
......@@ -751,87 +752,68 @@ export default {
async getGoodsDetailList (params) {
try {
const res = await getGoodsInfo({ goods_spu_id: params });
if (res.code !== 0) {
return this.$message.error(res.reason);
}
console.log("商品详情列表", res);
if (res.code !== 0) return this.$message.error(res.reason);
const { goods_info, record_list } = res.result;
this.goodsObj = goods_info;
this.recordLits = record_list;
// 格式化商品详情照片
this.formatPicture(goods_info.desc_pic_url_list, this.descPicUrlList);
// 格式化商品介绍照片
this.formatPicture(
goods_info.introduce_pic_url_list,
this.introducePicUrlList
);
console.log(this.introducePicUrlList);
// 格式化详情图片上传列表
this.formatUploadPictureList(
goods_info.desc_pic_url_list,
this.detailUploadList
);
// 格式化介绍图片上传列表
this.formatUploadPictureList(
goods_info.introduce_pic_url_list,
this.introduceUploadList
);
// 渲染过期时间
this.expirationTime = goods_info.expiration_time;
// 初始化门店id
const shopId = goods_info.sub_shop.map(item => {
return item.sub_shop_id
return item.sub_shop_id;
});
this.shopIds = shopId.join(",");
// 初始化规则开始时间
this.activeStartTime = goods_info.rule_start_time;
// 初始化规则结束时间
this.activeEndTime = goods_info.rule_end_time;
// 回显图片
this.formatInitPicture(
goods_info.desc_pic_url_list,
this.descPicUrlList
);
this.formatInitPicture(
goods_info.introduce_pic_url_list,
this.introducePicUrlList
);
this.detailUploadList = goods_info.desc_pic_url.split(",");
this.introduceUploadList = goods_info.introduce_pic_url.split(",");
} catch (error) {
console.error(error);
}
},
// 格式化照片列表
formatPicture (willFormat, willStorage) {
willFormat.forEach(item => {
const obj = new Object();
obj.url = item;
willStorage.push(obj);
// 初始化照片
formatInitPicture (pictureList, storeList) {
pictureList.forEach(element => {
let obj = new Object();
obj.url = element;
storeList.push(obj);
});
},
// 格式化上传照片列表
formatUploadPictureList (willFormat, willStorage) {
for (let i = 0; i < willFormat.length; i++) {
if (willFormat.length === 0) {
return (this.detailUploadList = []);
}
const objectUrl = new URL(willFormat[i]);
const bucketName = objectUrl.hostname.replace(/.com$/i, "");
const objectId = objectUrl.pathname;
willStorage.push(`${bucketName}${objectId}`);
}
},
// 格式化自主上传后的图片列表
formatListUpload (response, fileList) {
const newFile = `${response.result.bucket}/${response.result.object_id}`;
fileList.push(newFile);
console.log("上传成功了的一个小小的无所谓的bucket+objectid", fileList);
// 上传图片的公共方法
uploadPicture (response, storageList) {
const responseURL = `${response.result.bucket}/${response.result.object_id}`;
storageList.push(responseURL);
console.log("已上传的列表", storageList);
},
// 格式化删除图片后上传的数组
formatDeletePhotoList (file, fileList) {
if (!file.response) {
const oldChangeNewUrl = new URL(file.url);
const oldPictureUrl =
oldChangeNewUrl.hostname.replace(/.com$/i, "") +
oldChangeNewUrl.pathname;
const oldIndex = fileList.indexOf(oldPictureUrl);
fileList.splice(oldIndex, 1);
console.log("detailUploadList", fileList);
} else {
const { bucket, object_id } = file.response.result;
const newUrl = `${bucket}/${object_id}`;
console.log(newUrl);
const newIndex = fileList.indexOf(newUrl);
fileList.splice(newIndex, 1);
console.log("detailUploadList", fileList);
}
// 删除图片的公共方法
deletePicture (file, fileList, storageList) {
for (let i = 0; i < fileList.length; i++) {
if (fileList[i].uid == file.uid) {
storageList.splice(i, 1);
};
};
console.log(storageList);
},
// 格式化日期
formatDate (startTime, endTime) {
const nowTime = new Date();
......@@ -879,6 +861,7 @@ export default {
const shopList = value.map(item => {
return item.sub_shop_id;
});
this.shopIds = "";
this.shopIds = shopList.join(",");
console.log(this.shopIds);
},
......@@ -908,6 +891,11 @@ export default {
this.goodsObj.sub_shop = this.goodsObj.sub_shop.filter(item => {
return item.sub_shop_id !== subShopId;
});
const shopIdsList = this.goodsObj.sub_shop.map(item => {
return item.sub_shop_id;
});
this.shopIds = shopIdsList.join(",");
console.log(this.shopIds);
},
// 商品列表换页
......@@ -942,22 +930,20 @@ export default {
// 商品详情图上传成功时
handleDetailSuccess (res) {
this.formatListUpload(res, this.detailUploadList);
this.uploadPicture(res, this.detailUploadList);
},
// 商品详情图删除完成后的钩子
removeDetailFiles (file) {
this.formatDeletePhotoList(file, this.detailUploadList);
removeDetailFiles (file, fileList) {
this.deletePicture(file, fileList, this.detailUploadList);
},
// 商品介绍图上传成功钩子
introduceSuccess (res) {
this.formatListUpload(res, this.introduceUploadList);
this.uploadPicture(res, this.introduceUploadList);
},
// 商品介绍图删除后的钩子
intrRemove (file) {
this.formatDeletePhotoList(file, this.introduceUploadList);
intrRemove (file, fileList) {
this.deletePicture(file, fileList, this.introduceUploadList);
},
// 展示商品大图
......@@ -1080,26 +1066,18 @@ export default {
// 保存修改信息
async saveDetailMessage () {
console.log(this.optionsValue);
console.log(this.shopIds);
if (!this.goodsObj.goods_name)
return this.$message.error("请填写商品名称");
if (!this.isGoodsNameRepeat)
return this.$message.error("商品名称被占用,请重新更换商品名称");
if (!this.optionsValue) return this.$message.error("请选择商品分类");
if (!this.expirationTime)
return this.$message.error("过期时间未填写,请填写后再提交");
const query = {
goods_spu_id: this.goodsObj.goods_spu_id, // 商品id
category_1_id: this.optionsValue[0], // 商品一级分类id
category_2_id: this.optionsValue[1], // 商品二级分类id
goods_name: this.goodsObj.goods_name, // 商品名称
desc_pic_url: this.detailUploadList, // 商品详情图片
desc_pic_url: this.detailUploadList.join(","), // 商品详情图片
desc: this.goodsObj.desc, // 商品详情描述
introduce: this.goodsObj.introduce, // 商品介绍
introduce_pic_url: this.introduceUploadList, // 商品介绍图片
introduce_pic_url: this.introduceUploadList.join(","), // 商品介绍图片
expiration_time: this.expirationTime, // 过期时间
rule_limit: this.rulesForm.rule_limit, // 单人可购买上限
rule_desc: this.rulesForm.rule_desc, // 规则描述
rule_limit: this.goodsObj.rule_limit, // 单人可购买上限
rule_desc: this.goodsObj.rule_desc, // 规则描述
rule_refund: this.goodsObj.rule_refund, // 退款规则
rule_start_time: this.activeStartTime, // 规则开始时间
rule_end_time: this.activeEndTime, // 规则结束时间
......@@ -1108,8 +1086,52 @@ export default {
price: this.goodsObj.price, // 现价
sub_shop_ids: this.shopIds // 门店id
};
console.log(query);
// 必填校验
if (!this.goodsObj.goods_spu_id) {
return this.$message.error("未传入商品id");
}
if (!query.category_1_id || !query.category_2_id) {
return this.$message.error("请选择商品分类");
}
if (!query.goods_name) {
return this.$message.error("请填写商品名称");
}
if (!this.isGoodsNameRepeat) {
return this.$message.error("商品名称被占用,请重新更换商品名称");
}
if (!query.expiration_time) {
return this.$message.error("过期时间未填写,请填写后再提交");
}
if (!query.rule_limit) {
return this.$message.error("请填写单人可购买上限");
}
if (!query.rule_desc) {
return this.$message.error("请填写使用规则描述");
}
if (!query.rule_refund) {
return this.$message.error("请填写退款规则");
}
if (!query.inventory_add) {
return this.$message.error("请填写库存剩余量");
}
if (!query.original_price) {
return this.$message.error("请填写原价(保留两位小数)");
}
if (!query.price) {
return this.$message.error("请填写现价(保留两位小数)");
}
if (!query.sub_shop_ids) {
return this.$message.error("请填写门店id");
}
const res = await editGoods(query);
if (res.code !== 0) return this.$message.error(res.reason);
if (res.code !== 0) {
return this.$message.error(res.reason);
}
this.$message.success("商品编辑成功!");
this.$router.replace({ name: "GoodsList" });
}
}
};
......
src/pages/Goods/List/index.vue
View file @ 09eb0adf
......@@ -166,18 +166,19 @@
>
<template #default="scope">
<el-button
v-if="scope.row.audit_status == 2 || scope.row.online_status == 1 || scope.row.online_status == 2"
type="text"
@click="goDetail(`EDIT`,scope.row.goods_spu_id)"
@click="goDetail(`EDIT`, scope.row.goods_spu_id)"
>编辑</el-button>
<el-button
v-if="scope.row.audit_status == 0"
type="text"
@click="goDetail(`AUDIT`,scope.row.goods_spu_id)"
@click="goDetail(`AUDIT`, scope.row.goods_spu_id)"
>审核</el-button>
<!-- v-if="scope.row.audit_status == 1 && scope.row.online_status == 2 || scope.row.audit_status == 1 && scope.row.online_status == 0" -->
<el-popconfirm
v-if="scope.row.online_status == 2 || scope.row.audit_status != 0 && scope.row.online_status == 0"
title="您确定要上架该商品吗？"
cancelButtonType="default"
@confirm="changeGoodsState('GROUNDING', scope.row.goods_spu_id)"
......@@ -187,8 +188,8 @@
</template>
</el-popconfirm>
<!-- v-if="scope.row.online_status == 1" -->
<el-popconfirm
v-if="scope.row.online_status == 1"
title="您确定要下架该商品吗？"
cancelButtonType="default"
@confirm="
......@@ -215,7 +216,6 @@
</el-pagination>
</el-card>
</layout>
</template>
<style lang="less" src="./index.less" scope></style>
......@@ -227,7 +227,7 @@ import {
putOnline,
putOffline
} from "@/service/Goods/goods";
import Layout from '../layout/index.vue'
import Layout from "../layout/index.vue";
export default {
name: "GoodsList",
......@@ -348,7 +348,7 @@ export default {
},
// 重置表单
resetList () {
this.searchProps = {
(this.searchProps = {
page: 1, // 页码
page_size: 20, // 页数大小
goods_spu_id: "", // 后台商品id
......@@ -359,7 +359,7 @@ export default {
life_account_name: "",
audit_status: "", // 商品状态
online_status: "" // 上架状态
},
}),
this.getCommodityList();
},
// 上架/下架操作
......
src/pages/Goods/components/PageHeader/config.js
View file @ 09eb0adf
......@@ -15,10 +15,10 @@ const headerConfig = [
name: "分销",
path: "/goods/retail"
},
{
name: "秒杀",
path: "/death"
}
// {
// name: "秒杀",
// path: "/death"
// }
]
}
];
......
src/pages/Goods/components/PageHeader/index.vue
View file @ 09eb0adf
......@@ -9,6 +9,7 @@
text-color="#fff"
:default-active="activeMenu"
active-text-color="#ffd04b"
unique-opened
>
<el-submenu
v-for="item in headerConfig"
......@@ -19,7 +20,7 @@
<el-menu-item
v-for="meItem in item.menuItem"
:index="meItem.path"
:key="meItem.name"
:key="meItem.path"
>
{{ meItem.name }}
</el-menu-item>
......@@ -45,29 +46,19 @@ export default {
User
},
data () {
return { headerConfig };
return {
headerConfig
};
},
computed: {
activeMenu () {
return this.$route.path;
}
},
beforeMount () {
console.log(headerConfig);
console.log("当前激活", this.activeMenu);
},
beforeMount () { },
methods: {}
};
</script>
<style lang="less">
.menu-router {
display: inline-block;
line-height: 60px;
width: 100%;
}
.header-menu .user-menu {
float: right !important;
margin-right: 20px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment