H5_module/promote/apply_old/apply.vue

<template>
	<view>
		<!--promote/apply/apply.wxml-->
		<view v-if="isShowPage&&isno==false">
			<view class="topimg">
				<image src="/promote/static/promote/images/sqimg.png" mode="widthFix"></image>
			</view>
			<view class="cen" v-if="showform2">
				<image :src="picUrlss+'sqimg2.png'"></image>
				<view class="tiaojian">您的申请正在审核中~</view>
			</view>
			<view class="cen" v-if="!showform">
				<image :src="picUrlss+'sqimg2.png'"></image>
				<view class="tiaojian">您还未达到开通条件哦~</view>
				<view class="info">{{info1}}<text>{{info3}}</text>{{info2}}<text>{{info4}}</text></view>
				<!-- <view class="info">成为分销商需要购买"<text>XXXXXXXXXXXXXXXX</text>"产品，您当前还未完成购买！</view> -->
				<view class="btn gray">立即申请</view>
			</view>
			<view class="cen" v-if="msg!=''">
				<!-- <image :src="picUrlss+'sqimg2.png'"></image> -->
				<view class="tiaojian">{{msg}}</view>
			</view>
			<view class="cen2" v-if="showform && !showform2">
				<form @submit="formSubmit">
					<view class="form">
						<view class="sex ipt" v-if="show">姓名<input placeholder="输入申请人姓名" name="title" :value="title"
								placeholder-class="placeholder" class v-if="show"></input></view>

						<view class="sex ipt" v-if="show3">身份证号<input
								:placeholder="data.cardNo!=null?data.cardNo:'输入申请人身份证号'" name="idCard"
								placeholder-class="placeholder" class v-if="show3"
								:value="data.cardNo!=null?data.cardNo:''"></input></view>

						<view class="sex ipt" v-if="show2">手机号码
							<view class="phone dflex" v-if="show2">
								<input placeholder="输入手机号" name="phone" :value="phone" :disabled="phone"
									placeholder-class="placeholder" v-if="phone"></input>
								<button open-type="getPhoneNumber" v-if="!phone" @getphonenumber="getphonenumber"
									class="phone-btn dflex">
									<image src="/static/pages/images/wxico.png"></image>微信授权
								</button>
							</view>
						</view>
						<view class="sex ipt" v-if="show4">推荐人<view class=" dflex" v-if="show4">
								<block v-if="data.pid!=null && data.pid!=0">
									<input :value="data.pname" disabled placeholder-class="placeholder" class></input>
									<input :placeholder="data.pid" name="distriUserPhone" :value="data.pid"
										placeholder-class="placeholder" class=" show"></input>
								</block>
								<input v-else placeholder="输入推荐人手机号" name="distriUserPhone" :value="data.pname"
									placeholder-class="placeholder"></input>
							</view>
						</view>
						<view v-if="show5" class="ipt">
							<picker mode="date" :value="data.birthday!=null?data.birthday:date" start="1930-01-01"
								end="2010-11-01" @change="bindDateChange">
								<view class="picker">
									<text>生日 </text><text
										style="color:black">{{data.birthday!=null?data.birthday:date}}</text>

								</view>
							</picker>
						</view>

						<view class="sex ipt" v-if="show6">性别<radio-group @change="radioChange">
								<radio v-for="(item, index) in item" :key="index" :value="item.value"
									:checked="item.checked" name="sex" class="rad">{{item.title}}</radio>
							</radio-group>
						</view>

					</view>
					<button class="btn mbglinear" :disabled="!buttonstyle"
						form-type="submit">{{distributionApply!='0' ?'立即申请':'完善信息'}}</button>
				</form>
				<view class="tip">重要提示：请务必输入您的真实信息</view>
			</view>
		</view>
		<view v-if="isno==true">
			<view class="cen">
				<image :src="picUrlss+'sqimg2.png'"></image>
				<view class="tiaojian">等待管理员设置开通！</view>
			</view>
		</view>
	</view>
</template>

<script>
	// promote/apply/apply.js
	// promote/team/team.js
	const app = getApp();
	const req = require("../../utils/request.js");

	export default {
		data() {
			return {
				picUrlss: req.public.picUrls,
				isShowPage: false,
				showform: false,
				buttonstyle: false,
				isshow: 0,
				showphone: true,
				disablephone: false,
				distriUserPhone: '',
				distributionNeedParam: '',
				distributionIsExamine: '',
				butstyle: true,
				msg: '',
				title: '',
				phone: '',
				info1: '',
				info2: '',
				info3: '',
				info4: '',
				distributionApply: '',
				isDistriUser: '',
				showform2: false,
				show: false,
				item: [{
					title: '男',
					value: '1'
				}, {
					title: '女',
					value: '2'
				}],
				sex: '',
				pid: '',
				date: '',
				isno: false,
				data: "",
				show2: false,
				show3: false,
				show4: false,
				show5: false,
				show6: false
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			// console.info(options);
			// if(options.type==2){
			//   this.setData({
			//     showform: false,
			//     buttonstyle:false
			//     });
			// }
			this.getmyinfo();

			let _ts = this;

			app.globalData.getCheckSessoin(json => {
				_ts.sessionKey = json.session_key;
			});
		},
		methods: {
			getmyinfo: function() {
				let that = this;
				req.getRequest('/api/user/info', {}, data => {
					// console.log(data);
					this.setData({
						isDistriUser: data.isDistriUser,
						pid: data.pid
					});

					if (data && data.mobile) {
						this.setData({
							phone: data.mobile
						});
					}

					if (data && data.pid) {
						this.setData({
							distriUserPhone: data.distriUserPhone
						});
					}

					if (data && data.gender) {
						let res = {};
						let items = this.item;

						for (let i = 0, len = items.length; i < len; ++i) {
							// console.log(items[i].value, data.gender);

							if (items[i].value == data.gender) {
								// items[i].checked = items[i].value === data.gender
								res['item[' + i + '].checked'] = true;
								that.setData(res);
							}
						}
					}

					this.setData({
						title: data.nickName,
						data: data
					});
					this.getdistri();
				});
			},

			getdistri() {
				req.postRequest('/api/distribution/config', {}, data => {
					// console.log(data.distributionApply + "==========================================");

					if (this.isDistriUser == 2 || data.distributionApply == 0) {
						uni.redirectTo({
							url: '/promote/team/team'
						});
					}

					if (this.isDistriUser == 1) {
						// wx.hideLoading();
						this.setData({
							isShowPage: true,
							showform2: true,
							showform: true
						});
					}

					if ((this.isDistriUser != 1 || this.isDistriUser != 2) && data.distributionApply != 0) {
						this.getDistribution(data);
					}
				});
			},

			getDistribution(data) {
				// wx.hideLoading();
				// console.log(data);
				/**
				 * 判断请求回来的data是不是null的 如果是就是管理员还没配置
				 */

				if (data == null) {
					this.setData({
						isno: true
					});
				} //判断分销商条件


				if (data.distributionType == "1") {
					this.setData({
						isShowPage: true,
						info1: "成为分销商需要购物满",
						info2: "，您当前已购物",
						info3: data.distributionValue + "元",
						info4: data.userValue == null ? 0 + "元" : data.userValue + "元"
					});
				} else if (data.distributionType == "2") {
					this.setData({
						isShowPage: true,
						info1: "成为分销商需要购物满",
						info2: "，您当前已购物",
						info3: data.distributionValue + "个订单",
						info4: data.userValue == null ? 0 + "个订单" : data.userValue + "个订单"
					});
				} else if (data.distributionType == "4") {
					this.setData({
						isShowPage: true,
						info1: "成为分销商需要推荐会员数量",
						info2: "，您当前推荐会员数量",
						info3: data.distributionValue + "人",
						info4: data.userValue == null ? 0 + "人" : data.userValue + "人"
					});
				}

				if (data.distributionType == "0") {
					this.setData({
						isShowPage: true,
						showform: true,
						buttonstyle: true,
						butstyle: false,
						distributionNeedParam: data.distributionNeedParam,
						distributionApply: data.distributionApply
					}); // if (data.distributionNeedParam == "0") {
					//   console.log('无需填写值自动去申请分销');
					//   this.submitApplymap({});
					// }
				} else if (data.distributionType == "1" || data.distributionType == "2" || data.distributionType == "4") {
					if (data.userValue != null && Number(data.userValue) >= Number(data.distributionValue)) {
						this.setData({
							isShowPage: true,
							showform: true,
							buttonstyle: true,
							butstyle: true,
							distributionApply: data.distributionApply,
							distributionIsExamine: data.distributionIsExamine,
							distributionNeedParam: data.distributionNeedParam
						});
					}
				} else if (data.distributionType == "3") {
					if (data.userValue != null) {
						var arr = data.distributionValue.split(",");
						var myarr = data.userValue.split(",");

						if (myarr.every(val => arr.includes(val))) {
							this.setData({
								isShowPage: true,
								showform: true,
								buttonstyle: true
							});
						}
					}
				}

				if (true) {
					let needparam = data.distributionNeedParam;
					// console.log(needparam);

					if (needparam.indexOf('1') != -1) {
						this.setData({
							show: true
						});
					}

					if (needparam.indexOf('2') != -1) {
						this.setData({
							show2: true
						});
					}

					if (needparam.indexOf('3') != -1) {
						this.setData({
							show3: true
						});
					}

					if (needparam.indexOf('4') != -1) {
						this.setData({
							show4: true
						});
					}

					if (needparam.indexOf('5') != -1) {
						this.setData({
							show5: true
						});
					}

					if (needparam.indexOf('6') != -1) {
						this.setData({
							show6: true
						});
					}
				}
			},

			getphonenumber(event) {
				const detail = event.detail;

				const _ts = this;

				if (!detail || !detail.encryptedData || !detail.iv) return false;
				req.postRequest('/api/weixin/mobile', {
					encryptedData: detail.encryptedData,
					iv: detail.iv,
					sessionKey: this.sessionKey
				}, res => {
					console.info(res);
					this.setData({
						phone: res.mobile,
						disablephone: true
					}); // _ts.getInfo();
				});
			},

			formSubmit(event) {
				console.log('>>>>>>>>>>>>>>>>>>>>>>>>>');
				let data = event.detail.value;
				let sfz = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
				let myreg = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
				// console.log(data.distriUserPhone, this.distriUserPhone);
				// console.log(data);

				if (this.show) {
					if (!data.title) return req.msg('请填写申请人姓名');
				}

				if (this.show2) {
					if (!data.phone) return req.msg('请填写手机号'); //判断电话是否正确

					if (!myreg.test(data.phone)) {
						return req.msg('请填写正确的手机号码！');
					}
				}

				if (this.show3) {
					//改动
					if (this.data.cardNo != null) {
						data.idCard = this.data.cardNo;
					}

					if (!data.idCard) return req.msg('请填写身份证信息'); //判断身份证是否正确

					if (!sfz.test(data.idCard)) {
						return req.msg('请填写正确的身份证信息！');
					}
				}

				if (this.show4) {
					data.type = '1';

					if (this.pid == "0"||this.pid == "" || this.pid == null) {
						data.type = '0';
						if (!data.distriUserPhone) return req.msg('请填写推荐人手机号');

						if (!myreg.test(data.distriUserPhone)) {
							return req.msg('请填写正确的推荐人手机号码！');
						}
					}
				}

				if (this.show5) {
					if (this.data.birthday == null) {
						data.birthday = this.date;
					} else {
						data.birthday = this.data.birthday;
					}

					if (data.birthday == '') return req.msg('请选择生日日期');
					// console.log(this.data.birthday);
				}

				if (this.show6) {
					if (this.data.gender == null) {
						data.sex = this.sex;
					} else {
						data.sex = this.data.gender;
					}

					if (data.sex == '') return req.msg('请选择性别');
				}

				this.submitApplymap(data);
			},

			//提交分销申请
			submitApplymap(data) {
				// console.log('提交申请数据' + JSON.stringify(data));
				req.postRequest('/api/distribution/applymap', data, dto => {
					// console.log(dto);

					if (dto.code == 0) {
						// this.setData({
						//   showform2:true,
						//   showform:true
						// })
						this.getmyinfo();
					} else {
						this.setData({
							msg: data.msg,
							isShowPage: true,
							showform: false
						});
					}
				});
			},

			radioChange(e) {
				// console.log('radio发生change事件，携带value值为：', e.detail.value);
				let items = this.item;

				for (let i = 0, len = items.length; i < len; ++i) {
					items[i].checked = items[i].value === e.detail.value;
				}

				this.setData({
					sex: e.detail.value
				});
				// console.log(this.sex);
			},

			bindDateChange: function(e) {
				// console.log('picker发送选择改变，携带值为', e.detail.value);
				this.setData({
					date: e.detail.value
				});
			}
		}
	};
</script>
<style>
	@import "./apply.css";
</style>