1

admin

2026-01-07 29f3a095dc58860849cdaa0b057b9fab495e5f6d

 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 {