shop-applet/pages/product/addGood/addGood.vue

734 lines
27 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="container">
<view class="step_one">
<view class="input_content">
<view class="bar-code" v-if="bar_code_dis">
<view>商品条码</view>
<input type="number" placeholder="请手动添加条码" v-model="code" :disabled="bar_code_dis"
placeholder-class="inputPlaceHolder" />
</view>
<view class="input_content_textarea">
<textarea v-model="setFormData.store_name" placeholder="请输入商品名称" placeholder-class="placeholderStyle"
maxlength="60" />
<view class="flex" style="justify-content: space-between;color: #999999;">
<view>(品牌,名称,规格,口味)</view>
<view>
<text v-if="setFormData.store_name">{{ setFormData.store_name.length }}</text>
<text v-else>0</text>/60
</view>
</view>
</view>
<view class="photo_count">
<text class="photo_size" style="color: #e93323;">建议图片尺寸为750*750px, 上传2张以上</text>
<view class="input_content_photo">
<view class="input_content_photo_adPh" v-for="(item, index) in setFormData.imageList" :key="index">
<image :src="item" class="myimg2 photos" @click="pop(item)"></image>
<view class="input_content_photo_adPh_jiao" @click="deleteImage(index)">
<image src="../static/images/close.png" mode=""></image>
</view>
</view>
<view v-if="setFormData.imageList.length < 9" class="input_content_photo_adPh addBtn" @click="clk">
<view>
<image src="../static/images/creamer.png" mode="widthFix"></image>
</view>
<view>添加图片</view>
</view>
</view>
</view>
<u-popup ref="select_popup" class="pop" :show="show" mode="center" closeOnClickOverlay bgColor='transparent'>
<image :src="image"></image>
<image src="@/static/images/guanbi.png" class="guanbi" @click="close"></image>
</u-popup>
</view>
<!-- 商品详情 -->
<commodityComponent ref="commodityRef" v-if="showCommodity" :key="showCommodity" :showCommodity="showCommodity"
:product_id="product_id" :merId="merId" :code="code">
</commodityComponent>
<view class="popup_group">
<view class="popup_group_item" @click="selectPlatform">
<view class="popup_group_item_label">平台分类</view>
<view class="popup_group_item_value">
<view class="popup_group_item_message">
<span v-if="setFormData.cate_name"
class="popup_group_item_message_value">{{ setFormData.cate_name }}</span>
<span v-else>请选择平台分类</span>
</view>
<view><span class="iconfont">&#xe6bd;</span></view>
</view>
</view>
<view class="popup_group_item" @click="selectStoreClass">
<view class="popup_group_item_label">店铺分类</view>
<view class="popup_group_item_value">
<view class="popup_group_item_message">
<span v-if="setFormData.mer_cate_name"
class="popup_group_item_message_value">{{ setFormData.mer_cate_name }}</span>
<span v-else>请选择店铺分类</span>
</view>
<view><span class="iconfont">&#xe6bd;</span></view>
</view>
</view>
<view class="popup_group_item">
<view class="popup_group_item_label">商品单位</view>
<view class="popup_group_item_value"><input v-model="setFormData.unit_name" type="text"
placeholder="请填写商品单位" /></view>
</view>
</view>
<!-- 选择平台分类弹框 -->
<uni-popup ref="select_platform" type="bottom">
<platfrom @close="closePlatfrom" :classifiedData="platformClassificationData" @getPlatData="getPlatData">
</platfrom>
</uni-popup>
<!-- 选择店铺分类弹框 -->
<uni-popup ref="select_store" type="bottom">
<store-classification :classifiedData="merchantClassification" :mer_id="merId"
@handleGetSelectArea="handleGetSelectStore" @close="merchantClose"></store-classification>
</uni-popup>
<!-- 规格设置 -->
<picker mode="selector" :range="['单规格','多规格']" :value="setFormData.spec_type" @change="changeSpecType">
<view class="popup_group" style="margin-bottom: 0;">
<view class="popup_group_item">
<view class="popup_group_item_label">商品规格</view>
<view class="popup_group_item_value">
<view class="popup_group_item_message">
<span class="popup_group_item_message_value">{{ setFormData.spec_type==0?'单规格':'多规格' }}</span>
</view>
<view><span class="iconfont">&#xe6bd;</span></view>
</view>
</view>
</view>
<u-modal :show="showSpecType" title="温馨提示" content="切换后商品原有规格将失效,是否继续?" show-cancel-button confirm-text="继续"
@confirm="changeSpecType2" @cancel="showSpecType=false"></u-modal>
</picker>
<priceComponent v-if="setFormData.spec_type==0" :datas="setFormData.attrValue[0]" ref="priceRef"
:product_id="product_id" :bar_code="code" @updateCode="updateCode">
</priceComponent>
<view v-else class="popup_group" style="margin-top: 0;border-top: 1rpx solid #eeeeee;">
<view class="popup_group_item" @click="navToSpecGood()">
<view class="popup_group_item_label" style="flex: 1; text-align: center;">
设置多规格
<text v-if="setFormData.attrValue.length>0">({{setFormData.attrValue.length}})</text>
</view>
</view>
</view>
<view v-if="false" class="popup_group">
<!-- <view class="popup_group_item" @click="showMoreInfo=!showMoreInfo">
<view class="popup_group_item_label">更多信息</view>
<view class="popup_group_item_value" :class="showMoreInfo?'icon_bottom':'icon_top'">
<view><span class="iconfont">&#xe6bd;</span></view>
</view>
</view> -->
<block>
<!-- <view class="input_content">
<view class="input_content_describe" style="border-top: none">
<view class="input_content_describe_title">
<view class="input_content_describe_title_msg">商品简介</view>
<view class="input_content_describe_title_num">
<text v-if="setFormData.store_info">{{ setFormData.store_info.length }}</text>
<text v-else>0</text>
/200
</view>
</view>
<view class="input_content_describe_textarea">
<textarea v-model="setFormData.store_info" value="" placeholder="请填写商品简介"
placeholderClass="placeholderClass" maxlength="200" />
</view>
</view>
<view class="input_content_keyword">
<view class="input_content_keyword_label">关键字</view>
<view class="input_content_keyword_value"><input v-model="setFormData.keyword" type="text" value=""
placeholder="填写关键字" /></view>
</view>
</view> -->
<view class="input_content">
<view class="input_content_keyword">
<view class="input_content_keyword_label">最少购买件数</view>
<view class="input_content_keyword_value"><input v-model="setFormData.once_min_count" type="number" value=""
placeholder="不限量" /></view>
</view>
</view>
<view class="radio">
<view class="radio_label ">送货方式</view>
<checkbox-group class="select_group flex_start">
<label class="radio_select" v-for="(val, i) in deliveryFreeList" :key="val.value">
<view>
<checkbox :value="val.value" disabled :checked="val.value" />
</view>
<view>{{ val.name }}</view>
</label>
</checkbox-group>
</view>
</block>
</view>
</view>
<view class="handle">
<view class="handle_button" @click="submitCreatedGoods">提交</view>
</view>
<!-- 图片选择器 -->
<avatar @upload="doUpload" @getName="getImgName" quality="1" ref="avatar" selWidth="250upx" selHeight="250upx">
</avatar>
</view>
</template>
<script>
import {
TOKENNAME,
HTTP_REQUEST_URL
} from '@/config/app.js';
import {
categoryBrandlist,
categorySelect,
storeClassifyLst,
categoryList,
attrList,
templateList,
productDetail,
getDeliveryType,
productCreate,
productUpdate
} from '@/api/product.js';
import {
serialize,
Toast,
Loading,
hideLoading,
Modal
} from "@/libs/uniApi.js";
import avatar from "@/components/yq-avatar/yq-avatar.vue";
import platfrom from "./components/platform.vue";
import storeClassification from '../components/store_classification.vue';
import commodityComponent from "./components/commodity.vue";
import priceComponent from "./components/price.vue";
export default {
components: {
avatar,
platfrom,
commodityComponent,
priceComponent,
storeClassification
},
data() {
return {
bar_code_dis: false,
merId: '', //商户id
product_id: '', //商品id
import: 0, //是否为导入商品
code: '', //商品条码
show: false, //是否预览图片
image: false, //预览的图
setFormData: {
store_name: '',
imageList: [],
attrValue: [],
cate_name: '', //平台名称
unit_name: '', //商品单位
cate_id: '', // 平台分类id
mer_cate_id: '', // 店铺分类
mer_cate_name: '', // 店铺分类名称
spec_type: '0', // 0.单规格 1多规格
attr: [], // 商品规格
specifica: '', // 商品规格名称
// setSpecificaValue: '', // 价格设置提示
// setSpecificaValue2: '',
delivery_way: [1, 2], // 配送方式 1 到店核销 2 快递配送
delivery_free: '1', // 是否包邮 0不包邮 1包邮
temp_id: '', // 运费模板ID
tempName: '' ,// 运费模板名称
once_min_count: '', //最少购买件数
},
platformClassificationData: [], // 平台分类数据
merchantClassification: [], // 店铺分类
brand: [], // 品牌
showCommodity: false, // 是否显示商品,售价
deliveryFreeList: [{
value: '1',
name: '到店核销'
},
{
value: '2',
name: '快递配送'
}
],
// 分类数据容器
classified: {
cate_id: [],
mer_cate_id: [],
brand_id: [],
attr: [],
temp_id: []
},
productItem: {} || [],
showSpecType: false, // 是否显示切换窗口弹窗
spec_type: 0, //临时规格,0单规格,1多规格
};
},
onLoad(opt) {
this.merId = Number(opt.mer_id);
this.product_id = opt.product_id;
this.import = opt.import;
// if (!opt.product_id) this.showCommodity = true;
this.showCommodity = true;;
this.initData();
this.initClasiffy();
if (this.import == 1) {
this.getOpenerEventChannel().once('importAttrValue', (e) => {
this.attrValue = e.attrValue;
uni.setStorageSync('attrValue', JSON.stringify(e.attrValue));
this.attr = e.attr;
uni.setStorageSync('attr', JSON.stringify(e.attr));
this.setFormData = Object.assign({}, this.setFormData, e);
this.$nextTick(() => {
this.$refs.commodityRef?.setDatas({
addGoodsSecoundData: {
is_good: this.setFormData.is_good, // 是否推荐
is_gift_bag: this.setFormData.is_gift_bag,
sort: this.setFormData.sort,
once_count: this.setFormData.once_count, // 限购数量
video_link: this.setFormData.video_link,
},
goodsDis: {
store_name: this.setFormData.content?.title,
imageList: this.setFormData.content?.image
}
})
})
})
} else if (this.product_id) {
this.initDataEditData();
}
},
onBackPress() {},
onShow() {
// this.setFormData = Object.assign(this.setFormData, {
// "store_name": "方法",
// "imageList": [
// "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/457c6202311181745387896.jpeg",
// "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/185e2202311181745434402.jpeg"
// ],
// "cate_name": "丧葬服务",
// "unit_name": "给",
// "cate_id": 445,
// "keyword": "22"
// })
// this.$nextTick(async () => {
// await this.$u.sleep(200)
// this.$refs.commodityRef.addGoodsSecoundData = {
// "is_good": 1,
// "is_gift_bag": 0,
// "sort": "20",
// "once_count": "",
// "video_link": "https://lihai001.oss-cn-chengdu.aliyuncs.com/media/7ce3d202311181816166215.mp4"
// }
// this.$refs.commodityRef.goodsDis = {
// "store_name": "",
// "imageList": [
// "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/fb73d202311181751262661.png"
// ]
// }
// this.$refs.priceRef.singleSpecification = {
// "price": "1",
// "cost": "1",
// "stock": "11",
// "ot_price": "",
// "wholesale_price": "",
// "bar_code": "666",
// "weight": "10",
// "volume": "5",
// "image": "",
// "extension_one": "",
// "extension_two": ""
// }
// })
},
beforeDestroy() {},
watch: {
'setFormData.imageList'(val) {
this.setFormData.image = val.length ? val[0] : '';
this.setFormData.slider_image = val.length ? serialize(val).splice(1) : [];
}
},
methods: {
// 查询详情数据
initDataEditData() {
this.setFormData = {
imageList: [],
attrValue: [],
specification: '',
image: '', //主图
slider_image: '', // 轮播图
store_name: '', // 商品名
store_info: '', // 简介
keyword: '', // 关键字
brand_id: '', // 品牌id
brand_name: '', // 品牌名称
cate_id: '', // 平台分类
cate_name: '', // 平台名称
mer_cate_id: '', // 店铺分类
mer_cate_name: '', // 店铺分类名称
unit_name: '', // 商品单位
spec_type: '0', // 0.单规格 1多规格
attr: [], // 商品规格
specifica: '', // 商品规格名称
// setSpecificaValue: '', // 价格设置提示
// setSpecificaValue2: '', // 价格设置提示
delivery_way: [], // 配送方式 1 到店核销 2 快递配送
delivery_free: '0', // 是否包邮 0不包邮 1包邮
temp_id: '', // 运费模板ID
tempName: '' ,// 运费模板名称
once_min_count: '', //最小购买数量
};
productDetail(this.merId, this.product_id).then(async (res) => {
this.showCommodity = true;
if (res.data.content_arr&&res.data.content_arr.length > 0) res.data.content = res.data.content_arr;
let editGoodsDetils = res.data;
Object.keys(this.setFormData).forEach(item => {
this.setFormData[item] = editGoodsDetils[item];
});
this.setFormData.product_id = this.product_id;
this.setFormData.imageList = [...(this.setFormData.image ? [this.setFormData.image] : []), ...
this
.setFormData.slider_image
];
this.setFormData.cate_name = editGoodsDetils?.storeCategory?.cate_name; // 平台分类回显
this.setFormData.mer_cate_name = editGoodsDetils.merCateId ? editGoodsDetils.merCateId.map(
item => item
.category && item.category.cate_name).join(',') : '';
this.setFormData.brand_name = editGoodsDetils.brand ? editGoodsDetils.brand.brand_name : '';
if (res.data.content && typeof res.data.content == 'string') res.data.content = JSON.parse(res.data
.content);
this.setFormData.once_min_count <= 0 ? this.setFormData.once_min_count = '' : null;
//向组件注入数据
this.$nextTick(() => {
this.$refs.commodityRef.setDatas({
addGoodsSecoundData: {
is_good: res.data.is_good, // 是否推荐
is_gift_bag: res.data.is_gift_bag,
sort: res.data.sort,
once_count: res.data.once_count, // 限购数量
video_link: res.data.video_link,
},
goodsDis: {
store_name: res.data.content?.title,
imageList: res.data.content?.image
}
})
// 单规格
if (this.setFormData.spec_type == 0) {
this.$refs.priceRef.setDatas(res.data.attrValue[0]);
}
})
editGoodsDetils.temp && (this.setFormData.tempName = editGoodsDetils.temp.name);
hideLoading();
});
},
//获取商户分类
async initClasiffy() {
this.merchantClassification = (await storeClassifyLst(this.merId)).data;
},
initData() {
// 获取品牌
categoryBrandlist(this.merId).then((res) => {
this.brand = res.data;
}).catch(e => {
console.log(e);
});
// 获取平台分类
categoryList(this.merId).then((res) => {
res.data.forEach((item1) => {
item1.children.forEach((item2) => {
item2.children = null;
})
})
this.platformClassificationData = res.data;
}).catch(e => {
console.log(e);
})
},
// 更新商品条码
updateCode(e) {
this.code = e + '';
},
// 选择图片
handleChooseImage() {
let that = this;
that.$util.uploadImageOne('upload/image', function(res) {
that.setFormData.imageList.push(res.data.path);
});
},
clk() {
let avatar = this.$refs.avatar;
avatar.fChooseImg(1, {
selWidth: '350upx',
selHeight: '350upx',
inner: true
});
},
doUpload(rsp) {
let that = this
// console.log(rsp);
uni.uploadFile({
url: HTTP_REQUEST_URL + '/api/upload/image/field',
filePath: rsp.path,
name: 'field',
formData: {
'filename': rsp.path,
'name': that.imgName
},
header: {
// #ifdef MP
"Content-Type": "multipart/form-data",
// #endif
[TOKENNAME]: 'Bearer ' + this.$store.state.app.token
},
success: (uploadFileRes) => {
// console.log(uploadFileRes.data);
let imgData = JSON.parse(uploadFileRes.data)
that.setFormData.imageList.push(imgData.data.path)
},
complete(res) {
// console.log(res)
}
});
},
getImgName(name) {
this.imgName = name
},
//图片预览
pop(e) {
this.show = true
this.image = e
},
// 关闭弹框
close() {
this.$refs.select_popup.close();
this.show = false
},
// 删除图片
deleteImage(index) {
this.setFormData.imageList.splice(index, 1);
},
// 选择平台分类
selectPlatform() {
this.$refs.select_platform.open();
},
// 关闭频台分类
closePlatfrom() {
this.$refs.select_platform.close();
},
// 获取平台类数据
getPlatData(item, taplist) {
this.setFormData.cate_id = item.value;
this.setFormData.cate_name = item.label;
this.$refs.select_platform.close();
},
// 选择店铺分类
selectStoreClass() {
this.$refs.select_store.open();
},
// 关闭店铺分类
merchantClose() {
this.$refs.select_store.close();
},
// 获取已选择得店铺数据
handleGetSelectStore(item) {
console.log(item);
this.setFormData.mer_cate_id = item.map(val => val.store_category_id);
this.setFormData.mer_cate_name = item.map(val => val.cate_name).join(',');
this.$refs.select_store.close();
},
// 获取品牌分类弹框
selectBrand() {
this.$refs.select_popup.open();
},
// 获取品牌分类数据
getLinkageData(item) {
this.setFormData.brand_id = item[0].value;
this.setFormData.brand_name = item[0].cate_name;
this.$refs.select_popup.close();
},
// 获取多选数据
multipleList(data, model) {
if (model == 'mer_cate_id') {
this.platformClassification[1].value = data.map(item => item.label).join('');
this.platformClassification[1].allreadySelect = data;
this.setFormData.mer_cate_id = data.map(item => item.value);
}
},
// popup弹框中返回数据结束
// 关闭弹框
close() {
this.$refs.select_popup.close();
this.show = false
},
// 拼接字符串
getLinkDataOfRecursion(arr, child = 'children', key = 'value') {
let str = '';
let id = '';
arr.forEach(item => {
str = item.label;
id = item.value;
});
// str = str.slice(0, str.length - 1);
return {
str,
id
};
},
// 求运费模板列表
getTemplateList() {
templateList(this.merId, this.templateListPage).then(res => {
res.data.list.forEach(item => {
this.$set(item, 'value', item.shipping_template_id);
this.$set(item, 'label', item.name);
});
this.classified['temp_id'] = res.data.list;
this.$refs.tempId.open();
});
},
// 创建商品
submitCreatedGoods() {
console.log('创建商品');
// return console.log('商品规格', this.setFormData.attr);
console.log('是否推荐', this.$refs.commodityRef.addGoodsSecoundData);
console.log('商品详情', this.$refs.commodityRef.goodsDis, this.$refs.commodityRef.store_name);
if (this.setFormData.spec_type == 0) {
console.log('价格库存', this.$refs.priceRef.singleSpecification);
}
let postData = {
...this.setFormData,
...this.$refs.commodityRef.addGoodsSecoundData,
content: {
title: this.$refs.commodityRef.goodsDis?.store_name || '',
image: this.$refs.commodityRef.goodsDis?.imageList || []
},
video_link: this.$refs.commodityRef.addGoodsSecoundData.video_link,
};
if (this.setFormData.spec_type == 0) {
postData.attrValue = [this.$refs.priceRef.singleSpecification];
} else postData.attrValue = this.setFormData.attrValue;
postData.stock = postData.attrValue[0]?.stock || 0;
if (!postData.store_name || postData.store_name?.trim().length <= 0) return Toast('请输入商品名称');
if (!postData.imageList || postData.imageList?.length < 2) return Toast('请上传2张以上商品图片');
if (!postData.cate_name || postData.cate_name?.trim().length <= 0) return Toast('请选择平台分类');
if (!postData.unit_name || postData.unit_name?.trim().length <= 0) return Toast('请输入商品单位');
let userInfo = this.$store.state.app.userInfo;
if (typeof userInfo == 'string') userInfo = JSON.parse(userInfo);
let showFlag = '';
postData.attrValue.forEach(t => {
if (userInfo.mer_info.wholesale && (!t.wholesale_price || +t.wholesale_price <= 0)) {
showFlag = '批发价不能小于0'
}
if (!t.price || +t.price <= 0) showFlag = '零售价不能小于0';
if (!t.stock || +t.stock <= 0) showFlag = '库存不能小于0';
// if (!t.cost || +t.cost <= 0) showFlag = '成本价不能小于0';
})
if (showFlag) {
if (this.setFormData.spec_type == 1) showFlag += ', 请点击设置多规格设置';
return Toast(showFlag);
}
Loading();
if (this.product_id) {
productUpdate(this.merId, this.product_id, postData)
.then(res => {
hideLoading()
Modal('提交成功', '点击确定,返回商品管理', {
showCancel: false
}).then(() => {
uni.redirectTo({
url: '/pages/product/goodsOnSale/index?mer_id=' + this.merId
})
})
})
.catch(rej => {
Toast(rej);
});
} else {
productCreate(this.merId, postData)
.then(res => {
hideLoading();
Modal('提交成功', '点击确定,返回商品管理', {
showCancel: false,
}).then(() => {
if (this.import == 1) {
uni.$emit('importAttrValueOK', this.setFormData.import_id);
uni.navigateBack();
} else uni.redirectTo({
url: '/pages/product/goodsOnSale/index?mer_id=' + this.merId
})
})
})
.catch(rej => {
Toast(rej);
});
}
},
// 选择规格
changeSpecType(e) {
if (this.setFormData.spec_type != e.detail.value) {
this.showSpecType = true;
}
this.spec_type = e.detail.value;
},
// 二次确认
changeSpecType2() {
this.showSpecType = false;
this.setFormData.spec_type = this.spec_type + '';
this.setFormData.attrValue = [];
this.setFormData.attr = [];
},
// 跳转多规格页面
navToSpecGood() {
uni.navigateTo({
url: '/pages/product/addGood/specGood?product_id=' + this.product_id,
success: (e) => {
// console.log(this.setFormData.attrValue, e);
e.eventChannel.emit('updateAttrValue', {
attrValue: JSON.parse(JSON.stringify(this.setFormData.attrValue)),
attr: JSON.parse(JSON.stringify(this.setFormData.attr))
});
uni.$once('updateSpecType', (e) => {
this.setFormData.attrValue = JSON.parse(JSON.stringify(e.attrValue));
this.setFormData.attr = JSON.parse(JSON.stringify(e.attr));
})
}
})
}
}
};
</script>
<style lang="scss" scoped>
@import './scss/index.scss';
.pop {
z-index: 1;
}
.guanbi {
width: 20px;
height: 20px;
margin: 30px auto;
}
</style>