dreamland/pages/index/index.vue

<template>
	<gui-page :customFooter="true" iphoneXButtomStyle="background:#F8F8F8" 
	:footerSets="{height:150, zIndex:100, bg:'none'}" :isLoading="pageLoading">
		<!-- 页面主体 -->
		<view slot="gBody" class="gui-margin">
			<gui-demo-banner :title="fetch.config.name"
			:img="fetch.config.home_top" 
			:desc="fetch.config.info"></gui-demo-banner>
			<block v-for="(v, k) in fetch.cate" :key="k">
				<view class="gui-margin-top">
					<text class="gui-h5 gui-color-gray gui-bold">{{v.name}}</text>
				</view>
				<view style="margin-top:15rpx" class="gui-flex gui-rows gui-wrap gui-space-between">
					<view class="demo" v-for="(v1, k1) in v.button" :key="k1" @click="location(v1)">
						<button type="default" class="gui-button gui-bg-primary" :style="{'background-color':v1.bgcolor + ' !important'}">
							<text class="gui-icons gui-button-text-mini gui-color-white" 
							style="padding-right:10rpx;">{{v1.name}}</text>
						</button>
					</view>
				</view>
			</block>
			<gui-modal ref="show" :title="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;">{{content}}</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="copy">复制</text>
					</view>
				</view>
			</gui-modal>
		</view>

		<foot ref="foot" slot="gFooter" :value="foot_value"></foot>
		<dever-share ref="share" :data="fetch.share" v-if="fetch.share"></dever-share>
		
	</gui-page>
</template>
<script>
import copyText from "@/lib/clipboard.thorui.js"; 
import deverShare from '@/lib/dever/components/share.vue';
import foot from '@/pages/index/foot.vue';
export default {
	data() {
		return {
			foot_value : 0,
			fetch : {
				user : {},
				config : {
					home_top : '',
				},
				score : {},
				xuanchuan : [],
				share : false,
			},
			title : '',
			content : '',
		}
	},
	components:{
		deverShare,foot,copyText
	},
	onLoad() {
		this.Dever.location('index/list', 'go');
		this.getInfo();
	},
	onShow() {
		this.$nextTick(function() {
			this.$refs.foot.cur = this.foot_value;
		});
	},
	// 重新加载
	onPullDownRefresh: function() {
		this.getInfo();
	},
	methods: {
		getInfo : function() {
			this.Dever.get(this, 'app/collection/?l=api.home', {id:-1});
		},
		location : function(v) {
			if (v.link) {
				this.Dever.location(v.link, 'webview', v.name);
			} else if (v.desc) {
				this.title = v.name;
				this.content = v.desc;
				this.$refs.show.open();
			} else {
				this.Dever.alert('敬请期待');
			}
		},
		close : function() {
			this.$refs.show.close();
		},
		copy : function() {
			var self = this;
			copyText.getClipboardData(this.content, function(res) {
				if (res) {
					self.close();
					self.Dever.alert('复制成功');
				} else {
					self.Dever.alert('复制失败');
				}
			});
		}
	}
}
</script>
<style>
.demo{width:210rpx; margin:10rpx;}
.button{width:90rpx; height:90rpx; line-height:90rpx; border-radius:8rpx; margin:10rpx;}
.button-text{font-size:38rpx; text-align:center;}
.modal-btns{line-height:88rpx; font-size:26rpx; text-align:center; width:200rpx;}
</style>