54 changed files with 2097 additions and 379 deletions
@ -0,0 +1,57 @@
|
||||
import request from "@/utils/request"; |
||||
|
||||
/** |
||||
* 获取祈福灯列表 |
||||
*/ |
||||
export function getLightList(data) { |
||||
return request.post("/BlessingLamp/listBlessingLamp", data); |
||||
} |
||||
|
||||
/** |
||||
* 获取祈福灯广场 |
||||
*/ |
||||
export function blessingList(data) { |
||||
return request.get("/Blessing/blessingList?type="+data); |
||||
} |
||||
|
||||
/** |
||||
* 获取我的祈福灯 |
||||
*/ |
||||
export function myBlessings(data) { |
||||
return request.get("/Blessing/myBlessings"); |
||||
} |
||||
|
||||
/** |
||||
* 为他人祈福 |
||||
*/ |
||||
export function blessingOthers(data) { |
||||
return request.post("/Blessing/blessingOthers",data); |
||||
} |
||||
|
||||
/** |
||||
* 获取祈福灯详情 |
||||
*/ |
||||
export function blessingLampDetail(data) { |
||||
return request.get("/BlessingLamp/blessingLampDetail?id=" + data); |
||||
} |
||||
|
||||
/** |
||||
* 点灯 |
||||
*/ |
||||
export function addBlessing(data) { |
||||
return request.post("/Blessing/addBlessing", data); |
||||
} |
||||
|
||||
/** |
||||
* 万年历 |
||||
*/ |
||||
export function getWanniali(data) { |
||||
return request.get("/Wannianli/getWanniali?date", data); |
||||
} |
||||
|
||||
/** |
||||
* 点灯开关 |
||||
*/ |
||||
export function getBlessingFlag(data) { |
||||
return request.get("/getBlessingFlag", data); |
||||
} |
||||
@ -1,10 +1,11 @@
|
||||
// export const VUE_APP_API_URL = 'http://natapp.xinxintuan.co/api';
|
||||
// export const VUE_APP_API_URL = 'https://wxapi.yixiang.co/api'
|
||||
// export const VUE_APP_API_URL = 'http://139.186.134.205:9006/api'
|
||||
// export const VUE_APP_API_URL = 'http://192.168.0.114:8088/api'
|
||||
export const VUE_APP_API_URL = 'https://www.cyjyyjy.com/api' |
||||
export const VUE_APP_API_URL = 'http://192.168.0.114:8088/api' |
||||
// export const VUE_APP_API_URL = 'https://www.cyjyyjy.com/api'
|
||||
// export const VUE_APP_API_URL = 'http://natapp.xinxintuan.co/api';
|
||||
// export const VUE_APP_API_URL = 'https://thapi.xinxintuan.co/api'
|
||||
// export const VUE_APP_API_URL = 'https://h5api.xinxintuan.co/api';
|
||||
// export const VUE_APP_API_URL = 'https://h5api.xinxintuan.co/api';
|
||||
export const VUE_APP_RESOURCES_URL = 'https://h5.yixiang.co/static' |
||||
|
||||
@ -0,0 +1,534 @@
|
||||
<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> |
||||
@ -0,0 +1,453 @@
|
||||
<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="content-box content1-box"> |
||||
<view class="content1-top-box acea-row row-center-wrapper"> |
||||
<view class="right-image"><image src="https://qiniu.upload.gznl.top/3a51ab9e-3b02-4dca-aec3-7c7f00a2b6cb.png" ></view> |
||||
<view class="form-box"> |
||||
<form action="" method="post"> |
||||
<view class="input-box"> |
||||
<text class="label-box">您的姓名</text> |
||||
<input type="text" placeholder="请输入姓名" v-model="form.blessingPersonRealname"/> |
||||
</view> |
||||
<view class="input-box"> |
||||
<text class="label-box">出生日期</text> |
||||
<picker mode="date" :value="form.blessingPersonBirth" :start="startDate" :end="endDate" @change="bindDateChange"> |
||||
<view class="input">{{form.blessingPersonBirth}}</view> |
||||
</picker> |
||||
</view> |
||||
<view class="input-box noBorder"> |
||||
<text class="label-box">您的愿望</text> |
||||
<textarea type="text" placeholder="请输入心中愿望（140字以内）" v-model="form.blessingContent" maxlength="140"></textarea> |
||||
</view> |
||||
</form> |
||||
</view> |
||||
</view> |
||||
<view class="radio-box acea-row row-middle"> |
||||
<text>在祈福灯广场显示：</text> |
||||
<radio-group @change="radioChange" class="acea-row row-middle"> |
||||
<label class="radio acea-row row-middle"> |
||||
<radio value="1" :checked="form.isShow == 1" /><text>显示</text> |
||||
</label> |
||||
<label class="radio acea-row row-middle"> |
||||
<radio value="0" :checked="form.isShow == 0" /><text>不显示</text> |
||||
</label> |
||||
</radio-group> |
||||
</view> |
||||
<view class="submit-btn" @click="lightingHandler">我要点灯</view> |
||||
</view> |
||||
<!-- 我的祈福灯 --> |
||||
<view class="content-box content2-box"> |
||||
<view class="content2-top-box"> |
||||
<view class="tips-box">温馨提示：{{lightDetail.lampName}}祈福扣除{{lightDetail.lampPrice}}积分</view> |
||||
<view class="cloud2"><image src="https://qiniu.upload.gznl.top/f442f228-c6e8-4491-a8cf-feff34be6f61.png" ></view> |
||||
<view class="top-box-content"> |
||||
<view class="acea-row-nowrap"> |
||||
<view class="light-box"> |
||||
<view class="light-l-box"> |
||||
<image :src="lightDetail.lampPic" alt=""> |
||||
<text>{{lightDetail.lampName}}</text> |
||||
</view> |
||||
</view> |
||||
<view class="light-desc-box"> |
||||
<view class="light-name">{{lightDetail.lampName}}介绍</view> |
||||
<view class="light-desc">{{lightDetail.lampDetail}}</view> |
||||
</view> |
||||
</view> |
||||
<view class="effect-box mt50"> |
||||
<view class="light-name">时效</view> |
||||
<view class="words">{{lightDetail.lightDays}}天</view> |
||||
</view> |
||||
<view class="effect-box"> |
||||
<view class="light-name">适用对象：</view> |
||||
<view class="words">对2021年有着美好期待的人，所有祈求好运的人。</view> |
||||
</view> |
||||
<view class="effect-box"> |
||||
<view class="light-name">祈福提示：</view> |
||||
<view class="words">祈福点灯后，在点灯期限内您的许愿灯将会一直长明在“我的祈福灯”您可以随时查看，如果您选择公开展示您的祈福灯，则祈福灯会同时出现在“祈福广场”中，与其它朋友的祈福灯一直常明。</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { addBlessing, blessingLampDetail } from '@/api/diandeng.js' |
||||
export default{ |
||||
data(){ |
||||
return { |
||||
id:null, |
||||
form:{ |
||||
blessingPersonRealname:'', |
||||
blessingPersonBirth:'2021-7-20', |
||||
blessingContent:'', |
||||
isShow: 1 |
||||
}, |
||||
CustomBar: this.CustomBar, |
||||
lightDetail:{} |
||||
|
||||
} |
||||
}, |
||||
onLoad(){ |
||||
this.id = this.$yroute.query.id; |
||||
this.blessingLampDetail(); |
||||
}, |
||||
mounted(){ |
||||
|
||||
}, |
||||
methods: { |
||||
blessingLampDetail(){ |
||||
blessingLampDetail(this.id).then(res=>{ |
||||
if(res.success){ |
||||
this.lightDetail = res.data |
||||
} |
||||
}) |
||||
}, |
||||
bindDateChange: function(e) { |
||||
this.form.blessingPersonBirth = e.target.value; |
||||
}, |
||||
lightingHandler(){ |
||||
var that = this; |
||||
this.form.blessingLampId = this.id; |
||||
if(that.form.blessingPersonRealname == ''){ |
||||
uni.showToast({ |
||||
title: '请填写姓名！', |
||||
icon: 'none' |
||||
}) |
||||
return |
||||
} |
||||
if(that.form.blessingContent == ''){ |
||||
uni.showToast({ |
||||
title: '请填写您的愿望！', |
||||
icon: 'none' |
||||
}) |
||||
return |
||||
} |
||||
uni.showModal({ |
||||
title: '提示', |
||||
content: '是否确认点灯？', |
||||
success: function (res) { |
||||
if (res.confirm) { |
||||
addBlessing(that.form).then((res)=>{ |
||||
if(res.success){ |
||||
uni.showToast({ |
||||
title: '操作成功！', |
||||
duration:1500 |
||||
}) |
||||
setTimeout(()=>{ |
||||
uni.navigateBack({ |
||||
delta:1 |
||||
}) |
||||
},1500) |
||||
} else{ |
||||
uni.showToast({ |
||||
title: res.msg, |
||||
icon: 'none', |
||||
duration:1500 |
||||
}) |
||||
} |
||||
}) |
||||
} else if (res.cancel) { |
||||
console.log('用户点击取消'); |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
radioChange(e){ |
||||
// console.log(e) |
||||
this.form.isShow = e.detail.value |
||||
}, |
||||
backPrevPage(){ |
||||
uni.navigateBack({ |
||||
delta: 1 |
||||
}) |
||||
}, |
||||
} |
||||
} |
||||
</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; |
||||
z-index: 99; |
||||
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; |
||||
} |
||||
} |
||||
.content1-box .content1-top-box{ |
||||
width: 685rpx; |
||||
height: 350rpx; |
||||
border-radius: 8rpx; |
||||
margin: 36rpx auto 0; |
||||
position: relative; |
||||
background: #FFDA9B; |
||||
box-sizing: border-box; |
||||
padding: 24rpx 24rpx 0; |
||||
} |
||||
.form-box{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.input-box{ |
||||
font-size: 30rpx; |
||||
color: #F8560E; |
||||
display: flex; |
||||
align-items: center; |
||||
width: 100%; |
||||
height: 68rpx; |
||||
border-bottom: 2rpx solid #FFCC84; |
||||
} |
||||
.input-box .label-box{ |
||||
margin-right: 32rpx; |
||||
} |
||||
.input-box input{ |
||||
background: transparent; |
||||
height: 100%; |
||||
border:0; |
||||
outline:none; |
||||
color: #414141; |
||||
} |
||||
.input{ |
||||
color: #414141; |
||||
} |
||||
.noBorder{ |
||||
border: none; |
||||
} |
||||
.input-box textarea{ |
||||
width: 72%; |
||||
padding-top: 4rpx; |
||||
height: 100%; |
||||
background: transparent; |
||||
border:0; |
||||
outline:none; |
||||
color: #414141; |
||||
} |
||||
.radio-box{ |
||||
font-size: 24rpx; |
||||
color: #FFDEAF; |
||||
justify-content: flex-end; |
||||
padding-right: 34rpx; |
||||
box-sizing: border-box; |
||||
padding-top: 28rpx; |
||||
} |
||||
.radio{ |
||||
margin-right: 20rpx; |
||||
} |
||||
.submit-btn{ |
||||
width: 360rpx; |
||||
height: 64rpx; |
||||
background: linear-gradient(180deg, #F7D08E 0%, #ECBE71 100%); |
||||
text-align: center; |
||||
line-height: 64rpx; |
||||
color: #fff; |
||||
border-radius: 12rpx; |
||||
font-size: 36rpx; |
||||
margin: 40rpx 0; |
||||
position: relative; |
||||
left: 50%; |
||||
margin-left: -180rpx; |
||||
} |
||||
.content2-box .top-box-content{ |
||||
padding: 0 68rpx; |
||||
height: 314rpx; |
||||
background: #FFDA9B; |
||||
border-radius: 12rpx; |
||||
box-sizing: border-box; |
||||
padding: 10rpx 22rpx 50rpx 34rpx; |
||||
font-size: 28rpx; |
||||
color: #FFDCAB; |
||||
} |
||||
.mt50{ |
||||
margin-top: 50rpx; |
||||
} |
||||
.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; |
||||
} |
||||
.light-name{ |
||||
font-size: 36rpx; |
||||
line-height: 44rpx; |
||||
color: #F18D00; |
||||
margin-bottom: 16rpx; |
||||
} |
||||
.current-year{ |
||||
font-size: 28rpx; |
||||
color: #FF9C10; |
||||
margin: 6rpx 0 12rpx; |
||||
line-height: 24rpx; |
||||
} |
||||
.light-desc{ |
||||
font-size: 28rpx; |
||||
line-height: 46rpx; |
||||
color: #232323; |
||||
} |
||||
.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; |
||||
margin: -30rpx auto; |
||||
} |
||||
.right-img{ |
||||
width: 234rpx; |
||||
height: 200rpx; |
||||
position: absolute; |
||||
top: -70rpx; |
||||
right: -30rpx; |
||||
} |
||||
.cloud1{ |
||||
width: 212rpx; |
||||
height: 212rpx; |
||||
position: absolute; |
||||
top: 14rpx; |
||||
right: -30rpx; |
||||
} |
||||
.cloud2{ |
||||
width: 422rpx; |
||||
height: 212rpx; |
||||
position: absolute; |
||||
bottom: -60rpx; |
||||
left: -40rpx; |
||||
} |
||||
|
||||
.content2-top-box{ |
||||
width: 685rpx; |
||||
min-height: 972rpx; |
||||
background: #FFDA9B; |
||||
border: 2rpx solid #F7D08E; |
||||
border-radius: 12rpx; |
||||
position: relative; |
||||
margin: 0rpx auto 0; |
||||
} |
||||
|
||||
.effect-box{ |
||||
margin-bottom: 20rpx; |
||||
.light-name{ |
||||
font-size: 34rpx; |
||||
} |
||||
} |
||||
|
||||
.words{ |
||||
font-size: 28rpx; |
||||
color: #232323; |
||||
line-height: 42rpx; |
||||
} |
||||
|
||||
.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; |
||||
} |
||||
|
||||
.tips-box{ |
||||
font-size: 24rpx; |
||||
margin: 20rpx 0; |
||||
color: #F93030; |
||||
text-align: center; |
||||
} |
||||
|
||||
</style> |
||||
|
Before Width: | Height: | Size: 511 B After Width: | Height: | Size: 615 B |
|
Before Width: | Height: | Size: 825 B After Width: | Height: | Size: 629 B |
|
Before Width: | Height: | Size: 562 B After Width: | Height: | Size: 511 B |
|
Before Width: | Height: | Size: 642 B After Width: | Height: | Size: 578 B |
|
After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1007 B |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 912 B |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 662 B |
|
After Width: | Height: | Size: 228 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 8.0 KiB |
|
After Width: | Height: | Size: 7.6 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
Loading…
Reference in new issue