edit

lib/dever/index.js

@@ -1193,11 +1193,14 @@ var dever = {
 		}
 	},
 	//页面跳转
-	location : function(path, go) {
+	location : function(path, go, title) {
 		var self = this;
 		if (path.indexOf('http') > -1) {
 			this.debug('http:' + path);
-			this.data('web_view', path);
+			this.data('web_view', path);
+			if (title) {
+				this.data('web_view_title', title);
+			}
 			if (this.source == 'app' || this.source == 'applet' || go == 'webview') {
 				uni.navigateTo({
 					url: this.web_view
@@ -1239,7 +1242,7 @@ var dever = {
 						}
 					}
 				})
-			} else if (go) {
+			} else if (go && go != 'webview') {
 				uni.redirectTo({
 					url: path
 				})

main.js

@@ -60,7 +60,9 @@ Vue.prototype.Dever.setPostLoading(function(self) {
 });
 
 //设置switchTab
-Vue.prototype.Dever.switchTab = [];
+Vue.prototype.Dever.switchTab = [];
+
+Vue.prototype.Dever.web_view = '/pages/tool/web_view';
 
 //自定义switchTab页面回调，因为switchTab执行后不会自动刷新页面，这里需要做个回调
 Vue.prototype.Dever.switchTabCall = {

pages.json

@@ -20,6 +20,50 @@
 					"scrollIndicator":"none"
 				}
 			}
+		},
+		{
+			"path": "pages/index/news",
+			"style": {
+				"app-plus": {
+					"titleNView": false,
+					"bounce": "none",
+					"navigationStyle": "custom",
+					"scrollIndicator":"none"
+				}
+			}
+		},
+		{
+			"path": "pages/index/my",
+			"style": {
+				"app-plus": {
+					"titleNView": false,
+					"bounce": "none",
+					"navigationStyle": "custom",
+					"scrollIndicator":"none"
+				}
+			}
+		},
+		{
+			"path": "pages/index/msg",
+			"style": {
+				"app-plus": {
+					"titleNView": false,
+					"bounce": "none",
+					"navigationStyle": "custom",
+					"scrollIndicator":"none"
+				}
+			}
+		},
+		{
+			"path": "pages/tool/web_view",
+			"style": {
+				"app-plus": {
+					"titleNView": false,
+					"bounce": "none",
+					"navigationStyle": "custom",
+					"scrollIndicator":"none"
+				}
+			}
 		},
 		{
 			"path": "pages/user/index",

pages/index/foot.vue

@@ -0,0 +1,77 @@
+<template>
+	<view class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-end" style="height:150rpx;">
+		<view class="gui-footer-icon-buttons" @tap="menu(0)">
+			<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
+			:class="[cur == 0 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe608;</text>
+			<text class="gui-footer-icon-buttons-text gui-block-text gui-nav-bottom-color" 
+			:class="[cur == 0 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">首页</text>
+		</view>
+		<view class="gui-footer-icon-buttons" @tap="menu(1)">
+			<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
+			:class="[cur == 1 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe624;</text>
+			<text class="gui-footer-icon-buttons-text gui-block-text gui-nav-bottom-color" 
+			:class="[cur == 1 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">发现</text>
+		</view>
+		<!-- 凸出按钮占位  普通按钮 实现下面的 gui-footer-icon-buttons 即可 -->
+		<view class="gui-footer-icon-buttons"></view>
+		<view class="gui-footer-icon-buttons" @tap="menu(3)">
+			<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
+			:class="[cur == 3 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe6b8;</text>
+			<text class="gui-footer-icon-buttons-text gui-block-text" 
+			:class="[cur == 3 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">消息</text>
+		</view>
+		<view class="gui-footer-icon-buttons" @tap="menu(4)">
+			<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
+			:class="[cur == 4 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe6fe;</text>
+			<text class="gui-footer-icon-buttons-text gui-block-text" 
+			:class="[cur == 4 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">我的</text>
+		</view>
+		<!-- 使用定位方式实现凸出按钮 -->
+		<view class="gui-footer-buttons-ab" @tap="menu(2)">
+			<text class="gui-footer-buttons-ab-icon gui-block-text gui-icons" 
+			:class="[cur == 2 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe612;</text>
+			<text class="gui-footer-icon-buttons-text gui-block-text" 
+			:class="[cur == 2 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">合小记</text>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	props: {
+		value : {
+			type : Number,
+			value : 0
+		},
+	},
+	data() {
+		return {
+			cur : 0,
+		}
+	},
+	mounted() {
+		this.cur = this.value;
+	},
+	methods: {
+		menu : function (index) {
+			this.cur = index;
+			if (index == 0) {
+				this.Dever.location('index/index');
+			} else if (index == 1) {
+				this.Dever.location('index/news');
+			} else if (index == 2) {
+				this.Dever.location('index/list');
+			} else if (index == 3) {
+				this.Dever.location('index/msg');
+			} else if (index == 4) {
+				this.Dever.location('index/my');
+			}
+		}
+	}
+}
+</script>
+<style>
+.gui-footer-icon-buttons{width:130rpx; height:80rpx; padding:10rpx; flex:1; position:relative; margin:0; background-color:#F8F8F8;}
+.gui-footer-buttons-ab{position:absolute; z-index:101; left:325rpx; top:0rpx; width:110rpx; height:150rpx;}
+.gui-footer-buttons-ab-icon{width:110rpx; height:110rpx; line-height:120rpx; text-align:center; font-size:68rpx; background-color:#F7F8FA; border-radius:100rpx;}
+</style>

pages/index/index.vue

@@ -1,125 +1,74 @@
 <template>
 	<gui-page :customFooter="true" iphoneXButtomStyle="background:#F8F8F8" 
-	:footerSets="{height:150, zIndex:100, bg:'none'}">
+	:footerSets="{height:150, zIndex:100, bg:'none'}" :isLoading="pageLoading">
 		<!-- 页面主体 -->
 		<view slot="gBody" class="gui-margin">
-			<gui-demo-banner title="GraceUI · FLEX 布局"
-			img="https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/8.png" 
-			desc="利用内置 Flex 样式灵活组合, 快速实现"></gui-demo-banner>
-			<view class="gui-margin-top">
-				<text class="gui-h5 gui-color-gray gui-bold">横向缩放</text>
-			</view>
-			<view style="margin-top:15rpx" class="gui-flex gui-rows gui-nowrap">
-				<view class="gui-text-small demo gui-bg-gray gui-color-gray">GraceUI</view>
-				<view class="gui-text-small demo gui-bg-gray gui-color-gray">GraceUI</view>
-				<view class="gui-text-small demo gui-bg-gray gui-color-gray">GraceUI</view>
-				<view class="gui-text-small demo gui-bg-gray gui-color-gray">GraceUI</view>
-			</view>
-			<view class="gui-margin-top">
-				<text class="gui-h5 gui-color-gray gui-bold">横向换行</text>
-			</view>
-			<view style="margin-top:15rpx" class="gui-flex gui-rows gui-wrap">
-				<view class="gui-text-small demo gui-bg-gray gui-color-gray">GraceUI</view>
-				<view class="gui-text-small demo gui-bg-gray gui-color-gray">GraceUI</view>
-				<view class="gui-text-small demo gui-bg-gray gui-color-gray">GraceUI</view>
-				<view class="gui-text-small demo gui-bg-gray gui-color-gray">GraceUI</view>
-				<view class="gui-text-small demo gui-bg-gray gui-color-gray">GraceUI</view>
-				<view class="gui-text-small demo gui-bg-gray gui-color-gray">GraceUI</view>
-			</view>
-			<view class="gui-margin-top">
-				<text class="gui-h5 gui-color-gray gui-bold">横向两端</text>
-			</view>
-			<view style="margin-top:15rpx" class="gui-flex gui-rows gui-space-between">
-				<view class="gui-text-small demo gui-bg-gray gui-color-gray">GraceUI</view>
-				<view class="gui-text-small demo gui-bg-gray gui-color-gray">GraceUI</view>
-			</view>
-			<view class="gui-margin-top">
-				<text class="gui-h5 gui-color-gray gui-bold">自动宽度</text>
-			</view>
-			<view style="margin-top:15rpx" class="gui-flex gui-rows gui-nowrap">
-				<view class="gui-text-small demo gui-bg-gray gui-color-gray">GraceUI</view>
-				<view class="gui-text-small demo gui-bg-gray gui-color-gray gui-flex1">自动宽度元素</view>
-			</view>
-			<view class="gui-margin-top">
-				<text class="gui-h5 gui-color-gray gui-bold">嵌套布局</text>
-			</view>
-			<view style="margin-top:15rpx" class="gui-flex gui-rows gui-nowrap">
-				<view class="gui-text-small demo gui-bg-gray gui-color-gray" 
-				style="height:196rpx; line-height:196rpx;">GraceUI</view>
-				<view style="flex:1;">
-					<view class="gui-flex gui-columns">
-						<view class="demo-auto-width gui-bg-gray gui-color-gray gui-text-small">自动宽度元素</view>
-						<view class="demo-auto-width gui-bg-gray gui-color-gray gui-text-small">自动宽度元素</view>
+			<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>
-			</view>
-		</view>
-		<!-- 底部插槽实现 -->
-		<!-- 边框使用 style 实现，可以根据自己项目实际情况修改 -->
-		<view slot="gFooter" class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-end" 
-		style="height:150rpx;">
-			<view class="gui-footer-icon-buttons" @tap="navChang(0)">
-				<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
-				:class="[navCurrent == 0 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe63b;</text>
-				<text class="gui-footer-icon-buttons-text gui-block-text gui-nav-bottom-color" 
-				:class="[navCurrent == 0 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">首页</text>
-			</view>
-			<view class="gui-footer-icon-buttons" @tap="navChang(3)">
-				<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
-				:class="[navCurrent == 3 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe626;</text>
-				<text class="gui-footer-icon-buttons-text gui-block-text" 
-				:class="[navCurrent == 3 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">客服</text>
-			</view>
-			<!-- 凸出按钮占位  普通按钮 实现下面的 gui-footer-icon-buttons 即可 -->
-			<view class="gui-footer-icon-buttons"></view>
-			<view class="gui-footer-icon-buttons" @tap="navChang(1)">
-				<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
-				:class="[navCurrent == 1 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe6b8;</text>
-				<text class="gui-footer-icon-buttons-text gui-block-text gui-nav-bottom-color" 
-				:class="[navCurrent == 1 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">消息</text>
-			</view>
-			<view class="gui-footer-icon-buttons" @tap="navChang(4)">
-				<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
-				:class="[navCurrent == 4 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe6fe;</text>
-				<text class="gui-footer-icon-buttons-text gui-block-text" 
-				:class="[navCurrent == 4 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">我的</text>
-			</view>
-			<!-- 使用定位方式实现凸出按钮 -->
-			<view class="gui-footer-buttons-ab" @tap="navChang(2)">
-				<text class="gui-footer-buttons-ab-icon gui-block-text gui-icons gui-bold" 
-				:class="[navCurrent == 2 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe60b;</text>
-				<text class="gui-footer-icon-buttons-text gui-block-text" 
-				:class="[navCurrent == 2 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">合小记</text>
-			</view>
+			</block>
 		</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>
+<script>
+import deverShare from '@/lib/dever/components/share.vue';
+import foot from '@/pages/index/foot.vue';
 export default {
 	data() {
-		return {
-			navCurrent: 0
+		return {
+			foot_value : 0,
+			fetch : {
+				user : {},
+				config : {
+					home_top : '',
+				},
+				score : {},
+				xuanchuan : [],
+				share : false,
+			},
 		}
 	},
+	components:{
+		deverShare,foot
+	},
+	onLoad() {
+		this.getInfo();
+	},
 	onShow() {
-		this.navCurrent = 0;
+		this.$nextTick(function() {
+			this.$refs.foot.cur = this.foot_value;
+		});
+	},
+	// 重新加载
+	onPullDownRefresh: function() {
+		this.getInfo();
 	},
 	methods: {
-		navChang : function (index) {
-			this.navCurrent = index;
-			
-			if (index == 2) {
-				this.Dever.location('index/list');
-			}
+		getInfo : function() {
+			this.Dever.get(this, 'app/collection/?l=api.home', {id:-1});
+		},
+		location : function(v) {
+			this.Dever.location(v.link, 'webview', v.name);
 		}
 	}
 }
 </script>
 <style>
-.demo{width:210rpx; height:88rpx; line-height:88rpx; text-align:center; margin:10rpx;}
-.demo-auto-width{height:88rpx; line-height:88rpx; text-align:center; margin:10rpx;}
-.gui-text-small{font-size:20rpx;}
-.gui-footer-icon-buttons{width:130rpx; height:80rpx; padding:10rpx; flex:1; position:relative; margin:0; background-color:#F8F8F8;}
-.gui-footer-buttons-ab{position:absolute; z-index:101; left:325rpx; top:0rpx; width:110rpx; height:150rpx;}
-.gui-footer-buttons-ab-icon{width:110rpx; height:110rpx; line-height:120rpx; text-align:center; font-size:68rpx; background-color:#F7F8FA; border-radius:100rpx;}
+.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;}
 </style>

pages/index/list.vue

@@ -1,196 +1,129 @@
 <template>
 	<gui-page :customFooter="true" iphoneXButtomStyle="background:#F8F8F8"
-	:footerSets="{height:150, zIndex:100, bg:'none'}">
+	:footerSets="{height:150, zIndex:100, bg:'none'}" :isLoading="pageLoading">
 		<!-- 页面主体 -->
-		<view slot="gBody">
-			<ourLoading isFullScreen :active="pageLoading" :text="pageLoadingText" />
+		<view slot="gBody">
 			<view class="gui-flex gui-rows gui-justify-content-center gui-margin-top">
 				<view style="width:500rpx;">
-					<gui-segmented-control :items="cates" :current="0" borderRadius="50rpx" @change="change"></gui-segmented-control>
+					<gui-segmented-control :items="cate" :current="0" borderRadius="50rpx" @change="menu"></gui-segmented-control>
 				</view>
 			</view>
 			
 			<block v-if="state == 1">
-				<view class="gui-grids gui-flex gui-rows gui-wrap gui-margin-top gui-bg-gray demo-nav2">
-					<gui-switch-navigation :items="fetch.cate" @change="navchange"  activeDirection="center" textAlign="center" :margins="20" paddings="30rpx" activeLineHeight="4rpx" lineHeights="72rpx" activeLineWidth="100rpx" ></gui-switch-navigation>
+				<view class="gui-grids gui-flex gui-rows gui-wrap gui-margin-top gui-bg-gray menu">
+					<gui-switch-navigation :items="fetch.cate" :currentIndex="nav_index" @change="nav"  activeDirection="center" textAlign="center" :margins="20" paddings="30rpx" activeLineHeight="4rpx" lineHeights="72rpx" activeLineWidth="100rpx" activeLineBg="linear-gradient(to right, #008AFF,#008AFF)" ></gui-switch-navigation>
 				</view>
 				<view class="gui-margin gui-card-list gui-flex gui-rows gui-wrap gui-space-between gui-margin-top">
-					<view class="gui-card-item" hover-class="gui-tap">
-						<view class="gui-card-img">
+					<view class="gui-card-item" hover-class="gui-tap" v-for="(v, k) in fetch.info" :key="k" @click="view(v.id_code)">
+						<view class="gui-card-img" style="height:100%">
 							<gui-image :width="330" :height="191"
-							src="https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/21.png"></gui-image>
-							<text class="gui-card-mask-title gui-absolute-lb gui-bg-black-opacity5 gui-block-text gui-color-white gui-h6 gui-border-box gui-text-center">标题在图片上 · 居中</text>
-						</view>
-					</view>
-					
-					<view class="gui-card-item" hover-class="gui-tap">
-						<view class="gui-card-img">
-							<gui-image :width="330" :height="191"
-							src="https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/21.png"></gui-image>
-							<text class="gui-card-mask-title gui-absolute-lb gui-bg-black-opacity5 gui-block-text gui-color-white gui-h6 gui-border-box gui-text-center">标题在图片上 · 居中</text>
-						</view>
-					</view>
-					
-					<view class="gui-card-item" hover-class="gui-tap">
-						<view class="gui-card-img">
-							<gui-image :width="330" :height="191"
-							src="https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/21.png"></gui-image>
-							<text class="gui-card-mask-title gui-absolute-lb gui-bg-black-opacity5 gui-block-text gui-color-white gui-h6 gui-border-box gui-text-center">标题在图片上 · 居中</text>
-						</view>
-					</view>
-					
-					<view class="gui-card-item" hover-class="gui-tap">
-						<view class="gui-card-img">
-							<gui-image :width="330" :height="191"
-							src="https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/21.png"></gui-image>
-							<text class="gui-card-mask-title gui-absolute-lb gui-bg-black-opacity5 gui-block-text gui-color-white gui-h6 gui-border-box gui-text-center">标题在图片上 · 居中</text>
+							:src="v.pic_cover"></gui-image>
+							<text class="gui-card-mask-title gui-absolute-lb gui-bg-black-opacity5 gui-block-text gui-color-white gui-h6 gui-border-box gui-text-center">{{v.name}}</text>
 						</view>
 					</view>
 				</view>
 			</block>
-			<view v-if="state == 2" class="d-flex w-100 h-100 flex-column just-content-center align-items-center">
-				<view class="tips d-flex flex-column align-items-center font-size-base text-color-assist">
-					<view>您还没有任何阅览的小记</view>
-					<view>小记可能就在你身边，快去寻找吧~</view>
-				</view>
-				<button type="primary" class="drink-btn" size="default" @tap="home">我的家园</button>
-				<view class="font-size-sm text-color-primary" @tap="qun" style="display: none;">加入官方微信群</view>
-			</view>
-			
-			<dever-share ref="share" :data="fetch.share" v-if="fetch.share"></dever-share>
+
+			<gui-empty v-if="state == 2">
+				<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>
 		</view>
 		
-		<!-- 边框使用 style 实现，可以根据自己项目实际情况修改 -->
-		<view slot="gFooter" class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-end" 
-		style="height:150rpx;">
-			<view class="gui-footer-icon-buttons" @tap="navChang(0)">
-				<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
-				:class="[navCurrent == 0 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe63b;</text>
-				<text class="gui-footer-icon-buttons-text gui-block-text gui-nav-bottom-color" 
-				:class="[navCurrent == 0 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">首页</text>
-			</view>
-			<view class="gui-footer-icon-buttons" @tap="navChang(1)">
-				<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
-				:class="[navCurrent == 1 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe6b8;</text>
-				<text class="gui-footer-icon-buttons-text gui-block-text gui-nav-bottom-color" 
-				:class="[navCurrent == 1 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">交流</text>
-			</view>
-			<!-- 凸出按钮占位  普通按钮 实现下面的 gui-footer-icon-buttons 即可 -->
-			<view class="gui-footer-icon-buttons"></view>
-			<view class="gui-footer-icon-buttons" @tap="navChang(3)">
-				<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
-				:class="[navCurrent == 3 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe626;</text>
-				<text class="gui-footer-icon-buttons-text gui-block-text" 
-				:class="[navCurrent == 3 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">客服</text>
-			</view>
-			<view class="gui-footer-icon-buttons" @tap="navChang(4)">
-				<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
-				:class="[navCurrent == 4 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe6fe;</text>
-				<text class="gui-footer-icon-buttons-text gui-block-text" 
-				:class="[navCurrent == 4 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">我的</text>
-			</view>
-			<!-- 使用定位方式实现凸出按钮 -->
-			<view class="gui-footer-buttons-ab" @tap="navChang(2)">
-				<text class="gui-footer-buttons-ab-icon gui-block-text gui-icons gui-bold" 
-				:class="[navCurrent == 2 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe60b;</text>
-				<text class="gui-footer-icon-buttons-text gui-block-text" 
-				:class="[navCurrent == 2 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">合小记</text>
-			</view>
+		<view slot="gPendant" style="display: none;">
+			<text class="gui-block-text pendant gui-color-white gui-bg-primary gui-icons">社区</text>
 		</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 deverShare from '@/lib/dever/components/share.vue';
+import foot from '@/pages/index/foot.vue';
 export default {
-	components: {
-		
-	},
 	data() {
 		return {
-			navCurrent: 2,
+			foot_value : 2,
 			state : 0,
 			fetch : {
 				cate : [],
 				info : [],
 				hot : [],
 			},
-			height : 'height:100%',
+			cate : ["全部", "我的"],
 			cate_index: 0,//默认分类
-			top: 0,
-			view: '',
-			cates : ["全部", "我的"],
+			nav_index : 0,
 		}
 	},
 	components:{
-		deverShare
+		deverShare,foot
 	},
 	onLoad() {
-		
-	},
+		this.getInfo();
+	},
 	onShow() {
-		this.navCurrent = 2;
-		//this.Dever.checkLogin();
-		this.getData();
+		this.$nextTick(function() {
+			this.$refs.foot.cur = this.foot_value;
+		});
 	},
 	// 重新加载
 	onPullDownRefresh: function() {
-		this.getData();
+		this.getInfo();
 	},
 	//下拉加载
 	onReachBottom() {
-		this.getData();
+		this.getData(1, false);
 	},
 	
 	methods: {
-		navChang : function (index) {
-			this.navCurrent = index;
-			
-			if (index == 0) {
-				this.Dever.location('index/index');
-			}
-		},
-		getData : function() {
-			var self = this;
-			this.Dever.get(this, 'app/collection/?l=api.getList', {id:-1}, function(t) {
+		getInfo : function() {
+			var self = this;
+			var data = {};
+			data.id = -1;
+			data.type = this.cate_index + 1;
+			this.nav_index = 0;
+			this.Dever.get(this, 'app/collection/?l=api.getList', data, function(t) {
 				if (t.cate.length > 0) {
 					self.state = 1;
 				} else {
 					self.state = 2;
 				}
-				uni.getSystemInfo({
-					success: function (res) {
-						self.height = 'height:' + res.windowHeight + 'px';
-					}
-				})
 			});
-		},
-		home : function() {
-			this.Dever.location('index/index');
-		},
-		location : function(id) {
-			this.Dever.location('dream/index?id=' + id);
 		},
-		
-		go : function(e) {
-			var link = e.currentTarget.dataset.url;
-			if (link) {
-				this.Dever.location(link);
+		getData : function(page, index) {
+			var self = this;
+			if (!index) {
+				index = this.nav_index;
 			}
+			var data = {};
+			data.id = -1;
+			data.type = this.cate_index + 1;
+			data.cate = this.fetch.cate[index].id;
+			this.Dever.page([page, 'info'], this, 'app/collection/?l=api.getListData', data);
 		},
-		
-		menu : function(index, id) {
-			this.cate_index = index
+		view : function(id) {
+			this.Dever.location('dream/index?id=' + id);
+		},
+		menu : function(e) {
+			this.cate_index = e
+			this.getInfo();
 		},
+		
+		nav : function(e) {
+			this.nav_index = e;
+			this.getData(1, e);
+		}
 	}
 };
 </script>
 
 <style>
-.demo-nav{width:750rpx; padding:20rpx 30rpx; box-sizing: border-box;}
-.demo-nav2{width:750rpx; padding:15rpx 30rpx;  box-sizing: border-box; padding-bottom:0;}
-.gui-text-small{font-size:20rpx;}
-.gui-footer-icon-buttons{width:130rpx; height:80rpx; padding:10rpx; flex:1; position:relative; margin:0; background-color:#F8F8F8;}
-.gui-footer-buttons-ab{position:absolute; z-index:101; left:325rpx; top:0rpx; width:110rpx; height:150rpx;}
-.gui-footer-buttons-ab-icon{width:110rpx; height:110rpx; line-height:120rpx; text-align:center; font-size:68rpx; background-color:#F7F8FA; border-radius:100rpx;}
+.pendant{width:88rpx; height:88rpx; border-radius:88rpx; text-align:center; line-height:88rpx; font-size:24rpx;margin-top: 10rpx;}
+.menu{width:750rpx; padding:15rpx 30rpx;  box-sizing: border-box; padding-bottom:0;}
+.gui-text-small{font-size:20rpx;}
 </style>

pages/index/msg.vue

@@ -0,0 +1,118 @@
+<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 class="gui-margin gui-margin-top">
+				<text class="gui-h5 gui-color-gray gui-bold">消息列表</text>
+			</view>
+			<view class="gui-margin-top">
+				<gui-slide-list :msgs="msgs" @itemTap="itemTap" :height="mainHeight" @btnTap="btnTap"></gui-slide-list>
+			</view>
+		</view>
+		<foot ref="foot" slot="gFooter" :value="foot_value"></foot>
+	</gui-page>
+</template>
+<script>
+// 模拟个 api 请求的数据
+var msgsFromApi = [
+	{
+		img       : 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/15.png',
+		msgnumber : 8,
+		title     : "某某某",
+		time      : "30分钟前",
+		content   : "消息内容 ..."
+	},
+	{
+		img       : 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/13.png',
+		msgnumber : 0,
+		title     : "某某某",
+		time      : "08/10/2020",
+		content   : "语音消息"
+	},
+	{
+		img       : 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/11.png',
+		msgnumber : 12,
+		title     : "某某某",
+		time      : "昨天",
+		content   : "图片消息"
+	},
+	{
+		img       : 'https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/12.png',
+		msgnumber : 1,
+		title     : "某某某",
+		time      : "08/08/2020",
+		content   : "系统消息"
+	}
+];
+var graceJS = require('@/lib/GraceUI5/js/grace.js');
+import foot from '@/pages/index/foot.vue';
+export default {
+	data() {
+		return {
+			foot_value : 3,
+			msgs         : [],
+			// 核心区域高度 
+			mainHeight   : 200,
+			pageLoading  : true
+		}
+	},
+	components:{
+		foot
+	},
+	onLoad:function(){
+		// 01. 获取页面主体高度
+		graceJS.getRefs('guiPage', this, 0, (ref)=>{
+			ref.getDomSize('guiPageBody', (e)=>{
+				// 消息主体高度 = 页面高度 - 其他页面元素高度
+				this.mainHeight  = e.height - uni.upx2px(120);
+				this.pageLoading = false;
+			});
+		});
+		
+		// 模拟 api 请求，因为请求数据里没有按钮信息我们利用js进行按钮补充
+		setTimeout(() => {
+			for(let i = 0; i < msgsFromApi.length; i++){
+				// 具体几个按钮及按钮文本根据项目需求来，格式 {name:按钮文本, bgColor:按钮背景色}
+				msgsFromApi[i].btns = [{'name':'标为已读', bgColor:'#323232'}, {'name':'删除消息', bgColor:'#FF0036'}];
+			}
+			this.msgs = msgsFromApi;
+		}, 500);
+	},
+	methods:{
+		btnTap : function(index, btnIndex){
+			console.log(index, btnIndex);
+			// 第一个按钮被点击 [ 标记已读 ]
+			if(btnIndex == 0){
+				if(this.msgs[index].btns[0].name == '标为已读'){
+					this.msgs[index].btns = [{'name':'标为未读', bgColor:'#888888'}, {'name':'删除消息', bgColor:'#FF0036'}];
+					this.msgs[index].msgnumber = 0;
+				}else{
+					this.msgs[index].btns = [{'name':'标为已读', bgColor:'#323232'}, {'name':'删除消息', bgColor:'#FF0036'}];
+					this.msgs[index].msgnumber = 1;
+				}
+				setTimeout(()=>{this.msgs.splice(index, 1, this.msgs[index]);}, 300);
+			}
+			// 第二个按钮被打开 [ 删除消息 ]
+			else if(btnIndex == 1){
+				uni.showModal({
+					title:"确定要删除吗?",
+					success: (e) => {
+						if(e.confirm){this.msgs.splice(index, 1);}
+					}
+				});
+			}
+		},
+		// 列表本身被点击
+		itemTap : function (e) {
+			console.log(e);
+			uni.showToast({title:"索引"+e});
+		}
+	}
+}
+</script>
+<style>
+.gui-slide-list-img-wrap{width:80rpx; height:80rpx; margin-left:25rpx;} /* 列表图片外层样式 */
+.gui-slide-list-img{width:80rpx; height:80rpx; border-radius:6rpx;} /* 列表图片外层样式 */
+.gui-slide-list-point{border-radius:32rpx; height:32rpx; line-height:32rpx; padding:0 10rpx; font-size:20rpx;} /* 消息数标签样式 */
+.gui-slide-list-title-text{line-height:38rpx; height:38rpx; font-size:28rpx; color:#2B2E3D; overflow:hidden;} /* 消息标题样式 */
+.gui-slide-list-desc{line-height:32rpx; height:32rpx; font-size:22rpx; color:rgba(69, 90, 100, 0.3); overflow:hidden; margin-right:25rpx; margin-top:2px;} /* 消息描述样式 */
+</style>

pages/index/my.vue

@@ -0,0 +1,194 @@
+<template>
+	<gui-page :customFooter="true" iphoneXButtomStyle="background:#F8F8F8"
+	:footerSets="{height:150, zIndex:100, bg:'none'}" :isLoading="pageLoading">
+		<view slot="gBody">
+			<view class="gui-margin-top-large gui-padding">
+				<text class="gui-h4 gui-bold gui-color-gray">个人中心</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>
+					</view>
+					<view class="gui-list-body">
+						<view class="gui-list-title">
+							<text class="gui-list-title-text gui-primary-color">{{fetch.user.username}}
+							<text v-if="fetch.user.title">（{{fetch.user.title}}）</text>
+							</text>
+						</view>
+						<text 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></text>
+					</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="quit">
+					<text class="gui-text-center gui-block-text gui-icons logoff gui-color-gray">&#xe62e; 退出登录</text>
+				</view>
+			</block>
+		</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.location('user/login');
+		},
+		
+		user : function() {
+			this.Dever.location('user/index');
+		},
+		
+		quit : function() {
+			this.Dever.setToken('');
+			var self = this;
+			this.Dever.alert('已退出', 'none', function() {
+				self.Dever.location('index/index');
+			});
+		},
+		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;}
+</style>

pages/index/news.vue

@@ -0,0 +1,176 @@
+<template>
+<gui-page :fullPage="true" ref="guiPage" :customFooter="true" :isLoading="pageLoading" iphoneXButtomStyle="background:#F8F8F8" :footerSets="{height:150, zIndex:100, bg:'none'}">
+	<view slot="gBody" class="gui-flex1" style="background-color:#F8F8F8;">
+		<!-- 分类导航 -->
+		<view class="header gui-border-b gui-border-box gui-flex gui-columns gui-justify-content-center" 
+		id="myheader">
+			<gui-switch-navigation :size="150" 
+			 activeLineBg="linear-gradient(to right, #008AFF,#008AFF)"
+			:items="navItems" @change="navchange"></gui-switch-navigation>
+		</view>
+		<!-- 滚动区域高度 = gBody - 自定义区域高度 -->
+		<scroll-view :scroll-y="true" :show-scrollbar="false" 
+		:style="{height:mainHeight+'px'}" 
+		@touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"
+		@scrolltolower="loadmorefun" @scroll="scroll">
+			<!-- 刷新组件 -->
+			<gui-refresh @reload="reload" ref="refreshcom"></gui-refresh>
+			<!-- 数据展示区域 -->
+			<view>
+				<gui-article-list :articles="newsList" @newstap="newstap"></gui-article-list>
+			</view>
+			<!-- 加载组件 -->
+			<gui-loadmore  ref="loadmorecom"></gui-loadmore>
+		</scroll-view>
+	</view>
+	<foot ref="foot" slot="gFooter" :value="foot_value"></foot>
+</gui-page>
+</template>
+<script>
+var graceJs = require('@/lib/GraceUI5/js/grace.js');
+// 模拟 api 请求数据，格式见 article.js
+var artciles = require('@/lib/GraceUI5/demoData/article.js');
+import foot from '@/pages/index/foot.vue';
+export default {
+	data() {
+		return {
+			foot_value : 1,
+			// 主体高度
+			mainHeight    : 200,
+			// 滚动区域滚动距离
+			scrollTop     : 0,
+			// 加载更多延迟
+			loadMoreTimer : null,
+			// 分类
+			navItems      : [
+				{id:1, name:'分类1'},{id:2, name:'分类2'},
+				{id:3, name:'分类3'},{id:4, name:'分类4'},
+				{id:5, name:'分类5'},{id:6, name:'分类6'}
+			],
+			// 当前展示的分类索引
+			currentIndex  : 0,
+			// 新闻列表数据， 分类切换重新获取第一页
+			newsList      : [],
+			// 页码
+			page          : 1
+		}
+	},
+	components:{
+		foot
+	},
+	onShow() {
+		this.$nextTick(function() {
+			//this.$refs.foot.cur = this.foot_value;
+		});
+	},
+	onLoad:function(){
+		// 01. 获取页面主体高度
+		graceJs.getRefs('guiPage', this, 0, (ref)=>{
+			ref.getDomSize('guiPageBody', (e)=>{
+				// 主体高度 = 页面高度 - 自定义区域高度
+				graceJs.select('#myheader', (e2)=>{
+					// 如果自定义区域有 margin 尺寸获取不到请加上这个值，可以利用 uni.upx2px() 转换
+					this.mainHeight  = e.height - e2.height;
+					// 第一次加载数据
+					this.getNews();
+				});
+			});
+		});
+	},
+	methods : {
+		navchange:function(index){
+			// 刷新当前分类对应的数据
+			if(this.currentIndex != index){
+				this.page = 1;
+				this.currentIndex = index;
+				this.getNews();
+				// 重置加载组件状态
+				this.$refs.loadmorecom.stoploadmore();
+			}
+		},
+		// 新闻加载函数
+		// isReload 代表下拉刷新
+		getNews : function (isReload) {
+			if(this.page <= 1){ 
+				this.newsList    = [];
+				if(!isReload){this.pageLoading = true;}
+			}
+			// 真实情况 url 地址类似如下格式 :
+			// var url = 'http://您的api域名/**/**/?分类id='+this.navItems[this.currentIndex].id+'&页码='+this.page;
+			// 连接 api 获取新闻数据
+			// 模拟 api 加载数据
+			setTimeout(()=>{
+				// 对演示数据随机刷新模拟数据刷新
+				var demoArr       = graceJs.arrayShuffle(artciles.articleList);
+				if(this.page >= 2){
+					this.newsList = this.newsList.concat(demoArr);
+					// 加载完成后停止加载动画
+					this.$refs.loadmorecom.stoploadmore();
+					// 假定第3页加载了全部数据，通知组件不再加载更多
+					// 实际开发由接口返回值来决定
+					if(this.page >= 3){
+						this.$refs.loadmorecom.nomore();
+					}
+				}
+				// 第一页 有可能是第一次加载或者刷新
+				else{
+					this.newsList    = [];
+					this.newsList    = demoArr;
+					// 刷新
+					if(isReload){this.$refs.refreshcom.endReload();}
+					this.pageLoading = false;
+				}
+				this.page++;
+			}, 800);
+			
+		},
+		scroll : function(e){
+			this.scrollTop	= e.detail.scrollTop;
+		},
+		// 下拉刷新相关事件绑定
+		touchstart : function (e){
+			if(this.scrollTop > 0){return ;}
+			this.$refs.refreshcom.touchstart(e);
+		},
+		touchmove : function(e){
+			if(this.scrollTop > 0){return ;}
+			this.$refs.refreshcom.touchmove(e);
+		},
+		touchend : function (e) {
+			if(this.scrollTop > 0){return ;}
+			this.$refs.refreshcom.touchend(e);
+		},
+		// 刷新事件
+		reload : function(){
+			this.page = 1;
+			this.getNews(true);
+			// 刷新时重置加载组件状态
+			this.$refs.loadmorecom.stoploadmore();
+		},
+		// 加载更多事件
+		loadmorefun : function(){
+			// 获取加载组件状态看一下是否还能继续加载
+			// 保证触底只执行一次加载
+			if(this.loadMoreTimer != null){clearTimeout(this.loadMoreTimer);}
+			this.loadMoreTimer =  setTimeout(() => {
+				var status = this.$refs.loadmorecom.loadMoreStatus;
+				if(status != 0){return null;}
+				this.$refs.loadmorecom.loading();
+				// 此处开启加载动画执行加载数据的函数
+				this.getNews();
+			}, 80);
+		},
+		// 新闻点击
+		newstap : function (e) {
+			// 获取新闻 id
+			var newsId = e;
+			console.log(newsId);
+			// 打开新闻详情页面
+			//uni.navigateTo()
+		}
+	}
+}
+</script>
+<style>
+.header{padding:15rpx 30rpx; height:100rpx;}
+</style>

pages/tool/web_view.vue

@@ -0,0 +1,51 @@
+<template>
+	<gui-page :customHeader="true" :fullPage="true" :headerSets="{height:44, zIndex:100}" >
+		<view slot="gHeader">
+			<view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-padding">
+				<!-- 使用组件实现返回按钮及返回首页按钮 -->
+				<gui-header-leading :onlyBack="true"></gui-header-leading>
+				<!-- 导航文本此处也可以是其他自定义内容 -->
+				<text class="gui-h4 gui-ellipsis gui-text-center gui-header-content gui-primary-color">{{title}}</text>
+				<!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
+			</view>
+		</view>
+		<view slot="gBody" class="gui-margin">
+			<web-view :src="url" :webview-styles="webviewStyles" @message="callback"  style="margin-top:44px;"></web-view>
+		</view>
+	</gui-page>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			url: '',
+			title : '',
+			webviewStyles: {
+				progress: {
+					color: '#FF3333'
+				}
+			}
+		};
+	},
+	onLoad: function(option) {
+		if (option && option.name) {
+			uni.setNavigationBarTitle({
+				title:option.name
+			});
+		}
+		this.url = this.Dever.data('web_view');
+		this.title = this.Dever.data('web_view_title');
+	},
+	onShow: function() {},
+
+	methods: {
+		callback(e) {
+			
+		},
+	}
+};
+</script>
+
+<style>
+</style>

pages/user/index.vue

@@ -1,104 +1,115 @@
 <template>
-	<view class="container">
-		<view class="brand">
-			<image :src="fetch.avatar" @click="avatarSet(0)" class="avatar"></image>
-			<avatar @upload="avatarUpload" ref="avatar"></avatar>
-			<view class="username">{{fetch.name}}</view>
+	<gui-page :customHeader="true">
+		<view slot="gHeader">
+			<view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-padding">
+				<!-- 使用组件实现返回按钮及返回首页按钮 -->
+				<gui-header-leading :onlyBack="true"></gui-header-leading>
+				<!-- 导航文本此处也可以是其他自定义内容 -->
+				<text class="gui-h4 gui-ellipsis gui-text-center gui-header-content gui-primary-color">个人资料</text>
+				<!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
+			</view>
 		</view>
-		<view class="user-form">
-			<list-cell line-right padding="30rpx">
-				<view class="form-item">
-					<view class="label">昵称</view>
-					<input type="text" v-model="fetch.name"/>
-				</view>
-			</list-cell>
-			<list-cell line-right padding="30rpx">
-				<view class="form-item">
-					<view class="label">头衔</view>
-					<input type="text" v-model="fetch.title"/>
-				</view>
-			</list-cell>
-			<list-cell line-right padding="30rpx">
-				<view class="form-item">
-					<view class="label">签名</view>
-					<input type="text" v-model="fetch.info"/>
-				</view>
-			</list-cell>
-			<list-cell line-right padding="30rpx" style="display: none;">
-				<view class="form-item">
-					<view class="label">手机号码</view>
-					<input type="text" v-model="fetch.mobile" />
-					<button type="default" plain class="font-size-sm" @tap="showTelphoneModal">更换手机</button>
-				</view>
-			</list-cell>
-			<list-cell line-right padding="30rpx">
-				<view class="form-item">
-					<view class="label">性别</view>
-					<view class="radio" @tap="fetch.sex = 1">
-						<image :src="fetch.sex == 1 ? '/static/images/common/round-black-selected.png' : '/static/images/common/gouxuankuang.png'"></image>
-						<view>男</view>
+		<view slot="gBody" class="container">
+			<view class="brand">
+				<image :src="fetch.avatar" @click="avatarSet(0)" class="avatar"></image>
+				<avatar @upload="avatarUpload" ref="avatar"></avatar>
+				<view class="username">{{fetch.name}}</view>
+			</view>
+			<view class="user-form">
+				<list-cell line-right padding="30rpx">
+					<view class="form-item">
+						<view class="label">昵称</view>
+						<input type="text" v-model="fetch.name"/>
 					</view>
-					<view class="radio" @tap="fetch.sex = 2">
-						<image :src="fetch.sex == 2 ? '/static/images/common/round-black-selected.png' : '/static/images/common/gouxuankuang.png'"></image>
-						<view>女</view>
+				</list-cell>
+				<list-cell line-right padding="30rpx">
+					<view class="form-item">
+						<view class="label">头衔</view>
+						<input type="text" v-model="fetch.title"/>
 					</view>
-					<view class="radio" @tap="fetch.sex = 3">
-						<image :src="fetch.sex == 3 ? '/static/images/common/round-black-selected.png' : '/static/images/common/gouxuankuang.png'"></image>
-						<view>不显示</view>
+				</list-cell>
+				<list-cell line-right padding="30rpx">
+					<view class="form-item">
+						<view class="label">签名</view>
+						<input type="text" v-model="fetch.info"/>
 					</view>
-				</view>
-			</list-cell>
-			<list-cell line-right padding="30rpx" last>
-				<view class="form-item">
-					<view class="label">生日</view>
-					 <picker class="flex-fill" mode="date" :value="fetch.birthday" @change="handleBirthdayChange">
-						<view v-if="fetch.birthday">{{ fetch.birthday }}</view>
-						<view v-if="!fetch.birthday">请选择生日</view>
-					</picker>
-				</view>
-			</list-cell>
-		</view>
-		
-		<view class="save-btn">
-			<wButton 
-				class="wbutton"
-				text="修改资料"
-				:rotate="isRotate" 
-				@click.native="update()"
-			></wButton>
-		</view>
-		
-		<modal :show="telphoneModalVisible" custom padding="40rpx 30rpx">
-			<view class="telphone-modal">
-				<view class="header">
-					<view>温馨提示</view>
-					<image src="/static/images/common/closex.png" class="close-icon" @tap="closeTelphoneModal"></image>
-				</view>
-				<view class="tips">
-					请在绑定前确定新手机号未绑定合小记。
-				</view>
-				<view class="telphone-form">
-					<list-cell padding="30rpx 0">
-						<view class="telphone-input">
-							<view class="prefix">+86</view>
-							<input type="text" v-model="telphoneForm.telphone" placeholder="请填写有效手机号码" placeholder-class="font-size-base text-color-assist"/>
+				</list-cell>
+				<list-cell line-right padding="30rpx" style="display: none;">
+					<view class="form-item">
+						<view class="label">手机号码</view>
+						<input type="text" v-model="fetch.mobile" />
+						<button type="default" plain class="font-size-sm" @tap="showTelphoneModal">更换手机</button>
+					</view>
+				</list-cell>
+				<list-cell line-right padding="30rpx">
+					<view class="form-item">
+						<view class="label">性别</view>
+						<view class="radio" @tap="fetch.sex = 1">
+							<image :src="fetch.sex == 1 ? '/static/images/common/round-black-selected.png' : '/static/images/common/gouxuankuang.png'"></image>
+							<view>男</view>
 						</view>
-					</list-cell>
-					<list-cell padding="30rpx 0">
-						<view class="verfiycode-input">
-							<input type="text" v-model="telphoneForm.verifyCode" placeholder="6位数字验证码" placeholder-class="font-size-base text-color-assist">
-							<view class="countdown" :class="{'text-color-assist': !countdown, 'text-color-base': countdown}" @tap="getVerifyCode">
-								{{ !countdown ? '获取验证码' : countdown + '秒可获取' }}
-							</view>
+						<view class="radio" @tap="fetch.sex = 2">
+							<image :src="fetch.sex == 2 ? '/static/images/common/round-black-selected.png' : '/static/images/common/gouxuankuang.png'"></image>
+							<view>女</view>
 						</view>
-					</list-cell>
-				</view>
-				<view class="footer">
-					<button type="primary" @tap="closeTelphoneModal">确认</button>
-				</view>
+						<view class="radio" @tap="fetch.sex = 3">
+							<image :src="fetch.sex == 3 ? '/static/images/common/round-black-selected.png' : '/static/images/common/gouxuankuang.png'"></image>
+							<view>不显示</view>
+						</view>
+					</view>
+				</list-cell>
+				<list-cell line-right padding="30rpx" last>
+					<view class="form-item">
+						<view class="label">生日</view>
+						 <picker class="flex-fill" mode="date" :value="fetch.birthday" @change="handleBirthdayChange">
+							<view v-if="fetch.birthday">{{ fetch.birthday }}</view>
+							<view v-if="!fetch.birthday">请选择生日</view>
+						</picker>
+					</view>
+				</list-cell>
+			</view>
+			
+			<view class="save-btn">
+				<wButton 
+					class="wbutton"
+					text="修改资料"
+					:rotate="isRotate" 
+					@click.native="update()"
+				></wButton>
 			</view>
-		</modal>
-	</view>
+			
+			<modal :show="telphoneModalVisible" custom padding="40rpx 30rpx">
+				<view class="telphone-modal">
+					<view class="header">
+						<view>温馨提示</view>
+						<image src="/static/images/common/closex.png" class="close-icon" @tap="closeTelphoneModal"></image>
+					</view>
+					<view class="tips">
+						请在绑定前确定新手机号未绑定合小记。
+					</view>
+					<view class="telphone-form">
+						<list-cell padding="30rpx 0">
+							<view class="telphone-input">
+								<view class="prefix">+86</view>
+								<input type="text" v-model="telphoneForm.telphone" placeholder="请填写有效手机号码" placeholder-class="font-size-base text-color-assist"/>
+							</view>
+						</list-cell>
+						<list-cell padding="30rpx 0">
+							<view class="verfiycode-input">
+								<input type="text" v-model="telphoneForm.verifyCode" placeholder="6位数字验证码" placeholder-class="font-size-base text-color-assist">
+								<view class="countdown" :class="{'text-color-assist': !countdown, 'text-color-base': countdown}" @tap="getVerifyCode">
+									{{ !countdown ? '获取验证码' : countdown + '秒可获取' }}
+								</view>
+							</view>
+						</list-cell>
+					</view>
+					<view class="footer">
+						<button type="primary" @tap="closeTelphoneModal">确认</button>
+					</view>
+				</view>
+			</modal>
+		</view>
+	</gui-page>
 </template>
 
 <script>

pages/user/index_bak.vue

@@ -1,178 +0,0 @@
-<template>
-	<view class="register">
-	
-		<view class="content">
-			<!-- 头部logo -->
-			<view class="header">
-				<image :src="fetch.avatar" @click="avatarSet(0)"></image>
-				<avatar @upload="avatarUpload" ref="avatar"></avatar>
-			</view>
-			<!-- 主体 -->
-			<view class="main">
-				<wInput
-					v-model="fetch.name"
-					type="text"
-					placeholder="昵称"
-				></wInput>
-				
-				<wInput
-					v-model="fetch.info"
-					type="text"
-					placeholder="介绍"
-				></wInput>
-				
-			</view>
-				
-			<wButton 
-				class="wbutton"
-				text="修改资料"
-				:rotate="isRotate" 
-				@click.native="update()"
-			></wButton>
-			
-			<!-- 其他登录 -->
-			<view class="other_login cuIcon">
-				<view class="login_icon">
-					<view class="cuIcon-weixin" @tap="bind_weixin"></view>
-				</view>
-			</view>
-			
-			<!-- 底部信息 -->
-			<view class="footer">
-				<navigator url="forget" open-type="navigate" @click="index">返回首页</navigator>
-				<text>|</text>
-				<navigator url="register" open-type="navigate" @click="tixian">余额提现</navigator>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	import wInput from '@/lib/watch-login/watch-input.vue' //input
-	import wButton from '@/lib/watch-login/watch-button.vue' //button
-	import avatar from "@/lib/yq-avatar/yq-avatar.vue";
-	export default {
-		data() {
-			return {
-				fetch : {
-					name : '',
-					avatar : '',
-					sex : 3,
-				},
-				isRotate: false, //是否加载旋转
-				openAvatar : false
-			}
-		},
-		components:{
-			wInput,
-			wButton,
-			avatar
-		},
-		// 重新加载
-		onPullDownRefresh: function() {
-			this.getData();
-		},
-		onLoad() {
-			this.Dever.checkLogin();
-			this.getData();
-		},
-		methods: {
-			getData : function() {
-				this.Dever.get(this, 'app/user/?l=api.getBaseUser');
-			},
-			bind_weixin : function() {
-				var self = this;
-				this.Dever.confirm('即将开始微信授权，授权后您的微信信息将覆盖现有个人信息，但不会影响您已设置好的某个合小记中的个人信息。', function() {
-					if (self.Dever.source == 'h5') {
-						var host = self.Dever.api_host + 'package/oauth/?l=request.auth&account=1&system=1&system_source=' + self.Dever.source_id + '&signature=' + self.Dever.getToken();
-						self.Dever.location(host, 'go');
-					} else if (self.Dever.source == 'wx_applet') {
-						uni.authorize({
-						    scope: 'scope.userInfo',
-						    success() {
-						        uni.login({
-						          provider: 'weixin',
-						          success: function (loginRes) {
-						            console.log(loginRes.authResult);
-						            // 获取用户信息
-						            uni.getUserInfo({
-						              provider: 'weixin',
-									  lang : 'zh_CN',
-						              success: function (infoRes) {
-						                console.log('用户昵称为：' + infoRes.userInfo.nickName);
-						              }
-						            });
-						          }
-						        });
-						    }
-						})
-					} else {
-						self.Dever.alert('暂时不支持app登录');
-					}
-				});
-			},
-			index : function() {
-				this.Dever.location('index/index');
-			},
-			tixian : function() {
-				this.Dever.alert('敬请期待');
-			},
-		    update : function() {
-				if(this.isRotate){
-					//判断是否加载中，避免重复点击请求
-					return false;
-				}
-				if (!this.fetch.name) {
-					this.Dever.alert('昵称不能为空');
-				    return false;
-				}
-				
-				this.isRotate = true;
-				var self = this;
-				this.Dever.post('package/passport/?l=app.update', {noloading:1, username: this.fetch.name, info: this.fetch.info, gender: this.fetch.sex}, function(t) {
-					self.isRotate = false;
-					self.Dever.alert('已保存资料，仅影响未修改过信息的合小记');
-				}, function(t) {
-					self.Dever.alert(t.msg);
-					self.isRotate = false;
-				});
-		    },
-			avatarUpload : function(e) {
-				var self = this;
-				this.openAvatar = false;
-				
-				this.Dever.uploadFile(e.path, 'avatar', 1, function(type, file) {
-					self.fetch.avatar = file;
-					self.Dever.post('package/passport/?l=app.update', {avatar:file, noloading:1});
-				});
-			},
-			avatarSet : function(index) {
-				this.openAvatar = true;
-				this.$refs.avatar.fChooseImg(index,{
-					selWidth: "300rpx", selHeight: "300rpx",
-					expWidth: '260rpx', expHeight: '260rpx',
-					avatarSrc : this.fetch.avatar,
-					bgImage : this.fetch.avatar,
-					noTab : true,
-					
-				});
-			}
-		}
-	}
-</script>
-
-<style>
-	@import url("@/lib/watch-login/css/icon.css");
-	@import url("@/lib/watch-login/css/main.css");
-	.other_agree {
-		display: flex;
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
-		margin-top: 50rpx;
-		text-align: center;
-	}
-	.other_login {
-		margin-top: 80rpx;
-	}
-</style>

pages/user/login.vue

@@ -1,72 +1,84 @@
 <template>
-	<view class="register">
-	
-		<view class="content">
-			<!-- 头部logo -->
-			<view class="header" v-if="system_logo">
-				<image :src="system_logo" @click="Dever.viewPic([system_logo], system_logo)"></image>
+	<gui-page :customHeader="true">
+		<view slot="gHeader">
+			<view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-padding">
+				<!-- 使用组件实现返回按钮及返回首页按钮 -->
+				<gui-header-leading :onlyBack="true"></gui-header-leading>
+				<!-- 导航文本此处也可以是其他自定义内容 -->
+				<text class="gui-h4 gui-ellipsis gui-text-center gui-header-content gui-primary-color">登录</text>
+				<!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
 			</view>
-			<!-- 主体 -->
-			<view class="main">
-				<wInput
-					v-model="phoneData"
-					type="text"
-					maxlength="11"
-					placeholder="手机号"
-				></wInput>
-				<wInput
-					v-model="passData"
-					type="password"
-					maxlength="11"
-					placeholder="登录密码"
-					isShowPass
-					style="display: none;"
-				></wInput>
-				<wInput
-					v-model="verCode"
-					type="number"
-					maxlength="6"
-					placeholder="验证码"
-					
-					isShowCode
-					ref="runCode"
-					@setCode="getVerCode()"
-				></wInput>
+		</view>
+		<view slot="gBody" class="register">
+		
+			<view class="content">
+				<!-- 头部logo -->
+				<view class="header" v-if="system_logo">
+					<image :src="system_logo" @click="Dever.viewPic([system_logo], system_logo)"></image>
+				</view>
+				<!-- 主体 -->
+				<view class="main">
+					<wInput
+						v-model="phoneData"
+						type="text"
+						maxlength="11"
+						placeholder="手机号"
+					></wInput>
+					<wInput
+						v-model="passData"
+						type="password"
+						maxlength="11"
+						placeholder="登录密码"
+						isShowPass
+						style="display: none;"
+					></wInput>
+					<wInput
+						v-model="verCode"
+						type="number"
+						maxlength="6"
+						placeholder="验证码"
+						
+						isShowCode
+						ref="runCode"
+						@setCode="getVerCode()"
+					></wInput>
+						
+				</view>
 					
-			</view>
+				<wButton 
+					class="wbutton"
+					text="登 录"
+					:rotate="isRotate" 
+					@click.native="startLogin()"
+				></wButton>
 				
-			<wButton 
-				class="wbutton"
-				text="登 录"
-				:rotate="isRotate" 
-				@click.native="startLogin()"
-			></wButton>
-			
-			<view class="other_agree">
-				<text
-					@tap="isShowAgree" 
-					class="cuIcon"
-					:class="showAgree?'cuIcon-radiobox':'cuIcon-round'"
-				> 同意</text>
-				<!-- 协议地址 -->
-				<view @click="goView('agreement', '入记协议')">《入记协议》</view>
-			</view>
-			
-			<!-- 其他登录 -->
-			<view class="other_login cuIcon" style="display: none;">
-				<view class="login_icon">
-					<view class="cuIcon-weixin" @tap="login_weixin"></view>
+				<view class="other_agree">
+					<text
+						@tap="isShowAgree" 
+						class="cuIcon"
+						:class="showAgree?'cuIcon-radiobox':'cuIcon-round'"
+					> 同意</text>
+					<!-- 协议地址 -->
+					<view @click="goView('agreement', '入记协议')">《入记协议》</view>
+				</view>
+				
+				<!-- 其他登录 -->
+				<view class="other_login cuIcon" style="display: none;">
+					<view class="login_icon">
+						<view class="cuIcon-weixin" @tap="login_weixin"></view>
+					</view>
+				</view>
+				
+				<!-- 底部信息 -->
+				<view class="footer" style="display: none;">
+					<navigator url="forget" open-type="navigate">找回密码</navigator>
+					<text>|</text>
+					<navigator url="register" open-type="navigate">注册账号</navigator>
 				</view>
-			</view>
-			
-			<!-- 底部信息 -->
-			<view class="footer" style="display: none;">
-				<navigator url="forget" open-type="navigate">找回密码</navigator>
-				<text>|</text>
-				<navigator url="register" open-type="navigate">注册账号</navigator>
 			</view>
 		</view>
 	</view>
+	</gui-page>
 </template>
 
 <script>
@@ -123,8 +135,7 @@
 			},
 			goView : function(key, name) {
 				var path = this.Dever.api_host + 'main/?l=page&key=' + key;
-				this.Dever.web_view = '/lib/dever/pages/web_view?name=' + name;
-				this.Dever.location(path, 'webview');
+				this.Dever.location(path, 'webview', name);
 			},
 			isShowAgree(){
 				//是否选择协议