From 92230c9a97dc9ce9df3313d11d26999c04bb6b26 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 15 七月 2025 13:12:48 +0800
Subject: [PATCH] 项目初始化
---
src/pages_template/pages/login/code.vue | 110 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 110 insertions(+), 0 deletions(-)
diff --git a/src/pages_template/pages/login/code.vue b/src/pages_template/pages/login/code.vue
new file mode 100644
index 0000000..03dcf73
--- /dev/null
+++ b/src/pages_template/pages/login/code.vue
@@ -0,0 +1,110 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+
+const maxlength = ref(4);
+const value = ref('');
+const second = ref(3);
+const show = ref(false);
+const error = ref(false);
+
+onMounted(() => {
+ let interval = setInterval(() => {
+ second.value--;
+ if (second.value <= 0) {
+ show.value = true;
+ if (value.value.length !== 4) {
+ error.value = true;
+ }
+ clearInterval(interval);
+ }
+ }, 1000);
+});
+
+const noCaptcha = () => {
+ uni.showActionSheet({
+ itemList: ['閲嶆柊鑾峰彇楠岃瘉鐮�', '鎺ュ惉璇煶楠岃瘉鐮�'],
+ success: function (res) {
+ // 澶勭悊鎴愬姛閫昏緫
+ },
+ fail: function (res) {
+ // 澶勭悊澶辫触閫昏緫
+ }
+ });
+};
+
+const change = (value) => {
+ // console.log('change', value);
+};
+
+const finish = (value) => {
+ // console.log('finish', value);
+};
+</script>
+<template>
+ <view class="wrap">
+ <view class="key-input">
+ <view class="title">杈撳叆楠岃瘉鐮�</view>
+ <view class="tips">楠岃瘉鐮佸凡鍙戦�佽嚦 +150****9320</view>
+ <u-message-input :focus="true" :value="value" @change="change" @finish="finish" mode="bottomLine"
+ :maxlength="maxlength"></u-message-input>
+ <text :class="{ error: error }">楠岃瘉鐮侀敊璇紝璇烽噸鏂拌緭鍏�</text>
+ <view class="captcha">
+ <text :class="{ noCaptcha: show }" @tap="noCaptcha">鏀朵笉鍒伴獙璇佺爜鐐硅繖閲�</text>
+ <text :class="{ regain: !show }">{{ second }}绉掑悗閲嶆柊鑾峰彇楠岃瘉鐮�</text>
+ </view>
+ </view>
+ </view>
+</template>
+
+<style lang="scss" scoped>
+.wrap {
+ padding: 80rpx;
+}
+
+.box {
+ margin: 30rpx 0;
+ font-size: 30rpx;
+ color: 555;
+}
+
+.key-input {
+ padding: 30rpx 0;
+
+ text {
+ display: none;
+ }
+
+ .error {
+ display: block;
+ color: red;
+ font-size: 30rpx;
+ margin: 20rpx 0;
+ }
+}
+
+.title {
+ font-size: 50rpx;
+ color: #333;
+}
+
+.key-input .tips {
+ font-size: 30rpx;
+ color: #333;
+ margin-top: 20rpx;
+ margin-bottom: 60rpx;
+}
+
+.captcha {
+ color: $u-warning;
+ font-size: 30rpx;
+ margin-top: 40rpx;
+
+ .noCaptcha {
+ display: block;
+ }
+
+ .regain {
+ display: block;
+ }
+}
+</style>
--
Gitblit v1.9.3