dandelionPlatformToB-uni-v3/root/bind/applyForm.vue

<template>
	<view class="p-root-bind-applyForm g_w_all g_kuaishou" style="min-height: 100vh;background-color: #ededed;">
		<view v-show="isloading">
			<rh-loading></rh-loading>
		</view>
		<view v-show="!isloading">
			<view class="g_h_10"></view>

			<div class="m-info" >
				<div class="g_flex_row_center">
					<img :src="info.logo" alt="" style="width: 64px; height: 64px;border-radius: 50%;" />
				</div>
				<div class="g_flex_row_center" style="margin:6px 0 4px;color:#333;font-size: 18px;">
					{{ info.agencyName }}
				</div>
				<!-- <div style="color:#999999;font-size: 14px;">
					{{ info.nickname }}
				</div> -->
			</div>

			<div style="margin: 24px auto 0;width: calc(100% - 20px);">
				<div style="color:#999;font-size: 12px;padding-left: 10px;margin-bottom: 4px;">申请人基本信息：</div>
				<div class="apply-item g_flex_row_between" style="height: 56px;background-color: #fff;border-radius: 8px;">
					<div class="g_flex_none g_h_all g_flex_column_center" style="color:#000;font-size: 17px;padding-left: 10px;">
						申请人
					</div>
					<div class="g_flex_1 g_h_all g_flex_column_center" style="margin-left: 12px;padding-right: 10px;position: relative;">
						<div class="g_flex_row_end">
							<div class="g_flex_column_center g_flex_1">
								<div class="g_flex_row_end">
									<img :src="newForm.wxavatar" alt="" style="width: 24px; height: 24px;border-radius: 50%;" />
								</div>
							</div>
							<div class="g_flex_column_center g_flex_none" style="margin: 0 4px;">
								<div style="color: #999;font-size: 17px;max-width: calc(100vw - 160px);" class="g_ell_1"
									   :style="{
											'color':foa == 1 ? '#666' : '#999'
										 }"
								>
									{{ newForm.wxname }}
								</div>
							</div>
							<div class="g_flex_column_center g_flex_none" v-if="foa != 1">
								<i class="iconfont icon-gengduo11 g_c_c"></i>
							</div>
						</div>
						<button open-type="getUserInfo" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;" @getuserinfo="getUserInfo" v-if="foa != 1"></button>
					</div>
				</div>
			</div>

			<div style="margin: 10px auto 0;width: calc(100% - 20px);">
				<div class="apply-item" style="height: 56px;background-color: #fff;border-radius: 8px 8px 0 0;padding: 0 5px;">
					<div class="g_flex_row_between" style="border-bottom: 1px solid #eee;height: 100%;">
						<div class="g_flex_none g_h_all g_flex_column_center" style="color:#333;font-size: 17px;padding-left: 5px;">
							企业简称
						</div>
						<div class="g_flex_1 g_h_all g_flex_column_center" style="margin-left: 12px;padding-right: 10px;">
							<u-input :custom-style="{ fontSize: '17px' }" 
											:clearable="false" 
											:password-icon="false" 
											placeholder="例如：上海英才劳务" 
											input-align="right" 
											class="g_text_r" 
											placeholder-style="color:#999;font-size:17px;" 
											v-model="newForm.companyName" 
											v-if="foa != 1"
							/>
							<div v-if="foa == 1" style="color: #666;font-size: 17px;text-align: right;">{{ newForm.companyName }}</div>
						</div>
					</div>
				</div>
				<div class="apply-item g_flex_row_between" style="height: 56px;background-color: #fff;border-radius: 0 0 8px 8px;padding: 0 5px;">
					<div class="g_flex_none g_h_all g_flex_column_center" style="color:#333;font-size: 17px;padding-left: 5px;">
						联系电话
					</div>
					<div class="g_flex_1 g_h_all g_flex_column_center" style="margin-left: 12px;padding-right: 10px;">
						<u-input :custom-style="{ fontSize: '17px' }" 
						         type="number"
										 :clearable="false" 
										 :password-icon="false" 
										 placeholder="请填写你的电话" 
										 input-align="right" 
										 class="g_text_r" 
										 placeholder-style="color:#999;font-size:17px;" 
										 v-model="newForm.phone" 
										 maxlength="11" 
										 v-if="foa != 1"
						/>
							<div v-if="foa == 1" style="color: #666;font-size: 17px;text-align: right;">{{ newForm.phone }}</div>
					</div>
				</div>
			</div>

			<div style="margin: 10px auto 40px;width: calc(100% - 20px);">
				<div style="background-color: #fff;border-radius: 8px;height: 88px;position: relative;" class="g_flex_row_center">
					<div style="width: calc(100% - 20px);margin: 0 auto;" v-if="foa != 1">
						<u-input v-model="newForm.remark" 
									 class="g_flex_1 g_ml_10" 
									 maxlength="30" 
									 type="textarea" 
									 placeholder="申请备注…" 
									 placeholder-style="color:#999;font-size:16px;" 
									 :clearable="false" 
									 :customStyle="{ fontSize: '16px' }" 
									 style="position: relative;top: -12px;"
									 v-if="foa != 1"
						/>
					</div>
					<div style="position: absolute;right: 16px;bottom: 16px;color: #333;font-size: 12px;" v-if="foa != 1">
						{{ newForm.remark.length }}/ 30
					</div>
					<div v-if="foa == 1" style="color: #666;font-size: 17px;text-align: left;width: 100%;padding: 14px 10px;">{{ newForm.remark }}</div>
				</div>
				<div style="margin: 4px auto;width: calc(100% - 20px);color:#999;font-size: 12px;">
					设置后系统将自动创建团队并关注该发单号，您作为创建人可在我的页面管理团队。
				</div>
			</div>


			
			<view class="g_flex_row_center">
				<view class="g_w_240 g_h_40 g_flex_c g_radius_20 g_c_f g_fs_17" 
							:class="info.recordStatus == 1 || info.recordStatus == 2 ? 'g_bg_e g_c_9' : 'g_bg_main'" 
							:style="info.recordStatus == 1 || info.recordStatus == 2 ? 'pointer-events: none;background-color: #999;' : ''" 
							hover-class="thover" 
							@click="handleSubmit"
				>
					{{ info.recordStatus == 1 ? "已提交" : info.recordStatus == 2 ? "已关注" : "申请关注" }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	onReady() {
		this.G.setNavStyle();
	},
	onShareAppMessage() {
		return this.G.shareFun();
	},
	data() {
		return {
			newForm:{
				wxname:'微信昵称',
				wxavatar:'https://bocai-cms.oss-cn-beijing.aliyuncs.com/web-resource/pugongying/default.svg',
				companyName: "",
				phone: "",
				remark:''
			},
			isloading: true,
			wxCode: "",
			info: {
				logo: "",
				agencyName: "",
				jobNum: 0,
				agencyId: 0,
			},
			remark: "",
			form: 1,
			customButton: {
				width: "184px",
				height: "40px",
				borderRadius: "20px",
				backgroundColor: "#00B666",
				color: "#fff",
				fontSize: "16px",
			},

			btnSpeed: -1, // -1 默认 0 按下 1请求中 2请求后
			foa:2
		};
	},
	onLoad(options) {
		console.log("申请关注页面：", options);
		let that = this;
		if (options.scene) {
			var sceneStr = decodeURIComponent(options.scene);
			var sceneJson = this.G.sceneToJson(sceneStr);
			console.log("二维码参数", sceneJson);
			if(sceneJson.id){
				this.wxCode = sceneJson.id.split('_')[0];
			}else{
				this.wxCode = '';
			}
		} else {
			this.wxCode = options.code;
			this.form = options.form;
			that.foa = options.foa;
			
			if(options.foa == 1 && uni.getStorageSync("applyfoemdata")){
				let _datas = JSON.parse(uni.getStorageSync("applyfoemdata"));
				if(_datas){
					that.newForm = {
						wxname:_datas.nickName || '微信昵称',
						wxavatar:_datas.avatar || 'https://bocai-cms.oss-cn-beijing.aliyuncs.com/web-resource/pugongying/default.svg',
						companyName: _datas.agencyName,
						phone: _datas.tel,
						remark:_datas.remark,
					};
					that.info.logo = _datas.logo;
					that.info.recordStatus = 1;
					that.info.agencyName = _datas.agencyName;
				}
			}else{
				this.wxCode = options.code;
				this.form = options.form;
			}
		}
	},
	onShow() {
		let that = this;
		if(that.foa != 1){
			that.init();
		}else{
			that.isloading = false;
		}
	},
	methods: {
		getUserInfo(e) {
			let that = this;
			console.log("获取用户信息：", e);
			if (e.detail.userInfo) {
				// 用户同意授权
				that.newForm.wxname = e.detail.userInfo.nickName;
				that.newForm.wxavatar = e.detail.userInfo.avatarUrl || 'https://bocai-cms.oss-cn-beijing.aliyuncs.com/web-resource/pugongying/default.svg';
			} else {
				// 用户拒绝授权
				uni.showModal({
					title: '提示',
					content: '您已拒绝授权，将无法获取微信昵称信息，请重新授权',
					showCancel: false,
					confirmText: '知道了',
					success: function(res) {
						console.log('用户已拒绝授权');
					}
				});
			}
 		},
		init() {
			let that = this;
			that.isloading = true;
			that.G.Get(
				that.api.bind_getSubscribeDetail,
				{
					inviteCode: that.wxCode,
				},
				(res) => {
					console.log("企业基本信息：", res);
					/* 
					 * 0 未申请
					 * 1 申请中
					 * 2 已删除
					 * 3 已过期
					 * 4 已删除
					*/
					if(res.recordStatus == 0){
						that.info = res;
						setTimeout(() => {
							that.isloading = false;
						}, 100);
					}else{
						setTimeout(() => {
							that.isloading = false;
							uni.switchTab({
								url: '/pages/home/index',
							});
						}, 500);
					}
				}
			);
		},
		handleSubmit() {
			let that = this,
			    params = {};
			if (that.info.recordStatus == 1 || that.info.recordStatus == 2) {
				return false;
			}
			if(!that.newForm.wxavatar){
				uni.showToast({
					title: '请授权获取用户信息',
					icon: 'none'
				});
				return false;
			}
			if(!that.newForm.wxname){
				uni.showToast({
					title: '请输入微信昵称',
					icon: 'none'
				});
				return false;
			}
			if(!that.newForm.companyName){
				uni.showToast({
					title: '请输入企业名称',
					icon: 'none'
				});
				return false;
			}
			if(!that.newForm.phone){
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				});
				return false;
			}
			params = {
				avatar:that.newForm.wxavatar,
				nickName:that.newForm.wxname,
				agencyId: that.info.agencyId,
				agencyName: that.newForm.companyName,
				source: that.form,
				tel: that.newForm.phone,
				remark: that.newForm.remark,
			};
			console.log("提交参数：", params);
			// 按下
			that.btnSpeed = 0;
			// 请求中
			that.btnSpeed = 1;
			uni.showLoading({
				title: "正在发送",
			});
			setTimeout(() => {
				uni.hideLoading();
				that.G.Get(
					that.api.bind_subscribeSubmit + "/" + that.info.agencyId,
					params,
					(res) => {
						// 请求后
						that.btnSpeed = 2;
						uni.showToast({
							title: "提交成功",
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					}
				);
			}, 500);
		},
		goPage($path) {
			uni.navigateTo({
				url: $path,
			});
		},
	},
};
</script>

<style lang="scss">
.custom-button {
	width: 184px;
	height: 40px;
	border-radius: 20px;
	background-color: #00b666;
	color: #fff;
	font-size: 16px;
}
.p-root-bind-applyForm{
	.m-info{
		padding: 20px;
		background-color: #fff;
		border-radius: 8px;
		width: calc(100vw - 20px);
		margin: 0 auto;
	}
}
.g_w_240{
	width: 240px;
	height: 42px !important;
	line-height: 42px;
	border-radius: 25px;
}
</style>