|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
- <view class="w-screen h-screen flex flex-col " :style="themeColor()">
|
|
|
+ <view class="w-screen h-screen flex flex-col" :style="themeColor()">
|
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
|
- <view :style="{ 'height': headerHeight }">
|
|
|
+ <view :style="{ height: headerHeight }">
|
|
|
<top-tabbar :data="param" :scrollBool="topTabarObj.getScrollBool()" class="top-header" />
|
|
|
</view>
|
|
|
<!-- #endif -->
|
|
|
@@ -12,104 +12,152 @@
|
|
|
<text>还没有账号,</text>
|
|
|
<text class="text-primary">去注册</text>
|
|
|
</view>
|
|
|
- <u-form labelPosition="left" :model="formData" errorType='toast' :rules="rules" ref="formRef">
|
|
|
- <view class="h-[88rpx] flex w-full items-center px-[30rpx] rounded-[40rpx] box-border bg-[#F6F6F6]">
|
|
|
- <u-form-item label="" prop="username" :border-bottom="false">
|
|
|
- <u-input v-model="formData.username" border="none" maxlength="40" placeholder="请输入账号"
|
|
|
- autocomplete="off" class="!bg-transparent" :disabled="real_name_input" fontSize="26rpx"
|
|
|
- placeholderClass="!text-[var(--text-color-light9)] text-[26rpx]" />
|
|
|
- </u-form-item>
|
|
|
- </view>
|
|
|
+ <u-form labelPosition="left" :model="formData" errorType="toast" :rules="rules" ref="formRef">
|
|
|
+ <template v-if="type == 'username'">
|
|
|
+ <view class="h-[88rpx] flex w-full items-center px-[30rpx] rounded-[40rpx] box-border bg-[#F6F6F6]">
|
|
|
+ <u-form-item label="" prop="username" :border-bottom="false">
|
|
|
+ <u-input v-model="formData.username" border="none" maxlength="40" placeholder="请输入账号"
|
|
|
+ autocomplete="off" class="!bg-transparent" :disabled="real_name_input" fontSize="26rpx"
|
|
|
+ placeholderClass="!text-[var(--text-color-light9)] text-[26rpx]" />
|
|
|
+ </u-form-item>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="h-[88rpx] flex w-full items-center px-[30rpx] rounded-[40rpx] box-border bg-[#F6F6F6] mt-[40rpx]">
|
|
|
+ <u-form-item label="" prop="password" :border-bottom="false">
|
|
|
+ <u-input v-model="formData.password" border="none" :password="isPassword" maxlength="40"
|
|
|
+ placeholder="请输入密码" autocomplete="new-password" class="!bg-transparent"
|
|
|
+ :disabled="real_name_input" fontSize="26rpx"
|
|
|
+ placeholderClass="!text-[var(--text-color-light9)] text-[26rpx]">
|
|
|
+ <template #suffix>
|
|
|
+ <view @click="changePassword" v-if="formData.password">
|
|
|
+ <u-icon :name="isPassword ? 'eye-off' : 'eye-fill'" color="#b9b9b9"
|
|
|
+ size="20"></u-icon>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </u-input>
|
|
|
+ </u-form-item>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <!-- #ifdef MP-WEIXIN -->
|
|
|
+ <template v-if="type == 'wx'">
|
|
|
+ <button
|
|
|
+ class="w-full h-[80rpx] !bg-[var(--primary-color)] text-[26rpx] rounded-[40rpx] leading-[80rpx] font-500 !text-[#fff] !mx-[0]"
|
|
|
+ open-type="getPhoneNumber" @getphonenumber="getphonenumber">
|
|
|
+ 授权手机号登录
|
|
|
+ </button>
|
|
|
+ </template>
|
|
|
+ <!-- #endif -->
|
|
|
+ <template v-if="type == 'mobile'">
|
|
|
+ <view class="h-[88rpx] flex w-full items-center px-[30rpx] rounded-[40rpx] box-border bg-[#F6F6F6]">
|
|
|
+ <u-form-item label="" prop="mobile" :border-bottom="false">
|
|
|
+ <u-input v-model="formData.username" type="number" maxlength="11" border="none"
|
|
|
+ placeholder="请输入手机号" autocomplete="off" class="!bg-transparent"
|
|
|
+ :disabled="real_name_input" fontSize="26rpx"
|
|
|
+ placeholderClass="!text-[var(--text-color-light9)] text-[26rpx]" />
|
|
|
+ </u-form-item>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="h-[88rpx] flex w-full items-center px-[30rpx] rounded-[40rpx] box-border bg-[#F6F6F6] mt-[40rpx]">
|
|
|
+ <u-form-item label="" prop="mobile_code" :border-bottom="false">
|
|
|
+ <u-input v-model="formData.code" type="number" maxlength="4" border="none"
|
|
|
+ class="!bg-transparent" fontSize="26rpx" :disabled="real_name_input"
|
|
|
+ placeholder="请输入手机验证码" placeholderClass="!text-[var(--text-color-light9)] text-[26rpx]">
|
|
|
+ <template #suffix>
|
|
|
+ <sms-code v-if="configStore.login.agreement_show" :mobile="formData.username"
|
|
|
+ type="login" v-model="formData.mobile_key" :isAgree="isAgree"></sms-code>
|
|
|
+ <sms-code v-else :mobile="formData.username" type="login"
|
|
|
+ v-model="formData.mobile_key"></sms-code>
|
|
|
+ </template>
|
|
|
+ </u-input>
|
|
|
+ </u-form-item>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </u-form>
|
|
|
+ <template v-if="type != 'wx'">
|
|
|
<view
|
|
|
- class="h-[88rpx] flex w-full items-center px-[30rpx] rounded-[40rpx] box-border bg-[#F6F6F6] mt-[40rpx]">
|
|
|
- <u-form-item label="" prop="password" :border-bottom="false">
|
|
|
- <u-input v-model="formData.password" border="none" :password="isPassword" maxlength="40"
|
|
|
- placeholder="请输入密码" autocomplete="new-password" class="!bg-transparent"
|
|
|
- :disabled="real_name_input" fontSize="26rpx"
|
|
|
- placeholderClass="!text-[var(--text-color-light9)] text-[26rpx]">
|
|
|
- <template #suffix>
|
|
|
- <view @click="changePassword" v-if="formData.password">
|
|
|
- <u-icon :name="isPassword ? 'eye-off' : 'eye-fill'" color="#b9b9b9"
|
|
|
- size="20"></u-icon>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </u-input>
|
|
|
- </u-form-item>
|
|
|
+ class="h-[34rpx] text-right text-[24rpx] text-[var(--text-color-light6)] leading-[34rpx] mt-[20rpx]"
|
|
|
+ @click="toResetpwd">忘记密码</view>
|
|
|
+ <view class="mt-[106rpx]">
|
|
|
+ <button
|
|
|
+ class="w-full h-[80rpx] !bg-[var(--primary-color)] text-[26rpx] rounded-[40rpx] leading-[80rpx] font-500 !text-[#fff] !mx-[0]"
|
|
|
+ loadingText="登录中" @click="handleLogin">
|
|
|
+ 登录
|
|
|
+ </button>
|
|
|
</view>
|
|
|
- </u-form>
|
|
|
- <view class="h-[34rpx] text-right text-[24rpx] text-[var(--text-color-light6)] leading-[34rpx] mt-[20rpx] "
|
|
|
- @click="toResetpwd">忘记密码</view>
|
|
|
- <view class="mt-[106rpx]">
|
|
|
- <button
|
|
|
- class="w-full h-[80rpx] !bg-[var(--primary-color)] text-[26rpx] rounded-[40rpx] leading-[80rpx] font-500 !text-[#fff] !mx-[0]"
|
|
|
- loadingText="登录中" @click="handleLogin">登录</button>
|
|
|
- </view>
|
|
|
+ </template>
|
|
|
</view>
|
|
|
<view class="footer w-full">
|
|
|
- <view class="text-[26rpx] leading-[36rpx] text-[#666] text-center mb-[30rpx] font-400">其他登录方式</view>
|
|
|
- <view class="flex justify-center gap-[40rpx]">
|
|
|
- <text v-if="type == 'mobile' && configStore.login.is_username" @click="setType"
|
|
|
- class="w-[66rpx] h-[66rpx] flex items-center justify-center iconfont iconmima6Vmm border-[2rpx] rounded-[50%] border-solid border-[#ddd] !text-[26rpx]"></text>
|
|
|
- <text v-if="type == 'username' && configStore.login.is_mobile" @click="setType"
|
|
|
- class="w-[66rpx] h-[66rpx] flex items-center justify-center iconfont iconshouji6Vmm border-[2rpx] rounded-[50%] border-solid border-[#ddd] !text-[26rpx]"></text>
|
|
|
- <text v-if="isShowQuickLogin" @click="toLink"
|
|
|
- class="w-[66rpx] h-[66rpx] !text-[#1AAB37] flex items-center justify-center iconfont iconweixinV6mm1 border-[2rpx] rounded-[50%] border-solid border-[#ddd] !text-[26rpx]"></text>
|
|
|
+ <view class="text-[26rpx] leading-[36rpx] text-[#666] text-center mb-[30rpx] font-400" @click="setType">
|
|
|
+ {{ type == "wx" ? "短信登录" : "其他登录方式" }}
|
|
|
</view>
|
|
|
+ <view class="flex justify-center gap-[40rpx]"> </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, reactive, computed, onMounted } from 'vue'
|
|
|
-import { usernameLogin, mobileLogin, clientLogin } from '@/app/api/auth'
|
|
|
-import useMemberStore from '@/stores/member'
|
|
|
-import useConfigStore from '@/stores/config'
|
|
|
-import { useLogin } from '@/hooks/useLogin'
|
|
|
-import { t } from '@/locale'
|
|
|
-import { redirect, getToken, pxToRpx, isWeixinBrowser } from '@/utils/common'
|
|
|
-import { onLoad } from '@dcloudio/uni-app';
|
|
|
-import { topTabar } from '@/utils/topTabbar'
|
|
|
+import { ref, reactive, computed, onMounted } from "vue";
|
|
|
+import { usernameLogin, mobileLogin, clientLogin } from "@/app/api/auth";
|
|
|
+import useMemberStore from "@/stores/member";
|
|
|
+import useConfigStore from "@/stores/config";
|
|
|
+import { useLogin } from "@/hooks/useLogin";
|
|
|
+import { t } from "@/locale";
|
|
|
+import { redirect, getToken, pxToRpx, isWeixinBrowser } from "@/utils/common";
|
|
|
+import { onLoad } from "@dcloudio/uni-app";
|
|
|
+import { topTabar } from "@/utils/topTabbar";
|
|
|
import useSystemStore from "@/stores/system";
|
|
|
|
|
|
-const systemStore = useSystemStore()
|
|
|
+const systemStore = useSystemStore();
|
|
|
/********* 自定义头部 - start ***********/
|
|
|
-const topTabarObj = topTabar()
|
|
|
-const param = topTabarObj.setTopTabbarParam({ title: '', topStatusBar: { bgColor: '#fff', textColor: '#333' } })
|
|
|
+const topTabarObj = topTabar();
|
|
|
+const param = topTabarObj.setTopTabbarParam({
|
|
|
+ title: "",
|
|
|
+ topStatusBar: { bgColor: "#fff", textColor: "#333" },
|
|
|
+});
|
|
|
/********* 自定义头部 - end ***********/
|
|
|
const headerHeight = computed(() => {
|
|
|
- return Object.keys(systemStore.menuButtonInfo).length ? pxToRpx(Number(systemStore.menuButtonInfo.height)) + pxToRpx(systemStore.menuButtonInfo.top) + pxToRpx(8) + 'rpx' : 'auto'
|
|
|
-})
|
|
|
+ return Object.keys(systemStore.menuButtonInfo).length
|
|
|
+ ? pxToRpx(Number(systemStore.menuButtonInfo.height)) +
|
|
|
+ pxToRpx(systemStore.menuButtonInfo.top) +
|
|
|
+ pxToRpx(8) +
|
|
|
+ "rpx"
|
|
|
+ : "auto";
|
|
|
+});
|
|
|
const real_name_input = ref(true);
|
|
|
-const memberStore = useMemberStore()
|
|
|
-const configStore = useConfigStore()
|
|
|
-const type = ref('')
|
|
|
-const isAgree = ref(false)
|
|
|
-const isShowQuickLogin = ref(false) // 是否显示快捷登录
|
|
|
-const popupRef = ref()
|
|
|
-const isPassword = ref(true)
|
|
|
+const memberStore = useMemberStore();
|
|
|
+const configStore = useConfigStore();
|
|
|
+const type = ref("");
|
|
|
+const isAgree = ref(false);
|
|
|
+const isShowQuickLogin = ref(false); // 是否显示快捷登录
|
|
|
+const popupRef = ref();
|
|
|
+const isPassword = ref(true);
|
|
|
|
|
|
const changePassword = () => {
|
|
|
- isPassword.value = !isPassword.value
|
|
|
-}
|
|
|
+ isPassword.value = !isPassword.value;
|
|
|
+};
|
|
|
|
|
|
const dialogClose = () => {
|
|
|
popupRef.value.close();
|
|
|
-}
|
|
|
+};
|
|
|
|
|
|
const dialogConfirm = () => {
|
|
|
- isAgree.value = true
|
|
|
+ isAgree.value = true;
|
|
|
popupRef.value.close();
|
|
|
- handleLogin()
|
|
|
-}
|
|
|
+ handleLogin();
|
|
|
+};
|
|
|
|
|
|
onLoad(async (option: any) => {
|
|
|
// #ifdef H5
|
|
|
- uni.getStorageSync('openid') && (Object.assign(formData, { wx_openid: uni.getStorageSync('openid') }))
|
|
|
+ uni.getStorageSync("openid") &&
|
|
|
+ Object.assign(formData, { wx_openid: uni.getStorageSync("openid") });
|
|
|
// #endif
|
|
|
|
|
|
// #ifdef MP-WEIXIN
|
|
|
- uni.getStorageSync('openid') && (Object.assign(formData, { weapp_openid: uni.getStorageSync('openid') }))
|
|
|
+ uni.getStorageSync("openid") &&
|
|
|
+ Object.assign(formData, { weapp_openid: uni.getStorageSync("openid") });
|
|
|
// #endif
|
|
|
|
|
|
+ type.value = option.type ? option.type : "username";
|
|
|
+
|
|
|
// if (option.type) {
|
|
|
// if (option.type == 'mobile') {
|
|
|
// if (configStore.login.is_mobile) {
|
|
|
@@ -151,91 +199,116 @@ onLoad(async (option: any) => {
|
|
|
// isShowQuickLogin.value = false;
|
|
|
// }
|
|
|
// // #endif
|
|
|
-})
|
|
|
+});
|
|
|
|
|
|
const formData = reactive({
|
|
|
- username: '',
|
|
|
- password: ''
|
|
|
-})
|
|
|
+ username: "",
|
|
|
+ password: "",
|
|
|
+ code: "",
|
|
|
+ mobile_key: "",
|
|
|
+});
|
|
|
+
|
|
|
+const getphonenumber = async (res: any) => {
|
|
|
+ console.log(res, "?????????????");
|
|
|
+};
|
|
|
|
|
|
onMounted(() => {
|
|
|
// 防止浏览器自动填充
|
|
|
setTimeout(() => {
|
|
|
real_name_input.value = false;
|
|
|
- }, 800)
|
|
|
+ }, 800);
|
|
|
});
|
|
|
|
|
|
const agreeChange = () => {
|
|
|
- isAgree.value = !isAgree.value
|
|
|
-}
|
|
|
+ isAgree.value = !isAgree.value;
|
|
|
+};
|
|
|
|
|
|
const setType = () => {
|
|
|
- type.value = type.value == 'username' ? 'mobile' : 'username'
|
|
|
-}
|
|
|
+ if (type.value == "username") {
|
|
|
+ // #ifndef MP-WEIXIN
|
|
|
+ type.value = "mobile";
|
|
|
+ // #endif
|
|
|
|
|
|
-const loading = ref(false)
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
+ type.value = "wx";
|
|
|
+ // #endif
|
|
|
+ } else if ((type.value == "wx")) {
|
|
|
+ type.value = "mobile";
|
|
|
+ } else {
|
|
|
+ type.value = "username";
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const loading = ref(false);
|
|
|
|
|
|
const rules = computed(() => {
|
|
|
return {
|
|
|
- 'username': [
|
|
|
+ username: [
|
|
|
{
|
|
|
- type: 'string',
|
|
|
+ type: "string",
|
|
|
required: true,
|
|
|
- message: '请输入账号',
|
|
|
- trigger: ['blur', 'change'],
|
|
|
+ message: "请输入账号",
|
|
|
+ trigger: ["blur", "change"],
|
|
|
},
|
|
|
{
|
|
|
validator(rule: any, value: any) {
|
|
|
return uni.$u.test.mobile(value);
|
|
|
},
|
|
|
- message: '请输入正确的手机号',
|
|
|
- trigger: ['change', 'blur'],
|
|
|
- }
|
|
|
+ message: "请输入正确的手机号",
|
|
|
+ trigger: ["change", "blur"],
|
|
|
+ },
|
|
|
],
|
|
|
- 'password': {
|
|
|
- type: 'string',
|
|
|
+ password: {
|
|
|
+ type: "string",
|
|
|
required: true,
|
|
|
- message: '请输入密码',
|
|
|
- trigger: ['blur', 'change']
|
|
|
+ message: "请输入密码",
|
|
|
+ trigger: ["blur", "change"],
|
|
|
},
|
|
|
- }
|
|
|
-})
|
|
|
+ };
|
|
|
+});
|
|
|
|
|
|
-const formRef: any = ref(null)
|
|
|
+const formRef: any = ref(null);
|
|
|
|
|
|
const handleLogin = () => {
|
|
|
formRef.value.validate().then(() => {
|
|
|
- if (loading.value) return
|
|
|
- loading.value = true
|
|
|
- clientLogin(formData).then((res: any) => {
|
|
|
- memberStore.setToken(res.data.access_token)
|
|
|
- useLogin().handleLoginBack()
|
|
|
- }).catch(() => {
|
|
|
- loading.value = false
|
|
|
- })
|
|
|
- })
|
|
|
-}
|
|
|
+ if (loading.value) return;
|
|
|
+ let datas: any = {}
|
|
|
+ if (type.value == "username") {
|
|
|
+ datas.username = formData.username
|
|
|
+ datas.password = formData.password
|
|
|
+ }
|
|
|
+ loading.value = true;
|
|
|
+ clientLogin(datas)
|
|
|
+ .then((res: any) => {
|
|
|
+ memberStore.setToken(res.data.access_token);
|
|
|
+ useLogin().handleLoginBack();
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ loading.value = false;
|
|
|
+ });
|
|
|
+ });
|
|
|
+};
|
|
|
|
|
|
const toLink = () => {
|
|
|
const pages = getCurrentPages(); // 获取页面栈
|
|
|
if (pages.length > 1) {
|
|
|
const currentPage = pages[pages.length - 2].route;
|
|
|
- if (currentPage == 'app/pages/auth/index') {
|
|
|
+ if (currentPage == "app/pages/auth/index") {
|
|
|
// 返回上一页
|
|
|
uni.navigateBack({
|
|
|
- delta: 1 // 默认值是1，表示返回的页面层数
|
|
|
+ delta: 1, // 默认值是1，表示返回的页面层数
|
|
|
});
|
|
|
} else {
|
|
|
- redirect({ url: '/app/pages/auth/index', mode: 'redirectTo' })
|
|
|
+ redirect({ url: "/app/pages/auth/index", mode: "redirectTo" });
|
|
|
}
|
|
|
} else {
|
|
|
- redirect({ url: '/app/pages/auth/index', mode: 'redirectTo' })
|
|
|
+ redirect({ url: "/app/pages/auth/index", mode: "redirectTo" });
|
|
|
}
|
|
|
-}
|
|
|
+};
|
|
|
|
|
|
const toResetpwd = () => {
|
|
|
- uni.showToast({ title: '请联系管理员重置密码', icon: 'none' })
|
|
|
-}
|
|
|
+ uni.showToast({ title: "请联系管理员重置密码", icon: "none" });
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
:deep(.u-input) {
|
|
|
@@ -264,4 +337,4 @@ const toResetpwd = () => {
|
|
|
padding-bottom: calc(151rpx + constant(safe-area-inset-bottom));
|
|
|
padding-bottom: calc(151rpx + env(safe-area-inset-bottom));
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
weixin_52219567