From 29f3a095dc58860849cdaa0b057b9fab495e5f6d Mon Sep 17 00:00:00 2001
From: admin <344137771@qq.com>
Date: Wed, 07 Jan 2026 14:04:07 +0800
Subject: [PATCH] 1
---
src/page/newUser/setup.vue | 144 +++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 136 insertions(+), 8 deletions(-)
diff --git a/src/page/newUser/setup.vue b/src/page/newUser/setup.vue
index e433da5..7c010ad 100644
--- a/src/page/newUser/setup.vue
+++ b/src/page/newUser/setup.vue
@@ -6,24 +6,44 @@
</div>
</div>
<ul class="ulk">
- <li><span style="line-height: 1.1748rem;"> {{ $t('jy354') }}</span><img src="~@/assets/imgRed/touxiang.png"
- class="heasd" /></li>
+ <li>
+ <span style="line-height: 1.1748rem;"> {{ $t('jy354') }}</span>
+ <div style="position: relative; margin-right: 0.3204rem;" v-if="userInfo.id">
+ <el-upload :with-credentials="true" class="avatar-uploader" :action="admin + '/user/upload.do'"
+ list-type="picture-card" name="upload_file" :show-file-list="false"
+ :on-success="handleAvatarSuccess" :on-error="handleError" :before-upload="beforeAvatarUpload"
+ :headers="headers">
+ <img v-if="avatarUrl" :src="avatarUrl" class="heasd" />
+ <i v-else class="iconfont icon-zhaopian"></i>
+ <span v-if="!avatarUrl && !imgStatus" class="btn-title">{{ $t('hj197') }}</span>
+ <span v-if="imgStatus" class="btn-title">{{ $t('hj198') }}</span>
+ </el-upload>
+ </div>
+ </li>
<li><span> {{ $t('jy523') }}</span><a>{{ userInfo.phone ? userInfo.phone : userInfo.phone }}</a></li>
- <li @click="handleOutLoginClick()"><span> {{ $t('hj148') }}</span><img
+ <!-- <li @click="handleOutLoginClick()"><span> {{ $t('hj148') }}</span><img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjVJREFUWEfll7+LE1EQx7+zEcMhBOFKRXG1sLFIZjcaRcxp652lP2oLz0JEsRFBOBubKxS8K87CRhBSKAfiIXKVJshm9j/wam0EiyhZyI5MSCCGCDHydgW32OLt2zefN+8782YIAMIwPJmm6QMANQBzNubg+a6qTSK6JyIfh+tTpVI5TUTvAOx2YHTSkonneQtRFDXtIwVB0FRV23lCRGuq+tkFiKruJ6JlAAUA2yJyrg/AzF3bvaq+iOP4sgvjwzWDINhU1UUAX0VkfgiggwnrInLdJQAzPwdwBcA3Edn7XwKsArgF4JOIHMncA7Vaba7b7S4VCoUoiqKdzAEm6cuiwJkImfkRgEVVvR3H8cs8AMzNhwD0ANwQkbVxCNceOAbgDYB9A8MrInJ/FMIpgBkql8sHPc/bAnB0YHjD9/3lRqNhXulnQmcaGO60Wq3O93q91wCO25iqbhaLxUutVuvHzAD1en1Xp9M5MG3mTNN0D4BnACqDf94nSbI0MwAzbwNYmBbgN/MkVwAi2poZ4G+PwHRQKpUuzgzwJ64fF6Fpwff9qxYJzgEmhOGqiNyxYHAehsw8mojM4F0ReZhZImLm0VR8TUSeZp2KHwO4oKo3c7mMphGqcxGOQlhBkiTJec/zJJeChJmHJdmOiBx2HgXjR/DPVsWZNSbM/MqiYrwxaQE4Ya2Zqj4hoi/TqHeGOVYVWePza2sWhuGZNE3fZtmcEtHZdrv9oS9CewVBcEpVV/Joz38CIWVsSJNAjP0AAAAASUVORK5CYII="
- class="tui"></li>
+ class="tui">
+ </li> -->
</ul>
</div>
</template>
<script>
import * as api from "@/axios/api";
+import { MessageBox, Toast } from 'mint-ui';
+import APIUrl from "@/axios/api.url";
-import { MessageBox } from 'mint-ui'
export default {
name: 'setup',
data() {
return {
- userInfo: []
+ userInfo: {},
+ avatarUrl: require('@/assets/imgRed/touxiang.png'),
+ imgStatus: false,
+ admin: APIUrl.baseURL,
+ headers: {
+ USERTOKEN: localStorage.getItem("USERTOKEN")
+ }
}
},
mounted() {
@@ -38,9 +58,78 @@
this.$store.commit('dialogVisible', false);
this.$store.state.userInfo = data.data;
this.userInfo = data.data;
+ // 设置头像URL
+ if (data.data.photoUrl) {
+ this.avatarUrl = data.data.photoUrl;
+ }
} else {
this.$store.commit('dialogVisible', true);
}
+ },
+ // 上传前验证
+ beforeAvatarUpload(file) {
+ this.imgStatus = true;
+ const isLt10M = file.size / 1024 / 1024 < 10;
+ if (!isLt10M) {
+ Toast(this.$t('hj205'));
+ this.imgStatus = false;
+ return false;
+ }
+ return true;
+ },
+ // 上传成功
+ async handleAvatarSuccess(res, file) {
+ this.imgStatus = false;
+ if (res.status === 0 && res.data && res.data.url) {
+ // 上传成功，更新头像URL
+ const photoUrl = res.data.url;
+ this.avatarUrl = photoUrl;
+
+ // 调用头像设置接口
+ if (this.userInfo && this.userInfo.id) {
+ try {
+ const updateRes = await api.updatePhoto({
+ photoUrl: photoUrl,
+ userId: this.userInfo.id
+ });
+
+ if (updateRes.status === 0) {
+ // 更新用户信息中的头像
+ this.userInfo.avatar = photoUrl;
+ this.userInfo.headImg = photoUrl;
+ Toast(this.$t('hj220'));
+ } else {
+ Toast(updateRes.msg || this.$t('hj200'));
+ // 恢复默认头像
+ this.avatarUrl = require('@/assets/imgRed/touxiang.png');
+ }
+ } catch (updateError) {
+ console.error('设置头像失败:', updateError);
+ Toast(this.$t('hj200'));
+ // 恢复默认头像
+ this.avatarUrl = require('@/assets/imgRed/touxiang.png');
+ }
+ }
+ // else {
+ // // 如果没有 userId，仍然更新本地显示
+ // if (this.userInfo) {
+ // this.userInfo.avatar = photoUrl;
+ // this.userInfo.headImg = photoUrl;
+ // }
+ // Toast(this.$t('hj220'));
+ // }
+ } else {
+ Toast(res.msg || this.$t('hj200'));
+ // 恢复默认头像
+ this.avatarUrl = require('@/assets/imgRed/touxiang.png');
+ }
+ },
+ // 上传失败
+ handleError() {
+ this.imgStatus = false;
+ Toast(this.$t('hj200'));
+ // 恢复默认头像
+ this.avatarUrl = require('@/assets/imgRed/touxiang.png');
},
handleOutLoginClick() {
// 退出登录
@@ -71,7 +160,7 @@
}
</script>
-<style scoped>
+<style lang="less" scoped>
.bijnm {
background: #fff;
min-height: 100vh;
@@ -137,10 +226,49 @@
}
.ulk li .heasd {
- margin-right: 0.3204rem;
+ // margin-right: 0.3204rem;
width: 1.1748rem;
height: 1.1748rem;
border-radius: 50%;
+ object-fit: cover;
+}
+
+.avatar-uploader {
+ overflow: hidden;
+}
+
+.avatar-uploader ::v-deep .el-upload {
+ width: 1.1748rem;
+ height: 1.1748rem;
+}
+
+.avatar-uploader ::v-deep .el-upload__input {
+ opacity: 0 !important;
+}
+
+.avatar-uploader ::v-deep .el-upload--picture-card {
+ width: 1.1748rem;
+ height: 1.1748rem;
+ border-radius: 50%;
+ border: none;
+ background: transparent;
+}
+
+.avatar-uploader ::v-deep .el-upload--picture-card .el-upload__input {
+ opacity: 0;
+}
+
+.btn-title {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-align: center;
+ color: #fff;
+ font-size: 0.24rem;
+ background: rgba(0, 0, 0, 0.5);
+ border-radius: 0 0 50% 50%;
+ padding: 0.1rem 0;
}
.ulk li a {
--
Gitblit v1.9.3