hb/pages/user/xzdl.vue

<template>
	<view class="content">
		<view class="row b-b">
			<text class="tit">选择升级身份</text>
			<picker @change="bindlevel" :range="levelList" range-key="name">
				<input type="text" placeholder="请选择" class="item-val" v-model="chooseLevel" disabled>
			</picker>
		</view>
		<view class="row b-b">
			<text class="tit">选择代理区域</text>
			<pickerAddress class="input" @change="onCityClick">{{addressDetail||'请选择地址'}}</pickerAddress>
			<!-- <text class="iconfont iconlocation"></text> -->
		</view>
		<button class="add-btn" @click="loaded?'':confirm()">提交</button>
	</view>
</template>

<script>
	import  pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress.vue';
	import {sqdl} from '@/api/user.js'
	export default {
		components: {
			pickerAddress,
		},
		data() {
			return {
				loaded: false,
				addressDetail: '',
				chooseLevel: '请选择',
				leveleId: '',
				levelList: [{
						name: 'vip代理',
						id: 1
					},
					{
						name: '区域代理',
						id: 2
					}
				],
				addressData: {
					name: '',
					mobile: '',
					address: {
						province: '',
						city: '',
						district: ''
					},
					area: '',
					default: false
				}
			}
		},
		onLoad() {

		},
		onShow() {

		},
		onReachBottom() {

		},
		onReady() {

		},
		methods: {
			bindlevel(e) {
				this.chooseLevel = this.levelList[e.detail.value].name
				this.leveleId = this.levelList[e.detail.value].id
			},
			onCityClick({data}) {
				let address = this.addressData.address;
				address.province = data[0];
				address.city = data[1];
				address.district = data[2];
				this.addressDetail = data.join('');
			},
			confirm() {
				let obj = this
				if(obj.chooseLevel == '请选择') {
					return obj.$api.msg('请选择升级身份')
				}
				if(obj.addressDetail == '') {
					return obj.$api.msg('请选择代理区域')
				}
				obj.loaded = true
				sqdl({
					type: obj.leveleId,
					address:obj.addressDetail
				}).then(res => {
					uni.showToast({
						title:'提交成功',
						duration:2000
					});
					setTimeout(()=> {
						uni.switchTab({
							url: '/pages/user/user'
						})
					},1500)
					
				}).catch(err => {
					console.log(err)
					obj.loaded = false
				})
			}
		}
	}
</script>

<style lang="scss">
	.row {
		display: flex;
		align-items: center;
		position: relative;
		padding: 0 30rpx;
		height: 110rpx;
		background: #fff;

		.tit {
			flex-shrink: 0;
			width: 200rpx;
			font-size: 30rpx;
			color: $font-color-dark;
		}

		.input {
			
			flex-grow: 1;
			font-size: 30rpx;
			color: $font-color-dark;
			text-align: right;
			line-height: 110rpx;
		}

		.item-val {
			// background-color: red;
			width: 490rpx;
			height: 110rpx;
			line-height: 120rpx;
			text-align: right;
			color: #000;
		}

		.iconlocation {
			font-size: 36rpx;
			color: $font-color-light;
		}
	}
	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690rpx;
		height: 80rpx;
		margin: 60rpx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10rpx;
		// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
</style>