demingshangjia/pages/user/index.vue

<template>
    <view class="user">
        <view class="head" @click="toOthersPage('info')">
            <view class="info" :key="num">
                <image :src="info.member_avatar+'?'+new Date().getTime()"></image>
                <view class="name">
                    <text>{{info.member_nickname==null?"新用户":info.member_nickname}}</text>
                    <text>账号：{{info.member_name}}</text>
                    <text class="u-line-2">个性签名：{{info.signature==""?"该用户很懒没有签名！":info.signature}}</text>
                </view>
            </view>
            <image src="/static/image/user/1.png"></image>
        </view>
        <view class="nav" @click="toOthersPage('fans')">
			<text>我的粉丝</text>
			<image src="/static/image/user/1.png"></image> 
		</view>
		<view class="nav" @click="toOthersPage('content')"> 
			<text>内容管理</text>
			<image src="/static/image/user/1.png"></image>
		</view>
		<view class="nav" @click="toOthersPage('complaint')">
			<text>骑手投诉</text>
			<image src="/static/image/user/1.png"></image>
		</view>
        <view class="nav" @click="toOthersPage('feedback')">
			<text>用户反馈</text>
			<image src="/static/image/user/1.png"></image>
		</view>
        <view class="nav" @click="viewAgreement(0)">
			<text>用户协议</text>
			<image src="/static/image/user/1.png"></image>
		</view>
		<view class="nav" @click="viewAgreement(1)">
			<text>隐私政策</text>
			<image src="/static/image/user/1.png"></image>
		</view>
		<view class="nav" @click="clearCache">
			<text>清除缓存</text>
            <text>{{ fileSizeString }}</text>
		</view>
		<view class="nav" @click="isLoginOut = true">
			<text>退出登录</text>
			<image src="/static/image/user/1.png"></image>
		</view>
        <u-modal v-model="isLoginOut" show-confirm-button show-cancel-button :content="content" @confirm="loginOut"></u-modal>
		<u-toast ref="uToast" />
    </view>
</template>
<script>
export default {
	name:"user",
	data() {
		return {
			info:{},
            isLoginOut: false,
            content: "是否退出登录？",
			num:0,
            fileSizeString: "", // 缓存大小
		}
	},
    watch: {
        isLoginOut() {
            // console.log(this.isLoginOut);
            // if (this.isLoginOut) {
            //     uni.hideTabBar();
            // } else {
            //     setTimeout(function() {
            //         uni.showTabBar();
            //     },200)
            // }
        }
    },
	onLoad() {
        this.getCache();
	},
	onShow() {
		this.getmyinfo()
	},
	methods: {
        // 获取缓存
        getCache() {
            let _this = this;
            // #ifdef APP-PLUS
            plus.cache.calculate(function(size) {
                console.log(size);
                let sizeCache = size;
                if (sizeCache == 0) {
                    _this.fileSizeString = "0B";
                } else if (sizeCache < 1024) {
                    _this.fileSizeString = sizeCache + "B";
                } else if (sizeCache < 1048576) {
                    _this.fileSizeString = (sizeCache / 1024).toFixed(2) + "KB";
                } else if (sizeCache < 1073741824) {
                    _this.fileSizeString = (sizeCache / 1048576).toFixed(2) + "MB";
                } else {
                    _this.fileSizeString = (sizeCache / 1073741824).toFixed(2) + "GB";
                }
            });
            // #endif
        },
        // 清除缓存
        clearCache() {
            // #ifdef APP-PLUS
            uni.showModal({
                title: "确定要清理缓存吗？",
                cancelColor: "#999",
                confirmColor: "#f00",
                success: (res) => {
                    // console.log(res);
                    if (res.confirm) {
                        plus.cache.clear(function(e) {
                            console.log(e);
                        })
                        this.getCache();
                    }
                }
            })
            // #endif
        },
		// 退出登陆
		loginOut(){
			uni.clearStorage();
			this.imService.disconnect();
			this.$refs.uToast.show({
				title: "退出登陆成功！",
				type: 'success'
			});
			uni.reLaunch({
				url:"../login/login"
			})
		},
		// 获取个人信息
		getmyinfo(){
			let that = this;
			this.$u.api.getshopinfo({}).then(res => {
				console.log(res);
				if (res.errCode != 0) {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				} else {
					this.info = res.data.memberInfo
					this.num++
				}
			});
		},
		toOthersPage(url) {
			uni.navigateTo({
				url: '/pages/user/' + url
			});
        },
        viewAgreement(index) {
			if (index == 0) {
				
			
            this.$u.route({
                url: '/pages/login/agreements',
                params: {
                    title: "用户协议"
                }
            });
			}
			if (index == 1) {
				

			this.$u.route({
			    url: '/pages/login/privacy_policy',
			    params: {
			        title: "隐私政策"
			    }
			});
			}
        }
	},
}
</script>
<style lang="scss" scoped>
.user{
    min-height: calc(100vh - var(--window-top));
    background: #ececec;
    .head{
        width: 100%;
        height: 220rpx;
        background-color: #FF780F;
        padding: 0 30rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .info{
            display: flex;
            align-items: center;
            
            >image{
                flex-shrink: 0;
                width: 110rpx;
                height: 110rpx;
                border-radius: 50%;
            }
            .name{
                font-size: 24rpx;
                color: #fff;
                display: flex;
                flex-direction: column;
                margin-left: 26rpx;
                >text{
                    margin-top: 14rpx;
                }
                >text:first-child{
                    font-size: 28rpx;
                    margin-top: 0;
                }
            }

        }
        >image{
            width: 12rpx;
            height: 20rpx;
        }
    }
	.nav{
		width: 100%;
		height: 100rpx;
		display: flex;
		padding: 30rpx;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
		margin-bottom: 2rpx;
		color:#333;
		background-color: #fff;
		>image{
			width: 13rpx;
			height: 25rpx;
		}
	}
}
</style>