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.
400 lines
9.3 KiB
400 lines
9.3 KiB
3 years ago
|
<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="setpFreight" color="#FF6D31" style="transform:scale(0.7)" @change="switchChange" />
|
||
|
|
</view>
|
||
|
|
<view class="step-box" v-show="setpFreight">
|
||
|
|
<view class="acea-row row-middle row-center">
|
||
|
|
<input class="inp-price" type="text" v-model="templateList[0]._continue" />
|
||
|
|
<text>{{type == 0 ? '件' : 'kg' }}内(含)￥</text>
|
||
|
|
<input class="inp-price" type="text" v-model="templateList[0].continue_price" />
|
||
|
|
</view>
|
||
|
|
<view class="acea-row row-middle row-center">
|
||
|
|
<text>每增加</text>
|
||
|
|
<input class="inp-price" type="text" v-model="stepNum" />
|
||
|
|
<text>{{type == 0 ? '件' : 'kg' }},</text>
|
||
|
|
<text>运费增加</text>
|
||
|
|
<input class="inp-price" type="text" v-model="stepPrice" />
|
||
|
|
</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>{{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="#FF6D31" 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._continue" />
|
||
|
|
<text>{{type == 0 ? '件' : 'kg' }}内(含)￥</text>
|
||
|
|
<input class="inp-price" type="text" v-model="item.continue_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 class="mask-box">
|
||
|
|
<view class="selectTree-box">
|
||
|
|
<select-tree @choose='choose' :selectList='selectList' ref='selectTree'></select-tree>
|
||
|
|
<view class="select-ok-btn">选好了</view>
|
||
|
|
</view>
|
||
|
|
</view> -->
|
||
|
|
</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 } from "@/api/user";
|
||
|
|
|
||
|
|
let testList = [{
|
||
|
|
city_id: 1,
|
||
|
|
id: 1,
|
||
|
|
isShow: 1,
|
||
|
|
lat: "39.904030",
|
||
|
|
level: 0,
|
||
|
|
lng: "116.407526",
|
||
|
|
mergerName: "北京",
|
||
|
|
name: "北京市",
|
||
|
|
parentId: 0,
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
areaCode: "110100000000",
|
||
|
|
children: null,
|
||
|
|
city_id: 2,
|
||
|
|
id: 35,
|
||
|
|
isShow: 1,
|
||
|
|
lat: "39.904030",
|
||
|
|
level: 1,
|
||
|
|
lng: "116.407526",
|
||
|
|
mergerName: "北京",
|
||
|
|
name: "北京市",
|
||
|
|
parentId: 1,
|
||
|
|
},
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
areaCode: "130000000000",
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
areaCode: "130100000000",
|
||
|
|
children: null,
|
||
|
|
city_id: 13268,
|
||
|
|
id: 37,
|
||
|
|
isShow: 1,
|
||
|
|
lat: "38.042306",
|
||
|
|
level: 1,
|
||
|
|
lng: "114.514859",
|
||
|
|
mergerName: "河北,石家庄",
|
||
|
|
name: "石家庄市",
|
||
|
|
parentId: 13267,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
areaCode: "130200000000",
|
||
|
|
children: null,
|
||
|
|
city_id: 18128,
|
||
|
|
id: 38,
|
||
|
|
isShow: 1,
|
||
|
|
lat: "39.630867",
|
||
|
|
level: 1,
|
||
|
|
lng: "118.180193",
|
||
|
|
mergerName: "河北,唐山",
|
||
|
|
name: "唐山市",
|
||
|
|
parentId: 13267,
|
||
|
|
}
|
||
|
|
],
|
||
|
|
city_id: 13267,
|
||
|
|
id: 3,
|
||
|
|
isShow: 1,
|
||
|
|
lat: "38.037057",
|
||
|
|
level: 0,
|
||
|
|
lng: "114.468664",
|
||
|
|
mergerName: "河北",
|
||
|
|
name: "河北省",
|
||
|
|
parentId: 0,
|
||
|
|
}
|
||
|
|
]
|
||
|
|
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,
|
||
|
|
appoint: 0,
|
||
|
|
appoint_info: [],
|
||
|
|
name: "",
|
||
|
|
region_info: [
|
||
|
|
{
|
||
|
|
continue_price: 0,
|
||
|
|
first: 1,
|
||
|
|
price: 0,
|
||
|
|
region: [{name: "默认全国", city_id: 0}],
|
||
|
|
regionName: "默认全国",
|
||
|
|
_continue: 1,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
continue_price: 0,
|
||
|
|
first: 1,
|
||
|
|
price: "2",
|
||
|
|
region: [{name: "河北省", city_id: 13267,children:[{city_id: 13268}]}],
|
||
|
|
regionName: "河北省",
|
||
|
|
_continue: 1,
|
||
|
|
}
|
||
|
|
],
|
||
|
|
|
||
|
|
type:1,
|
||
|
|
setpFreight: false,
|
||
|
|
list: testList,
|
||
|
|
|
||
|
|
templateList: g
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted(){
|
||
|
|
getCity().then((res)=>{
|
||
|
|
console.log(res)
|
||
|
|
})
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
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();
|
||
|
|
},
|
||
|
|
// 确定回调事件
|
||
|
|
treeConfirm(e) {
|
||
|
|
console.log(e,'确认')
|
||
|
|
console.log(this.list,'列表')
|
||
|
|
let list = this.list;
|
||
|
|
let selectCity = e;
|
||
|
|
let selectName = [];
|
||
|
|
selectCity.forEach((item,index)=>{
|
||
|
|
if(item.parentId == 0){ //省份
|
||
|
|
selectName.push(item.name)
|
||
|
|
} else{ //城市
|
||
|
|
list.forEach((city,idx)=>{
|
||
|
|
if(item.parentId == list[idx].city_id){
|
||
|
|
console.log(list[idx],'对应省份')
|
||
|
|
selectName.push(list[idx].name)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
});
|
||
|
|
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.templateList = this.templateList
|
||
|
|
|
||
|
|
console.log(form)
|
||
|
|
},
|
||
|
|
|
||
|
|
// choose(e){
|
||
|
|
// console.log(e)
|
||
|
|
// //返回参数说明
|
||
|
|
// },
|
||
|
|
// chooseAll(){
|
||
|
|
// this.$refs.selectTree.chooseAll()
|
||
|
|
// },
|
||
|
|
// cancelAll(){
|
||
|
|
// this.$refs.selectTree.cancelAll()
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</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: 606rpx;
|
||
|
|
height: 76rpx;
|
||
|
|
line-height: 76rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #000000;
|
||
|
|
border: 1px solid #000000;
|
||
|
|
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;
|
||
|
|
border:1px solid #000;
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
.inp-price{
|
||
|
|
width: 80rpx;
|
||
|
|
border-bottom: 1px solid #000;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.step-freight-box{
|
||
|
|
.step-box{
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.add-appoint-btn{
|
||
|
|
width: 606rpx;
|
||
|
|
height: 76rpx;
|
||
|
|
line-height: 76rpx;
|
||
|
|
text-align: center;
|
||
|
|
border: 1px solid #000000;
|
||
|
|
border-radius: 8rpx;
|
||
|
|
margin: 30rpx auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.submit-btn{
|
||
|
|
width: 560rpx;
|
||
|
|
height: 80rpx;
|
||
|
|
line-height: 80rpx;
|
||
|
|
text-align: center;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 38rpx;
|
||
|
|
background: linear-gradient(134deg, #FFA782 0%, #FF6D31 100%);
|
||
|
|
border-radius: 40rpx;
|
||
|
|
position: absolute;
|
||
|
|
bottom: 100rpx;
|
||
|
|
left: 50%;
|
||
|
|
margin-left: -280rpx;
|
||
|
|
}
|
||
|
|
.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>
|