|
|
@@ -0,0 +1,156 @@
|
|
|
+<template>
|
|
|
+ <view class="head-image">
|
|
|
+ <image src="/static/image/logo1.png" mode="heightFix" />
|
|
|
+ </view>
|
|
|
+ <view class="input-box">
|
|
|
+ <view class="content">
|
|
|
+ <picker class="picker" mode="selector" :range="countryCodes" range-key="name" :value="countryCode"
|
|
|
+ @change="changeCountryCode">
|
|
|
+ {{ countryCode }}
|
|
|
+ </picker>
|
|
|
+ <input type="number" :focus="focused == 'phonenumber'" v-model="phonenumber" placeholder="请输入手机号"
|
|
|
+ class="input" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="input-box" style="margin-top:70rpx;">
|
|
|
+ <view class="content">
|
|
|
+ <input type="number" :focus="focused == 'password'" v-model="password" placeholder="请输入验证码" class="input" />
|
|
|
+ <view class="auth-code" @click="getAuthCode">
|
|
|
+ 获取验证码
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <My-button :customStyle="customStyle" class="my-but" :loading="loading" :disabled="disabled" text="登录"
|
|
|
+ :onClick="logIn" />
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { onLoad } from '@dcloudio/uni-app'
|
|
|
+import { ref, reactive, getCurrentInstance } from 'vue'
|
|
|
+const { $Http } = getCurrentInstance().proxy;
|
|
|
+
|
|
|
+onLoad(() => {
|
|
|
+ console.log('页面加载完成',);
|
|
|
+ /* $Http.basic({
|
|
|
+ "id": 2025072809441203,
|
|
|
+ "content": {
|
|
|
+ "phonenumber": "15988303219",
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ console.log('请求结果:', res);
|
|
|
+ }) */
|
|
|
+})
|
|
|
+// 登陆按钮相关
|
|
|
+const loading = ref(false);
|
|
|
+const disabled = ref(true);
|
|
|
+const customStyle = ref({
|
|
|
+ width: '380rpx',
|
|
|
+ margin: '120rpx auto 0',
|
|
|
+});
|
|
|
+// 表单相关
|
|
|
+const focused = ref('');
|
|
|
+const countryCode = ref('+86');
|
|
|
+const phonenumber = ref('15988303219');
|
|
|
+const password = ref('');
|
|
|
+const countryCodes = reactive([
|
|
|
+ { code: '+86', name: '中国 +86', regex: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/ }, // 中国手机号验证规则
|
|
|
+ { code: '+1', name: '美国 +1', regex: /^[2-9]\d{2}[2-9](?!11)\d{6}$/ }, // 美国手机号验证规则
|
|
|
+ { code: '+44', name: '英国 +44', regex: /^7\d{9}$/ }, // 英国手机号验证规则
|
|
|
+]);
|
|
|
+function validatephonenumber() {
|
|
|
+ const selectedCountry = countryCodes.find(country => country.code === countryCode.value);
|
|
|
+ if (!selectedCountry || !selectedCountry.regex.test(phonenumber.value)) {
|
|
|
+ uni.showToast({
|
|
|
+ title: `请输入有效的${selectedCountry ? selectedCountry.name.split(" ")[0] + '号码' : '手机号'}`,
|
|
|
+ icon: 'none',
|
|
|
+ });
|
|
|
+ focused.value = 'phonenumber'; // 聚焦输入框
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+}
|
|
|
+function changeCountryCode(e) {
|
|
|
+ countryCode.value = countryCodes[e.detail.value].code;
|
|
|
+ if (phonenumber.value) validatephonenumber();
|
|
|
+}
|
|
|
+/* 获取验证码 */
|
|
|
+function getAuthCode() {
|
|
|
+ if (!validatephonenumber()) return;
|
|
|
+ $Http.getpassword({ "phonenumber": phonenumber, "systemclient": "web" }).then(res => {
|
|
|
+ console.log('获取验证码结果:', res);
|
|
|
+ if (res.code == 1) {
|
|
|
+ focused.value = 'password'; // 聚焦输入框
|
|
|
+ }
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: 'none',
|
|
|
+ });
|
|
|
+ })
|
|
|
+}
|
|
|
+function logIn() {
|
|
|
+ if (!validatephonenumber()) return;
|
|
|
+ loading.value = true;
|
|
|
+ // 模拟提交逻辑
|
|
|
+ setTimeout(() => {
|
|
|
+ loading.value = false;
|
|
|
+ uni.showToast({
|
|
|
+ title: '提交成功',
|
|
|
+ icon: 'success',
|
|
|
+ });
|
|
|
+ }, 1000);
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.head-image {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ height: 148rpx;
|
|
|
+ margin-top: 120rpx;
|
|
|
+ margin-bottom: 120rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.input-box {
|
|
|
+ width: 630rpx;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ border-bottom: 1px solid #dcdcdc;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 48rpx;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .picker {
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #333333;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .auth-code {
|
|
|
+ margin-left: 20rpx;
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #3874F6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.my-but {
|
|
|
+ width: 380rpx;
|
|
|
+}
|
|
|
+</style>
|