|
|
@@ -1,45 +1,49 @@
|
|
|
<template>
|
|
|
<gracePage :customHeader="false">
|
|
|
- <view class="container" slot="gBody">
|
|
|
- <swiper class="banner-swiper" autoplay :interval="5000" :duration="1000" @change="change" :circular="swiper.circular">
|
|
|
+ <view class="container" slot="gBody" v-if="fetch.info.pic_bg">
|
|
|
+ <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">
|
|
|
- <navigator class="item">
|
|
|
+ <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>
|
|
|
- </navigator>
|
|
|
+ </view>
|
|
|
<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>
|
|
|
+ <!-- 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">
|
|
|
+ <rich-text :nodes="fetch.info.content"></rich-text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
</view>
|
|
|
|
|
|
<view v-if="buyState">
|
|
|
@@ -101,13 +105,6 @@
|
|
|
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,
|
|
|
@@ -124,7 +121,8 @@
|
|
|
buyState : false,
|
|
|
rankingState : false,
|
|
|
infoState : false,
|
|
|
- inviteState : true,
|
|
|
+ inviteState : true,
|
|
|
+ item_style : 'margin: 0 auto;',
|
|
|
}
|
|
|
},
|
|
|
onLoad(option) {
|
|
|
@@ -144,13 +142,33 @@
|
|
|
change : function(e) {
|
|
|
this.swiper.index = e.detail.current;
|
|
|
},
|
|
|
- getData : function() {
|
|
|
+ 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) {
|
|
|
+ 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() {
|
|
|
//是否登录
|
|
|
@@ -178,6 +196,12 @@
|
|
|
},
|
|
|
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;
|
|
|
@@ -223,152 +247,202 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- page {
|
|
|
- max-height: 100%;
|
|
|
- }
|
|
|
+page {
|
|
|
+ max-height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.banner-swiper {
|
|
|
+ width: 100%;
|
|
|
+ height: 600rpx;
|
|
|
|
|
|
- .banner-swiper {
|
|
|
- width: 100%;
|
|
|
- height: 600rpx;
|
|
|
-
|
|
|
- .banner-swiper-item {
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
+ .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;
|
|
|
|
|
|
- .content {
|
|
|
- width: 100%;
|
|
|
- padding: 0 30rpx;
|
|
|
+ .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;
|
|
|
|
|
|
- .section-1 {
|
|
|
- position: relative;
|
|
|
- background-color: $bg-color-white;
|
|
|
- margin-top: -60rpx;
|
|
|
- border-radius: $border-radius-lg;
|
|
|
- padding: 60rpx 0;
|
|
|
+ .item {
|
|
|
+ width: 335rpx;
|
|
|
+ background-color: #EAEBEC;
|
|
|
+ padding: $spacing-row-lg 0;
|
|
|
display: flex;
|
|
|
- margin-bottom: 30rpx;
|
|
|
- box-shadow: $box-shadow;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: $border-radius-lg;
|
|
|
|
|
|
- .item {
|
|
|
- flex: 1;
|
|
|
- flex-shrink: 0;
|
|
|
+ .title {
|
|
|
+ width: 100%;
|
|
|
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;
|
|
|
- }
|
|
|
+ justify-content: center;
|
|
|
+ font-size: $font-size-lg;
|
|
|
|
|
|
image {
|
|
|
- width: 100rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
}
|
|
|
-
|
|
|
- .wenyue-font {
|
|
|
- font-size: 48rpx;
|
|
|
- margin-bottom: 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;
|
|
|
|
|
|
- .section-2 {
|
|
|
+ .my-integral {
|
|
|
+ flex: 1;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 30rpx;
|
|
|
+ flex-direction: column;
|
|
|
|
|
|
- .item {
|
|
|
- width: 335rpx;
|
|
|
- background-color: #EAEBEC;
|
|
|
- padding: $spacing-row-lg 0;
|
|
|
+ .integrals {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
align-items: center;
|
|
|
- justify-content: center;
|
|
|
- border-radius: $border-radius-lg;
|
|
|
+ font-size: $font-size-lg;
|
|
|
+ color: $text-color-base;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
|
|
|
- .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;
|
|
|
+ .neutra-font {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ font-size: 42rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .section-3 {
|
|
|
- margin-bottom: 30rpx;
|
|
|
+ .my-code {
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ flex-direction: column;
|
|
|
align-items: center;
|
|
|
- font-size: $font-size-base;
|
|
|
- color: $text-color-assist;
|
|
|
- padding: 0 10rpx;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ position: relative;
|
|
|
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
+ image {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ margin-bottom: $spacing-col-sm;
|
|
|
}
|
|
|
|
|
|
- .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);
|
|
|
- }
|
|
|
+ &: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>
|
dever