Huiqitong/src/pages/memberCenter/memberZc.vue

<template>
	<view class="container">
		<u-navbar title="会员注册" placeholder="true" :auto-back="true" bg-color="#F1F3F9" left-icon-size="24"></u-navbar>
		<image style="width: 50%;margin-bottom: 60rpx;margin-top: -332rpx;" src="@/static/img/iconhqt.png" mode="widthFix"></image>
		<view class="butp">
			<u-button @getphonenumber="onGetPhoneNumber" text="手机号一键注册" icon-color="#fff" open-type="getPhoneNumber"
				color="linear-gradient(90deg, #007FFF 0%, #99CCFF 100%)" />
			<view class="but" style="color: #616161;background: #FFFFFF;" @click="showpopup">
				其他手机号注册
			</view>
		</view>
		<view class="radiotxt">
			<u-checkbox name="agree" shape="circle" label="我已阅读并同意" usedAlone v-model:checked="radioVal">
			</u-checkbox>
			<view class="txt2" @click="gorhxy">
				用户服务协议
			</view>
		</view>
		<u-popup :show="showMobile" @close="showMobile = false" mode="center">
			<jumplogin @smsCall="smsCall" @loginCall="loginCall"></jumplogin>
		</u-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	import {
		authRegister,
		register,
		smsRegister
	} from '@/api/memberCenter'
	import jumplogin from './jump-login.vue'


	const baseurl = ref(import.meta.env.VITE_APP_BASE_URL + '/')
	const radioVal = ref(false)
	const showMobile = ref(false)


	const onGetPhoneNumber = (e) => {
		if (e.detail.errMsg.includes('fail')) {
			uni.showToast({
				title: '用户拒绝授权',
				icon: 'none'
			})
			return
		}
		try {
			if (radioVal.value) {
				console.log(e);
				authRegister({
					code: e.detail.code
				}).then(res => {
					if (res.code === 1) {
						uni.showToast({
							title: '注册成功',
							icon: 'none',
							duration: 2000
						})
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/memberCenter/inpart?number=' + res.data.mobile
							})
						}, 2000)
					}
				})
			} else {
				uni.showToast({
					title: '请勾选用户服务协议',
					icon: 'none'
				})
			}
		} catch (error) {
			uni.showToast({
				title: '注册失败',
				icon: 'none'
			})
		}

	}

	const showpopup = () => {
		if (radioVal.value) {
			showMobile.value = true
		} else {
			uni.showToast({
				title: '请勾选用户服务协议',
				icon: 'none'
			})
		}
	}

	const gorhxy = () => {
		uni.navigateTo({
			url: '/pages/memberCenter/agreement'
		})
	}

	const loginCall = (e) => {
		smsRegister({
			mobile: e.phoneNum,
			mobile_key: mobile_key.value,
			mobile_code: e.smsCode
		}).then(res => {
			if (res.code === 1) {
				uni.showToast({
					title: '注册成功',
					icon: 'none',
					duration: 2000
				})
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/memberCenter/inpart?number=' + res.data.mobile
					})
				}, 2000)
			}
		})
	}
	const mobile_key = ref('')
	const smsCall = (e) => {
		register({
			mobile: e
		}).then(res => {
			if (res.code === 1) {
				mobile_key.value = res.data.key
			}
		})
	}
	// onLoad(async () => {
	// })
</script>

<style scoped lang="scss">
	.container {
		background: linear-gradient(0deg, #f1f3f9 72%, rgba(129, 179, 222, 0.5) 88%);
		height: 100vh;
		width: 100%;
		display: grid;
		align-content: center;
		justify-items: center;

		.butp {
			/* 标签栏投影 */
			display: grid;
			align-items: center;
			justify-content: center;

			.but {
				margin-top: 22rpx;
				padding: 24rpx 224rpx;
				border-radius: 16rpx;
				background: linear-gradient(90deg, #007FFF 0%, #99CCFF 100%);
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: Source Han Sans;
				font-size: 36rpx;
				font-weight: 350;
				color: #FFFFFF;
			}

			:deep(.u-button) {
				padding: 24rpx 224rpx;
				border-radius: 16rpx;
				height: 96rpx;
			}

			:deep(.u-button__text) {
				font-family: Source Han Sans;
				font-size: 36rpx !important;
				font-weight: 350;
				color: #FFFFFF;
			}
		}

		.radiotxt {
			margin-top: 96rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.txt1 {
				font-family: Source Han Sans;
				font-size: 28rpx;
				font-weight: 350;
				color: #969696;
			}

			.txt2 {
				margin-left: 10rpx;
				font-family: Source Han Sans;
				font-size: 28rpx;
				font-weight: 350;
				color: #2563EB
			}
		}
	}
</style>