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.
439 lines
10 KiB
439 lines
10 KiB
<!-- 个人信息 -->
|
|
<template>
|
|
<view class="container" style="background-color: #ffffff;min-height: calc(100vh);">
|
|
<!-- <view class="u-flex u-row-between u-p-x-30 info-head u-p-y-20">
|
|
<view class="info-title">基本信息</view>
|
|
<button class="u-reset-button save-btn" :class="{ 'dis-btn': editInfoDisabled }"
|
|
:disabled="editInfoDisabled" @tap="editUserInfo">
|
|
保存
|
|
</button>
|
|
</view> -->
|
|
<view class="avatarContainer" @tap="onChooseImg">
|
|
<image class="avatar" :src="userData.avatar" mode=""></image>
|
|
<view class="edit">
|
|
<u-icon name="edit-pen" size="20" color="#ffffff"></u-icon>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="user-list u-flex u-row-between">
|
|
<text class="list-name">头像</text>
|
|
<view class="u-flex" @tap="onChooseImg">
|
|
<image class="avatar" :src="userData.avatar" mode=""></image>
|
|
<text class="u-iconfont uicon-arrow-right u-m-l-20" style="color:#999;"></text>
|
|
</view>
|
|
</view> -->
|
|
<view class="user-list u-flex">
|
|
<text class="list-name">昵称</text>
|
|
<view class="u-flex">
|
|
<input class="list-val" v-model="userData.nickname" @input="onChangeNickName" @blur="onChangeNickName"
|
|
@confirm="onChangeNickName" placeholder="请输入昵称~" maxlength="50"
|
|
placeholder-style="color:#222222;fontSize:28rpx" />
|
|
<!-- <text class="u-iconfont uicon-arrow-right u-m-l-20" style="color:#999;"></text> -->
|
|
</view>
|
|
</view>
|
|
<view class="user-list u-flex">
|
|
<text class="list-name">ID</text>
|
|
<view class="u-flex">
|
|
<text class="list-val">{{ userData.id}}</text>
|
|
<!-- <text class="u-iconfont uicon-arrow-right u-m-l-20" style="color:#999;"></text> -->
|
|
</view>
|
|
</view>
|
|
<view class="user-list u-flex" @tap="bindMobile">
|
|
<text class="list-name">手机</text>
|
|
<view class="u-flex">
|
|
<text class="list-val">{{ userInfo.mobile || "暂未绑定手机号" }}</text>
|
|
<text v-if="userInfo.id && !userInfo.verification.mobile" class="u-iconfont uicon-arrow-right u-m-l-20"
|
|
style="color:#999;"></text>
|
|
<text v-else class="u-iconfont uicon-checkmark-circle-fill u-m-l-20" style="color:#09BB07;"></text>
|
|
</view>
|
|
</view>
|
|
<view class="user-list u-flex u-m-b-10" @tap="showCalendar = true">
|
|
<text class="list-name">生日</text>
|
|
<view class="u-flex">
|
|
<text class="list-val">{{ userData.birthday || "请选择生日~" }}</text>
|
|
<!-- <text class="u-iconfont uicon-arrow-right u-m-l-20" style="color:#999;"></text> -->
|
|
</view>
|
|
</view>
|
|
|
|
<!-- <view class="user-list u-flex u-row-between" @tap="$Router.push('/pages/user/address/list')">
|
|
<text class="list-name">地址管理</text>
|
|
<view class="u-flex">
|
|
<text class="list-val"></text>
|
|
<text class="u-iconfont uicon-arrow-right u-m-l-20" style="color:#999;"></text>
|
|
</view>
|
|
</view>
|
|
<view class="user-list u-flex u-row-between" @tap="changePwd">
|
|
<text class="list-name">修改密码</text>
|
|
<view class="u-flex">
|
|
<text class="list-val"></text>
|
|
<text class="u-iconfont uicon-arrow-right u-m-l-20" style="color:#999;"></text>
|
|
</view>
|
|
</view> -->
|
|
<view class="btnGroup">
|
|
<button class="u-reset-button save-btn" :class="{ 'dis-btn': editInfoDisabled }"
|
|
:disabled="editInfoDisabled" @tap="editUserInfo">
|
|
保存
|
|
</button>
|
|
<view class="btn-box u-flex u-row-center u-col-center">
|
|
<button hover-class="hover-logout-btn" class="u-reset-button logout-btn" @tap="showModal = true">
|
|
退出登录
|
|
</button>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
<!-- 登录提示 -->
|
|
<shopro-auth-modal v-if="authType"></shopro-auth-modal>
|
|
<!-- 日历 -->
|
|
<u-picker @confirm="changeCalendar" mode="time" confirm-color="#17C161" v-model="showCalendar" :params="{
|
|
year: true,
|
|
month: true,
|
|
day: true,
|
|
hour: false,
|
|
minute: false,
|
|
second: false
|
|
}"></u-picker>
|
|
<!-- modal -->
|
|
<u-modal ref="uModal" v-model="showModal" :show-cancel-button="true" confirm-color="#F54141"
|
|
cancel-color="#666666" @confirm="confirmLogOut" content="确定退出登录？"></u-modal>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapMutations, mapActions, mapState, mapGetters } from "vuex";
|
|
import Auth from "@/shopro/permission/index.js";
|
|
import wechat from "@/shopro/wechat/wechat";
|
|
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
platform: this.$platform.get(),
|
|
userData: {},
|
|
showCalendar: false,
|
|
showModal: false,
|
|
editInfoDisabled: true,
|
|
thirdOauthInfo: null //第三方信息
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters(["userInfo", "authType"])
|
|
},
|
|
onLoad() {
|
|
this.userData = JSON.parse(JSON.stringify(this.userInfo));
|
|
this.getThirdOauthInfo();
|
|
},
|
|
methods: {
|
|
...mapActions(["getUserInfo", "showAuthModal", "logout"]),
|
|
// 选择日期
|
|
changeCalendar(e) {
|
|
this.userData.birthday = `${e.year}-${e.month}-${e.day}`;
|
|
this.editInfoDisabled = this.userData.birthday == this.userInfo.birthday;
|
|
},
|
|
// 修改密码
|
|
changePwd() {
|
|
this.showAuthModal("changePwd");
|
|
},
|
|
// 修改昵称
|
|
onChangeNickName() {
|
|
this.editInfoDisabled = this.userData.nickname == this.userInfo.nickname;
|
|
},
|
|
// 修改手机号
|
|
bindMobile() {
|
|
!this.userInfo.verification.mobile && this.showAuthModal("bindMobile");
|
|
},
|
|
// 更换头像
|
|
async onChooseImg() {
|
|
let authState = 0;
|
|
authState += await new Auth("writePhotosAlbum").check();
|
|
if (authState < 1) return;
|
|
authState += await new Auth("camera").check();
|
|
if (authState < 2) return;
|
|
const chooseImageRes = await this.chooseImage(1);
|
|
const uploadImageRes = await this.uploadImage(chooseImageRes[0]);
|
|
this.userData.avatar = uploadImageRes.fullurl;
|
|
this.userData.fileUrl = uploadImageRes.url;
|
|
this.editInfoDisabled = this.userData.avatar == this.userInfo.avatar;
|
|
},
|
|
|
|
// 第三方绑定信息
|
|
getThirdOauthInfo() {
|
|
let that = this;
|
|
that.$http("user.thirdOauthInfo").then(res => {
|
|
if (res.code === 1) {
|
|
that.thirdOauthInfo = res.data;
|
|
}
|
|
});
|
|
},
|
|
|
|
// 解绑
|
|
unbindThirdOauth(platform, provider) {
|
|
let that = this;
|
|
that.$http("user.unbindThirdOauth", {
|
|
platform,
|
|
provider
|
|
}).then(res => {
|
|
if (res.code === 1) {
|
|
uni.showToast({
|
|
title: res.msg
|
|
});
|
|
that.thirdOauthInfo = null;
|
|
that.getUserInfo();
|
|
}
|
|
});
|
|
},
|
|
// 绑定
|
|
async bindThirdOauth(platform, provider, payload = null) {
|
|
let that = this;
|
|
switch (platform) {
|
|
case "wxOfficialAccount":
|
|
wechat.bind();
|
|
break;
|
|
case "wxMiniProgram":
|
|
await wechat.bind(payload);
|
|
that.getUserInfo();
|
|
break;
|
|
case "App":
|
|
if (provider === "Wechat") {
|
|
await wechat.bind();
|
|
}
|
|
that.getUserInfo();
|
|
that.getThirdOauthInfo();
|
|
break;
|
|
}
|
|
},
|
|
|
|
// 退出登录
|
|
confirmLogOut() {
|
|
this.logout();
|
|
this.$Router.back();
|
|
},
|
|
// 修改信息
|
|
editUserInfo() {
|
|
let that = this;
|
|
if (!that.userData.nickname) {
|
|
this.$u.toast("昵称不能为空");
|
|
return false;
|
|
}
|
|
that.$http(
|
|
"user.profile",
|
|
{
|
|
nickname: that.userData.nickname,
|
|
birthday: that.userData.birthday,
|
|
avatar: that.userData.fileUrl
|
|
},
|
|
"保存中..."
|
|
).then(res => {
|
|
if (res.code === 1) {
|
|
that.getUserInfo();
|
|
that.editInfoDisabled = true;
|
|
that.$u.toast("保存成功");
|
|
}
|
|
});
|
|
},
|
|
// 图片处理-选择图片
|
|
async chooseImage(count = 1) {
|
|
return new Promise((resolve, reject) => {
|
|
uni.chooseImage({
|
|
count: count, //默认9
|
|
sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
|
|
sourceType: ["album"], //从相册选择
|
|
success: res => {
|
|
resolve(res.tempFilePaths);
|
|
}
|
|
});
|
|
}).catch(e => {
|
|
console.log(e);
|
|
});
|
|
},
|
|
// 图片处理-上传图片
|
|
async uploadImage(url) {
|
|
const that = this;
|
|
return new Promise((resolve, reject) => {
|
|
that.$u.toast("上传中...");
|
|
uni.uploadFile({
|
|
url: that.$BASE_URL + "/api/common/upload",
|
|
filePath: url,
|
|
name: "file",
|
|
header: { token: uni.getStorageSync("token") },
|
|
success: res => {
|
|
res = JSON.parse(res.data);
|
|
if (res.code === 1) {
|
|
that.$u.toast("上传成功");
|
|
resolve(res.data);
|
|
} else {
|
|
that.$u.toast("上传失败");
|
|
}
|
|
},
|
|
complete: e => {
|
|
uni.hideLoading();
|
|
}
|
|
});
|
|
}).catch(e => {
|
|
console.log(e);
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.avatarContainer{
|
|
position: relative;
|
|
text-align: center;
|
|
padding: 50rpx 0 50rpx 0rpx;
|
|
image{
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
background: #E9E9E9;
|
|
border-radius: 50%;
|
|
}
|
|
.edit{
|
|
position: absolute;
|
|
z-index: 999;
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
line-height: 50rpx;
|
|
text-align: center;
|
|
background: #17C161;
|
|
border-radius: 50%;
|
|
top: 150rpx;
|
|
left: calc(50% + 30rpx);
|
|
}
|
|
}
|
|
// 基本信息
|
|
.btnGroup {
|
|
margin-top: 200rpx;
|
|
.info-title {
|
|
line-height: 60rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
}
|
|
|
|
.save-btn {
|
|
height: 98rpx;
|
|
line-height: 98rpx;
|
|
margin:0 24rpx;
|
|
background: #17C161;
|
|
border-radius: 5rpx;
|
|
font-size: 28rpx;
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.dis-btn {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
// 三方
|
|
.other-account {
|
|
.head-title {
|
|
line-height: 82rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
}
|
|
|
|
.list-img {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.account-list {
|
|
background-color: #fff;
|
|
height: 100rpx;
|
|
padding: 0 20rpx;
|
|
|
|
.info {
|
|
.avatar {
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.name {
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
.bind-box {
|
|
.bind-btn {
|
|
padding: 0 20rpx;
|
|
line-height: 60rpx;
|
|
background: #f5f6f8;
|
|
border-radius: 20rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.relieve-btn {
|
|
border-radius: 20rpx;
|
|
padding: 0 20rpx;
|
|
line-height: 60rpx;
|
|
background: rgba(#ff0000, 0.05);
|
|
color: #ff0000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 个人信息项
|
|
.user-list {
|
|
background: #fff;
|
|
height: 119rpx;
|
|
border-bottom: 1rpx solid #EAEAEA;
|
|
padding: 0 24rpx;
|
|
|
|
.list-name {
|
|
font-size: 28rpx;
|
|
color: #222222;
|
|
width:200rpx;
|
|
}
|
|
|
|
// .avatar {
|
|
// width: 67rpx;
|
|
// height: 67rpx;
|
|
// border-radius: 50%;
|
|
// }
|
|
|
|
.list-val {
|
|
color: #222222;
|
|
font-size: 28rpx;
|
|
// text-align: right;
|
|
}
|
|
}
|
|
|
|
.btn-box {
|
|
margin-top:20rpx;
|
|
.logout-btn {
|
|
width: 100%;
|
|
margin: 0 24rpx;
|
|
height: 98rpx;
|
|
line-height: 98rpx;
|
|
border: 1rpx solid #f54141;
|
|
border-radius: 5rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
color: #f54141;
|
|
}
|
|
|
|
.hover-logout-btn {
|
|
width: 100%;
|
|
margin: 0 24rpx;
|
|
height: 98rpx;
|
|
line-height: 98rpx;
|
|
background: #f54141;
|
|
border: 1rpx solid #f54141;
|
|
border-radius: 5rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
</style>
|
|
|