yicangzongtai_app_240321/pages/user/regional-agency/reserve.vue

<template>
	<view>
		<navbar :config="config" backColor="#999999"></navbar>
		<view class="regional-agency">
			<view class="" v-if="provincesList.length > 0">
				<text class="reserve-title">请选择心仪的区域</text>
				<block v-for="(item , index) in selectCity" :key="index">
					<view class="reserve-item" @click.stop="selectProvince">
						<view class="reserve-lable">
							<text class="reserve-text" v-if="item.label">{{ item.label }}</text>
							<text class="reserve-hint" v-else>点击选择省</text>
						</view>
						<view class="reserve-icon iconfont3">&#xe65c;</view>
					</view>
				</block>
				<view class="reserve-btn" @click.stop="reserveBtn">
					立即预定
				</view>
			</view>
			<view class="lock-position" @click="lockPosition">
				查看已被锁定的区县>>
			</view>
		</view>
		<u-select v-model="areaShow" mode="mutil-column-auto" :list="provincesList" @confirm="confirmSite"></u-select>
	</view>
</template>

<script>
	import { applyareaagentApply } from "@/api/personal-center.js"
	import selectSite from "./select.vue"
	export default {
		components: {
			selectSite
		},
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '预定区域代理',
					color: '#1A1A1A',
					// autoBack:true,
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#fff"],
					statusBarFontColor: '#1A1A1A'
				},
				areaShow:false,
				provincesList: [],
				selectCity: [{},{},{}],
				reserveLoading:false
			}
		},
		created() {
			// this.getCode()
		},
		onShow() {
			this.$nextTick(() => {
				this.getAddressList()
			})
		},
		methods: {
			
			// 区域代理
			lockPosition() {
				uni.navigateTo({
					url:'/pages/user/regional-agency/lock-position'
				})
			},
			confirmSite(e) {
				this.selectCity = e
			},
			//获取地址列表
			async getAddressList() {
				let req = this.$http.get('/cnarea/tree-lbs', {});
				req.then(res => {
					console.log('getAddressList = ', res)
					this.provincesList = res.tree.children;
				})
			},
			selectProvince() {
				this.areaShow = true
			},
			reserveBtn(){
				if(this.reserveLoading){
					return false;
				};
				if(this.selectCity.length === 0){
					this.$mUtil.toast("请选择申请区域")
					return false
				};
				if(!this.selectCity[0].label){
					this.$mUtil.toast("请先选择省")
					return false
				};
				if(!this.selectCity[1].label){
					this.$mUtil.toast("请先选择市")
					return false
				};
				if(!this.selectCity[2].label){
					this.$mUtil.toast("请先选择区")
					return false
				};
				this.reserveLoading = true;
				const data = {
					province_name: this.selectCity[0].label,
					province_code: this.selectCity[0].value,
					city_name: this.selectCity[1].label,
					city_code: this.selectCity[1].value,
					area_name: this.selectCity[2].label,
					area_code: this.selectCity[2].value,
				};
				this.$http.post(applyareaagentApply , data).then(res => {
					if(res && res.code == 200){
            this.reserveLoading = false;
						this.$mUtil.toast("区域申请提交成功")
					}
				}).catch(err => {
					this.reserveLoading = false;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.reserve-box {
		// width: 100%;
		// min-height: calc(100vh - 40rpx);
	}

	.regional-agency {
		padding: 64rpx 60rpx 0;

		.reserve-title {
			font-size: 38rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #333333;
		}

		.reserve-item {
			width: 100%;
			height: 112.5rpx;
			border-bottom: 1rpx solid #d9d9d9;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.reserve-lable {
				width: 1px;
				flex: 1;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;

				.reserve-hint {
					color: #cccccc;
				}

				.reserve-text {
					color: #000;
				}
			}

			.reserve-icon {
				flex-shrink: 0;
				font-size: 30rpx;
				color: #808080;
			}
		}

		// <view class="reserve-item">
		// 	<view class="reserve-lable">
		// 		<text class="reserve-hint" v-show="city">点击选择省</text>
		// 		<text class="reserve-text" v-show="!city"></text>
		// 	</view>
		// 	<view class="iconfont">&#xe6c7;</view>
		// </view>
		.reserve-btn{
			margin-top: 100rpx;
			width: 100%;
			height: 80rpx;
			border-radius: 40rpx;
			background-color: #FA6138;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: center;
			line-height: 80rpx;
			color: #ffffff;
		}
	}

	.lock-position {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-decoration: underline;
		text-align: center;
		color: #FA6138;
	}
</style>