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.

454 lines
10 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="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>