dingdong-master/pages/my/new-serv.vue

691 lines
23 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>
<!-- 顶部操作条 -->
<cu-custom :bgColor="'bg-main-color'" :isBack="true">
<block slot="backText">返回</block>
<block slot="content">服务上架</block>
</cu-custom>
<!-- 表单内容 -->
<form @submit="submit">
<view class="cu-form-group">
<view class="title">服务名称<text class="text-red">*</text></view>
<input name="servName" v-model="formData.servName" placeholder="请编辑上架标题(供客户搜索)"></input>
</view>
<view class="cu-form-group">
<view class="title">服务描述</view>
<input name="servDesc" v-model="formData.servDesc" placeholder="让客户更清晰的上架内容描述"></input>
</view>
<view class="solid-top">
<view class="cu-form-group">
<view class="title">选择类目<text class="text-red">*</text></view>
<picker :mode="'multiSelector'" @change="categoryChange" @columnchange="categoryColChange"
:value="categoryMultiIndex" :range-key="'goodsCategoryName'" :range="categoryList">
<input disabled class="line-input radius-input"
:value="formData.category && formData.category.length ? formData.category[0].goodsCategoryName + '-' + formData.category[1].goodsCategoryName : ''"
placeholder="请选择类目"></input>
</picker>
</view>
<view v-if="formData.specsList && formData.specsList.length > 0">
<checkbox-group class="padding-lr bg-white" @change="checkSpecs"
:class="isShowAllSpecs ? '' : 'certern-height'">
<view v-for="(item, index) in formData.specsList" class="padding-tb-sm">
<view class="flex">
<view class="flex-sub">
<checkbox style="transform:scale(1)" class="main-color margin-right-xs"
:value="index" :checked="item.checked"></checkbox>
<text>{{item.goodsCategoryName}}</text>
</view>
<view class="flex-sub">
<input class="radius-input" @input="inputSpecs($event, index, 'goodsStandardName')"
:value="item.goodsStandardName" placeholder="自编辑购买标题"></input>
</view>
</view>
<view class="flex margin-top-xs">
<view class="flex-sub">
<input class="radius-input" @input="inputSpecs($event, index, 'goodsPrice')"
:value="item.goodsPrice" placeholder="价格(平6%+¥5销10%+¥18)"></input>
</view>
</view>
<view class="flex margin-top-xs">
<view class="flex-sub">
<input class="radius-input" @input="inputSpecs($event, index, 'deduct')"
:value="item.deduct" placeholder="追加提成额"></input>
</view>
<view class="flex-sub margin-left-xs">
<input class="radius-input" @input="inputSpecs($event, index, 'groupPrice')"
:value="item.groupPrice" placeholder="团购价"></input>
</view>
</view>
<view class="flex margin-top-xs">
<view class="flex-sub">
<input class="radius-input" @input="inputSpecs($event, index, 'goodsUnit')"
:value="item.goodsUnit" placeholder="规格单位"></input>
</view>
<view class="flex-sub margin-left-xs">
<input class="radius-input" @input="inputSpecs($event, index, 'goodsNum')"
:value="item.goodsNum" placeholder="库存"></input>
</view>
</view>
</view>
</checkbox-group>
<view class="text-bold text-gray text-lg text-center bg-white padding-tb-sm"
@click="showAllSpecs()"><text :class="'cuIcon-' + (isShowAllSpecs ? 'fold' : 'unfold')"></text>
</view>
</view>
<!-- <view class="solid-top"> -->
<!-- <view class="padding-lr flex align-center">
<view class="flex-twice flex justify-start align-center">
<view style="width: 20%;">单位</view>
<my-uni-combox :candidates="productUnits" placeholder="请选择" v-model="formData.productUnit">
</my-uni-combox>
</view>
<view class="flex-sub margin-left">
优惠券+
</view>
</view> -->
<!-- <view class="padding-lr flex align-center padding-tb-xs"> -->
<!-- <view class="cu-form-group"> -->
<!-- <checkbox style="transform:scale(1)" class="main-color margin-right-xs" :value="true"
:v-model="formData.isGoldenServ" :checked="formData.isGoldenServ"></checkbox> -->
<!-- <view class="title">金牌服务<text class="margin-left-xs text-red">*</text></view> -->
<!-- <my-uni-combox :candidates="servHonorTitle" placeholder="请选择" v-model="formData.servHonorTitle"> -->
<!-- </my-uni-combox> -->
<!-- </view> -->
<!-- <view class="flex-twice flex justify-start align-center">
<view style="width: 25%;">质保期</view>
<my-uni-combox :candidates="productProtectTimes" placeholder="请选择"
v-model="formData.productProtectTime"></my-uni-combox>
</view> -->
<!-- </view> -->
<!-- </view> -->
</view>
<view class="cu-form-group solid-top">
<view class="title">商品单位<text class="text-red">*</text></view>
<input name="goodsUnit" v-model="formData.goodsUnit" placeholder="商品单位显示优先级低于规格单位"></input>
</view>
<view class="cu-form-group justify-start">
<!-- <checkbox style="transform:scale(1)" class="main-color margin-right-xs" :value="true"
:v-model="formData.isGoldenServ" :checked="formData.isGoldenServ"></checkbox> -->
<view class="title">附加服务</view>
<my-uni-combox class="form-val-area" :candidates="servHonorTitle" placeholder="请选择" v-model="formData.servHonorTitle">
</my-uni-combox>
</view>
<view class="solid-top">
<view class="cu-form-group">
<view class="title">上架区域<text class="text-red">*</text></view>
<picker :mode="'multiSelector'" @change="regionChange" @columnchange="regionColChange"
:value="regionMultiIndex" :range-key="'areaName'" :range="regionList">
<input disabled class="line-input radius-input"
:value="formData.region && formData.region.length ? formData.region[0].areaName + '-' + formData.region[1].areaName : ''"
placeholder="请选择区域"></input>
</picker>
</view>
<view class="padding-lr bg-white">
<checkbox-group @change="checkDistirct" class="grid col-3">
<view v-for="(item, index) in formData.districtList" class="margin-tb-xs">
<checkbox style="transform:scale(1)" class="main-color margin-right-xs" :value="index"
:checked="item.checked"></checkbox>
<text>{{item.areaName}}</text>
</view>
</checkbox-group>
</view>
</view>
<view class="cu-bar bg-white">
<view class="action text-black">区域描述</view>
</view>
<view class="padding-lr-sm padding-bottom-sm bg-white">
<textarea name="areaDesc" style="width: 100%; height: 150rpx;" class="solid radius text-left padding-sm" v-model="formData.areaDesc"
maxlength="-1" placeholder="如XX区XX街道未覆盖或XX区仅服务XX街道"></textarea>
</view>
<!-- <view class="cu-form-group">
<view class="title">上门费</view>
<input type="digit" name="doorPrice" :value="formData.doorPrice" :v-model="formData.doorPrice"
placeholder="单位:元/次"></input>
</view> -->
<view class="cu-bar bg-white solid-top">
<view class="action text-black">
商品封面图上传<text class="text-red">*</text>
</view>
</view>
<view class="cu-form-group">
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img" v-for="(item,index) in formData.coverImgList" :key="index"
@tap="viewImage($event, formData.coverImgList)" :data-url="item">
<image :src="item" mode="aspectFill"></image>
<view class="cu-tag bg-red" @tap.stop="delImg($event, formData.coverImgList)"
:data-index="index">
<text class='cuIcon-close'></text>
</view>
</view>
<view class="solids" @tap="chooseImgList($event, 'coverImgList')"
v-if="formData.coverImgList.length === 0">
<text class='cuIcon-cameraadd'></text>
</view>
</view>
</view>
<view class="cu-bar bg-white solid-top">
<view class="action text-black">
详情图上传<text class="text-red">*</text>
</view>
</view>
<view class="cu-form-group">
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img" v-for="(item,index) in formData.descImgList" :key="index"
@tap="viewImage($event, formData.descImgList)" :data-url="item">
<image :src="item" mode="aspectFill"></image>
<view class="cu-tag bg-red" @tap.stop="delImg($event, formData.descImgList)"
:data-index="index">
<text class='cuIcon-close'></text>
</view>
</view>
<view class="solids" @tap="chooseImgList($event, 'descImgList')"
v-if="formData.descImgList.length<9">
<text class='cuIcon-cameraadd'></text>
</view>
</view>
</view>
<view class="cu-bar bg-white solid-top">
<view class="action text-black">
轮播图上传<text class="text-red">*</text>
</view>
</view>
<view class="cu-form-group">
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img" v-for="(item,index) in formData.imgList" :key="index"
@tap="viewImage($event, formData.imgList)" :data-url="item">
<image :src="item" mode="aspectFill"></image>
<view class="cu-tag bg-red" @tap.stop="delImg($event, formData.imgList)" :data-index="index">
<text class='cuIcon-close'></text>
</view>
</view>
<view class="solids" @tap="chooseImgList($event, 'imgList')" v-if="formData.imgList.length<9">
<text class='cuIcon-cameraadd'></text>
</view>
</view>
</view>
<view class="cu-bar bg-white solid-top">
<view class="action text-black">
视频上传
</view>
</view>
<!-- <view class="bg-white padding-lr padding-bottom-sm">
<uni-file-picker limit="1" file-mediatype="video" return-type="object" @select="selectVideo">
<button class="cu-btn bg-main-color shadow-blur">选择文件</button>
</uni-file-picker>
</view> -->
<view class="cu-form-group">
<view class="grid col-4 grid-square flex-sub" v-if="formData.videoList.length === 0">
<view class="solids" @tap="chooseVideo()">
<text class='cuIcon-cameraadd'></text>
</view>
</view>
<view class="grid grid-square flex-sub" v-else>
<view class="bg-img" v-for="(item,index) in formData.videoList" :key="index" :data-url="item">
<video :src="item" controls></video>
<view class="cu-tag bg-red" @tap.stop="delImg($event, formData.videoList)" :data-index="index">
<text class='cuIcon-close'></text>
</view>
</view>
</view>
</view>
<view class="padding-sm bg-white solid-top">
<textarea style="width: 100%;" class="solid radius text-left padding-sm" v-model="formData.detailDesc"
maxlength="-1" placeholder="请输入详情介绍"></textarea>
</view>
<view class="padding-bottom-lg padding-top bg-white text-center">
<button class="cu-btn bg-main-color shadow-blur long-btn" @click="submit">确定</button>
</view>
</form>
<!-- 账户及实名弹窗 -->
<!-- <vertify-bank-bind ref="vertifyBankBind"></vertify-bank-bind> -->
<vertify-certify ref="vertifyCertify"></vertify-certify>
</view>
</template>
<script>
import myUniCombox from '@/components/uni-combox/my-uni-combox.vue';
export default {
components: {
myUniCombox
},
data() {
return {
formData: {
servName: '',
servDesc: '',
specsList: [],
category: [],
productUnit: '',
isGoldenServ: false,
region: [],
districtList: [],
areaDesc: '',
doorPrice: '',
imgList: [],
detailDesc: '',
descImgList: [],
coverImgList: [],
videoList: []
},
categoryList: [],
categoryMultiIndex: [0, 0],
regionList: [],
regionMultiIndex: [0, 0],
isShowAllSpecs: false,
productUnits: [{
code: 1,
name: '台'
}, {
code: 2,
name: '件'
}, {
code: 3,
name: '套'
}, {
code: 4,
name: '个'
}, {
code: 5,
name: '平方'
}],
servHonorTitle: [{
code: -1,
name: '无'
}, {
code: 1,
name: '金牌服务'
}],
productProtectTimes: [{
code: 1,
name: '15天'
}, {
code: 2,
name: '30天'
}, {
code: 3,
name: '45天'
}],
curUserInfo: {},
bankCard: null,
certifyInfo: null
}
},
onLoad(options) {
let goodId = null;
if (options && options.goodId) {
goodId = options.goodId;
}
this.loadData(goodId);
},
methods: {
async loadData(goodId) {
this.curUserInfo = this.$request.getCurUserInfo();
this.checkBankAndCertify();
this.loadCategoryList();
this.loadRegionList();
// TODO 如果存在goodId说明是修改需要查询good信息进行回显
// this.categoryList = await this.$api.data('categoryList');
// this.regionList = await this.$api.data('regionList');
},
async checkBankAndCertify() {
// 查询账户绑定信息
// let bankCardRes = await this.$request.getBindBankCardByWorkerId({
// workerId: this.curUserInfo.workerId
// });
// this.bankCard = bankCardRes.data;
// 查询实名信息
let certifyInfoRes = await this.$request.getWorkerCertify();
this.certifyInfo = certifyInfoRes.data;
// if (!this.bankCard || !this.bankCard.bankNum) {
// this.$refs.vertifyBankBind.showModal();
// return false;
if (!this.certifyInfo || !this.certifyInfo.workerCertificationId) {
this.$refs.vertifyCertify.showModal();
return false;
}
return true;
},
async loadCategoryList(idArr) {
let typeList = await this.$request.listByStep({
type: 1
});
typeList = typeList.data;
let col1Id = idArr ? idArr[0] : typeList[0].goodsCategoryId;
let subTypeList = await this.$request.listByStep({
type: 1,
goodsCategoryId: col1Id
});
subTypeList = subTypeList.data;
let col2Id = idArr ? idArr[1] : subTypeList[0].goodsCategoryId;
let subSubTypeList = await this.$request.listByStep({
type: 1,
goodsCategoryId: col2Id
});
subSubTypeList = subSubTypeList.data;
// this.categoryList.push(typeList);
this.categoryList.push(subTypeList);
this.categoryList.push(subSubTypeList);
},
async loadRegionList() {
let regionList = await this.$request.areaListByStep();
regionList = regionList.data;
let subRegionList = [];
if (regionList && regionList.length > 0) {
subRegionList = await this.$request.areaListByStep({
parentCode: regionList[0].areaCode
});
subRegionList = subRegionList.data;
}
this.regionList.push(regionList);
this.regionList.push(subRegionList);
},
async categoryChange(e) {
this.categoryMultiIndex = e.detail.value;
let chosenCategory = [];
for (let i = 0; i < this.categoryList.length; i++) {
chosenCategory.push(this.categoryList[i][this.categoryMultiIndex[i]]);
}
this.formData.category = chosenCategory;
// 查询最后一级品类
let res = await this.$request.listByStep({
type: 1,
goodsCategoryId: chosenCategory[chosenCategory.length - 1].goodsCategoryId
});
this.formData.specsList = res.data;
},
async categoryColChange(e) {
let colObj = e.detail;
// if (colObj.column == 0) {
// // 通过一级查询二级,通过二级查三级
// let subTypeList = await this.$request.listByStep({
// type: 1,
// goodsCategoryId: this.categoryList[0][colObj.value].goodsCategoryId
// });
// subTypeList = subTypeList.data;
// let subSubTypeList = await this.$request.listByStep({
// type: 1,
// goodsCategoryId: subTypeList[0].goodsCategoryId
// });
// subSubTypeList = subSubTypeList.data;
// this.categoryList.pop();
// this.categoryList.pop();
// this.categoryList.push(subTypeList);
// this.categoryList.push(subSubTypeList);
// this.categoryMultiIndex = [colObj.value, 0, 0];
// } else
if (colObj.column == 0) {
// 通过二级查三级
let subSubTypeList = await this.$request.listByStep({
type: 1,
goodsCategoryId: this.categoryList[0][colObj.value].goodsCategoryId
});
subSubTypeList = subSubTypeList.data;
this.categoryList.pop();
this.categoryList.push(subSubTypeList);
this.categoryMultiIndex = [colObj.value, 0];
}
},
async regionChange(e) {
this.regionMultiIndex = e.detail.value;
let chosenRegion = [];
for (let i = 0; i < this.regionList.length; i++) {
chosenRegion.push(this.regionList[i][this.regionMultiIndex[i]]);
}
this.formData.region = chosenRegion;
// 查询最后一级区域
let areaList = await this.$request.areaListByStep({
parentCode: chosenRegion[1].areaCode
});
this.formData.districtList = areaList.data;
},
async regionColChange(e) {
let colObj = e.detail;
if (colObj.column == 0) {
// 通过一级查二级
let subAreaList = await this.$request.areaListByStep({
parentCode: this.regionList[0][colObj.value].areaCode
});
subAreaList = subAreaList.data;
this.regionList.pop();
this.regionList.push(subAreaList);
this.regionMultiIndex = [colObj.value, 0];
}
},
checkSpecs(e) {
let checkedIndexArr = e.detail.value;
for (let i = 0; i < this.formData.specsList.length; i++) {
if (checkedIndexArr.indexOf(String(i)) !== -1) {
this.formData.specsList[i].checked = true;
} else {
this.formData.specsList[i].checked = false;
}
}
},
inputSpecs(e, index, field) {
this.formData.specsList[index][field] = e.detail.value;
},
showAllSpecs() {
this.isShowAllSpecs = !this.isShowAllSpecs;
},
checkDistirct(e) {
let checkedIndexArr = e.detail.value;
for (let i = 0; i < this.formData.districtList.length; i++) {
if (checkedIndexArr.indexOf(String(i)) !== -1) {
this.formData.districtList[i].checked = true;
} else {
this.formData.districtList[i].checked = false;
}
}
},
chooseImgList(e, imgListField) {
uni.chooseImage({
count: 9, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], //从相册选择
success: (res) => {
uni.showLoading({
title: '上传中',
mask: true
});
res.tempFilePaths.forEach((tmpUrl, index) => {
this.$request.uploadFile(tmpUrl).then((url) => {
this.formData[imgListField].push(url);
if (index === res.tempFilePaths.length - 1) {
uni.hideLoading();
}
});
});
}
});
},
viewImage(e, imgList) {
uni.previewImage({
urls: imgList,
current: e.currentTarget.dataset.url
});
},
delImg(e, imgList) {
uni.showModal({
title: '',
content: '确定要删除这张图片吗?',
cancelText: '取消',
confirmText: '确定',
success: res => {
if (res.confirm) {
imgList.splice(e.currentTarget.dataset.index, 1)
}
}
})
},
chooseVideo() {
let _this = this;
uni.chooseVideo({
sourceType: ['camera', 'album'],
success: function(res) {
uni.showLoading({
title: '上传中',
mask: true
});
_this.$request.uploadFile(res.tempFilePath).then((url) => {
uni.hideLoading();
_this.formData.videoList.push(url);
});
}
});
},
// async selectVideo(e) {
// uni.showLoading({
// title: '上传中',
// mask: true
// });
// this.formData.video = await this.$request.uploadFile(e.tempFilePaths[0]);
// uni.hideLoading();
// },
validData(data) {
let errMsg = "";
if (!data.servName) {
errMsg = '服务名称不能为空';
} else if (!data.goodsStandardList || !data.goodsStandardList.length) {
errMsg = '至少选择一个规格';
} else if (!this.validSpecData(data.goodsStandardList)) {
return false;
} else if (!data.goodsUnit) {
errMsg = '商品单位不能为空';
} else if (!data.goodsAreaList || !data.goodsAreaList.length) {
errMsg = '至少选择一个上架区域';
} else if (!data.coverImgList || !data.coverImgList.length) {
errMsg = '封面图不能为空'
} else if (!data.descImgList || !data.descImgList.length) {
errMsg = '详情图不能为空'
} else if (!data.imgList || !data.imgList.length) {
errMsg = '轮播图不能为空'
}
if (errMsg) {
uni.showToast({
icon: 'none',
title: errMsg
})
return false;
}
return true;
},
validSpecData(goodsStandardList) {
let errMsg = "";
for (let i = 0; i < goodsStandardList.length; i++) {
let spec = goodsStandardList[i];
if (!spec.goodsStandardName) {
errMsg = '勾选规格的自编辑购买标题不能为空';
} else if (!spec.goodsPrice) {
errMsg = '勾选规格的价格不能为空';
} else if (!spec.groupPrice) {
errMsg = '勾选规格的团购价不能为空';
} else if (!spec.goodsNum) {
errMsg = '勾选规格的库存不能为空';
}
if (errMsg) {
uni.showToast({
icon: 'none',
title: errMsg
})
break;
}
}
if (errMsg) {
return false;
}
return true;
},
async submit() {
let goodsStandardList = this.formData.specsList.filter((item) => {
if (item.checked) {
return {
...item
}
}
});
let goodsAreaList = this.formData.districtList.filter((item) => {
if (item.checked) {
item.countryAreaId = item.areaId;
return item;
}
});
let data2Valid = {
...this.formData,
goodsStandardList: goodsStandardList,
goodsAreaList: goodsAreaList
}
if (!this.validData(data2Valid)) {
return;
}
let checkRes = await this.checkBankAndCertify();
if (!checkRes) {
return;
}
// 0是轮播图1是详情图
let goodsImgsList = [];
this.formData.imgList.forEach((url) => {
goodsImgsList.push({
imgUrl: url,
imgType: 0
});
});
this.formData.descImgList.forEach((url) => {
goodsImgsList.push({
imgUrl: url,
imgType: 1
});
});
let goodsVideoUrl = this.formData.videoList.length ? this.formData.videoList[0] : '';
let params = {
goodsName: this.formData.servName,
goodsDesc: this.formData.servDesc,
goodsUnit: this.formData.goodsUnit,
deptGoodsCategoryId: this.formData.category[this.formData.category.length - 1].goodsCategoryId,
goodsStandardList: goodsStandardList,
goodsAreaList: goodsAreaList,
goodsImgUrl: this.formData.coverImgList[0],
goodsImgsList: goodsImgsList,
goodsVideoUrl: goodsVideoUrl,
status: 0,
remark: this.formData.detailDesc
}
let res = await this.$request.addGoods(params);
if (res && res.code === 0) {
uni.showToast({
icon: 'success'
})
uni.reLaunch({
url: '/pages/index/index?menuCode=supplyChainPage'
})
}
}
},
}
</script>
<style scoped>
.cu-form-group picker::after {
display: none;
}
.certern-height {
max-height: 520rpx;
overflow: hidden;
}
.long-btn {
width: 95%;
}
.form-val-area {
flex-basis: 75% !important;
}
</style>