jiuyiUniapp/jiuyi2/pages/login/invite.vue

<script setup>
	/**
	 * 注册账号
	 */
	import {
		ref,
		reactive,
	} from 'vue'
	import {
		onLoad,
	} from '@dcloudio/uni-app'

	// 获取验证码
	import getCode from '@/components/getCode/getCode.vue'
	// 须知
	import notice from '@/components/login/notice'
	// api
	import api from '@/api/index'
	// 工具库
	import util from '@/common/js/util.js'
	// 加密
	import CryptoJS from 'crypto-js';
	// 显示密码
	const showPwd = ref(false)
	// 表单
	const form = reactive({
		// 手机号
		phoneNumber: '',
		// 密码
		password: '',
		// 邀请码
		invitationCode: '',
		// 验证码
		verifyCode: '',
	})
	// 验证码
	const cache = ref('')
	// 是否阅读
	const read = ref(false)

	onLoad((option) => {
		// 上级推荐码
		if (option.code) form.invitationCode = option.code
	})

	// 登录
	function handleLogin() {
		const data = {
			...form
		}
		// 校验
		if (!data.phoneNumber) {
			util.alert('请输入手机号')
			return
		}
		if (!data.verifyCode) {
			util.alert('请输入验证码')
			return
		}
		if (!data.password) {
			util.alert('请输入密码')
			return
		}
		if (!read.value) {
			util.alert('请阅读并勾选服务协议》和《隐私政策》')
			return
		}
		data.password = CryptoJS.MD5(data.password).toString();
		// 如果imei为空
		if (!data.userImei) {
			const info = uni.getSystemInfoSync()
			// 
			data.userImei = info.deviceId
		}

		// 
		api.login.userRegister({
			data: data,
			path: [cache.value],
		}).then(rs => {
			if (rs.code == 200) {
				util.alert('注册成功')
				setTimeout(() => {
					downloadApp()
				}, 1000)
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 下载app
	function downloadApp() {
		// 菜单
		const menu = [{
				name: '安卓下载链接1',
				key: 'FIR',
				url: 'https://fir.xcxwo.com/8tn4qjxd'
			},
			{
				name: '安卓下载链接2',
				key: '蒲公英',
				url: 'https://www.pgyer.com/u24vT3b2',
			}
		]

		// 
		uni.showActionSheet({
			itemList: menu.map(node => {
				return node.name
			}),
			success: rs => {
				// 
				location.href = menu[rs.tapIndex].url
			}
		})
	}
</script>

<template>
	<view class="appbw">
		<view class="container">
			<view class="logo mauto">
				<image class="logo" src="/static/Jiu Yi.png" mode="aspectFit" />
			</view>

			<view class="form mt60 mlr60 mb30">
				<view class="title mtb30">新用户注册</view>

				<view class="inputBox mtb30 ptb10 plr30">
					<input type="text" v-model="form.phoneNumber" placeholder="请输入手机号" />
				</view>

				<view class="rows mtb30">
					<view class="inputBox f1 ptb10 plr30">
						<input type="text" v-model="form.verifyCode" placeholder="请输入验证码" class="f1" />
					</view>

					<view class="getCode btn sm ml20 plr20">
						<getCode :phone="form.phoneNumber" />
					</view>
				</view>

				<view class="inputBox rows mtb20 ptb10 plr30">
					<template v-if="showPwd">
						<input v-model="form.password" placeholder="请输入密码" />
					</template>
					<template v-else>
						<input :password="true" v-model="form.password" placeholder="请输入密码" />
					</template>

					<uni-icons :type="showPwd ? 'eye' : 'eye-slash'" color="#999" size="40rpx"
						@click="showPwd = !showPwd" />
				</view>

				<view class="rows mtb30">
					<view class="inputBox f1 ptb10 plr30">
						<input type="text" v-model="form.invitationCode" placeholder="请输入推荐码" />
					</view>
					<view class="f1"></view>
				</view>

				<view class="">
					<view class="btn lg bar black mtb30" @click="handleLogin">注册</view>
				</view>
				<view>
					<view class="btn lg bar colourful mt30" @click="downloadApp">下载app</view>
				</view>
			</view>
		</view>

		<view class="footer">
			<notice class="mb60" v-model:value="read" />
		</view>
	</view>
</template>

<style lang="scss">
	// 
	.container {
		margin-top: 15vh;

		// 标志
		.logo {
			width: 152rpx;
			height: 80rpx;
		}
	}

	// 获取验证码
	.getCode {
		color: #666;
		background-color: #fff;
	}
</style>