yunshengtai-uniapp/pages/life/temp/index.vue

<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].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="#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.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 } 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,
			name: "",
			type:0,
			setpFreight: false,
			list: testList,
			templateList: g
    };
  },
	mounted(){
		citys().then((res)=>{
			let data = res.data;
			this.list = data
		})
	},
  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();
		},
		delTempItem(idx){
			console.log(idx)
			this.templateList.splice(idx,1)
		},
		// 确定回调事件
		treeConfirm(e) {
			// console.log(e,'确认')
			// console.log(this.list,'列表')
			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
			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: linear-gradient(134deg, #FFA782 0%, #FF6D31 100%);
		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>