|
|
@@ -0,0 +1,508 @@
|
|
|
+<template>
|
|
|
+ <view id="login-container" class="login-container">
|
|
|
+ <image class="bgImage" :src="useStore.loginBg" v-if="useStore.loginBg" />
|
|
|
+
|
|
|
+ <view class="middle">
|
|
|
+ <view class="middle-top">
|
|
|
+ <image class="logo" mode="heightFix" :src="useStore.loginLogo" v-if="useStore.loginLogo" />
|
|
|
+ <text class="title" :style="{ color: useStore.loginBg ? '#FFFFFF' : '#000000' }" v-if="useStore.loginTitle">{{ useStore.loginTitle }}</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="middle-content">
|
|
|
+ <text class="title" :style="{ color: useStore.loginBg ? '#FFFFFF' : '#000000' }">请登录</text>
|
|
|
+ <!-- #ifdef APP-PLUS || MP-WEIXIN -->
|
|
|
+ <view class="prompt" v-if="!linkUrl">首次账号登录请先配置服务器</view>
|
|
|
+ <view class="setting" @tap="goSeverConfig"> 配置服务器 </view>
|
|
|
+ <!--#endif-->
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="middle-input" v-if="switchText == '验证码登录'">
|
|
|
+ <u-input v-model="phone" prefixIcon="phone" placeholder="请输入手机号" :maxlength="11" :adjustPosition="false" />
|
|
|
+ <u-input v-model="verify" prefixIcon="email" placeholder="请输入验证码" :maxlength="6" :adjustPosition="false">
|
|
|
+ <template #suffix>
|
|
|
+ <button class="verify" @click="getVerifyCode">{{ !useStore.codeTime ? "获取验证码" : useStore.codeTime + "s" }}</button>
|
|
|
+ </template>
|
|
|
+ </u-input>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="middle-input" v-if="switchText == '账号密码登录'">
|
|
|
+ <u-input type="text" v-model="username" prefixIcon="account" placeholder="请输入账号" :adjustPosition="false" />
|
|
|
+ <u-input v-model="password" prefixIcon="lock" placeholder="请输入密码" :password="isPassword" :adjustPosition="false">
|
|
|
+ <template #suffix>
|
|
|
+ <text :class="!isPassword ? 'iconfont oaIcon-eye' : 'iconfont oaIcon-eye-close'" @click="isPassword = !isPassword"></text>
|
|
|
+ </template>
|
|
|
+ </u-input>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <button class="middle-submit" @click="submitRes">登 录</button>
|
|
|
+
|
|
|
+ <!-- #ifdef APP-PLUS || MP-WEIXIN || H5 -->
|
|
|
+ <view class="middle-switch">
|
|
|
+ <text class="switch-loginMethod" @click="switchMode(1)">{{ switchText === "验证码登录" ? "账号密码登录" : "验证码登录" }}</text>
|
|
|
+ <view style="margin: auto"></view>
|
|
|
+ <text class="switch-register" @click="switchMode(2)">注册账号</text>
|
|
|
+ </view>
|
|
|
+ <!--#endif-->
|
|
|
+
|
|
|
+ <!-- #ifdef APP-PLUS || MP-WEIXIN -->
|
|
|
+ <view class="middle-agreed text-center">
|
|
|
+ <u-checkbox shape="circle" inactiveColor="#0081ff" size="13" :usedAlone="true" :checked="uChecked" @change="uCheckedChange"></u-checkbox>
|
|
|
+ <!-- <text>登录即已代表阅读并同意</text> -->
|
|
|
+ <text>我已阅读并同意</text>
|
|
|
+ <text @click="handleUserAgrement" class="text-blue">用户协议</text>
|
|
|
+ <text>和</text>
|
|
|
+ <text @click="handlePrivacy" class="text-blue">隐私政策</text>
|
|
|
+ </view>
|
|
|
+ <!--#endif-->
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="bottom">
|
|
|
+ <div class="title">{{ useStore.loginBottomTitle }}</div>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <u-modal :show="modalShow" title="用户协议及隐私政策" :confirmText="'同意'" :cancelText="'不同意'" :zoom="false" :showCancelButton="true" @confirm="modalConfirm()" @cancel="modalShow = false">
|
|
|
+ <view class="slot-content">
|
|
|
+ <view>
|
|
|
+ 您在使用我们的服务时,我们可能会收集和使用您的相关信息。我们希望通过本
|
|
|
+ <text class="text-blue underline">《用户协议及隐私政策》</text>
|
|
|
+ 向您说明,在使用我们的服务时,我们如何收集、使用、 储存和分享这些信息,以及我们为您提供的访问、更新、控制和保护这些信息的方式。本
|
|
|
+ <text @click="handleUserAgrement" class="text-blue underline">《用户协议</text>
|
|
|
+ <text class="text-blue">及</text>
|
|
|
+ <text @click="handlePrivacy" class="text-blue underline">隐私政策》</text>,希望您仔细阅读,充分理解协议中的内容后再点击同意。
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-modal>
|
|
|
+
|
|
|
+ <u-modal
|
|
|
+ :show="xunJianStore.modal.show"
|
|
|
+ title="提醒"
|
|
|
+ :zoom="false"
|
|
|
+ :showConfirmButton="true"
|
|
|
+ :showCancelButton="true"
|
|
|
+ :closeOnClickOverlay="true"
|
|
|
+ @confirm="xunJianStore.modalConfirm"
|
|
|
+ @cancel="xunJianStore.modal.show = false"
|
|
|
+ @close="xunJianStore.modal.show = false"
|
|
|
+ >
|
|
|
+ <view class="slot-content">
|
|
|
+ <view class="mb20">
|
|
|
+ <u-input v-model="xunJianStore.modal.exitPassword" placeholder="霸屏退出密码(必填)" border="bottom" style="padding: 6px 0px" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-modal>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+/*----------------------------------依赖引入-----------------------------------*/
|
|
|
+import { onLoad, onShow, onHide, onLaunch, onReady } from "@dcloudio/uni-app";
|
|
|
+import { reactive, getCurrentInstance, toRefs, inject, nextTick } from "vue";
|
|
|
+/*----------------------------------接口引入-----------------------------------*/
|
|
|
+/*----------------------------------组件引入-----------------------------------*/
|
|
|
+/*----------------------------------store引入-----------------------------------*/
|
|
|
+import { useStores, commonStores, xunJianStores } from "@/store/modules/index";
|
|
|
+/*----------------------------------公共方法引入-----------------------------------*/
|
|
|
+import config from "@/config";
|
|
|
+import { storageSystem } from "@/utils/storage";
|
|
|
+/*----------------------------------公共变量-----------------------------------*/
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
+const useStore = useStores();
|
|
|
+const commonStore = commonStores();
|
|
|
+const xunJianStore = xunJianStores();
|
|
|
+/*----------------------------------变量声明-----------------------------------*/
|
|
|
+const state = reactive({
|
|
|
+ /** login数据 */
|
|
|
+ phone: undefined,
|
|
|
+ verify: undefined,
|
|
|
+ switchText: "验证码登录",
|
|
|
+ username: undefined,
|
|
|
+ password: undefined,
|
|
|
+ isPassword: true,
|
|
|
+ /** 服务器配置数据 */
|
|
|
+ linkUrl: uni.getStorageSync("serveUrl"),
|
|
|
+ /** 用户隐私协议数据 */
|
|
|
+ uChecked: false,
|
|
|
+ modalShow: false,
|
|
|
+});
|
|
|
+
|
|
|
+const { phone, verify, switchText, username, password, isPassword, linkUrl, uChecked, modalShow } = toRefs(state);
|
|
|
+
|
|
|
+/**
|
|
|
+ * @跳转服务器配置
|
|
|
+ */
|
|
|
+function goSeverConfig() {
|
|
|
+ proxy.$tab.navigateTo("/pages/serveConfigSelect");
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * @登录方式切换
|
|
|
+ */
|
|
|
+function switchMode(value) {
|
|
|
+ if (value == 1) {
|
|
|
+ switchText.value = switchText.value == "验证码登录" ? "账号密码登录" : "验证码登录";
|
|
|
+ if (switchText.value == "验证码登录") {
|
|
|
+ phone.value = username.value;
|
|
|
+ } else {
|
|
|
+ username.value = phone.value;
|
|
|
+ }
|
|
|
+ } else if (value == 2) {
|
|
|
+ proxy.$tab.navigateTo("/pages/register");
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * @点击发送验证码
|
|
|
+ */
|
|
|
+function getVerifyCode() {
|
|
|
+ //#ifdef APP-PLUS || MP-WEIXIN
|
|
|
+ if (!uni.getStorageSync("serveUrl")) {
|
|
|
+ proxy.$modal.msg("首次账号登录请先配置服务器");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ //#endif
|
|
|
+
|
|
|
+ verify.value = undefined;
|
|
|
+ useStore.GetCodeImg({
|
|
|
+ phone: phone.value,
|
|
|
+ success: (res) => {
|
|
|
+ proxy.$modal.msgSuccess("发送成功");
|
|
|
+ },
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * @初始化
|
|
|
+ */
|
|
|
+function init() {
|
|
|
+ useStore.SetInterval("codeTime"); //调用倒计时定时器
|
|
|
+
|
|
|
+ //#ifdef H5
|
|
|
+ useStore.GetWxOpenId(1); //调用获取微信公众号openId
|
|
|
+
|
|
|
+ if (window.location.host) {
|
|
|
+ linkUrl.value = window.location.host;
|
|
|
+ // linkUrl.value = "172.16.120.165:13200";
|
|
|
+ // linkUrl.value = "localhost:81";
|
|
|
+ useStore.GetMobileTenantConfig({ url: linkUrl.value });
|
|
|
+ }
|
|
|
+ //#endif
|
|
|
+
|
|
|
+ //#ifdef APP-PLUS || MP-WEIXIN
|
|
|
+ if (uni.getStorageSync("serveUrl")) {
|
|
|
+ linkUrl.value = uni.getStorageSync("serveUrl");
|
|
|
+ // linkUrl.value = "localhost:81";
|
|
|
+ useStore.GetMobileTenantConfig({ url: linkUrl.value });
|
|
|
+ } else {
|
|
|
+ uni.setStorageSync("serveUrl", "manager.usky.cn");
|
|
|
+ commonStore.setServeList("manager.usky.cn", "");
|
|
|
+ linkUrl.value = uni.getStorageSync("serveUrl");
|
|
|
+ // linkUrl.value = "localhost:81";
|
|
|
+ useStore.GetMobileTenantConfig({ url: linkUrl.value });
|
|
|
+ }
|
|
|
+ //#endif
|
|
|
+}
|
|
|
+
|
|
|
+/** 点击提交按钮 */
|
|
|
+function submitRes() {
|
|
|
+ //#ifdef APP-PLUS || MP-WEIXIN
|
|
|
+ if (!uni.getStorageSync("serveUrl")) {
|
|
|
+ proxy.$modal.msg("首次登录请先进行服务器配置");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!uChecked.value) {
|
|
|
+ modalShow.value = true;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ //#endif
|
|
|
+
|
|
|
+ if (switchText.value == "验证码登录") {
|
|
|
+ if (!phone.value) {
|
|
|
+ proxy.$modal.msg("请输入手机号");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!/^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/.test(phone.value)) {
|
|
|
+ proxy.$modal.msg("请输入正确的手机号");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!verify.value) {
|
|
|
+ proxy.$modal.msg("请输入验证码");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (!username.value) {
|
|
|
+ proxy.$modal.msg("请输入账户");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!password.value) {
|
|
|
+ proxy.$modal.msg("请输入密码");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ login({
|
|
|
+ username: state.switchText == "账号密码登录" ? state.username : undefined,
|
|
|
+ password: state.switchText == "账号密码登录" ? state.password : undefined,
|
|
|
+ phone: state.switchText == "验证码登录" ? state.phone : undefined,
|
|
|
+ verify: state.switchText == "验证码登录" ? state.verify : undefined,
|
|
|
+ tenantId: useStore.tenantId,
|
|
|
+ cids: proxy.$settingStore.pushClientId || undefined,
|
|
|
+ type: proxy.$common.isWechatMp() ? "wx" : "app",
|
|
|
+ openId: proxy.$common.isWechatMp() ? localStorage.getItem("wxOpenId") : undefined,
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+/** 获取登录数据 */
|
|
|
+function login(data) {
|
|
|
+ proxy.$modal.loading("登录中,请耐心等待...");
|
|
|
+
|
|
|
+ useStore.Login(data).then(() => {
|
|
|
+ /** 获取用户信息 */
|
|
|
+ proxy.$modal.closeLoading();
|
|
|
+ useStore.GetInfo().then((res) => {
|
|
|
+ proxy.$tab.reLaunch("/pages/index");
|
|
|
+ proxy.$settingStore.initThemeColor(storageSystem.get("themeColor")); //初始化默认主题
|
|
|
+ });
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+/** 隐私弹窗确定事件 */
|
|
|
+function modalConfirm() {
|
|
|
+ state.uChecked = true;
|
|
|
+ state.modalShow = false;
|
|
|
+ setTimeout(() => {
|
|
|
+ submitRes();
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// 复选框chage事件
|
|
|
+function uCheckedChange(e) {
|
|
|
+ state.uChecked = e;
|
|
|
+}
|
|
|
+
|
|
|
+// 用户协议
|
|
|
+function handleUserAgrement() {
|
|
|
+ let site = config.appInfo.agreements[0];
|
|
|
+ proxy.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`);
|
|
|
+}
|
|
|
+
|
|
|
+// 隐私协议
|
|
|
+function handlePrivacy() {
|
|
|
+ let site = config.appInfo.agreements[1];
|
|
|
+ proxy.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`);
|
|
|
+}
|
|
|
+
|
|
|
+onShow(() => {
|
|
|
+ nextTick(() => {
|
|
|
+ init();
|
|
|
+ });
|
|
|
+});
|
|
|
+
|
|
|
+onLoad((options) => {});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+:deep() {
|
|
|
+ .u-modal {
|
|
|
+ .slot-content {
|
|
|
+ font-size: 16px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.login-container {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ background-color: $uni-bg-color;
|
|
|
+
|
|
|
+ .bgImage {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ z-index: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .middle {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 30px;
|
|
|
+ margin: auto;
|
|
|
+ margin-top: 30%;
|
|
|
+
|
|
|
+ &-top {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-bottom: 60px;
|
|
|
+
|
|
|
+ .logo {
|
|
|
+ height: 40px;
|
|
|
+ width: auto;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #000;
|
|
|
+ max-width: 50%;
|
|
|
+ // white-space: nowrap;
|
|
|
+ // overflow: hidden; //超出的文本隐藏
|
|
|
+ // text-overflow: ellipsis; //溢出用省略号显示
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-content {
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ margin: 30px 0 30px 0;
|
|
|
+ .title {
|
|
|
+ margin: auto auto auto 0;
|
|
|
+ color: #000;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .setting {
|
|
|
+ color: #2a98ff;
|
|
|
+ margin: auto 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .prompt {
|
|
|
+ position: absolute;
|
|
|
+ top: -35px;
|
|
|
+ right: 0px;
|
|
|
+ background-color: #2a98ff;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 25px;
|
|
|
+ display: inline-block;
|
|
|
+ color: #fff;
|
|
|
+ padding: 3px 5px;
|
|
|
+ border-radius: 3px;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ border: 5px solid transparent;
|
|
|
+ transform: rotate(90deg);
|
|
|
+ right: 5px;
|
|
|
+ bottom: -9px;
|
|
|
+ border-left-color: #2a98ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 登录页-服务器配置样式 开始
|
|
|
+ &-input {
|
|
|
+ :deep() {
|
|
|
+ .u-input {
|
|
|
+ height: 45px;
|
|
|
+ border: 0 !important;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ padding: 5px 12px !important;
|
|
|
+ background-color: #f5f6fa !important;
|
|
|
+ }
|
|
|
+ .input-placeholder {
|
|
|
+ color: #c0c4cc !important;
|
|
|
+ }
|
|
|
+ .uni-input-wrapper {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ .u-icon__icon {
|
|
|
+ font-size: 24px !important;
|
|
|
+ line-height: 24px !important;
|
|
|
+ color: gray !important;
|
|
|
+ }
|
|
|
+ .iconfont {
|
|
|
+ color: gray !important;
|
|
|
+ }
|
|
|
+ :-webkit-autofill {
|
|
|
+ caret-color: #000; // 设置光标颜色
|
|
|
+ // -webkit-text-fill-color: gray !important;
|
|
|
+ -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
|
|
|
+ background-color: transparent;
|
|
|
+ background-image: none;
|
|
|
+ transition: background-color 50000s ease-in-out 0s; //背景色透明 生效时长 过渡效果 启用时延迟的时间
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-switch {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ margin-top: 20px;
|
|
|
+ color: #96a6b5;
|
|
|
+
|
|
|
+ &-loginMethod {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-register {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-submit {
|
|
|
+ height: 45px;
|
|
|
+ line-height: 45px;
|
|
|
+ border-radius: 24px;
|
|
|
+ background: #2a98ff;
|
|
|
+ color: #fff;
|
|
|
+ border: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-agreed {
|
|
|
+ color: #96a6b5;
|
|
|
+ margin-top: 30px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: center;
|
|
|
+ > uni-view {
|
|
|
+ margin: auto 0;
|
|
|
+ }
|
|
|
+ > uni-text {
|
|
|
+ margin: auto 0;
|
|
|
+ }
|
|
|
+ // animation: roundRule 0.5s linear infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes roundRule {
|
|
|
+ 0% {
|
|
|
+ transform: translateX(0);
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ transform: translateX(-5px);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: translateX(0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ bottom: 20px;
|
|
|
+ .title {
|
|
|
+ text-align: center;
|
|
|
+ color: #96a6b5;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (min-width: 1280px) {
|
|
|
+ .middle {
|
|
|
+ margin-top: auto !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|