1

admin

2026-01-27 c2c5b94b7a80c838009ebc914537ba3862040303

 src/page/newUser/setup.vue

@@ -1,79 +1,166 @@
<template>
    <div class="bijnm">
        <div class="headf">
            <div >
                <h2 ><span  class="hbnh"><a 
                            @click="$router.go(-1)" class="fan"></a></span>   {{ $t('jy355') }} </h2>
            <div>
                <h2><span class="hbnh"><a @click="$router.go(-1)" class="fan"></a></span> {{ $t('jy355') }} </h2>
            </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>  {{ $t('jy523') }}</span><a>{{ userInfo.phone ? userInfo.phone : userInfo.phone }}</a></li>
            <li @click="handleOutLoginClick()"><span>  {{ $t('hj148') }}</span><img
            <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
                    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() {
        this.getUserInfo();
    },
    methods: {
      async getUserInfo() {
        // 获取用户信息
        let data = await api.getUserInfo();
        if (data.status === 0) {
          // 判断是否登录
          this.$store.commit('dialogVisible', false);
          this.$store.state.userInfo = data.data;
          this.userInfo = data.data;
        } else {
          this.$store.commit('dialogVisible', true);
        }
      },
      handleOutLoginClick() {
        // 退出登录
        MessageBox.confirm(this.$t('hj149') + '?', this.$t('hj165'), {
            confirmButtonText: this.$t('hj161'),
            cancelButtonText: this.$t('hj106'),
        }).then(() => {
            this.toRegister();
        }).catch(() => {
        async getUserInfo() {
            // 获取用户信息
            let data = await api.getUserInfo();
            if (data.status === 0) {
                // 判断是否登录
                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;

        });
      },
      async toRegister() {
        // 注销登陆
        window.localStorage.removeItem("phone"); // 清空本地存储 phone字段
        window.localStorage.removeItem("USERTOKEN"); // 清空本地存储 USERTOKEN字段
        this.clearCookie();
        let data = await api.logout();
        if (data.status === 0) {
          // Toast(data.msg)
          this.$router.push("/login");
        } else {
          Toast(data.msg);
        }
        this.$router.push("/login");
      },
                // 调用头像设置接口
                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() {
            // 退出登录
            MessageBox.confirm(this.$t('hj149') + '?', this.$t('hj165'), {
                confirmButtonText: this.$t('hj161'),
                cancelButtonText: this.$t('hj106'),
            }).then(() => {
                this.toRegister();
            }).catch(() => {

            });
        },
        async toRegister() {
            // 注销登陆
            window.localStorage.removeItem("phone"); // 清空本地存储 phone字段
            window.localStorage.removeItem("USERTOKEN"); // 清空本地存储 USERTOKEN字段
            this.clearCookie();
            let data = await api.logout();
            if (data.status === 0) {
                // Toast(data.msg)
                this.$router.push("/login");
            } else {
                Toast(data.msg);
            }
            this.$router.push("/login");
        },
    },
}

</script>
<style scoped>
<style lang="less" scoped>
.bijnm {
    background: #fff;
    min-height: 100vh;
@@ -82,7 +169,7 @@
.headf {
    width: 100%;
    height: 1.1748rem;
    background: linear-gradient(-55deg,rgb(241, 22, 20),rgb(240, 40, 37));
    background: linear-gradient(-55deg, rgb(241, 22, 20), rgb(240, 40, 37));
}

h2 {
@@ -139,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 /deep/ .el-upload {
    width: 1.1748rem;
    height: 1.1748rem;
}

.avatar-uploader /deep/ .el-upload__input {
    opacity: 0 !important;
}

.avatar-uploader /deep/ .el-upload--picture-card {
    width: 1.1748rem;
    height: 1.1748rem;
    border-radius: 50%;
    border: none;
    background: transparent;
}

.avatar-uploader /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 {
@@ -157,10 +283,12 @@
    width: 0.4272rem;
    height: 0.4272rem;
}

.mint-msgbox-confirm {
    color: #5d7dfb;
}
.mint-msgbox-confirm:active{

.mint-msgbox-confirm:active {
    color: #5d7dfb;
}
</style>