xiaochengxu/pages/CooperationApply/CooperationApply.vue

<template>
	<view class="main">
		<view class="back" />
		<u-navbar
			title="合作申请"
			:safeAreaInsetTop="true"
			:fixed="true"
			bgColor="#FFFFFF00"
			@leftClick="onTouchBack"
		>
		</u-navbar>
		<image class="top_banner_global" :src="pageData.toppic.picurl" mode="widthFix"></image>
		<view class="body">
			<view style="width:100%;height:auto;position: relative;top: 30rpx;left: 0;right: 0;display: flex;flex-direction: row;align-items: center;justify-content: flex-start;">
				<view style="width: 8rpx;height: 22rpx;background: #D49B4B;opacity: 1;border-radius: 1px 5px 5px 1px;margin-left: 20rpx;"/>
				<text class="title_text">{{getTitleText()}}</text>
			</view>
			<view class="u-form-body">
				<u-form
					labelPosition="left"
					ref="form1"
					:model="person"
					:rules="rules"
				>
					<u-form-item
						prop="person.name"
						borderBottom
						ref="name"
					>
						<view class="form_box">
							<text class="form_tile_title">姓名*</text>
							<input
								:placeholder="rules['person.name'].message"
								class="form_input"
								:value="person.name"
								placeholder-class="form_holder"
								@blur="rules['person.name'].validator"
							/>
						</view>
					</u-form-item>
					<u-form-item
						prop="person.phone"
						borderBottom
						ref="phone"
					>
						<view class="form_box">
							<text class="form_tile_title">电话*</text>
							<view v-if="person.phone == ''" style="width: 500rpx;height: 110rpx;
										flex-direction: row;
										display: flex;
										align-items: center;
										justify-content: flex-end;">
								<button class="phone_get_button" open-type="getPhoneNumber" @getphonenumber="onTouchToGetPhone">
									<text style="color: #999999;font-size: 28rpx;">点击获取手机号码</text>
								</button>
								<u-icon
									slot="right" 
									name="arrow-right"
								></u-icon>
							</view>
							
							<text v-else class="form_value">{{person.phone}}</text>
						</view>
					</u-form-item>
					<u-form-item
						prop="person.address"
						borderBottom
						ref="city"
						@click="onClickToSelectCity"
					>
						<view class="form_box">
							<text class="form_tile_title">所在区域</text>
							<view style="width: 500rpx;height: 110rpx;
										flex-direction: row;
										display: flex;
										align-items: center;
										justify-content: flex-end;
							">
								<pick-regions :defaultRegion="defaultRegion" @getRegion="handleGetRegion">
									<input
										:placeholder="rules['person.address'].message"
										class="form_input"
										:disabled="true"
										:value="person.address"
										placeholder-class="form_holder"
									/>
								</pick-regions>
								<u-icon
									slot="right" 
									name="arrow-right"
								></u-icon>
							</view>
						</view>
					</u-form-item>
					<u-form-item
						prop="person.referrer"
						borderBottom
						ref="referrer"
					>
					<view class="form_box">
						<text class="form_tile_title">推荐人电话</text>
						<input
							:placeholder="rules['person.referrer'].message"
							class="form_input"
							placeholder-class="form_holder"
							:value="person.referrer"
							@blur="rules['person.referrer'].validator"
						/>
					</view>
					</u-form-item>
				</u-form>
				<view class="checkboxgroup" :key="isAgree.toString()">
					<checkbox :checked="isAgree" value="1" @click="onChechBoxChange"/>
					<text class="label" @click="onClickAreement">
						我已阅读并同意 [协议条款]
					</text>
				</view>
				<view style="width: 702rpx;height: auto;position: relative;top: 24rpx;">
					<text class="attentionText">注意事项</text>
					<u-gap height="12rpx" />
					<view class="attentionInfo">
						<u-parse :content="pageData.toppic.textmsg" class="attentionInfo"></u-parse>
					</view>
				</view>
			</view>
		</view>
		<button class="button" @click="onTouchConfirm">提交</button>
		<u-popup 
			:show="isShowUpload"
			:closeOnClickOverlay="false"
			mode="center"
			bgColor="transparent"
		>
			<UploadSuccess @confirm="onTouchBack" />
		</u-popup>
	</view>
</template>

<script>
	import {post} from '@/common/api.js'
	import UploadSuccess from "@/components/UploadSuccess/UploadSuccess.vue";
	
	var Player 	= getApp().globalData.Player;
	var Define	= getApp().globalData.Define;
	var pageData = {
		note : '',
		partnerinfo : {},
		//0->未申请，1->已申请，未审核。2->通过。3->已拒绝
		partnerstatus : 0,
		toppic : {},
	};
	export default {
		components:{
			UploadSuccess,
		},
		onLoad() {
			uni.showLoading({
				
			});
			var agreementData = getApp().globalData.agreementData;
			this.$utils.getAgreementData();
			let self	= this;
			post('pages/getbecpartner',{}).then(
				res=>{
					uni.hideLoading();
					var info = Define.onNetMessage(res);
					if(!info){
						//没有取到数据
						return;
					}
					self.pageData 				= info;
					var partnerstatus 			= info.partnerstatus;
					var mainPageData			= getApp().globalData.mainPageData;
					mainPageData.partnerstatus	= partnerstatus;
					console.log("合作申请页面信息：",info);
					//这是用户数据
					var partnerinfo = info.partnerinfo;
					var person		= self.person;
					person.name		= partnerinfo.name ?? '';
					person.phone	= partnerinfo.phone ?? '';
					person.referrer	= partnerinfo.recommender ?? '';
					var province	= partnerinfo.province;
					var city		= partnerinfo.city;
					var area		= partnerinfo.area;
					if(province && province!=''){
						self.defaultRegion 	= [province,city,area];
						person.address		= province + " " + city + " " + area;
					}
					if(info.partnerstatus > 0){
						self.isAgree	= true;
						console.log("强制改变当前选中状态");
					}
				}
			);
		},
		data() {
			return {
				pageData,
				///是否同意协议条款
				isAgree : false,
				///是否显示提交成功的界面
				isShowUpload : false,
				person : {
					///名字
					name : '',
					///电话号码
					phone : Player.phone,
					///所在地址
					address : '',
					///推荐人电话
					referrer : '',
				},
				rules : {
					"person.name" : {
						type: 'string',
						required: true,
						message : '请输入您的姓名',
						validator : (object)=>{
							this.person.name = object.detail.value;
						}
					},
					'person.phone' : {
						type: 'string',
						required: true,
						message : '请输入您的联系电话',
						///校验用户是否输入了正确的手机号码
						validator : (object)=>{
							var suc = uni.$u.test.mobile(object.detail.value);
							if(!suc){
								uni.$u.toast("请输入正确的电话号码！");
								this.person.phone	= '';
							}else{
								this.person.phone = object.detail.value;
							}
							
							return suc;
						}
					},
					'person.address' : {
						type : 'string',
						required : false,
						message: '请选择您的地址',
					},
					'person.referrer' : {
						type : 'string',
						required : false,
						message : '请输入推荐人电话号码',
						///校验用户是否输入了正确的手机号码
						validator : (object)=>{
							var suc = uni.$u.test.mobile(object.detail.value);
							if(!suc){
								uni.$u.toast("请输入正确的电话号码！");
								this.person.referrer = '';
							}else{
								this.person.referrer = object.detail.value;
							}
							return suc;
						},
					},
				},
				
				defaultRegion:['四川省','成都市','武侯区'],
				region:[],
				
			};
		},
		methods:{
			onTouchBack(){
				uni.navigateBack({
					
				});
			},
			///点击并选择城市
			onClickToSelectCity(){
				uni.hideKeyboard();
			},
			// 获取选择的地区
			handleGetRegion(region){
				this.region = region;
				this.person.address = this.regionName();
				this.$refs.form1.validateField('person.address');
			},
			regionName(){
				return this.region.map(item=>item.name).join(' ');
			},
			onChechBoxChange(e){
				console.log(e);
				this.isAgree = !this.isAgree;
			},
			/**
			 * 点击了协议字体，要去看看协议内容
			 */
			onClickAreement(){
				/*uni.navigateTo({
					url:'/pages/Agreement/Agreement',
				})*/
				var data	= getApp().globalData.agreementData;
				getApp().globalData.showingSkipData = data;
				uni.navigateTo({
					url:'/pages/SkipView/SkipView'
				})
			},
			showToast(content){
				uni.$u.toast(content);
			},
			/**
			 * 点击了提交按钮
			 */
			async onTouchConfirm(){
				if(!this.isAgree){
					this.showToast('请阅读并同意协议条款');
					return;
				}
				var name = this.person.name;
				if(name == ''){
					this.showToast('请输入您的名字');
					return;
				}
				var phone = this.person.phone;
				if(phone == ''){
					this.showToast('请输入您的电话号码');
					return;
				}
				var data = {
					name : name,
					phone : phone,
					status : 0,
					provincecode : 0,
					citycode : 0,
					areacode : 0,
					province : '',
					city : '',
					area : '',
					recommender : this.person.referrer,
				};
				if(this.region.length > 0){
					//如果当前有地址
					var p = this.region[0].name ?? '';
					var c = this.region[1].name ?? '';
					var a = this.region[2].name ?? '';
					data['province'] 	= p;
					data['city']		= c;
					data['area']		= a;
				}
				console.log(data);
				uni.showLoading();
				var res = await post("pages/becpartner",data);
				uni.hideLoading();
				var out = getApp().globalData.Define.onNetMessage(res);
				if(!out){
					return;
				}
				console.log("申请结果：",out);
				getApp().globalData.mainPageData.partnerstatus = 1;
				this.isShowUpload = true;
			},
			/**
			 * 获取显示最上面的文字
			 */
			getTitleText(){
				var partnerstatus = this.pageData.partnerstatus;
				var str	= '';
				if(partnerstatus == 0){
					str = '尚未申请';
				}else if(partnerstatus == 1){
					str = '请等待审核';
				}else if(partnerstatus == 2){
					str = '您已是官方合作人员';
				}else{
					str = '您的申请已被拒绝，请重新申请';
				}
				str = "个人信息 (" + str + ")";
				return str;
			},
			///点击按钮，开始获取用户的手机号码
			async onTouchToGetPhone(e){
				var phonenumber 	= await this.$utils.wechatGetPlayerPhoneNumberBack(e);
				if(!phonenumber){
					return;
				}
				this.person.phone 	= phonenumber;
			},
		}
	}
</script>

<style lang="scss" scoped>
	button::after{border: none;padding: 0;}
	.top_banner_global{
		position: relative;
		width: 750rpx;
		height: auto;
	}
	.body{
		width: 702rpx;
		height: 1015rpx;
		position: relative;
		left: 24rpx;
		right: 24rpx;
		top: -75rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 20rpx;
	}
	.title_text{
		//width: 192rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		opacity: 1;
		margin-left: 10rpx;
	}
	.u-form-body{
		position: relative;
		width: 662rpx;
		left: 20rpx;
		right: 20rpx;
		height: 910rpx;
		//background-color: #1CBBB4;
		border-radius: 20rpx;
		top: 30rpx;
	}
	.form_input{
		//background-color: #0081FF;
		width: 100%;
		height: 90rpx;
		text-align: right;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}
	.form_holder{
		width: 100%;
		height: 90rpx;
		text-align: right;
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		margin-right: 10rpx;
	}
	.form_label_style{
		height: 37rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #666666;
		opacity: 1;
	}r
	///注意事项
	.attentionText{
		width: 104rpx;
		height: 37rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #666666;
		opacity: 1;
	}
	.attentionInfo{
		//width: 648rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		opacity: 1;
		height: auto;
		//background-color: #39B54A;
	}
	
	.label{
		text-decoration: underline;
		color: #39B54A;
		font-size: 26rpx;
		font-weight: 400;
	}
	.checkboxgroup{
		width: 662rpx;
		height: 100rpx;
		//background-color: #9000FF;
		position: relative;
		top: 10rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: flex-start
	}
	.button{
		width: 702rpx;
		height: 90rpx;
		background: #D49B4B;
		opacity: 1;
		border-radius: 93rpx;
		position: relative;
		font-size: 36rpx;
		font-weight: 400;
		top: -40rpx;
		color: #FFFFFF;	
	}
	.phone_get_button{
		width: 600rpx;
		height: 110rpx;
		background-color: #FFFFFF;
		font-size: 28rpx;
		color: #999999;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		border: none;
		
	}
	.form_value{
		width: 550rpx;
		//height: 110rpx;
		text-align: right;
		//background-color: #39B54A;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		opacity: 1;
	}
	
	.form_box{
		width: 662rpx;
		height: 110rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		//background-color: #0081FF;
	}
	.form_tile_title{
		width: 170rpx;
		height: 37rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #333333;
	}
</style>