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.
408 lines
8.8 KiB
408 lines
8.8 KiB
5 months ago
|
<template>
|
||
|
|
<view v-if="info">
|
||
|
|
<view class="user-other-info">
|
||
|
|
<div class="info-avatar-top">
|
||
|
|
<span>头像</span>
|
||
|
|
<view @click="uploadImg()">
|
||
|
|
<image :src="showImg(info.avatar)" mode="aspectFill"
|
||
|
|
style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
|
||
|
|
</view>
|
||
|
|
</div>
|
||
|
|
<navigator url="/subPackages/user/changeNickname" tag="view" class="userinfo-item">
|
||
|
|
<span>昵称</span>
|
||
|
|
<view>{{nickname}}</view>
|
||
|
|
</navigator>
|
||
|
|
<!-- <view class="userinfo-item" @click="showSexSelect = true">
|
||
|
|
<span>性别</span>
|
||
|
|
<view @click="$refs.popup.open()">{{gender == 1 ? '男' : (gender == 2 ? '女' : '保密')}}</view>
|
||
|
|
</view> -->
|
||
|
|
<view class="userinfo-item">
|
||
|
|
<span>手机号</span>
|
||
|
|
<view>{{info.mobile}}</view>
|
||
|
|
</view>
|
||
|
|
<!-- <view class="userinfo-item">
|
||
|
|
<span>生日</span>
|
||
|
|
<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
|
||
|
|
<view class="uni-input">{{birthday}}</view>
|
||
|
|
</picker>
|
||
|
|
</view>
|
||
|
|
<navigator url="/subPackages/user/logout" tag="view" class="userinfo-item">
|
||
|
|
<span>注销账号</span>
|
||
|
|
<i>注销后账号无法恢复，请谨慎操作</i>
|
||
|
|
</navigator> -->
|
||
|
|
<!-- <view class="btn-tao" @click="submit">保存</view> -->
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 性别弹框 -->
|
||
|
|
<uni-popup ref="popup" type="bottom">
|
||
|
|
<view class="popup-box">
|
||
|
|
<view class="popup-item flex-center" v-for="(item,index) in sexes" :key="index" @click="changesex(index)">{{item.text}}</view>
|
||
|
|
<view class="popup-items flex-center" @click="$refs.popup.close()">取消</view>
|
||
|
|
</view>
|
||
|
|
</uni-popup>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {pathToBase64} from "@/static/js/mmmm-image-tools/index.js"
|
||
|
|
export default {
|
||
|
|
name: "Profile",
|
||
|
|
data() {
|
||
|
|
const currentDate = this.getDate({
|
||
|
|
format: true
|
||
|
|
})
|
||
|
|
return {
|
||
|
|
date: currentDate,
|
||
|
|
info: null,
|
||
|
|
showSexSelect: false,
|
||
|
|
sexes: [{
|
||
|
|
value: '1',
|
||
|
|
text: '男'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: '2',
|
||
|
|
text: '女'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: '0',
|
||
|
|
text: '保密'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
today: null,
|
||
|
|
showCropper: false,
|
||
|
|
nickname: '',
|
||
|
|
gender: '',
|
||
|
|
birthday: '',
|
||
|
|
email: '',
|
||
|
|
fileList1: [],
|
||
|
|
startDate: '1900-1-1',
|
||
|
|
endDate: '2050-1-1'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
console.log(this.$store.state.user.userInfo,uni.getStorageSync('userInfo'))
|
||
|
|
this.getList()
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
// startDate() {
|
||
|
|
// return this.getDate('start');
|
||
|
|
// },
|
||
|
|
// endDate() {
|
||
|
|
// return this.getDate('end');
|
||
|
|
// }
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getFile(e) {
|
||
|
|
console.log(e)
|
||
|
|
},
|
||
|
|
getList() {
|
||
|
|
let today = new Date();
|
||
|
|
today = today.getFullYear() + "/" + (today.getMonth() + 1) + "/" + today.getDate();
|
||
|
|
this.today = today;
|
||
|
|
this.Post({}, "/api/user/userInfo").then(res => {
|
||
|
|
if (!res.data.birthday) {
|
||
|
|
let date = new Date();
|
||
|
|
res.data.birthday = date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date
|
||
|
|
.getDate();
|
||
|
|
}
|
||
|
|
this.info = res.data;
|
||
|
|
this.nickname = this.info.nickname
|
||
|
|
this.email = this.info.email
|
||
|
|
this.birthday = this.info.birthday
|
||
|
|
this.gender = this.info.gender
|
||
|
|
this.info.token = JSON.parse(uni.getStorageSync('userInfo')).token || this.$store.state.user.userInfo.token
|
||
|
|
console.log(this.info)
|
||
|
|
this.$store.commit('changeUserInfo', this.info)
|
||
|
|
})
|
||
|
|
},
|
||
|
|
uploadImg() {
|
||
|
|
uni.chooseImage({
|
||
|
|
success: (chooseImageRes) => {
|
||
|
|
const tempFilePaths = chooseImageRes.tempFilePaths;
|
||
|
|
// // #ifdef MP-WEIXIN
|
||
|
|
// uni.getFileSystemManager().readFile({
|
||
|
|
// filePath: tempFilePaths[0],
|
||
|
|
// encoding: 'base64',
|
||
|
|
// success: res => {
|
||
|
|
// this.Post({
|
||
|
|
// method: 'POST',
|
||
|
|
// base64: 'data:image/png;base64,' + res.data
|
||
|
|
// }, '/api/common/base64').then(res => {
|
||
|
|
// if (res.data) {
|
||
|
|
// this.Post({
|
||
|
|
// avatar: res.data
|
||
|
|
// }, '/api/user/profile').then(res => {
|
||
|
|
// uni.showModal({
|
||
|
|
// title: '提示',
|
||
|
|
// content: res.msg,
|
||
|
|
// showCancel: false,
|
||
|
|
// success: res => {
|
||
|
|
// if (res.confirm) {
|
||
|
|
// this.getList()
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// })
|
||
|
|
// })
|
||
|
|
// }
|
||
|
|
// })
|
||
|
|
// }
|
||
|
|
// })
|
||
|
|
// // #endif
|
||
|
|
|
||
|
|
pathToBase64(tempFilePaths[0]).then(base64 => {
|
||
|
|
this.Post({
|
||
|
|
method: 'POST',
|
||
|
|
base64: base64
|
||
|
|
}, '/api/common/base64').then(res => {
|
||
|
|
if (res.data) {
|
||
|
|
this.Post({
|
||
|
|
avatar: res.data
|
||
|
|
}, '/api/user/profile').then(res => {
|
||
|
|
uni.showModal({
|
||
|
|
title: '提示',
|
||
|
|
content: res.msg,
|
||
|
|
showCancel: false,
|
||
|
|
success: res => {
|
||
|
|
if (res.confirm) {
|
||
|
|
this.getList()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
//生日
|
||
|
|
bindDateChange: function(e) {
|
||
|
|
this.birthday = e.detail.value
|
||
|
|
},
|
||
|
|
getDate(type) {
|
||
|
|
const date = new Date();
|
||
|
|
let year = date.getFullYear();
|
||
|
|
let month = date.getMonth() + 1;
|
||
|
|
let day = date.getDate();
|
||
|
|
|
||
|
|
if (type === 'start') {
|
||
|
|
year = year - 60;
|
||
|
|
} else if (type === 'end') {
|
||
|
|
year = year + 2;
|
||
|
|
}
|
||
|
|
month = month > 9 ? month : '0' + month;
|
||
|
|
day = day > 9 ? day : '0' + day;
|
||
|
|
return `${year}/${month}/${day}`;
|
||
|
|
},
|
||
|
|
changesex(index) {
|
||
|
|
this.gender = this.sexes[index].value
|
||
|
|
this.$refs.popup.close()
|
||
|
|
},
|
||
|
|
submit() {
|
||
|
|
uni.showModal({
|
||
|
|
title: '提示',
|
||
|
|
content: '确认修改您的信息？',
|
||
|
|
success: res => {
|
||
|
|
if (res.confirm) {
|
||
|
|
this.Post({
|
||
|
|
nickname: this.nickname,
|
||
|
|
gender: this.gender,
|
||
|
|
birthday: this.birthday
|
||
|
|
}, '/api/user/profile').then(res => {
|
||
|
|
console.log(res)
|
||
|
|
if (res.code == 1) {
|
||
|
|
uni.showModal({
|
||
|
|
title: '提示',
|
||
|
|
content: res.msg,
|
||
|
|
showCancel: false,
|
||
|
|
success: res => {
|
||
|
|
if (res.confirm) {
|
||
|
|
this.getList()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
view {
|
||
|
|
box-sizing: content-box;
|
||
|
|
}
|
||
|
|
.info-avatar-top {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
font-size: 30rpx;
|
||
|
|
border-bottom: 1rpx solid #D8D8D8;
|
||
|
|
padding: 40rpx 0;
|
||
|
|
height: 48rpx;
|
||
|
|
color: #333;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.info-avatar-top view{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.info-avatar-top view:after{
|
||
|
|
content: "";
|
||
|
|
width: 20rpx;
|
||
|
|
height: 20rpx;
|
||
|
|
margin-left: 6rpx;
|
||
|
|
background-image: url('https://static.ticket.sz-trip.com/tongli/images/user/rightIcon-gray.png');
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
.info-avatar-top img {
|
||
|
|
width: 80rpx;
|
||
|
|
height: 80rpx;
|
||
|
|
border-radius: 50%;
|
||
|
|
margin-right: 10rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.change-avatar-btn {
|
||
|
|
color: #FFF;
|
||
|
|
width: 220rpx;
|
||
|
|
margin: 0 auto;
|
||
|
|
line-height: 70rpx;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
background: #4C93FF;
|
||
|
|
position: relative;
|
||
|
|
font-size: 34rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.change-avatar-btn input {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-other-info {
|
||
|
|
margin: 30rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.userinfo-item {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 30rpx;
|
||
|
|
border-bottom: 1rpx solid #D8D8D8;
|
||
|
|
padding: 40rpx 30rpx 40rpx 0;
|
||
|
|
height: 48rpx;
|
||
|
|
color: #333;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-avatar-top span {
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 31rpx;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.userinfo-item span {
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 31rpx;
|
||
|
|
flex-shrink: 0;
|
||
|
|
color: #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.userinfo-item i {
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #999999;
|
||
|
|
}
|
||
|
|
|
||
|
|
.userinfo-item {
|
||
|
|
& view::after {
|
||
|
|
content: "";
|
||
|
|
width: 20rpx;
|
||
|
|
height: 20rpx;
|
||
|
|
margin-left: 6rpx;
|
||
|
|
background-image: url('https://static.ticket.sz-trip.com/tongli/images/user/rightIcon-gray.png');
|
||
|
|
background-size: 100% 100%;
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
margin: auto;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.birthday-box {
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cropper {
|
||
|
|
width: auto;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cropper-content {
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
z-index: 1000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dialog-footer .change-avatar-btn {
|
||
|
|
position: fixed;
|
||
|
|
text-align: center;
|
||
|
|
bottom: 80rpx;
|
||
|
|
left: 50%;
|
||
|
|
margin-left: -110rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-tao {
|
||
|
|
text-align: center;
|
||
|
|
font-size: 30rpx;
|
||
|
|
width: 697rpx;
|
||
|
|
height: 80rpx;
|
||
|
|
background: #C3282E;
|
||
|
|
border-radius: 40rpx;
|
||
|
|
line-height: 80rpx;
|
||
|
|
color: #FFFFFF;
|
||
|
|
position: fixed;
|
||
|
|
left: 26rpx;
|
||
|
|
bottom: 100rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popup-box {
|
||
|
|
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
||
|
|
background: #fff;
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
.popup-item {
|
||
|
|
width: 697rpx;
|
||
|
|
height: 99rpx;
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 31rpx;
|
||
|
|
color: #12293C;
|
||
|
|
margin: auto;
|
||
|
|
}
|
||
|
|
.popup-item:nth-child(2) {
|
||
|
|
border: none;
|
||
|
|
border-bottom: 1rpx solid #D8D8D8;
|
||
|
|
border-top: 1rpx solid #D8D8D8;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popup-items {
|
||
|
|
width: 100%;
|
||
|
|
height: 99rpx;
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 31rpx;
|
||
|
|
color: #12293C;
|
||
|
|
border-top: 13rpx solid #F2F2F2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|