GuangYuYuan-app/pages/join/first_join.vue

<template>
	<view class="join">
		<view class="banner">
			<image src="../../static/other/banner.png" mode=""></image>
		</view>
		<view class="top">
			<view class="content">
				<view class="page-section">
					<view class="name">您的姓名</view>
					<view class="inp">
						<!-- <input class="weui-input" v-model="form.cName" placeholder="请输入姓名,最多四个字" /> -->
						<u-input v-model="form.cName" :type="type" placeholder="输入您的姓名" maxlength='4' />
					</view>
				</view>
				<view class="page-section">
					<view class="name">您的性别</view>
					<u-radio-group v-model="changeSex" @change="radioGroupChange">
						<u-radio @change="radioChange" v-for="(item, index) in sex" :key="index" :name="item.label"
							:disabled="item.disabled">
							{{item.label}}
						</u-radio>
					</u-radio-group>
					<!-- <view class="sex" @click="isShow = true">
						{{changeSex}}
						<u-select v-model="isShow" :list="sex" @confirm="confirm"></u-select>
					</view> -->
				</view>
				<view class="page-section">
					<view class="name">手机号:</view>
					<view class="inp">
						<!-- <input class="weui-input" v-model="form.cPhone" placeholder="请输入手机号" /> -->
						<u-input v-model="form.cPhone" placeholder="请输入手机号" maxlength='11' />
					</view>
				</view>
				<view class="page-section">
					<view class="name">入驻城市</view>
					<view class="inp select" @click="show = true">
						<text>{{form.city}}</text>
						<img src="../../static/identify/down.png" alt="" />
						<!-- <view class="city" @click="selectCity" v-if="form.city == ''">
							入驻城市
						</view>
						<view class="city" @click="selectCity" v-else>
							{{form.city}}
						</view> -->
						<!-- 	<view class="city" v-if="form.city == ''">
							选择所在城市(自动定位)
						</view> -->
						<!-- <view class="city" v-else  @click="goCity"> -->
						<!-- <view class="city" v-else>
							{{form.city}}市
						</view> -->
						<!-- <input class="weui-input" v-model="form.cNickName" placeholder="请输入昵称" /> -->
						<!-- <u-input v-model="form.cNickName" :type="type" placeholder="请输入昵称" maxlength = '4'/> -->
					</view>
					<u-select v-model="show" :list="citylist" @confirm="select"></u-select>
				</view>
				<!-- <view class="page-section">
					<view class="name">您所在的位置:</view>
					<view class="weui-cells weui-cells_after-title location" @click="getAddress">
						<text class="point" v-if="!form.address">请选择</text>
						<text class="point active" v-else>{{form.address}}{{form.name}}</text>
					</view>
				</view> -->
				<view class="updata" style="border:0;">
					<view class="name">工作形象照</view>
					<view class="title">
						请上传本人近期照片，图片大小不超过10M (建议清晰正脸照)
					</view>
					<view class="images">
						<u-upload :action="uploadUrl" :header="header" :max-count="2" :file-list="LifeList"
							@on-success="handleUploadSuccess" @on-remove="handleUploadRemove"></u-upload>
					</view>
				</view>
				
			</view>
			<view class="submits">
				<text>平台不会通过任何渠道泄漏你的个人信息，请放心输入</text>
				<view class="btn" @click="submit">
					申请成为商户
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		addEngineer,
		project,
		UpdateEngine,
		engineDetail,
		getInfo,
		imgUpload,
		getCityList
	} from '../.././api/index.js'
	import uUpload from 'uview-ui/components/u-upload/u-upload.vue';
	export default {
		data() {
			return {

				citylist: [],
				show: false,
				isLogin: false,
				type: 'text',
				LifeList: [],
				// uploadUrl: 'https://test.baoxianzhanggui.com/nightFragrance/common/upload',
				uploadUrl:'https://city.baoxianzhanggui.com/nightFragrance/common/upload',
				isShow: false,
				sex: [{
						value: '1',
						label: '男'
					},
					{
						value: '0',
						label: '女'
					}
				],
				changeSex: '女',
				form: {
					id: '',
					cName: '',
					cNickName: '',
					cPortrait: '',
					cPhone: '',
					cJianjie: '',
					nSex: 0,
					cSfzImg: [],
					cImgList: [],
					latitude: '',
					longitude: '',
					name: '0',
					address: '',
					cOpenId: '',
					cBhList: '',
					city: '请选择'
				},
				token: '',
			}
		},
		onLoad() {
			uni.getStorage({
				key: 'access-token',
				success() {
					this.isLogin = true
				}
			})
		},
		onShow() {
			this.getinfo()
			this.getCity()

			// 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: {
			//选择性别
			radioChange(e) {
				this.changeSex = e[0].label
				this.form.nSex = e[0].value
			},
			//上传生活照
			handleUploadSuccess(response) {
				this.form.cImgList.push(response.fileName)
			},
			handleUploadRemove(index) {
				this.urlImg.splice(index, 1);
				this.form.cImgList.splice(index, 1)
			},
			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
					}
				});
			},
			getinfo() {
				getInfo().then(res => {
					if (res.data.code == 200) {
						this.isLogin = true
						// this.info = res.data.data,
						// this.dBalance = res.data.data.dBalance.toFixed(2)
					} else if (res.data.code == 401) {
						uni.showModal({
							title: '请先登录！',
							success: (res) => {
								if (res.confirm) {
									uni.switchTab({
										url: '/pages/my/my'
									})
								} else if (res.cancel) {
									return
								}
							}
						})
					}
				})
			},
			//提交
			submit() {
				var that = this
				// var openids = uni.getStorageSync('wx_copenid')
				// this.form.cOpenId = openids
				// this.form.cAddress =this.form.cAddress
				// this.form.nSex = this.index
				// this.form.cImgList = this.urlImg
				// this.form.cSfzImg = this.idCard
				// that.data.form.cBhList = that.data.form.cBhList.join(", ")
				if (this.form.cName == '') {
					uni.showToast({
						title: '请输入您的姓名',
						icon: 'none'
					})
					return
				}
				if (!/^1[3456789]\d{9}$/.test(this.form.cPhone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}
				if (this.form.city == '') {
					uni.showToast({
						title: '请选择所在城市',
						icon: 'none'
					});
					return
				}
				if (this.form.cImgList.length < 1) {
					uni.showToast({
						title: '最少上传一张生活照片',
						icon: 'none'
					});
					return
				} else {
					addEngineer(this.form).then(res => {
						if (res.data.code == 200) {
							uni.showToast({
								title: "申请成功",
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						} else if (res.data.code == 401) {
							uni.showModal({
								title: '请先登录！',
								success: (res) => {
									if (res.confirm) {
										uni.switchTab({
											url: '/pages/my/my'
										})
									} else if (res.cancel) {
										return
									}

								}
							})
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					})
				}
			},
			getCity() {
				getCityList().then(res => {
					this.citylist = res.data.data.map(({
						deptId,
						deptName
					}) => ({
						value: deptId,
						label: deptName
					}))
				});
			},
			selectCity() {
				this.show = true
			},
			select(e) {
				this.form.city = e[0].label
				this.form.deptId = e[0].value
			},
		},
		computed: {
			header() {
				return {
					Authorization: `tf: ${this.token}`, // 携带Token的请求头
				};
			},
		},
		mounted() {
			this.token = uni.getStorageSync('access-token'); // 假设token保存在本地缓存中
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-input-wrapper {
		width: 150px;
		text-align: right;
	}

	::v-deep .u-input__input {
		min-height: 14px !important;
	}

	.join {
		width: 100%;

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

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

		.top {
			width: 100%;
			height: 100px;
			padding: 32rpx;
			box-sizing: border-box;
			margin-top: 44rpx;
			background-color: #FDFDFD;

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

				.page-section {
					width: 100%;
					 margin-bottom: 32rpx;
					// height: 80rpx;
					// padding: 20rpx 0px;
					// display: flex;
					// align-items: center;
					// justify-content: space-between;
					// border-bottom: 1px solid #ccc;
					font-size: 28rpx;

					.name {
						width: 31%;
					}

					.inp {
						width: 100%;
						height: 64rpx;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						border: 2rpx solid #EEEEEE;
						padding: 0px 24rpx;
						box-sizing: border-box;
						margin-top: 20rpx;
						//
						::v-deep .u-input {
							width: 100% !important;
							height: 100% !important;

							.u-input__input {
								width: 100% !important;
								height: 100% !important;

								.uni-input-wrapper {
									width: 100% !important;
									height: 100% !important;
									text-align: left;
								}
							}
						}
					}
					.select{
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						text{
							width: auto;
							color: #333333;
						}
						img{
							width: 28rpx;
							height: 28rpx;
						}
					}
				}

				.updata {
					margin-top: 20rpx;
					width: 100%;
					font-size: 28rpx;

					.images {
						margin-top: 20rpx;
					}
					.title{
						font-size: 22rpx;
						color: #999999;
					}
				}

			}

			.submits {
				width: 100%;
				margin-top: 28rpx;
				text{
					display: block;
					width: 100%;
					text-align: center;
					font-size: 22rpx;
					color: #999999;
				}
				.btn {
					width: 90%;
					height: 84rpx;
					text-align: center;
					background: linear-gradient( 90deg, #BFA061 0%, #BD9961 100%);
					border-radius: 14rpx 14rpx 14rpx 14rpx;
					margin: 16rpx auto;
					line-height: 84rpx;
					color: #ffffff;
				}
			}
		}
	}
</style>