285 lines
8.6 KiB
Vue
285 lines
8.6 KiB
Vue
<template>
|
|
<view class="main">
|
|
<view class="contentBox">
|
|
<view class="contentItem">
|
|
<view class="itemLeft">头像</view>
|
|
<view class="itemRight">
|
|
<view class="rightImgBox">
|
|
<button class="avatarBtn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
|
|
<image class="headerImg" :src="WXProfile ||
|
|
(userInfo && userInfo.MEMBERSHIP_HEADIMAGEURL
|
|
? userInfo.MEMBERSHIP_HEADIMAGEURL
|
|
: '')
|
|
" />
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="contentItem">
|
|
<view class="itemLeft">昵称</view>
|
|
<view class="itemRight">
|
|
<view class="phoneBox">
|
|
{{ userInfo.MEMBERSHIP_NAME }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="contentItem">
|
|
<view class="itemLeft">手机号码</view>
|
|
<view class="itemRight">
|
|
<view class="phoneBox">
|
|
{{ phone }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="contentItem" @click="handleGoAddress">
|
|
<view class="itemLeft">地址管理</view>
|
|
<view class="itemRight">
|
|
<view class="rightGoBox">
|
|
<text class="goText">点击跳转</text>
|
|
<image class="goIcon" src="/static/images/home/rightArrow.svg" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="contentItem" style="border-bottom: 0px;" @click="handleShowPrivacy">
|
|
<view class="itemLeft">隐私协议</view>
|
|
<view class="itemRight">
|
|
<view class="rightGoBox">
|
|
<text class="goText">点击查看</text>
|
|
<image class="goIcon" src="/static/images/home/rightArrow.svg" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
|
|
<view class="btnBox">
|
|
<!-- <view class="saveBtn" style="margin-bottom: 24rpx;">保存修改</view> -->
|
|
<view class="loginOut" @click="handleGoLoginOut">退出登录</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from "vuex";
|
|
export default {
|
|
data() {
|
|
return {
|
|
userInfo: {},// 用户信息
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
user: "user",
|
|
}),
|
|
phone() {
|
|
if (this.user.MEMBERSHIP_MOBILEPHONE) {
|
|
let a = this.user.MEMBERSHIP_MOBILEPHONE.substring(0, 3);
|
|
let b = this.user.MEMBERSHIP_MOBILEPHONE.substring(7, 11);
|
|
return a + "****" + b;
|
|
} else {
|
|
return "";
|
|
}
|
|
},
|
|
},
|
|
onLoad() {
|
|
// 拿用户信息
|
|
this.handleGetUserDetail();
|
|
},
|
|
methods: {
|
|
// 退出登录
|
|
handleGoLoginOut() {
|
|
let _this = this
|
|
uni.showModal({
|
|
content: '确定退出登录？',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
uni.clearStorageSync()
|
|
_this.$store.commit('RESET_ALL_STATE')
|
|
setTimeout(() => {
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
})
|
|
}, 1000);
|
|
} else if (res.cancel) {
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 点击跳转地址管理
|
|
handleGoAddress() {
|
|
uni.navigateTo({
|
|
url:
|
|
"/pages/myAddress/address/index"
|
|
});
|
|
},
|
|
// 打开隐私协议
|
|
handleShowPrivacy() {
|
|
wx.openPrivacyContract()
|
|
},
|
|
// 拿到用户详情
|
|
async handleGetUserDetail() {
|
|
const userData = await this.$api.getCoop({
|
|
action_type: "GetMembershipInfo",
|
|
WechatUserId: this.user.WechatUserId,
|
|
});
|
|
this.userInfo = userData.Data;
|
|
this.$forceUpdate();
|
|
console.log("this.userInfo", this.userInfo);
|
|
},
|
|
|
|
// 用户上传头像
|
|
async onChooseAvatar(e) {
|
|
let _this = this;
|
|
uni.uploadFile({
|
|
url: "https://api.eshangtech.com/EShangApiMain/Picture/UploadPicture", // 你的接口 URL
|
|
filePath: e.detail.avatarUrl,
|
|
name: "file", // 表单中的文件字段名
|
|
formData: {
|
|
Tabletype: "1005", // 表单中其他数据
|
|
},
|
|
success: async (uploadRes) => {
|
|
let data = uploadRes.data ? JSON.parse(uploadRes.data) : "";
|
|
let url = data.Result_Data.ImageUrl;
|
|
if (url) {
|
|
let req = {
|
|
membershipId: this.user.MEMBERSHIP_ID,
|
|
headImgUrl: url,
|
|
};
|
|
_this.WXProfile = url;
|
|
const userInfoData = await _this.$api.$get(
|
|
"/WeChat/UpdateMemberInfo",
|
|
req
|
|
);
|
|
if (userInfoData.Result_Code === 100) {
|
|
_this.handleGetUserDetail();
|
|
}
|
|
}
|
|
},
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.main {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
box-sizing: border-box;
|
|
background-color: #F5F5F5;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
|
|
.contentBox {
|
|
width: 100%;
|
|
background-color: #fff;
|
|
box-sizing: border-box;
|
|
padding: 0 32rpx;
|
|
margin-top: 16rpx;
|
|
|
|
.contentItem {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 32rpx 0;
|
|
border-bottom: 2px solid #F5F5F5;
|
|
|
|
.itemLeft {
|
|
width: 40%;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.itemRight {
|
|
width: 60%;
|
|
|
|
.rightImgBox {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
|
|
.avatarBtn {
|
|
width: 104rpx;
|
|
height: 104rpx;
|
|
padding: 0;
|
|
border-radius: 50%;
|
|
margin: 0;
|
|
|
|
.headerImg {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rightGoBox {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
|
|
.goText {
|
|
font-size: 24rpx;
|
|
color: #a1a1a1;
|
|
}
|
|
|
|
.goIcon {
|
|
width: 26rpx;
|
|
height: 26rpx;
|
|
margin-left: 8rpx;
|
|
}
|
|
}
|
|
|
|
.phoneBox {
|
|
font-size: 24rpx;
|
|
color: #a1a1a1;
|
|
text-align: right;
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.btnBox {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 32rpx;
|
|
|
|
.saveBtn {
|
|
width: 100%;
|
|
border-radius: 48rpx;
|
|
background-color: #07C160;
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
font-style: normal;
|
|
padding: 24rpx 0;
|
|
}
|
|
|
|
.loginOut {
|
|
width: 100%;
|
|
border-radius: 48rpx;
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
color: #07C160;
|
|
text-align: center;
|
|
font-style: normal;
|
|
padding: 24rpx 0;
|
|
border: 1px solid #07C160;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
</style>
|