Skip to content

O
op-web-service
Commit 16fadde5 authored by mengwenhao's avatar mengwenhao
Browse files
Options

feature:商品介绍图格式重构完成

parent 777f0c1b
Show whitespace changes
Inline Side-by-side
Showing with 156 additions and 76 deletions
src/pages/Goods/Detail/index.vue
View file @ 16fadde5
......@@ -95,18 +95,18 @@
<section class="width50p">
<h4 style="margin-bottom:20px">商品详情图</h4>
<el-upload
:disabled="$route.params.operation !== 'EDIT'"
ref="detailUpload"
:data="{ scenario: `goods` }"
:action="uploadUrl"
:on-preview="previewImage"
:auto-upload="true"
:data="{ scenario: `goods` }"
:on-success="handleDetailSuccess"
:on-remove="removeDetailFiles"
:file-list="descPicUrlList"
auto-upload
:disabled="$route.params.operation !== 'EDIT'"
ref="detailUpload"
:limit="9"
list-type="picture-card"
multiple
:on-success="handleDetailChange"
:on-remove="removeDetailFiles"
:file-list="descPicUrlList"
>
<template #default>
<i class="el-icon-plus"></i>
......@@ -143,15 +143,16 @@
<section class="width50p">
<h4 style="margin-bottom:20px">商品介绍图</h4>
<el-upload
:data="{ scenario: `goods` }"
:disabled="$route.params.operation !== 'EDIT'"
action="#"
:auto-upload="false"
:action="uploadUrl"
auto-upload
:limit="9"
:on-preview="previewImage"
list-type="picture-card"
multiple
ref="intrUpload"
:on-change="intrChange"
:on-success="introduceSuccess"
:on-remove="intrRemove"
:file-list="introducePicUrlList"
>
......@@ -209,7 +210,7 @@
<template #default="scope">
<el-button
type="text"
@click="deleteShops(scope.row.shop_id)"
@click="deleteShops(scope.row.sub_shop_id)"
>删除
</el-button>
</template>
......@@ -229,11 +230,15 @@
</el-button>
</template>
<!-- 门店列表 -->
<el-table :data="shopsList.result">
<el-table
:data="shopsList"
@selection-change="handleShopsChange"
>
<el-table-column
type="selection"
width="55"
> </el-table-column>
>
</el-table-column>
<el-table-column
align="center"
prop="shop_name"
......@@ -269,7 +274,7 @@
v-model:currentPage="shopCurrentPage"
:page-size="5"
layout="total, prev, pager, next"
:total="shopsList.count"
:total="shopsCount"
>
</el-pagination>
......@@ -331,14 +336,16 @@
<el-form-item label="售价">
<el-input
type="number"
v-model="goodsObj.price"
@input="salePrice"
@blur="salePrice"
></el-input>
</el-form-item>
<el-form-item label="原价">
<el-input
type="number"
v-model="goodsObj.original_price"
@input="perPrice"
@blur="perPrice"
></el-input>
</el-form-item>
<h4 style="margin:20px 0">库存信息</h4>
......@@ -458,7 +465,6 @@
></el-table-column>
</el-table>
</el-card>
<!-- 审核保存返回 -->
<section class="operationButton">
<el-button
......@@ -509,7 +515,6 @@
>返回 </el-button>
</section>
</el-card>
<!-- 展示缩略图 -->
<el-dialog
width="40%"
......@@ -605,17 +610,22 @@ export default {
optionList: [], // 商品分类选项
optionsValue: [], // 商品分类的值
editOptionValue: "", // 商品分类的上传值
// 商品回显信息
goodsObj: {
introduce: ""
},
isGoodsNameRepeat: false, // 商品名称是否重复
descPicUrlList: [], // 商品详情图回显列表
introducePicUrlList: [], // 商品介绍图回显列表
recordList: [], // 提交记录
detailUploadList: [], // 上传图片列表
detailUploadList: [], // 上传详情图片列表
introduceUploadList: [], // 上传详情图片列表
inventoryNumber: 0, // 库存数量
// 使用规则表单
......@@ -642,6 +652,7 @@ export default {
},
shopsList: [], // 门店列表
shopsCount: 0,
shopCurrentPage: 1, // 门店列表当前页
// 新增门店表单
......@@ -661,6 +672,9 @@ export default {
rejectVisible: false, // 驳回原因弹框展示状态
isShowPopver: false, // 是否展示图片框
activeStartTime: "", // 活动开始时间
activeEndTime: "", // 活动结束时间
uploadUrl: `${GOODS_URI}/merchant/lifeinner/upload` // 金山云上传地址
};
},
......@@ -695,13 +709,18 @@ export default {
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
);
console.log(this.introduceUploadList);
} catch (error) {
console.error(error);
}
......@@ -715,40 +734,43 @@ export default {
willStorage.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]);
console.log(objectUrl);
const bucketName = objectUrl.hostname;
const bucketName = objectUrl.hostname.replace(/.com$/i, "");
const objectId = objectUrl.pathname;
willStorage.push(`${bucketName}${objectId}`);
}
},
// 获取门店列表
async getShops () {
const query = {
// this.goodsObj.life_account_id
life_account_id: "9233473057619969",
page: this.shopCurrentPage,
page_size: 5
};
const res = await getShopsList(query);
if (res.code !== 0) return this.$message.error(res.reason);
this.shopsList = res;
// 格式化自主上传后的图片列表
formatListUpload (response, fileList) {
const newFile = `${response.result.bucket}/${response.result.object_id}`;
fileList.push(newFile);
console.log("上传成功了的一个小小的无所谓的bucket+objectid", fileList);
},
// 商品列表换页
changeShopListPage (page) {
this.shopCurrentPage = page;
this.getShops();
// 格式化删除图片后上传的数组
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);
}
},
// 格式化日期
formatDate (startTime, endTime) {
const nowTime = new Date();
......@@ -776,9 +798,45 @@ export default {
];
},
// 获取门店列表
async getShops () {
const query = {
// this.goodsObj.life_account_id
life_account_id: "9233473057619969",
page: this.shopCurrentPage,
page_size: 5
};
const res = await getShopsList(query);
console.log(res);
if (res.code !== 0) return this.$message.error(res.reason);
this.shopsList = res.result;
this.shopsCount = res.count;
},
// 门店列表更改时
handleShopsChange (value) {
this.goodsObj.sub_shop = value;
console.log(value);
},
// 删除已选择门店
deleteShops (subShopId) {
this.goodsObj.sub_shop = this.goodsObj.sub_shop.filter(item => {
return item.sub_shop_id !== subShopId;
});
},
// 商品列表换页
changeShopListPage (page) {
this.shopCurrentPage = page;
this.getShops();
},
// 商品分类列表变化
optionsChange (value) {
console.log(value);
console.log("商品分类id", value);
this.editOptionValue = value.join(",");
console.log(this.editOptionValue);
},
// 检查商品名称是否重复
......@@ -790,32 +848,33 @@ export default {
});
console.log(res);
if (res.code !== 0) return this.$message.error(res.reason);
this.$message.success("商品名称未被占用");
if (res.result.can_use) {
this.isGoodsNameRepeat = true;
this.$message.success("名称未被占用,请继续填写表单");
} else {
this.isGoodsNameRepeat = false;
return this.$message.error("名称被占用,换个名称试试吧~~~");
}
},
// 商品详情图上传成功时
handleDetailChange (res, file, fileList) {
console.log("返回结果", res);
console.log("文件", file);
console.log("文件列表", fileList);
const newFile = `${res.result.bucket}/${res.result.object_id}`;
this.detailUploadList.push(newFile);
console.log("上传成功了的一个小小的无所谓的bucket+objectid", this.detailUploadList);
handleDetailSuccess (res) {
this.formatListUpload(res, this.detailUploadList);
},
// 商品详情图删除完成后的钩子
removeDetailFiles (file, fileList) {
console.log(fileList);
removeDetailFiles (file) {
this.formatDeletePhotoList(file, this.detailUploadList);
},
// 商品介绍图更改钩子
intrChange (file, fileList) {
console.log(fileList);
// 商品介绍图上传成功钩子
introduceSuccess (res) {
this.formatListUpload(res, this.introduceUploadList);
},
// 商品介绍图删除后的钩子
intrRemove (file, fileList) {
console.log(fileList);
intrRemove (file) {
this.formatDeletePhotoList(file, this.introduceUploadList);
},
// 展示商品大图
......@@ -824,31 +883,51 @@ export default {
this.isShowPopver = true;
},
// 删除已选择门店
deleteShops (shopId) {
console.log(shopId);
},
// 选择时间
pickerTime (time) {
this.goodsObj.rule_start_time;
const dateTime1 = time[0].getHours();
const dateTime2 = time[1].getHours();
console.log("时间节点", dateTime1, dateTime2);
let startHours = time[0].getHours() + "";
let startMinutes = time[0].getMinutes() + "";
let startSeconds = time[0].getSeconds() + "";
let endHours = time[1].getHours() + "";
let endMinutes = time[1].getMinutes() + "";
let endSeconds = time[1].getSeconds() + "";
if (startHours < 10) {
startHours = "0" + startHours;
}
if (startMinutes < 10) {
startMinutes = "0" + startMinutes;
}
if (startSeconds < 10) {
startSeconds = "0" + startSeconds;
}
if (endHours < 10) {
endHours = "0" + endHours;
}
if (endMinutes < 10) {
endMinutes = "0" + endMinutes;
}
if (endSeconds < 10) {
endSeconds = "0" + endSeconds;
}
this.activeStartTime = `${startHours}:${startMinutes}:${startSeconds}`;
this.activeEndTime = `${endHours}:${endMinutes}:${endSeconds}`;
console.log("时间节点", this.activeStartTime, this.activeEndTime);
},
// 更改售价
salePrice (value) {
if (value.length === 0) value = 0;
this.goodsObj.price = parseFloat(value).toFixed(2);
console.log("售价", this.goodsObj.price);
salePrice () {
if (this.goodsObj.price.length === 0) return (this.goodsObj.price = 0);
this.goodsObj.price = parseFloat(this.goodsObj.price).toFixed(2);
},
// 更改原价
perPrice (value) {
if (value.length === 0) value = 0;
this.goodsObj.original_price = parseFloat(value).toFixed(2);
console.log("原价", this.goodsObj.original_price);
perPrice () {
if (this.goodsObj.original_price === 0)
return (this.goodsObj.original_price = 0);
this.goodsObj.original_price = parseFloat(
this.goodsObj.original_price
).toFixed(2);
},
// 审核通过
......
src/pages/Goods/List/index.vue
View file @ 16fadde5
......@@ -368,6 +368,7 @@ export default {
if (res.code !== 0) return this.$message.error(res.reason);
this.$message.success("商品下架成功");
}
this.getCommodityList();
},
// 页码变化
......
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