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 || 'https://bocai-cms.oss-cn-beijing.aliyuncs.com/web-resource/pugongying/default.svg'" 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.ffullName }}
				</div>
				<div style="color:#999999;font-size: 14px;">
					{{ info.ddsec }}
				</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_row_between" style="border-bottom: 1px solid #eee;height: 100%;width: 100%;">
						<div class="g_flex_none g_h_all g_flex_column_center labes" style="color:#333;font-size: 17px;padding-left: 5px;position: relative;">
							申请人
						</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.wxname" 
											type="nickname"
											v-if="info.recordStatus != 1"
							/>
							<div v-if="info.recordStatus == 1" style="color: #666;font-size: 17px;text-align: right;">{{ newForm.wxname }}</div>
						</div>
					</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 labes" style="color:#333;font-size: 17px;padding-left: 5px;">
							企业logo
						</div>
						<div class="g_flex_1 g_h_all g_flex_column_center" style="margin-left: 12px;padding-right: 10px;">
							<div class="g_flex_row_end" style="width: 100%;" v-if="info.recordStatus != 1">
								<button class="avatar-wrapper-btn g_flex_row_end" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" 
											  style="width:100%;height:40px;position: relative;"
								>
									<img :src="newForm.wxavatar" alt="" style="width: 40px; height: 40px; border-radius: 50%;position: absolute;right: 0;top:50%;transform: translateY(-50%)" />
								</button>
							</div>
							<div class="g_flex_row_end" style="width: 100%;" v-if="info.recordStatus == 1">
								<img :src="newForm.wxavatar" alt="" style="width: 40px; height: 40px; border-radius: 50%;" />
							</div>
						</div>
					</div>
				</div>
				<div class="apply-item" style="height: 56px;background-color: #fff;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 labes" 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="info.recordStatus != 1"
							/>
							<div v-if="info.recordStatus == 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 labes" 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="info.recordStatus != 1"
						/>
							<div v-if="info.recordStatus == 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="info.recordStatus != 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="info.recordStatus != 1"
						/>
					</div>
					<div style="position: absolute;right: 16px;bottom: 16px;color: #333;font-size: 12px;" v-if="info.recordStatus == 1">
						{{ newForm.remark.length }}/ 30
					</div>
					<div v-if="info.recordStatus == 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' : ''" 
							:style="info.recordStatus == 1 || info.recordStatus == 2 ? 'pointer-events: none;background-color: #999;' : {'background-color': themeColor}" 
							hover-class="thover" 
							@click="handleSubmit"
				>	
					<div class="g_flex_row_center">
						<view class="g_flex_column_center g_mr_4" v-if="btnloading">
							<u-loading mode="flower"></u-loading>
						</view>
						<div class="">
							{{ info.recordStatus == 1 ? "已提交" : info.recordStatus == 2 ? "已关注" : "申请关注" }}
						</div>
					</div>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	onReady() {
		this.G.setNavStyle();
	},
	onShareAppMessage() {
		return this.G.shareFun();
	},
	data() {
		return {
			themeColor: getApp().globalData.themeColor,
			btnloading:false,
			newForm:{
				wxname:'',
				wxavatar:'https://bocai-cms.oss-cn-beijing.aliyuncs.com/web-resource/pugongying/default.svg',
				companyName: (uni.getStorageSync("apply-userinfo") && uni.getStorageSync("apply-userinfo").fullName) || '',
				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,
			chooseAvatarLoading: false,
		};
	},
	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.applyFullName,
						phone: _datas.tel,
						remark:_datas.remark || '无申请说明',
					};
					that.info.logo = _datas.logo;
					that.info.recordStatus = 1;
					that.info.agencyName = _datas.agencyName;
					that.info.agencySlogan = _datas.agencySlogan;
					that.info.ddsec = uni.getStorageSync("miniApp-info").desp;
					that.info.ffullName = uni.getStorageSync("miniApp-info").fullName || uni.getStorageSync("miniApp-info").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: {
		onChooseAvatar(e) {
			let that = this;
			console.log("onChooseAvatar", e);
			if (this.chooseAvatarLoading) return;
			that.chooseAvatarLoading = true;
			that.newForm.wxavatar = e.detail.avatarUrl;
			setTimeout(() => {
				that.chooseAvatarLoading = false;
			}, 1000);
		},
		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){
						res.ddsec = uni.getStorageSync("miniApp-info").desp;
						res.ffullName = uni.getStorageSync("miniApp-info").fullName || uni.getStorageSync("miniApp-info").agencyName;
						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.wxname){
				uni.showToast({
					title: '请授权微信名字',
					icon: 'none'
				});
				return false;
			}
			if(!that.newForm.wxavatar || that.newForm.wxavatar == 'https://bocai-cms.oss-cn-beijing.aliyuncs.com/web-resource/pugongying/default.svg'){
				uni.showToast({
					title: '请上传企业logo',
					icon: 'none'
				});
				return false;
			}
			if(!that.newForm.companyName){
				uni.showToast({
					title: '请输入企业简称',
					icon: 'none'
				});
				return false;
			}
			if(!/^1[3-9]\d{9}$/.test(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,
			};
			// 按下
			that.btnSpeed = 0;
			// 请求中
			that.btnSpeed = 1;
			uni.showLoading({
				title: "正在发送",
			});
			that.btnloading = true;
			that.G.uploadFile(that.newForm.wxavatar, (res) => {
				uni.hideLoading();
				params.avatar = res;
				console.log("提交参数：", params);
				that.G.Get(
					that.api.bind_subscribeSubmit + "/" + that.info.agencyId,
					params,
					(res) => {
						// 请求后
						that.btnSpeed = 2;
						uni.showToast({
							title: "提交成功",
						});
						setTimeout(() => {
							that.newForm.remark = '无申请说明'
							that.info.recordStatus = 1;
							that.btnloading = false;
						}, 1500);
					}
				)
			});
		},
		goPage($path) {
			uni.navigateTo({
				url: $path,
			});
		},
	},
};
</script>

<style lang="scss">
.avatar-wrapper-btn {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  line-height: 1;
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-wrapper-btn::after {
  border: none;
}
.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;
}

.labes{
	position: relative;
	&::after{
		content: "*";
    position: absolute;
    top: 14px;
    font-size: 14px;
    color: red;
    right: -6px;
	}
}
</style>