dreamland/pages/index/my.vue

<template>
	<gui-page :customFooter="true" iphoneXButtomStyle="background:#F8F8F8"
	:footerSets="{height:150, zIndex:100, bg:'none'}" :isLoading="pageLoading">
		<view slot="gBody">
			<view class="gui-margin gui-margin-top">
				<text class="gui-h5 gui-color-gray gui-bold">个人中心</text>
			</view>
			<view hover-class="gui-tap" @click="login" v-if="fetch.user.id <= 0">
				<text class="gui-text-center gui-block-text gui-icons logoff gui-color-gray">&#xe629; 点此登录</text>
			</view>
			<view class="gui-list gui-margin-top gui-padding" @tap="user" v-if="fetch.user.id > 0">
				<view class="gui-list-items">
					<view class="gui-list-image ucenter-face gui-relative">
						<image class="gui-list-image ucenter-face-image" 
						:src="fetch.user.avatar" mode="widthFix"></image>
						<text class="gui-bg-blue gui-badge-gender gui-color-white gui-icons" v-if="fetch.user.sex == 1">&#xe618;</text>
						<text class="gui-bg-red gui-badge-gender gui-color-white gui-icons" v-if="fetch.user.sex == 2">&#xe619;</text>
						<text class="gui-bg-green gui-badge-gender gui-color-white gui-icons" v-if="fetch.user.sex == 3">&#xe628;</text>
					</view>
					<view class="gui-list-body">
						<view class="gui-list-title">
							<view class="gui-list-title-text gui-primary-color">{{fetch.user.username}}
							<text v-if="fetch.user.title">（{{fetch.user.title}}）</text>
							</view>
						</view>
						<view class="gui-list-body-desc gui-color-gray gui-block-text"><view v-if="fetch.user.info">{{fetch.user.info}}</view>
						<view v-if="!fetch.user.info">暂无签名</view></view>
					</view>
					<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
				</view>
			</view>
			<view class="ucenter-line"></view>
			<view>
				<gui-box-banner :items="fetch.row"></gui-box-banner>
			</view>
			<block v-if="state">
				<view class="ucenter-line"></view>
				<view class="gui-list gui-margin-top gui-padding" >
					<view class="gui-list-items">
						<text class="gui-list-icon gui-icons gui-color-blue">&#xe60d;</text>
						<view class="gui-list-body gui-border-b">
							<view class="gui-list-title">
								<text class="gui-list-title-text">好友动态</text>
								<text class="gui-badge gui-bg-red gui-color-white">12</text>
							</view>
						</view>
						<text class="gui-list-arrow-right gui-icons">&#xe601;</text>
					</view>
					<view class="gui-list-items">
						<text class="gui-list-icon gui-icons gui-color-green">&#xe612;</text>
						<view class="gui-list-body gui-border-b">
							<view class="gui-list-title">
								<text class="gui-list-title-text">我的钱包</text>
							</view>
						</view>
						<text class="gui-list-arrow-right gui-icons">&#xe601;</text>
					</view>
					<view class="gui-list-items">
						<text class="gui-list-icon gui-icons gui-color-orange">&#xe624;</text>
						<view class="gui-list-body gui-border-b">
							<view class="gui-list-title">
								<text class="gui-list-title-text">我的发现</text>
							</view>
						</view>
						<text class="gui-list-arrow-right gui-icons">&#xe601;</text>
					</view>
					<view class="gui-list-items">
						<text class="gui-list-icon gui-icons gui-color-red">&#xe687;</text>
						<view class="gui-list-body">
							<view class="gui-list-title">
								<text class="gui-list-title-text">身份认证</text>
							</view>
						</view>
						<text class="gui-list-arrow-right gui-icons">&#xe601;</text>
					</view>
				</view>
			</block>
			<view class="ucenter-line"></view>
			<view class="gui-list gui-margin-top gui-padding">
				<view class="gui-list-items" style="display: none;">
					<text class="gui-list-icon gui-icons gui-color-yellow">&#xe613;</text>
					<view class="gui-list-body gui-border-b">
						<view class="gui-list-title">
							<text class="gui-list-title-text">账户设置</text>
						</view>
					</view>
					<text class="gui-list-arrow-right gui-icons">&#xe601;</text>
				</view>
				<view class="gui-list-items" @click="check()">
					<text class="gui-list-icon gui-icons gui-color-green">&#xe61a;</text>
					<view class="gui-list-body">
						<view class="gui-list-title">
							<text class="gui-list-title-text">检查版本</text>
							<text class="gui-badge">1.0.0</text>
						</view>
					</view>
					<text class="gui-list-arrow-right gui-icons">&#xe601;</text>
				</view>
				
				<view class="gui-list-items" @click="goView('use', '使用说明')">
					<text class="gui-list-icon gui-icons gui-color-red">&#xe629;</text>
					<view class="gui-list-body">
						<view class="gui-list-title">
							<text class="gui-list-title-text">使用说明</text>
						</view>
					</view>
					<text class="gui-list-arrow-right gui-icons">&#xe601;</text>
				</view>
				
				<view class="gui-list-items" @click="goView('about', '关于合小记')">
					<text class="gui-list-icon gui-icons">&#xe60c;</text>
					<view class="gui-list-body">
						<view class="gui-list-title">
							<text class="gui-list-title-text">关于合小记</text>
						</view>
					</view>
					<text class="gui-list-arrow-right gui-icons">&#xe601;</text>
				</view>
			</view>
			<block v-if="fetch.user.id > 0">
				<view class="ucenter-line"></view>
				<view hover-class="gui-tap" @click="open">
					<text class="gui-text-center gui-block-text gui-icons logoff gui-color-gray">&#xe62e; 退出登录</text>
				</view>
			</block>
			
			<gui-modal ref="quit" 
					title="确认退出">
				<view slot="content" class="gui-padding gui-bg-gray">
					<text class="gui-block-text gui-text-center gui-text gui-color-gray" 
					style="line-height:100rpx; padding:10rpx;">您确定要这样退出吗？</text>
				</view>
				<!-- 利用 flex 布局 可以放置多个自定义按钮哦  -->
				<view slot="btns" class="gui-flex gui-rows gui-space-between">
					<view class="modal-btns gui-flex1" style="margin-right:80rpx;">
						<text class="modal-btns gui-color-gray" @tap="close">取消</text>
					</view>
					<view class="modal-btns gui-flex1" style="margin-left:80rpx;">
						<text class="modal-btns gui-color-blue" @tap="quit">确认</text>
					</view>
				</view>
			</gui-modal>
		</view>
		<foot ref="foot" slot="gFooter" :value="foot_value"></foot>
	</gui-page>
</template>
<script>
import foot from '@/pages/index/foot.vue';
export default {
	data() {
		return {
			state : false,
			foot_value : 4,
			fetch : {
				user : {},
				config : {
					home_top : '',
				},
				score : {},
				xuanchuan : [],
				share : false,
				row : [],
			},
		}
	},
	components:{
		foot
	},
	onShow() {
		this.$nextTick(function() {
			this.$refs.foot.cur = this.foot_value;
		});
		this.getData();
	},
	// 重新加载
	onPullDownRefresh: function() {
		this.getData();
	},
	methods: {
		getData : function() {
			this.Dever.get(this, 'app/collection/?l=api.my', {id:-1});
		},
		login : function() {
			this.Dever.goLogin();
		},
		
		user : function() {
			this.Dever.location('user/index');
		},
		
		quit : function() {
			this.close();
			this.Dever.setToken('');
			var self = this;
			this.Dever.alert('已退出', 'none', function() {
				self.Dever.location('index/my');
			});
		},
		open : function() {
			this.$refs.quit.open();
		},
		close : function() {
			this.$refs.quit.close();
		},
		goView : function(key, name) {
			var path = this.Dever.api_host + 'main/?l=page&key=' + key;
			this.Dever.location(path, 'webview', name);
		},
		check : function() {
			this.Dever.alert('当前已是最新版本');
		}
	}
}
</script>
<style>
.ucenter-face{width:100rpx; height:100rpx;}
.ucenter-face-image{width:100rpx; height:100rpx;}
.ucenter-line{height:20rpx; background-color:#F6F7F8; margin:16rpx 0;}
.logoff{line-height:88rpx; font-size:28rpx;}
.gui-list-title-text{line-height:60rpx;}
.modal-btns{line-height:88rpx; font-size:26rpx; text-align:center; width:200rpx;}
</style>