H5_module/promote/apply/apply.vue

<template>
	<view v-if="isShowView">
		<image src="../static/promote/images/info_ban.png" mode="widthFix" class="info_ban"></image>
		<view class="ifelse" v-if="distributionType != 0">
			<view class="tits">成为合伙人条件</view>
			<view class="iftit ddflex">
				<image src="../static/promote/images/info_ico.png"></image>
				<view class="fflex">
					{{ info1 }}
					<text>{{ distributionValue }}</text>
					{{ info2 }}
				</view>
			</view>
			<view class="leiji">
				{{ info3 }}
				<text>{{ userValue }}</text>
				{{ info2 }}，还差
				<text>{{ chaUserValue }}</text>
				{{ info2 }}
			</view>
			<view class="percent">
				<view :style="'width:' + percent + '%;'"></view>
			</view>
		</view>
		<view class="box">
			<view class="tit">请填写申请信息</view>
			<view class="form">
				<view class="li ddflex" v-if="showName">
					<view class="label">姓名</view>
					<input v-model="title" placeholder="请填写你的真实姓名" placeholder-class="placeholder" class="ipt fflex" />
				</view>
				<view class="li ddflex" v-if="showPhone">
					<view class="label">手机号</view>
					<view class="item active fflex" v-if="phone">{{ phone }}</view>
					<block v-else>
						<!-- #ifdef MP-WEIXIN -->
						<button hover-class="none" open-type="getPhoneNumber" @getphonenumber="getphonenumber"
							class="phone-btn fflex">请填写手机号</button>
						<!-- #endif -->
						<!-- #ifndef MP-WEIXIN -->
						<input v-model="phone" placeholder="请填写手机号" type="number" maxlength="11"
							placeholder-class="placeholder" class="ipt fflex" />
						<!-- #endif -->
					</block>
				</view>
				<view class="li ddflex" v-if="showCard">
					<view class="label">身份证号</view>
					<input v-model="cardNo" maxlength="18" placeholder="请填写你的身份证号" placeholder-class="placeholder"
						class="ipt fflex" />
				</view>
				<view class="li ddflex" v-if="showSex">
					<view class="label">性别</view>
					<view class="sex ddflex fflex">
						<view class="lis ddflex" @click="selGender(1)">
							<image :src="'../static/promote/images/' + (gender == 1 ? 'radio_h.png' : 'radio.png')"
								class="radio"></image>
							<image src="../static/promote/images/man.png" class="sex-ico"></image>
						</view>
						<view class="lis ddflex" @click="selGender(2)">
							<image :src="'../static/promote/images/' + (gender == 2 ? 'radio_h.png' : 'radio.png')"
								class="radio"></image>
							<image src="../static/promote/images/women.png" class="sex-ico"></image>
						</view>
					</view>
				</view>
				<view class="li ddflex" v-if="showRecommend">
					<view class="label">邀请人</view>
					<!-- label-spe -->
					<block v-if="this.pid != null && this.pid != 0"><input v-model="distriUserPhone" disabled="true"
							placeholder-class="placeholder" class="ipt fflex" /></block>
					<input v-model="distriUserPhone" placeholder="请填写邀请人手机号" placeholder-class="placeholder"
						class="ipt fflex" v-else />
				</view>
				<view class="li ddflex" v-if="showBirthday">
					<view class="label">出生年月</view>
					<view :class="'item fflex ' + (birthday ? 'active' : '')">
						<picker mode="date" :value="birthday" @change="bindDateChange">
							<view class="picker">{{ birthday ? birthday : '请选择出生年月' }}</view>
						</picker>
					</view>
					<image src="/static/pages/images/more.png" class="rico"></image>
				</view>
				<view class="li ddflex" v-if="showPosition">
					<view class="label">地址</view>
					<input v-model="position" placeholder="请填写地址" placeholder-class="placeholder" class="ipt fflex" />
				</view>
			</view>
		</view>
		<view class="bot">
			<view class="agree ddflex">
				<view class="dflex" @click="agree()">
					<image :src="'../static/promote/images/' + (isAgree ? 'gou_h1.png' : 'gou.png')"></image>
					我已阅读并了解
				</view>
				<view class="ddflex fflex">
					<navigator url="/mine/page/page?title=申请成为合伙人协议&isGroup=true" hover-class="none">《申请成为合伙人协议》
					</navigator>
				</view>
			</view>
			<view class="btn" @click="submit()">申请成为合伙人</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 {
				isShowView: false,
				picUrlss: req.public.picUrls,
				isDistriUser: '',
				distributionType: '',
				distributionValue: '',
				title: '',
				phone: '',
				cardNo: '',
				gender: 1,
				pid: '',
				distriUserPhone: '',
				birthday: '',
				position: '', //地区
				isAgree: false,
				info1: '',
				info2: '',
				userValue: 0,
				chaUserValue: 0,
				percent: 0,
				info3: '',
				showName: false,
				showPhone: false,
				showCard: false,
				showRecommend: false,
				showBirthday: false,
				showSex: false,
				showPosition: false,
				distributionIsExamine: ''
			};
		},
		onLoad: function(options) {
			let _ts = this;
			app.globalData.getCheckSessoin(json => {
				_ts.sessionKey = json.session_key;
			});
		},
		onShow() {
			this.getmyinfo();
		},
		methods: {
			getmyinfo: function() {
				let that = this;
				req.getRequest('/api/user/info', {}, data => {
					// console.log(data);
					this.isDistriUser = data.isDistriUser;
					this.pid = data.pid;
					this.title = data.nickName;
					if (data && data.mobile) {
						this.phone = data.mobile;
					}
					if (data && data.cardNo) {
						this.cardNo = data.cardNo;
					}
					if (data && data.gender) {
						this.gender = data.gender == 2 ? 2 : 1;
					}
					if (data && data.pid) {
						this.distriUserPhone = data.pid;
						this.pid = data.pid;
					}
					if (data && data.birthday) {
						this.birthday = data.birthday;
					}
					// this.data = data;
					that.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'
					// 	});
					// }
					this.distributionIsExamine = data.distributionIsExamine;
					this.distributionType = data.distributionType;
					this.getDistribution(data);
					this.isShowView = true;
				}, true);
			},

			getDistribution(data) {
				let that = this;
				// wx.hideLoading();
				// console.log(data);
				/**
				 * 判断请求回来的data是不是null的 如果是就是管理员还没配置
				 */
				if (data == null) {
					this.setData({
						isno: true
					});
				} //判断分销商条件
				that.distributionValue = '≥' + data.distributionValue;
				that.userValue = data.userValue == null ? 0 : data.userValue;
				let cha = parseFloat(data.distributionValue) - parseFloat(that.userValue);
				that.chaUserValue = cha >= 0 ? cha : 0;
				let percent = parseInt((that.userValue / data.distributionValue) * 100);
				that.percent = percent <= 100 ? percent : 100;
				if (data.distributionType == '1') {
					that.info1 = '需要订单总金额';
					that.info2 = '元';
					that.info3 = '累计完成金额';
				} else if (data.distributionType == '2') {
					that.info1 = '需要订单总数量';
					that.info2 = '单';
					that.info3 = '累计完成';
				} else if (data.distributionType == '4') {
					that.info1 = '推荐用户注册数';
					that.info2 = '人';
					that.info3 = '累计邀请注册';
				}
				if (true) {
					let needparam = data.distributionNeedParam;
					// console.log(needparam);
					if (needparam.indexOf('1') != -1) {
						this.showName = true;
					}
					if (needparam.indexOf('2') != -1) {
						this.showPhone = true;
					}
					if (needparam.indexOf('3') != -1) {
						this.showCard = true;
					}
					if (needparam.indexOf('4') != -1) {
						this.showRecommend = true;
					}
					if (needparam.indexOf('5') != -1) {
						this.showBirthday = true;
					}
					if (needparam.indexOf('6') != -1) {
						this.showSex = true;
					}
					if (needparam.indexOf('7') != -1) {
						this.showPosition = 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: _ts.sessionKey
					},
					res => {
						let userInfo = req.getStorage('userInfo');
						userInfo.mobile = res.mobile;
						req.setStorage('userInfo', userInfo);
						_ts.phone = res.mobile;
					}
				);
			},
			selGender(idx) {
				this.gender = idx;
			},
			bindDateChange(e) {
				this.birthday = e.detail.value;
			},
			agree() {
				this.isAgree = !this.isAgree;
			},

			submit() {
				let data = {};
				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}$/;
				if (this.showName) {
					if (!this.title) return req.msg('请填写申请人姓名');
					data.title = this.title;
				}
				if (this.showPhone) {
					if (!this.phone) return req.msg('请填写手机号'); //判断电话是否正确
					if (!myreg.test(this.phone)) {
						return req.msg('请填写正确的手机号码！');
					}
					data.phone = this.phone;
				}
				if (this.showCard) {
					if (!this.cardNo) return req.msg('请填写身份证信息'); //判断身份证是否正确
					if (!sfz.test(this.cardNo)) {
						return req.msg('请填写正确的身份证信息！');
					}
					data.cardNo = this.cardNo;
				}
				if (this.showRecommend) {
					// data.type = '1';
					if (this.pid == '0' || this.pid == '' || this.pid == null) {
						// data.type = '0';
						if (!this.distriUserPhone) return req.msg('请填写推荐人手机号');
						if (!myreg.test(this.distriUserPhone)) {
							return req.msg('请填写正确的推荐人手机号码！');
						}
						data.distriUserPhone = this.distriUserPhone;
					} else {
						data.distriUserPhone = this.pid;
					}
				}
				if (this.showBirthday) {
					if (this.birthday == '') return req.msg('请选择生日日期');
					data.birthday = this.birthday;
				}
				if (this.showPosition) {
					if (this.position == '') return req.msg('请填写地区');
					data.address = this.position;
				}

				if (this.showSex) {
					data.sex = this.gender;
				}
				if (!this.isAgree) return req.msg('请阅读并同意合伙人用户协议');
				this.submitApplymap(data);
			},
			//提交分销申请
			submitApplymap(data) {
				// console.log('提交申请数据' + JSON.stringify(data));
				req.postRequest('/api/distribution/apply?v=1.6', data, dto => {
					// console.log(dto);
					if (this.distributionIsExamine == 0) {
						uni.navigateBack();
					} else {
						uni.redirectTo({
							url: '/promote/status/status'
						});
					}
				});
			}
		}
	};
</script>
<style>
	@import './apply.css';
</style>