DaFoSi-H5/pages/home/home.vue

<template>
	<view class="content u-flex-col u-col-center">
		<view v-if="temple=='大佛寺'" class="u-flex u-row-center" style="width: 750rpx;height: 136rpx;">
			<u-image width="357rpx" height="82rpx" src="../../static/home/title.png"></u-image>
		</view>
		<u-image v-if="temple=='能仁寺'" width="750rpx" height="136rpx" src="../../static/home/nr.jpg"></u-image>
		<u-image v-if="temple=='百花寺'" width="750rpx" height="136rpx" src="../../static/home/bh.jpg"></u-image>
		<u-image width="750rpx" height="356rpx" src="../../static/home/top.jpg"></u-image>
		<u-form class="form u-m-t-30" ref="uForm">
			<u-form-item label="功德主" labelWidth="120rpx" :border-bottom="false" :label-style="labelStyle" prop="master">
				<u-input class="ipt" v-model="form.master" :border="true" :clearable="false" placeholder="" borderColor="#562511"></u-input>
			</u-form-item>
			<u-form-item label="付款人" labelWidth="120rpx" :border-bottom="false" :label-style="labelStyle" prop="name">
				<u-input class="ipt" v-model="form.name" :border="true" :clearable="false" placeholder="" borderColor="#562511"></u-input>
			</u-form-item>
			<u-form-item label="手机" labelWidth="120rpx" :border-bottom="false" :label-style="labelStyle" prop="phone">
				<u-input class="ipt" type="number" v-model="form.phone" :border="true" :clearable="false" placeholder="" borderColor="#562511"></u-input>
			</u-form-item>
			<u-form-item label="祝福语" labelWidth="120rpx" :border-bottom="false" :label-style="labelStyle" prop="wish">
				<u-input
					class="ipt"
					v-model="form.wish"
					type="textarea"
					:autoHeight="true"
					:border="true"
					:clearable="false"
					placeholder="请填写祝福语,最多20个字!"
					borderColor="#562511"
				></u-input>
			</u-form-item>
		</u-form>

		<view class="u-flex u-m-t-30 u-m-l-50 category-title">
			<view class="title">乐捐项目</view>
			<view class="title">功德金额</view>
		</view>

		<view class="u-m-t-20 u-m-l-50">
			<view class="a u-m-t-15 u-flex-col" v-for="(item, index) in categories" :key="index">
				<view class="b u-flex">
					<view class="category u-flex">
						<view class="item" @click="showSelect(index)">
							
							{{item.category}}
							<!-- <u-input
								class="ipt"
								v-model="item.category"
								type="select"
								:border="true"
								:clearable="false"
								placeholder=""
								borderColor="#562511"
								@click="showSelect(index)"
							></u-input> -->
						</view>
						
						<view class="item u-m-l-10" @click="showKeyboardFunc(index)">{{item.amount}}</view>
						
						<!-- <u-input
							class="ipt u-m-l-10"
							v-model="item.amount"
							type="number"
							:border="true"
							:clearable="false"
							:disabled="true"
							placeholder=""
							borderColor="#562511"
							@click="showKeyboardFunc(index)"
						></u-input> -->
					</view>
					<u-icon v-if="index > 0" name="minus" color="#562511" class="u-m-l-10" @click="reduce(index)"></u-icon>
				</view>

				<view class="line u-m-t-15"></view>
			</view>
		</view>

		<view class="bottom u-flex u-col-top">
			<view class="add u-flex u-row-center" @click="add">+ 新增捐赠</view>
			<view class="sure u-flex u-row-center" @click="sure">确认支付</view>
		</view>

		<u-gap height="150"></u-gap>

		<u-select v-model="show" :list="list" @confirm="selectComleted"></u-select>
		<u-keyboard mode="number" :tips="tips" @change="valChange" @backspace="backspace" v-model="showKeyboard"></u-keyboard>
	</view>
</template>

<script>
export default {
	data() {
		return {
			browser: '',
			temple: '',
			machineNo: '',
			form: {
				master: '',
				name: '',
				phone: '',
				wish: ''
			},
			list: [],
			show: false,
			showKeyboard: false,
			tips: '',
			index: 0,
			categories: [
				{
					category: '',
					amount: ''
				}
			],
			labelStyle: {
				fontWeight: 'bold',
				fontSize: '36rpx',
				color: '#562511'
			}
		};
	},
	onLoad() {
		this.browser = this.browserJudgment();

		if (this.browser == 'Other') {
			uni.redirectTo({
				url:'../error/error'
			})
		}
		
		

		this.getTempleAndMachineNo();

		this.getCategories();
		
		if(this.temple === '能仁寺'){
			uni.reLaunch({
				url:'../underMaintenance/underMaintenance'
			})
		}
	},
	methods: {
		valChange(val) {
			if ('.' == val) {
				if ('' == this.categories[this.index].amount || this.categories[this.index].amount.indexOf('.') > -1) {
					return;
				}
			}
			if (this.categories[this.index].amount.indexOf('.') > -1) {
				if (this.categories[this.index].amount.split('.')[1].length >=2) {
					return;
				}
			}
			this.categories[this.index].amount += val;
			this.tips = this.categories[this.index].amount;
			console.log(this.categories[this.index].amount);
			
		},
		backspace() {
			if (this.categories[this.index].amount.length) this.categories[this.index].amount = this.categories[this.index].amount.substr(0, this.categories[this.index].amount.length - 1);
			this.tips = this.categories[this.index].amount;
			console.log(this.categories[this.index].amount);
		},
		browserJudgment() {
			var userAgent = navigator.userAgent.toLowerCase();
			if (userAgent.match(/Alipay/i) == 'alipay') {
				return 'Ali';
			} else if (userAgent.match(/MicroMessenger/i) == 'micromessenger') {
				return 'Wx';
			} else {
				return 'Other';
			}
		},
		getTempleAndMachineNo() {
			var url = window.location.href;
			console.log(url);
			console.log(url.indexOf('temple'));
			if (url.indexOf('temple') > -1) {
				var obj = this.getAllUrlParams(url);
				this.machineNo = obj.machineNo;
				switch (obj.temple) {
					case '1':
						this.temple = '大佛寺';
						break;
					case '2':
						this.temple = '能仁寺';
						break;
					case '3':
						this.temple = '百花寺';
						break;
				}
				
			}
		},
		getAllUrlParams(url) {
			var obj = {};
			if (!url) {
				return obj;
			}
			url = url.split('?')[1];
			var arr = url.split('&');
			for (var i = 0; i < arr.length; i++) {
				// 分离成key:value的形式
				var a = arr[i].split('=');
				var paramName = a[0];
				var paramValue = a[1];
				obj[paramName] = paramValue;
			}
			return obj;
		},
		getCategories() {
			this.$u
				.post('http://dafosi.zhihuizongjiao.cn:7878/api/app/getcategories', {
					temple: this.temple
				})
				.then(res => {
					if (1 == res.code) {
						this.list = res.data;
					}
				});
		},
		donation() {
			var register = JSON.stringify(this.categories);
			var amount = 0;
			for (var i = 0; i < this.categories.length; i++) {
				amount += parseFloat(this.categories[i].amount);
			}
			this.$u
				.post('http://dafosi.zhihuizongjiao.cn:7878/api/app/donation', {
					browser: this.browser,
					temple: this.temple,
					master: this.form.master,
					name: this.form.name,
					phone: this.form.phone,
					wish: this.form.wish,
					register,
					amount,
					machineNo: this.machineNo
				})
				.then(res => {
					if (1 == res.code) {
						// 登记成功
						// 跳转支付
						window.location.href = res.data.url;
					} else {
						// 登记失败
						uni.showModal({
							title: '登记出错',
							content: res.msg
						});
					}
				});
		},
		add() {
			var obj = new Object();
			obj.category = '';
			obj.amount = '';
			this.categories.push(obj);
		},
		reduce(index) {
			this.categories.splice(index, 1);
		},
		showSelect(index) {
			this.index = index;
			this.show = true;
		},
		showKeyboardFunc(index) {
			this.tips = '';
			this.index = index;
			this.showKeyboard = true;
		},
		selectComleted(e) {
			this.categories[this.index].category = e[0].label;
		},
		sure() {
			var flag = true;
			console.log(this.categories)
			for (var i = 0; i < this.categories.length; i++) {
				var obj = this.categories[i];
				console.log(obj.amount)
				if (obj.category == '' || obj.amount == '' || obj.amount == '0') {
					flag = false;
				}
			}
			if (flag) {
				if (this.form.wish.length > 20) {
					uni.showModal({
						title: '温馨提示',
						content: '祝福语最多20个字！',
						showCancel: false
					});
					return;
				}
				this.donation();
			} else {
				uni.showModal({
					title: '温馨提示',
					content: '乐捐项目或功德金额为空!',
					showCancel: false
				});
			}
		}
	}
};
</script>

<style lang="scss">
.content {
	width: 100vw;
	min-height: 100vh;
	background: url(../../static/home/background.png);
	background-size: cover;

	.form {
		width: 500rpx;
		.ipt {
			background: #ffffff;
			color: '#562511';
		}
	}

	.category-title {
		width: 600rpx;
		.title {
			width: 50%;
			height: 100%;
			color: #562511;
			font-size: 36rpx;
			font-weight: bold;
			text-shadow: 2rpx 3rpx 1rpx #ffffff;
		}
	}

	.a {
		width: 600rpx;
		.b {
			width: 600rpx;
			.category {
				width: 550rpx;
				.item {
					width: 270rpx;
					height: 60rpx;
					background: #ffffff;
					color: '#562511';
					border-radius: 5rpx;
					border: solid #562511 0.25rpx;
					line-height: 60rpx;
					padding-left: 20rpx;
				}
				// .ipt {
				// 	background: #ffffff;
				// 	color: '#562511';
				// 	background: #ff0000;
				// }
			}
		}

		.line {
			width: 550rpx;
			height: 2rpx;
			background: #562511;
		}
	}

	.bottom {
		position: fixed;
		bottom: 0rpx;
		width: 750rpx;
		height: 100rpx;
		color: #562511;
		font-size: 36rpx;
		font-weight: bold;
		.add {
			width: 50%;
			height: 100%;
			background: #e8d19d;
			border: solid #562511 0.25rpx;
			border-radius: 10rpx;
		}
		.sure {
			width: 50%;
			height: 100%;
			background: #e8d19d;
			border: solid #562511 0.25rpx;
			border-radius: 10rpx;
		}
	}
}
</style>