515 lines
14 KiB
Vue
515 lines
14 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<view class="container">
|
|||
|
|
<view class="item">
|
|||
|
|
<view class="avatar" @tap.stop="changeAvatar">
|
|||
|
|
<text class="aside-left">头像</text>
|
|||
|
|
<image class="image_radius" :src="userInfo.avatar || 'https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/images/avatar.png'"></image>
|
|||
|
|
<image class="listimage" src="https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/assets/detail.svg"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<view class="nickname" @tap="handleEditToggle">
|
|||
|
|
<text class="aside-left">昵称</text>
|
|||
|
|
<text class="aside-right">{{ userInfo.nick ? userInfo.nick : '提莫' }}</text>
|
|||
|
|
<image class="listimage" src="https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/assets/detail.svg"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<view class="nickname">
|
|||
|
|
<text class="aside-left">性别</text>
|
|||
|
|
<picker class="aside-right" @change="gender" :value="index" :range="array">
|
|||
|
|
<view class="uni-input">
|
|||
|
|
<text>{{ array[index] }}</text>
|
|||
|
|
</view>
|
|||
|
|
</picker>
|
|||
|
|
<image class="listimage" src="https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/assets/detail.svg"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="popup-mask" v-if="popupToggle" @tap.stop="handleEditToggle">
|
|||
|
|
<view class="popup-main" @tap.stop="handleCatchTap">
|
|||
|
|
<view class="popup-main-header">
|
|||
|
|
<label class="popup-main-header-title">修改昵称</label>
|
|||
|
|
<button class="button" @tap.stop="handleEditSubmit" :disabled="!infoNick">确认</button>
|
|||
|
|
</view>
|
|||
|
|
<input class="popup-main-input" type="text" :value="infoNick" @input="bindEditInput" />
|
|||
|
|
<label class="text">仅限中文、字母、数字和下划线，2-20个字</label>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="popup-mask-avatar" v-if="popupToggleAvatar" @tap.stop="handleEditToggleAvatar">
|
|||
|
|
<view class="popup-main-avatar" @tap.stop="handleCatchTap">
|
|||
|
|
<view class="pop-main-header-avatar" :data-item="item">
|
|||
|
|
<label class="popup-main-header-title-avatar">设置头像</label>
|
|||
|
|
<label class="button-avatar" @tap.stop="handleEditSubmitAvatar">确认</label>
|
|||
|
|
<view class="image-list"><image v-for="(item, index) in avatarList" :key="index" :class="'image-avatar ' + (item.URL === avatar && 'image-avatar-active')" :src="item.URL" :data-value="item" @tap="click"></image></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
const app = getApp();
|
|||
|
|
console.log(app);
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
array: ['未设置性别', '女', '男'],
|
|||
|
|
index: 0,
|
|||
|
|
userInfo: {
|
|||
|
|
nick: '',
|
|||
|
|
avatarUrl: '',
|
|||
|
|
avatar: '',
|
|||
|
|
gender: '',
|
|||
|
|
},
|
|||
|
|
config: {
|
|||
|
|
avatar: '',
|
|||
|
|
nick: '',
|
|||
|
|
phone: '',
|
|||
|
|
token: '',
|
|||
|
|
userId: '',
|
|||
|
|
userSig: '',
|
|||
|
|
},
|
|||
|
|
infoNick: '',
|
|||
|
|
avatar: '',
|
|||
|
|
avatarList: [
|
|||
|
|
{
|
|||
|
|
avatarname: '头像1',
|
|||
|
|
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_01.png',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
avatarname: '头像2',
|
|||
|
|
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_02.png',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
avatarname: '头像3',
|
|||
|
|
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_03.png',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
avatarname: '头像4',
|
|||
|
|
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_04.png',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
avatarname: '头像5',
|
|||
|
|
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_05.png',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
avatarname: '头像6',
|
|||
|
|
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_06.png',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
avatarname: '头像7',
|
|||
|
|
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_07.png',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
avatarname: '头像8',
|
|||
|
|
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_08.png',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
avatarname: '头像9',
|
|||
|
|
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_09.png',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
avatarname: '头像10',
|
|||
|
|
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_10.png',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
avatarname: '头像11',
|
|||
|
|
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_11.png',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
avatarname: '头像12',
|
|||
|
|
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_12.png',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
avatarname: '头像13',
|
|||
|
|
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_13.png',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
avatarname: '头像14',
|
|||
|
|
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_14.png',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
avatarname: '头像15',
|
|||
|
|
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_15.png',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
avatarname: '头像16',
|
|||
|
|
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_16.png',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
avatarname: '头像17',
|
|||
|
|
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_17.png',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
avatarname: '头像18',
|
|||
|
|
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_18.png',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
avatarname: '头像19',
|
|||
|
|
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_19.png',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
avatarname: '头像20',
|
|||
|
|
URL: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_20.png',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
popupToggle: false,
|
|||
|
|
popupToggleAvatar: false,
|
|||
|
|
imageSelected: false,
|
|||
|
|
imageTitle: '点击操作',
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
components: {},
|
|||
|
|
props: {},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 生命周期函数--监听页面加载
|
|||
|
|
*/
|
|||
|
|
onLoad() {
|
|||
|
|
this.setData({
|
|||
|
|
userInfo: app.globalData.userProfile,
|
|||
|
|
});
|
|||
|
|
console.log(app.globalData.userProfile);
|
|||
|
|
console.log(app.globalData.userProfile.gender);
|
|||
|
|
if (app.globalData.userProfile.gender === 'Gender_Type_Unknown') {
|
|||
|
|
this.index = 0;
|
|||
|
|
} else if (app.globalData.userProfile.gender === 'Gender_Type_Female') {
|
|||
|
|
this.index = 1;
|
|||
|
|
} else if (app.globalData.userProfile.gender === 'Gender_Type_Male') {
|
|||
|
|
this.index = 2;
|
|||
|
|
}
|
|||
|
|
uni.setNavigationBarTitle({
|
|||
|
|
title: '个人中心',
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
// 修改性别
|
|||
|
|
gender: function (e) {
|
|||
|
|
console.log('picker发送选择改变，携带值为', e.target.value);
|
|||
|
|
this.index = e.target.value;
|
|||
|
|
if (this.index === 0) {
|
|||
|
|
// 修改个人标配资料
|
|||
|
|
let promise = uni.$TUIKit.updateMyProfile({
|
|||
|
|
gender: this.TIM.TYPES.GENDER_UNKNOWN,
|
|||
|
|
});
|
|||
|
|
promise
|
|||
|
|
.then(imResponse => {
|
|||
|
|
console.log(imResponse.data); // 更新资料成功
|
|||
|
|
this.userInfo = imResponse.data;
|
|||
|
|
})
|
|||
|
|
.catch(function (imError) {
|
|||
|
|
console.warn('updateMyProfile error:', imError); // 更新资料失败的相关信息
|
|||
|
|
});
|
|||
|
|
} else if (this.index === 1) {
|
|||
|
|
let promise = uni.$TUIKit.updateMyProfile({
|
|||
|
|
gender: this.TIM.TYPES.GENDER_FEMALE,
|
|||
|
|
});
|
|||
|
|
promise
|
|||
|
|
.then(imResponse => {
|
|||
|
|
console.log(imResponse.data); // 更新资料成功
|
|||
|
|
this.userInfo = imResponse.data;
|
|||
|
|
})
|
|||
|
|
.catch(function (imError) {
|
|||
|
|
console.warn('updateMyProfile error:', imError); // 更新资料失败的相关信息
|
|||
|
|
});
|
|||
|
|
} else if (this.index === 2) {
|
|||
|
|
let promise = uni.$TUIKit.updateMyProfile({
|
|||
|
|
gender: this.TIM.TYPES.GENDER_MALE,
|
|||
|
|
});
|
|||
|
|
promise
|
|||
|
|
.then(imResponse => {
|
|||
|
|
console.log(imResponse.data); // 更新资料成功
|
|||
|
|
// this.userInfo.gender = '男'
|
|||
|
|
this.userInfo = imResponse.data;
|
|||
|
|
})
|
|||
|
|
.catch(function (imError) {
|
|||
|
|
console.warn('updateMyProfile error:', imError); // 更新资料失败的相关信息
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
bindEditInput(e) {
|
|||
|
|
const val = e.detail.value;
|
|||
|
|
this.setData({
|
|||
|
|
infoNick: val ? val : '',
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 修改昵称确认
|
|||
|
|
handleEditSubmit() {
|
|||
|
|
if (this.infoNick === app.globalData.userProfile.nick) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.setData({
|
|||
|
|
popupToggle: false,
|
|||
|
|
});
|
|||
|
|
const promise = uni.$TUIKit.updateMyProfile({
|
|||
|
|
nick: this.infoNick,
|
|||
|
|
});
|
|||
|
|
promise
|
|||
|
|
.then(imResponse => {
|
|||
|
|
console.log(imResponse.data); // Friend 实例
|
|||
|
|
this.setData({
|
|||
|
|
userInfo: imResponse.data,
|
|||
|
|
popupToggle: false,
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
.catch(imError => {
|
|||
|
|
this.setData({
|
|||
|
|
popupToggle: false,
|
|||
|
|
});
|
|||
|
|
console.warn('updateMyProfile error:', imError); // 更新资料失败的相关信息
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
handleEditToggle() {
|
|||
|
|
this.setData({
|
|||
|
|
popupToggle: !this.popupToggle,
|
|||
|
|
infoNick: this.userInfo.nick,
|
|||
|
|
});
|
|||
|
|
console.log(this.infoNick, '999');
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 修改昵称 禁止冒泡
|
|||
|
|
handleCatchTap() {
|
|||
|
|
return;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 修改头像
|
|||
|
|
changeAvatar() {
|
|||
|
|
this.setData({
|
|||
|
|
popupToggleAvatar: true,
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
click(e) {
|
|||
|
|
console.log(e.currentTarget.dataset.value);
|
|||
|
|
this.setData({
|
|||
|
|
avatar: e.currentTarget.dataset.value.URL,
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 修改头像确认
|
|||
|
|
handleEditSubmitAvatar() {
|
|||
|
|
uni.$TUIKit
|
|||
|
|
.updateMyProfile({
|
|||
|
|
avatar: this.avatar,
|
|||
|
|
})
|
|||
|
|
.then(imResponse => {
|
|||
|
|
this.setData({
|
|||
|
|
userInfo: imResponse.data,
|
|||
|
|
popupToggleAvatar: !this.popupToggleAvatar,
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
.catch(() => {
|
|||
|
|
this.setData({
|
|||
|
|
popupToggleAvatar: !this.popupToggleAvatar,
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
handleEditToggleAvatar() {
|
|||
|
|
this.setData({
|
|||
|
|
popupToggleAvatar: !this.popupToggleAvatar,
|
|||
|
|
avatar: this.avatar,
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
<style>
|
|||
|
|
/* miniprogram/pages/Tui-personal/personal.wxss */
|
|||
|
|
.container {
|
|||
|
|
background: #eef0f3;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-size: cover;
|
|||
|
|
width: 100vw;
|
|||
|
|
height: 100vh;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
align-items: center;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
.item {
|
|||
|
|
display: flex;
|
|||
|
|
width: 100%;
|
|||
|
|
justify-content: left;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.avatar {
|
|||
|
|
background: #ffffff;
|
|||
|
|
position: relative;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 56px;
|
|||
|
|
padding-left: 20px;
|
|||
|
|
border-bottom: 1px solid #eef0f3;
|
|||
|
|
border-top: 8px solid #ffffff;
|
|||
|
|
}
|
|||
|
|
.nickname {
|
|||
|
|
position: relative;
|
|||
|
|
background: #ffffff;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 56px;
|
|||
|
|
padding-left: 20px;
|
|||
|
|
border-bottom: 1px solid #eef0f3;
|
|||
|
|
border-top: 10px solid #ffffff;
|
|||
|
|
}
|
|||
|
|
.aside-left {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
float: left;
|
|||
|
|
font-family: PingFangSC-Regular;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #333333;
|
|||
|
|
letter-spacing: 0;
|
|||
|
|
line-height: 56px;
|
|||
|
|
}
|
|||
|
|
.image_radius {
|
|||
|
|
float: right;
|
|||
|
|
width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
padding-right: 48px;
|
|||
|
|
padding-top: 8px;
|
|||
|
|
}
|
|||
|
|
.aside-right {
|
|||
|
|
float: right;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #999999;
|
|||
|
|
letter-spacing: 0;
|
|||
|
|
text-align: right;
|
|||
|
|
line-height: 56px;
|
|||
|
|
padding-right: 48px;
|
|||
|
|
}
|
|||
|
|
.listimage {
|
|||
|
|
width: 16px;
|
|||
|
|
height: 16px;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 20px;
|
|||
|
|
right: 10px;
|
|||
|
|
}
|
|||
|
|
.popup-mask {
|
|||
|
|
width: 100vw;
|
|||
|
|
height: 100vh;
|
|||
|
|
position: fixed;
|
|||
|
|
z-index: 10;
|
|||
|
|
top: 0; /* #ifdef H5 */
|
|||
|
|
top: calc(88rpx + constant(safe-area-inset-top));
|
|||
|
|
top: calc(88rpx + env(safe-area-inset-top)); /* #endif */
|
|||
|
|
right: 0;
|
|||
|
|
background: rgba(0, 0, 0, 0.6);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
}
|
|||
|
|
.popup-main {
|
|||
|
|
width: 100vw;
|
|||
|
|
height: 400rpx;
|
|||
|
|
background: #ffffff;
|
|||
|
|
padding: 32px 20px;
|
|||
|
|
}
|
|||
|
|
.popup-main-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 24px;
|
|||
|
|
color: #000000;
|
|||
|
|
letter-spacing: 0;
|
|||
|
|
line-height: 36px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-main-header button {
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #5856d5;
|
|||
|
|
letter-spacing: 0;
|
|||
|
|
line-height: 28px;
|
|||
|
|
width: auto !important;
|
|||
|
|
background: transparent;
|
|||
|
|
margin: 0 !important;
|
|||
|
|
}
|
|||
|
|
.popup-main-input {
|
|||
|
|
background: #f4f5f9;
|
|||
|
|
padding: 14px 20px;
|
|||
|
|
margin: 20px 0;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
}
|
|||
|
|
.text {
|
|||
|
|
font-family: PingFangSC-Regular;
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #999999;
|
|||
|
|
letter-spacing: 0;
|
|||
|
|
}
|
|||
|
|
.popup-mask-avatar {
|
|||
|
|
width: 100vw;
|
|||
|
|
height: 100vh;
|
|||
|
|
position: fixed;
|
|||
|
|
z-index: 10;
|
|||
|
|
top: 0; /* #ifdef H5 */
|
|||
|
|
top: calc(88rpx + constant(safe-area-inset-top));
|
|||
|
|
top: calc(88rpx + env(safe-area-inset-top)); /* #endif */
|
|||
|
|
right: 0;
|
|||
|
|
background: rgba(0, 0, 0, 0.6);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
}
|
|||
|
|
.popup-main-avatar {
|
|||
|
|
width: 100vw;
|
|||
|
|
height: 70%;
|
|||
|
|
background: #ffffff;
|
|||
|
|
padding: 32px 20px;
|
|||
|
|
}
|
|||
|
|
.popup-main-header-avatar {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 24px;
|
|||
|
|
color: #000000;
|
|||
|
|
letter-spacing: 0;
|
|||
|
|
line-height: 36px;
|
|||
|
|
height: 510px;
|
|||
|
|
}
|
|||
|
|
.popup-main-header-title-avatar {
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
padding-left: 10px;
|
|||
|
|
width: 104px;
|
|||
|
|
height: 25px;
|
|||
|
|
}
|
|||
|
|
.button-avatar {
|
|||
|
|
/* width: 32px;
|
|||
|
|
height: 24px; */
|
|||
|
|
float: right;
|
|||
|
|
/* padding-top: 5px; */
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #5856d5;
|
|||
|
|
letter-spacing: 0;
|
|||
|
|
line-height: 25px;
|
|||
|
|
width: auto !important;
|
|||
|
|
background: transparent;
|
|||
|
|
/* margin-top:-5px; */
|
|||
|
|
margin-right: 28px;
|
|||
|
|
}
|
|||
|
|
.image-list {
|
|||
|
|
padding-top: 16px;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 800px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
padding-left: 10px;
|
|||
|
|
}
|
|||
|
|
.image-avatar {
|
|||
|
|
width: 68px;
|
|||
|
|
height: 68px;
|
|||
|
|
float: left;
|
|||
|
|
margin: 10px 10px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
border: 1px solid #ffffff;
|
|||
|
|
}
|
|||
|
|
.image-avatar-active {
|
|||
|
|
border: 1px solid #5856d5;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
</style>
|