dingdong-master/pages/my/master-occupancy.vue

<template>
	<view>
		<!-- 顶部操作条 -->
		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">师傅入驻信息填写</block>
		</cu-custom>
		<!-- 步骤条 -->
		<view class="bg-white padding">
			<view class="cu-steps">
				<view class="cu-item" :class="index>curStep?'':'text-main-color'" v-for="(stepName, index) in stepList">
					<text class='cuIcon-radioboxfill'></text> {{stepName}}
				</view>
			</view>
		</view>
		<view v-if="curStep === 0">
			<view class="margin-bottom-with-bar">
				<view class="bg-white margin-top-sm" v-for="(item, index) in servArea">
					<view class="cu-bar padding-lr solid-bottom">
						<view class="text-lg">
							<text class="cuIcon-titles"></text>
							<text>服务区域{{index + 1}}(将按服务范围派单)</text>
						</view>
						<view @click="delServArea(index)">
							<text class="text-main-color">删除</text>
						</view>
					</view>
					<view class="padding">
						<view class="flex">
							<my-uni-combox class="flex-sub margin-right-xs" :candidates="provinceList"
								:showField="'areaName'" placeholder="选择省份" v-model="servArea[index].provinceObj"
								@input="chooseRegion($event, 0, index)"></my-uni-combox>
							<my-uni-combox class="flex-sub margin-right-xs" :candidates="servArea[index].cityList"
								:showField="'areaName'" placeholder="选择城市" v-model="servArea[index].cityObj"
								@input="chooseRegion($event, 1, index)"></my-uni-combox>
							<my-uni-combox class="flex-sub" :candidates="servArea[index].districtList"
								:showField="'areaName'" placeholder="选择地区" v-model="servArea[index].districtObj"
								@input="chooseRegion($event, 2, index)"></my-uni-combox>
						</view>
						<checkbox-group @change="checkStreet($event, index)" class="grid col-2 margin-top-xs">
							<view v-for="(item0, index0) in servArea[index].streetList" class="margin-tb-xs">
								<checkbox style="transform:scale(1)" class="main-color margin-right-xs" :value="item0.areaCode" :checked="servArea[index].streetIds.indexOf(item0.areaCode) !== -1 ? true : false">
								</checkbox>
								<text>{{item0.areaName}}</text>
							</view>
						</checkbox-group>
					</view>
				</view>
				<view class="text-center margin-top">
					<button class="cu-btn bg-main-color light" @click="addServArea">
						<text class="margin-right-xs"><text class="cuIcon-add"></text></text>
						<text>继续添加服务区域</text>
					</button>
				</view>
			</view>
			<!-- 下一步 -->
			<view class="cu-bar tabbar border shop fixed-bottom-bar bg-back">
				<button class="bg-main-color long-btn margin-lr" form-type="submit">下一步</button>
			</view>
		</view>
		<view v-if="curStep === 1" class="margin-top-sm">

		</view>
		<view v-if="curStep === 2" class="margin-top-sm">

		</view>
	</view>
</template>

<script>
	import myUniCombox from '@/components/uni-combox/my-uni-combox.vue';

	export default {
		components: {
			myUniCombox
		},
		onLoad() {
			this.loadData();
		},
		data() {
			return {
				curStep: 0,
				stepList: ['服务范围', '服务技能', '特殊技能'],
				provinceList: [],
				servArea: [{
					cityList: [],
					districtList: [],
					streetList: [],
					provinceObj: {},
					cityObj: {},
					districtObj: {},
					streetIds: []
				}]
			}
		},
		methods: {
			loadData() {
				this.loadProvinceList();
			},
			async loadProvinceList() {
				let res = await this.$request.areaListByStep();
				this.provinceList = res.data;
			},
			async chooseRegion(e, type, index) {
				let that = this;
				let res = await this.$request.areaListByStep({
					parentCode: e.areaCode
				});
				if (res.code == 0) {
					// if (index > this.servArea.length - 1) {
					// 	this.servArea.push({
					// 		cityList: [],
					// 		districtList: [],
					// 		streetList: [],
					// 		provinceObj: e,
					// 		cityObj: {},
					// 		districtObj: {},
					// 		streetIds: []
					// 	});
					// }
					switch (type) {
						case 0: {
							this.servArea[index].cityList = res.data;
							this.servArea[index].districtList = [];
							this.servArea[index].streetList = [];
							this.servArea[index].cityObj = {};
							this.servArea[index].districtObj = {};
							this.servArea[index].streetIds = [];
						}
						break;
					case 1: {
						this.servArea[index].districtList = res.data;
						this.servArea[index].streetList = [];
						this.servArea[index].districtObj = {};
						this.servArea[index].streetIds = [];
					}
					break;
					case 2: {
						this.servArea[index].streetList = res.data;
						this.servArea[index].streetIds = [];
					}
					break;
					default:
						break;
					}
				}
			},
			checkStreet(e, index) {
				// let that = this;
				let checkedIndexArr = e.detail.value;
				// let streetIds = [];
				// checkedIndexArr.forEach((checkedIndex) => {
				// 	console.log("areaCode:" + that.servArea[index].streetList[checkedIndex].areaCode);
				// 	streetIds.push(that.servArea[index].streetList[checkedIndex].areaCode)
				// });
				console.log(checkedIndexArr)
				this.servArea[index].streetIds = checkedIndexArr;
				console.log(this.servArea[index].streetIds)
			},
			addServArea() {
				this.servArea.push({
					cityList: [],
					districtList: [],
					streetList: [],
					provinceObj: {},
					cityObj: {},
					districtObj: {},
					streetIds: []
				});
			},
			delServArea(index) {
				this.servArea.splice(index, 1);
				console.log(this.servArea)
			},
			nextStep() {
				this.curStep = this.curStep === this.stepList.length - 1 ? this.curStep : ++this.curStep
			},
			preStep() {
				this.curStep = this.curStep === 0 ? 0 : --this.curStep
			},
		},
	}
</script>

<style scoped>
	/deep/ .uni-combox__selector {
		z-index: 99 !important;
	}
</style>