besiweb/pages/temple/books.vue

<template>
	<view class="uni-main">
		<view class="sticky-nav">
			<view class="nav-box">
				<u-icon name="arrow-left" color="#000" size="48" @click="navBack()"></u-icon>
				<text class="title">填写资料</text>
			</view>
		</view>
		<uni-forms ref="form" :modelValue="formData">
			<view class="uni-forms-item" name="gd_name">
				<view class="title">功德主:</view>
				<input class="uni-input" name="gd_name" v-model="formData.gd_name" maxlength="20" placeholder="输入功德主姓名" />
			</view>
			<view class="uni-forms-item" name="ws_name">
				<view class="title">往生者:</view>
				<input class="uni-input" name="ws_name" v-model="formData.ws_name" maxlength="20" placeholder="输入往生者姓名" />
			</view>
			<view class="uni-forms-item" name="xy_content">
				<view class="title">心愿:</view>
				<textarea class="uni-textarea" rows="5" v-model="formData.xy_content" cols="6" name="xy_content" maxlength="200" placeholder="输入心愿内容" />
			</view>
			
		</uni-forms>
		<view class="uni-forms_check">
			<checkbox-group @change="checkboxChange">
				<label>
					<checkbox value="1" style="border-color: #ab820d !important;
		color: #ab820d !important;" :checked="formData.checked" />同意并接受<text class="agree"><navigator url="/pages/index/agree">服务协议</navigator></text>
				</label>
			</checkbox-group>
		</view>
		<view class="uni-forms_submit">
			<view class="uni-counts_box">
				<text class="uni-counts-title">合计：</text>
				<view class="uni-counts">
					<view class="count">
						<text class="total">{{formData.total}}券</text>
						<text>{{formData.coupon_give}}随喜券</text>
						<text>{{formData.coupon}}券费用</text>
					</view>
					<button type="default" class="submit-btn" @click="formSubmit()">提交</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					id: 0,
				},
				formData: {

				},
				// 表单数据
				tempFormData: {
					id: 0,
					gd_name: '',
					ws_name: '',
					xy_content: '',
					coupon_give: 0,
					coupon: 0,
					total: 0,
					checked: false,
				},
			}
		},
		onLoad(option) {
			let _uni = this
			_uni.info.id = option.id
			_uni.info.id  = typeof(_uni.info.id) != 'undefined'? _uni.info.id : 0;
			if(_uni.info.id<=0){
				uni.showToast({
					title: '活动参数错误',
					icon: 'none'
				})
				setTimeout(function(){
					uni.navigateBack({
						data: _uni.info.id,
					})
				}, 1200)
				
				return false;
			}
			
			if(option.num<=0){
				uni.showToast({
					title: '请先选择随喜券',
					icon: 'none'
				})
				setTimeout(function(){
					uni.navigateBack({
						data: _uni.info.id,
					})
				}, 1200)
				
				return false;
			}
			this.tempFormData.coupon_give = option.num;
			this.formData = Object.assign({}, this.tempFormData)
			this.getInfo(_uni.info.id)
		},
		methods: {
			navBack() {
				uni.navigateTo({
					url: '/pages/temple/activity?id='+this.info.id
				});
			},
			checkboxChange(data){
				this.formData.checked = data.detail.value[0]
			},
			getInfo(id) {
				let _uni = this
				this.$request.api('/api/activity/info', {id: id}).then(res => {
					if(res.success == true){
						_uni.info = res.data
						_uni.tempFormData.id = _uni.info.id
						_uni.tempFormData.coupon = parseInt(_uni.info.price)
						_uni.tempFormData.total = parseInt(parseInt(_uni.formData.coupon_give)+parseInt(_uni.info.price))
						_uni.formData = Object.assign({}, _uni.tempFormData)
					}
				}).catch(err => {
					uni.showToast({
						title: typeof(err.msg) != 'undefined'? err.msg : '服务器错误'
					})
				})
			},
			// 表单提交
			formSubmit() {
				let _uni = this
				if(this.formData.gd_name=='' || this.formData.gd_name==null){
					uni.showToast({
						title: '请填写功德主姓名',
						icon: 'none'
					})
					return false;
				}
				if(this.formData.ws_name=='' || this.formData.ws_name==null){
					uni.showToast({
						title: '请填写往生者姓名',
						icon: 'none'
					})
					return false;
				}
				if(this.formData.xy_content=='' || this.formData.xy_content==null || this.formData.xy_content.length<=1){
					uni.showToast({
						title: '请填写心愿内容',
						icon: 'none'
					})
					return false;
				}
				if(!this.formData.checked){
					uni.showToast({
						title: '请先阅读和勾选服务协议',
						icon: 'none'
					})
					return false;
				}
				
				// 提交
				uni.showLoading({
					title: '提交中...',
				})
				this.$request.api('/api/activity/books', _uni.formData).then(res => {
					uni.hideLoading();
					if(res.success == true){
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						_uni.formData = _uni.tempFormData
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(error => {
					uni.showToast({
						title: typeof(error.msg) != 'undefined'? error.msg : '服务器错误',
						icon: 'none'
					})
				})
			}
		},
	}
</script>

<style lang="less" >
	page {
		height: 100%;
		width: 100%;
	}
	.uni-main {
		width: 100%;
		height: 100%;
		background-color: #f1f1f1;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	}

	.sticky-nav {
		position: sticky;
		width: 100%;
		top: 0;
		z-index: 1;
		border-bottom: 1rpx solid rgb(229, 229, 229);
	}

	.nav-box {
		width: 100%;
		padding-top: 50rpx;
		display: flex;
		align-items: center;
		background: #fff;
		height: 100rpx;
		padding-bottom: 50rpx;

		/deep/.u-icon {
			margin-left: 20rpx !important;
		}

		.title {
			font-size: 38rpx;
			color: #000;
			width: 100%;
			text-align: left;
		}

		.right-icon {
			float: right;
			margin-right: 20rpx;
		}
	}

	.uni-forms {
		padding: 20rpx 20rpx;
		background-color: #fff;
	}

	.uni-forms-item .title {
		height: 60rpx;
		line-height: 60rpx;
		color: #905d11;
	}

	.uni-input {
		height: 60rpx;
		line-height: 60rpx;
		background-color: #f1f1f1;
		color: #e64340;
		padding: 4rpx 8rpx;
	}
	
	
	.uni-textarea {
		width: auto;
		color: #e64340;
		background-color: #f1f1f1;
		padding: 4rpx 8rpx;
	}
	.uni-forms_check {
		margin: 20rpx 20rpx 0rpx;
	}
	.agree * {
		display: inline-block;
		color: #d8ab37;
	}
	.uni-forms_submit {
		width: 100%;
		position: absolute;
		bottom: 0;
		background-color: #fff;
	}
	.uni-forms_submit .uni-counts {
		display: inline-block;
		float: right;
		font-size: 0;
	}
	.uni-counts-title {
		vertical-align: middle;
		margin: 0px 10rpx;
		line-height: 144rpx;
		font-size: 32rpx;
	}
	.uni-counts_box {
		overflow: hidden;
	}
	.uni-counts .count {
		font-size: 24rpx;
		display: inline-block;
		vertical-align: top;
		line-height: 36rpx;
		margin-top: 20rpx;
		margin-right: 4rpx;
	}
	.uni-counts .count .total {
		// font-weight: bold;
		font-size: 36rpx;
		color: #d8ab37;
	}
	.uni-counts .count uni-text {
		display: block;
	}
	.uni-counts .submit-btn {
		width: 180rpx;
		display: inline-block;
		background-color: #d8ab37;
		color: #fff;
		padding: 26rpx 4rpx;
		border-radius: 0;
	}
</style>