commie/im
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

4

Browse Source
This commit is contained in:
commie
2025-11-25 05:36:02 +08:00
parent 8e036cc171
commit b10e4b4336
65 changed files with 2672 additions and 2270 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/profile/selfInfo/InfoItem.vue
+62 -65
View File
@@ -1,74 +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>
<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");
},
},
};
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;
.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;
}
}
.right_value {
@include vCenterBox();
.loading_icon {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
</style>
.content {
font-size: 28rpx;
color: #999;
}
.u-icon {
margin-left: 12rpx;
}
}
.loading_icon {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
</style>
pages/profile/selfInfo/index.vue
+166 -202
View File
@@ -1,216 +1,180 @@
<template>
<view class="page_container">
<custom-nav-bar title="个人资料" />
<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 :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>
<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>
<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(
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.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: {
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;
},
},
};
});
},
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/index`,
});
},
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;
.page_container {
background-color: #f8f8f8;
.info_wrap {
margin: 24rpx 24rpx 0 24rpx;
background: #fff;
border-radius: 6px;
.info_wrap {
margin: 24rpx 24rpx 0 24rpx;
background: #fff;
border-radius: 6px;
.qr_icon {
width: 22px;
height: 23px;
}
}
}
</style>
.qr_icon {
width: 22px;
height: 23px;
}
}
}
</style>