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.

535 lines
13 KiB

3 years ago
<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>