dreamland/pages/dream/index.vue

<template>
	<gracePage :customHeader="false">
		<view class="container" slot="gBody">
			<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-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.items" :key="k"></text>
				</view>
			</view>
			<view v-if="buyState">
				<buy :id="id" :bgcolor="fetch.button.bgcolor" :color="fetch.button.color" @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>
	</gracePage>
</template>
<script>
import buy from "@/pages/dream/buy.vue";
import ranking from "@/pages/dream/ranking.vue";
export default{
	data() {
		return {
			id : 0,
			swiper : {
				index : 0,
				circular : true,
			},
			fetch: {
				page_id : 0,
				is_buy : false,
				info : {},
				button : {}
			},
			buyState : false,
			rankingState : false,
		}
	},
	onLoad(option) {
		this.id = option.id;
		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});
		},
		goView : function() {
			//是否购买
			if (!this.fetch.is_buy) {
				this.buyState = true;
			} else {
				this.view();
			}
		},
		view : function() {
			this.Dever.location('dream/view?id='+this.id+'&page_id='+this.fetch.page_id+'&index=0');
		},
		hideBuy : function() {
			this.buyState = false;
		},
		hideRanking : function() {
			this.rankingState = false;
		},
		goRanking : function() {
			this.rankingState = true;
		}
	},
	components:{
		buy,ranking
	}
}
</script>
<style>
.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;
}
</style>