siji/pages/my/register.vue

<template>
	<view class="container">

		<u--form labelPosition="top" :model="userInfo" :rules="rules" ref="uForm" labelWidth="120">
			<u-form-item label="真实姓名" prop="userInfo.account" borderBottom ref="item1" required>
				<u--input v-model="userInfo.account" border="none" maxlength="5" placeholder="请输入真实姓名"></u--input>
			</u-form-item>
			<!-- <u-form-item label="性别" prop="userInfo.sex" borderBottom @click="showSex = true;" ref="item1">
				<u--input v-model="userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择性别"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item> -->
			<u-form-item label="手机号码" prop="userInfo.phone" borderBottom ref="item1" required>
				<u--input v-model="userInfo.phone" border="none" maxlength="11" placeholder="请输入手机号码"></u--input>
			</u-form-item>
			<!-- <u-form-item label="电子邮箱" prop="userInfo.email" borderBottom ref="item1">
				<u--input v-model="userInfo.email" border="none" maxlength="20" placeholder="请输入电子邮箱"></u--input>
			</u-form-item> -->
			<!-- <u-form-item label="用户类型" prop="userInfo.type" borderBottom @click="showType = true;" ref="item1">
				<u--input v-model="userInfo.type" disabled disabledColor="#ffffff" placeholder="请选择类型"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="企业名称" prop="userInfo.enterprise" borderBottom ref="item1" v-if="userInfo.type == '企业'">
				<u--input v-model="userInfo.enterprise" border="none" maxlength="20" placeholder="请输入企业名称"></u--input>
			</u-form-item>
			<u-form-item label="职位" prop="userInfo.position" borderBottom ref="item1">
				<u--input v-model="userInfo.position" border="none" maxlength="10" placeholder="请输入职位名称"></u--input>
			</u-form-item>
			<u-form-item label="常用发货地址" prop="userInfo.shipping_address" borderBottom ref="item1">
				<u--input v-model="userInfo.shipping_address" border="none" maxlength="100"
					placeholder="请输入常用发货地址"></u--input>
			</u-form-item>
			<u-form-item label="常用收货地址" prop="userInfo.receiving_address" borderBottom ref="item1">
				<u--input v-model="userInfo.receiving_address" border="none" maxlength="100"
					placeholder="请输入常用收货地址"></u--input>
			</u-form-item> -->
		</u--form>
		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="" @close="showSex = false"
			@select="sexSelect">
		</u-action-sheet>
		<u-action-sheet :show="showType" :actions="typeActions" title="请选择类型" description="" @close="showType = false"
			@select="typeSelect">
		</u-action-sheet>

		<view class="agreement">
			<view class="content">
				<u-checkbox-group v-model="agreement1" placement="row">
					<u-checkbox label=""></u-checkbox>
					请阅读和勾选
					<u--text type="primary" text="用户协议" @click="agreement(1)"></u--text>
					、
					<u--text type="primary" text="隐私政策" @click="agreement(2)"></u--text>
					协议
				</u-checkbox-group>
			</view>
		</view>

		<u-button type="primary" class="btn" text="注册" shape="circle" @click="register"></u-button>

	</view>
</template>


<script>
	import {
		get,
		post
	} from '@/common/request.js'
	import {
		config
	} from '@/common/config.js'
	export default {
		data() {
			return {
				showSex: false,
				showType: false,

				userInfo: {
					account: '',
					sex: '男',
					phone: '',
					email: '',
					type: '个人',
					enterprise: '',
					position: '',
					shipping_address: '',
					receiving_address: '',
				},

				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
				],
				typeActions: [{
						name: '个人',
					},
					{
						name: '企业',
					},
				],
				rules: {

				},
				agreement1: [],
			}
		},
		methods: {
			sexSelect(e) {
				this.userInfo.sex = e.name
				this.$refs.uForm.validateField('userInfo.sex')
			},
			typeSelect(e) {
				this.userInfo.type = e.name
				this.$refs.uForm.validateField('userInfo.type')
			},
			agreement(id) {
				uni.navigateTo({
					url: '/pages/index/details?id=' + id
				})
			},
			async register() {
				console.log()
				if (this.agreement1.length !== 1) {
					uni.showToast({
						title: '请阅读并勾选相关协议！',
						icon: "none"
					})
					return false
				}



				uni.showLoading({
					title: '注册中'
				})

				post('/myapi/api/yq_driver/register', {
					...this.userInfo
				}).then(res => {

					setTimeout(() => {

						uni.hideLoading()
						uni.showToast({
							title: '恭喜你，注册成功！',
							icon: "none"
						})
						uni.setStorageSync('token', res.data.token)
						setTimeout(() => {
							uni.showToast({
								title: '正在登录',
								icon: "none"
							})
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/my/index'
								})
							}, 500)
						}, 1500)

					}, 1500)

				})





			}
		}
	}
</script>

<style scoped lang="less">
	.container {
		padding: 10px 20px;

		.btn {
			margin-top: 10px;
			font-size: 24px;
		}

		.agreement {
			display: flex;
			flex-direction: column;

			margin: 10px 0 20px;

			.content {
				display: flex;
				margin-top: 10px;

			}
		}
	}

	/deep/ .u-checkbox__icon-wrap--square {
		border-radius: 15px !important;
	}
</style>