Initial commit
This commit is contained in:
74
pages/profile/selfInfo/InfoItem.vue
Normal file
74
pages/profile/selfInfo/InfoItem.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<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>
|
||||
216
pages/profile/selfInfo/index.vue
Normal file
216
pages/profile/selfInfo/index.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<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.phoneNumber || '-'"
|
||||
/>
|
||||
<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 { 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.gender === 0) {
|
||||
return "保密";
|
||||
}
|
||||
if (this.selfInfo.gender === 1) {
|
||||
return "男";
|
||||
}
|
||||
return "女";
|
||||
},
|
||||
getBirth() {
|
||||
const birth = this.selfInfo.birth ?? 0;
|
||||
return dayjs(birth).format("YYYY-MM-DD");
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
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 + 1,
|
||||
},
|
||||
"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/index`,
|
||||
});
|
||||
},
|
||||
copyID() {
|
||||
uni.setClipboardData({
|
||||
data: this.selfInfo.userID,
|
||||
success: () => {
|
||||
uni.hideToast();
|
||||
this.$nextTick(() => {
|
||||
uni.$u.toast("复制成功");
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
async updateSelfInfo(data, key) {
|
||||
try {
|
||||
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