You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
325 lines
9.3 KiB
325 lines
9.3 KiB
1 year ago
|
<template>
|
||
|
|
<view class="container">
|
||
|
|
<view class="freight_template">
|
||
|
|
<view class="freight_template_name">
|
||
|
|
<view class="freight_template_name_con">
|
||
|
|
<view class="freight_template_name_con_label">运费模板名称</view>
|
||
|
|
<view class="freight_template_name_con_value">
|
||
|
|
<input type="text" v-model="billingData.name" placeholder="填写模板名称" placeholder-class="inputClass_template_name" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="freight_description">
|
||
|
|
<view class="freight_description_title">运费说明</view>
|
||
|
|
<view class="freight_description_textarea"><textarea v-model="billingData.info" placeholder="填写运费说明" placeholder-class="textarea_class" /></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="billing_method">
|
||
|
|
<view class="billing_method_title">计费方式</view>
|
||
|
|
<view class="billing_method_radio">
|
||
|
|
<radio-group @change="changeType" v-model="billingData.type" class="radioContainer">
|
||
|
|
<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in billing.list" :key="item.value">
|
||
|
|
<radio :value="item.value" :checked="item.value == billingData.type" />
|
||
|
|
<view>{{ item.label }}</view>
|
||
|
|
</label>
|
||
|
|
</radio-group>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="regional_freight" @click="goDistributionArea">
|
||
|
|
<view class="regional_freight_label">配送区域及运费</view>
|
||
|
|
<view class="regional_freight_value">
|
||
|
|
<span>去编辑</span>
|
||
|
|
<span class="iconfont"></span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<tip message="默认全国，开启时指定区域不配送时无效"></tip>
|
||
|
|
|
||
|
|
<view class="free_shipping">
|
||
|
|
<view class="free_shipping_item">
|
||
|
|
<view class="free_shipping_item_label">指定包邮</view>
|
||
|
|
<view class="free_shipping_item_value"><switch @change="switchChange" :checked="billingData.appoint == 1" color="#E93323" style="transform:scale(0.7)" /></view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="free_shipping_item" @click="goarcelArea" v-if="billingData.appoint == 1">
|
||
|
|
<view class="free_shipping_item_label">包邮区域</view>
|
||
|
|
<view class="free_shipping_item_value">
|
||
|
|
<span>去编辑</span>
|
||
|
|
<span class="iconfont"></span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="free_shipping mt30">
|
||
|
|
<view class="billing_method width100">
|
||
|
|
<view class="billing_method_title">指定区域不配送</view>
|
||
|
|
|
||
|
|
<view class="billing_method_radio">
|
||
|
|
<radio-group @change="changeArea" v-model="billingData.undelivery" class="radioContainer">
|
||
|
|
<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in billing.specifiedArea" :key="item.value">
|
||
|
|
<view><radio :value="item.value" :checked="item.value == billingData.undelivery" /></view>
|
||
|
|
<view>{{ item.label }}</view>
|
||
|
|
</label>
|
||
|
|
</radio-group>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="free_shipping_item" v-if="billingData.undelivery == '1'" @click="selectArea">
|
||
|
|
<view class="free_shipping_item_label">自定义</view>
|
||
|
|
<view class="free_shipping_item_value">
|
||
|
|
<span>{{allReadySelect.length ? allReadySelect.map(val=> val.name).join(',') : '请选择不配送区域'}}</span>
|
||
|
|
<span class="iconfont"></span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<tip message="开启时，仅支持以上添加的配送区域"></tip>
|
||
|
|
<view class="handle"><view class="handle_button" @click="save">保存</view></view>
|
||
|
|
<uni-popup ref="area_popup" type="bottom"><areas @handleGetSelectArea="handleGetSelectArea" :allReadySelect="allReadySelect" @close="close"></areas></uni-popup>
|
||
|
|
<distribution-area ref="distributionArea" :freightData="billingData.region" :popup="popup" @changeClose="closeDistribution" @getData="getData"></distribution-area>
|
||
|
|
<parcel-area ref="parcelArea" :parcelData="billingData.free" :popup="popup" @changeClose="closeParcel" @getData="getFreeData"></parcel-area>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import tip from '../components/tip.vue';
|
||
|
|
import areas from '../components/areas.vue';
|
||
|
|
import distributionArea from '../components/distributionArea.vue';
|
||
|
|
import parcelArea from '../components/parcelArea.vue';
|
||
|
|
import { navigateTo, getStorage, Toast } from '../../../libs/uniApi.js';
|
||
|
|
import { templateCreate, templateDetail, templateUpdate } from 'api/product.js';
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
tip,
|
||
|
|
areas,
|
||
|
|
distributionArea,
|
||
|
|
parcelArea
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
mer_id: '',
|
||
|
|
shipping_id: '',
|
||
|
|
billingData: {
|
||
|
|
name: '', // 运费模板名称
|
||
|
|
type: 0, // 计费方式 0数量 1重量 2体积
|
||
|
|
appoint: 0, // 开启指定包邮，0关闭 1开启
|
||
|
|
undelivery: 0, // 开启指定区域不配送 0关闭 1开启
|
||
|
|
info: '', // 运费说明
|
||
|
|
sort: '', // 排序
|
||
|
|
region: [], //配送区域信息
|
||
|
|
undelives: {city_id: []}, // 不配送区域
|
||
|
|
free: []
|
||
|
|
},
|
||
|
|
popup: {
|
||
|
|
show: false,
|
||
|
|
showParael: false
|
||
|
|
},
|
||
|
|
|
||
|
|
allReadySelect: [], // 已选地址信息
|
||
|
|
billing: {
|
||
|
|
list: [
|
||
|
|
{
|
||
|
|
value: '0',
|
||
|
|
label: '按件数'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: '1',
|
||
|
|
label: '按重量'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: '2',
|
||
|
|
label: '按体积'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
specifiedArea: [
|
||
|
|
{
|
||
|
|
value: '1',
|
||
|
|
label: '自定义'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: '2',
|
||
|
|
label: '开启'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: '0',
|
||
|
|
label: '关闭'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
billingData: {
|
||
|
|
handler(val) {
|
||
|
|
console.log(val);
|
||
|
|
},
|
||
|
|
deep: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(opt) {
|
||
|
|
this.mer_id = opt.mer_id;
|
||
|
|
this.shipping_id = opt.shipping_id;
|
||
|
|
if(this.shipping_id) this.getShippingData();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
//获取运费模板详情
|
||
|
|
getShippingData(){
|
||
|
|
let that = this
|
||
|
|
uni.showLoading({
|
||
|
|
title: '加载中'
|
||
|
|
});
|
||
|
|
templateDetail(that.mer_id,that.shipping_id)
|
||
|
|
.then(res => {
|
||
|
|
uni.hideLoading();
|
||
|
|
let data = res.data
|
||
|
|
that.billingData = data;
|
||
|
|
that.getCityList(that.billingData.region);
|
||
|
|
that.getCityList(that.billingData.free);
|
||
|
|
if(that.billingData.undelives && that.billingData.undelives.city_name.length > 0){
|
||
|
|
that.allReadySelect = that.billingData.undelives.city_name
|
||
|
|
that.billingData.undelives['city_id'] = that.billingData.undelives.city_name.map(val => val.id);
|
||
|
|
}else{
|
||
|
|
that.billingData.undelives['city_id'] = [0]
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(res => {
|
||
|
|
that.$util.Tips({
|
||
|
|
title: res
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
//获取city_id
|
||
|
|
getCityList(arr){
|
||
|
|
if(arr.length > 0){
|
||
|
|
arr.forEach((value,i)=>{
|
||
|
|
if(!Array.isArray(value['city_id'])){
|
||
|
|
value['city_id'] = []
|
||
|
|
value['city_name'].forEach((v,j)=>{
|
||
|
|
if(v.length == 0){
|
||
|
|
value['city_id'] = [0]
|
||
|
|
}else{
|
||
|
|
value['city_id'].push(v.id)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
return arr;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
changeType(e) {
|
||
|
|
this.billingData.type = e.detail.value;
|
||
|
|
},
|
||
|
|
changeArea(e) {
|
||
|
|
this.billingData.undelivery = e.detail.value;
|
||
|
|
},
|
||
|
|
// 打开选择地址的弹框
|
||
|
|
selectArea() {
|
||
|
|
this.$refs.area_popup.open();
|
||
|
|
},
|
||
|
|
// 关闭选择地址弹框
|
||
|
|
close() {
|
||
|
|
this.$refs.area_popup.close();
|
||
|
|
},
|
||
|
|
// 获取选择的地址数据
|
||
|
|
handleGetSelectArea(item) {
|
||
|
|
if(!this.billingData.undelives)this.billingData.undelives = {}
|
||
|
|
this.billingData.undelives['city_id'] = item.map(val => val.id);
|
||
|
|
this.allReadySelect = item;
|
||
|
|
console.log(this.billingData.undelives)
|
||
|
|
this.$refs.area_popup.close();
|
||
|
|
},
|
||
|
|
// 指定包邮开关
|
||
|
|
switchChange(e) {
|
||
|
|
if(e.target.value) {
|
||
|
|
this.billingData.appoint = 1
|
||
|
|
} else {
|
||
|
|
this.billingData.appoint = 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
getData(data){
|
||
|
|
this.$set(this.billingData, 'region', data);
|
||
|
|
this.$set(this.popup, 'show', false);
|
||
|
|
},
|
||
|
|
getFreeData(data){
|
||
|
|
this.$set(this.billingData, 'free', data);
|
||
|
|
this.$set(this.popup, 'showParael', false);
|
||
|
|
},
|
||
|
|
// 保存
|
||
|
|
save() {
|
||
|
|
let that = this;
|
||
|
|
let postData = {
|
||
|
|
...this.billingData
|
||
|
|
};
|
||
|
|
if (!postData.name) return that.$util.Tips({
|
||
|
|
title: '请输入模板名称'
|
||
|
|
});
|
||
|
|
if (!postData.info) return that.$util.Tips({
|
||
|
|
title: '请输入运费说明'
|
||
|
|
});
|
||
|
|
if (postData.region.length == 0) return that.$util.Tips({
|
||
|
|
title: '请编辑配送区域及运费'
|
||
|
|
});
|
||
|
|
if (postData.appoint == 1 && postData.free.length== 0) return that.$util.Tips({
|
||
|
|
title: '请编辑包邮区域'
|
||
|
|
});
|
||
|
|
if (postData.undelivery == 1 && !postData.undelives) return that.$util.Tips({
|
||
|
|
title: '请编辑不包邮区域'
|
||
|
|
});
|
||
|
|
that.shipping_id ?
|
||
|
|
templateUpdate(that.mer_id, that.shipping_id, postData).then(res => {
|
||
|
|
that.$util.Tips({
|
||
|
|
title: res.message,
|
||
|
|
icon: 'success'
|
||
|
|
});
|
||
|
|
setTimeout(()=>{
|
||
|
|
uni.redirectTo({
|
||
|
|
url: `/pages/product/addGoods/freightTemplate?mer_id=${that.mer_id}`
|
||
|
|
})
|
||
|
|
},1000)
|
||
|
|
|
||
|
|
}).catch(rej => {
|
||
|
|
Toast(rej);
|
||
|
|
}) :
|
||
|
|
templateCreate(this.mer_id, postData).then(res => {
|
||
|
|
that.$util.Tips({
|
||
|
|
title: res.message,
|
||
|
|
icon: 'success'
|
||
|
|
});
|
||
|
|
uni.redirectTo({
|
||
|
|
url: `/pages/product/addGoods/freightTemplate?mer_id=${that.mer_id}`
|
||
|
|
})
|
||
|
|
|
||
|
|
}).catch(rej => {
|
||
|
|
Toast(rej);
|
||
|
|
})
|
||
|
|
|
||
|
|
},
|
||
|
|
// 打开配送区域及运费
|
||
|
|
goDistributionArea() {
|
||
|
|
console.log(this.billingData.region)
|
||
|
|
this.$set(this.popup, 'show', true);
|
||
|
|
this.$refs.distributionArea.initListData();
|
||
|
|
},
|
||
|
|
//关闭弹窗
|
||
|
|
closeDistribution(){
|
||
|
|
this.$set(this.popup, 'show', false);
|
||
|
|
},
|
||
|
|
// 打开指定包邮
|
||
|
|
goarcelArea() {
|
||
|
|
this.$set(this.popup, 'showParael', true);
|
||
|
|
this.$refs.parcelArea.initParcelData();
|
||
|
|
},
|
||
|
|
//关闭弹窗
|
||
|
|
closeParcel(){
|
||
|
|
this.$set(this.popup, 'showParael', false);
|
||
|
|
},
|
||
|
|
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import './scss/freightTemplate.scss';
|
||
|
|
</style>
|