379 lines
8.1 KiB
Vue
379 lines
8.1 KiB
Vue
|
<template>
|
||
|
|
<view class="content">
|
||
|
|
<view class="mine-top">
|
||
|
|
<image class="mine-top-img" src="/static/images/mine-bg.png" mode=""></image>
|
||
|
|
</view>
|
||
|
|
<view class="mine-card">
|
||
|
|
<view class="mine-card-left" v-if="user.userId">
|
||
|
|
<button class="avatar-wrapper" type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
|
||
|
|
<img class="mine-card-img" :src="user.avatar ? user.avatar : '/static/images/avatar1.png'" alt="">
|
||
|
|
</button>
|
||
|
|
</view>
|
||
|
|
<view class="mine-card-left" v-else>
|
||
|
|
<img class="mine-card-img" :src="user.avatar ? user.avatar : '/static/images/avatar1.png'" alt="">
|
||
|
|
</view>
|
||
|
|
<template v-if="user.userId">
|
||
|
|
<view class="mine-card-right">
|
||
|
|
<view class="mine-card-title" @click="nickNameInputShow = true">
|
||
|
|
{{ user.nickName }}
|
||
|
|
</view>
|
||
|
|
<view class="mine-card-label">
|
||
|
|
<u-icon name="phone-fill" color="#101010" size="13"></u-icon>
|
||
|
|
<view class="repeat-customer">
|
||
|
|
{{ user.phonenumber }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<view class="login" v-else @click="login">
|
||
|
|
请点击登录
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="menu-area">
|
||
|
|
<view v-for="(item,index) in menuArr" :key="index" @click="menuClick(index)" class="cell">
|
||
|
|
<image class="menu-img" :src="item.pic" mode="aspectFit"></image>
|
||
|
|
<text class="grid-text">{{item.title}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="cell-area">
|
||
|
|
<u-cell-group>
|
||
|
|
<u-cell v-for="item,index in cellArr" :key="index" :title="item.title"
|
||
|
|
:titleStyle="{fontSize:'30rpx',color:'#232220'}" :isLink="true" arrow-direction="right" size="large"
|
||
|
|
:url="item.url" @click="toCell(item.url)">
|
||
|
|
<u-icon slot="icon" size="22" :name="item.icon" color="#FFA521"></u-icon>
|
||
|
|
</u-cell>
|
||
|
|
<u-cell @click="toAuthority" title="隐私权限" arrow-direction="right" size="large" :isLink="true"
|
||
|
|
:titleStyle="{fontSize:'30rpx',color:'#232220'}">
|
||
|
|
|
||
|
|
<u-icon slot="icon" size="22" name="setting" color="#FFA521"></u-icon>
|
||
|
|
</u-cell>
|
||
|
|
</u-cell-group>
|
||
|
|
</view>
|
||
|
|
<u-popup :show="nickNameInputShow" mode="center" :closeable="true" @close="closenickNameInputPop">
|
||
|
|
<view class="nickname-pop">
|
||
|
|
<text class="nickname-label">您的新昵称(10字之内)</text>
|
||
|
|
|
||
|
|
<view class="nickname-input">
|
||
|
|
<input type="nickname" class="input-style" maxlength="10" v-model="newNickName" placeholder="请输入昵称"
|
||
|
|
border="surround" @blur="bindblur" @input="bindinput" />
|
||
|
|
|
||
|
|
</view>
|
||
|
|
<button class="button-style" type="primary" size="mini" @click="updateProfile">保存</button>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</u-popup>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
user: {
|
||
|
|
nickName: '',
|
||
|
|
avatar: '',
|
||
|
|
phonenumber: ''
|
||
|
|
},
|
||
|
|
newNickName: '',
|
||
|
|
nickNameInputShow: false,
|
||
|
|
menuArr: [{
|
||
|
|
name: 'photo',
|
||
|
|
title: '我的儿童',
|
||
|
|
pic: "/static/images/mine-child.png",
|
||
|
|
url: "/minePackage/pages/MineChild"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'lock',
|
||
|
|
title: '历史测试',
|
||
|
|
pic: "/static/images/mine-test.png",
|
||
|
|
url: "/minePackage/pages/MineTest"
|
||
|
|
},
|
||
|
|
],
|
||
|
|
cellArr: [{
|
||
|
|
title: "我的收藏",
|
||
|
|
url: "/homePackage/pages/FavEssay",
|
||
|
|
icon: "star-fill"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "儿童绑定",
|
||
|
|
url: "/minePackage/pages/BindChild",
|
||
|
|
icon: "plus-people-fill"
|
||
|
|
},
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
console.log(135235);
|
||
|
|
console.log(this.$store.getters.token);
|
||
|
|
this.getUserInfo()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
//登录
|
||
|
|
login() {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: "/loginPackage/pages/Login"
|
||
|
|
})
|
||
|
|
},
|
||
|
|
async getUserInfo() {
|
||
|
|
const res = await this.$myRequest({
|
||
|
|
url: '/getAppInfo',
|
||
|
|
method: 'GET'
|
||
|
|
})
|
||
|
|
this.user = res.data.user;
|
||
|
|
this.user.avatar = this.user.avatar ? this.baseUrl + res.data.user.avatar : require(
|
||
|
|
'@/static/images/default-avatar.png');
|
||
|
|
|
||
|
|
},
|
||
|
|
onChooseavatar(e) {
|
||
|
|
console.log(this.$store.getters.token);
|
||
|
|
console.log('114', e);
|
||
|
|
// this.user.avatar = e.detail.avatarUrl;
|
||
|
|
uni.uploadFile({
|
||
|
|
url: this.baseUrl + '/system/user/profile/avatar', //仅为示例，非真实的接口地址
|
||
|
|
filePath: e.detail.avatarUrl,
|
||
|
|
name: 'avatarfile',
|
||
|
|
header: {
|
||
|
|
Authorization: this.$store.getters.token
|
||
|
|
},
|
||
|
|
success: (uploadFileRes) => {
|
||
|
|
console.log(uploadFileRes);
|
||
|
|
if (uploadFileRes.statusCode == 200) {
|
||
|
|
this.getUserInfo()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
menuClick(index) {
|
||
|
|
if (this.$store.getters.token) {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: this.menuArr[index].url
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: '/loginPackage/pages/Login'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
closenickNameInputPop() {
|
||
|
|
this.nickNameInputShow = false
|
||
|
|
},
|
||
|
|
bindblur(e) {
|
||
|
|
this.newNickName = e.detail.value; // 获取微信昵称
|
||
|
|
},
|
||
|
|
bindinput(e) {
|
||
|
|
this.newNickName = e.detail.value; // 获取微信昵称
|
||
|
|
},
|
||
|
|
toCell(url) {
|
||
|
|
if (this.$store.getters.token) {
|
||
|
|
// uni.navigateTo({
|
||
|
|
// url: url
|
||
|
|
// })
|
||
|
|
} else {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: '/loginPackage/pages/Login'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
//授权设置
|
||
|
|
toAuthority() {
|
||
|
|
if (this.$store.getters.token) {
|
||
|
|
uni.openSetting({
|
||
|
|
success(res) {
|
||
|
|
console.log('146', res.authSetting)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: '/loginPackage/pages/Login'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
// 修改昵称
|
||
|
|
async updateProfile() {
|
||
|
|
if (uni.$u.test.isEmpty(this.newNickName)) {
|
||
|
|
return uni.showToast({
|
||
|
|
icon: 'error',
|
||
|
|
title: '请填写昵称'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
const res = await this.$myRequest({
|
||
|
|
method: 'PUT',
|
||
|
|
url: '/system/user/profile/updateNickName',
|
||
|
|
data: {
|
||
|
|
nickName: this.newNickName
|
||
|
|
}
|
||
|
|
})
|
||
|
|
if (res.data.code == 200) {
|
||
|
|
uni.showToast({
|
||
|
|
title: '昵称修改成功'
|
||
|
|
})
|
||
|
|
this.closenickNameInputPop()
|
||
|
|
this.getUserInfo()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
/deep/ .u-popup__content {
|
||
|
|
width: 80%;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
.mine-top {
|
||
|
|
width: 100%;
|
||
|
|
height: 250rpx;
|
||
|
|
|
||
|
|
.mine-top-img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mine-card {
|
||
|
|
position: absolute;
|
||
|
|
top: 60rpx;
|
||
|
|
width: 90%;
|
||
|
|
height: 300rpx;
|
||
|
|
left: 5%;
|
||
|
|
box-shadow: 0rpx 4rpx 8rpx 0rpx #E6E6E6;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
background-color: #fff;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.mine-card-right {
|
||
|
|
height: 220rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-around;
|
||
|
|
|
||
|
|
.mine-card-title {
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 36rpx;
|
||
|
|
color: #111111;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mine-card-label {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
|
||
|
|
.repeat-customer {
|
||
|
|
color: #101010;
|
||
|
|
font-size: 26rpx;
|
||
|
|
margin-left: 10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mine-card-left {
|
||
|
|
height: 180rpx;
|
||
|
|
width: 180rpx;
|
||
|
|
margin-left: 40rpx;
|
||
|
|
margin-right: 50rpx;
|
||
|
|
border-radius: 50%;
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
.mine-card-img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu-area {
|
||
|
|
height: 240rpx;
|
||
|
|
width: 100%;
|
||
|
|
margin: 0 auto;
|
||
|
|
margin-top: 100rpx;
|
||
|
|
padding-left: 60rpx;
|
||
|
|
padding-right: 60rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
.cell {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu-img {
|
||
|
|
width: 80rpx;
|
||
|
|
height: 80rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-text {
|
||
|
|
font-size: 30rpx;
|
||
|
|
color: #101010;
|
||
|
|
margin-left: 10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.cell-area {
|
||
|
|
width: 90%;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 头像能力 按钮样式 */
|
||
|
|
.avatar-wrapper {
|
||
|
|
height: 100%;
|
||
|
|
height: 100%;
|
||
|
|
margin: 0;
|
||
|
|
background-color: 0;
|
||
|
|
background: 0;
|
||
|
|
padding: 0;
|
||
|
|
border-radius: 0;
|
||
|
|
border-radius: 0;
|
||
|
|
border: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.avatar-wrapper::after {
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nickname-pop {
|
||
|
|
padding: 70rpx 50rpx 0rpx;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.nickname-input {
|
||
|
|
width: 100%;
|
||
|
|
font-size: 26rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nickname-label {
|
||
|
|
display: block;
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.input-style {
|
||
|
|
border-bottom: 1px solid #007aff;
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
height: 80rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button-style {
|
||
|
|
margin-top: 40rpx;
|
||
|
|
margin-left: calc(50% - 50rpx);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|