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="templateList[0]" color="#FF6D31" 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="#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, 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: 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>