intelligentGroup/pageTwo/login/add.vue

<template>
	<view class="box fromClass">
		<view class="lanBox">
			<view class="lan border-bottom">
				<view class="left">所属行业</view>
				<view class="right">
					<picker mode="selector" :range="industrylist" range-key="name" :value="content.industryname"
						@change="changeIndustry">
						<view class="uni-input">{{content.industryname?content.industryname:"请选择"}}</view>
						<uni-icons type="forward" size="20" color="#999"></uni-icons>
					</picker>
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">姓名</view>
				<view class="right">
					<input name="name" type="text" v-model="content.name" placeholder="姓名" />
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">手机号</view>
				<view class="right">
					<input name="name" type="text" v-model="content.phone" placeholder="手机号" />
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">个人照片</view>
				<view class="right touxiang" v-if="content.avatar">
					<image :src="content.avatarurl" mode="aspectFit" @click="handleimage(1)" />
					<uni-icons type="close" size="22" class="uni-icons" @click="content.avatarurl='',content.avatar=''"
						@click.stop></uni-icons>
				</view>
				<view class="right touxiang size20 bold" v-else @click="handleimage(1)">+</view>
				<text class="size12 c999 desc">请上传1寸蓝底照片，大小不超过2M</text>
			</view>

			<view class="lan border-bottom">
				<view class="left">性别</view>
				<view class="right">
					<picker mode="selector" :range="sexItem" @change="onsexArr">
						<view class="uni-input">{{content.sex==0?'请选择':content.sex==1?'男':'女'}}</view>
						<uni-icons type="forward" size="20" color="#999"></uni-icons>
					</picker>
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">出生年月</view>
				<view class="right">
					<picker class="picker" mode="date" :end="endDate" :value="birthday" @change="bindDateChange">
						<view class="uni-input">{{content.birthday?content.birthday:"请选择"}}</view>
						<uni-icons type="forward" size="20" color="#999"></uni-icons>
					</picker>
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">企业全称</view>
				<view class="right">
					<input name="name" type="text" v-model="content.comName" placeholder="企业全称" />
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">公司职位</view>
				<view class="right">
					<input name="name" type="text" v-model="content.comPos" placeholder="公司职位" />
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">营业执照</view>
				<view class="right zhizhao" v-if="content.license">
					<image :src="content.licenseurl" class="headimage" @click="handleimage(2)" mode="aspectFit" />
					<uni-icons type="close" size="22" class="uni-icons"
						@click="content.licenseurl='',content.license=''" @click.stop></uni-icons>
				</view>
				<view class="right zhizhao size20 bold" v-else @click="handleimage(2)">+</view>
				<text class="size12 c999 desc">点击上传企业营业执照，仅用于资质审核</text>
			</view>
			<view class="lan border-bottom">
				<view class="left">通过什么途径了解智照团？</view>
				<view class="radio">
					<label @click="radioChange('抖音')">
						<icon class="iconfont radioimg"
							:class="[source=='抖音'?'icon-yuanxingxuanzhongfill':'icon-yuanxingweixuanzhong']">
						</icon>
						抖 音
					</label>
					<label @click="radioChange('朋友圈')">
						<icon class="iconfont radioimg"
							:class="[source=='朋友圈'?'icon-yuanxingxuanzhongfill':'icon-yuanxingweixuanzhong']">
						</icon>
						朋友圈
					</label>

					<label>
						<view @click="radioChange('介绍人')">
							<icon class="iconfont radioimg"
								:class="[source=='介绍人'?'icon-yuanxingxuanzhongfill':'icon-yuanxingweixuanzhong']">
							</icon>
							介绍人
						</view>
						<input type="text" v-model="sourceName" />
					</label>
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">加入智照团想收获什么？</view>
				<checkbox-group @change="checkboxChange" class="checkbox">
					<label>
						<checkbox value="找客户资源" style="transform:scale(0.8)" />找客户资源
					</label>
					<label>
						<checkbox value="扩大人脉圈子" style="transform:scale(0.8)" />扩大人脉圈子
					</label>
					<label>
						<checkbox value="能力提升" style="transform:scale(0.8)" />能力提升
					</label>
					<label>
						<checkbox value="为企业做品牌宣传" style="transform:scale(0.8)" />为企业做品牌宣传
					</label>
					<label>
						<checkbox value="直播" style="transform:scale(0.8)" />直播
					</label>
					<label>
						<checkbox value="个人IP打造" style="transform:scale(0.8)" />个人IP打造
					</label>
					<label>
						<checkbox value="拍摄剪辑" style="transform:scale(0.8)" />拍摄剪辑
					</label>
					<label>
						<checkbox value="学习新媒体运营" style="transform:scale(0.8)" />学习新媒体运营
					</label>
					<label>
						<checkbox value="老板思维" style="transform:scale(0.8)" />老板思维
					</label>
					<label>
						<checkbox value="团队打造" style="transform:scale(0.8)" />团队打造
					</label>
					<label>
						<checkbox value="销售话术" style="transform:scale(0.8)" />销售话术
					</label>
					<label>
						<checkbox value="外贸平台搭建" style="transform:scale(0.8)" />外贸平台搭建
					</label>
					<label>
						<checkbox value="其他" style="transform:scale(0.8)" />其他
					</label>
				</checkbox-group>
			</view>
			<view class="lan border-bottom">
				<view class="left">能给平台带来什么？</view>
				<view class="right textarea">
					<textarea v-model="content.provide" name="content" maxlength="-1"/>
				</view>
			</view>
			<view class="lan c999 size12 mt-15">
				所有上传的资料信息同意公开展示，最终解释权归智照团平台所有。
			</view>

		</view>
		<view class="btn" @click="confirmInfo">申请加入</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				sexItem: [
					"男",
					"女"
				],
				source: "",
				sourceName: "",
				content: {
					sex: "",
					name: "",
					name: "",
					avatar: "",
					avatarurl: "",
					source: "",
					birthday: "",
					industryid: "",
					industryname: "",
					comName: "",
					comPos: "",
					provide: "",
					demand: "",
					license: "",
					licenseurl: ""
				}
			};
		},
		computed: {
			...mapState(["HomeContent"]),
			endDate() {
				return this.$tools.getDate("start")
			},
			industrylist() {
				return this.HomeContent.industrylist
			},
		},
		methods: {
			// 提交
			confirmInfo() {
				let that = this
				if (!this.content.industryname) {
					this.$tools.msg("请选择所属行业")
					return;
				}
				if (!this.content.name) {
					this.$tools.msg("请输入姓名")
					return;
				}
				if (!this.content.phone) {
					this.$tools.msg("请输入手机号")
					return;
				}
				if (!this.content.avatarurl) {
					this.$tools.msg("请上传个人照片")
					return;
				}
				if (!this.content.sex) {
					this.$tools.msg("请选择性别")
					return;
				}
				if (!this.content.birthday) {
					this.$tools.msg("请选择出生日期")
					return;
				}
				if (!this.content.comName) {
					this.$tools.msg("请输入公司全称")
					return;
				}
				if (!this.content.comPos) {
					this.$tools.msg("请输入公司职位")
					return;
				}
				
				if (this.source == '介绍人' && !this.sourceName) {
					this.$tools.msg("请输入介绍人姓名")
					return;
				}
				this.content.source = this.sourceName ? this.sourceName : this.source
				console.log('content', this.content)
				that.$model.getApplyfor(this.content).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: "提交成功",
							duration: 2000
						});
						setTimeout(function() {
							uni.switchTab({
								url: "/pages/index/index"
							})
						}, 2000)

					} else {
						that.$tools.msg(res.message);
					}
				});
			},
			handleimage(ind) {
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						uni.showLoading({
							title: '识别中...'
						})
						that.$model.getUpLoadimg({
							uploadpath: res.tempFilePaths[0]
						}).then(res => {
							uni.hideLoading()
							if (res.code == 0) {
								if (ind == 1) {
									that.content.avatar = res.data.path
									that.content.avatarurl = res.data.url
								} else {
									that.content.license = res.data.path
									that.content.licenseurl = res.data.url
								}
							} else {
								that.$tools.msg("不支持该图像")
							}
						})
					}
				})
			},
			//确定年龄
			bindDateChange(e) {
				this.content.birthday = e.target.value
			},
			//确定性别
			onsexArr(e) {
				this.content.sex = this.sexItem[e.target.value] == "男" ? 1 : 2
			},
			// 所属行业
			changeIndustry(e) {
				this.content.industryname = this.HomeContent.industrylist[e.target.value].name
				this.content.industryid = this.HomeContent.industrylist[e.target.value].id
			},
			// 途径
			radioChange(e) {
				this.source = this.source == e ? '' : e
				this.sourceName = this.source == '介绍人' ? this.sourceName : '';
			},
			// 收获
			checkboxChange(e) {
				this.content.demand = e.detail.value.join(',')
			},
		},
		onLoad(options) {},
	};
</script>

<style scoped="scoped" lang="scss">
	.zhizhao,
	.touxiang {
		justify-content: center;

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

	.lan {
		margin: 0 10px !important;
	}

	.right {
		/deep/input {
			width: 100%;
		}
	}

	.radio {
		width: 100%;
		height: 40px;
		line-height: 40px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		label {
			display: flex;
		}

		icon {
			color: #dfdfdf;
			font-size: 22px;
			margin-right: 5px;
		}

		.icon-yuanxingxuanzhongfill {
			color: $uni-color-success;
		}

		:nth-child(3) {
			width: 50%;

			view {
				width: 50%;
				display: flex;
			}

			/deep/input {
				width: 50% !important;
				border-bottom: 1px solid #dfdfdf;
			}
		}
	}

	.checkbox {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		label {
			width: 33%;
			display: flex;
			font-size: 12px;
			margin: 5px 0;
			align-items: center;
		}
	}
</style>