|
@@ -1,28 +1,18 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <z-paging ref="paging" bgColor="rgba(0,0,0,0)">
|
|
|
|
|
|
|
+ <z-paging ref="paging" bgColor="#fff">
|
|
|
<template #top>
|
|
<template #top>
|
|
|
- <up-navbar :fixed="false" title="登录注册">
|
|
|
|
|
|
|
+ <up-navbar :fixed="true" title="登录注册" bgColor="transparent">
|
|
|
<template #left>
|
|
<template #left>
|
|
|
- <!-- <image @click="$u.route({ type: 'switchTab', url: '/pages/list/index' })" class="home_icon" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images/common/home.png" mode="widthFix" /> -->
|
|
|
|
|
<up-icon @click="homeBack()" name="arrow-left" color="#333" size="40rpx"></up-icon>
|
|
<up-icon @click="homeBack()" name="arrow-left" color="#333" size="40rpx"></up-icon>
|
|
|
</template>
|
|
</template>
|
|
|
</up-navbar>
|
|
</up-navbar>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
+ <view class="h-620 w-100%" style="background: url('/static/images/plant/loginTopBg.png'); background-size: auto 100%; background-repeat: no-repeat; position: absolute; top: 0; left: 0; z-index: -1"> </view>
|
|
|
<view class="login-centent">
|
|
<view class="login-centent">
|
|
|
- <view class="login-logo-wrap p-rtv d-flex j-c a-c">
|
|
|
|
|
- <image class="bg-circle" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images/login/bg_circle.png" mode="aspectFit" />
|
|
|
|
|
- <image class="login-logo" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images/login/logo.png" mode="aspectFit" />
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="login-form pl-20 pd-25">
|
|
|
|
|
- <up-button type="primary" shape="circle" @click="$u.route({ url: '/pages/login/phone/phone', params: { redirect: encodeURIComponent(redirect) } })">
|
|
|
|
|
- <view class="d-flex a-c j-c">
|
|
|
|
|
- <!-- <image class="base-icon mr-20"
|
|
|
|
|
- src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images/login-phone/phone.png"
|
|
|
|
|
- mode="widthFix" /> -->
|
|
|
|
|
- 手机号验证码登录
|
|
|
|
|
- </view>
|
|
|
|
|
- </up-button>
|
|
|
|
|
- <view class="pd-20"></view>
|
|
|
|
|
|
|
+ <view class="login-logo-wrap p-rtv d-flex j-c a-c b-radius"></view>
|
|
|
|
|
+ <view v-if="!isShowPhoneLogin" class="login-form pl-20 pd-25 b-radius p-rtv">
|
|
|
|
|
+ <image class="w-100%" src="/static/images/plant/loginMidBg.png" mode="widthFix" style="position: absolute; top: 0; left: 0" />
|
|
|
|
|
+ <view class="pd-40"></view>
|
|
|
<template v-if="isBindPhone">
|
|
<template v-if="isBindPhone">
|
|
|
<up-button class="mb-40" @click="handleLogin" color="#28A94B" type="primary" shape="circle">
|
|
<up-button class="mb-40" @click="handleLogin" color="#28A94B" type="primary" shape="circle">
|
|
|
<view class="d-flex a-c j-c">
|
|
<view class="d-flex a-c j-c">
|
|
@@ -44,25 +34,93 @@
|
|
|
<view class="d-flex a-c f-s-24">
|
|
<view class="d-flex a-c f-s-24">
|
|
|
<text class="c-999">我已阅读并同意</text>
|
|
<text class="c-999">我已阅读并同意</text>
|
|
|
<text class="c-primary" @click="$u.route({ url: '/views/tool/agreement/agreement' })">《用户协议》</text>
|
|
<text class="c-primary" @click="$u.route({ url: '/views/tool/agreement/agreement' })">《用户协议》</text>
|
|
|
- <text class="c-666">、</text>
|
|
|
|
|
|
|
+ <text class="c-666">和</text>
|
|
|
<text class="c-primary" @click="$u.route({ url: '/views/tool/privacy/privacy' })">《隐私政策》</text>
|
|
<text class="c-primary" @click="$u.route({ url: '/views/tool/privacy/privacy' })">《隐私政策》</text>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
<official-account></official-account>
|
|
<official-account></official-account>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+ <view v-if="isShowPhoneLogin" class="login-form pl-20 pd-25 b-radius">
|
|
|
|
|
+ <up-form :model="forms" :rules="rules" ref="upFormRef" labelWidth="auto" labelPosition="top">
|
|
|
|
|
+ <up-form-item prop="phonenumber">
|
|
|
|
|
+ <up-input v-model="forms.phonenumber" fontSize="28rpx" :prefixIconStyle="prefixIconStyle" placeholderClass="placeholder" :customStyle="customStyle" maxlength="11" placeholder="请输入您的手机号" border="none" clearable shape="circle">
|
|
|
|
|
+ <template #prefix>
|
|
|
|
|
+ <view class="d-flex a-c mr-20">
|
|
|
|
|
+ <image class="small-icon" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images/login-phone/tel_icon.png" mode="widthFix" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </up-input>
|
|
|
|
|
+ </up-form-item>
|
|
|
|
|
+ <up-form-item prop="smsCode">
|
|
|
|
|
+ <up-input v-model="forms.smsCode" fontSize="28rpx" :prefixIconStyle="prefixIconStyle" placeholderClass="placeholder" :customStyle="customStyle" placeholder="请输入验证码" border="none" clearable shape="circle">
|
|
|
|
|
+ <template #prefix>
|
|
|
|
|
+ <view class="d-flex a-c mr-20">
|
|
|
|
|
+ <image class="small-icon" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images/login-phone/sms_code_icon.png" mode="widthFix" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <template #suffix>
|
|
|
|
|
+ <up-button :disabled="disabled" @click="sendCode" style="color: #2a6d52" type="primary" color="#F6F6F6">
|
|
|
|
|
+ <up-count-down ref="countDown" @change="onChange" :autoStart="false" :time="60 * 1000" format="(ss)" millisecond @finish="finish">
|
|
|
|
|
+ <text>{{ codeText }}</text>
|
|
|
|
|
+ </up-count-down>
|
|
|
|
|
+ </up-button>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </up-input>
|
|
|
|
|
+ </up-form-item>
|
|
|
|
|
+ <view class="pd-40"></view>
|
|
|
|
|
+ <up-button type="primary" @click="save" shape="circle">登录</up-button>
|
|
|
|
|
+ <up-form-item prop="aloneChecked">
|
|
|
|
|
+ <view class="d-flex a-c pd-10" @click="clickAgrees">
|
|
|
|
|
+ <up-checkbox activeColor="#2A6D52" size="32rpx" name="agree" usedAlone v-model:checked="forms.aloneChecked"></up-checkbox>
|
|
|
|
|
+ <view class="d-flex a-c f-s-24">
|
|
|
|
|
+ <text class="c-999">我已阅读并同意</text>
|
|
|
|
|
+ <text class="c-primary" @click="$u.route({ url: '/views/tool/agreement/agreement' })">《用户协议》</text>
|
|
|
|
|
+ <text class="c-666">、</text>
|
|
|
|
|
+ <text class="c-primary" @click="$u.route({ url: '/views/tool/privacy/privacy' })">《隐私政策》</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </up-form-item>
|
|
|
|
|
+ </up-form>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <up-divider text="更多登录方式" class="pd-30"></up-divider>
|
|
|
|
|
+ <view class="d-flex j-sa pl-20 pr-20">
|
|
|
|
|
+ <view v-if="!isShowPhoneLogin" class="d-flex flex-cln j-c a-c" @click="isShowPhoneLogin = true">
|
|
|
|
|
+ <view class="bc-#f2f2f2 d-flex j-c a-c">
|
|
|
|
|
+ <image class="w-95" src="/static/images/plant/accountNumber.png" mode="widthFix" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="c-#ccc f-s-24 pt-10">账号密码</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view v-if="isShowPhoneLogin" class="d-flex flex-cln j-c a-c" @click="isShowPhoneLogin = false">
|
|
|
|
|
+ <view class="bc-#f2f2f2 d-flex j-c a-c">
|
|
|
|
|
+ <image class="w-95" src="/static/images/plant/QuickLogin.png" mode="widthFix" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="c-#ccc f-s-24 pt-10">一键登录</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="d-flex flex-cln j-c a-c">
|
|
|
|
|
+ <view class="bc-#f2f2f2 d-flex j-c a-c">
|
|
|
|
|
+ <image class="w-95" src="/static/images/plant/SZYYLogo.png" mode="widthFix" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="c-#ccc f-s-24 pt-10">数字云药</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="d-flex flex-cln j-c a-c">
|
|
|
|
|
+ <view class="bc-#f2f2f2 d-flex j-c a-c">
|
|
|
|
|
+ <image class="w-95" src="/static/images/plant/cxlmLogo.png" mode="widthFix" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="c-#ccc f-s-24 pt-10">中药材创新联盟</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
- <image class="login-bttom-bg" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images/login/bg_bottom.png" mode="widthFix" />
|
|
|
|
|
|
|
+ <image class="login-bttom-bg" src="/static/images/plant/loginBottomBg.png" mode="widthFix" />
|
|
|
</z-paging>
|
|
</z-paging>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
import { ref, getCurrentInstance } from 'vue';
|
|
import { ref, getCurrentInstance } from 'vue';
|
|
|
-import { useInfoStore } from '@/store';
|
|
|
|
|
|
|
+import { useInfoStore, useSwitchStore } from '@/store';
|
|
|
import config from '@/config';
|
|
import config from '@/config';
|
|
|
-import { useRouter } from 'vue-router';
|
|
|
|
|
-import { getCurrentPage } from '@/utils/public';
|
|
|
|
|
|
|
+import { debounce } from 'uview-plus';
|
|
|
import { onLoad } from '@dcloudio/uni-app';
|
|
import { onLoad } from '@dcloudio/uni-app';
|
|
|
-import { updateUserInfo } from '@/utils/common';
|
|
|
|
|
|
|
+import { goToSwitchPage } from '@/utils/public';
|
|
|
import { recursiveDecodeURIComponent } from '@/utils/ruoyi';
|
|
import { recursiveDecodeURIComponent } from '@/utils/ruoyi';
|
|
|
import { useClientRequest } from '@/utils/request';
|
|
import { useClientRequest } from '@/utils/request';
|
|
|
const pages = ref(getCurrentPages());
|
|
const pages = ref(getCurrentPages());
|
|
@@ -71,6 +129,8 @@ const paging = ref(null);
|
|
|
const redirect = ref('');
|
|
const redirect = ref('');
|
|
|
// 判断是否绑定手机号
|
|
// 判断是否绑定手机号
|
|
|
const isBindPhone = ref(0);
|
|
const isBindPhone = ref(0);
|
|
|
|
|
+// 判断是否展示手机号登录
|
|
|
|
|
+const isShowPhoneLogin = ref(false);
|
|
|
const form = ref({
|
|
const form = ref({
|
|
|
aloneChecked: false,
|
|
aloneChecked: false,
|
|
|
phoneCode: '',
|
|
phoneCode: '',
|
|
@@ -137,7 +197,15 @@ const weixinLogin = async () => {
|
|
|
title: '登录中...',
|
|
title: '登录中...',
|
|
|
mask: true,
|
|
mask: true,
|
|
|
});
|
|
});
|
|
|
- await infoStore.wxLogin(form.value);
|
|
|
|
|
|
|
+ //判断是什么类型的登录
|
|
|
|
|
+ if (isShowPhoneLogin) {
|
|
|
|
|
+ console.log(form.value, 'form.value');
|
|
|
|
|
+
|
|
|
|
|
+ await infoStore.wxLogin(form.value);
|
|
|
|
|
+ } else {
|
|
|
|
|
+ await infoStore.wxLogin(forms.value);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
// 调用获取用户信息接口
|
|
// 调用获取用户信息接口
|
|
|
infoStore.getUserInfo();
|
|
infoStore.getUserInfo();
|
|
|
console.log('调用获取用户信息接口');
|
|
console.log('调用获取用户信息接口');
|
|
@@ -146,14 +214,15 @@ const weixinLogin = async () => {
|
|
|
uni.hideLoading();
|
|
uni.hideLoading();
|
|
|
// 重定向或跳转首页
|
|
// 重定向或跳转首页
|
|
|
// 获取redirect参数
|
|
// 获取redirect参数
|
|
|
- const redirectUrl = redirect.value || '/pages/plant/index';
|
|
|
|
|
|
|
+ const redirectUrl = redirect.value || '/pages/switch/index1';
|
|
|
// switchTab 页面
|
|
// switchTab 页面
|
|
|
- const switchTabs = ['/pages/plant/index'];
|
|
|
|
|
|
|
+ const switchTabs = ['/pages/switch/index1'];
|
|
|
if (switchTabs.includes(redirectUrl)) {
|
|
if (switchTabs.includes(redirectUrl)) {
|
|
|
- uni.$u.route({
|
|
|
|
|
- type: 'switchTab',
|
|
|
|
|
- url: redirectUrl,
|
|
|
|
|
- });
|
|
|
|
|
|
|
+ //从缓存中获取参数,然后跳转
|
|
|
|
|
+ const switchStore = useSwitchStore();
|
|
|
|
|
+ const params = switchStore.getAndClearParamsForPage(redirectUrl);
|
|
|
|
|
+ // 使用公共函数跳转到switch页面并传递参数
|
|
|
|
|
+ goToSwitchPage(redirectUrl, params);
|
|
|
return;
|
|
return;
|
|
|
}
|
|
}
|
|
|
uni.$u.route({
|
|
uni.$u.route({
|
|
@@ -161,8 +230,9 @@ const weixinLogin = async () => {
|
|
|
url: redirectUrl,
|
|
url: redirectUrl,
|
|
|
});
|
|
});
|
|
|
} catch (error) {
|
|
} catch (error) {
|
|
|
|
|
+ console.log(error);
|
|
|
uni.showToast({
|
|
uni.showToast({
|
|
|
- title: error.message || '登录失败,请稍后重试',
|
|
|
|
|
|
|
+ title: error.msg || '登录失败,请稍后重试',
|
|
|
icon: 'none',
|
|
icon: 'none',
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
@@ -209,10 +279,101 @@ const homeBack = () => {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
|
|
+//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
|
|
|
|
|
+const codeText = ref('获取验证码');
|
|
|
|
|
+const countDown = ref(null);
|
|
|
|
|
+const upFormRef = ref(null);
|
|
|
|
|
+const timeData = ref({});
|
|
|
|
|
+const disabled = ref(false);
|
|
|
|
|
+const finish = (e) => {
|
|
|
|
|
+ disabled.value = false;
|
|
|
|
|
+ codeText.value = '重新发送';
|
|
|
|
|
+};
|
|
|
|
|
+const forms = ref({
|
|
|
|
|
+ phonenumber: '',
|
|
|
|
|
+ smsCode: '',
|
|
|
|
|
+ clientId: config.clientId,
|
|
|
|
|
+ grantType: 'app_sms',
|
|
|
|
|
+ aloneChecked: false,
|
|
|
|
|
+ mverify: false,
|
|
|
|
|
+});
|
|
|
|
|
+const rules = reactive({
|
|
|
|
|
+ phonenumber: [
|
|
|
|
|
+ { required: true, message: '请输入手机号', trigger: 'blur' },
|
|
|
|
|
+ { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },
|
|
|
|
|
+ ],
|
|
|
|
|
+ smsCode: [
|
|
|
|
|
+ { required: true, message: '请输入验证码', trigger: 'blur' },
|
|
|
|
|
+ { pattern: /^[0-9]*$/, message: '验证码格式不正确', trigger: 'blur' },
|
|
|
|
|
+ ],
|
|
|
|
|
+});
|
|
|
|
|
+const onChange = (e) => {
|
|
|
|
|
+ timeData.value = e;
|
|
|
|
|
+ if (+e.seconds) {
|
|
|
|
|
+ codeText.value = `重新发送(${e.seconds + 1})`;
|
|
|
|
|
+ }
|
|
|
|
|
+};
|
|
|
|
|
+const customStyle = reactive({
|
|
|
|
|
+ padding: '0 50rpx',
|
|
|
|
|
+ backgroundColor: '#F6F6F6',
|
|
|
|
|
+ height: '98rpx',
|
|
|
|
|
+});
|
|
|
|
|
+const prefixIconStyle = reactive({
|
|
|
|
|
+ // flex上下居中
|
|
|
|
|
+ display: 'flex',
|
|
|
|
|
+ alignItems: 'center',
|
|
|
|
|
+ marginRight: '20rpx',
|
|
|
|
|
+});
|
|
|
|
|
+const clickAgrees = () => {
|
|
|
|
|
+ forms.value.aloneChecked = !forms.value.aloneChecked;
|
|
|
|
|
+};
|
|
|
|
|
+const sendCode = () => {
|
|
|
|
|
+ debounce(async () => {
|
|
|
|
|
+ upFormRef.value?.validateField('phonenumber', (errorsRes) => {
|
|
|
|
|
+ if (!errorsRes.length) {
|
|
|
|
|
+ getCode();
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ }, 500);
|
|
|
|
|
+};
|
|
|
|
|
+// 获取验证码
|
|
|
|
|
+const getCode = async () => {
|
|
|
|
|
+ const res = await useClientRequest.get('/app/auth/sendVercode', { phone: forms.value.phonenumber }, false);
|
|
|
|
|
+ if (res.code === 200) {
|
|
|
|
|
+ uni.showToast({
|
|
|
|
|
+ title: '验证码发送成功',
|
|
|
|
|
+ icon: 'none',
|
|
|
|
|
+ });
|
|
|
|
|
+ countDown.value?.start();
|
|
|
|
|
+ disabled.value = true;
|
|
|
|
|
+ }
|
|
|
|
|
+};
|
|
|
|
|
+const save = () => {
|
|
|
|
|
+ debounce(async () => {
|
|
|
|
|
+ upFormRef.value
|
|
|
|
|
+ ?.validate()
|
|
|
|
|
+ .then((res) => {
|
|
|
|
|
+ if (res) {
|
|
|
|
|
+ // 判断是否勾选隐私协议
|
|
|
|
|
+ if (!forms.value.aloneChecked) {
|
|
|
|
|
+ uni.showToast({
|
|
|
|
|
+ title: '请阅读并同意用户协议和隐私政策',
|
|
|
|
|
+ icon: 'none',
|
|
|
|
|
+ });
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ weixinLogin();
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ .catch((error) => {});
|
|
|
|
|
+ }, 500);
|
|
|
|
|
+};
|
|
|
|
|
+//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
|
|
|
|
|
+
|
|
|
onLoad((options) => {
|
|
onLoad((options) => {
|
|
|
// 获取redirect参数
|
|
// 获取redirect参数
|
|
|
const redirectStr = options.redirect ? recursiveDecodeURIComponent(options.redirect) : '';
|
|
const redirectStr = options.redirect ? recursiveDecodeURIComponent(options.redirect) : '';
|
|
|
- console.log(redirectStr);
|
|
|
|
|
|
|
+ console.log(redirectStr, 'redirectStr');
|
|
|
redirect.value = redirectStr;
|
|
redirect.value = redirectStr;
|
|
|
// 判断用户是否绑定手机号
|
|
// 判断用户是否绑定手机号
|
|
|
hasBindPhone();
|
|
hasBindPhone();
|
|
@@ -222,7 +383,7 @@ onLoad((options) => {
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
.login-logo-wrap {
|
|
.login-logo-wrap {
|
|
|
width: 750rpx;
|
|
width: 750rpx;
|
|
|
- height: 750rpx;
|
|
|
|
|
|
|
+ height: 550rpx;
|
|
|
margin: auto;
|
|
margin: auto;
|
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
}
|
|
}
|
|
@@ -237,7 +398,7 @@ onLoad((options) => {
|
|
|
width: 770rpx;
|
|
width: 770rpx;
|
|
|
height: 770rpx;
|
|
height: 770rpx;
|
|
|
// 360度旋转
|
|
// 360度旋转
|
|
|
- animation: rotate 10s linear infinite;
|
|
|
|
|
|
|
+ // animation: rotate 10s linear infinite;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
@keyframes rotate {
|
|
@keyframes rotate {
|
|
@@ -254,7 +415,10 @@ onLoad((options) => {
|
|
|
width: 493rpx;
|
|
width: 493rpx;
|
|
|
height: 284rpx;
|
|
height: 284rpx;
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+.login-form {
|
|
|
|
|
+ // background: linear-gradient(to bottom, #d5f7d6 0%, #daf7da 5px, #def7e0 15px, #fff 20px, #fff 100%);
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+}
|
|
|
.login-bttom-bg {
|
|
.login-bttom-bg {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
left: 0;
|
|
left: 0;
|