JM-MiniApp/pages/user/index.vue
2023-10-25 23:45:00 +08:00

277 lines
7.7 KiB
Vue

<script setup>
// 引入依赖
import { onLoad,onShow } from "@dcloudio/uni-app"
import mySwiper from "@/components/mySwiper.vue"
import {ref,onMounted,nextTick} from "vue"
import {useStore} from '@/store/index.js'
const store = useStore()
import api from "@/api/index"
import custom from "@/utils/index.js"
onShow(() => {
getInfo()
})
// 变量
const avatar = ref('')
const res_form = ref(null)
const is_login = ref(null)
const userinfo = ref(null)
const newUser = ref(null)
// const avatarUrl = ref(null)
const nickname = ref('')
// 函数
function getInfo(){
is_login.value = custom.checkLogin()
// console.log(is_login.value)
if(is_login.value) {
avatar.value = uni.getStorageSync('avatarUrl')
userinfo.value = JSON.parse(uni.getStorageSync('userInfo'))
}
}
function toLogin(token_info) {
uni.navigateTo({
url:"/pages/login/login?token_info="+token_info
})
}
function toDetail(type) {
let url = ''
switch(type){
case 1:
url= ' '
break;
case 2: // 我的收藏
url= './star'
break;
case 3: // 设置
url= './setting'
break;
case 4: // 问题反馈
url= './feedback'
break;
default:
url= ' '
break;
}
uni.navigateTo({
url
})
}
function toUserInfo() {
if(is_login.value) {
uni.navigateTo({
url:"/pages/user/userInfo"
})
}
}
function getPhoneNumber (e) {
// tel_code.value = e.detail.code
// console.log(e)
getAccess_token({code:e.detail.code})
// console.log(e.detail.code) // 动态令牌
// console.log(e.detail.errMsg) // 回调信息(成功失败都会返回)
// console.log(e.detail.errno) // 错误码(失败时返回)
}
async function getAccess_token(params={}){//获取token 获取手机号
//清除token缓存
// wx.clearStorageSync();
//访问接口
const data={
username:params.code,//手机号按钮获取的code
type:'wechat_mini_app',
identity:'user',
password:'111'
}
// console.log('登录参数:',data);return;
const res = await api.getToken(data)
if(res.code === 200) {
// newUser.value = res.data.newUser
if(res.data.newUser) { // 新用户,不做任何缓存动作,跳转登录页
let userId = res.data.userId
let res_p=await new Promise(resolve=>{
uni.login({
provider: 'weixin', //使用微信登录
success: function (loginRes) {
resolve(loginRes);
console.log(loginRes,'微信登录返回信息');
}
});
});
uni.setStorageSync('access_token','Bearer '+res.data.access_token);// token单独缓存一次
let res2=await api.wx_login({code:res_p.code},userId);
if(res2.code === 0) {
toLogin(encodeURIComponent(JSON.stringify(res.data)))
}
}
else{
uni.setStorageSync('avatarUrl', res.data.avatar);//avatarUrl
res_form.value = res.data
res_form.value.access_token = 'Bearer '+res.data.access_token
let userId = res.data.userId
uni.setStorageSync('access_token',res_form.value.access_token);// token单独缓存一次
wx_login(userId)
}
}
}
async function wx_login(userId){
let res=await new Promise(resolve=>{
uni.login({
provider: 'weixin', //使用微信登录
success: function (loginRes) {
resolve(loginRes);
console.log(loginRes,'微信登录返回信息');
}
});
});
let res2=await api.wx_login({code:res.code},userId);
if(res2.code === 0) {
uni.setStorageSync('userInfo',JSON.stringify(res_form.value))
// is_login.value = custom.checkLogin()
getInfo()
// if(newUser.value) {
// toLogin()
// }
}
else{
uni.clearStorage();
}
}
</script>
<template>
<view class="user-box page-box">
<view class="userinfo-box" @tap="toUserInfo">
<image :src="is_login?avatar:'../../static/avatar.png'" mode=""></image>
<view class="" style="font-weight: 900;font-size: 40rpx;">
{{is_login?userinfo.nickname:'未登录'}}
</view>
<uni-icons style="position: absolute;right:20rpx;top: 40%;" v-if="is_login" type="forward" color="white" size="20"></uni-icons>
</view>
<!-- <view class="btn-box" @tap="toLogin" v-if="!is_login"> -->
<view class="btn-box" v-if="!is_login">
<!-- <view class="btn">登录</view> -->
<view class="btn-part">
<button class="buy-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">立即登录</button>
</view>
</view>
<view class="row-box" v-else>
<view class="rb-card" @tap="toDetail(1)" style="margin-bottom: 10px;">
<!-- <view class="rbc-title">手术历程</view> -->
<view class="rbc-content rbc-content-box">
<view class="rbc-content-row rbc-content-left">
<uni-icons type="calendar" color="gray" size="30"></uni-icons>
<view>已完成事项</view>
</view>
<view class="rbc-content-row rbc-content-right">
<uni-icons type="notification" color="gray" size="30"></uni-icons>
<view>未完成事项</view>
</view>
</view>
</view>
<view class="rb-card" @tap="toDetail(2)">
<view class="rbc-content">
<view class="rbc-content-row rbc-content-left rbc-content-left-box">
<uni-icons type="star" color="gray" size="30"></uni-icons>
我的收藏</view>
<view class="rbc-content-row rbc-content-right">
<uni-icons type="forward" color="gray" size="20"></uni-icons>
</view>
</view>
</view>
<view class="rb-card" @tap="toDetail(3)">
<view class="rbc-content">
<view class="rbc-content-row rbc-content-left rbc-content-left-box">
<uni-icons type="gear" color="gray" size="30"></uni-icons>
设置</view>
<view class="rbc-content-row rbc-content-right">
<uni-icons type="forward" color="gray" size="20"></uni-icons>
</view>
</view>
</view>
<view class="rb-card" @tap="toDetail(4)">
<view class="rbc-content">
<view class="rbc-content-row rbc-content-left rbc-content-left-box">
<uni-icons type="chatbubble" color="gray" size="30"></uni-icons>
问题反馈</view>
<view class="rbc-content-row rbc-content-right">
<uni-icons type="forward" color="gray" size="20"></uni-icons>
</view>
</view>
</view>
</view>
</view>
</template>
<style scoped lang="scss">
.buy-btn{
display: inline-block;
margin-top:1rem;
background-color: #26758d;
color: white;
border-radius: 50rpx;
font-weight: 200;
font-size: 24rpx;
width: 50%;
padding: 10rpx 0;
}
.rbc-content-left-box{
uni-icons{
margin-right: 20rpx;
}
display: flex;
align-items: center;
}
.row-box{
padding: 20rpx 0;
.rb-card{
padding: 20rpx;
background: white;
.rbc-title{
}
.rbc-content-box{
margin-top: 10rpx;
.rbc-content-row{
width: 50%;
text-align: center;
// padding: 40rpx 20rpx;
// box-shadow: 10rpx 10rpx 10rpx #cdcdcd;
border-radius: 10rpx;
}
}
.rbc-content{
display: flex;
align-items: center;
justify-content: space-between;
}
}
}
.btn-box{
text-align: center;
margin-top: 40rpx;
.btn{
display: inline-block;
padding: 10px 20px;
background: #e2e2e2;
color: #26758d;
border-radius: 10px;
width: 50%;
}
}
.userinfo-box{
position: relative;
image{
width: 120rpx;
height: 120rpx;
border-radius: 50%;
background: white;
margin-right: 20rpx;
}
color: white;
background-color: #26758d;
display: flex;
align-items: center;
padding: 40rpx 20rpx;
}
.user-box{
background: #f6f6f6;
}
</style>