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.
453 lines
10 KiB
453 lines
10 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="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>
|
|
|