You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
340 lines
7.6 KiB
340 lines
7.6 KiB
7 months ago
|
<template>
|
||
|
<view class="me">
|
||
|
<view class="top">
|
||
|
<img v-if="userinfo" class="avatar" :src="this.userinfo.avatarUrl">
|
||
|
<img v-else class="avatar" src="../../static/avatar.png">
|
||
|
<view class="userinfo" v-if="userinfo" @click="removeStorage">
|
||
|
<view class="name">{{userinfo.nickName}}</view>
|
||
|
<view class="phone">{{userinfo.phonenumber }}</view>
|
||
|
</view>
|
||
|
<!-- <button v-else class="phone login" @click="toLogin()">点击此处登录</button> -->
|
||
|
<button v-else class="phone login" open-type="getPhoneNumber" @getphonenumber="getUserInfo">点击此处登录</button>
|
||
|
</view>
|
||
|
|
||
|
<view class="wrap">
|
||
|
<view class="option" @click="go(0,'../task/todo')">
|
||
|
<view class="count">{{count}}</view>
|
||
|
<view>待办任务</view>
|
||
|
</view>
|
||
|
<view class="option" @click="go(1,'../task/done')">
|
||
|
<view class="icon" />
|
||
|
<view>已办任务</view>
|
||
|
</view>
|
||
|
</view>
|
||
|
<!--
|
||
|
<view class="box">
|
||
|
<view class="item" v-for="(item, index) in pageList" :key="index" @click="go(item.path)">
|
||
|
<img class="icon" :src="item.icon">
|
||
|
<view class="title">{{item.title}}</view>
|
||
|
<view class="right">
|
||
|
<view class="i i-xiangyou1"></view>
|
||
|
</view>
|
||
|
</view>
|
||
|
</view> -->
|
||
|
</view>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import WXBizDataCrypt from "@/utils/WXBizDataCrypt.js"
|
||
|
export default {
|
||
|
data() {
|
||
|
return {
|
||
|
// 用户信息
|
||
|
userinfo: '',
|
||
|
avatar: '',
|
||
|
count: 0,
|
||
|
// 跳转页面配置项
|
||
|
pageList: [
|
||
|
{
|
||
|
title: '延期申请',
|
||
|
path: '../task/statistics',
|
||
|
icon: '../../static/delay.png'
|
||
|
},
|
||
|
{
|
||
|
title: '资讯公告',
|
||
|
path: '../task/statistics',
|
||
|
icon: '../../static/notice.png'
|
||
|
},
|
||
|
{
|
||
|
title: '服务指南',
|
||
|
path: '../task/statistics',
|
||
|
icon: '../../static/consult.png'
|
||
|
}
|
||
|
]
|
||
|
}
|
||
|
},
|
||
|
|
||
|
created() {
|
||
|
},
|
||
|
onShow:function(){
|
||
|
this.userinfo = uni.getStorageSync('userinfo')
|
||
|
this.isLogion();
|
||
|
},
|
||
|
filters: {
|
||
|
|
||
|
},
|
||
|
|
||
|
methods: {
|
||
|
isLogion(){
|
||
|
|
||
|
if(!uni.getStorageSync("userinfo")){
|
||
|
this.wxLogin();
|
||
|
}
|
||
|
},
|
||
|
wxLogin(){
|
||
|
console.log(123123);
|
||
|
uni.login({
|
||
|
provider: 'weixin',
|
||
|
success: res => {
|
||
|
if(res.code) {
|
||
|
console.log(res.code)
|
||
|
this.getOpenId(res.code)
|
||
|
} else {
|
||
|
console.log('登录失败!' + res.errMsg)
|
||
|
}
|
||
|
}
|
||
|
})
|
||
|
},
|
||
|
|
||
|
async getOpenId(code) {
|
||
|
const { data:res } = await this.$http('/app/getOpenId',{code:code})
|
||
|
if(res.code === 0){
|
||
|
console.log(res)
|
||
|
uni.setStorageSync("sessionKey", res.sessionKey)
|
||
|
uni.setStorageSync("openId", res.openId);
|
||
|
}
|
||
|
},
|
||
|
getUserInfo(e) {
|
||
|
if (e.detail.errMsg == "getPhoneNumber:fail user deny") { //用户决绝授权
|
||
|
//拒绝授权后弹出一些提示
|
||
|
wx.showToast({
|
||
|
title: '用户未授权',
|
||
|
icon: 'error',
|
||
|
});
|
||
|
return
|
||
|
} else {
|
||
|
var _this = this
|
||
|
wx.showModal({
|
||
|
title: '温馨提示',
|
||
|
content: '亲,授权微信登录后才能正常使用小程序功能',
|
||
|
success(res) {
|
||
|
//如果用户点击了确定按钮
|
||
|
if (res.confirm) {
|
||
|
wx.getUserProfile({
|
||
|
desc: '获取你的昵称、头像、地区及性别',
|
||
|
success: res => {
|
||
|
//允许授权
|
||
|
var token = uni.getStorageSync("sessionKey");
|
||
|
console.log("token=" + token)
|
||
|
//允许授权
|
||
|
let pc = new WXBizDataCrypt('wxde02f5b39c3d9441', token); //wxXXXXXXX为你的小程序APPID
|
||
|
let data = pc.decryptData(e.detail.encryptedData, e.detail.iv);
|
||
|
console.log(data) //data就是最终解密的用户信息
|
||
|
if (data.phoneNumber) {
|
||
|
wx.setStorageSync("phone", data.phoneNumber);
|
||
|
_this.login();
|
||
|
|
||
|
} else {
|
||
|
console.log("获取失败")
|
||
|
}
|
||
|
},
|
||
|
fail: res => {
|
||
|
console.log(res)
|
||
|
//拒绝授权
|
||
|
wx.showToast({
|
||
|
title: '您拒绝了请求,不能正常使用小程序',
|
||
|
icon: 'error',
|
||
|
duration: 2000
|
||
|
});
|
||
|
return;
|
||
|
}
|
||
|
});
|
||
|
} else if (res.cancel) {
|
||
|
//如果用户点击了取消按钮
|
||
|
wx.showToast({
|
||
|
title: '您拒绝了请求,不能正常使用小程序',
|
||
|
icon: 'error',
|
||
|
duration: 2000
|
||
|
});
|
||
|
return;
|
||
|
}
|
||
|
}
|
||
|
})
|
||
|
}
|
||
|
},
|
||
|
toLogin(){
|
||
|
// 跳转到登录页面
|
||
|
uni.navigateTo({
|
||
|
url: '../login/login',
|
||
|
})
|
||
|
},
|
||
|
removeStorage(){
|
||
|
uni.setStorageSync("token","1223333");
|
||
|
uni.removeStorageSync("userinfo")
|
||
|
// uni.navigateTo({
|
||
|
// url: './me',
|
||
|
// })
|
||
|
},
|
||
|
// 登录
|
||
|
async login() {
|
||
|
var obj = {
|
||
|
code: wx.getStorageSync("phone"),
|
||
|
keyword: wx.getStorageSync("openId"),
|
||
|
}
|
||
|
const {
|
||
|
data: res
|
||
|
} = await this.$http('/app/login', obj)
|
||
|
if (res.code === 0) {
|
||
|
uni.showToast({
|
||
|
title: '登录成功',
|
||
|
icon: 'success'
|
||
|
})
|
||
|
|
||
|
this.userinfo = res.data
|
||
|
|
||
|
this.loginShow = false
|
||
|
uni.setStorageSync("userinfo", res.data)
|
||
|
uni.setStorageSync("token", res.token)
|
||
|
uni.setStorageSync("avatar", this.avatar)
|
||
|
} else {
|
||
|
uni.showToast({
|
||
|
title: '未登记权限',
|
||
|
icon: 'error'
|
||
|
})
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style lang="scss">
|
||
|
.me {
|
||
|
background: #f5f5ff;
|
||
|
min-height: 100vh;
|
||
|
|
||
|
.top {
|
||
|
box-sizing: border-box;
|
||
|
top: 0;
|
||
|
background: #3C9CFF;
|
||
|
width: 100%;
|
||
|
height: 50vw;
|
||
|
padding: 8vw 5vw;
|
||
|
border-bottom-left-radius: 16%;
|
||
|
border-bottom-right-radius: 16%;
|
||
|
display: flex;
|
||
|
.login{
|
||
|
color: #3C9CFF;
|
||
|
height: 12vw;
|
||
|
margin-top: 4vw;
|
||
|
}
|
||
|
.avatar {
|
||
|
display: block;
|
||
|
width: 20vw;
|
||
|
height: 20vw;
|
||
|
border-radius: 50%;
|
||
|
margin-right: 5vw;
|
||
|
background: #f5f5ff;
|
||
|
}
|
||
|
|
||
|
.userinfo {
|
||
|
color: #fff;
|
||
|
font-size: 6vw;
|
||
|
.phone {
|
||
|
background: none;
|
||
|
margin-left: 0;
|
||
|
padding-left: 0;
|
||
|
color: white;
|
||
|
padding-top: 2.5vw;
|
||
|
}
|
||
|
.phone::after {
|
||
|
border: none;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.wrap {
|
||
|
width: 90%;
|
||
|
height: 24vw;
|
||
|
background: hsla(0, 0, 100%, .97);
|
||
|
margin: -10vw auto 6vw auto;
|
||
|
padding: 2vw;
|
||
|
border-radius: 3vw;
|
||
|
display: flex;
|
||
|
justify-content: space-around;
|
||
|
box-shadow: 0 2px 2vw #ccc;
|
||
|
position: relative;
|
||
|
.option {
|
||
|
display: flex;
|
||
|
flex-direction: column;
|
||
|
align-items: center;
|
||
|
font-size: 1.2em;
|
||
|
color: #777;
|
||
|
.count {
|
||
|
width: 16vw;
|
||
|
height: 16vw;
|
||
|
display: flex;
|
||
|
justify-content: center;
|
||
|
align-items: center;
|
||
|
color: #3C9CFF;
|
||
|
font-size: 1.5em;
|
||
|
}
|
||
|
.icon {
|
||
|
width: 16vw;
|
||
|
height: 16vw;
|
||
|
background: url('../../static/done.png') center center/contain no-repeat;
|
||
|
}
|
||
|
}
|
||
|
&::before {
|
||
|
content: '';
|
||
|
position: absolute;
|
||
|
left: 50%;
|
||
|
top: 50%;
|
||
|
transform: translateY(-50%);
|
||
|
width: 1px;
|
||
|
height: 80%;
|
||
|
background: #eee;
|
||
|
box-shadow: 0 0 1px #eee;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.box {
|
||
|
width: 90%;
|
||
|
margin: 0 auto;
|
||
|
background: #fff;
|
||
|
padding: 2vw;
|
||
|
border-radius: 3vw;
|
||
|
font-size: 1.2em;
|
||
|
|
||
|
.item {
|
||
|
padding: 4vw 0;
|
||
|
display: flex;
|
||
|
justify-content: space-around;
|
||
|
align-items: center;
|
||
|
position: relative;
|
||
|
.icon {
|
||
|
width: 10vw;
|
||
|
height: 10vw;
|
||
|
}
|
||
|
.title {
|
||
|
color: #777;
|
||
|
padding-right: 40vw;
|
||
|
}
|
||
|
.right {
|
||
|
color: hsl(44, 96%, 55%);
|
||
|
}
|
||
|
&::before {
|
||
|
content: '';
|
||
|
width: 90%;
|
||
|
height: 1px;
|
||
|
position: absolute;
|
||
|
left: 5%;
|
||
|
bottom: 0;
|
||
|
background: linear-gradient(90deg, hsl(200, 96%, 55%), hsl(200, 96%, 99%));
|
||
|
}
|
||
|
&:last-child::before{
|
||
|
background: none;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</style>
|