987 lines
31 KiB
Vue
987 lines
31 KiB
Vue
<template>
|
||
<div>
|
||
<obj-modal
|
||
class="obj-modal"
|
||
ref="modal"
|
||
labelWidth="120px"
|
||
:modalCols="modalCols"
|
||
:modalConfig="modalConfig"
|
||
:modalData="modalData"
|
||
:modalHandles="modalHandles"
|
||
>
|
||
<template slot="dialog__before">
|
||
<el-tabs :before-leave="beforeTabLeave" v-model="currentPanel">
|
||
<el-tab-pane label="基础信息" name="基础信息"></el-tab-pane>
|
||
<el-tab-pane label="销售信息" name="销售信息"></el-tab-pane>
|
||
<el-tab-pane label="其他信息" name="其他信息"></el-tab-pane>
|
||
</el-tabs>
|
||
</template>
|
||
</obj-modal>
|
||
<!-- 添加规格 -->
|
||
<addSpecifications
|
||
@getSpecs="getSpecs"
|
||
ref="addSpecifications"
|
||
></addSpecifications>
|
||
<!-- 属性 -->
|
||
<addAttribute
|
||
@getAttribute="getAttribute"
|
||
ref="addAttribute"
|
||
></addAttribute>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import addAttribute from "./add-attribute.vue";
|
||
import addSpecifications from "./add-specifications.vue";
|
||
import { debounce, cloneDeep } from "lodash";
|
||
export default {
|
||
components: { addSpecifications, addAttribute },
|
||
data() {
|
||
return {
|
||
currentPanel: "基础信息",
|
||
modalData: {
|
||
merchantId: null,
|
||
shopId: null,
|
||
id: null,
|
||
name: "",
|
||
productCategoryId: "",
|
||
productPhotoList: [
|
||
// {
|
||
// "url": "https://dmjs.obs.cn-east-3.myhuaweicloud.com/hhsh/20240807/914faade6f82459388d084c14c91f866.png",
|
||
// "isMain": 1
|
||
// }
|
||
],
|
||
description: "",
|
||
productUnit: "",
|
||
productPlace: "",
|
||
//保质期
|
||
shelfLife: "",
|
||
//产品介绍图
|
||
productIntroducePhoto: "",
|
||
//产品介绍视频
|
||
productVideo: "",
|
||
//单价
|
||
singlePrice: "",
|
||
//单库存
|
||
singleStock: "",
|
||
//其他属性
|
||
otherAttribute: [], //[{"name":"颜色","value":"黄色；屎黄色"}]
|
||
//折扣情况
|
||
discountActivity: {
|
||
// "endTime": "2024-08-31 00:00:00",
|
||
// "id": "1821213180710957056",
|
||
// "merchantId": "1818337963053297664",
|
||
// "ruleObject": {
|
||
// "discount": 5,
|
||
// "limitCount": 99
|
||
// },
|
||
// "shopId": "1818337963523059712",
|
||
// "startTime": "2024-08-01 00:00:00",
|
||
// "type": 0
|
||
},
|
||
//是否折扣
|
||
isDiscount: 1,
|
||
marketId: null,
|
||
//最大消费
|
||
maxCostPrice: 15,
|
||
//市场最大消费
|
||
maxMarketPrice: 35,
|
||
//最大售价
|
||
maxSalePrice: 17.5,
|
||
//最低售价
|
||
minCostPrice: 10,
|
||
//市场最低售价
|
||
minMarketPrice: 20,
|
||
minSalePrice: 10,
|
||
salePrice: 20,
|
||
sort: 999,
|
||
status: "DOWN", //up 上架 //DOWN 放入仓库
|
||
stockNum: 200,
|
||
specType: 1,
|
||
productAttributeList: [
|
||
// {
|
||
// "id": "1821213026050191360",
|
||
// "attributeName": "重量",
|
||
// "attributeValue": "1斤,2斤"
|
||
// }
|
||
],
|
||
productSpecificationList: [
|
||
// {
|
||
// "attributeValue": "重量1斤",
|
||
// "costPrice": 10,
|
||
// "id": "1821213026083745792",
|
||
// "isDiscount": 1,
|
||
// "limitCount": 99,
|
||
// "marketPrice": 20,
|
||
// "productId": "1821207097380515840",
|
||
// "saleNum": 0,
|
||
// "salePrice": 10,
|
||
// "stockNum": 100,
|
||
// "virtualSaleNum": 0,
|
||
// "warnStockNum": 0,
|
||
// "_id": "重量1斤",
|
||
// "value": "售价￥10 成本￥10 库存100"
|
||
// },
|
||
// {
|
||
// "attributeValue": "重量2斤",
|
||
// "costPrice": 15,
|
||
// "id": "1821213026083745793",
|
||
// "isDiscount": 1,
|
||
// "limitCount": 99,
|
||
// "marketPrice": 35,
|
||
// "productId": "1821207097380515840",
|
||
// "saleNum": 0,
|
||
// "salePrice": 17.5,
|
||
// "stockNum": 100,
|
||
// "virtualSaleNum": 0,
|
||
// "warnStockNum": 0,
|
||
// "_id": "重量2斤",
|
||
// "value": "售价￥17.5 成本￥15 库存100"
|
||
// }
|
||
]
|
||
},
|
||
modalConfig: {
|
||
title: "编辑商品",
|
||
show: false,
|
||
width: "1300px",
|
||
fullscreen: true
|
||
},
|
||
fileList: [], //回显图片
|
||
fileListOne: [], //介绍图
|
||
fileListTwo: [], //视频
|
||
place: "", //场地
|
||
passCheck: [], //通行证
|
||
shopId: "",
|
||
getProductCategory: [],
|
||
getSaleUnit: []
|
||
};
|
||
},
|
||
mounted() {},
|
||
watch: {
|
||
"modalConfig.show"(newVal) {
|
||
if (!newVal) {
|
||
this.currentPanel = "基础信息";
|
||
this.fileList = [];
|
||
(this.fileListOne = []), (this.fileListTwo = []);
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
toggle(e) {
|
||
if (this.modalConfig.show == false) {
|
||
this.modalConfig.show = true;
|
||
} else {
|
||
this.modalConfig.show = false;
|
||
}
|
||
if (e) {
|
||
console.log(e);
|
||
this.init(cloneDeep(e));
|
||
}
|
||
return {
|
||
add: shopId => {
|
||
this.shopId = shopId;
|
||
this.getData();
|
||
console.log(this.shopId);
|
||
this.$nextTick(() => {
|
||
this.modalConfig.title = "添加商品";
|
||
this.modalData = {
|
||
description: "",
|
||
merchantId: "",
|
||
name: "",
|
||
otherAttribute: [],
|
||
productAttributeList: [],
|
||
productCategoryId: "",
|
||
productIntroducePhoto: "",
|
||
productPhotoList: [],
|
||
productPlace: "",
|
||
productSpecificationList: [],
|
||
productUnit: "",
|
||
productVideo: "",
|
||
shelfLife: "",
|
||
shopId: "",
|
||
singleStock: "",
|
||
specType: 0,
|
||
minCostPrice: "",
|
||
status: "UP",
|
||
isAdvanceSell: "0"
|
||
};
|
||
this.modalData.merchantId = JSON.parse(
|
||
sessionStorage.getItem("userInfo")
|
||
).merchantId;
|
||
this.modalData.shopId = shopId;
|
||
this.passCheck = [];
|
||
this.place = [];
|
||
});
|
||
|
||
this.isAdd = true;
|
||
console.log("112233");
|
||
},
|
||
update: () => {
|
||
this.modalConfig.title = "编辑商品";
|
||
this.isAdd = false;
|
||
}
|
||
};
|
||
},
|
||
init(row) {
|
||
console.log(row);
|
||
this.shopId = row.shopId;
|
||
this.getData();
|
||
this.fileList = row.productPhotoList.map(item => {
|
||
return {
|
||
name: "",
|
||
url: item.url
|
||
};
|
||
});
|
||
if (row.productIntroducePhoto) {
|
||
// 处理多张介绍图(逗号分隔的URL)
|
||
const urls = row.productIntroducePhoto.split(",");
|
||
this.fileListOne = urls.map(url => ({
|
||
name: "",
|
||
url: url.trim()
|
||
}));
|
||
} else {
|
||
this.fileListOne = [];
|
||
}
|
||
if (row.productVideo) {
|
||
this.fileListTwo = [
|
||
{
|
||
name: "",
|
||
url: row.productVideo
|
||
}
|
||
];
|
||
} else {
|
||
this.fileListTwo = [];
|
||
}
|
||
this.place = row.productPlace.split("-");
|
||
this.modalData = row;
|
||
if (row.minCostPrice == row.maxCostPrice) {
|
||
this.$set(this.modalData, "costPrice", row.minCostPrice);
|
||
} else {
|
||
this.$set(
|
||
this.modalData,
|
||
"costPrice",
|
||
row.minCostPrice + "~" + row.maxCostPrice
|
||
);
|
||
}
|
||
if (row.minMarketPrice == row.maxMarketPrice) {
|
||
this.$set(this.modalData, "marketPrice", row.minMarketPrice);
|
||
} else {
|
||
this.$set(
|
||
this.modalData,
|
||
"marketPrice",
|
||
row.minMarketPrice + "~" + row.maxMarketPrice
|
||
);
|
||
}
|
||
if (!row.productAttributeList) {
|
||
this.$set(this.modalData, "productAttributeList", []);
|
||
}
|
||
if (row.otherAttribute) {
|
||
this.modalData.otherAttribute = JSON.parse(row.otherAttribute);
|
||
} else {
|
||
this.modalData.otherAttribute = [];
|
||
}
|
||
console.log(this.modalData);
|
||
},
|
||
addSpecs() {
|
||
console.log("123");
|
||
if (this.isAdd) {
|
||
this.$refs.addSpecifications
|
||
.toggle()
|
||
.add(
|
||
this.modalData.productAttributeList,
|
||
this.modalData.productSpecificationList
|
||
);
|
||
} else {
|
||
if (this.modalData.specType == 0) {
|
||
this.$refs.addSpecifications.toggle().update([], []);
|
||
} else {
|
||
this.$refs.addSpecifications
|
||
.toggle()
|
||
.update(
|
||
this.modalData.productAttributeList,
|
||
this.modalData.productSpecificationList
|
||
);
|
||
}
|
||
}
|
||
},
|
||
//获取属性
|
||
getSpecs(tableData, AttributeData) {
|
||
console.log(tableData);
|
||
this.modalData.specType = 1;
|
||
let AttributeList = AttributeData.map(item => {
|
||
return {
|
||
attributeName: item.attributeName,
|
||
attributeValue: item.attributeValue.join(",")
|
||
};
|
||
});
|
||
this.$set(this.modalData, "productSpecificationList", tableData);
|
||
this.$set(this.modalData, "productAttributeList", AttributeList);
|
||
},
|
||
addAttribute() {
|
||
if (this.isAdd) {
|
||
this.$refs.addAttribute.toggle().add(this.modalData.otherAttribute);
|
||
} else {
|
||
this.$refs.addAttribute.toggle().update(this.modalData.otherAttribute);
|
||
}
|
||
},
|
||
getAttribute(data) {
|
||
console.log(data);
|
||
this.modalData.otherAttribute = [
|
||
{
|
||
name: data.name,
|
||
value: data.value.join(",")
|
||
}
|
||
];
|
||
console.log(this.modalData);
|
||
},
|
||
beforeTabLeave(activeName, oldActiveName) {
|
||
if (this.passCheck.includes(activeName)) {
|
||
return true;
|
||
}
|
||
let state = "";
|
||
this.$refs.modal.validate(valid => {
|
||
if (valid) {
|
||
if (!this.passCheck.includes(oldActiveName)) {
|
||
this.passCheck.push(oldActiveName);
|
||
}
|
||
}
|
||
state = valid;
|
||
});
|
||
return state;
|
||
},
|
||
getData() {
|
||
this.$api.mer_admin
|
||
.getProductCategory({ shopId: this.shopId })
|
||
.then(res => {
|
||
this.getProductCategory = res.data.data;
|
||
console.log(res);
|
||
});
|
||
this.$api.mer_admin.getSaleUnit({ shopId: this.shopId }).then(res => {
|
||
this.getSaleUnit = res.data.data;
|
||
console.log(res);
|
||
});
|
||
}
|
||
},
|
||
computed: {
|
||
modalCols() {
|
||
switch (this.currentPanel) {
|
||
case "基础信息":
|
||
return [
|
||
{
|
||
label: "商品图片",
|
||
prop: "productPhotoList",
|
||
required: true,
|
||
rules: {
|
||
required: true,
|
||
message: "请上传商品图片",
|
||
trigger: "blur"
|
||
},
|
||
type: "jsx",
|
||
render: () => {
|
||
const handleChange = (file, fileList) => {
|
||
// console.log(fileList);
|
||
};
|
||
const handleAvatarSuccess = (res, file, fileList) => {
|
||
console.log(res, fileList);
|
||
this.modalData.productPhotoList = fileList.map(
|
||
(item, index) => {
|
||
if (index == 0) {
|
||
return {
|
||
isMain: 1,
|
||
url: item.response ? item.response.data : item.url
|
||
};
|
||
} else {
|
||
return {
|
||
isMain: 0,
|
||
url: item.response ? item.response.data : item.url
|
||
};
|
||
}
|
||
}
|
||
);
|
||
console.log(this.modalData.productPhotoList);
|
||
this.fileList = fileList.map(item => {
|
||
return {
|
||
name: item.name,
|
||
url: item.response ? item.response.data : item.url
|
||
};
|
||
});
|
||
};
|
||
const handleRemove = (file, fileList) => {
|
||
console.log(file, fileList);
|
||
this.modalData.productPhotoList = fileList.map(
|
||
(item, index) => {
|
||
if (index == 0) {
|
||
return {
|
||
isMain: 1,
|
||
url: item.url
|
||
};
|
||
} else {
|
||
return {
|
||
isMain: 0,
|
||
url: item.url
|
||
};
|
||
}
|
||
}
|
||
);
|
||
console.log(this.modalData.productPhotoList);
|
||
this.fileList = fileList.map(item => {
|
||
return {
|
||
name: item.name,
|
||
url: item.url
|
||
};
|
||
});
|
||
};
|
||
return (
|
||
<el-upload
|
||
class="upload-demo"
|
||
drag
|
||
action={this.$api.mer_admin.uploadFile()}
|
||
{...{
|
||
props: {
|
||
"on-change": handleChange,
|
||
"on-success": handleAvatarSuccess,
|
||
"on-remove": handleRemove
|
||
}
|
||
}}
|
||
headers={{
|
||
token: "Bearer " + this.$cookie.get("token")
|
||
}}
|
||
multiple={true}
|
||
file-list={this.fileList}
|
||
list-type="picture"
|
||
>
|
||
<i class="el-icon-upload"></i>
|
||
<div class="el-upload__text">
|
||
将文件拖到此处，或<em>点击上传</em>
|
||
</div>
|
||
<div class="el-upload__tip" slot="tip">
|
||
只能上传jpg/png文件，且不超过500kb
|
||
</div>
|
||
</el-upload>
|
||
);
|
||
}
|
||
},
|
||
{
|
||
label: "商品类目",
|
||
prop: "productCategoryId",
|
||
type: "jsx",
|
||
required: true,
|
||
rules: {
|
||
required: true,
|
||
message: "请选择商品类目",
|
||
trigger: "blur"
|
||
},
|
||
render: () => {
|
||
return (
|
||
<el-select
|
||
placeholder="请选择商品类目"
|
||
v-model={this.modalData.productCategoryId}
|
||
>
|
||
{this.getProductCategory.map(item => {
|
||
return (
|
||
<el-option
|
||
label={item.name}
|
||
value={item.id}
|
||
></el-option>
|
||
);
|
||
})}
|
||
</el-select>
|
||
);
|
||
}
|
||
},
|
||
{
|
||
label: "商品名称",
|
||
prop: "name",
|
||
type: "Input",
|
||
required: true,
|
||
maxlength: "30",
|
||
rules: {
|
||
required: true,
|
||
message: "请输入商品名称",
|
||
trigger: "blur"
|
||
},
|
||
placeholder: "请输入商品名称"
|
||
},
|
||
{
|
||
label: "商品描述",
|
||
prop: "description",
|
||
required: true,
|
||
rules: {
|
||
required: true,
|
||
message: "请填写商品描述",
|
||
trigger: "blur"
|
||
},
|
||
type: "jsx",
|
||
render: () => {
|
||
return (
|
||
<el-input
|
||
type="textarea"
|
||
maxlength={100}
|
||
v-model={this.modalData.description}
|
||
placeholder="请简单描述，如别称、口感、用途等"
|
||
/>
|
||
);
|
||
}
|
||
}
|
||
// {
|
||
// label: "是否为预售产品",
|
||
// prop: "isAdvanceSell",
|
||
// required: true,
|
||
// rules: {
|
||
// required: true,
|
||
// message: "是否为预售产品",
|
||
// trigger: "blur",
|
||
// },
|
||
// type: "jsx",
|
||
// render: () => {
|
||
// return (
|
||
// <el-select
|
||
// v-model={this.modalData.isAdvanceSell}
|
||
// placeholder="请选择销售单位"
|
||
// >
|
||
// {[
|
||
// { label: "是", value: "1" },
|
||
// { label: "否", value: "0" },
|
||
// ].map((item) => {
|
||
// return (
|
||
// <el-option
|
||
// label={item.label}
|
||
// value={item.value}
|
||
// ></el-option>
|
||
// );
|
||
// })}
|
||
// </el-select>
|
||
// );
|
||
// },
|
||
// },
|
||
];
|
||
break;
|
||
case "销售信息":
|
||
return [
|
||
{
|
||
label: "销售单位",
|
||
prop: "productUnit",
|
||
required: true,
|
||
rules: {
|
||
required: true,
|
||
message: "请选择销售单位",
|
||
trigger: "blur"
|
||
},
|
||
type: "jsx",
|
||
render: () => {
|
||
return (
|
||
<el-select
|
||
v-model={this.modalData.productUnit}
|
||
placeholder="请选择销售单位"
|
||
>
|
||
{this.getSaleUnit.map(item => {
|
||
return (
|
||
<el-option
|
||
label={item.name}
|
||
value={item.name}
|
||
></el-option>
|
||
);
|
||
})}
|
||
</el-select>
|
||
);
|
||
}
|
||
},
|
||
{
|
||
label: "规格",
|
||
prop: "productSpecificationList",
|
||
type: "jsx",
|
||
render: () => {
|
||
return (
|
||
<el-button onClick={this.addSpecs}>
|
||
若有多规格请在此配置
|
||
</el-button>
|
||
);
|
||
}
|
||
},
|
||
{
|
||
label: "成本",
|
||
prop: "costPrice",
|
||
type: "jsx",
|
||
required: true,
|
||
rules: {
|
||
required: true,
|
||
message: "请输入成本价格",
|
||
trigger: "blur"
|
||
},
|
||
render: () => {
|
||
return (
|
||
<el-input
|
||
readonly={this.modalData.specType != 0}
|
||
placeholder="请输入价格"
|
||
v-model={this.modalData.costPrice}
|
||
>
|
||
<template slot="append">单位（元）</template>
|
||
</el-input>
|
||
);
|
||
}
|
||
},
|
||
{
|
||
label: "市场价",
|
||
prop: "marketPrice",
|
||
type: "jsx",
|
||
required: true,
|
||
rules: {
|
||
required: true,
|
||
message: "请输入市场价",
|
||
trigger: "blur"
|
||
},
|
||
render: () => {
|
||
return (
|
||
<el-input
|
||
readonly={this.modalData.specType != 0}
|
||
placeholder="请输入市场价"
|
||
v-model={this.modalData.marketPrice}
|
||
>
|
||
<template slot="append">单位（元）</template>
|
||
</el-input>
|
||
);
|
||
}
|
||
},
|
||
{
|
||
label: "库存",
|
||
prop: "stockNum",
|
||
type: "jsx",
|
||
required: true,
|
||
rules: {
|
||
required: true,
|
||
message: "请输入库存",
|
||
trigger: "blur"
|
||
},
|
||
render: () => {
|
||
return (
|
||
<el-input
|
||
readonly={this.modalData.specType != 0}
|
||
placeholder="请输入库存"
|
||
v-model={this.modalData.stockNum}
|
||
></el-input>
|
||
);
|
||
}
|
||
},
|
||
{
|
||
label: "重量",
|
||
prop: "weight",
|
||
type: "jsx",
|
||
required: true,
|
||
rules: {
|
||
required: true,
|
||
message: "请输入重量",
|
||
trigger: "blur"
|
||
},
|
||
render: () => {
|
||
return (
|
||
<el-input
|
||
readonly={this.modalData.specType != 0}
|
||
placeholder="请输入重量"
|
||
v-model={this.modalData.weight}
|
||
>
|
||
<template slot="append">KG</template>
|
||
</el-input>
|
||
);
|
||
}
|
||
},
|
||
{
|
||
label: "体积",
|
||
prop: "volume",
|
||
type: "jsx",
|
||
required: true,
|
||
rules: {
|
||
required: true,
|
||
message: "请输入体积",
|
||
trigger: "blur"
|
||
},
|
||
render: () => {
|
||
return (
|
||
<el-input
|
||
readonly={this.modalData.specType != 0}
|
||
placeholder="请输入体积"
|
||
v-model={this.modalData.volume}
|
||
>
|
||
<template slot="append">立方米</template>
|
||
</el-input>
|
||
);
|
||
}
|
||
},
|
||
{
|
||
label: "其他属性",
|
||
prop: "productAttributeList",
|
||
type: "jsx",
|
||
render: () => {
|
||
return (
|
||
<el-button onClick={this.addAttribute}>
|
||
添加其他属性
|
||
</el-button>
|
||
);
|
||
}
|
||
}
|
||
];
|
||
break;
|
||
case "其他信息":
|
||
return [
|
||
{
|
||
label: "产地",
|
||
prop: "productPlace",
|
||
type: "jsx",
|
||
render: () => {
|
||
const change = e => {
|
||
console.log(e);
|
||
this.modalData.productPlace = e.join("-");
|
||
};
|
||
return (
|
||
<el-cascader
|
||
v-model={this.place}
|
||
onChange={change}
|
||
options={this.$api.mer_admin.getCityOptions()}
|
||
props={{
|
||
props: {
|
||
label: "name",
|
||
value: "name"
|
||
}
|
||
}}
|
||
clearable
|
||
></el-cascader>
|
||
);
|
||
}
|
||
},
|
||
{
|
||
label: "保质期",
|
||
prop: "shelfLife",
|
||
type: "jsx",
|
||
render: () => {
|
||
return (
|
||
<el-input
|
||
style="width:150px;"
|
||
placeholder="请填写保质期"
|
||
v-model={this.modalData.shelfLife}
|
||
>
|
||
<div slot="suffix">天</div>
|
||
</el-input>
|
||
);
|
||
}
|
||
},
|
||
{
|
||
label: "商品介绍图",
|
||
prop: "productIntroducePhoto",
|
||
type: "Input",
|
||
// required: true,
|
||
// rules: { required: true, message: "商品介绍图", trigger: "blur" },
|
||
placeholder: "商品介绍图",
|
||
type: "jsx",
|
||
render: () => {
|
||
const handleChange = (file, fileList) => {
|
||
// console.log(fileList);
|
||
};
|
||
const handleAvatarSuccess = (res, file, fileList) => {
|
||
// 拼接所有已上传图片URL，使用逗号分隔
|
||
const urls = fileList
|
||
.map(item => {
|
||
return item.response ? item.response.data : item.url;
|
||
})
|
||
.filter(Boolean);
|
||
this.modalData.productIntroducePhoto = urls.join(",");
|
||
console.log(this.modalData.productIntroducePhoto);
|
||
};
|
||
const handleRemove = (file, fileList) => {
|
||
// 从已上传列表中移除一张图片后，重新拼接剩余的图片URL
|
||
const urls = fileList
|
||
.map(item => {
|
||
return item.response ? item.response.data : item.url;
|
||
})
|
||
.filter(Boolean);
|
||
this.modalData.productIntroducePhoto = urls.join(",");
|
||
console.log(this.modalData.productIntroducePhoto);
|
||
};
|
||
return (
|
||
<el-upload
|
||
class="upload-demo"
|
||
drag
|
||
action={this.$api.mer_admin.uploadFile()}
|
||
file-list={this.fileListOne}
|
||
list-type="picture"
|
||
{...{
|
||
props: {
|
||
"on-change": handleChange,
|
||
"on-success": handleAvatarSuccess,
|
||
"on-remove": handleRemove
|
||
}
|
||
}}
|
||
headers={{
|
||
token: "Bearer " + this.$cookie.get("token")
|
||
}}
|
||
multiple
|
||
>
|
||
<i class="el-icon-upload"></i>
|
||
<div class="el-upload__text">
|
||
将文件拖到此处，或<em>点击上传</em>
|
||
</div>
|
||
<div class="el-upload__tip" slot="tip">
|
||
只能上传jpg/png文件，且不超过500kb
|
||
</div>
|
||
</el-upload>
|
||
);
|
||
}
|
||
},
|
||
{
|
||
label: "商品视频",
|
||
prop: "productVideo",
|
||
// required: true,
|
||
// rules: {
|
||
// required: true,
|
||
// message: "请填写商品描述",
|
||
// trigger: "blur",
|
||
// },
|
||
type: "jsx",
|
||
render: () => {
|
||
const handleChange = (file, fileList) => {
|
||
console.log(fileList);
|
||
};
|
||
const handleAvatarSuccess = res => {
|
||
this.modalData.productVideo = res.data;
|
||
};
|
||
const handleRemove = () => {
|
||
this.modalData.productVideo = "";
|
||
};
|
||
return (
|
||
<el-upload
|
||
class="upload-demo"
|
||
drag
|
||
action={this.$api.mer_admin.uploadFile()}
|
||
limit={1}
|
||
file-list={this.fileListTwo}
|
||
accept=".mp4,.avi,.mov,.wmv,.flv"
|
||
{...{
|
||
props: {
|
||
"on-change": handleChange,
|
||
"on-success": handleAvatarSuccess,
|
||
"on-remove": handleRemove
|
||
}
|
||
}}
|
||
headers={{
|
||
token: "Bearer " + this.$cookie.get("token")
|
||
}}
|
||
>
|
||
<i class="el-icon-upload"></i>
|
||
<div class="el-upload__text">
|
||
将视频文件拖到此处，或<em>点击上传</em>
|
||
</div>
|
||
<div class="el-upload__tip" slot="tip">
|
||
支持mp4、avi、mov等视频格式，建议不超过50MB
|
||
</div>
|
||
</el-upload>
|
||
);
|
||
}
|
||
}
|
||
];
|
||
break;
|
||
|
||
default:
|
||
break;
|
||
}
|
||
},
|
||
modalHandles() {
|
||
return [
|
||
{
|
||
label: this.currentPanel === "其他信息" ? "保存并上架" : "下一步",
|
||
type: "primary",
|
||
loading: this.isLoading,
|
||
submit: true,
|
||
handle: debounce(() => {
|
||
if (this.currentPanel === "基础信息") {
|
||
this.currentPanel = "销售信息";
|
||
} else if (this.currentPanel == "销售信息") {
|
||
this.currentPanel = "其他信息";
|
||
} else {
|
||
console.log("请求接口", this.modalData);
|
||
if (this.modalData.specType == 0) {
|
||
this.modalData.productAttributeList = [
|
||
{
|
||
id: "1821213026050191360",
|
||
attributeName: "重量",
|
||
attributeValue: "1斤"
|
||
}
|
||
];
|
||
this.modalData.productSpecificationList = [
|
||
{
|
||
attributeValue: "默认",
|
||
costPrice: this.modalData.costPrice,
|
||
marketPrice: this.modalData.marketPrice,
|
||
stockNum: this.modalData.stockNum,
|
||
weight: this.modalData.weight,
|
||
volume: this.modalData.volume
|
||
}
|
||
];
|
||
}
|
||
// 明确设置状态为上架
|
||
this.modalData.status = "UP";
|
||
this.$api.mer_admin.saveProduct(this.modalData).then(res => {
|
||
console.log(res);
|
||
this.$emit("queryList");
|
||
this.toggle();
|
||
});
|
||
}
|
||
}, 300)
|
||
},
|
||
{
|
||
disabled: () => this.currentPanel != "其他信息",
|
||
label: "保存并放入仓库",
|
||
type: "info",
|
||
loading: this.isLoading,
|
||
submit: true,
|
||
handle: debounce(() => {
|
||
if (this.modalData.specType == 0) {
|
||
this.modalData.productAttributeList = [
|
||
{
|
||
id: "1821213026050191360",
|
||
attributeName: "重量",
|
||
attributeValue: "1斤"
|
||
}
|
||
];
|
||
this.modalData.productSpecificationList = [
|
||
{
|
||
attributeValue: "默认",
|
||
costPrice: this.modalData.costPrice,
|
||
marketPrice: this.modalData.marketPrice,
|
||
stockNum: this.modalData.stockNum,
|
||
weight: this.modalData.weight,
|
||
volume: this.modalData.volume
|
||
}
|
||
];
|
||
}
|
||
// 明确设置状态为下架/放入仓库
|
||
this.modalData.status = "DOWN";
|
||
this.$api.mer_admin.saveProduct(this.modalData).then(res => {
|
||
console.log(res);
|
||
this.$emit("queryList");
|
||
this.toggle();
|
||
});
|
||
}, 300)
|
||
}
|
||
];
|
||
}
|
||
},
|
||
asyncComputed: {
|
||
// async getProductCategory() {
|
||
// let res = await this.$api.mer_admin.getProductCategory();
|
||
// return res.data.data;
|
||
// },
|
||
// async getSaleUnit() {
|
||
// let res = await this.$api.mer_admin.getSaleUnit({
|
||
// shopId: JSON.parse(sessionStorage.getItem("userInfo")).shopId,
|
||
// });
|
||
// console.log(res);
|
||
// return res.data.data;
|
||
// },
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.obj-modal ::v-deep {
|
||
.el-dialog__body {
|
||
padding: 0 30px;
|
||
}
|
||
}
|
||
</style>
|