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
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>
|