zhonglxcx/zhonglmini/pages/user/sqruzhu.vue

<template>
	<view>
		无效页面
		<!-- <view class="content1" v-if="issq">
			<text class="success-icon yticon icon-xuanzhong2"></text>
			<text class="tit">{{statedesc}}</text>
			<view class="btn-group"  v-if="issq">
				<navigator url="/pages/user/user" open-type="switchTab" class="mix-btn hollow">点我返回</navigator>
			</view>
		</view>
		<view class="content" v-if="!issq">
			<view class="row">
				<view class="nominal">
					姓名
				</view>
				<view class="input">
					<input placeholder="请输入姓名" type="text" v-model="name" />
				</view>
			</view>
			<view class="row">
				<view class="nominal">
					电话号码
				</view>
				<view class="input">
					<input placeholder="请输入电话号码" type="text" v-model="tel" />
				</view>
			</view>
			<view class="row">
				<view class="nominal">
					所在地区
				</view>
				<view class="input" @tap="chooseCity">
					{{region.label}}
				</view>
				
			</view>
			<view class="row">
				<view class="nominal">
					备注
				</view>
				<view class="input">
					<textarea v-model="detailed" auto-height="true" placeholder="输入申请备注"></textarea>
				</view>
			</view>
			<view class="row">
				<view class="nominal">
					所在小区
				</view>
				<view class="input">
					<textarea v-model="xqtext" auto-height="true" placeholder="输入所在小区"></textarea>
				</view>
			</view>
			
		</view>
		<view class="save" @tap="save" v-if="!issq">
			<view class="btn">
				提交申请
			</view>
		</view>
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValue" @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
	 -->
	</view>
</template>

<script>
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
	import xflSelect from '@/components/xfl-select/xfl-select.vue';
	export default {
		components: {
			mpvueCityPicker,
			xflSelect
		},
		data() {
			return {
				editType:'edit',
				id:'',
				name:'',
				tel:'',
				detailed:'',
				isDefault:false,
				cityPickerValue: [0, 0, 1],
				themeColor: '#007AFF',
				region:{label:"请点击选择地址",value:[],cityCode:""},
				list: ['龙湖区','花园小区','黑谷街道'],
				listBoxStyle: `border: none;`,
				xqtext:'',
				issq:0,
				statedesc:'正在审核中'
			};
		},
		methods: {
			async getarealist() {
				let reinfo=await this.$api.getarealist({action:'getarealist'});
				this.list=reinfo.data;
			},
			//地区选择器相关函数回调
			onCancel(e) {
				console.log(e)
			},
			chooseCity() {
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e) {
				this.region = e;
				this.cityPickerValue = e.value;
			},
			isDefaultChange(e){
				this.isDefault = e.detail.value;
			},
			//入驻申请请求接口
			async sqruzhu() {
				let userinfo=uni.getStorageSync('userinfo');
				let re = await this.$api.sqruzhu({action:'sqruzhu',uid:userinfo.uid,name:this.name,phone:this.tel,address:this.region.label,beiz:this.detailed,xiaoqu:this.xqtext});
				if(re.code==1){
					uni.showToast({
						title:re.msg,icon:'none'
					})
					setTimeout(function(){
						uni.hideLoading();
						uni.navigateBack({
							delta:1
						})
					},1000)
						
				}else{
					uni.hideLoading();
					uni.showToast({
						title:re.msg,icon:'none'
					})
				}
				
					
			},
			async checkruzhu() {
				let userinfo=uni.getStorageSync('userinfo');
				let re = await this.$api.checkruzhu({action:'checkruzhu',uid:userinfo.uid});
				if(re.code==1){
					this.statedesc=re.data.desc;
					this.issq=1;
				}	
			},
			//选择小区改变触发函数
			change({newVal, oldVal, index, orignItem}){
				console.log(newVal, oldVal, index, orignItem);
				this.xqtext=newVal;
			 },
			save(){
				
				if(!this.name){
					uni.showToast({title:'请输入姓名',icon:'none'});
					return ;
				}
				if(!this.tel){
					uni.showToast({title:'请输入手机号',icon:'none'});
					return ;
				}
				
				if(this.region.value==''){
					uni.showToast({title:'请选择地址',icon:'none'});
					return ;
				}
				if(this.xqtext==''){
					uni.showToast({title: '请填所属小区',icon: 'none'})
					return false;
				}
				uni.showLoading({
					title:'正在提交'
				})
				this.sqruzhu();
			}
		},
		onLoad(e) {
			//获取传递过来的参数
			this.getarealist();
			this.checkruzhu();
		},
		onBackPress() {
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel();
				return true;
			}
		},
		onUnload() {
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel()
			}
		}
	};
</script>
<style lang="scss">
.content1{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.success-icon{
			font-size: 160upx;
			color: #fa436a;
			margin-top: 100upx;
		}
		.tit{
			font-size: 38upx;
			color: #303133;
		}
		.btn-group{
			padding-top: 100upx;
		}
		.mix-btn {
			margin-top: 30upx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 600upx;
			height: 80upx;
			font-size: $font-lg;
			color: #fff;
			background-color: $base-color;
			border-radius: 10upx;
			&.hollow{
				background: #fff;
				color: #303133;
				border: 1px solid #ccc;
			}
		}
	}
.save{
		view{
			display: flex;
		}
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120upx;
		display: flex;
		justify-content: center;
		align-items: center;
		.btn{
			box-shadow: 0upx 5upx 10upx rgba(0,0,0,0.4);
			width: 70%;
			height: 80upx;
			border-radius: 80upx;
			background-color: #f06c7a;
			color: #fff;
			justify-content: center;
			align-items: center;
			.icon{
				height: 80upx;
				color: #fff;
				font-size: 30upx;
				justify-content: center;
				align-items: center;
			}
			font-size: 30upx;
		}
	}
	.content{
		display: flex;
		flex-wrap: wrap;
		.row{
			width: 94%;
			display: flex;
			margin: 20upx 3%;
			border-top: solid 1upx #eee;
			align-items: center;
			.nominal{
				width: 30%;
				
				font-weight: 200;
				font-size: 30upx;
				align-items: center;
			}
			.input{
				width: 70%;
				padding: 20upx 0;
				align-items: center;
				font-size: 30upx;
				&.switch{
					justify-content: flex-end;
				}
				.textarea{
					margin: 20upx 0;
					min-height: 120upx;
				}
			}
			
		}
		
	}
	
</style>