dreamland/pages/dream/index.vue

<template>
	<gracePage :customHeader="false">
		<view class="container" slot="gBody">
			<ourLoading isFullScreen :active="pageLoading" :text="pageLoadingText" />
			<swiper class="banner-swiper" autoplay :interval="5000" :duration="1000" @change="change" :circular="swiper.circular" @click="closeOpen()">
				<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" @click="closeOpen()">
					<view 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>
					</view>
					<view class="item" v-if="fetch.info.uid > 0 && fetch.share_user.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 class="item" v-if="fetch.share_user.uid > 0">
						<image :src="fetch.info.share_user.avatar" mode="widthFix" class="avatar"></image>
						<view class="wenyue-font">{{fetch.info.share_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" :style="item_style" v-for="(v, k) in fetch.button" :key="k" @click="button(v)">
						<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">
							<mp-html :content="fetch.info.content" ref="article"></mp-html>
						</view>
					</view>
					
				</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 mpHtml from "@/lib/mp-html/mp-html.vue";
	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 : {},
					share_user : {
						uid : -1,
					}
				},
				buyState : false,
				rankingState : false,
				infoState : false,
				inviteState : true,
				item_style : 'margin: 0 auto;',
			}
		},
		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 self = this;
				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) {
					if (t.button.length > 2) {
						self.item_style = 'margin-left:5rpx;';
					} else {
						self.item_style = 'margin:0 auto';
					}
					uni.setNavigationBarTitle({
						title:t.info.name
					});
				});
			},
			button : function(v) {
				if (v.type == 1) {
					this.goView();
				}
				else if (v.type == 2) {
					this.showBuy();
				}
				else if (v.type == 3) {
					this.goRanking();
				}
				else if (v.type == 10) {
					this.Dever.location(v.link);
				}
			},
			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);
			},
			closeOpen : function() {
				this.hideRanking();
				this.hideBuy();
				this.hideInfo();
				this.hideInvite();
			},
			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,mpHtml
		}
	}
</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;
}

.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: 30rpx;
			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);
		}
	}
}

.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;
}
</style>