331 lines
7.5 KiB
Vue
331 lines
7.5 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<view class="header">
|
|||
|
|
<view class="bg">
|
|||
|
|
<view class="box">
|
|||
|
|
<view class="box-hd" @click="login">
|
|||
|
|
<view v-if="islogin">
|
|||
|
|
<view class="avator">
|
|||
|
|
<img :src="userinfo.avatar">
|
|||
|
|
</view>
|
|||
|
|
<view class="phone-number">ID:{{userinfo.id}} 昵称：{{userinfo.nickname || '未设置昵称'}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-else>
|
|||
|
|
<view class="avator">
|
|||
|
|
<img :src="avatarUrl">
|
|||
|
|
</view>
|
|||
|
|
<view class="phone-number" style="color: red;">请先点我登录</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="box-bd" @click="myNotice">
|
|||
|
|
<view class="item">
|
|||
|
|
<u-icon class="icon" name="volume-fill" size="25" color="#757575"></u-icon>
|
|||
|
|
<view class="text">我的通知</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<u-icon class="icon" name="star-fill" size="25" color="#757575"></u-icon>
|
|||
|
|
<view class="text">我的收藏</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<u-icon class="icon" name="server-fill" size="25" color="#757575"></u-icon>
|
|||
|
|
<view class="text">我的客服</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="list-content">
|
|||
|
|
<view class="list">
|
|||
|
|
<view class="li">
|
|||
|
|
<u-icon class="icon" name="coupon-fill" size="25" color="#757575"></u-icon>
|
|||
|
|
<view class="text">我的名片</view>
|
|||
|
|
<u-icon class="icon" name="arrow-right" size="20" color="#757575"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
<view class="li " @click="changeSkin">
|
|||
|
|
<u-icon class="icon" name="grid-fill" size="25" color="#757575"></u-icon>
|
|||
|
|
<view class="text">主题切换</view>
|
|||
|
|
<u-icon class="icon" name="arrow-right" size="20" color="#757575"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
<view class="li ">
|
|||
|
|
<u-icon class="icon" name="question-circle-fill" size="25" color="#757575"></u-icon>
|
|||
|
|
<view class="text">帮助中心</view>
|
|||
|
|
<u-icon class="icon" name="arrow-right" size="20" color="#757575"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
<view class="li ">
|
|||
|
|
<u-icon class="icon" name="info-circle-fill" size="25" color="#757575"></u-icon>
|
|||
|
|
<view class="text">关于我们</view>
|
|||
|
|
<u-icon class="icon" name="arrow-right" size="20" color="#757575"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
<view class="li ">
|
|||
|
|
<u-icon class="icon" name="email-fill" size="25" color="#757575"></u-icon>
|
|||
|
|
<view class="text">意见反馈</view>
|
|||
|
|
<u-icon class="icon" name="arrow-right" size="20" color="#757575"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
<view class="li noborder">
|
|||
|
|
<u-icon class="icon" name="setting-fill" size="25" color="#757575"></u-icon>
|
|||
|
|
<view class="text">系统设置</view>
|
|||
|
|
<u-icon class="icon" name="arrow-right" size="20" color="#757575"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
<view class="li noborder" @click="loginOut">
|
|||
|
|
<u-icon class="icon" name="setting-fill" size="25" color="#757575"></u-icon>
|
|||
|
|
<view class="text">注销登录</view>
|
|||
|
|
<u-icon class="icon" name="arrow-right" size="20" color="#757575"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="copyright">
|
|||
|
|
<text>AbuCoder版权所有</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
setUserInfo,
|
|||
|
|
getUserInfo,
|
|||
|
|
setToken,
|
|||
|
|
getToken,
|
|||
|
|
removeUserInfo,
|
|||
|
|
removeToken
|
|||
|
|
} from '@/utils/auth';
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
avatarUrl: 'https://portrait.gitee.com/uploads/avatars/user/354/1062657_rahman_1649233036.png!avatar60',
|
|||
|
|
userinfo: {},
|
|||
|
|
islogin:false,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
console.log(getUserInfo())
|
|||
|
|
if(getUserInfo()!=undefined){
|
|||
|
|
this.islogin = true
|
|||
|
|
}
|
|||
|
|
this.userinfo = getUserInfo() || {};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
login() {
|
|||
|
|
let that = this
|
|||
|
|
uni.login({
|
|||
|
|
provider: 'weixin',
|
|||
|
|
success: function(loginRes) {
|
|||
|
|
let form = {};
|
|||
|
|
form.code = loginRes.code; //用户code 注:用户的code每次登录都是随机的，所以不需要进行存储
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: "登录中....",
|
|||
|
|
mask: true
|
|||
|
|
})
|
|||
|
|
that.request('wxlogin', form, 'POST').then(wxloginres => {
|
|||
|
|
console.log("wxloginres: ", wxloginres)
|
|||
|
|
if (wxloginres.code==0) {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
setTimeout(function() {
|
|||
|
|
uni.hideLoading();
|
|||
|
|
}, 2000);
|
|||
|
|
setToken(wxloginres.data.openid)
|
|||
|
|
setUserInfo(wxloginres.data); //模拟存储用户信息
|
|||
|
|
//成功后进入头像与昵称修改页面
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/me/userinfo'
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
icon: "none",
|
|||
|
|
title: "登录失败，请稍后试试！",
|
|||
|
|
duration: 2000
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
fail(err) {
|
|||
|
|
console.log(err)
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
myNotice() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: './mynotice/mynotice'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
loginOut() {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '注销登录提示',
|
|||
|
|
content: '确定要注销登录吗？',
|
|||
|
|
cancelText: "取消", // 取消按钮的文字
|
|||
|
|
confirmText: "确认", // 确认按钮的文字
|
|||
|
|
confirmColor: '#f55850',
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
console.log('comfirm') //点击确定之后执行的代码
|
|||
|
|
uni.$u.toast("注销登录成功，欢迎再来")
|
|||
|
|
removeUserInfo()
|
|||
|
|
removeToken()
|
|||
|
|
this.islogin=false
|
|||
|
|
} else {
|
|||
|
|
console.log('cancel') //点击取消之后执行的代码
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
page {
|
|||
|
|
background-color: #f1f1f1;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header {
|
|||
|
|
background: #fff;
|
|||
|
|
height: 660rpx;
|
|||
|
|
padding-bottom: 110rpx;
|
|||
|
|
|
|||
|
|
.bg {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 490rpx;
|
|||
|
|
padding-top: 310rpx;
|
|||
|
|
background: linear-gradient(to bottom, rgb(1, 94, 234), rgb(0, 192, 250), rgb(255, 255, 255));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box {
|
|||
|
|
width: 650rpx;
|
|||
|
|
height: 300rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
background: #fff;
|
|||
|
|
box-shadow: 0 5rpx 20rpx 0rpx rgba(0, 0, 150, .2);
|
|||
|
|
|
|||
|
|
.box-hd {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-top: 15rpx;
|
|||
|
|
|
|||
|
|
.avator {
|
|||
|
|
|
|||
|
|
width: 160rpx;
|
|||
|
|
height: 160rpx;
|
|||
|
|
background: #fff;
|
|||
|
|
border: 5rpx solid #f1f1f1;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
margin-top: -80rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.phone-number {
|
|||
|
|
width: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
margin: 20rpx auto;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box-bd {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
flex: 1 1 auto;
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: center;
|
|||
|
|
border-right: 1px solid #f1f1f1;
|
|||
|
|
margin: 15rpx 0;
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon {
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
|
|||
|
|
img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text {
|
|||
|
|
width: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.list-content {
|
|||
|
|
background: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.list {
|
|||
|
|
width: 100%;
|
|||
|
|
border-bottom: 15rpx solid #f1f1f1;
|
|||
|
|
background: #fff;
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.li {
|
|||
|
|
width: 92%;
|
|||
|
|
height: 100rpx;
|
|||
|
|
padding: 0px 4%;
|
|||
|
|
border-bottom: 1px solid #f3f3f3;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin: 0rpx auto;
|
|||
|
|
|
|||
|
|
&.noborder {
|
|||
|
|
border-bottom: 0
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
width: 50rpx;
|
|||
|
|
height: 50rpx;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 50rpx;
|
|||
|
|
height: 50rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text {
|
|||
|
|
padding-left: 20rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.to {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.copyright {
|
|||
|
|
margin: 20rpx auto;
|
|||
|
|
width: 80%;
|
|||
|
|
height: 60rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
color: #9E9E9E;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|