GuangYuYuan-shanghu/src/pages/join/staff.vue

<template>
	<view class="join">
		<view class="banner">
			<image src="/static/login/banner.png" mode=""></image>
		</view>
		<view class="top">
			<view v-if="ShopInfo.merchant.auditStatus == 1 || ShopInfo.merchant.auditStatus == 2" class="checkBox"
				:style="{
					borderColor: ShopInfo.merchant.auditStatus == 1 ? '#F76560' : '#FF7D00',
					color: ShopInfo.merchant.auditStatus === 1 ? '#F53F3F' : '#FF7D00',
					background: ShopInfo.merchant.auditStatus === 1 ? '#FFF5F5' : '#FFF8EC'
				}">
				<view class="checkStatus">审核中</view>
				<view class="text">入驻审核中，审核结果将会在9个工作日通知您</view>
			</view>
			<view class="title">
				<view class="lineIcon">
					<image src="/static/login/lineIcon.png" mode=""></image>
				</view>
				<view style="position: relative;">申请入驻</view>

			</view>
			<view class="content">
				<view class="input-box">
					<u-input :disabled="ShopInfo.merchant.auditStatus == 1 ? true : false" v-model="form.teName"
						border="none" placeholder="输入真实姓名" class="input-item"
						placeholder-style="font-weight: 400;font-size: 30rpx;color: #C9CDD4;text-align: right;">
						<template slot="prefix">
							<view class="label">
								<text>姓名</text>
							</view>
						</template>
					</u-input>
				</view>
				<view class="input-box service">
					<view class="label">性别</view>
					<u-radio-group v-model="form.teSex" :disabled="ShopInfo.merchant.auditStatus == 1 ? true : false">
						<u-radio activeColor="#333335" v-for="(item, index) in sex" :key="index" :name="item.value"
							:label="item.label" :customStyle="{ margin: '0 12rpx' }" />
					</u-radio-group>
				</view>


				<view class="input-box">
					<u-input :disabled="ShopInfo.merchant.auditStatus == 1 ? true : false" v-model="form.tePhone"
						border="none" maxlength='11' placeholder="请输入手机号" class="input-item"
						placeholder-style="font-weight: 400;font-size: 30rpx;color: #C9CDD4;text-align: right;">
						<template slot="prefix">
							<view class="label">
								<text>手机号</text>
							</view>
						</template>
					</u-input>
				</view>
				<view class="input-box" v-if="this.ShopInfo.merchant.auditStatus != 1">
					<u-input :disabled="ShopInfo.merchant.auditStatus == -1 ? true : false" v-model="form.phoneMsg"
						type="number" border="none" maxlength="6" placeholder="输入短信验证码"
						placeholder-style="font-weight: 400;font-size: 30rpx;color: #C9CDD4;text-align: right;margin-right: 42rpx;"
						class="input-item code-input">
						<template slot="prefix">
							<view class="label">
								<text>验证码</text>
							</view>
						</template>
					</u-input>
					<view class="code-btn" :class="{ disabled: !canGetCode }" @click="getCode">
						<text v-if="!CodeSendNum" @click="getCode">发送验证码</text>
						<view v-else>
							<text v-if="startCountdownFlag">{{ countdown }}s</text>
							<text @click="agginGetCode">重新获取</text>
						</view>
						<!-- <text v-if="countdown === 60">发送验证码</text>
          				<text v-else>{{ countdown }}s 后重新获取</text> -->
					</view>
				</view>

				<view class="input-box">
					<view class="label" style="width: 50%;">合作意向城市</view>
					<view class="inp select" @click="ShopInfo.merchant.auditStatus == 1 ? show = false : show = true">
						<view class="text" :style="{ color: form.provinceName ? '#4E5969' : '#C9CDD4' }">{{
							form.provinceName || '选择城市' }}</view>
						<img src="/static/login/arrowIcon.png" alt="" />
					</view>

					<u-popup :show="show" mode="bottom" border-radius="16rpx 16rpx 0 0"
						:style="{ height: '600rpx', zIndex: 9999, }">

						<u-picker :show="show" confirmColor="#fff" title="合作意向城市" :columns="[cityList]" keyName="label"
							:style="{ zIndex: 0, }" @confirm="onSelect" @cancel="cancel"></u-picker>
					</u-popup>
				</view>
				<view class="input-box service">
					<view class="label">开通服务</view>
					<u-radio-group v-model="form.openService" :disabled="ShopInfo.merchant.auditStatus == 1 ? true : false">
						<u-radio activeColor="#333335" v-for="(item, index) in serveArr" :key="index"
							:name="item.dictValue" :label="item.dictLabel" :customStyle="{ fontSize: '20rpx' }" />
					</u-radio-group>
				</view>
				<!-- :width="80" :height="80"  -->
				<view class="updata">
					<view class="name">形象照</view>

					<view class="images">
						<Upload :disabled="ShopInfo.merchant.auditStatus == 1 ? true : false" :maxCount="2"
							:fileList="avatarList" @fileList="onUpload($event)"
							 />
					</view>
					<view class="title">
						请上传本人2张近期照片，图片大小不超过2M(建议清晰正脸照)
					</view>
				</view>
				<!-- <view class="updata" style="border:0;">
					<view class="name">工作形象照</view>
					<view class="title">
						请上传本人近期照片，图片大小不超过10M (建议清晰正脸照)
					</view>
					<view class="images">
						<Upload
							:maxCount="2"
							@fileList="onUpload1($event, 'cImgList')"
						/>
					</view>
				</view> -->
			</view>


		</view>
		<view class="submits" v-if="this.ShopInfo.merchant.auditStatus != 1">

			<view class="btn" @click="submit">
				提交
			</view>
			<text>平台不会通过任何渠道泄漏你的个人信息，请放心输入</text>
		</view>
		<view class="keFu" @click="callKeFu">
			<view class="keFuContent">
				<view style="display: flex;justify-content: center;align-items: center;margin-top: 5rpx;">
					<img src="/static/login/serviceIcon.png" style="width: 44rpx;height: 44rpx;" />
				</view>
				<view style="font-weight: 400;font-size: 20rpx;color: #1D2129;text-align: center;margin-top: -10rpx;">客服
				</view>
			</view>
		</view>


		<!-- 图形验证码弹窗 -->
		<u-popup :show="showCaptcha" mode="center" border-radius="12">
			<view class="captcha-box">
				<view class="captcha-title">
					<view>请输入下方图形验证码</view>
					<u-icon custom-style="position: relative;left:90rpx ;" name="close" color="#C9CDD4" size="20"
						@click="showCaptcha = false"></u-icon>
				</view>
				<view style="padding: 0 48rpx;margin-top: 48rpx;">
					<view
						style="display: flex;justify-content: space-between;height: 106rpx;border-bottom: 1rpx solid #E7E7E7;">

						<!-- 验证码输入框，唤起全字符键盘 -->
						<u-input v-model="imgCode" placeholder="请输入图形验证码" :focus="showCaptcha" type="text" maxlength="4"
							border="none"
							placeholder-style="font-weight: 400;font-size: 30rpx;color: #C9CDD4;"></u-input>
						<!-- 图形验证码图片，点击刷新 -->
						<image :src="captchaImg" @click="refreshCaptcha" class="captcha-img"></image>
					</view>
					<view class="text">看不清？ 换一张</view>
					<u-button class="submitImgCode" @click="submitImgCode" block>确定</u-button>

				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>

import {
	getCityList, technicianApply, sendMsg, getServiceCategoryList, getTechnician
} from '@/api/index';
import {
	captchaImage
} from '@/api/newLogin';

import Upload from '@/components/upload/index.vue';
export default {
	components: {
		Upload
	},
	computed: {
		canGetCode() {
			return !this.isSendingCode && this.countdown === 60
		},
		// canBind() {
		// 	return this.phoneMsg && this.phoneMsg.length === 6 && !this.isBinding
		// }
	},
	data() {
		return {
			//auditStatus 审核状态：-1-申请入住,0-待入驻，1-待审核，2-审核通过，3-审核驳回"
			status: 1,
			imgCode: '',        // 用户填写的图形验证码
			captchaImg: '',     // 图形验证码图片地址
			captchaKey: '',     // 后端返回验证码标识
			showCaptcha: false,
			startCountdownFlag: false,
			timer: null,
			isSendingCode: false,
			countdown: 60,
			cityList: [],
			show: false,
			isLogin: false,
			type: 'text',
			isShow: false,
			sex: [
				{
					value: 1,
					label: '男'
				},
				{
					value: 0,
					label: '女'
				}
			],
			serveArr: [
				// {
				// 	value: 1,
				// 	label: '上门按摩'
				// },
				// {
				// 	value: 2,
				// 	label: '同城陪玩'
				// }
			],
			avatarList: [],
			CodeSendNum: 0,
			form: {
				provinceCode: '',
				provinceName: '',
				cityCode: '',
				cityName: '',
				districtCode: '',
				districtName: '',
				cOpenid: uni.getStorageSync('wx_copenid'),
				teName: '',
				//cNickName: '',
				//cPortrait: '',
				tePhone: '',
				phoneMsg: '',
				//cJianjie: '',
				teSex: null,
				openService: null,
				//cSfzImg: [],
				avatar: '',
				//latitude: '',
				//longitude: '',
				//name: '0',
				//cOpenId: '',
				//cBhList: '',
				//teAddress: ''
			},
			token: '',
			uuid: '',
			ShopInfo: {merchant:{auditStatus: 0}}
		}
	},
	onLoad(options) {
		console.log(options, '66666')
		if (options.ShopInfo) this.ShopInfo = JSON.parse(options.ShopInfo)
		console.log(this.ShopInfo, 'ShopInfo')
		this.isLogin = !!uni.getStorageSync('access-token');
	},
	onShow() {
		this.getServiceCategoryList()
		this.getCity()

		//this.getinfo()
		// let city = uni.getStorageSync('selectCity')
		// let lastCity = city.charAt(city.length - 1)
		// lastCity == '市' ? this.form.city = city.slice(0, -1) : this.form.city = city
		// this.form.city = uni.getStorageSync('selectCity')
	},
	methods: {
		// upload事件
		onUpload1(e, t) {
			this.form[t] = e.map(item => item.url).join()
		},
		//查询商户信息 auditStatus 审核状态：-1-申请入住,0-待入驻，1-待审核，2-审核通过，3-审核驳回"
		getTechnicianFun() {
			let openid = uni.getStorageSync('wx_copenid')
			getTechnician({ openid: openid }).then(res => {
				console.log(res)
				if (res.data.code == 200) {
					if (!res.data.result) return
					this.ShopInfo = res.data.result

					if (res.data.result.auditStatus == -1) {
						uni.navigateTo({
							url: '/pages/join/staff'
						})
					} else if (res.data.result.auditStatus == 0) {
						let str = uni.$u.queryParams(res.data.result)
						uni.navigateTo({ url: `/pages/join/staff${str}` })
					}

				}
			})
		},
		//图形验证码提交
		submitImgCode() {
			if (!this.imgCode) {
				uni.showToast({
					title: '请输入验证码',
					icon: 'none'
				})
				return
			}
			sendMsg33333({ uuid: this.uuid, imgCode: this.imgCode }).then(res => {
				console.log(res)
				if (res.data.code == 200) {
					this.showCaptcha = false
					this.getCode()
				}


			})

		},


		//查询开通服务接口
		getServiceCategoryList() {
			getServiceCategoryList('service_tag').then(res => {
				this.serveArr = res.data.data
				console.log(this.serveArr)
			})
		},
		//重新获取验证码
		agginGetCode() {
			if (!this.form.tePhone) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				})
				return
			}

			if (!/^1[3456789]\d{9}$/.test(this.form.tePhone)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				return
			}
			captchaImage().then(res => {
				console.log(res)
				if (res.data.code == 200) {
					this.uuid = res.data.uuid
				}
			})
			this.showCaptcha = true

		},
		//获取验证码
		getCode() {

			if (!/^1[3456789]\d{9}$/.test(this.form.tePhone)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				});
				return;
			}
			if (this.isSendingCode || this.countdown < 60) return

			this.isSendingCode = true
			sendMsg({ phone: this.form.tePhone }).then(res => {
				console.log(res)
				if (res.data.code == 200) {
					uni.showToast({
						title: '验证码已发送',
						icon: 'none'
					})
					this.CodeSendNum = 1

					this.startCountdown()
					this.isSendingCode = false
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}



			})


		},
		startCountdown() {
			this.startCountdownFlag = true
			this.countdown = 60
			this.timer = setInterval(() => {
				this.countdown--
				if (this.countdown <= 0) {
					clearInterval(this.timer)
					this.startCountdownFlag = false
					//this.countdown = 60
					this.timer = null
				}
			}, 1000)
		},

		// upload事件
		onUpload(e) {
			this.avatarList = e;
		},
		
		//提交
		submit() {
			console.log(this.avatarList, 'avatarList')
			console.log(this.form)
			// var openids = uni.getStorageSync('wx_copenid')
			// this.form.cOpenId = openids
			// this.form.cAddress =this.form.cAddress
			// this.form.cSfzImg = this.idCard
			// that.data.form.cBhList = that.data.form.cBhList.join(", ")
			if (this.form.teName == '') {
				uni.showToast({
					title: '请输入您的姓名',
					icon: 'none'
				})
				return
			}
			if (this.form.teSex === null) {
				uni.showToast({
					title: '请选择您的性别',
					icon: 'none'
				})
				return
			}

			if (!/^1[3456789]\d{9}$/.test(this.form.tePhone)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				});
				return;
			}

			if (this.form.phoneMsg == '') {
				uni.showToast({
					title: '请输入验证码',
					icon: 'none'
				});
				return
			}
			if (this.form.provinceName == '') {
				uni.showToast({
					title: '请选择城市',
					icon: 'none'
				});
				return
			}
			if (!this.form.openService) {
				uni.showToast({
					title: '请选择开通服务',
					icon: 'none'
				});
				return

			}

			if (this.avatarList.length) {
				this.form.avatar = this.avatarList.map(item => item.url).join(',')
			}
			if (this.avatarList.length < 1) {
				uni.showToast({
					title: '最少上传一张工作形象照',
					icon: 'none'
				});
				return
			} else {
				technicianApply(this.form).then(res => {
					if (res.data.code == 200) {
						uni.setStorageSync('wx_phone', this.form.tePhone)
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
						this.getTechnicianFun()

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})

			}
		},
		//获取城市
		getCity() {
			getCityList().then(res => {
				console.log(res)
				this.cityList = res.data.data.records.map(({
					deptId,
					deptName
				}) => ({
					value: deptId,
					label: deptName
				}))
			});
		},
		selectCity() {
			this.show = true
		},
		cancel() {
			console.log('cancel')
			this.show = false
		},
		onSelect(e) {
			console.log(e)
			if (!e.value[0]) return
			this.form.provinceName = e.value[0].label
			this.form.provinceCode = e.value[0].value
			//this.form.deptId = e.value[0].value
			this.show = false
		},
		// goCity() {
		// 	uni.navigateTo({
		// 		url: '/pages/identify/city?type=' + 'indent'
		// 	})
		// },
		// getAddress() {
		// 	uni.chooseLocation({
		// 		success: res => {
		// 			this.form.name = res.name;
		// 			this.form.latitude = res.latitude;
		// 			this.form.longitude = res.longitude;
		// 			// this.form.address = res.address
		// 		}
		// 	});
		// },

	},
	mounted() {
		this.token = uni.getStorageSync('access-token'); // 假设token保存在本地缓存中
	},
	beforeDestroy() {
		if (this.timer) {
			clearInterval(this.timer)
			this.timer = null
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .u-upload__success {
	display: none;
}

::v-deep .u-picker {
	bottom: 136rpx;
	background-color: #ffffff;
	position: relative;
}

::v-deep .u-toolbar__cancel__wrapper {
	width: 30rpx;
	height: 30rpx;
	position: absolute;
	right: 32rpx;
	background-image: url('/static/login/closeIcon.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;

	.u-toolbar__wrapper__cancel {
		width: 30rpx;
		height: 30rpx;

		span {
			display: none;
		}

	}
}



/* 关键：穿透隐藏原生 toolbar，只留插槽内容 */
.u-toolbar {
	z-index: 9999 !important;
	display: block !important;
}

::v-deep .u-toolbar__cancel__wrapper {
	color: #666;
}

::v-deep .u-toolbar__confirm__wrapper {
	position: fixed;
	bottom: 0;
	width: 100%;
	padding: 24rpx 48rpx;

	.u-toolbar__wrapper__confirm {
		width: 654rpx;
		height: 88rpx;
		background: #333335;
		border-radius: 60rpx 60rpx 60rpx 60rpx;

		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.captcha-box {
	width: 622rpx;
	background: #FFFFFF;
	border-radius: 32rpx 32rpx 32rpx 32rpx;

	.captcha-title {
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
		text-align: center;
		padding: 32rpx 0;
		border-bottom: 1rpx solid #E7E7E7;

	}

	.captcha-img {
		//width: 100%;
		width: 200rpx;
		height: 106rpx;
	}

	.submitImgCode {
		width: 526rpx;
		height: 80rpx;
		background: linear-gradient(263deg, #45FFD7 0%, #7FFFBD 100%);
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		margin-top: 48rpx;

		font-weight: 500;
		font-size: 32rpx;
		color: #1D2129;
		text-align: center;
		margin-bottom: 48rpx;
	}

	.text {
		margin-top: 12rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #86909C;
		text-align: right;

	}

	.u-input {}
}

.join {
	height: 105vh;
	overflow: auto;

	background-color: #F7F8FA;

	.banner {
		width: 100%;
		height: 304rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.top {
		margin: 0 32rpx;
		position: relative;
		padding: 32rpx;
		box-sizing: border-box;
		margin-top: -42rpx;
		background-color: #FFF;
		border-radius: 16rpx;

		.checkBox {
			padding: 24rpx;
			width: 622rpx;
			height: 134rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 1rpx solid #111111;
			margin-bottom: 32rpx;

			//color: #FF7D00;
			.checkStatus {
				font-weight: 500;
				font-size: 30rpx;

				text-align: left;

			}

			.text {
				margin-top: 8rpx;
				font-weight: 400;
				font-size: 26rpx;
				text-align: left;
			}
		}

		.title {
			font-weight: 500;
			font-size: 36rpx;
			color: #1D2129;
			line-height: 36rpx;
			position: relative;

			.lineIcon {
				position: absolute;
				top: 10rpx;
				width: 130rpx;
				height: 24rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.content {
			width: 100%;
			height: auto;
			box-sizing: border-box;
			box-shadow: 0 4rpx 12rpx 0 rgba(209, 168, 88, 0.1);
			border-radius: 24rpx;

			.input-box {
				width: 622rpx;
				height: 110rpx;
				background: #ffffff00 !important;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #E7E7E7;


				.u-input {
					background: #ffffff00 !important;
				}

				.label {
					font-weight: 400;
					font-size: 30rpx;
					color: #1D2129;
					text-align: left;
				}

				.input-item {
					flex: 1;
				}

				.captcha-img {
					width: 30rpx;
					height: 30rpx;
				}

				::v-deep .uni-input-input {
					font-weight: 400;
					font-size: 30rpx;
					color: #4E5969;
					text-align: right;
				}

				.code-input {
					margin-right: 42rpx;
					border: 1px solid re;

				}

				.code-btn {
					font-weight: 400;
					font-size: 30rpx;
					color: #19D29B;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}

				// .name {
				// 	width: 31%;
				// 	margin-bottom: 20rpx;
				// }

				.inp {
					width: 100%;
				}

				.select {
					width: 100%;

					display: flex;
					align-items: center;
					justify-content: flex-end;

					.text {
						font-weight: 400;
						font-size: 30rpx;
						text-align: right;
					}

					img {
						width: 22rpx;
						height: 22rpx;
					}
				}
			}

			.page-section {
				width: 100%;
				font-size: 28rpx;
				height: 106rpx;
				display: flex;
				align-items: center;




			}

			.service {
				/* 普通中文/英文自动换行 */
				word-wrap: break-word;
				word-break: break-all;
				white-space: normal;

				.u-radio-group--row {
					display: flex;
					justify-content: flex-end;
					flex-wrap: wrap;
					/* 放不下自动换行 */
					gap: 10px;
					/* 间距，可选 */
				}

				.u-radio {
					/* 减去3个gap宽度，均分4份 */
					// width: calc((100% - 2 * 12px) / 3);
					// box-sizing: border-box;
				}

				::v-deep .u-radio__text {
					font-weight: 400;
					font-size: 30rpx;
					color: #f10000;
					text-align: right;
				}
			}

			.code-box {

				.code-btn {
					width: 200rpx;
					text-align: right;
					font-size: 28rpx;
					color: #2DB1A8;
					line-height: 88rpx;

					&.disabled {
						color: #2DB1A8;
					}
				}
			}


			.updata {
				margin-top: 32rpx;
				width: 100%;

				.name {
					font-weight: 400;
					font-size: 30rpx;
					color: #1D2129;
					text-align: left;
				}

				.images {
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					margin-top: 16rpx;
				}

				.title {
					font-weight: 400;
					font-size: 26rpx;
					color: #86909C;
					text-align: justified;
					overflow: hidden;
					// text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

		}


	}

	.submits {
		padding: 24rpx 48rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		width: 100%;
		margin-top: 28rpx;

		text {
			font-weight: 400;
			font-size: 22rpx;
			color: #86909C;

			display: block;
			width: 100%;
			margin-top: 10rpx;
			text-align: center;
		}

		.btn {
			width: 654rpx;
			height: 88rpx;
			background: #333335;
			border-radius: 60rpx 60rpx 60rpx 60rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}

.keFu {
	position: fixed;
	right: 0;
	bottom: 290rpx;
	width: 100rpx;
	height: 100rpx;
	background: linear-gradient(263deg, rgba(69, 255, 215, 0.4) 0%, rgba(127, 255, 189, 0.4) 100%);
	border-radius: 50%;
	//opacity: 0.4;
	display: flex;
	justify-content: center;
	align-items: center;

	.keFuContent {
		width: 76rpx;
		height: 76rpx;
		background: linear-gradient(263deg, rgba(69, 255, 215, 0.5) 0%, rgba(127, 255, 189, 0.5) 100%);
		border-radius: 50%;
		//opacity: 0.5;

	}
}
</style>