jackyu66gitandCursor
6e97f01378
- 主包仅保留 5 个 Tab 页，其余页面迁入 subPackages - login-pop 177KB base64 背景改为 static/n-login/login-bg.jpg（16KB） - H5 缓存版本 202608283 Co-authored-by: Cursor <cursoragent@cursor.com>
285 lines
6.9 KiB
Vue
285 lines
6.9 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- <myNav title="愈心谷" bgColor="nonoe" titleColor="#000" :isJcenter="true" :backIcon="false" :backHome="false"
|
||
:flex="false"></myNav> -->
|
||
<image src="/static/n-login/login-title.png"
|
||
style="margin-top: 256rpx;width:528rpx;height: 110rpx;position: absolute;"></image>
|
||
|
||
<view style="width: 550rpx; height: 96rpx;
|
||
border-radius: 1001rpx; opacity: 1;
|
||
display: flex; margin-top: auto;
|
||
justify-content: center; align-items: center;
|
||
padding: 8rpx 40rpx;
|
||
background: linear-gradient(180deg, #FF9079 0%, #F37155 100%);
|
||
;position: absolute;bottom: 120rpx;" @click="loginBtn">
|
||
<text style="color: #FFFFFF;
|
||
font-family: SourceHanSansBold;ont-variation-settings: 'opsz' auto;
|
||
font-size: 36rpx;
|
||
line-height: normal;
|
||
letter-spacing: 0px;">
|
||
登录
|
||
</text>
|
||
</view>
|
||
<text style="color: #98301B;
|
||
font-family: SourceHanSansBold;ont-variation-settings: 'opsz' auto;
|
||
position: absolute;bottom: 60rpx;
|
||
font-size: 28rpx;
|
||
line-height: normal;
|
||
letter-spacing: 0px;">
|
||
专业的心理健康服务平台
|
||
</text>
|
||
<uni-popup ref="loginPop" type="bottom" :animation="true" :safe-area="false">
|
||
<view style="display: flex; justify-content: center;
|
||
background-color: #fcfcfc;height: 475rpx;border-radius: 20rpx;">
|
||
<view style="width: 696rpx;display: flex;justify-content: space-evenly;align-items: center;
|
||
flex-direction: column;letter-spacing: 2rpx;">
|
||
<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
|
||
<text style="font-family: SourceHanSansBold;font-size: 35rpx;">
|
||
手机号快捷登录
|
||
</text>
|
||
<view style="margin-top: 20rpx;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start;">
|
||
<view @click="onAgree">
|
||
<view v-if="agree" class="no-choice">
|
||
<view class="choice-selected"></view>
|
||
</view>
|
||
<view v-else class="no-choice"></view>
|
||
</view>
|
||
<text style="font-size: 22rpx;color: #76808b;line-height: 40rpx;margin-left: 20rpx;">
|
||
在你使用愈心谷心理服务咨询之前，请仔细阅读
|
||
<text style="color: #007aff;" @click="toShowPop">《愈心谷咨询小程序隐私保护指引》</text>
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<button v-if="agree" open-type="getPhoneNumber"
|
||
style="width: 90%;border-radius: 40rpx;background-color: #007aff;"
|
||
@getphonenumber="getphonenumber" type="primary">授权登录</button>
|
||
<button v-else style="width: 90%;border-radius: 40rpx;background-color: #007aff;"
|
||
@click="onLogin" type="primary">授权登录</button>
|
||
<text style="font-size: 30rpx;color: #76808b;" @click="noLogin">
|
||
暂不登录
|
||
</text>
|
||
</view>
|
||
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
<ShowPop v-if="showPopFlag" :code="showPopCode" @closeProcotolPop="closeProcotolPop"></ShowPop>
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref
|
||
} from 'vue'
|
||
import myNav from '@/components/my-nav.vue'
|
||
import {
|
||
urls
|
||
} from '@/util/apiUrl.js'
|
||
import dohttp from '@/util/requestConfig.js'
|
||
import ShowPop from "@/components/show-pop/show-pop.vue";
|
||
|
||
const showPopFlag = ref(false)
|
||
const agree = ref(false)
|
||
const showPopCode = ref("")
|
||
const loginPop = ref()
|
||
const type = ref()
|
||
const path = ref()
|
||
onLoad((option) => {
|
||
type.value = option.type
|
||
path.value = option.path
|
||
})
|
||
const onAgree = ()=> {
|
||
agree.value = !agree.value
|
||
}
|
||
const toShowPop=()=>{
|
||
|
||
showPopFlag.value = true
|
||
showPopCode.value = "privacy_protection_agreement"
|
||
}
|
||
const closeProcotolPop = ()=>{
|
||
showPopFlag.value = false
|
||
}
|
||
onMounted(() => {
|
||
setTimeout(() => {
|
||
loginPop.value.open("bottom")
|
||
}, 500)
|
||
})
|
||
|
||
const loginBtn = (async() => {
|
||
loginPop.value.open("bottom")
|
||
// let code = await getCode();
|
||
// toLogin(code, null, null)
|
||
|
||
|
||
})
|
||
const userInfo = ref({
|
||
token: '',
|
||
})
|
||
|
||
const onLogin = ()=> {
|
||
if (!agree.value){
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '请阅读并同意《愈心谷咨询小程序隐私保护指引》',
|
||
showCancel: false,
|
||
success: function (res) {
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
const getphonenumber = async (params) => {
|
||
if (params.detail.errMsg == "getPhoneNumber:ok") {
|
||
const {
|
||
encryptedData,
|
||
iv
|
||
} = params.detail;
|
||
let code = await getCode();
|
||
toLogin(code, encryptedData, iv)
|
||
} else {
|
||
|
||
}
|
||
|
||
}
|
||
|
||
const noLogin = () => {
|
||
if (type.value == 1 || type.value == 3) {
|
||
uni.reLaunch({
|
||
url: "/pages/index/index"
|
||
})
|
||
} else {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
}
|
||
}
|
||
|
||
const toLogin = (code, encryptedData, iv) => {
|
||
const params = {
|
||
grantType: "mini_app",
|
||
account: code,
|
||
}
|
||
|
||
|
||
let others = {
|
||
encryptedData: encryptedData,
|
||
iv: iv,
|
||
code: code
|
||
}
|
||
params.others = JSON.stringify(others)
|
||
dohttp.post(urls.loginUrl, params).then((result) => {
|
||
userInfo.value.token = result.accessToken
|
||
uni.setStorageSync('token', result.accessToken)
|
||
loginPop.value.close()
|
||
|
||
getUserInfo()
|
||
})
|
||
}
|
||
const getUserInfo = () => {
|
||
dohttp.get(urls.getSelfInfo).then((result) => {
|
||
const userinfo = {
|
||
id: result.id,
|
||
avatarUrl: result.avatarUrl,
|
||
nickName: result.nickName
|
||
}
|
||
|
||
uni.setStorageSync('userinfo', userinfo)
|
||
if (type.value == 1) {
|
||
uni.reLaunch({
|
||
url: "/pages/index/index"
|
||
})
|
||
} else if (type.value == 3) {
|
||
uni.reLaunch({
|
||
url: path.value
|
||
})
|
||
} else {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
}
|
||
})
|
||
|
||
}
|
||
|
||
|
||
const onShareAppMessage = () => {
|
||
return {
|
||
title: '快来体验一下吧~',
|
||
path: '/pages/index/index', // 分享的路径
|
||
};
|
||
};
|
||
|
||
const onShareTimeline = () => {
|
||
return {
|
||
title: '快来体验一下吧~',
|
||
query: 'id=8', // 分享路径的参数
|
||
};
|
||
};
|
||
|
||
const getCode = async () => {
|
||
return new Promise((success, fail) => {
|
||
uni.login({
|
||
provider: 'weixin',
|
||
success: function(loginRes) {
|
||
console.log(loginRes)
|
||
success(loginRes.code)
|
||
},
|
||
fail: function(errInfo) {
|
||
fail(errInfo)
|
||
uni.showToast({
|
||
title: `微信授权登录失败，请重试`,
|
||
icon: 'none'
|
||
})
|
||
uni.reLaunch({
|
||
url: "/pages/index/index"
|
||
})
|
||
}
|
||
});
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.content {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-image: url('/static/n-login/login-bg.jpg');
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 颜色覆盖层 */
|
||
.content::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(180deg, #FFF7F5 7%, rgba(255, 247, 245, 0.92) 21%, rgba(240, 235, 234, 0.6266) 37%,
|
||
rgba(216, 216, 216, 0) 51%);
|
||
}
|
||
|
||
|
||
.no-choice {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
box-sizing: border-box;
|
||
border: 1px solid #606271;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.choice-selected {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
border-radius: 50%;
|
||
background: #EA4E2D;
|
||
}
|
||
</style> |