feat: 项目初始化
This commit is contained in:
tianyongbao
278
src/pages/login/index.vue
Normal file
278
src/pages/login/index.vue
Normal file
@@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<view class="login_home">
|
||||
<nut-row>
|
||||
<nut-col :span="24" class="login_tiitle">
|
||||
<div class="title">你好，</div>
|
||||
<div class="title">欢迎登录鱼测云</div>
|
||||
</nut-col>
|
||||
|
||||
<nut-popup
|
||||
v-model:visible="show"
|
||||
position="bottom"
|
||||
:closeable="false"
|
||||
:overlay="false"
|
||||
round
|
||||
:style="{ height: '83%' }"
|
||||
>
|
||||
<nut-col :span="24">
|
||||
<nut-config-provider :theme-vars="themeVars">
|
||||
<view :style="{ padding: '0 16px', marginTop: '20px' }">
|
||||
<nut-button
|
||||
block
|
||||
type="primary"
|
||||
size="large"
|
||||
open-type="getPhoneNumber"
|
||||
@getphonenumber="wxLogin"
|
||||
:loading="isLoading"
|
||||
v-if="loginForm.agreement"
|
||||
>手机号一键登录</nut-button
|
||||
>
|
||||
<nut-button block size="large" type="primary" v-else @click="wxLoginCheck"
|
||||
>手机号一键登录</nut-button
|
||||
>
|
||||
<nut-divider> OR </nut-divider>
|
||||
<nut-button
|
||||
block
|
||||
type="primary"
|
||||
size="large"
|
||||
:style="{
|
||||
fontWeight: 'bold',
|
||||
fontSize: '14px !important',
|
||||
color: '#09B8C2 !important',
|
||||
}"
|
||||
color="#E7F8F9"
|
||||
@click="login"
|
||||
>其它手机号登录</nut-button
|
||||
>
|
||||
<!-- 底部协议 -->
|
||||
<view class="container agrBottom">
|
||||
<view>
|
||||
<nut-checkbox v-model="loginForm.agreement" />
|
||||
</view>
|
||||
<view class="font_28 c_888 view_f"
|
||||
>我已阅读<view :style="{ color: '#09B8C2' }" @click="toAgreement()"
|
||||
>用户使用协议</view
|
||||
>和<view :style="{ color: '#09B8C2' }" @click="toPriAgreement()"
|
||||
>隐私政策</view
|
||||
>并理解相关条款内容</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</nut-config-provider>
|
||||
</nut-col>
|
||||
|
||||
<nut-col
|
||||
:span="24"
|
||||
@click="unlogin"
|
||||
class="agrBottom2"
|
||||
:style="{
|
||||
fontWeight: 'bold',
|
||||
fontSize: '14px !important',
|
||||
color: '#09B8C2 !important',
|
||||
marginTop: '10rpx',
|
||||
textAlign: 'center',
|
||||
}"
|
||||
>
|
||||
暂不登录
|
||||
</nut-col>
|
||||
</nut-popup>
|
||||
<!-- 弹出层提示 -->
|
||||
<nut-toast :msg="state.msg" v-model:visible="state.show" :type="state.type" />
|
||||
</nut-row>
|
||||
</view>
|
||||
</template>
|
||||
<script setup lang="ts" name="Login">
|
||||
import { loginFormType } from "./types";
|
||||
import { stateType } from "@/utils/types";
|
||||
import { loginWxToPhone } from "@/api/login";
|
||||
import Taro from "@tarojs/taro";
|
||||
// 已阅读参数
|
||||
const instance = Taro.getCurrentInstance();
|
||||
const store: any = inject("store");
|
||||
const agreement = instance.router.params.agreement;
|
||||
const show = ref(true);
|
||||
const loginForm: loginFormType = reactive({
|
||||
phonenumber: "",
|
||||
code: "",
|
||||
identity: false,
|
||||
agreement: agreement ? true : false,
|
||||
});
|
||||
const themeVars = ref({
|
||||
formItemLabelFontSize: "15px",
|
||||
cellBorderRadius: "0px",
|
||||
cellBoxShadow: "0px",
|
||||
checkboxLabelMarginLeft: "0px",
|
||||
checkboxMarginRight: "2px",
|
||||
});
|
||||
const state: stateType = reactive({
|
||||
msg: "",
|
||||
type: "text",
|
||||
center: true,
|
||||
show: false,
|
||||
});
|
||||
const isLoading = ref(false);
|
||||
/** -----------------method start----------------- */
|
||||
Taro.useDidShow(() => {
|
||||
if(agreement){
|
||||
loginForm.agreement = true
|
||||
}else{
|
||||
loginForm.agreement = false
|
||||
}
|
||||
Taro.setStorageSync("UnLogin", 1);
|
||||
store.updateUnLogin(1);
|
||||
})
|
||||
/** 手机号码登录 */
|
||||
function login() {
|
||||
if (!loginForm.agreement) {
|
||||
state.msg = "请阅读用户协议";
|
||||
state.show = true;
|
||||
return;
|
||||
}
|
||||
// 跳转手机号登录
|
||||
Taro.navigateTo({ url: "/pages/login/loginPhone" });
|
||||
}
|
||||
function wxLoginCheck() {
|
||||
if (!loginForm.agreement) {
|
||||
state.msg = "请阅读用户协议";
|
||||
state.show = true;
|
||||
return;
|
||||
}
|
||||
}
|
||||
/** 微信登录 */
|
||||
function wxLogin(e) {
|
||||
isLoading.value = true;
|
||||
if (e.detail.code) {
|
||||
Taro.login({
|
||||
success: function (res) {
|
||||
if (res.code) {
|
||||
loginWxToPhone({ code: e.detail.code, js_code: res.code })
|
||||
.then((res) => {
|
||||
if (res.statusCode == 200) {
|
||||
Taro.setStorageSync(
|
||||
"ReTime",
|
||||
res.data.createdTime
|
||||
? formatDate(new Date(res.data.createdTime))
|
||||
: formatDate(new Date())
|
||||
);
|
||||
Taro.setStorageSync("UnLogin", 2);
|
||||
Taro.setStorageSync("UserName", res.data.userName);
|
||||
Taro.setStorageSync("Phone", res.data.mobilePhone);
|
||||
Taro.setStorageSync("UserId", res.data.id);
|
||||
store.updateRootUserId(res.data.id);
|
||||
store.updateUserId(res.data.id);
|
||||
store.updateUnLogin(2);
|
||||
store.updateRootUserName(res.data.userName);
|
||||
store.updateLoginStatus(0);
|
||||
state.msg = "登录成功";
|
||||
state.show = true;
|
||||
Taro.switchTab({
|
||||
url: "/pages/main/home",
|
||||
});
|
||||
return;
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
isLoading.value = false;
|
||||
});
|
||||
} else {
|
||||
state.msg = "登录失败";
|
||||
state.show = true;
|
||||
isLoading.value = false;
|
||||
}
|
||||
},
|
||||
fail: function () {
|
||||
state.msg = "登录失败";
|
||||
state.show = true;
|
||||
isLoading.value = false;
|
||||
},
|
||||
});
|
||||
} else {
|
||||
state.msg = "登录失败";
|
||||
state.show = true;
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
/** 查看用户协议 */
|
||||
function toAgreement() {
|
||||
Taro.redirectTo({
|
||||
url: "/agreement/index?phonenumber=" + loginForm.phonenumber + "&pages=login",
|
||||
});
|
||||
}
|
||||
/** 隐私协议 */
|
||||
function toPriAgreement() {
|
||||
Taro.redirectTo({
|
||||
url: "/agreement/indexpri?phonenumber=" + loginForm.phonenumber + "&pages=login",
|
||||
});
|
||||
}
|
||||
Taro.useDidShow(() => {
|
||||
if (!Taro.getStorageSync("Access-Token")) {
|
||||
Taro.clearStorageSync();
|
||||
} else {
|
||||
Taro.switchTab({
|
||||
url: "/pages/main/home",
|
||||
});
|
||||
}
|
||||
});
|
||||
/** 暂不登录 */
|
||||
function unlogin() {
|
||||
Taro.setStorageSync("UnLogin", 1);
|
||||
store.updateUnLogin(1);
|
||||
Taro.switchTab({
|
||||
url: "/pages/main/home",
|
||||
});
|
||||
}
|
||||
/** -----------------method end------------------- */
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.login_home {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-size: 100% 100%;
|
||||
position: fixed;
|
||||
margin: 0;
|
||||
background: linear-gradient(90deg, #74dce2 0%, #ddf7f2 100%);
|
||||
|
||||
font-size: 32px;
|
||||
font-family: "PingFang SC";
|
||||
font-weight: 400;
|
||||
|
||||
.login_tiitle {
|
||||
padding: 20px !important;
|
||||
|
||||
.title {
|
||||
font-size: 46px;
|
||||
color: #000;
|
||||
font-family: "PingFang SC";
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
|
||||
.itemLabel {
|
||||
color: #000;
|
||||
font-family: "PingFang SC";
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.code {
|
||||
color: #09b8c2;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.agrBottom {
|
||||
position: fixed;
|
||||
bottom: 50%;
|
||||
left: 2%;
|
||||
}
|
||||
.agrBottom2 {
|
||||
position: fixed;
|
||||
bottom: 45%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user