edit

pages/dream/index.vue

@@ -2,7 +2,7 @@
 	<gracePage :customHeader="false">
 		<view class="container" slot="gBody">
 			<ourLoading isFullScreen :active="pageLoading" :text="pageLoadingText" />
-			<view class="wrap2">
+			<view class="wrap2" @click="goInfo">
 				<graceBorderRadius :style="fetch.button.bgcolor" :radius="['20rpx','20rpx','20rpx','0rpx']">
 					<text class="demo2 grace-white" :style="fetch.button.color">{{fetch.info.name}}</text>
 				</graceBorderRadius>
@@ -40,7 +40,7 @@
 			</view>
 			
 			<view v-if="infoState">
-				<info :id="id" :bgcolor="fetch.button.bgcolor" :color="fetch.button.color" @hideRanking="hideRanking"></info>
+				<info :id="id" :bgcolor="fetch.button.bgcolor" :color="fetch.button.color" hideInfo="hideInfo"></info>
 			</view>
 		</view>
 	</gracePage>
@@ -112,13 +112,19 @@ export default{
 		goRanking : function() {
 			this.rankingState = true;
 		},
+		goInfo : function() {
+			this.infoState = true;
+		},
+		hideInfo : function() {
+			this.infoState = false;
+		},
 		share : function() {
 			//从后端获取分享链接需要的加密参数
 			
 		}
 	},
 	components:{
-		buy,ranking
+		buy,ranking,info
 	}
 }
 </script>

pages/dream/info.vue

@@ -1,8 +1,147 @@
-<template>
+<template name="info">
+	<view class="grace-body container" :class="show ?'slidein':''" @touchstart="Dever.slide" @touchend="end">
+		<view class="grace-margin-top" style="padding:20rpx 0;">
+			<text class="grace-h4 grace-bold">个人中心</text>
+		</view>
+		<view class="grace-list">
+			<view class="grace-list-items">
+				<view class="grace-list-image ucenter-face grace-relative">
+					<image class="grace-list-image ucenter-face-image" src="https://graceui.oss-cn-beijing.aliyuncs.com/faces/1.png" mode="widthFix"></image>
+				</view>
+				<view class="grace-list-body">
+					<view class="grace-list-title">
+						<text class="grace-list-title-text">标题信息</text>
+					</view>
+					<view class="grace-list-body-desc">描述信息</view>
+				</view>
+				<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
+			</view>
+		</view>
+		<view class="ucenter-line"></view>
+		<view>
+			<graceBoxBanner :items="items"></graceBoxBanner>
+		</view>
+		<view class="ucenter-line"></view>
+		<view class="grace-list grace-margin-top">
+			<view class="grace-list-items">
+				<text class="grace-list-icon grace-icons icon-friend grace-blue"></text>
+				<view class="grace-list-body grace-border-b">
+					<view class="grace-list-title">
+						<text class="grace-list-title-text">好友动态</text>
+						<text class="grace-badge grace-bg-red">12</text>
+					</view>
+				</view>
+				<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
+			</view>
+			<view class="grace-list-items">
+				<text class="grace-list-icon grace-icons icon-wallet grace-green"></text>
+				<view class="grace-list-body grace-border-b">
+					<view class="grace-list-title">
+						<text class="grace-list-title-text">我的钱包</text>
+					</view>
+				</view>
+				<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
+			</view>
+			<view class="grace-list-items">
+				<text class="grace-list-icon grace-icons icon-article grace-blue-sky"></text>
+				<view class="grace-list-body grace-border-b">
+					<view class="grace-list-title">
+						<text class="grace-list-title-text">我的文章</text>
+					</view>
+				</view>
+				<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
+			</view>
+			<view class="grace-list-items">
+				<text class="grace-list-icon grace-icons icon-user grace-red"></text>
+				<view class="grace-list-body">
+					<view class="grace-list-title">
+						<text class="grace-list-title-text">身份认证</text>
+					</view>
+				</view>
+				<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
+			</view>
+		</view>
+		<view class="ucenter-line"></view>
+		<view class="grace-list grace-margin-top">
+			<view class="grace-list-items">
+				<text class="grace-list-icon grace-icons icon-set grace-yellow"></text>
+				<view class="grace-list-body grace-border-b">
+					<view class="grace-list-title">
+						<text class="grace-list-title-text">账户设置</text>
+					</view>
+				</view>
+				<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
+			</view>
+			<view class="grace-list-items">
+				<text class="grace-list-icon grace-icons icon-phone grace-red"></text>
+				<view class="grace-list-body">
+					<view class="grace-list-title">
+						<text class="grace-list-title-text">手机密保</text>
+					</view>
+				</view>
+				<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
+			</view>
+		</view>
+	</view>
 </template>
-
 <script>
+export default {
+	name: "info",
+	props: {
+		id : 0,
+		bgcolor : '',
+		color : '',
+	},
+	data() {
+		return {
+			show : false,
+			items: [
+				[80, '', '动态'],
+				[100, '', '好友'],
+				[50, '', '私信'],
+				['￥199', '', '余额']
+			]
+		}
+	},
+	mounted() {
+		this.getData();
+	},
+	methods:{
+		getData : function() {
+			var self = this;
+			this.Dever.get(this, 'app/collection/?l=api.getInfo', {id:this.id}, function(t) {
+				self.show = true;
+			});
+		},
+		hideInfo : function() {
+			this.show = false;
+			this.$emit('hideInfo');
+		},
+		end : function(e) {
+			var type = this.Dever.slideEnd(e);
+			if (type == 3 || type == 4) {
+				this.hideInfo();
+			}
+		},
+	},
+}
 </script>
-
-<style>
-</style>
+<style>
+.container {
+  background: white;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  transform: translateY(100%);
+  transition-property: transform;
+  transition-duration: 0.3s;
+  transition-timing-function: ease-in;
+  z-index:20;
+}
+.container.slidein{
+  transform: translateY(0);
+}
+.ucenter-face{width:100rpx !important; height:100rpx !important;}
+.ucenter-face-image{width:100rpx !important; height:100rpx !important;}
+.ucenter-line{height:12rpx; background-color:#F4F5F6; margin:16rpx 0;}
+</style>