dreamland/pages/dream/index.vue

<template>
	<gracePage :customHeader="false">
		<view class="container" slot="gBody">
			<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>
			
			<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 {
				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,
			}
		},
		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 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: 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>