chanyishenghuo-uniapp/pages/diandeng/lighting.vue

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