Browse Source

路径调整

wangxy 5 ngày trước cách đây
mục cha
commit
22bcb8d3e9

+ 139 - 0
components/loginComp/index.vue

@@ -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>

+ 10 - 0
components/loginComp/yanzhengma.vue

@@ -0,0 +1,10 @@
+<template>
+	<view></view>
+</template>
+
+<script setup>
+	
+</script>
+
+<style>
+</style>

+ 55 - 0
pages/chanpinMy/components/duihuanmaDialog.vue

@@ -0,0 +1,55 @@
+<!-- 小弹窗 一行文字 -->
+<template>
+	<uni-popup ref="tipSmallPopup" :animation="false" :is-mask-click="false"
+	 mask-background-color="rgba(255, 255, 255, 0.6);">
+	 <view class="ezy-tip-dialog tip-small-dialog duihuan-dialog">
+		<view class="tip-content-box">
+			<view class="tip-title">{{title}}</view>
+				<input class="duihuan-input" type="text" focus v-model="duihuamaValue" placeholder="请输入兑换码" />
+				<view class="tip-btn-box">
+					<view class="not-confirm-btn" @click="handleClose"></view>
+					<view class="confirm-btn" @click="confirmBtn"></view>
+				</view>
+		</view>
+	 </view>
+	</uni-popup>
+</template>
+
+<script setup>
+	import { ref } from 'vue';
+	const props = defineProps({
+	  title: {
+	    type: String,
+	    default: '提示'
+	  },
+	  content: {
+	    type: String,
+		require: true,
+	    default: ''
+	  },
+	});
+	const tipSmallPopup = ref(null); // 索引
+	const duihuamaValue = ref(''); // 索引
+	const $emit = defineEmits(['confirm-btn'])
+	// 打开弹窗
+	function handleShow() {
+		tipSmallPopup.value.open();
+	}
+	// 取消
+	function handleClose() {
+		duihuamaValue.value = ''
+		tipSmallPopup.value.close();
+	}
+	// 确认
+	function confirmBtn(){
+		$emit('confirm-btn',duihuamaValue.value);
+		tipSmallPopup.value.close();
+		duihuamaValue.value = ''
+	}
+	defineExpose({
+			handleShow
+		})
+</script>
+
+<style>
+</style>