<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>