dreamland/pages/index/msg.vue

<template>
	<gui-page :fullPage="true" :isLoading="pageLoading" ref="guiPage" :footerSets="{height:150, zIndex:100, bg:'none'}" :customFooter="true">
		<view slot="gBody" class="gui-flex1">
			<view>
				<view class="gui-margin gui-margin-top">
					<text class="gui-h5 gui-color-gray gui-bold">消息列表</text>
				</view>
				<view class="my-list" v-if="fetch.msg.length > 0">
					<view class="gui-list-items" v-for="(v, k) in fetch.msg" :key="k" @click="view(v)">
						<block v-if="v.type == 1">
							<text class="gui-list-icon gui-icons gui-color-blue">&#xe666;</text>
							<view class="gui-list-body gui-border-b">
								<view class="gui-list-title">
									<text class="gui-list-title-text gui-primary-color gui-list-one-line gui-ellipsis" 
									style="width:320rpx; height:60rpx;">{{v.name}}</text>
								</view>
							</view>
							<text class="gui-list-arrow-right gui-icons gui-color-gray-light">&#xe601;</text>
						</block>
						<block v-if="v.type > 1">
							<view class="gui-list-image gui-relative">
								<image class="gui-list-image" 
								:src="v.avatar"></image>
								<view class="gui-badge-point" style="display: none;"></view>
							</view>
							<view class="gui-list-body gui-border-b">
								<view class="gui-list-title">
									<text class="gui-list-title-text gui-primary-color">{{v.name}}</text>
									<text class="gui-list-title-desc gui-color-gray">{{v.date}}</text>
								</view>
								<text class="gui-list-body-desc gui-color-gray">{{v.content}}</text>
							</view>
							<text class="gui-list-arrow-right gui-icons gui-color-gray-light">&#xe601;</text>
						</block>
					</view>
				</view>
				<gui-empty v-if="fetch.msg.length <= 0">
					<view slot="img" class="gui-flex gui-rows gui-justify-content-center">
						<image class="gui-empty-img" src="@/static/dreamland/img/kong.png"></image>
					</view>
					<text slot="text" 
					class="gui-text-small gui-block-text gui-text-center gui-margin-top" style="color:#9DABFF;">您还没有消息</text>
				</gui-empty>
				
				<gui-modal ref="alert" 
						:title="title" :isTitle="true">
					<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;">{{content}}</text>
					</view>
					<!-- 利用 flex 布局 可以放置多个自定义按钮哦  -->
					<view slot="btns" class="gui-flex gui-rows gui-space-between">
						<view class="modal-btns gui-flex1">
							<text class="modal-btns gui-color-blue" @tap="close">确认</text>
						</view>
					</view>
				</gui-modal>
			</view>
		</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 {
			foot_value : 3,
			fetch : {
				msg : [],
			},
			title : '',
			content : '',
		}
	},
	components:{
		foot
	},
	onLoad() {
		this.getData(1);
	},
	onShow() {
		this.$nextTick(function() {
			this.$refs.foot.cur = this.foot_value;
		});
	},
	// 重新加载
	onPullDownRefresh: function() {
		this.getData(1);
	},
	//下拉加载
	onReachBottom() {
		this.getData(2);
	},
	methods:{
		getData : function(page) {
			var self = this;
			var data = {};
			data.id = -1;
			this.Dever.page([page, 'msg'], this, 'app/collection/?l=api.msg', data);
		},
		view : function(v) {
			this.title = v.name;
			this.content = v.content;
			this.$refs.alert.open();
		},
		close : function () {
			this.$refs.alert.close();
		},
	}
}
</script>
<style>
.my-list{margin:30rpx 0; padding:0 30rpx;}
.modal-btns{line-height:88rpx; font-size:26rpx; text-align:center; width:200rpx;}
</style>