|
@@ -0,0 +1,139 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <uni-popup ref="popupRef" :animation="false" :is-mask-click="false"
|
|
|
|
|
+ mask-background-color="rgba(255, 255, 255, 0.6);" class="ezy-popup-width-all">
|
|
|
|
|
+ <view>
|
|
|
|
|
+ <!-- 手机号输入框 -->
|
|
|
|
|
+ <view class="phone-input-box">
|
|
|
|
|
+ <view class="phone-prefix">+86</view>
|
|
|
|
|
+ <input class="phone-input" type="text" v-model="indexData.phoneNumber" placeholder="请输入手机号"
|
|
|
|
|
+ maxlength="11" @input="clearTelInput" />
|
|
|
|
|
+ <view class="close-btn" v-if="indexData.clearTelIcon" @click="clearTel"></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <!-- 协议勾选框和按钮 -->
|
|
|
|
|
+ <view class="agreement-checkbox-box">
|
|
|
|
|
+ <checkbox-group @change="handleAgreementChange">
|
|
|
|
|
+ <checkbox class="agreement-checkbox-input" color="#FFFFFF" value="agree"
|
|
|
|
|
+ :checked="indexData.isAgreed" />
|
|
|
|
|
+ </checkbox-group>
|
|
|
|
|
+ <view class="agreement-text-box">
|
|
|
|
|
+ 我已阅读并同意<view class="agreement-text" @click="agreeBtn('yhxy')">《用户协议》</view>和<view
|
|
|
|
|
+ @click="agreeBtn('ystk')" class="agreement-text">《隐私政策》</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <ezyActiveVue class="ezy-btn-active login-btn" @aclick="getYzmBtn" :class="indexData.telStatus">发送验证码
|
|
|
|
|
+ </ezyActiveVue>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </uni-popup>
|
|
|
|
|
+ <yanzhengmaVue ref="yanzhengmaRef"></yanzhengmaVue>
|
|
|
|
|
+ <agree-dialog ref="agreeDialogRef" @confirm-btn="confirmBtn"></agree-dialog>
|
|
|
|
|
+ <agreeContentDialogVue ref="agreeContentDialogRef" :agreeType="agreeType"></agreeContentDialogVue>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script setup>
|
|
|
|
|
+ import {
|
|
|
|
|
+ ref,
|
|
|
|
|
+ reactive
|
|
|
|
|
+ } from "vue";
|
|
|
|
|
+ import yanzhengmaVue from "./yanzhengma.vue";
|
|
|
|
|
+ import agreeContentDialogVue from "@/pages/login/agreeContentDialog.vue";
|
|
|
|
|
+ import ezyActiveVue from "@/components/ezyActive/ezyActive.vue";
|
|
|
|
|
+ import {
|
|
|
|
|
+ toast
|
|
|
|
|
+ } from "@/utils/common";
|
|
|
|
|
+ import agreeDialog from "@/pages/login/agreeDialog.vue";
|
|
|
|
|
+
|
|
|
|
|
+ const popupRef = ref(null)
|
|
|
|
|
+ const yanzhengmaRef = ref(null)
|
|
|
|
|
+ const agreeType = ref(null);
|
|
|
|
|
+ const agreeContentDialogRef = ref(null);
|
|
|
|
|
+ const agreeDialogRef = ref(null)
|
|
|
|
|
+
|
|
|
|
|
+ let indexData = reactive({
|
|
|
|
|
+ phoneNumber: null,
|
|
|
|
|
+ clearTelIcon: false,
|
|
|
|
|
+ telStatus: 'login-btn-disabled',
|
|
|
|
|
+ isAgreed: false,
|
|
|
|
|
+ sliderObj: {},
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+ function showPopup() {
|
|
|
|
|
+ popupRef.value.open()
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function closePopup() {
|
|
|
|
|
+ popupRef.value.close()
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const clearTelInput = (event) => {
|
|
|
|
|
+ if (event.detail.value.length > 0) {
|
|
|
|
|
+ indexData.clearTelIcon = true;
|
|
|
|
|
+ validatePhoneNumber(event.detail.value);
|
|
|
|
|
+ } else {
|
|
|
|
|
+ indexData.clearTelIcon = false;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 手机号校验规则
|
|
|
|
|
+ const validatePhoneNumber = (value) => {
|
|
|
|
|
+ const phoneRegex = /^1[3-9]\d{9}$/;
|
|
|
|
|
+ if (phoneRegex.test(value)) {
|
|
|
|
|
+ indexData.telStatus = 'login-btn-normal';
|
|
|
|
|
+ } else {
|
|
|
|
|
+ indexData.telStatus = 'login-btn-disabled';
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const handleAgreementChange = (event) => {
|
|
|
|
|
+ if (event.detail.value[0] === 'agree') {
|
|
|
|
|
+ indexData.isAgreed = true;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ indexData.isAgreed = false;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 用户协议同意
|
|
|
|
|
+ const confirmBtn = () => {
|
|
|
|
|
+ indexData.isAgreed = true;
|
|
|
|
|
+ getYzmBtn();
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const getYzmBtn = () => {
|
|
|
|
|
+ if (indexData.telStatus === 'login-btn-normal') {
|
|
|
|
|
+ // 手机号完整
|
|
|
|
|
+ if (indexData.isAgreed === true) {
|
|
|
|
|
+ console.log('获取验证码')
|
|
|
|
|
+ // 同意协议
|
|
|
|
|
+ // yanzhengmaRef.value.
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ } else {
|
|
|
|
|
+ // 不同意协议
|
|
|
|
|
+ agreeDialogRef.value.handleShow();
|
|
|
|
|
+ }
|
|
|
|
|
+ } else {
|
|
|
|
|
+ toast('请输入合法手机号')
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const agreeBtn = (data) => {
|
|
|
|
|
+ if (data === 'yhxy') {
|
|
|
|
|
+ agreeType.value = 'yhxy'
|
|
|
|
|
+ } else {
|
|
|
|
|
+ agreeType.value = 'ystk'
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ agreeContentDialogRef.value.handleShow();
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ defineExpose({
|
|
|
|
|
+ showPopup
|
|
|
|
|
+ })
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
|
+
|
|
|
|
|
+</style>
|