dreamland/pages/dream/index.vue

<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" @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>
			
			<view class="mask buy-layer" v-if="inviteState && fetch.info.user">
			  <view class="buytip-layer layer " catchtap="handleStop">
				<view class="buy-tit buy-user"><image :src="fetch.info.user.avatar" mode="widthFix"></image></view>
				<view class="buy-tit" style="margin-top: 10rpx;">{{fetch.info.user.username}}赠送</view>
				<view>
					<text class="p">“牡丹花下死，做鬼也风流”</text>
					<text class="p">——他是这么说的</text>
				</view>
				
				<view class="btn-wrapper">
				  <view class="button cancel" @click="hideInvite">不要
				  </view>
				  <view class="button primary" :style="fetch.button.bgcolor" @click="hideInvite">收下
					<button formType="submit"></button>
				  </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";
export default{
	data() {
		return {
			id : 0,
			swiper : {
				index : 0,
				circular : true,
			},
			fetch: {
				is_buy : false,
				info : {},
				button : {},
				code : '',
			},
			buyState : false,
			rankingState : false,
			infoState : false,
			inviteState : true,
		}
	},
	onLoad(option) {
		this.id = option.id;
		this.Dever.login = 'user/login?id=' + this.id;
		this.Dever.checkLogin();
		this.getData();
	},
	// 重新加载
	onPullDownRefresh: function() {
		this.getData();
	},
	methods:{
		change : function(e) {
			this.swiper.index = e.detail.current;
		},
		getData : function() {
			this.Dever.get(this, 'app/collection/?l=api.getInfo', {id:this.id}, function(t) {
				uni.setNavigationBarTitle({
					title:t.info.name
				});
			});
		},
		goView : function() {
			//是否购买
			if (!this.fetch.is_buy) {
				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;
		},
		showBuy : function() {
			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() {
			//从后端获取分享链接需要的加密参数
			
		}
	},
	components:{
		buy,ranking,info
	}
}
</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: -20%;
	left: 208rpx;
}
.buy-user image {
	border-radius: 50%; 
}
</style>