SmartCulturalTourismManageUniapp/pages/mine/mine.vue

<template>
	<view class="waper">
		<view class="bgcolor"></view>
        <view class="banner">
            <view class="user">
                <view class="img">
                    <image :src="avatar" mode=""></image>
                </view>
                <view class="name">
                    <view>{{userData.nickName || '-'}}</view>
                    <view>{{userData.scenicName || '-'}}</view>
                </view>
            </view>
        </view>
        <view class="menu">
    <!--        <view class="menu_waper">
                <view class="list" @click="toList">
                    <view>
                        <image src="../../static/img/mine_menu.png" mode=""></image>
                        <text>核销记录</text>
                    </view>
                    <view>
						<u-icon name="arrow-right"></u-icon>
                    </view>
                </view>
            </view> -->
        </view>
        <view class="login_btn" @click="loginOut">
            退出登录
        </view>
        <tabbar name="mine"></tabbar>
		<uni-popup class="popupRefund" ref="popup" background-color="#fff">
			<view class="popup-content">
				<view class="con">
					<view class="title">温馨提示</view>
					<view class="text">确认退出登录吗？</view>
					<view class="btn-box">
						<view class="close" @click="close">取消</view>
						<view class="save" @click="onExit">确认</view>
					</view>
				</view>
            </view>
		</uni-popup>
    </view>
</template>

<script>
import tabbar from '@/components/tabbar.vue'
import _config from '../../common/http/config.js'
export default {
    components: { tabbar },
	data() {
		return {
			avatar: '',
			userData: {}
		}
	},
	onLoad() {
		this.getInfo()
	},
    methods: {
		async getInfo() {
            let info = await this.$http.getInfo();
			this.userData = info.data
			this.avatar = this.userData.avatar ? (_config.url + this.userData.avatar) : require('../../static/img/avatar.png')
		},
        toList () {
            uni.navigateTo({ url: '/pages/list/list' })
        },
        loginOut () {
			this.$refs.popup.open('center')
        },
		close() {
			this.$refs.popup.close()
		},
		onExit() {
			uni.removeStorageSync("tourism_token");
            uni.reLaunch({ url: '/pages/login/login' })
		}
    }
}
</script>

<style lang="scss">
page{ height: 100%; }
.waper{
    width: 100%; height: 100%;
	.bgcolor {
		width: 100%; height: 218rpx; background: linear-gradient( 180deg, #E8F8F4 0%, rgba(232,248,244,0) 100%);
	}
    .banner{
        width: 100%;
		position: relative;
		top: -17rpx;
		padding: 0 0 34rpx 34rpx; box-sizing: border-box;
        .user{
            width: 100%; height: 140rpx; box-sizing: border-box; padding-left: 194rpx; position: relative;
            .img{
                width: 148rpx; height: 148rpx; position: absolute; left: 0; top: 0;
                image{ border-radius: 50%; }
            }
            .name{
                width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
                view{
                    &:nth-child(1){ line-height: 56rpx; color: #333; font-size: 40rpx; font-weight: bold; }
                    &:nth-child(2){ line-height: 34rpx; margin-top: 10rpx; color: #666; font-size: 24rpx; }
                }
            }
        }
    }
    .menu{
        width: 100%; box-sizing: border-box; padding: 0 32rpx;
        .menu_waper{
            background: #fff; padding: 32rpx 34rpx 32rpx 22rpx; border-radius: 10rpx;
            .list{
                width: 100%; height: 44rpx; display: flex; justify-content: space-between; align-items: center;
                view{
                    &:nth-child(1){
                        height: 100%; display: flex; align-items: center;
                        image{ width: 44rpx; height: 44rpx; margin-right: 22rpx; }
                        text{ color: #333; font-size: 28rpx; font-weight: 500; }
                    }
                    &:nth-child(2){
						/deep/.uicon-arrow-right {
							font-size: 34rpx !important;
							color: #999999 !important;
						}
					}
                }
            }
        }
    }
    .login_btn{
        margin: 208rpx auto 0;
		width: 628rpx;
		height: 90rpx;
		background: #03AE80;
		border-radius: 20rpx;
		line-height: 90rpx;
		text-align: center;
		font-weight: 800;
		font-size: 32rpx;
		color: #F6F9FF;
    }
	.popupRefund {
		.popup-content {
			position: relative;
			width: 595rpx;
			height: 397rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			.con {
				position: absolute;
				width: 510rpx;
				top: 64rpx;
				left: 50%;
				transform: translateX(-50%);
				.title {
					font-weight: 800;
					font-size: 40rpx;
					color: #000000;
					text-align: center;
				}
				.text {
					margin-top: 32rpx;
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
					line-height: 44rpx;
					text-align: center;
				}
				.btn-box {
					margin-top: 90rpx;
					display: flex;
					align-items: center;
					flex-direction: row;
					justify-content: space-around;
					.close {
						width: 236rpx;
						height: 77rpx;
						border-radius: 10rpx;
						border: 1rpx solid #666666;
						line-height: 77rpx;
						text-align: center;
						font-weight: 400;
						font-size: 30rpx;
						color: #666666;
					}
					.save {
						width: 240rpx;
						height: 80rpx;
						background: #03AE80;
						border-radius: 10rpx;
						line-height: 80rpx;
						text-align: center;
						font-weight: 500;
						font-size: 30rpx;
						color: #FFFFFF;
					}
				}
			}
		}
	}
}
</style>