17
This commit is contained in:
cansnow
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<view @click="clickItem" class="info_item">
|
||||
<view class="left_label">
|
||||
<text>{{ title }}</text>
|
||||
</view>
|
||||
<view class="right_value">
|
||||
<slot name="value">
|
||||
<text class="content">{{ content }}</text>
|
||||
</slot>
|
||||
<u-icon v-if="showArrow" name="arrow-right" size="16" color="#999"></u-icon>
|
||||
</view>
|
||||
<u-loading-icon v-show="loading" class="loading_icon"></u-loading-icon>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "",
|
||||
props: {
|
||||
title: String,
|
||||
content: String,
|
||||
showArrow: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
clickItem() {
|
||||
this.$emit("click");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.info_item {
|
||||
@include btwBox();
|
||||
height: 82rpx;
|
||||
padding: 0 44rpx;
|
||||
color: $uni-text-color;
|
||||
// border-bottom: 1px solid rgba(153,153,153,0.3);
|
||||
position: relative;
|
||||
|
||||
.right_value {
|
||||
@include vCenterBox();
|
||||
|
||||
.content {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.u-icon {
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.loading_icon {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<view class="page_container">
|
||||
<custom-nav-bar title="个人资料" />
|
||||
|
||||
<view class="info_wrap">
|
||||
<info-item :loading="loadingState.faceURL" @click="updateAvatar" title="头像">
|
||||
<my-avatar :src="selfInfo.faceURL" :desc="selfInfo.nickname" size="30" slot="value" />
|
||||
</info-item>
|
||||
<info-item @click="updateNickname" title="姓名" :content="selfInfo.nickname" />
|
||||
<info-item :loading="loadingState.gender" @click="updateGender" title="性别" :content="getGender" />
|
||||
<info-item :loading="loadingState.birth" @click="() => (showDatePicker = true)" title="生日"
|
||||
:content="getBirth" />
|
||||
</view>
|
||||
|
||||
<view class="info_wrap">
|
||||
<info-item :showArrow="false" title="手机号码" :content="selfInfo.mobile || '-'" />
|
||||
<info-item :showArrow="false" title="邮箱" :content="selfInfo.email || '-'" />
|
||||
</view>
|
||||
|
||||
<u-datetime-picker :minDate="0" :maxDate="nowDate" :show="showDatePicker" @confirm="confirmDate"
|
||||
@cancel="() => (showDatePicker = false)" v-model="selfInfo.birth" mode="date" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
businessInfoUpdate
|
||||
} from "@/api/login";
|
||||
import IMSDK from "openim-uniapp-polyfill";
|
||||
import CustomNavBar from "@/components/CustomNavBar/index.vue";
|
||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||
import dayjs from "dayjs";
|
||||
import InfoItem from "./InfoItem.vue";
|
||||
import util from "@/util";
|
||||
import {
|
||||
getPurePath
|
||||
} from "@/util/common";
|
||||
export default {
|
||||
components: {
|
||||
CustomNavBar,
|
||||
MyAvatar,
|
||||
InfoItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showDatePicker: false,
|
||||
loadingState: {
|
||||
faceURL: false,
|
||||
gender: false,
|
||||
birth: false,
|
||||
},
|
||||
nowDate: Date.now(),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
selfInfo() {
|
||||
return this.$store.getters.storeSelfInfo;
|
||||
},
|
||||
getGender() {
|
||||
if (this.selfInfo.sex === 0) {
|
||||
return "保密";
|
||||
}
|
||||
if (this.selfInfo.sex === 1) {
|
||||
return "男";
|
||||
}
|
||||
return "女";
|
||||
},
|
||||
getBirth() {
|
||||
console.log(this.selfInfo);
|
||||
const birth = this.selfInfo.birthday ?? 0;
|
||||
return dayjs(birth).format("YYYY-MM-DD");
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...util,
|
||||
updateNickname() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/markOrIDPage/index?isSelfNickname=true&sourceInfo=${JSON.stringify(this.selfInfo)}`,
|
||||
});
|
||||
},
|
||||
updateGender() {
|
||||
uni.showActionSheet({
|
||||
itemList: ['保密',"男", "女"],
|
||||
success: async ({
|
||||
tapIndex
|
||||
}) => {
|
||||
this.loadingState.gender = true;
|
||||
await this.updateSelfInfo({gender: tapIndex,},"gender",);
|
||||
},
|
||||
});
|
||||
},
|
||||
updateAvatar() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ["compressed"],
|
||||
success: async ({
|
||||
tempFilePaths
|
||||
}) => {
|
||||
const path = tempFilePaths[0];
|
||||
const nameIdx = path.lastIndexOf("/") + 1;
|
||||
const typeIdx = path.lastIndexOf(".") + 1;
|
||||
const fileName = path.slice(nameIdx);
|
||||
const fileType = path.slice(typeIdx);
|
||||
this.loadingState.faceURL = true;
|
||||
const {
|
||||
data: {
|
||||
url
|
||||
},
|
||||
} = await IMSDK.asyncApi(IMSDK.IMMethods.UploadFile, IMSDK.uuid(), {
|
||||
filepath: getPurePath(tempFilePaths[0]),
|
||||
name: fileName,
|
||||
contentType: fileType,
|
||||
uuid: IMSDK.uuid(),
|
||||
});
|
||||
console.log(url);
|
||||
this.updateSelfInfo({
|
||||
faceURL: url,
|
||||
},
|
||||
"faceURL",
|
||||
);
|
||||
this.loadingState.faceURL = false;
|
||||
},
|
||||
});
|
||||
},
|
||||
toQrCode() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/userOrGroupQrCode`,
|
||||
});
|
||||
},
|
||||
copyID() {
|
||||
uni.setClipboardData({
|
||||
data: this.selfInfo.userID,
|
||||
success: () => {
|
||||
uni.hideToast();
|
||||
this.$nextTick(() => {
|
||||
uni.$u.toast("复制成功");
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
async updateSelfInfo(data, key) {
|
||||
try {
|
||||
console.log(data);
|
||||
await businessInfoUpdate({
|
||||
userID: this.selfInfo.userID,
|
||||
...data,
|
||||
});
|
||||
await this.$store.dispatch("user/updateBusinessInfo");
|
||||
uni.$u.toast("修改成功");
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
uni.$u.toast("修改失败");
|
||||
}
|
||||
this.loadingState[key] = false;
|
||||
},
|
||||
confirmDate({value}) {
|
||||
this.loadingState.birth = true;
|
||||
this.updateSelfInfo({birth: value,},"birth",);
|
||||
this.showDatePicker = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page_container {
|
||||
background-color: #f8f8f8;
|
||||
|
||||
.info_wrap {
|
||||
margin: 24rpx 24rpx 0 24rpx;
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
|
||||
.qr_icon {
|
||||
width: 22px;
|
||||
height: 23px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user