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
<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> |