<template>
<view class="content">
<!-- #ifdef MP-WEIXIN -->
<view class="row b-b flex jg">
<text class="tit">头像</text>
<!-- <image :src="userInfo.avatar" @click.stop="imgsub"></image> -->
<button type="primary" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" plain="true"
style="border: none;position: relative;">
<image class="avatar" :src="userInfo.avatar"></image>
</button>
</view>
<view class="row b-b flex">
<text class="tit">昵称</text>
<input class="input" v-model="userInfo.nickname" type="nickname" @blur="test"
placeholder-class="placeholder" />
</view>
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<view class="row b-b flex jg">
<text class="tit">头像</text>
<image class="avatar" :src="userInfo.avatar" @click.stop="imgsub"></image>
</view>
<view class="row b-b flex">
<text class="tit">昵称</text>
<input class="input" v-model="userInfo.nickname" type="text" placeholder-class="placeholder" />
</view>
<!-- #endif -->
<!-- <view class="row">
<text class="tit">设置密码</text>
<input class="input" type="text" disabled="true" v-model="userInfo.phone" placeholder-class="placeholder" />
</view> -->
<view class="add-btn" @click="confirm">提交</view>
<view class="add-btn out" @click="cancel" style="margin-top: 20rpx;">退出</view>
<!-- <uni-popup ref="popup" type="center">
<view class="psw-wrapper">
<view class="psw-title">请输入自己的账户</view>
<input type="text" v-model="password" class="psw-ipt" />
<view class="psw-btn">
<text @click.stop="qx">取消</text>
<text class="psw-qd" @click.stop="pswQd">确定</text>
</view>
</view>
</uni-popup> -->
</view>
</template>
<script>
import {
mapState,
mapMutations
} from 'vuex';
import {
upload
} from '@/api/order.js';
import {
userEdit,
logout
} from '@/api/set.js';
import {
resolve
} from 'url';
import {
rejects
} from 'assert';
export default {
data() {
return {
show: false,
password: '',
}
},
onLoad() {
console.log(this.baseURL)
},
computed: {
...mapState('user', ['userInfo']),
...mapState(['baseURL'])
},
methods: {
...mapMutations('user', ['logout']),
imgsub() {
console.log('上传头像')
upload({
filename: ''
}).then(data => {
console.log("data", data);
this.userInfo.avatar = data[0].url;
})
},
uploadImage(image) {
console.log(this.baseURL + '/api/upload/image', 'url')
uni.uploadFile({
url: this.baseURL + '/api/upload/image', //仅为示例，非真实的接口地址
filePath: image,
name: 'file',
header: {
"Authori-zation": 'Bearer ' + uni.getStorageSync('token')
},
success: (uploadFileRes) => {
let info
if ("string" === typeof uploadFileRes.data) {
info = JSON.parse(uploadFileRes.data).data
} else {
info = uploadFileRes.data.data
}
console.log(info);
this.userInfo.avatar = info.url
},
fail(err) {
console.log(err, 'err');
}
});
},
confirm() {
if (this.userInfo.nickname == '微信用户') {
return this.$api.msg('请修改昵称')
}
userEdit({
avatar: this.userInfo.avatar,
nickname: this.userInfo.nickname
})
.then(e => {
this.$api.msg('修改成功');
setTimeout(() => {
uni.switchTab({
url: '/pages/user/user'
});
}, 1000);
console.log(e);
})
.catch(e => {
console.log(e);
});
},
toLogout() {
let obj = this;
uni.showModal({
content: '确定要退出登录么',
success: (e) => {
if (e.confirm) {
logout({}).then((e) => {
uni.navigateBack();
}).catch((e) => {
console.log(e);
})
obj.logout();
}
}
});
},
test(e) {
console.log(e.detail, '123456');
},
onChooseAvatar(e) {
// console.log(e.detail.avatarUrl);
this.uploadImage(e.detail.avatarUrl)
// this.userInfo.avatar = e.detail.avatarUrl;
},
cancel() {
// this.$refs.popup.open();
let obj = this;
uni.showModal({
content: '确定要退出登录么',
success: e => {
if (e.confirm) {
logout({}).then(e => {
obj.logout();
uni.switchTab({
url: '/pages/index/index'
})
})
.catch(e => {
console.log(e);
});
}
}
});
},
qx() {
this.password = '';
this.$refs.popup.close();
},
pswQd() {
if (this.password != this.userInfo.phone) {
this.$refs.popup.close();
this.password = '';
this.$api.msg("请输入自己的账户")
return
}
this.$refs.popup.close();
this.password = '';
this.$api.msg("申请注销成功，请耐心等待审核")
}
}
}
</script>
<style lang="scss">
.row1 {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
padding: 0 30upx;
height: 110upx;
background: #fff;
margin-bottom: 20upx;
.tit {
flex-shrink: 0;
width: 120upx;
font-size: $font-lg;
color: $font-color-dark;
}
.background-img {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
background: #f2f2f2;
}
}
.row {
display: flex;
align-items: center;
padding: 0 30upx;
height: 110upx;
background: #fff;
button {
width: 80rpx;
height: 80rpx;
margin: 0;
padding: 0;
border-radius: 50%;
}
.avatar {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
position: relative;
z-index: 2;
}
.tit {
flex-shrink: 0;
width: 120upx;
font-size: $font-lg;
color: $font-color-dark;
}
.input {
flex: 1;
text-align: right;
font-size: $font-base;
color: $color-gray;
}
}
.add-btn {
display: flex;
align-items: center;
justify-content: center;
margin: 158rpx auto 30rpx;
width: 560rpx;
height: 80rpx;
background: #ff4c4c;
border-radius: 40px;
color: #FFFFFF;
}
.out {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 30rpx;
width: 560rpx;
height: 80rpx;
border: 1px solid #ff4c4c;
background: #FFFFFF;
border-radius: 40px;
color: #ff4c4c;
}
.psw-wrapper {
width: 548rpx;
height: 344rpx;
background-color: #ffffff;
.psw-title {
width: 100%;
font-size: 35rpx;
padding: 43rpx 0 49rpx;
text-align: center;
font-weight: 800;
}
.psw-ipt {
display: block;
background-color: #dce3ed;
height: 90rpx;
width: 464rpx;
padding-left: 30rpx;
margin: 0 auto;
font-size: 80rpx;
}
.psw-btn text {
display: inline-block;
text-align: center;
width: 50%;
padding-top: 29rpx;
font-size: 35rpx;
}
.psw-qd {
color: #32C6FF;
}
}
</style>