feat:登录页面
This commit is contained in:
dzc committed
1 parent
c252f8481d
commit
c2a495cfbe
1 file changed
+92
-104
+92
-104
@@ -9,24 +9,12 @@
|
||||
|
||||
<view class="flex w-full flex-col items-center gap-40rpx">
|
||||
<view class="relative flex w-full items-center">
|
||||
<input
|
||||
class="h-100rpx w-full rounded-50rpx bg-color-light px-40rpx text-32rpx text-white"
|
||||
type="number"
|
||||
placeholder="请输入手机号"
|
||||
placeholder-style="color: rgba(255, 255, 255, 0.6)"
|
||||
v-model="phone"
|
||||
maxlength="11"
|
||||
/>
|
||||
<input class="h-100rpx w-full rounded-50rpx bg-color-light px-40rpx text-32rpx text-white" type="number"
|
||||
placeholder="请输入手机号" placeholder-style="color: rgba(255, 255, 255, 0.6)" v-model="phone" maxlength="11" />
|
||||
</view>
|
||||
<view class="relative flex w-full items-center">
|
||||
<input
|
||||
class="h-100rpx w-full rounded-50rpx bg-color-light px-40rpx text-32rpx text-white"
|
||||
type="number"
|
||||
placeholder="验证码"
|
||||
placeholder-style="color: rgba(255, 255, 255, 0.6)"
|
||||
v-model="smsCode"
|
||||
maxlength="4"
|
||||
/>
|
||||
<input class="h-100rpx w-full rounded-50rpx bg-color-light px-40rpx text-32rpx text-white" type="number"
|
||||
placeholder="验证码" placeholder-style="color: rgba(255, 255, 255, 0.6)" v-model="smsCode" maxlength="4" />
|
||||
<view class="absolute right-20rpx text-12px flex-row-center">
|
||||
<wd-button @click="handleGetCode" :disabled="isTiming" size="medium">
|
||||
<text>获取验证码</text><text v-if="isTiming"> ({{ countDown }}s)</text>
|
||||
@@ -34,30 +22,24 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="mt-40rpx w-full rounded-full bg-color-theme-dark active:bg-color-theme text-lg text-center py-2"
|
||||
@click="handleLogin"
|
||||
>
|
||||
<view class="mt-40rpx w-full rounded-full bg-color-theme-dark active:bg-color-theme text-lg text-center py-2"
|
||||
@click="handleLogin">
|
||||
登 录 / 注 册
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="absolute bottom-40rpx w-full text-center text-14px text-white">
|
||||
登录即同意《
|
||||
<text
|
||||
class="text-#D29E52 underline underline-1 underline-solid underline-amber"
|
||||
@click="alert(2, '用户协议')"
|
||||
>
|
||||
用户协议
|
||||
<view
|
||||
class="flex items-center justify-center flex-wrap px-20rpx absolute bottom-40rpx text-center text-14px text-white">
|
||||
<wd-checkbox v-model="isAgree" />
|
||||
<text>我已阅读并同意</text>
|
||||
<text class="text-#D29E52 underline underline-1 underline-solid underline-amber" @click="alert(2, '用户协议')">
|
||||
《用户协议》
|
||||
</text>
|
||||
》和《
|
||||
<text
|
||||
class="text-#D29E52 underline underline-1 underline-solid underline-amber"
|
||||
@click="alert(3, '隐私政策')"
|
||||
>
|
||||
隐私政策
|
||||
<text>和</text>
|
||||
<text class="text-#D29E52 underline underline-1 underline-solid underline-amber" @click="alert(3, '隐私政策')">
|
||||
《隐私政策》
|
||||
</text>
|
||||
》并同意授权
|
||||
并同意授权
|
||||
</view>
|
||||
|
||||
<wd-config-provider theme="dark">
|
||||
@@ -67,81 +49,87 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import AuthUtil from '@/sheep/api/member/auth';
|
||||
import { useMessage } from '@/uni_modules/wot-design-uni';
|
||||
import RecentApi from '@/sheep/api/member/recent';
|
||||
import { ref } from 'vue';
|
||||
import AuthUtil from '@/sheep/api/member/auth';
|
||||
import { useMessage } from '@/uni_modules/wot-design-uni';
|
||||
import RecentApi from '@/sheep/api/member/recent';
|
||||
|
||||
const message = useMessage();
|
||||
const message = useMessage();
|
||||
|
||||
const phone = ref('');
|
||||
const smsCode = ref('');
|
||||
const isTiming = ref(false);
|
||||
const countDown = ref(60);
|
||||
const phone = ref('');
|
||||
const smsCode = ref('');
|
||||
const isTiming = ref(false);
|
||||
const countDown = ref(60);
|
||||
const isAgree = ref(false);
|
||||
|
||||
const handleGetCode = async () => {
|
||||
if (!phone.value) return uni.showToast({ title: '请填写手机号', icon: 'none' });
|
||||
if (
|
||||
!/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/.test(
|
||||
phone.value,
|
||||
)
|
||||
const handleGetCode = async () => {
|
||||
if (!phone.value) return uni.showToast({ title: '请填写手机号', icon: 'none' });
|
||||
if (
|
||||
!/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/.test(
|
||||
phone.value,
|
||||
)
|
||||
return uni.showToast({ title: '手机号格式错误', icon: 'none' });
|
||||
// case 'resetPassword':
|
||||
// scene = 4;
|
||||
// case 'changePassword':
|
||||
// scene = 3;
|
||||
// case 'changeMobile':
|
||||
// scene = 2;
|
||||
// case 'smsLogin':
|
||||
// scene = 1;
|
||||
const { code } = await AuthUtil.sendSmsCode(phone.value, 1);
|
||||
if (code !== 0) return;
|
||||
isTiming.value = true;
|
||||
timer = setInterval(() => {
|
||||
countDown.value--;
|
||||
if (countDown.value === 0) {
|
||||
isTiming.value = false;
|
||||
countDown.value = 60;
|
||||
clearInterval(timer);
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
// 登录
|
||||
const handleLogin = async () => {
|
||||
if (!phone.value) return uni.showToast({ title: '请填写手机号', icon: 'none' });
|
||||
if (
|
||||
!/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/.test(
|
||||
phone.value,
|
||||
)
|
||||
)
|
||||
return uni.showToast({ title: '手机号格式错误', icon: 'none' });
|
||||
if (!smsCode.value) return uni.showToast({ title: '请填写验证码', icon: 'none' });
|
||||
|
||||
const { code } = await AuthUtil.smsRegister({ mobile: phone.value, code: smsCode.value });
|
||||
if (code === 0) {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.reLaunch({ url: '/pages/wechat-tabbar/index' });
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
uni.reLaunch({ url: '/pages/tabbar/home' });
|
||||
getApp().$vm.init();
|
||||
// #endif
|
||||
|
||||
return;
|
||||
)
|
||||
return uni.showToast({ title: '手机号格式错误', icon: 'none' });
|
||||
// case 'resetPassword':
|
||||
// scene = 4;
|
||||
// case 'changePassword':
|
||||
// scene = 3;
|
||||
// case 'changeMobile':
|
||||
// scene = 2;
|
||||
// case 'smsLogin':
|
||||
// scene = 1;
|
||||
const { code } = await AuthUtil.sendSmsCode(phone.value, 1);
|
||||
if (code !== 0) return;
|
||||
isTiming.value = true;
|
||||
timer = setInterval(() => {
|
||||
countDown.value--;
|
||||
if (countDown.value === 0) {
|
||||
isTiming.value = false;
|
||||
countDown.value = 60;
|
||||
clearInterval(timer);
|
||||
}
|
||||
// 清理数据，防止缓存未失效
|
||||
getApp().$vm.unloadStore();
|
||||
};
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
// 2-用户协议;3-隐私协议;
|
||||
async function alert(type, title) {
|
||||
const { data } = await RecentApi.getPromotionArticle({ id: type });
|
||||
message.alert({
|
||||
msg: data.content.replace(/<\/?[^>]+>/g, ''),
|
||||
title,
|
||||
});
|
||||
// 登录
|
||||
const handleLogin = async () => {
|
||||
if (!phone.value) return uni.showToast({ title: '请填写手机号', icon: 'none' });
|
||||
if (
|
||||
!/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/.test(
|
||||
phone.value,
|
||||
)
|
||||
)
|
||||
return uni.showToast({ title: '手机号格式错误', icon: 'none' });
|
||||
if (!smsCode.value) return uni.showToast({ title: '请填写验证码', icon: 'none' });
|
||||
|
||||
if (!isAgree.value) {
|
||||
uni.showToast({ title: '请先阅读并同意用户协议和隐私政策', icon: 'none' });
|
||||
return
|
||||
}
|
||||
|
||||
const { code } = await AuthUtil.smsRegister({ mobile: phone.value, code: smsCode.value });
|
||||
if (code === 0) {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.reLaunch({ url: '/pages/wechat-tabbar/index' });
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
uni.reLaunch({ url: '/pages/tabbar/home' });
|
||||
getApp().$vm.init();
|
||||
// #endif
|
||||
|
||||
return;
|
||||
}
|
||||
// 清理数据，防止缓存未失效
|
||||
getApp().$vm.unloadStore();
|
||||
};
|
||||
|
||||
// 2-用户协议;3-隐私协议;
|
||||
async function alert(type, title) {
|
||||
const { data } = await RecentApi.getPromotionArticle({ id: type });
|
||||
message.alert({
|
||||
msg: data.content.replace(/<\/?[^>]+>/g, ''),
|
||||
title,
|
||||
});
|
||||
}
|
||||
</script>
|
||||
Reference in new issue
Block a user