You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
534 lines
13 KiB
534 lines
13 KiB
<template> |
|
<view class="container" id="container"> |
|
<view class="back-btn" :style="{top:CustomBar + 'rpx'}" @click="backPrevPage()"> |
|
<image src="../../static/xyddImages/back.png" mode=""></image> |
|
</view> |
|
<view class="float-light"><image src="https://qiniu.upload.gznl.top/d4bd8c56-2c69-4f1d-b664-8c2cb476f17c.png"></view> |
|
<view class="float-light float-light2"><image src="https://qiniu.upload.gznl.top/d4bd8c56-2c69-4f1d-b664-8c2cb476f17c.png"></view> |
|
<view class="float-light float-light3"><image src="https://qiniu.upload.gznl.top/d4bd8c56-2c69-4f1d-b664-8c2cb476f17c.png"></view> |
|
<view class="tabs-box acea-row row-middle row-center"> |
|
<view class="tab-item" :class="current == 0 ? 'active' : ''" @click="tabClick(0)">点灯祈福</view> |
|
<view class="col-line"></view> |
|
<view class="tab-item" :class="current == 1 ? 'active' : ''" @click="tabClick(1)">祈福灯广场</view> |
|
<view class="col-line"></view> |
|
<view class="tab-item" :class="current == 2 ? 'active' : ''" @click="tabClick(2)">我的祈福灯</view> |
|
</view> |
|
<!-- 点灯祈福 --> |
|
<view class="content-box content1-box" v-if="current == 0"> |
|
<view class="content1-top-box acea-row row-center-wrapper"> |
|
<view class="top-box-content"> |
|
<view class="acea-row-nowrap"> |
|
<view class="light-box"> |
|
<view class="light-l-box"> |
|
<image :src="topLight[0].lampPic" alt=""> |
|
<text>{{topLight[0].lampName}}</text> |
|
</view> |
|
</view> |
|
<view class="light-desc-box"> |
|
<view class="light-name">{{topLight[0].lampName}}</view> |
|
<!-- <view class="current-year">{{topLight[0].lampIntroduce}}</view> --> |
|
<view class="light-desc">{{topLight[0].lampIntroduce}}</view> |
|
</view> |
|
</view> |
|
<view class="btn-box" @click="toLighting(topLight[0].id)">我要点灯</view> |
|
</view> |
|
<view class="right-image"><image src="https://qiniu.upload.gznl.top/3a51ab9e-3b02-4dca-aec3-7c7f00a2b6cb.png" ></view> |
|
<view class="cloud1"><image src="https://qiniu.upload.gznl.top/e5277b85-8a22-4448-931b-b0f0540b1dd7.png" ></view> |
|
<view class="cloud2"><image src="https://qiniu.upload.gznl.top/f442f228-c6e8-4491-a8cf-feff34be6f61.png" ></view> |
|
</view> |
|
<view class="light-list-box acea-row row-between"> |
|
<view class="light-item" v-for="(item,index) in lightList" :key="item.id"> |
|
<view class="light-name">{{item.lampName}}</view> |
|
<view class="light-box"><image :src="item.lampPic" ></view> |
|
<view class="btn" @click="toLighting(item.id)"><image src="../../static/xyddImages/btn-bg.png" alt=""></view> |
|
</view> |
|
</view> |
|
</view> |
|
<!-- 祈福灯广场 --> |
|
<view class="content-box content2-box" v-if="current == 1"> |
|
<view class="content2-top-box"> |
|
<view class="right-image"><image src="https://qiniu.upload.gznl.top/3a51ab9e-3b02-4dca-aec3-7c7f00a2b6cb.png" ></view> |
|
<view class="cloud2"><image src="https://qiniu.upload.gznl.top/f442f228-c6e8-4491-a8cf-feff34be6f61.png" ></view> |
|
<view class="title-box"><image src="https://qiniu.upload.gznl.top/09668a77-149a-4e88-be8b-5d3edff449a6.png" alt=""></view> |
|
<view class="content2-tabs-box acea-row row-between"> |
|
<view class="content2-tab-item" :class="active == 1 ? 'content2-tab-item-active' : ''" @click="tab2Click(1)">最新祈福灯</view> |
|
<view class="content2-tab-item" :class="active == 2 ? 'content2-tab-item-active' : ''" @click="tab2Click(2)">本周最亮祈福灯</view> |
|
<view class="content2-tab-item" :class="active == 3 ? 'content2-tab-item-active' : ''" @click="tab2Click(3)">最亮祈福灯</view> |
|
</view> |
|
<view class="lightUp-list"> |
|
<view class="lightUp-item acea-row row-middle" v-for="(item,index) in lightingList" :key="item.id"> |
|
<view class="light-l-box"> |
|
<image :src="item.lampPhoto" alt=""> |
|
<text>{{item.blessingLampName}}</text> |
|
</view> |
|
<view class="userInfo-box"> |
|
<view class="user-name red">{{item.blessingPersonRealname}}</view> |
|
<view class="word line2">{{item.blessingContent}}</view> |
|
<view class="word2">已有<text class="red">{{item.beBlessedTimes}}</text>人为Ta祈福</view> |
|
</view> |
|
<view class="btn-box" |
|
:class="!item.isVote ? '' : 'default'" |
|
@click="blessingOthers(item)">{{item.isVote ? '已祈福' : '为他祈福'}}</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<!-- 我的祈福灯 --> |
|
<view class="content-box content2-box" v-if="current == 2"> |
|
<view class="content2-top-box"> |
|
<view class="right-image"><image src="https://qiniu.upload.gznl.top/3a51ab9e-3b02-4dca-aec3-7c7f00a2b6cb.png" ></view> |
|
<view class="cloud2"><image src="https://qiniu.upload.gznl.top/f442f228-c6e8-4491-a8cf-feff34be6f61.png" ></view> |
|
<view class="title-box"><image src="https://qiniu.upload.gznl.top/35dc97c2-5b89-4248-8b78-728fb384d70f.png" alt=""></view> |
|
<view class="lightUp-list"> |
|
<view class="lightUp-item acea-row row-middle" v-for="(item,index) in lightingList" :key="item.id"> |
|
<view class="light-l-box"> |
|
<image :src="item.lampPhoto" alt=""> |
|
<text>{{item.blessingLampName}}</text> |
|
</view> |
|
<view class="userInfo-box"> |
|
<view class="user-name red">{{item.blessingPersonRealname}}</view> |
|
<view class="word line2">{{item.blessingContent}}</view> |
|
<view class="word2">已有<text class="red">{{item.beBlessedTimes}}</text>人为Ta祈福</view> |
|
</view> |
|
<view class="btn-box">已亮{{item.lightedDays}}天</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { getLightList, blessingList, myBlessings, blessingOthers } from '@/api/diandeng.js' |
|
export default{ |
|
data(){ |
|
return { |
|
current: 0, |
|
active: 1, |
|
CustomBar: this.CustomBar, |
|
lightList: [], |
|
topLight:null, |
|
lightingList:[], |
|
|
|
} |
|
}, |
|
onLoad(){ |
|
uni.showLoading({ |
|
title:'正在加载中...' |
|
}) |
|
this.getLightList(); |
|
}, |
|
mounted(){ |
|
console.log(this.CustomBar); |
|
}, |
|
methods: { |
|
getLightList(){ |
|
getLightList().then((res)=>{ |
|
if(res.success){ |
|
this.lightList = res.data |
|
this.topLight = res.data.filter((item)=>{ |
|
return item.isTop == 1 |
|
}) |
|
} |
|
uni.hideLoading() |
|
}) |
|
}, |
|
tabClick(idx){ |
|
this.current = idx; |
|
if(idx == 1){ |
|
this.getLihtingList() |
|
} else if(idx == 2){ |
|
this.getMyLihtingList() |
|
} |
|
}, |
|
//获取我的祈福灯 |
|
getMyLihtingList(){ |
|
myBlessings().then((res)=>{ |
|
if(res.success){ |
|
this.lightingList = res.data |
|
} |
|
}) |
|
}, |
|
//获取祈福灯广场 |
|
getLihtingList(){ |
|
blessingList(this.active).then((res)=>{ |
|
if(res.success){ |
|
this.lightingList = res.data |
|
} |
|
}) |
|
}, |
|
tab2Click(idx){ |
|
this.active = idx; |
|
this.getLihtingList(idx) |
|
}, |
|
blessingOthers(item){ |
|
let that = this; |
|
if(item.isVote){ |
|
uni.showToast({ |
|
title: '已为他祈福过了！', |
|
icon: 'none' |
|
}) |
|
return |
|
} |
|
uni.showModal({ |
|
title: '提示', |
|
content: '是否确认为Ta祈福？', |
|
success: function (res) { |
|
if (res.confirm) { |
|
blessingOthers({blessingId:item.id}).then((res)=>{ |
|
if(res.success){ |
|
uni.showToast({ |
|
title: '祈福成功！' |
|
}) |
|
that.getLihtingList(that.active) |
|
} |
|
}) |
|
} else if (res.cancel) { |
|
console.log('用户点击取消'); |
|
} |
|
} |
|
}); |
|
|
|
}, |
|
|
|
backPrevPage(){ |
|
this.$yrouter.switchTab("/pages/home/index"); |
|
}, |
|
toLighting(i){ |
|
this.$yrouter.push({ |
|
path: '/pages/diandeng/lighting', |
|
query: { |
|
id: i |
|
}, |
|
}) |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="less"> |
|
image{ |
|
width: 100%; |
|
height: 100%; |
|
} |
|
@font-face { |
|
font-family: mFont; |
|
src: url('https://www.cyjyyjy.com:8081/static/PangMenZhengDaoCuShuTi-2.ttf'); |
|
} |
|
.back-btn{ |
|
width: 72rpx; |
|
height: 72rpx; |
|
position: fixed; |
|
left: 40rpx; |
|
text-align: center; |
|
line-height: 72rpx; |
|
z-index: 99; |
|
image{ |
|
width: 36rpx; |
|
height: 36rpx; |
|
} |
|
} |
|
.container{ |
|
width: 100%; |
|
height: 2600rpx; |
|
overflow: hidden; |
|
background: url(https://qiniu.upload.gznl.top/c3478068-dcaf-4a09-86e8-f018700edd3d.png) no-repeat center; |
|
background-size: 100% 100%; |
|
padding-top: 360rpx; |
|
position: relative; |
|
} |
|
.float-light{ |
|
width: 70rpx; |
|
height: 154rpx; |
|
position: absolute; |
|
animation: lightMove 15s ease-in; |
|
animation-iteration-count: infinite; |
|
opacity: 0.4; |
|
} |
|
.float-light2{ |
|
animation: lightMove2 25s ease-in; |
|
animation-iteration-count: infinite; |
|
} |
|
.float-light3{ |
|
animation: lightMove3 20s ease-in; |
|
animation-iteration-count: infinite; |
|
} |
|
@keyframes lightMove{ |
|
0%{ |
|
bottom: -100rpx; |
|
left: 0rpx; |
|
} |
|
100%{ |
|
bottom: 100%; |
|
left: 500rpx; |
|
} |
|
} |
|
@keyframes lightMove2{ |
|
0%{ |
|
bottom: -200rpx; |
|
left: 300rpx; |
|
} |
|
100%{ |
|
bottom: 100%; |
|
left: 240rpx; |
|
} |
|
} |
|
@keyframes lightMove3{ |
|
0%{ |
|
bottom: -200rpx; |
|
left: 600rpx; |
|
} |
|
100%{ |
|
bottom: 100%; |
|
left: 0rpx; |
|
} |
|
} |
|
.tabs-box{ |
|
width: 685rpx; |
|
height: 95rpx; |
|
background: url(../../static/xyddImages/tabs-box-bg.png) no-repeat center; |
|
background-size: 100% 100%; |
|
margin: 0 auto; |
|
font-size: 32rpx; |
|
color: #CECECE; |
|
} |
|
.tabs-box .active{ |
|
font-size: 32rpx; |
|
color: #F7D08E; |
|
} |
|
.col-line{ |
|
width: 1rpx; |
|
height: 28rpx; |
|
background: #F7D08E; |
|
margin: 0 16rpx; |
|
} |
|
.content1-box .content1-top-box{ |
|
width: 685rpx; |
|
height: 350rpx; |
|
border: 2rpx solid #F7D08E; |
|
border-radius: 8rpx; |
|
margin: 36rpx auto 0; |
|
position: relative; |
|
} |
|
.content1-box .content1-top-box .top-box-content{ |
|
width: 534rpx; |
|
height: 314rpx; |
|
background: #FFDA9B; |
|
border: 2rpx solid #F7D08E; |
|
border-radius: 12rpx; |
|
box-sizing: border-box; |
|
padding: 20rpx 22rpx 12rpx 34rpx; |
|
font-size: 28rpx; |
|
color: #FFDCAB; |
|
position: relative; |
|
} |
|
.light-l-box{ |
|
width: 112rpx; |
|
height: 244rpx; |
|
background: url(../../static/xyddImages/light-bg.png) no-repeat center; |
|
background-size: 100% 100%; |
|
font-family: mFont; |
|
box-sizing: border-box; |
|
padding-top: 48rpx; |
|
text-align: center; |
|
} |
|
.light-l-box image{ |
|
width: 72rpx; |
|
height: 74rpx; |
|
display: block; |
|
margin: 0 auto; |
|
} |
|
.light-desc-box{ |
|
margin-left: 28rpx; |
|
font-family: mFont; |
|
} |
|
.light-desc-box .light-name{ |
|
font-size: 36rpx; |
|
line-height: 50rpx; |
|
color: #FF322D; |
|
} |
|
.current-year{ |
|
font-size: 28rpx; |
|
color: #FF9C10; |
|
margin: 6rpx 0 12rpx; |
|
line-height: 28rpx; |
|
} |
|
.light-desc{ |
|
font-size: 30rpx; |
|
line-height: 28rpx; |
|
color: #FF9C10; |
|
} |
|
.top-box-content .btn-box{ |
|
width: 232rpx; |
|
height: 48rpx; |
|
background: linear-gradient(180deg, #FFD190 0%, #E88739 100%); |
|
border-radius: 4rpx; |
|
text-align: center; |
|
line-height: 48rpx; |
|
color: #fff; |
|
font-size: 28rpx; |
|
position: absolute; |
|
bottom: 10px; |
|
left: 50%; |
|
margin-left: -122rpx; |
|
z-index: 10; |
|
} |
|
.right-image{ |
|
width: 234rpx; |
|
height: 200rpx; |
|
position: absolute; |
|
top: -70rpx; |
|
right: -30rpx; |
|
} |
|
.cloud1{ |
|
width: 212rpx; |
|
height: 212rpx; |
|
position: absolute; |
|
top: 140rpx; |
|
right: -30rpx; |
|
} |
|
.cloud2{ |
|
width: 422rpx; |
|
height: 212rpx; |
|
position: absolute; |
|
bottom: -60rpx; |
|
left: -40rpx; |
|
} |
|
.light-list-box{ |
|
width: 100%; |
|
box-sizing: border-box; |
|
padding: 0 32rpx; |
|
margin-top: 30rpx; |
|
} |
|
.light-item{ |
|
width: 202rpx; |
|
height: 228rpx; |
|
background: url(../../static/xyddImages/light-border.png) no-repeat center; |
|
background-size: 100% 100%; |
|
position: relative; |
|
font-family: mFont; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: center; |
|
align-items: center; |
|
margin-bottom: 46rpx; |
|
} |
|
.light-item .light-name{ |
|
position: absolute; |
|
left: 12rpx; |
|
top: 16rpx; |
|
font-size: 28rpx; |
|
color: #F7D08E; |
|
writing-mode:tb-rl; |
|
} |
|
.light-item .light-box{ |
|
width: 144rpx; |
|
height: 156rpx; |
|
} |
|
.light-item .btn{ |
|
width: 102rpx; |
|
height: 34rpx; |
|
} |
|
|
|
.content2-top-box{ |
|
width: 685rpx; |
|
min-height: 900rpx; |
|
background: #FFDA9B; |
|
border: 2rpx solid #F7D08E; |
|
border-radius: 12rpx; |
|
position: relative; |
|
margin: 50rpx auto 0; |
|
} |
|
.content2-top-box .right-image{ |
|
position: absolute; |
|
left: -60rpx; |
|
top: -100rpx; |
|
transform: rotateY(180deg) scale(0.9); |
|
} |
|
.content2-top-box .cloud2{ |
|
|
|
} |
|
.content2-top-box .title-box{ |
|
width: 466rpx; |
|
height: 104rpx; |
|
margin: 20rpx auto; |
|
} |
|
.content2-tabs-box{ |
|
font-size: 24rpx; |
|
color: #B5B5B5; |
|
padding: 0 28rpx; |
|
box-sizing: border-box; |
|
} |
|
.content2-tab-item-active{ |
|
border-bottom: 6rpx solid #F3B153; |
|
color: #000; |
|
} |
|
.lightUp-list{ |
|
height: 800rpx; |
|
padding: 0 28rpx; |
|
overflow-y: scroll; |
|
box-sizing: border-box; |
|
margin-top: 24rpx; |
|
} |
|
.lightUp-list .lightUp-item{ |
|
width: 632rpx; |
|
height: 218rpx; |
|
background: #FFE7BC; |
|
border-radius: 8rpx; |
|
font-size: 24rpx; |
|
margin-bottom: 32rpx; |
|
} |
|
.lightUp-item .light-l-box{ |
|
color: #FFDCAB; |
|
margin-left: 52rpx; |
|
margin-right: 36rpx; |
|
} |
|
.lightUp-item .light-l-box{ |
|
width: 100rpx; |
|
height: 200rpx; |
|
padding-top: 32rpx; |
|
} |
|
.lightUp-item .light-l-box image{ |
|
width: 68rpx; |
|
height: 70rpx; |
|
} |
|
.userInfo-box{ |
|
width: 286rpx; |
|
font-size: 24rpx; |
|
color: #292929; |
|
height: 100%; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: flex-start; |
|
} |
|
.userInfo-box .red{ |
|
color: #F53F3F; |
|
} |
|
.user-name{ |
|
margin-top: 30rpx; |
|
} |
|
.word{ |
|
margin-top: 32rpx; |
|
margin-bottom: 8rpx; |
|
line-height: 34rpx; |
|
} |
|
.lightUp-list .btn-box{ |
|
margin-left: 0; |
|
} |
|
.btn-box{ |
|
width: 148rpx; |
|
height: 59rpx; |
|
background: linear-gradient(180deg, #F7D08E 0%, #ECBE71 100%); |
|
border-radius: 12rpx; |
|
text-align: center; |
|
line-height: 59rpx; |
|
font-size: 24rpx; |
|
color: #fff; |
|
margin-left: 74rpx; |
|
margin-top: 50rpx; |
|
} |
|
.default{ |
|
background: #999; |
|
} |
|
|
|
</style>
|
|
|