catch_fd_wxweb/src/pages/kede/more.vue

<template>
    <div class="app-container">


        <div class="card-inset">

            <van-skeleton 

                avatar 
                avatar-size="50" 
                :row="2" 
                :loading="loading" >

                <van-row>
                    <van-col span="6" style="display: flex;flex-direction: column;align-items: center;">
                        <!-- <van-image
                            width="80px"
                            height="80px"
                            fit="fill"
                            round
                            :src="userinfo.avatar || default_avatar"
                        /> -->

                    <van-uploader :after-read="afterRead" :max-size="500 * 1024" @oversize="onOversize">
                        <van-image
                            width="80px"
                            height="80px"
                            fit="fill"
                            round
                            :src="userAvatar || default_avatar"
                        />
                    </van-uploader>
                    <span style="color:#2196f3;">更换头像</span>
                    </van-col>
                    <van-col span="14">
                        <div class="user-info">
                            <p>昵称：{{userinfo.realname || '用户'+ userinfo.phone}}</p>
                            <p>手机：{{userinfo.phone}}</p>
                        </div>
                    </van-col>
                    <van-col span="4">
                        <span @click="editProfile" style="color: #2196f3;">编辑资料</span>
                    </van-col>
                </van-row>
                
                <div class="padding-top-20"></div>

                <van-cell-group >
                    <van-cell is-link icon="bell" to="devices">
                        <template #title>
                            <span class="custom-title">我的车辆</span>
                            <!-- <van-tag type="danger">标签</van-tag> -->
                        </template>
                    </van-cell>
                    <van-cell is-link icon="friends" to="insure">
                        <template #title>
                            <span class="custom-title">我的保险</span>
                            <!-- <van-tag type="danger">标签</van-tag> -->
                        </template>
                    </van-cell>
                    <!-- <van-cell is-link icon="new" to="/news">
                        <template #title>
                            <span class="custom-title">新闻动态</span>
                        </template>
                    </van-cell>
                    <van-cell is-link icon="friends" to="activities" v-if="userType != 'personal'">
                        <template #title>
                            <span class="custom-title">研学活动</span>
                        </template>
                    </van-cell> -->
                    <van-cell is-link icon="info">
                        <template #title>
                            <span class="custom-title">关于</span>
                        </template>
                    </van-cell>
                </van-cell-group>

                
                
              
                
                <div style="margin: 26px;">
                    <van-button  block round type="danger" size="small" @click="logout">退出登录</van-button>
                </div>
            </van-skeleton>
        </div>
        
    </div>
</template>

<script>
import Vue from 'vue';
import { Skeleton,Image as VanImage, Row, Col, Cell, CellGroup, Tag, Dialog, Button, Uploader } from 'vant';

Vue.use(Skeleton);
Vue.use(Button);
Vue.use(VanImage);
Vue.use(Row);
Vue.use(Col);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Tag);
Vue.use(Dialog);
Vue.use(Uploader);

export default {
    data() {
        return {
           loading: true,
           userinfo: {},
           userType: 'personal',
           default_avatar: '/static/avatar_default.png',
           userAvatar: ''
        }
    },
    created() {
        this.userType = localStorage.getItem('userType');
    },
    mounted() {
        this.loading = false;

        this.userinfo = JSON.parse(localStorage.getItem('userinfo'));
        this.getUserAvatar();
    },
    methods: {
        /**
         * 退出登录
         */
        logout() {
            Dialog.confirm({
                title: '提醒',
                message: '确定要退出登录吗？'
            })
            .then(resp => {
                if (resp === 'confirm') {
                    this.clearLocalStorage();
                    this.$router.replace({ name: 'first' });
                }
            })
            .catch((resp) => {
                console.log('logout', resp);
            });
        },
        /**
         * 清除缓存
         */
        clearLocalStorage() {
            localStorage.removeItem('userType');
            localStorage.removeItem('deviceType');
            localStorage.removeItem('userid');
            localStorage.removeItem('userinfo');
        },
        getUserAvatar(){
            let that = this;
            that.$http.get("/getUserAvatar&uid=" + localStorage.getItem("userid") )
            .then(res => {
                let resp = res.data;

                if(!resp.success){
                    return;
                }
                that.userAvatar = resp.data
            
            })
            .catch(res => {
                console.log(res);
            });
        },
        /**
         * 修改信息
         */
        editProfile() {
            this.$router.push('edit_profile');
        },
        afterRead(file){
            let that= this;
            console.log(file)
            // return;
            // var form=new FormData();
            // let blob = that.blob, imei = that.$route.params.imei;
            // let fileName = 'avatar-user-' + that.userinfo.id + '-' + new Date().getTime() + Math.floor(Math.random()*1000);
            // console.log(fileName)
            // form.append("upfile",file,fileName);
            // form.append('imei', imei);
            // form.append('userid', localStorage.getItem("userid"));
            // console.log(form);
            //         //上传
            let postData = {
                uid: localStorage.getItem("userid"),
                avatar64content: file.content
            }
            that.$http({
                method: "post",
                url: "/saveUserAvatar",
                data: JSON.stringify(postData) ,
                })
            .then(({ data }) => {
                that.getUserAvatar()
                console.log(data, 'save res');
            });
        },
        onOversize(file){
            Dialog({ message: "头像勿超过500KB"});
        }
        
    }
}
</script>

<style lang="scss" scoped>
.user-info {
    height: 2rem;
    display: flex;
    flex-flow: column;
    justify-content: center;
    font-size: 14px;
    line-height: 24px;
    color: #6f6f6f;
    padding-left: 10px;
}
.card-inset {
    padding: 10px;
    border-radius: 5px;
}
.padding-top-20 {
    padding-top: 20px;
}
</style>