edit

App.vue

@@ -50,7 +50,7 @@ export default {
 </script>
 <style lang="scss">
 /*每个页面公共css */
-@import '@/static/style/app.scss';
+@import '@/static/styles/app.scss';
 </style>
 <style>
 @import '@/static/layer/theme/default/layer.css';
@@ -70,6 +70,11 @@ page{background-color: #ffffff;}
 .grace-body {
 	width:100%;
 }
+.avatar {
+	width: 150rpx;
+	height: 150rpx;
+	border-radius: 100%;
+}
 .uni-scroll-view, .uni-scroll-view-content {
 	height:100%;
 }
@@ -84,5 +89,6 @@ video {
 /* 重写showModal样式 */
 uni-modal .uni-modal__hd {padding:30rpx 0;}
 uni-modal .uni-modal__title {font-size: 28rpx;color: #666666;}
-uni-modal .uni-modal__bd{font-size: 30rpx;color: #222222;paddings:0 0 30rpx 0}
+uni-modal .uni-modal__bd{font-size: 30rpx;color: #222222;paddings:0 0 30rpx 0}
+.uni-mask{z-index: 999;}
 </style>

lib/dever/config.js

@@ -14,8 +14,8 @@ const share = {
 //http request请求配置
 const request = {
 	//	服务器接口地址
-	host: "https://he.shemic.com/",
-	//host: "http://dev.shemic.com/dreamland/",
+	//host: "https://he.shemic.com/",
+	host: "http://dev.shemic.com/dreamland/",
 	
 	//	请求的参数	
 	data: {},

lib/list-cell/list-cell.vue

@@ -0,0 +1,122 @@
+<template>
+	<view
+		class="tui-cell-class tui-list-cell"
+		:class="{'tui-cell-last': last, 'tui-line-left': lineLeft, 'tui-line-right': lineRight, 'tui-radius': radius }"
+		:hover-class="hover ? 'tui-cell-hover' : ''"
+		:style="{ background: bgcolor, fontSize: size + 'rpx', color: color, padding: padding}"
+		:hover-stay-time="150"
+		@tap="handleClick"
+	>
+		<slot></slot>
+		<image src="/static/images/common/icon_jump_black3.png" class="arrow" v-if="arrow"></image>
+	</view>
+</template>
+
+<script>
+export default {
+	name: "ListCell",
+	props: {
+		 //是否有箭头
+		arrow: {
+			type: Boolean,
+			default: false
+		},
+		//是否有点击效果
+		hover: {
+			type: Boolean,
+			default: false
+		},
+		lineLeft:{
+			type: Boolean,
+			default: true
+		},
+		lineRight:{
+			type: Boolean,
+			default: false
+		},
+		padding:{
+			type:String,
+			default:"30rpx"
+		},
+		last: {
+			type: Boolean,
+			default: false //最后一条数据隐藏线条
+		},
+		radius:{
+			type:Boolean,
+			default:false
+		},
+		bgcolor: {
+			type: String,
+			default: "#fff" //背景颜色
+		},
+		size: {
+			type: Number,
+			default: 28 //字体大小
+		},
+		color: {
+			type: String,
+			default: "#343434" //字体颜色
+		},
+		index: {
+			type: Number,
+			default: 0
+		}
+	},
+	methods: {
+		handleClick() {
+			this.$emit('click', {
+				index: this.index
+			});
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.tui-list-cell {
+	position: relative;
+	width: 100%;
+	box-sizing: border-box;
+	overflow: hidden;
+	display: flex;
+	align-items: center;
+}
+.tui-radius {
+	border-radius: 12rpx;
+	overflow: hidden;
+}
+
+.tui-cell-hover {
+	background: #f7f7f9 !important;
+}
+
+.tui-list-cell::after {
+	content: '';
+	position: absolute;
+	border-bottom: 1rpx solid rgba($color: $border-color, $alpha: 0.3);
+	bottom: 0;
+	right: 0;
+	left: 0;
+}
+
+.tui-line-left::after {
+	left: 30rpx !important;
+}
+
+.tui-line-right::after {
+	right: 30rpx !important;
+}
+
+.tui-cell-last::after {
+	border-bottom: 0 !important;
+}
+
+.arrow {
+	width: 20rpx;
+	height: 32rpx;
+	position: relative;
+	flex-shrink: 0;
+	margin-left: 10rpx;
+}
+</style>

lib/modal/modal.vue

@@ -0,0 +1,393 @@
+<template>
+	<view @touchmove.stop.prevent>
+		<view class="modal-box" :style="{width:width,padding:padding,borderRadius:radius}" :class="[(fadein || show)?'modal-normal':'modal-scale',show?'modal-show':'']">
+			<view v-if="custom">
+				<slot></slot>
+			</view>
+			<view v-else>
+				<view class="modal-title" v-if="title">{{title}}</view>
+				<view class="modal-content" :class="[title?'':'mtop']" :style="{color:color,fontSize:size+'rpx'}">
+					<slot></slot>
+				</view>
+				<view class="modalBtn-box" :class="[button.length!=2?'flex-column':'']">
+					<block v-for="(item,index) in button" :key="index">
+						<button class="modal-btn" 
+								:class="[
+										''+(item.type || 'primary')+(item.plain?'-outline':''),
+										button.length!=2?'btn-width':'',
+										button.length>2?'mbtm':'',
+										shape=='circle'?'circle-btn':'',
+										'btn-' + (item.size || 'default'),										
+									]"
+								:hover-class="''+(item.plain?'outline':(item.type || 'primary'))+'-hover'" :data-index="index" @tap="handleClick">{{item.text || "确定"}}</button>
+					</block>
+				</view>
+			</view>
+		</view>
+		<view class="modal-mask" :class="[show?'mask-show':'']" @tap="handleClickCancel"></view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "Modal",
+		props: {
+			//是否显示
+			show: {
+				type: Boolean,
+				default: false
+			},
+			//自定义modal体
+			custom: {
+				type: Boolean,
+				default: false
+			},
+			width: {
+				type: String,
+				default: "80%"
+			},
+			padding: {
+				type: String,
+				default: "30rpx"
+			},
+			radius: {
+				type: String,
+				default: "12rpx"
+			},
+			//标题
+			title: {
+				type: String,
+				default: ""
+			},
+			//内容
+			content: {
+				type: String,
+				default: ""
+			},
+			//内容字体颜色
+			color: {
+				type: String,
+				default: "#343434"
+			},
+			//内容字体大小 rpx
+			size: {
+				type: Number,
+				default: 28
+			},
+			//形状 circle, square
+			shape: {
+				type: String,
+				default: 'square'
+			},
+			button: {
+				type: Array,
+				default: function() {
+					return [{
+						text: "取消",
+						type: "red",
+						plain: true //是否空心
+					}, {
+						text: "确定",
+						type: "red",
+						plain: false
+					}]
+				}
+			},
+			//点击遮罩 是否可关闭
+			maskClosable: {
+				type: Boolean,
+				default: true
+			},
+			//淡入效果，自定义弹框插入input输入框时传true
+			fadein: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+
+			};
+		},
+		methods: {
+			handleClick(e) {
+				if (!this.show) return;
+				const dataset = e.currentTarget.dataset;
+				this.$emit('click', {
+					index: Number(dataset.index)
+				});
+			},
+			handleClickCancel() {
+				if (!this.maskClosable) return;
+				this.$emit('cancel');
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.modal-box {
+		position: fixed;
+		left: 50%;
+		top: 50%;
+		margin: auto;
+		background: #fff;
+		z-index: 1000;
+		transition: all 0.3s ease-in-out;
+		opacity: 0;
+		box-sizing: border-box;
+		visibility: hidden;
+	}
+
+	.modal-scale {
+		transform: translate(-50%, -50%) scale(0);
+	}
+
+	.modal-normal {
+		transform: translate(-50%, -50%) scale(1);
+	}
+
+	.modal-show {
+		opacity: 1;
+		visibility: visible;
+	}
+
+	.modal-mask {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: rgba(0, 0, 0, 0.6);
+		z-index: 999;
+		transition: all 0.3s ease-in-out;
+		opacity: 0;
+		visibility: hidden;
+	}
+
+	.mask-show {
+		visibility: visible;
+		opacity: 1;
+	}
+
+	.modal-title {
+		text-align: center;
+		font-size: 34rpx;
+		color: #333;
+		padding-top: 20rpx;
+		font-weight: bold;
+	}
+
+	.modal-content {
+		color: #999;
+		font-size: 28rpx;
+		padding-top: 20rpx;
+		padding-bottom: 60rpx;
+	}
+
+	.mtop {
+		margin-top: 30rpx;
+	}
+
+	.mbtm {
+		margin-bottom: 30rpx;
+	}
+
+	.modalBtn-box {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between
+	}
+
+	.flex-column {
+		flex-direction: column;
+	}
+
+	.modal-btn {
+		width: 46%;
+		height: 68rpx;
+		line-height: 68rpx;
+		position: relative;
+		border-radius: 60rpx;
+		font-size: 28rpx;
+		overflow: visible;
+		margin-left: 0;
+		margin-right: 0;
+		
+		&.btn-default {
+			font-size: 28rpx;
+		}
+		
+		&.btn-lg {
+			font-size: 32rpx;
+		}
+		
+		&.btn-sm {
+			font-size: 24rpx;
+		}
+	}
+
+	.modal-btn::after {
+		content: "";
+		position: absolute;
+		width: 200%;
+		height: 200%;
+		-webkit-transform-origin: 0 0;
+		transform-origin: 0 0;
+		-webkit-transform: scale(0.5, 0.5);
+		transform: scale(0.5, 0.5);
+		left: 0;
+		top: 0;
+		border-radius: 60rpx;
+	}
+
+	.btn-width {
+		width: 80% !important;
+	}
+
+	.primary {
+		background: #97AF13;
+		color: #fff;
+	}
+
+	.primary-hover {
+		background: #97AF13;
+		color: #e5e5e5;
+	}
+
+	.primary-outline {
+		color: #97AF13;
+		background: none;
+	}
+
+	.primary-outline::after {
+		border: 1px solid #97AF13;
+	}
+
+	.danger {
+		background: #ed3f14;
+		color: #fff;
+	}
+
+	.danger-hover {
+		background: #d53912;
+		color: #e5e5e5;
+	}
+
+	.danger-outline {
+		color: #ed3f14;
+		background: none;
+	}
+
+	.danger-outline::after {
+		border: 1px solid #ed3f14;
+	}
+
+	.red {
+		background: #e41f19;
+		color: #fff;
+	}
+
+	.red-hover {
+		background: #c51a15;
+		color: #e5e5e5;
+	}
+
+	.red-outline {
+		color: #e41f19;
+		background: none;
+	}
+
+	.red-outline::after {
+		border: 1px solid #e41f19;
+	}
+
+	.warning {
+		background: #ff7900;
+		color: #fff;
+	}
+
+	.warning-hover {
+		background: #e56d00;
+		color: #e5e5e5;
+	}
+
+	.warning-outline {
+		color: #ff7900;
+		background: none;
+	}
+
+	.warning-outline::after {
+		border: 1px solid #ff7900;
+	}
+
+	.green {
+		background: #19be6b;
+		color: #fff;
+	}
+
+	.green-hover {
+		background: #16ab60;
+		color: #e5e5e5;
+	}
+
+	.green-outline {
+		color: #19be6b;
+		background: none;
+	}
+
+	.green-outline::after {
+		border: 1px solid #19be6b;
+	}
+
+	.white {
+		background: #fff;
+		color: #333;
+	}
+
+	.white-hover {
+		background: #f7f7f9;
+		color: #666;
+	}
+
+	.white-outline {
+		color: #333;
+		background: none;
+	}
+
+	.white-outline::after {
+		border: 1px solid #333;
+	}
+
+	.gray {
+		background: #ededed;
+		color: #999;
+	}
+
+	.gray-hover {
+		background: #d5d5d5;
+		color: #898989;
+	}
+
+	.gray-outline {
+		color: #999;
+		background: none;
+	}
+
+	.gray-outline::after {
+		border: 1px solid #999;
+	}
+
+	.outline-hover {
+		opacity: 0.6;
+	}
+
+	.circle-btn {
+		border-radius: 40rpx !important;
+	}
+
+	.circle-btn::after {
+		border-radius: 80rpx !important;
+	}
+</style>

pages.json

@@ -23,7 +23,8 @@
 		},
 		{
 			"path": "pages/user/index",
-			"style": {
+			"style": {
+				"navigationBarTitleText": "个人资料",
 				"app-plus": {
 					"titleNView": false,
 					"bounce": "none",
@@ -164,13 +165,13 @@
 				"pagePath": "pages/index/index",
 				"iconPath": "static/images/tabBar/index.png",
 				"selectedIconPath": "static/images/tabBar/index_selected.png",
-				"text": "家园"
+				"text": "我的"
 			},
 			{
 				"pagePath": "pages/index/list",
 				"iconPath": "static/images/tabBar/take.png",
 				"selectedIconPath": "static/images/tabBar/take_selected.png",
-				"text": "阅览"
+				"text": "发现"
 			}/*,
 			{
 				"pagePath": "pages/user/index",

pages/dream/index.vue

@@ -1,36 +1,47 @@
-<template>
-	<gracePage :customHeader="false">
+<template>
+	<gracePage :customHeader="false">
 		<view class="container" slot="gBody">
-			<ourLoading isFullScreen :active="pageLoading" :text="pageLoadingText" />
-			<view class="wrap2" @click="showBuy">
-				<graceBorderRadius :style="fetch.button.bgcolor" :radius="['20rpx','20rpx','20rpx','0rpx']">
-					<text class="demo2 grace-white" :style="fetch.button.color">{{fetch.info.name}}</text>
-				</graceBorderRadius>
-			</view>
-			<swiper class="cover" @change="change" :circular="swiper.circular">
-				<swiper-item v-for="(v, k) in fetch.info.pic_bg" :key="k">
-					<view class="default">
-						<image :src="v" mode="widthFix" style="height:auto;"></image>
-					</view>
-				</swiper-item>
-			</swiper>
-			
-			<view class="btn-ctrls">
-				<view class="btn-title" v-if="fetch.info.uid > 0" style="display: none;">
-					<text class="grace-title-text grace-black">{{fetch.info.user.username}}创作</text>
+			<swiper class="banner-swiper" autoplay :interval="5000" :duration="1000" @change="change" :circular="swiper.circular">
+				<swiper-item class="banner-swiper-item" v-for="(v, k) in fetch.info.pic_bg" :key="k">
+					<image :src="v" mode="widthFix"></image>
+				</swiper-item>
+			</swiper>
+			<view class="content">
+				<!-- section-1 begin -->
+				<view class="section-1">
+					<navigator class="item">
+						<image :src="fetch.info.pic_cover" mode="widthFix"></image>
+						<view class="wenyue-font">{{fetch.info.name}}</view>
+						<view class="text-color-assist">{{fetch.info.desc}}</view>
+					</navigator>
+					<view class="item" v-if="fetch.info.uid > 0">
+						<image :src="fetch.info.user.avatar" mode="widthFix" class="avatar"></image>
+						<view class="wenyue-font">{{fetch.info.user.username}}</view>
+						<view class="text-color-assist">{{fetch.info.user.author}}</view>
+					</view>
+				</view>
+				<!-- section-2 end -->
+				<!-- section-2 begin -->
+				<view class="section-2">
+					<view class="item" v-for="(v, k) in fetch.button" :key="k">
+						<view class="title">
+							<image :src="v.icon" v-if="v.icon" style="width:33px;height:33px;"></image>
+							<view>{{v.name}}</view>
+						</view>
+						<view class="tips" v-if="v.info">{{v.info}}</view>
+					</view>
+				</view>
+				<!-- section-2 end -->
+				<view class="section-3">
+					<view class="my-integral">
+						<view class="tips">
+							<rich-text :nodes="fetch.info.content"></rich-text>
+						</view>
+					</view>
+					
 				</view>
-				
-				<view class="btn-wrapper space-between" v-if="fetch.button" :style="fetch.button.bgcolor">
-					<view class="button primary big" :style="fetch.button.color" v-if="fetch.button.name && fetch.button.name[0]" @click="goView">{{fetch.button.name[0]}}</view>
-					<block v-if="fetch.button.name && fetch.button.name[1]">
-						<text class="spliter"></text>
-						<view class="button primary big" :style="fetch.button.color" @click="goRanking">{{fetch.button.name[1]}}</view>
-					</block>
-				</view>
-				<view class="dots">
-					<text :class="swiper.index == k ? 'cur' : ''" v-for="(v, k) in fetch.info.pic_bg" :key="k"></text>
-				</view>
 			</view>
+			
 			<view v-if="buyState">
 				<buy :id="id" :bgcolor="fetch.button.bgcolor" :color="fetch.button.color" :code="fetch.code" :name="fetch.info.name" @hideBuy="hideBuy" @share="share" @view="view"></buy>
 			</view>
@@ -43,14 +54,14 @@
 				<info :id="id" :bgcolor="fetch.button.bgcolor" :color="fetch.button.color" @hideInfo="hideInfo"></info>
 			</view>
 			
-			<dever-share ref="share" :id="id" :code="fetch.code" :data="fetch.share" v-if="fetch.share && fetch.code"></dever-share>
-			
-			<view class="mask buy-layer" v-if="inviteState && fetch.share_user && fetch.share_user.code">
-			  <view class="buytip-layer layer " catchtap="handleStop">
-				<view class="buy-tit buy-user"><image :src="fetch.share_user.avatar" mode="widthFix"></image></view>
+			<dever-share ref="share" :id="id" :code="fetch.code" :data="fetch.share" v-if="fetch.share && fetch.code"></dever-share>
+			
+			<view class="mask buy-layer" v-if="inviteState && fetch.share_user && fetch.share_user.code">
+			  <view class="buytip-layer layer " catchtap="handleStop">
+				<view class="buy-tit buy-user"><image :src="fetch.share_user.avatar" mode="widthFix"></image></view>
 				<view class="buy-tit" style="margin-top: 10rpx;">{{fetch.share_user.username}}赠送{{fetch.info.ticket_name}}</view>
-				<view v-if="fetch.share_user.ticket && fetch.share_user.ticket.desc">
-					<text class="p">“{{fetch.share_user.ticket.desc}}”</text>
+				<view v-if="fetch.share_user.ticket && fetch.share_user.ticket.desc">
+					<text class="p">“{{fetch.share_user.ticket.desc}}”</text>
 					<text class="p">—“他”是这么说的</text>
 				</view>
 				
@@ -62,521 +73,302 @@
 				<view v-if="fetch.share_ticket">
 					<text class="p">“{{fetch.share_ticket}}”</text>
 					<text class="p">—你已拥有{{fetch.info.ticket_name}}，你这么回复“他”吧</text>
-				</view>
-
-				<view class="btn-wrapper" v-if="!fetch.share_ticket">
-				  <view class="button cancel" @click="hideInvite">不要
-				  </view>
-				  <view class="button primary" :style="fetch.button.bgcolor" @click="saveTicket(fetch.share_user.code)">收下
-					<button formType="submit"></button>
-				  </view>
+				</view>
+			
+				<view class="btn-wrapper" v-if="!fetch.share_ticket">
+				  <view class="button cancel" @click="hideInvite">不要
+				  </view>
+				  <view class="button primary" :style="fetch.button.bgcolor" @click="saveTicket(fetch.share_user.code)">收下
+					<button formType="submit"></button>
+				  </view>
 				</view>
 				
 				<view class="btn-wrapper" v-if="fetch.share_ticket">
 				  <view class="button primary" style="margin: 0 auto;" @click="hideInvite" :style="fetch.button.bgcolor">关闭</view>
-				</view>
-				
-			  </view>
-			</view>
-		</view>
-	</gracePage>
-</template>
-<script>
-import buy from "@/pages/dream/buy.vue";
-import ranking from "@/pages/dream/ranking.vue";
-import info from "@/pages/dream/info.vue";
-import deverShare from '@/lib/dever/components/share.vue';
-export default{
-	data() {
-		return {
-			id : 0,
-			swiper : {
-				index : 0,
-				circular : true,
-			},
-			fetch: {
-				is_read : false,
-				is_ticket : false,
-				info : {},
-				button : {},
-				code : '',
-				share : {},
-			},
-			buyState : false,
-			rankingState : false,
-			infoState : false,
-			inviteState : true,
-		}
-	},
-	onLoad(option) {
-		this.id = option.id;
-		this.code = option.code;
-	},
-	onShow() {
-		if (this.id || this.code) {
-			this.getData();
-		}
-	},
-	// 重新加载
-	onPullDownRefresh: function() {
-		this.getData();
-	},
-	methods:{
-		change : function(e) {
-			this.swiper.index = e.detail.current;
-		},
-		getData : function() {
-			var url = this.Dever.host + '/pages/dream/index';
-			this.Dever.get(this, 'app/collection/?l=api.getInfo', {id:this.id,code:this.code,url:url}, function(t) {
-				uni.setNavigationBarTitle({
-					title:t.info.name
-				});
-			});
-		},
-		goView : function() {
-			//是否登录
-			var token = this.Dever.getToken();
-			if (!token) {
-				var self = this;
-				this.Dever.alert('您还未登录，请先登录', 'none', function() {
-					if (self.id) {
-						self.Dever.login = 'user/login?id=' + self.id;
-					} else if (self.code) {
-						self.Dever.login = 'user/login?code=' + self.code;
-					}
-					
-					self.Dever.checkLogin();
-				});
+				</view>
 				
-				return;
-			}
-			//是否已经有权限阅读
-			if (!this.fetch.is_read) {
-				this.showBuy();
-			} else {
-				this.view();
-			}
-		},
-		view : function() {
-			this.Dever.location('dream/view?code='+this.fetch.code + '&name=' + this.fetch.info.name);
-		},
-		showInvite : function() {
-			this.inviteState = true;
-		},
-		hideInvite : function() {
-			this.inviteState = false;
-		},
-		saveTicket : function(code) {
-			var self = this;
-			this.Dever.post('app/user/?l=api.saveTicket', {code:code}, function(t) {
-				self.Dever.alert('已收下');
-				self.hideInvite();
-			});
-		},
-		showBuy : function() {
-			if (this.fetch.is_ticket) {
-				this.buyState = true;
+			  </view>
+			</view>
+		</view>
+	</gracePage>
+</template>
+
+<script>
+	import buy from "@/pages/dream/buy.vue";
+	import ranking from "@/pages/dream/ranking.vue";
+	import info from "@/pages/dream/info.vue";
+	import deverShare from '@/lib/dever/components/share.vue';
+	export default {
+		data() {
+			return {
+				swipers: [
+					"https://go.cdn.heytea.com/storage/ad/2020/05/21/bfd57914d80d4671b19f5d0ccc176cd5.jpg",
+					"https://go.cdn.heytea.com/storage/ad/2020/05/24/49f9b50738dd47878cf1ab54c2eee2e0.jpg",
+					"https://go.cdn.heytea.com/storage/ad/2020/05/01/e1c6915022c849fd9492377021aef454.jpg",
+					"https://go.cdn.heytea.com/storage/ad/2020/04/27/db60b797c1cd4afabe9666e7df958ffd.jpg",
+					"https://go.cdn.heytea.com/storage/ad/2020/05/21/4ba53dda599345bdaf28a08420dd1b6f.jpg"
+				],
+				id : 0,
+				swiper : {
+					index : 0,
+					circular : true,
+				},
+				fetch: {
+					is_read : false,
+					is_ticket : false,
+					info : {},
+					button : {},
+					code : '',
+					share : {},
+				},
+				buyState : false,
+				rankingState : false,
+				infoState : false,
+				inviteState : true,
 			}
 		},
-		hideBuy : function() {
-			this.buyState = false;
+		onLoad(option) {
+			this.id = option.id;
+			this.code = option.code;
 		},
-		hideRanking : function() {
-			this.rankingState = false;
-		},
-		goRanking : function() {
-			this.rankingState = true;
+		onShow() {
+			if (this.id || this.code) {
+				this.getData();
+			}
 		},
-		goInfo : function() {
-			this.infoState = true;
+		// 重新加载
+		onPullDownRefresh: function() {
+			this.getData();
 		},
-		hideInfo : function() {
-			this.infoState = false;
+		methods: {
+			change : function(e) {
+				this.swiper.index = e.detail.current;
+			},
+			getData : function() {
+				var url = this.Dever.host + '/pages/dream/index';
+				this.Dever.get(this, 'app/collection/?l=api.getInfo', {id:this.id,code:this.code,url:url}, function(t) {
+					uni.setNavigationBarTitle({
+						title:t.info.name
+					});
+				});
+			},
+			goView : function() {
+				//是否登录
+				var token = this.Dever.getToken();
+				if (!token) {
+					var self = this;
+					this.Dever.alert('您还未登录，请先登录', 'none', function() {
+						if (self.id) {
+							self.Dever.login = 'user/login?id=' + self.id;
+						} else if (self.code) {
+							self.Dever.login = 'user/login?code=' + self.code;
+						}
+						
+						self.Dever.checkLogin();
+					});
+					
+					return;
+				}
+				//是否已经有权限阅读
+				if (!this.fetch.is_read) {
+					this.showBuy();
+				} else {
+					this.view();
+				}
+			},
+			view : function() {
+				this.Dever.location('dream/view?code='+this.fetch.code + '&name=' + this.fetch.info.name);
+			},
+			showInvite : function() {
+				this.inviteState = true;
+			},
+			hideInvite : function() {
+				this.inviteState = false;
+			},
+			saveTicket : function(code) {
+				var self = this;
+				this.Dever.post('app/user/?l=api.saveTicket', {code:code}, function(t) {
+					self.Dever.alert('已收下');
+					self.hideInvite();
+				});
+			},
+			showBuy : function() {
+				if (this.fetch.is_ticket) {
+					this.buyState = true;
+				}
+			},
+			hideBuy : function() {
+				this.buyState = false;
+			},
+			hideRanking : function() {
+				this.rankingState = false;
+			},
+			goRanking : function() {
+				this.rankingState = true;
+			},
+			goInfo : function() {
+				this.infoState = true;
+			},
+			hideInfo : function() {
+				this.infoState = false;
+			},
+			share : function() {
+				this.$refs.share.open();
+			}
 		},
-		share : function() {
-			this.$refs.share.open();
-		}
-	},
-	components:{
-		buy,ranking,info,deverShare
-	}
-}
-</script>
-<style>
-.btn-title {
-	text-align: center;
-	font-size: 24rpx;
-	font-weight: bold;
+		components:{
+			buy,ranking,info,deverShare
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	page {
+		max-height: 100%;
+	}
+	
+	.banner-swiper {
+		width: 100%;
+		height: 600rpx;
+		
+		.banner-swiper-item {
+			image {
+				width: 100%;
+			}
+		}
+	}
+	
+	.content {
+		width: 100%;
+		padding: 0 30rpx;
+		position: relative;
+	}
 	
-}
-.btn-title .grace-title-text {
-	border-bottom: 1px solid #bababa;
-	color:#F5F6F8;
-}
-.wrap2{
-	width:220rpx;
-	position: absolute;
-	right: 20rpx;
-	top: 20rpx;
-	z-index: 10;
-}
-.demo2{line-height:66rpx; display:block; width:100%; text-align:center; font-size:28rpx;}
-.container {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  left: 0;
-  top: 0;
-  overflow: hidden;
-}
-.btn-wrapper {
-  justify-content: space-around;
-  width: 100%;
-}
-
-.button {
-  height: 80rpx;
-  border: 1rpx solid #cc1619;
-  color: #cc1619;
-  font-size: 30rpx;
-  min-width: 300rpx;
-  border-radius: 40rpx;
-  text-align: center;
-  line-height: 80rpx;
-  display: block;
-  position: relative;
-}
-.button>button{
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  opacity: 0;
-}
-
-.button.big {
-  width: 630rpx;
-}
-
-.button.primary {
-  background-color: #cc1619;
-  color: #fff;
-}
-
-.button.blk {
-  background-color: #000;
-  color: #fff;
-  border-color: #000;
-}
-.cover {
-  width: 750rpx;
-  height: 100%;
-}
-
-swiper-item>view{
-  height: 100%;
-}
-swiper-item image{
-  width: 750rpx;
-  height: 100%;
-}
-
-.btn-ctrls {
-  position: absolute;
-  bottom: 40rpx;
-  left: 200rpx;
-  right: 200rpx;
-}
-
-.btn-ctrls .btn-wrapper {
-  margin-top: 20rpx;
-  width: 350rpx;
-  display: flex;
-  align-items: center;
-  border-radius: 5rpx;
-  background-color: #000;
-}
-
-.btn-ctrls .btn-wrapper .button{
-  border-radius: 0;
-  min-width: 100rpx;
-  background-color: transparent;
-  border: 0;
-  flex: 1;
-}
-.btn-ctrls .btn-wrapper .spliter{
-  flex-shrink: 0;
-  width: 1rpx;
-  background: #fff;
-  height: 40rpx;
-  color: #333;
-}
-.btn-ctrls .btn-wrapper .button.small{
-  min-width: 150rpx;
-}
-.btn-ctrls .btn-wrapper .button.big{
-  width: 420rpx;
-}
-.btn-ctrls .dots{
-  display: flex;
-  justify-content: center;
-  margin-top: 20rpx;
-}
-.btn-ctrls .dots text{
-  display: block;
-  width: 16rpx;
-  height: 8rpx;
-  background: rgba(255, 255, 255, 0.5);
-  border-radius: 8rpx;
-  margin: 0 5rpx;
-}
-.btn-ctrls .dots text.cur{
-  background-color: rgba(255, 255, 255, 1);
-}
-.btn-ctrls .scorelist{
-  text-align: center;
-}
-.btn-ctrls .scorelist navigator{
-  display: inline-block;
-  font-size: 26rpx;
-  color: #FFFFFF;
-  text-decoration: underline;
-}
-
-.space-between{
-  justify-content: space-between;
-}
-.btn-wrapper{
-  display: flex;
-}
-.ios-pay{
-  display: none;
-}
-
-.pulloff{
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  z-index: 20;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.pulloff>view{
-  background-color: rgba(0, 0, 0, 0.65);
-  padding: 53rpx 53rpx 53rpx 74rpx;
-  border-radius: 10rpx;
-  text-align: center;
-}
-.pulloff>view text{
-  color: #fff;
-  font-size: 30rpx;
-  line-height: 53rpx;
-}
-
-.preselltip .layer{
-  border-radius: 5rpx;
-  padding:70rpx 40rpx;
-}
-.preselltip .layer .tit{
-  font-size: 24rpx;
-  text-align: center;
-  margin: 16rpx 0 80rpx;
-}
-.preselltip .layer .btn-wrapper{
-  position: absolute;
-  bottom: 0;
-  left: 0;
-}
-.preselltip .layer .btn-wrapper .button{
-  width: 100%;
-  border-radius: 0 0 5rpx 5rpx;
-}
-
-.recharge-layer{
-  padding: 50rpx 55rpx 62rpx;
-  background-color: #fff;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  transform: translateY(100%);
-  transition-property: transform;
-  transition-duration: 0.3s;
-  transition-timing-function: ease-in;
-}
-.recharge-layer.slidein{
-  transform: translateY(0);
-}
-.recharge-layer .tit{
-  font-weight: bolder;
-  font-size: 36rpx;
-  margin: 0 0 40rpx;
-}
-.recharge-layer .msg{
-  font-size: 22rpx;
-  line-height: 36rpx;
-  width: 640rpx;
-  margin: 0 auto 47rpx;
-}
-.recharge-layer input{
-  width: 640rpx;
-  height: 88rpx;
-  border: 1rpx solid #EEEEEE;
-  border-radius: 5rpx;
-  box-sizing: border-box;
-  padding: 0 25rpx;
-  font-size: 24rpx;
-}
-.recharge-layer .errtip {
-  color: #d1171a;
-  font-size: 24rpx;
-  margin: 21rpx 0 0;
-  height: 34rpx;
-}
-.recharge-layer .btn-wrapper{
-  display: flex;
-  justify-content: space-between;
-  padding-top: 20rpx;
-}
-.recharge-layer .btn-wrapper .button{
-  border: 0;
-  min-width: 0;
-  border-radius: 5rpx;
-  box-sizing: border-box;
-  color: #999999;
-  width: 284rpx;
-}
-.recharge-layer .btn-wrapper .button.primary{
-  border:0;
-  color: #fff;
-}
-.recharge-layer .btn-wrapper .button.cancel{
-  border:0;
-  background-color: #CCCCCC;
-  color: #fff;
-}
-.recharge-mask{
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  left: 0;
-  top: 0;
-  display: none;
-}
-
-.mask {
-  position: fixed;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  z-index:100;
-}
-
-.mask .layer {
-  width: 570rpx;
-  box-sizing: border-box;
-  padding: 70rpx 60rpx;
-  background: #fff;
-  border-radius: 10rpx;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%,-50%);
-}
-
-.mask .layer .tit {
-  text-align: center;
-  font-size: 40rpx;
-  margin: 16rpx 0 60rpx;
-}
-
-.mask .layer input {
-  border-radius: 10rpx;
-  border: 1rpx solid #999;
-  height: 88rpx;
-  line-height: 88rpx;
-  padding: 0 28rpx;
-  box-sizing: border-box;
-  font-size: 24rpx;
-}
-
-.mask .layer .errtip {
-  color: #d1171a;
-  text-align: center;
-  font-size: 24rpx;
-  margin: 21rpx 0;
-  height: 34rpx;
-}
-
-.mask .layer .btn-wrapper {
-  padding-top: 30rpx;
-}
-
-.buytip{
-  font-size: 24rpx;
-  color: #999999;
-  text-decoration: underline;
-  padding-bottom: 40rpx;
-}
-
-.p{
-  font-size: 28rpx;
-  text-align: justify;
-  line-height: 40rpx;
-  margin-bottom: 12rpx;
-  display: block;
-  box-sizing: border-box;
-}
-.buy-tit{
-  font-size: 40rpx;
-  /* font-weight: bolder; */
-  text-align: center;
-  margin-bottom: 40rpx;
-}
-.mask .buytip-layer{
-  padding: 60rpx; 
-}
-
-.buy-layer .btn-wrapper{
-  display: flex;
-  justify-content: space-between;
-  padding-top: 20rpx;
-}
-.buy-layer .btn-wrapper .button{
-  border: 0;
-  min-width: 0;
-  box-sizing: border-box;
-  color: #999999;
-  width: 200rpx;
-  border-radius: 5rpx;
-}
-.buy-layer .btn-wrapper .button.primary{
-  border:0;
-  color: #fff;
-}
-.buy-layer .btn-wrapper .button.cancel{
-  border:0;
-  background-color: #CCCCCC;
-  color: #fff;
-}
-.buy-user {
-	width:150rpx;
-	height:150rpx;
-	border-radius: 50%; 
-	object-fit: cover; 
-	object-position: center;
-	position: absolute;
-	top: -16%;
-	left: 208rpx;
-}
-.buy-user image {
-	border-radius: 50%; 
-}
-</style>
+	.section-1 {
+		position: relative;
+		background-color: $bg-color-white;
+		margin-top: -60rpx;
+		border-radius: $border-radius-lg;
+		padding: 60rpx 0;
+		display: flex;
+		margin-bottom: 30rpx;
+		box-shadow: $box-shadow;
+		
+		.item {
+			flex: 1;
+			flex-shrink: 0;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			position: relative;
+			
+			&:nth-child(1):after {
+				content: '';
+				position: absolute;
+				right: 0;
+				top: 0;
+				bottom: 0;
+				width: 2rpx;
+				background-color: $border-color;
+			}
+			
+			image {
+				width: 100rpx;
+				margin-bottom: 20rpx;
+			}
+			
+			.wenyue-font {
+				font-size: 48rpx;
+				margin-bottom: 10rpx;
+			}	
+		}
+	}
+	
+	.section-2 {
+		display: flex;
+		justify-content: space-between;
+		margin-bottom: 30rpx;
+		
+		.item {
+			width: 335rpx;
+			background-color: #EAEBEC;
+			padding: $spacing-row-lg 0;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			border-radius: $border-radius-lg;
+			
+			.title {
+				width: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-size: $font-size-lg;
+				
+				image {
+					width: 60rpx;
+					height: 60rpx;
+					margin-right: 10rpx;
+				}
+			}
+			
+			.tips {
+				color: $text-color-assist;
+				font-size: $font-size-base;
+			}
+		}
+	}
+	
+	.section-3 {
+		margin-bottom: 30rpx;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		font-size: $font-size-base;
+		color: $text-color-assist;
+		padding: 0 10rpx;
+		
+		.my-integral {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			
+			.integrals {
+				display: flex;
+				align-items: center;
+				font-size: $font-size-lg;
+				color: $text-color-base;
+				margin-bottom: 10rpx;
+				
+				.neutra-font {
+					margin-left: 10rpx;
+					font-size: 42rpx;
+				}
+			}
+		}
+		
+		.my-code {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			padding: 0 30rpx;
+			position: relative;
+			
+			image {
+				width: 60rpx;
+				height: 60rpx;
+				margin-bottom: $spacing-col-sm;
+			}
+			
+			&:before {
+				content: " ";
+				position: absolute;
+				left: 0;
+				top: 0;
+				bottom: 0;
+				border-left: 1rpx solid rgba($color: $border-color, $alpha: 0.6);
+			}
+		}
+	}
+</style>

pages/dream/index_old.vue

@@ -0,0 +1,582 @@
+<template>
+	<gracePage :customHeader="false">
+		<view class="container" slot="gBody">
+			<ourLoading isFullScreen :active="pageLoading" :text="pageLoadingText" />
+			<view class="wrap2" @click="showBuy">
+				<graceBorderRadius :style="fetch.button.bgcolor" :radius="['20rpx','20rpx','20rpx','0rpx']">
+					<text class="demo2 grace-white" :style="fetch.button.color">{{fetch.info.name}}</text>
+				</graceBorderRadius>
+			</view>
+			<swiper class="cover" @change="change" :circular="swiper.circular">
+				<swiper-item v-for="(v, k) in fetch.info.pic_bg" :key="k">
+					<view class="default">
+						<image :src="v" mode="widthFix" style="height:auto;"></image>
+					</view>
+				</swiper-item>
+			</swiper>
+			
+			<view class="btn-ctrls">
+				<view class="btn-title" v-if="fetch.info.uid > 0" style="display: none;">
+					<text class="grace-title-text grace-black">{{fetch.info.user.username}}创作</text>
+				</view>
+				
+				<view class="btn-wrapper space-between" v-if="fetch.button" :style="fetch.button.bgcolor">
+					<view class="button primary big" :style="fetch.button.color" v-if="fetch.button.name && fetch.button.name[0]" @click="goView">{{fetch.button.name[0]}}</view>
+					<block v-if="fetch.button.name && fetch.button.name[1]">
+						<text class="spliter"></text>
+						<view class="button primary big" :style="fetch.button.color" @click="goRanking">{{fetch.button.name[1]}}</view>
+					</block>
+				</view>
+				<view class="dots">
+					<text :class="swiper.index == k ? 'cur' : ''" v-for="(v, k) in fetch.info.pic_bg" :key="k"></text>
+				</view>
+			</view>
+			<view v-if="buyState">
+				<buy :id="id" :bgcolor="fetch.button.bgcolor" :color="fetch.button.color" :code="fetch.code" :name="fetch.info.name" @hideBuy="hideBuy" @share="share" @view="view"></buy>
+			</view>
+			
+			<view v-if="rankingState">
+				<ranking :id="id" :bgcolor="fetch.button.bgcolor" :color="fetch.button.color" @hideRanking="hideRanking"></ranking>
+			</view>
+			
+			<view v-if="infoState">
+				<info :id="id" :bgcolor="fetch.button.bgcolor" :color="fetch.button.color" @hideInfo="hideInfo"></info>
+			</view>
+			
+			<dever-share ref="share" :id="id" :code="fetch.code" :data="fetch.share" v-if="fetch.share && fetch.code"></dever-share>
+			
+			<view class="mask buy-layer" v-if="inviteState && fetch.share_user && fetch.share_user.code">
+			  <view class="buytip-layer layer " catchtap="handleStop">
+				<view class="buy-tit buy-user"><image :src="fetch.share_user.avatar" mode="widthFix"></image></view>
+				<view class="buy-tit" style="margin-top: 10rpx;">{{fetch.share_user.username}}赠送{{fetch.info.ticket_name}}</view>
+				<view v-if="fetch.share_user.ticket && fetch.share_user.ticket.desc">
+					<text class="p">“{{fetch.share_user.ticket.desc}}”</text>
+					<text class="p">—“他”是这么说的</text>
+				</view>
+				
+				<view v-else>
+					<text class="p">“{{fetch.share.content}}”</text>
+					<text class="p">—{{fetch.share.title}}</text>
+				</view>
+				
+				<view v-if="fetch.share_ticket">
+					<text class="p">“{{fetch.share_ticket}}”</text>
+					<text class="p">—你已拥有{{fetch.info.ticket_name}}，你这么回复“他”吧</text>
+				</view>
+
+				<view class="btn-wrapper" v-if="!fetch.share_ticket">
+				  <view class="button cancel" @click="hideInvite">不要
+				  </view>
+				  <view class="button primary" :style="fetch.button.bgcolor" @click="saveTicket(fetch.share_user.code)">收下
+					<button formType="submit"></button>
+				  </view>
+				</view>
+				
+				<view class="btn-wrapper" v-if="fetch.share_ticket">
+				  <view class="button primary" style="margin: 0 auto;" @click="hideInvite" :style="fetch.button.bgcolor">关闭</view>
+				</view>
+				
+			  </view>
+			</view>
+		</view>
+	</gracePage>
+</template>
+<script>
+import buy from "@/pages/dream/buy.vue";
+import ranking from "@/pages/dream/ranking.vue";
+import info from "@/pages/dream/info.vue";
+import deverShare from '@/lib/dever/components/share.vue';
+export default{
+	data() {
+		return {
+			id : 0,
+			swiper : {
+				index : 0,
+				circular : true,
+			},
+			fetch: {
+				is_read : false,
+				is_ticket : false,
+				info : {},
+				button : {},
+				code : '',
+				share : {},
+			},
+			buyState : false,
+			rankingState : false,
+			infoState : false,
+			inviteState : true,
+		}
+	},
+	onLoad(option) {
+		this.id = option.id;
+		this.code = option.code;
+	},
+	onShow() {
+		if (this.id || this.code) {
+			this.getData();
+		}
+	},
+	// 重新加载
+	onPullDownRefresh: function() {
+		this.getData();
+	},
+	methods:{
+		change : function(e) {
+			this.swiper.index = e.detail.current;
+		},
+		getData : function() {
+			var url = this.Dever.host + '/pages/dream/index';
+			this.Dever.get(this, 'app/collection/?l=api.getInfo', {id:this.id,code:this.code,url:url}, function(t) {
+				uni.setNavigationBarTitle({
+					title:t.info.name
+				});
+			});
+		},
+		goView : function() {
+			//是否登录
+			var token = this.Dever.getToken();
+			if (!token) {
+				var self = this;
+				this.Dever.alert('您还未登录，请先登录', 'none', function() {
+					if (self.id) {
+						self.Dever.login = 'user/login?id=' + self.id;
+					} else if (self.code) {
+						self.Dever.login = 'user/login?code=' + self.code;
+					}
+					
+					self.Dever.checkLogin();
+				});
+				
+				return;
+			}
+			//是否已经有权限阅读
+			if (!this.fetch.is_read) {
+				this.showBuy();
+			} else {
+				this.view();
+			}
+		},
+		view : function() {
+			this.Dever.location('dream/view?code='+this.fetch.code + '&name=' + this.fetch.info.name);
+		},
+		showInvite : function() {
+			this.inviteState = true;
+		},
+		hideInvite : function() {
+			this.inviteState = false;
+		},
+		saveTicket : function(code) {
+			var self = this;
+			this.Dever.post('app/user/?l=api.saveTicket', {code:code}, function(t) {
+				self.Dever.alert('已收下');
+				self.hideInvite();
+			});
+		},
+		showBuy : function() {
+			if (this.fetch.is_ticket) {
+				this.buyState = true;
+			}
+		},
+		hideBuy : function() {
+			this.buyState = false;
+		},
+		hideRanking : function() {
+			this.rankingState = false;
+		},
+		goRanking : function() {
+			this.rankingState = true;
+		},
+		goInfo : function() {
+			this.infoState = true;
+		},
+		hideInfo : function() {
+			this.infoState = false;
+		},
+		share : function() {
+			this.$refs.share.open();
+		}
+	},
+	components:{
+		buy,ranking,info,deverShare
+	}
+}
+</script>
+<style>
+.btn-title {
+	text-align: center;
+	font-size: 24rpx;
+	font-weight: bold;
+	
+}
+.btn-title .grace-title-text {
+	border-bottom: 1px solid #bababa;
+	color:#F5F6F8;
+}
+.wrap2{
+	width:220rpx;
+	position: absolute;
+	right: 20rpx;
+	top: 20rpx;
+	z-index: 10;
+}
+.demo2{line-height:66rpx; display:block; width:100%; text-align:center; font-size:28rpx;}
+.container {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+}
+.btn-wrapper {
+  justify-content: space-around;
+  width: 100%;
+}
+
+.button {
+  height: 80rpx;
+  border: 1rpx solid #cc1619;
+  color: #cc1619;
+  font-size: 30rpx;
+  min-width: 300rpx;
+  border-radius: 40rpx;
+  text-align: center;
+  line-height: 80rpx;
+  display: block;
+  position: relative;
+}
+.button>button{
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  opacity: 0;
+}
+
+.button.big {
+  width: 630rpx;
+}
+
+.button.primary {
+  background-color: #cc1619;
+  color: #fff;
+}
+
+.button.blk {
+  background-color: #000;
+  color: #fff;
+  border-color: #000;
+}
+.cover {
+  width: 750rpx;
+  height: 100%;
+}
+
+swiper-item>view{
+  height: 100%;
+}
+swiper-item image{
+  width: 750rpx;
+  height: 100%;
+}
+
+.btn-ctrls {
+  position: absolute;
+  bottom: 40rpx;
+  left: 200rpx;
+  right: 200rpx;
+}
+
+.btn-ctrls .btn-wrapper {
+  margin-top: 20rpx;
+  width: 350rpx;
+  display: flex;
+  align-items: center;
+  border-radius: 5rpx;
+  background-color: #000;
+}
+
+.btn-ctrls .btn-wrapper .button{
+  border-radius: 0;
+  min-width: 100rpx;
+  background-color: transparent;
+  border: 0;
+  flex: 1;
+}
+.btn-ctrls .btn-wrapper .spliter{
+  flex-shrink: 0;
+  width: 1rpx;
+  background: #fff;
+  height: 40rpx;
+  color: #333;
+}
+.btn-ctrls .btn-wrapper .button.small{
+  min-width: 150rpx;
+}
+.btn-ctrls .btn-wrapper .button.big{
+  width: 420rpx;
+}
+.btn-ctrls .dots{
+  display: flex;
+  justify-content: center;
+  margin-top: 20rpx;
+}
+.btn-ctrls .dots text{
+  display: block;
+  width: 16rpx;
+  height: 8rpx;
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 8rpx;
+  margin: 0 5rpx;
+}
+.btn-ctrls .dots text.cur{
+  background-color: rgba(255, 255, 255, 1);
+}
+.btn-ctrls .scorelist{
+  text-align: center;
+}
+.btn-ctrls .scorelist navigator{
+  display: inline-block;
+  font-size: 26rpx;
+  color: #FFFFFF;
+  text-decoration: underline;
+}
+
+.space-between{
+  justify-content: space-between;
+}
+.btn-wrapper{
+  display: flex;
+}
+.ios-pay{
+  display: none;
+}
+
+.pulloff{
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.pulloff>view{
+  background-color: rgba(0, 0, 0, 0.65);
+  padding: 53rpx 53rpx 53rpx 74rpx;
+  border-radius: 10rpx;
+  text-align: center;
+}
+.pulloff>view text{
+  color: #fff;
+  font-size: 30rpx;
+  line-height: 53rpx;
+}
+
+.preselltip .layer{
+  border-radius: 5rpx;
+  padding:70rpx 40rpx;
+}
+.preselltip .layer .tit{
+  font-size: 24rpx;
+  text-align: center;
+  margin: 16rpx 0 80rpx;
+}
+.preselltip .layer .btn-wrapper{
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+.preselltip .layer .btn-wrapper .button{
+  width: 100%;
+  border-radius: 0 0 5rpx 5rpx;
+}
+
+.recharge-layer{
+  padding: 50rpx 55rpx 62rpx;
+  background-color: #fff;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  transform: translateY(100%);
+  transition-property: transform;
+  transition-duration: 0.3s;
+  transition-timing-function: ease-in;
+}
+.recharge-layer.slidein{
+  transform: translateY(0);
+}
+.recharge-layer .tit{
+  font-weight: bolder;
+  font-size: 36rpx;
+  margin: 0 0 40rpx;
+}
+.recharge-layer .msg{
+  font-size: 22rpx;
+  line-height: 36rpx;
+  width: 640rpx;
+  margin: 0 auto 47rpx;
+}
+.recharge-layer input{
+  width: 640rpx;
+  height: 88rpx;
+  border: 1rpx solid #EEEEEE;
+  border-radius: 5rpx;
+  box-sizing: border-box;
+  padding: 0 25rpx;
+  font-size: 24rpx;
+}
+.recharge-layer .errtip {
+  color: #d1171a;
+  font-size: 24rpx;
+  margin: 21rpx 0 0;
+  height: 34rpx;
+}
+.recharge-layer .btn-wrapper{
+  display: flex;
+  justify-content: space-between;
+  padding-top: 20rpx;
+}
+.recharge-layer .btn-wrapper .button{
+  border: 0;
+  min-width: 0;
+  border-radius: 5rpx;
+  box-sizing: border-box;
+  color: #999999;
+  width: 284rpx;
+}
+.recharge-layer .btn-wrapper .button.primary{
+  border:0;
+  color: #fff;
+}
+.recharge-layer .btn-wrapper .button.cancel{
+  border:0;
+  background-color: #CCCCCC;
+  color: #fff;
+}
+.recharge-mask{
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  left: 0;
+  top: 0;
+  display: none;
+}
+
+.mask {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index:100;
+}
+
+.mask .layer {
+  width: 570rpx;
+  box-sizing: border-box;
+  padding: 70rpx 60rpx;
+  background: #fff;
+  border-radius: 10rpx;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+}
+
+.mask .layer .tit {
+  text-align: center;
+  font-size: 40rpx;
+  margin: 16rpx 0 60rpx;
+}
+
+.mask .layer input {
+  border-radius: 10rpx;
+  border: 1rpx solid #999;
+  height: 88rpx;
+  line-height: 88rpx;
+  padding: 0 28rpx;
+  box-sizing: border-box;
+  font-size: 24rpx;
+}
+
+.mask .layer .errtip {
+  color: #d1171a;
+  text-align: center;
+  font-size: 24rpx;
+  margin: 21rpx 0;
+  height: 34rpx;
+}
+
+.mask .layer .btn-wrapper {
+  padding-top: 30rpx;
+}
+
+.buytip{
+  font-size: 24rpx;
+  color: #999999;
+  text-decoration: underline;
+  padding-bottom: 40rpx;
+}
+
+.p{
+  font-size: 28rpx;
+  text-align: justify;
+  line-height: 40rpx;
+  margin-bottom: 12rpx;
+  display: block;
+  box-sizing: border-box;
+}
+.buy-tit{
+  font-size: 40rpx;
+  /* font-weight: bolder; */
+  text-align: center;
+  margin-bottom: 40rpx;
+}
+.mask .buytip-layer{
+  padding: 60rpx; 
+}
+
+.buy-layer .btn-wrapper{
+  display: flex;
+  justify-content: space-between;
+  padding-top: 20rpx;
+}
+.buy-layer .btn-wrapper .button{
+  border: 0;
+  min-width: 0;
+  box-sizing: border-box;
+  color: #999999;
+  width: 200rpx;
+  border-radius: 5rpx;
+}
+.buy-layer .btn-wrapper .button.primary{
+  border:0;
+  color: #fff;
+}
+.buy-layer .btn-wrapper .button.cancel{
+  border:0;
+  background-color: #CCCCCC;
+  color: #fff;
+}
+.buy-user {
+	width:150rpx;
+	height:150rpx;
+	border-radius: 50%; 
+	object-fit: cover; 
+	object-position: center;
+	position: absolute;
+	top: -16%;
+	left: 208rpx;
+}
+.buy-user image {
+	border-radius: 50%; 
+}
+</style>

pages/index/index.vue

@@ -1,79 +1,41 @@
 <template>
-	<view class="container">
-		<view class="banner">
-			<image :src="fetch.config.home_top" mode="" class="bg"></image>
-			<view class="intro" v-if="fetch.user.id <= 0">
-				<view class="greet">您好，{{fetch.user.username}}</view>
-				<view class="note">{{fetch.config.info}}</view>
-			</view>
-		</view>
+	<view class="container" v-if="fetch.config.home_top" style="background-color: #F8F8F8;">
+		<image class="w-100" :src="fetch.config.home_top" mode="widthFix"></image>
 		<view class="content">
-			<view class="entrance" v-if="fetch.user.id > 0">
-				<view class="item" @tap="user">
-					<image :src="fetch.user.avatar" class="icon"></image>
-					<view class="title">{{fetch.user.username}}</view>
-				</view>
-				<view class="item">
-					<text class="title">{{fetch.score.name}}</text>
-					<text class="value">{{fetch.score.score}}</text>
-				</view>
-			</view>
-			<view class="entrance" v-if="fetch.user.id <= 0">
-				<view class="item" @tap="login">
-					<view class="title">快速登录</view>
-				</view>
-			</view>
-			<view class="info" style="display: none;">
-				<view class="integral_section">
-					<view class="top">
-						<text class="title">{{fetch.score.name}}</text>
-						<text class="value">{{fetch.score.score}}</text>
-					</view>
-					<view class="bottom" v-if="fetch.score.info">
-						{{fetch.score.info}}
-						<view class="iconfont iconarrow-right"></view>
+			
+			<!-- member card begin -->
+			<view class="member-card">
+				<view class="entrance" v-if="fetch.user.id <= 0">
+					<view class="item" @tap="login">
+						<view class="title">快速登录</view>
 					</view>
 				</view>
-				<view class="qrcode_section" @tap="invite">
-					<image src="/static/images/index/qrcode.png"></image>
-					<text>身份证明</text>
-				</view>
-			</view>
-			<view class="navigators" style="display: none;">
-				<view class="left">
-					<view class="grid flex-column just-content-center">
-						<view class="d-flex align-items-center">
-							<image src="/static/images/index/csc.png" class="mark-img"></image>
-							<view class="font-size-sm text-color-base">小记商城</view>
+				
+				<view class="info" v-if="fetch.user.id > 0" style="margin-top: -14px;">
+					<image @tap="user" :src="fetch.user.avatar" class="avatar"></image>
+					<view class="title" style="margin-left: 13px;margin-top: -20px;">
+						<view class="wenyue-font" @tap="user">{{fetch.user.username}}</view>
+						<view class="tips" @tap="user">
+							<view v-if="fetch.user.title">{{fetch.user.title}}</view>
+							<view v-if="!fetch.user.title">无头衔</view>
 						</view>
-						<view class="text-color-assist" style="margin-left: 40rpx; font-size: 20rpx;">精美食品饰品，合起来买，更优惠~</view>
 					</view>
-					<view class="grid justify-content-end align-items-end">
-						<image src="/static/images/index/yzclh.png" class="yzclh-img" mode="heightFix"></image>
+					<view class="badage" style="left:95px;bottom: 16px;word-break: break-all;overflow: auto;height:24px">
+						<view v-if="fetch.user.info">{{fetch.user.info}}</view>
+						<view v-if="!fetch.user.info">暂无签名</view>
 					</view>
 				</view>
-				<view class="right">
-					<view class="tea-activity" @tap="invite">
-						<image src="/static/images/index/mcsb.png" class="mark-img"></image>
-						<view>小记互助</view>
-						<view class="right-img">
-							<image src="/static/images/index/mcsb_bg.png" mode="widthFix"></image>
-						</view>
-					</view>
-					<view class="member-gifts" @tap="packages">
-						<image src="/static/images/index/hyjb.png" class="mark-img"></image>
-						<view>小记联盟</view>
-						<view class="right-img">
-							<image src="/static/images/index/hyjb_bg.png" mode="widthFix"></image>
-						</view>
+				<view class="row">
+					<view class="grid" v-for="(v, k) in fetch.row" :key="k">
+						<view class="value">{{v.value}}</view>
+						<view class="title">{{v.name}}</view>
 					</view>
 				</view>
 			</view>
-			<view class="member-news" v-if="fetch.xuanchuan.length > 0">
-				<view class="header">
-					<view class="title">小记宣传栏</view>
-					<view class="iconfont iconRightbutton" style="display: none;"></view>
-				</view>
+			<!-- member card end -->
+			<!-- 星球播报 begin -->
+			<view class="xinqiubobao member-news" style="display: none;">
+				<view class="title">小记播报</view>
 				<view class="list">
 					<swiper class="item" autoplay :interval="3000" indicator-dots>
 						<swiper-item v-for="(v, k) in fetch.xuanchuan" :key="k" @click="xuanchuan(v.link)">
@@ -86,30 +48,127 @@
 					
 				</view>
 			</view>
-			<dever-share ref="share" :data="fetch.share" v-if="fetch.share"></dever-share>
+			<!-- 星球播报 end -->
+			<!-- 任务中心 begin -->
+			<view class="task-center" @tap="taskCenter" style="display: none;">
+				<view class="intro">
+					<view class="title">任务中心</view>
+					<view class="subtitle">MISSION CENTER</view>
+				</view>
+				<view class="image-wrapper">
+					<image src="/static/images/my/b3d3a98e3c7f450aaa32fbec6aecdfaf.png"></image>
+				</view>
+			</view>
+			<!-- 任务中心 end -->
 		</view>
+		<!-- 开通礼包 begin -->
+		<view class="open-gift" style="display: none;">
+			<view class="header">
+				<view class="title">我的道具</view>
+				<view class="subtitle" @tap="openGift">规则</view>
+			</view>
+			<view class="row">
+				<view class="grid">
+					<image src="/static/images/my/member_benefits/me_rights_icon_free.png"></image>
+					<view class="title">
+						<view>置顶</view>
+						<view class="number">x0</view>
+					</view>
+				</view>
+				<view class="grid">
+					<image src="/static/images/my/member_benefits/me_rights_icon_1jia1.png"></image>
+					<view class="title">
+						<view>买一赠一券</view>
+						<view class="number">x1</view>
+					</view>
+				</view>
+				<view class="grid">
+					<image src="/static/images/my/member_benefits/me_rights_icon_2jia1.png"></image>
+					<view class="title">
+						<view>买二赠一券</view>
+						<view class="number">x2</view>
+					</view>
+				</view>
+				<view class="grid">
+					<image src="/static/images/my/member_benefits/me_rights_icon_qingshi.png"></image>
+					<view class="title">
+						<view>喜茶轻食券</view>
+						<view class="number">x2</view>
+					</view>
+				</view>
+				<view class="grid">
+					<image src="/static/images/my/member_benefits/me_rights_icon_youxian_new.png"></image>
+					<view class="title">
+						<view>优先券</view>
+						<view class="number">x2</view>
+					</view>
+				</view>
+				<view class="grid">
+					<image src="/static/images/my/member_benefits/me_rights_icon_waimai_new.png"></image>
+					<view class="title">
+						<view>免运费券</view>
+						<view class="number">x2</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 开通礼包 end -->
+		
+		<list-cell hover arrow @click="invite">
+			<view class="list-cell-wrapper">
+				<view view="title">我的身份</view>
+				<view class="subtitle">不同的身份，不同的人生</view>
+			</view>
+		</list-cell>
+		<list-cell hover arrow @click="invite">
+			<view class="list-cell-wrapper">
+				<view view="title">购物中心</view>
+				<view class="subtitle">走过路过不要错过</view>
+			</view>
+		</list-cell>
+		<list-cell hover arrow @click="invite">
+			<view class="list-cell-wrapper">
+				<view view="title">订单列表</view>
+			</view>
+		</list-cell>
+		<list-cell hover arrow @click="invite">
+			<view class="list-cell-wrapper">
+				<view view="title">联系客服</view>
+			</view>
+		</list-cell>
+		<list-cell hover arrow @click="invite">
+			<view class="list-cell-wrapper">
+				<view view="title">消息中心</view>
+			</view>
+		</list-cell>
+		<!-- 登录popup -->
+		<login-popup ref="loginPopup"></login-popup>
+		
+		<dever-share ref="share" :data="fetch.share" v-if="fetch.share"></dever-share>
 	</view>
 </template>
 
 <script>
 	import deverShare from '@/lib/dever/components/share.vue';
+	import listCell from '@/lib/list-cell/list-cell.vue'
 	export default {
+		components: {
+			listCell,deverShare
+		},
 		data() {
 			return {
+				boardcast: [],
 				fetch : {
 					user : {},
 					config : {
 						home_top : '',
 					},
-					score : {},
+					score : {},
 					xuanchuan : [],
 					share : false,
 				},
 			}
 		},
-		components:{
-			deverShare
-		},
 		onShow() {
 			this.getData();
 		},
@@ -144,6 +203,10 @@
 			invite : function() {
 				this.Dever.alert('敬请期待');
 			},
+			
+			openGift : function() {
+				this.Dever.alert('敬请期待');
+			}
 		}
 	}
 </script>
@@ -156,42 +219,6 @@ page {
 }
 /* #endif */
 
-uni-page-body {
-	background-color:#F1F8FA;
-}
-.banner {
-	position: relative;
-	width: 100%;
-	height: 600rpx;
-	
-	.bg {
-		width: 100%;
-		height: 600rpx;
-	}
-	
-	.intro {
-		position: absolute;
-		top: calc(50rpx + var(--status-bar-height));
-		left: 40rpx;
-		color: #FFFFFF;
-		display: flex;
-		flex-direction: column;
-		
-		.greet {
-			font-size: $font-size-lg;
-			margin-bottom: 10rpx;
-		}
-		
-		.note {
-			font-size: $font-size-sm;
-		}
-	}
-}
-
-.content {
-	padding: 0 30rpx;
-}
-
 .entrance {
 	position: relative;
 	margin-top: -80rpx;
@@ -236,139 +263,263 @@ uni-page-body {
 	}
 }
 
-.info {
+.content {
+	/*padding: 0 30rpx;*/
+}
+
+.welcome {
 	position: relative;
-	margin-bottom: 30rpx;
-	border-radius: 10rpx;
-	background-color: #ffffff;
-	box-shadow: $box-shadow;
-	padding: 30rpx;
+	margin-top: -136rpx;
 	display: flex;
-	align-items: center;
-	justify-content: center;
+	flex-direction: column;
+	font-size: $font-size-lg;
+	color: $text-color-warning;
+}
+
+.member-card {
+	background-color: $bg-color-white;
+	padding: 20rpx;
+	display: flex;
+	flex-direction: column;
+	border-radius: $border-radius-base;
+	margin-bottom: 40rpx;
 	
-	.integral_section {
-		flex: 1;
+	.info {
+		position: relative;
+		margin-top: -50rpx;
 		display: flex;
-		flex-direction: column;
-		justify-content: center;
+		align-items: center;
+		position: relative;
+		padding: 20rpx 0;
+		border-bottom: 1rpx solid rgba($color: $border-color, $alpha: 0.3);
 		
-		.top {
+		.title {
+			flex: 1;
+			font-size: 40rpx;
+			color: $text-color-base;
 			display: flex;
 			align-items: center;
+		
+			.tips {
+				margin-left: 10rpx;
+				font-size: $font-size-sm;
+				color: $text-color-assist;
+				background-color: #e9e9e9;
+				padding: 10rpx 30rpx;
+				border-radius: 50rem !important;
+				display: flex;
+				align-items: center;
+				
+				image {
+					width: 20rpx;
+					height: 20rpx;
+				}
+			}
+		}
+		
+		.badage {
+			font-family: 'neutra';
+			position: absolute;
+			bottom: 20rpx;
+			left: 0;
+			border: 2rpx solid $text-color-base;
+			padding: 2rpx 20rpx;
+			border-radius: $border-radius-lg;
+			font-size: $font-size-base;
+		}
+	}
+	
+	.row {
+		margin-top: $spacing-row-base;
+		width: 100%;
+		display: flex;
+		align-items: center;
+
+		.grid {
+			flex: 1;
+			flex-shrink: 0;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
 			
-			.title {
-				color: $text-color-base;
-				font-size: $font-size-base;
-				margin-right: 10rpx;
+			image {
+				width: 100rpx;
+				height: 100rpx;
 			}
+			
 			.value {
-				font-size: 44rpx;
-				font-weight: bold;
+				font-family: 'neutra';
+				margin-bottom: $spacing-col-sm;
+				font-size: $font-size-lg;
+			}
+			
+			.title {
+				font-size: $font-size-sm;
+				color: $text-color-grey;
 			}
 		}
+	}
+}
+
+.xinqiubobao {
+	width: 100%;
+	position: relative;
+	
+	.title {
+		margin: 10rpx 0;
+		font-size: $font-size-lg;
+		font-weight: 500;
+	}
+	
+	.swiper {
+		height: 200rpx;
+		margin-bottom: 10rpx;
 		
-		.bottom {
-			font-size: $font-size-sm;
-			color: $text-color-assist;
-			display: flex;
-			align-items: center;
+		.swiper-item {
+			
+			.swiper-item-wrapper {
+				display: flex;
+				background-color: $bg-color-white;
+				padding: 40rpx 60rpx;
+				border-radius: $border-radius-base;
+				align-items: center;
+				margin-right: 40rpx;
+				
+				image {
+					width: 100rpx;
+					height: 100rpx;
+					border-radius: 100%;
+					margin-right: 20rpx;
+				}
+				
+				.desc {
+					display: flex;
+					flex-direction: column;
+					
+					.title {
+						font-size: $font-size-medium;
+						font-weight: 500;
+						margin-bottom: 10rpx;
+					}
+					
+					.desc {
+						font-size: $font-size-sm;
+						color: $text-color-grey;
+					}
+				}
+			}
 		}
 	}
+}
+
+.task-center {
+	margin: 40rpx 0;
+	background-color: $bg-color-white;
+	padding: 10rpx 0;
+	display: flex;
+	align-items: center;
+	border-radius: $border-radius-lg;
 	
-	.qrcode_section {
-		color: $color-primary;
+	.intro {
+		flex: 1;
 		display: flex;
 		flex-direction: column;
+		justify-content: center;
 		align-items: center;
+		.title {
+			font-size: $font-size-lg;
+			color: $text-color-base;
+		}
+		.subtitle {
+			font-family: 'neutra';
+			font-size: $font-size-sm;
+		}
+	}
+	
+	.image-wrapper {
+		flex: 1;
+		display: flex;
 		justify-content: center;
-		font-size: $font-size-sm;
+		align-items: center;
 		
 		image {
-			width: 40rpx;
-			height: 40rpx;
-			margin-bottom: 10rpx;
+			width: 200rpx;
+			height: 200rpx;
 		}
 	}
 }
 
-.navigators {
+.open-gift {
 	width: 100%;
-	margin-bottom: 20rpx;	
-	border-radius: 10rpx;
-	background-color: #ffffff;
-	box-shadow: $box-shadow;
-	padding: 20rpx;
-	display: flex;
-	align-items: stretch;
+	background-color: $bg-color-white;
+	padding: 30rpx 40rpx;
+	margin-bottom: 20rpx;
 	
-	.left {
-		width: 340rpx;
-		margin-right: 20rpx;
+	.header {
 		display: flex;
-		padding: 0 20rpx;
-		flex-direction: column;
-		font-size: $font-size-sm;
-		color: $text-color-base;
-		background-color: #F2F2E6;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 20rpx;
 		
-		.grid {
-			height: 50%;
-			display: flex;
+		.title {
+			font-size: $font-size-lg;
+			font-weight: 500;
+		}
+		
+		.subtitle {
+			font-size: $font-size-base;
+			color: $text-color-grey;
 		}
 	}
 	
-	.right {
-		width: 290rpx;
+	.row {
 		display: flex;
-		flex-direction: column;
+		flex-wrap: wrap;
 		
-		.tea-activity, .member-gifts {
-			width: 100%;
+		.grid {
+			width: 33.3333%;
 			display: flex;
-			padding: 20rpx;
-			font-size: $font-size-sm;
-			color: $text-color-base;
+			flex-direction: column;
 			align-items: center;
-			position: relative;
-		}
-		
-		.tea-activity {
-			background-color: #FDF3F2;
-			margin-bottom: 20rpx;
-		}
-		
-		.member-gifts {
-			background-color: #FCF6D4;
-		}
-		
-		.right-img {
-			flex: 1;
-			position: relative;
-			margin-left: 20rpx;
-			margin-right: -20rpx;
-			margin-bottom: -20rpx;
-			display: flex;
-			align-items: flex-end;
+			padding: 20rpx;
 			
 			image {
-				width: 100%;
+				width: 70rpx;
+				height: 70rpx;
+				margin-bottom: $spacing-row-base;
+			}
+			
+			.title {
+				font-size: $font-size-base;
+				color: $text-color-base;
+				display: flex;
+				align-items: baseline;
+				
+				.number {
+					margin-left: 5rpx;
+					font-family: 'neutra';
+					color: $color-warning;
+				}
 			}
 		}
 	}
+}
+
+.list-cell-wrapper {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
 	
-	.mark-img {
-		width: 30rpx;
-		height: 30rpx;
-		margin-right: 10rpx;
+	.title {
+		font-size: $font-size-lg;
 	}
 	
-	.yzclh-img {
-		height: 122.96rpx;
-		width: 214.86rpx;
+	.subtitle {
+		font-size: $font-size-sm;
+		color: $text-color-assist;
 	}
 }
-
 .member-news {
 	width: 100%;
 	margin-bottom: 30rpx;

pages/index/list.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="container" slot="gBody">
+	<view class="container" slot="gBody" style="background-color: #F8F8F8;">
 		<view class="main" v-if="state == 1">
 			<view class="content" :style="height">
 				<scroll-view class="menus" :scroll-into-view="view" scroll-with-animation scroll-y>
@@ -43,7 +43,7 @@
 			</view>
 			<!-- content end -->
 		</view>
-		<view v-if="state == 2" class="d-flex w-100 h-100 flex-column just-content-center align-items-center" style="margin-top:200rpx;">
+		<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>

pages/index/old_index.vue

@@ -0,0 +1,420 @@
+<template>
+	<view class="container">
+		<view class="banner">
+			<image :src="fetch.config.home_top" mode="" class="bg"></image>
+			<view class="intro" v-if="fetch.user.id <= 0">
+				<view class="greet">您好，{{fetch.user.username}}</view>
+				<view class="note">{{fetch.config.info}}</view>
+			</view>
+		</view>
+		<view class="content">
+			<view class="entrance" v-if="fetch.user.id > 0">
+				<view class="item" @tap="user">
+					<image :src="fetch.user.avatar" class="icon"></image>
+					<view class="title">{{fetch.user.username}}</view>
+				</view>
+				<view class="item">
+					<text class="title">{{fetch.score.name}}</text>
+					<text class="value">{{fetch.score.score}}</text>
+				</view>
+			</view>
+			<view class="entrance" v-if="fetch.user.id <= 0">
+				<view class="item" @tap="login">
+					<view class="title">快速登录</view>
+				</view>
+			</view>
+			<view class="info" style="display: none;">
+				<view class="integral_section">
+					<view class="top">
+						<text class="title">{{fetch.score.name}}</text>
+						<text class="value">{{fetch.score.score}}</text>
+					</view>
+					<view class="bottom" v-if="fetch.score.info">
+						{{fetch.score.info}}
+						<view class="iconfont iconarrow-right"></view>
+					</view>
+				</view>
+				<view class="qrcode_section" @tap="invite">
+					<image src="/static/images/index/qrcode.png"></image>
+					<text>身份证明</text>
+				</view>
+			</view>
+			<view class="navigators" style="display: none;">
+				<view class="left">
+					<view class="grid flex-column just-content-center">
+						<view class="d-flex align-items-center">
+							<image src="/static/images/index/csc.png" class="mark-img"></image>
+							<view class="font-size-sm text-color-base">小记商城</view>
+						</view>
+						<view class="text-color-assist" style="margin-left: 40rpx; font-size: 20rpx;">精美食品饰品，合起来买，更优惠~</view>
+					</view>
+					<view class="grid justify-content-end align-items-end">
+						<image src="/static/images/index/yzclh.png" class="yzclh-img" mode="heightFix"></image>
+					</view>
+				</view>
+				<view class="right">
+					<view class="tea-activity" @tap="invite">
+						<image src="/static/images/index/mcsb.png" class="mark-img"></image>
+						<view>小记互助</view>
+						<view class="right-img">
+							<image src="/static/images/index/mcsb_bg.png" mode="widthFix"></image>
+						</view>
+					</view>
+					<view class="member-gifts" @tap="packages">
+						<image src="/static/images/index/hyjb.png" class="mark-img"></image>
+						<view>小记联盟</view>
+						<view class="right-img">
+							<image src="/static/images/index/hyjb_bg.png" mode="widthFix"></image>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="member-news" v-if="fetch.xuanchuan.length > 0">
+				<view class="header">
+					<view class="title">小记宣传栏</view>
+					<view class="iconfont iconRightbutton" style="display: none;"></view>
+				</view>
+				<view class="list">
+					<swiper class="item" autoplay :interval="3000" indicator-dots>
+						<swiper-item v-for="(v, k) in fetch.xuanchuan" :key="k" @click="xuanchuan(v.link)">
+							<view class="item">
+								<image :src="v.pic"></image>
+								<view class="title">{{v.name}}</view>
+							</view>
+						</swiper-item>
+					</swiper>
+					
+				</view>
+			</view>
+			<dever-share ref="share" :data="fetch.share" v-if="fetch.share"></dever-share>
+		</view>
+	</view>
+</template>
+
+<script>
+	import deverShare from '@/lib/dever/components/share.vue';
+	export default {
+		data() {
+			return {
+				fetch : {
+					user : {},
+					config : {
+						home_top : '',
+					},
+					score : {},
+					xuanchuan : [],
+					share : false,
+				},
+			}
+		},
+		components:{
+			deverShare
+		},
+		onShow() {
+			this.getData();
+		},
+		// 重新加载
+		onPullDownRefresh: function() {
+			this.getData();
+		},
+		methods: {
+			getData : function() {
+				this.Dever.get(this, 'app/collection/?l=api.home', {id:-1});
+			},
+			view : function(id) {
+				this.Dever.location('dream/index?id=' + id);
+			},
+			
+			xuanchuan : function(link) {
+				this.Dever.location(link);
+			},
+			
+			login : function() {
+				this.Dever.location('user/login');
+			},
+			
+			jiyi : function() {
+				this.Dever.alert('敬请期待');
+			},
+			
+			user : function() {
+				this.Dever.location('user/index');
+			},
+			
+			invite : function() {
+				this.Dever.alert('敬请期待');
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+/* #ifdef H5 */
+page {
+	height: auto;
+	min-height: 100%;
+}
+/* #endif */
+
+uni-page-body {
+	background-color:#F1F8FA;
+}
+.banner {
+	position: relative;
+	width: 100%;
+	height: 600rpx;
+	
+	.bg {
+		width: 100%;
+		height: 600rpx;
+	}
+	
+	.intro {
+		position: absolute;
+		top: calc(50rpx + var(--status-bar-height));
+		left: 40rpx;
+		color: #FFFFFF;
+		display: flex;
+		flex-direction: column;
+		
+		.greet {
+			font-size: $font-size-lg;
+			margin-bottom: 10rpx;
+		}
+		
+		.note {
+			font-size: $font-size-sm;
+		}
+	}
+}
+
+.content {
+	padding: 0 30rpx;
+}
+
+.entrance {
+	position: relative;
+	margin-top: -80rpx;
+	margin-bottom: 30rpx;
+	border-radius: 10rpx;
+	background-color: #ffffff;
+	box-shadow: $box-shadow;
+	padding: 30rpx 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	
+	.item {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		position: relative;
+		
+		&:nth-child(1):after {
+			content: '';
+			position: absolute;
+			width: 1rpx;
+			background-color: #ddd;
+			right: 0;
+			height: 100%;
+			transform: scaleX(0.5) scaleY(0.8);
+		}
+		
+		.icon {
+			width: 84rpx;
+			height: 84rpx;
+			margin: 20rpx;
+		}
+		
+		.title {
+			font-size: 30rpx;
+			color: $text-color-base;
+			font-weight: 600;
+		}
+	}
+}
+
+.info {
+	position: relative;
+	margin-bottom: 30rpx;
+	border-radius: 10rpx;
+	background-color: #ffffff;
+	box-shadow: $box-shadow;
+	padding: 30rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	
+	.integral_section {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		
+		.top {
+			display: flex;
+			align-items: center;
+			
+			.title {
+				color: $text-color-base;
+				font-size: $font-size-base;
+				margin-right: 10rpx;
+			}
+			.value {
+				font-size: 44rpx;
+				font-weight: bold;
+			}
+		}
+		
+		.bottom {
+			font-size: $font-size-sm;
+			color: $text-color-assist;
+			display: flex;
+			align-items: center;
+		}
+	}
+	
+	.qrcode_section {
+		color: $color-primary;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		font-size: $font-size-sm;
+		
+		image {
+			width: 40rpx;
+			height: 40rpx;
+			margin-bottom: 10rpx;
+		}
+	}
+}
+
+.navigators {
+	width: 100%;
+	margin-bottom: 20rpx;	
+	border-radius: 10rpx;
+	background-color: #ffffff;
+	box-shadow: $box-shadow;
+	padding: 20rpx;
+	display: flex;
+	align-items: stretch;
+	
+	.left {
+		width: 340rpx;
+		margin-right: 20rpx;
+		display: flex;
+		padding: 0 20rpx;
+		flex-direction: column;
+		font-size: $font-size-sm;
+		color: $text-color-base;
+		background-color: #F2F2E6;
+		
+		.grid {
+			height: 50%;
+			display: flex;
+		}
+	}
+	
+	.right {
+		width: 290rpx;
+		display: flex;
+		flex-direction: column;
+		
+		.tea-activity, .member-gifts {
+			width: 100%;
+			display: flex;
+			padding: 20rpx;
+			font-size: $font-size-sm;
+			color: $text-color-base;
+			align-items: center;
+			position: relative;
+		}
+		
+		.tea-activity {
+			background-color: #FDF3F2;
+			margin-bottom: 20rpx;
+		}
+		
+		.member-gifts {
+			background-color: #FCF6D4;
+		}
+		
+		.right-img {
+			flex: 1;
+			position: relative;
+			margin-left: 20rpx;
+			margin-right: -20rpx;
+			margin-bottom: -20rpx;
+			display: flex;
+			align-items: flex-end;
+			
+			image {
+				width: 100%;
+			}
+		}
+	}
+	
+	.mark-img {
+		width: 30rpx;
+		height: 30rpx;
+		margin-right: 10rpx;
+	}
+	
+	.yzclh-img {
+		height: 122.96rpx;
+		width: 214.86rpx;
+	}
+}
+
+.member-news {
+	width: 100%;
+	margin-bottom: 30rpx;
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20rpx 0;
+		
+		.title {
+			font-size: $font-size-lg;
+			font-weight: bold;
+		}
+		
+		.iconfont {
+			font-size: 52rpx;
+			color: $text-color-assist;
+		}
+	}
+	
+	.list {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		
+		.item {
+			width: 100%;
+			height: 380rpx;
+			position: relative;
+			
+			image {
+				width: 100%;
+				height: 100%;
+				border-radius: 8rpx;
+			}
+			
+			.title {
+				position: relative;
+				font-size: 32rpx;
+				font-weight: 500;
+				width: 100%;
+				top: -70rpx;
+				left: 16rpx;
+				color: #ffffff;
+			}
+		}
+	}
+}
+</style>

pages/user/index.vue

@@ -1,49 +1,103 @@
 <template>
-	<view class="register">
-	
-		<view class="content">
-			<!-- 头部logo -->
-			<view class="header" style="border-radius:0%;">
-				<image :src="fetch.avatar" @click="avatarSet(0)"  style="border-radius: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>
-				
+	<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>
+		</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.info"/>
+				</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" 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>
+					<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>
+					<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 class="other_login cuIcon">
-				<view class="login_icon">
-					<view class="cuIcon-weixin" @tap="bind_weixin"></view>
+		</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>
-			
-			<!-- 底部信息 -->
-			<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>
+		</modal>
 	</view>
 </template>
 
@@ -51,28 +105,39 @@
 	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";
+	import listCell from '@/lib/list-cell/list-cell.vue'
+	import modal from '@/lib/modal/modal.vue'
+	
 	export default {
+		components: { 
+			listCell,
+			modal,
+			wInput,
+			wButton,
+			avatar
+		}, 
 		data() {
 			return {
-				fetch : {
-					name : '',
-					avatar : '',
-					sex : 3,
+				fetch : {
+					name : '',
+					avatar : '',
+					sex : 3,
 				},
-				isRotate: false, //是否加载旋转
-				openAvatar : false
+				isRotate: false, //是否加载旋转
+				openAvatar : false,
+				telphoneModalVisible: false,
+				telphoneForm: {
+					telphone: '',
+					verifyCode: ''
+				},
+				countdown: 0
 			}
 		},
-		components:{
-			wInput,
-			wButton,
-			avatar
-		},
-		// 重新加载
-		onPullDownRefresh: function() {
-			this.getData();
+		// 重新加载
+		onPullDownRefresh: function() {
+			this.getData();
 		},
-		onLoad() {
+		onLoad() {
 			this.Dever.checkLogin();
 			this.getData();
 		},
@@ -110,14 +175,14 @@
 						self.Dever.alert('暂时不支持app登录');
 					}
 				});
-			},
-			index : function() {
-				this.Dever.location('index/index');
-			},
-			tixian : function() {
-				this.Dever.alert('敬请期待');
 			},
-		    update : function() {
+			index : function() {
+				this.Dever.location('index/index');
+			},
+			tixian : function() {
+				this.Dever.alert('敬请期待');
+			},
+			update : function() {
 				if(this.isRotate){
 					//判断是否加载中，避免重复点击请求
 					return false;
@@ -127,52 +192,199 @@
 				    return false;
 				}
 				
-				this.isRotate = true;
+				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) {
+				this.Dever.post('package/passport/?l=app.update', {noloading:1, username: this.fetch.name, info: this.fetch.info, gender: this.fetch.sex, title:this.fetch.title, birthday:this.fetch.birthday}, 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,
-					
-				});
+			},
+			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,
+					
+				});
+			},
+			handleBirthdayChange({target: {value}}) {
+				 this.fetch.birthday = value
+			},
+			showTelphoneModal() {
+				this.telphoneModalVisible = true
+			},
+			closeTelphoneModal() {
+				this.telphoneModalVisible = false
+				this.telphoneForm = this.$options.data().telphoneForm
+			},
+			getVerifyCode() {
+				if(this.countdown) return
+				
+				if(!this.telphoneForm.telphone) {
+					uni.showToast({
+						title: '请填写手机号码',
+						icon: 'none'
+					})
+					return
+				}
+				
+				this.countdown = 60
+				let interval = setInterval(() => {
+					if(!this.countdown) {
+						clearInterval(interval)
+						return
+					}
+					this.countdown -= 1
+				}, 1000)
 			}
 		}
 	}
 </script>
 
-<style>
-	@import url("@/lib/watch-login/css/icon.css");
-	@import url("@/lib/watch-login/css/main.css");
-	.other_agree {
+<style lang="scss" scoped>
+.brand {
+	background-color: $bg-color-white;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 40rpx 0;
+	margin-bottom: 20rpx;
+	
+	.avatar {
+		width: 200rpx;
+		height: 200rpx;
+		border-radius: 100%;
+		margin-bottom: 30rpx;
+	}
+	
+	.username {
+		color: $font-size-medium;
+		font-weight: bold;
+	}
+}
+
+.user-form {
+	.form-item {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		
+		.label {
+			width: 160rpx;
+		}
+		
+		input {
+			flex: 1;
+		}
+		
+		.radio {
+			display: flex;
+			margin-right: 50rpx;
+			image {
+				width: 40rpx;
+				height: 40rpx;
+				margin-right: 20rpx;
+			}
+		}
+	}
+}
+
+.save-btn {
+	padding: 0 30rpx;
+	margin-top: 60rpx;
+	
+	button {
+		width: 100%;
+		font-size: $font-size-extra-lg;
+	}
+}
+
+.telphone-modal {
+	.header {
 		display: flex;
-		flex-direction: row;
-		justify-content: center;
 		align-items: center;
-		margin-top: 50rpx;
-		text-align: center;
+		justify-content: center;
+		position: relative;
+		font-size: $font-size-extra-lg;
+		font-weight: bold;
+		margin-bottom: 30rpx;
+		
+		.close-icon {
+			width: 60rpx;
+			height: 60rpx;
+			position: absolute;
+			right: 0;
+		}
+	}
+	
+	.tips {
+		color: $text-color-grey;
+		line-height: 1.2rem;
+		margin-bottom: 50rpx;
+	}
+	
+	.telphone-form {
+		font-size: $font-size-base;
+		
+		.telphone-input {
+			width: 100%;
+			display: flex;
+			align-items: center;
+			
+			.prefix {
+				color: $color-primary;
+				display: flex;
+				align-items: center;
+				padding-right: 20rpx;
+				position: relative;
+				margin-right: 10rpx;
+				
+				&::after {
+					content: " ";
+					position: absolute;
+					width: 4rpx;
+					background-color: $border-color;
+				}
+			}
+			
+			input {
+				flex: 1;
+			}
+		}
+		
+		.verfiycode-input {
+			width: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			
+			.countdown {
+				font-size: $font-size-base;
+			}
+		}
 	}
-	.other_login {
-		margin-top: 80rpx;
+	
+	.footer {
+		margin-top: 30rpx;
+		button {
+			font-size: $font-size-lg;
+		}
 	}
-</style>
+}
+</style>

pages/user/index_bak.vue

@@ -0,0 +1,178 @@
+<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>