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.
362 lines
8.8 KiB
362 lines
8.8 KiB
<template> |
|
<view class="templates-box"> |
|
<view class="templates-name"> |
|
<input type="text" v-model="name"placeholder="请输入模板名称" /> |
|
</view> |
|
<view class="charge-type acea-row row-around"> |
|
<radio-group @change="radioChange"> |
|
<label> <radio :value="0" :checked="type == 0" /><text>件数</text> </label> |
|
<label> <radio :value="1" :checked="type == 1" /> <text>重量</text> </label> |
|
</radio-group> |
|
</view> |
|
<view class="default-tempalte"> |
|
<view>{{templateList[0].regionName}}</view> |
|
<view class="m28 acea-row row-between"> |
|
<view>运费</view> |
|
<view class="acea-row row-middle"> |
|
<text>￥</text> |
|
<input class="inp-price" type="text" v-model="templateList[0].price" /> |
|
<text>/{{type == 0 ? '件' : 'kg' }}</text> |
|
</view> |
|
</view> |
|
<view class="step-freight-box"> |
|
<view class="acea-row row-between"> |
|
<view>阶梯运费</view> |
|
<switch :checked="templateList[0]" color="#000" style="transform:scale(0.7)" @change="switchChange" /> |
|
</view> |
|
<view class="step-box" v-show="templateList[0]"> |
|
<view class="acea-row row-middle row-center"> |
|
<input class="inp-price" type="text" v-model="templateList[0].first" /> |
|
<text>{{type == 0 ? '件' : 'kg' }}内(含)￥</text> |
|
<input class="inp-price" type="text" v-model="templateList[0].price" /> |
|
</view> |
|
<view class="acea-row row-middle row-center"> |
|
<text>每增加</text> |
|
<input class="inp-price" type="text" v-model="templateList[0]._continue" /> |
|
<text>{{type == 0 ? '件' : 'kg' }},</text> |
|
<text>运费增加</text> |
|
<input class="inp-price" type="text" v-model="templateList[0].continue_price" /> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="add-appoint-btn" @tap="showTree">添加指定地区设置</view> |
|
<view class="appoint-template-box"> |
|
<block v-for="(item,index) in templateList" :key="index"> |
|
<view class="default-tempalte" v-if="index > 0"> |
|
<view class="close-btn" @tap="delTempItem(index)">×</view> |
|
<view>{{item.regionName}}</view> |
|
<view class="m28 acea-row row-between"> |
|
<view>运费</view> |
|
<view class="acea-row row-middle"> |
|
<text>￥</text> |
|
<input class="inp-price" type="text" v-model="item.price" /> |
|
<text>/{{type == 0 ? '件' : 'kg' }}</text> |
|
</view> |
|
</view> |
|
<view class="step-freight-box"> |
|
<view class="acea-row row-between"> |
|
<view>阶梯运费</view> |
|
<switch :checked="item.setpFreight" color="#000" style="transform:scale(0.7)" @change="appointSwitchChange(index)" /> |
|
</view> |
|
<view class="step-box" v-show="item.setpFreight"> |
|
<view class="acea-row row-middle row-center"> |
|
<input class="inp-price" type="text" v-model="item.first" /> |
|
<text>{{type == 0 ? '件' : 'kg' }}内(含)￥</text> |
|
<input class="inp-price" type="text" v-model="item.price" /> |
|
</view> |
|
<view class="acea-row row-middle row-center"> |
|
<text>每增加</text> |
|
<input class="inp-price" type="text" v-model="item._continue" /> |
|
<text>{{type == 0 ? '件' : 'kg' }},</text> |
|
<text>运费增加</text> |
|
<input class="inp-price" type="text" v-model="item.continue_price" /> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</block> |
|
</view> |
|
<view class="submit-btn" @click="submit">确认提交</view> |
|
<tki-tree ref="tkitree" :multiple="true" :range="list" selectParent="true" :foldAll="true" rangeKey="name" @confirm="treeConfirm" |
|
@cancel="treeCancel"></tki-tree> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
const app = getApp(); |
|
import selectTree from "@/components/select-tree/select-tree" |
|
import tkiTree from "@/components/tki-tree/tki-tree.vue" |
|
import { getCity, citys, addTemp, getTempDetail } from "@/api/user"; |
|
|
|
var g = [ |
|
{ |
|
region: [ |
|
{ |
|
name: '默认全国', |
|
city_id: 0 |
|
} |
|
], |
|
regionName: '默认全国', |
|
first: 1, |
|
price: 0, |
|
_continue: 1, |
|
continue_price: 0 |
|
} |
|
] |
|
export default { |
|
components:{ selectTree, tkiTree }, |
|
data() { |
|
return { |
|
price: '0.00', |
|
stepNum: 0, |
|
stepPrice: 0, |
|
name: "", |
|
type:0, |
|
setpFreight: false, |
|
list: [], |
|
templateList: g, |
|
id: null |
|
}; |
|
}, |
|
mounted(){ |
|
if(this.$yroute.query.id){ |
|
this.id = this.$yroute.query.id |
|
this.getTempDetail(this.$yroute.query.id) |
|
} |
|
citys().then((res)=>{ |
|
let data = res.data; |
|
this.list = data |
|
}) |
|
}, |
|
methods: { |
|
getTempDetail(id){ |
|
getTempDetail(id).then((res)=>{ |
|
if(res.success){ |
|
this.name= res.data.name |
|
this.type= res.data.type |
|
this.templateList = res.data.region_info |
|
this.templateList.forEach((item)=>{ |
|
item.setpFreight = true |
|
}) |
|
} else{ |
|
this.alertMessage(res.msg) |
|
} |
|
}) |
|
}, |
|
radioChange(e){ |
|
this.type = e.detail.value |
|
}, |
|
switchChange(e){ |
|
this.setpFreight = e.detail.value |
|
}, |
|
appointSwitchChange(idx){ |
|
this.$set(this.templateList[idx], 'setpFreight', !this.templateList[idx].setpFreight) |
|
console.log(this.templateList) |
|
}, |
|
// 显示树形选择器 |
|
showTree() { |
|
this.$refs.tkitree._show(); |
|
}, |
|
delTempItem(idx){ |
|
this.templateList.splice(idx,1) |
|
}, |
|
// 确定回调事件 |
|
treeConfirm(e) { |
|
console.log(e,'确认') |
|
console.log(this.list,'列表') |
|
if(e.length == 0) return |
|
let list = this.list; |
|
let selectCity = e; |
|
let selectName = []; |
|
let data = []; |
|
selectCity.forEach((item,index)=> { |
|
if(item.parentId == 0){ //省份 |
|
selectName.push(item.name) |
|
let j = { |
|
name: item.name, |
|
city_id: item.city_id, |
|
children: [] |
|
} |
|
data.push(j) |
|
} else{ //城市 |
|
data.forEach((c,i)=> { |
|
if(item.parentId == c.city_id){ |
|
c.children.push({ |
|
city_id: item.city_id |
|
}) |
|
} |
|
}) |
|
list.forEach((city,idx)=> { |
|
if(item.parentId == list[idx].city_id){ |
|
// console.log(list[idx],'对应省份') |
|
selectName.push(list[idx].name) |
|
} |
|
}) |
|
} |
|
}); |
|
// console.log(data,'data') |
|
let cityName = [...new Set(selectName)].join(';') |
|
this.templateList.push({ |
|
region: data, |
|
regionName: cityName, |
|
first: 1, |
|
price: 0, |
|
_continue: 1, |
|
continue_price: 0, |
|
setpFreight:false |
|
}); |
|
// console.log(this.templateList,'templateList') |
|
}, |
|
// 取消回调事件 |
|
treeCancel(e) { |
|
console.log(e) |
|
}, |
|
submit(){ |
|
let form = {} |
|
form.name = this.name |
|
form.type = this.type |
|
form.region_info = this.templateList |
|
form.id = this.id |
|
if(form.name == '' ){ |
|
return this.alertMessage('请填写模板名字') |
|
|
|
} else if(form.region_info.length == 0){ |
|
// if(form.region_info[0].) |
|
} |
|
addTemp(form).then((res)=>{ |
|
if(res.success){ |
|
uni.showToast({ |
|
title: '添加成功' |
|
}) |
|
this.$yrouter.back() |
|
} |
|
}) |
|
console.log(form) |
|
}, |
|
alertMessage(msg){ |
|
uni.showToast({ |
|
title: msg, |
|
icon: 'none' |
|
}) |
|
} |
|
} |
|
}; |
|
</script> |
|
<style lang="less"> |
|
page{ |
|
width: 100%; |
|
height: 100%; |
|
background: #F5F6F7; |
|
} |
|
.templates-box{ |
|
width: 670rpx; |
|
height: 100vh; |
|
margin: 0 auto; |
|
padding: 20rpx 0; |
|
.templates-name{ |
|
width: 100%; |
|
height: 76rpx; |
|
line-height: 76rpx; |
|
font-size: 28rpx; |
|
color: #000000; |
|
background: #fff; |
|
border-radius: 8rpx; |
|
margin: 0 auto; |
|
padding-left: 12rpx; |
|
input{ |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
.charge-type{ |
|
width: 100%; |
|
margin: 20rpx 0; |
|
label{ |
|
margin-left: 20rpx; |
|
} |
|
} |
|
.default-tempalte{ |
|
padding: 12rpx 24rpx; |
|
background: #fff; |
|
border-radius: 8rpx; |
|
margin-bottom: 20rpx; |
|
position: relative; |
|
.inp-price{ |
|
width: 80rpx; |
|
border-bottom: 1px solid #000; |
|
text-align: center; |
|
} |
|
.close-btn{ |
|
color: #fff; |
|
font-size: 38rpx; |
|
position: absolute; |
|
right: -16rpx; |
|
top: -22rpx; |
|
border-radius: 50%; |
|
line-height: 40rpx; |
|
width: 46rpx; |
|
height: 46rpx; |
|
text-align: center; |
|
background: #FF5E16; |
|
border-radius: 50%; |
|
} |
|
} |
|
.add-appoint-btn{ |
|
width: 100%; |
|
height: 76rpx; |
|
line-height: 76rpx; |
|
text-align: center; |
|
// border: 1px solid #000000; |
|
border-radius: 8rpx; |
|
margin: 30rpx auto; |
|
background: #fff; |
|
} |
|
} |
|
.submit-btn{ |
|
width: 690rpx; |
|
height: 80rpx; |
|
line-height: 80rpx; |
|
text-align: center; |
|
color: #fff; |
|
font-size: 38rpx; |
|
background: #000; |
|
border-radius: 40rpx; |
|
position: absolute; |
|
bottom: 100rpx; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
} |
|
.mask-box{ |
|
width: 100%; |
|
height: 100%; |
|
background: rgba(0,0,0,0.7); |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
.selectTree-box{ |
|
width: 90%; |
|
height: 90%; |
|
overflow-y: scroll; |
|
padding: 20rpx; |
|
background: #fff; |
|
position: absolute; |
|
top: 50%; |
|
left: 50%; |
|
transform: translate(-50%,-50%); |
|
.select-ok-btn{ |
|
width: 80%; |
|
height: 76rpx; |
|
line-height: 76rpx; |
|
text-align: center; |
|
border: 1px solid #000000; |
|
border-radius: 8rpx; |
|
margin: 300rpx auto; |
|
} |
|
} |
|
} |
|
|
|
.m28{ |
|
margin: 28rpx 0; |
|
} |
|
</style> |