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