xhlred/pages/applic/contribution.vue

<template>
	<view class="content">
		<!-- <view class="top">
			爱心捐款
		</view> -->
		<view class="box">
			<view class="box-item">
				<view class="box-left">
					<text class="imp">*</text>捐款意向
				</view>
				<view class="box-right">
					<picker :value="index" @change="PickerDire" :range="chooseDire" class="box-right" @click="addType">
						<text>{{ intention || '请选择捐款意向'}}</text>
					</picker>
				</view>
			</view>
			<view class="box-item" v-if="intention == '其他'">
				<!-- <view class="box-left">
					<text class="imp">*</text>捐款意向
				</view> -->
				<!-- <view class="box-right"> -->
				<!-- <picker :value="index" @change="PickerDire" :range="chooseDire" class="box-right" @click="addType"> -->
				<input type="text" placeholder="请输入捐款意向" v-model="jkyx" />
				<!-- </picker> -->
				<!-- </view> -->
			</view>
			<view class="box-item">
				<view class="box-left">
					<text class="imp">*</text>捐款方式
				</view>
				<view class="box-right">
					<picker @change="PickerType" :value="index" :range="chooseType" class="box-right">
						<text>{{ way || '请选择捐款方式'}}</text>
					</picker>
				</view>
			</view>
			<!-- <view class="box-item">
					<view class="box-left">
						捐款金额
					</view>
					<view class="box-right">
						<picker @change="PickerMoney" :value="index" :range="chooseMoney" class="box-right">
							<text>{{ money || '请选择捐款金额'}}</text>
						</picker>
					</view>
			</view> -->
			<view class="box-item1" @click="tochooseMoney">
				<!-- <view class="box-item1" @click="tochooseMoney"> -->
				<view class="box-main">
					<view class="box-left">
						<text class="imp">*</text>捐款金额
					</view>
					<view class="box-right">
						<input type="text" placeholder="请选择金额" v-model="money" disabled />
						<!-- <picker @change="PickerMoney" :value="index" :range="chooseMoney" class="box-right">
							<text>{{ money || '请选择捐款金额'}}</text>
						</picker> -->
					</view>

				</view>

				<view class="box-bottom">
					个人捐款500元以上，单位捐款2000元以上可寄送纸质证书
				</view>
			</view>

		</view>
		<!-- <view class="infoOptional">
			信息(选填)
		</view> -->
		<view class="box">
			<view class="box-item">
				<view class="box-left">
					<view v-if="is_show">
						<text class="imp">*</text>姓名
					</view>
					<view v-else>
						<text class="imp">*</text>单位
					</view>
				</view>
				<view class="box-right">
					<input type="text" placeholder="请真实填写" v-model="donate_er" />
				</view>
			</view>
			<view class="box-item">
				<view class="box-left">
					<text class="imp">*</text>手机号
				</view>
				<view class="box-right">
					<input type="text" placeholder="请填写手机号" v-model="mobile" />
				</view>
			</view>
		</view>

		<view class="switch-box">
			<view class="switch-left">
				实名公开
			</view>
			<view class="switch-right">
				<switch :checked="is_public" color='#E63931' style="transform: scale(0.7,0.7)"
					@change="switch1Change" />
			</view>
		</view>

		<view class="switch-box">
			<view class="switch-left">
				寄证书
			</view>
			<view class="switch-right">
				<switch :checked="is_receipts" color='#E63931' style="transform: scale(0.7,0.7)"
					@change="switch2Change" />
			</view>

		</view>

		<view class="box">
			<view class="box-item">
				<view class="box-left">
					联系地址
				</view>
				<view class="box-right">
					<input type="text" placeholder="请输入联系地址" v-model="address" />
				</view>
			</view>
		</view>
		<view class="submit" @click="confirm()">
			立即提交
		</view>
		<uni-popup ref="popup" type="bottom" @click="close">
			<view class="popup_row">
				<view class="title">

					<view class="title-left">
						一份爱心，一份力量!
					</view>
					<view class="cancel" @click="cancel">
						<!-- <image src="../../static/img/取消.png" mode=""></image> -->
					</view>
				</view>
				<view class="money-btn">
					<view class="btn" v-for="item in moneyList" :key="item.id">
						<button type="default" @click="addmoney(item)">{{ item.money}}</button>
					</view>
				</view>
				<view class="pop-main">
					<view class="money-left">
						金额数
					</view>
					<view class="money-iup">
						<input type="text" value="" v-model="popmoney" placeholder="请选择金额或者自定义金额" />
					</view>
					<view class="">
						元
					</view>
				</view>
				<view class="comfirm">
					<view class="comfirm1" @click="comfirm1()">
						确认
					</view>
				</view>

			</view>
		</uni-popup>
		<uni-popup ref="popup1" type="center">
			<view class="popup-box">
				<!-- <view class="img">
					<image src="../../static/img/WechatIMG662.png" mode=""></image>
				</view> -->
				<view class="mian">
					<view class="delivery">
						支付失败
						<!-- {{ i18n.qrhwsdm }} -->
					</view>
					<view class="nocancel">
						请退出页面，重新登录
						<!-- {{ i18n.wfcx }} -->
					</view>
					<view class="comfirm-box">
						<view class="cancel" @click="cancel1">
							取消
						</view>
						<view class="comfirm" @click="comfirmExit()">
							确认
						</view>
					</view>
				</view>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	import {
		chosintention,
		joinDona
	} from '@/api/ask.js';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import {
		computedOrderkey,
		balance,
		createOrderkey,
		orderPay
	} from '@/api/money.js';
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		userinfo
	} from '@/api/user.js';
	export default {
		components: {
			uniPopup,
			// uniLoadMore
		},
		data() {
			return {
				index: 0,
				intention: '', // 捐款意向
				way: '', // 捐款方式
				money: '', // 捐款金额
				// elsemoney: '', // 其他金额
				popmoney: '', // 按钮金额 弹窗金额
				is_show: true,
				jkyx: '', //手动输入捐款意向
				moneyList: [{
						id: 0,
						money: 500
					},
					{
						id: 1,
						money: 200
					},
					{
						id: 2,
						money: 100
					},
					{
						id: 3,
						money: 50
					},
					{
						id: 4,
						money: 20
					},
				],
				is_public: true, // 是否实名公开
				is_receipts: false, // 是否开发票
				donate_er: '', // 捐款人/单位
				mobile: '', // 手机号
				isshowMoney: false, // 其他金额是否展示
				address: '', // 联系地址
				// chooseDire: ['请选择捐款意向','红十字人道事业（非定向捐赠）','疫情防控','其他','红十字博爱送万家','AED救护及科普','青少年生命安全教育基地建设项目','关注重度失能老人项目','青少年白血病救护项目','地芯行动-关爱地中海贫血儿童','会费缴纳'],
				chooseDire: [],
				chooseType: ['个人', '单位'],
				chooseMoney: ['5元', '10元', '50元', '其他金额'],
				payLoding: false, //判断是否支付中
				froms: '', //保存h5中数据来源对象
				type: '', //判断是否从订单中进入
				payName: 'weixin',
				// orderInfo: {},
			}
		},
		onLoad(options) {
			// console.log(333,options)
		},
		onShow() {
			if (!this.hasLogin) {
				// 登录拦截
				uni.showModal({
					title: '登录',
					content: '您未登录，是否马上登陆?',
					success: e => {
						if (e.confirm) {
							saveUrl()
							interceptor();
						}
					},
					fail: e => {
						console.log(e);
						uni.showModal({
							title: '错误',
							content: JSON.stringify(e),
						})
					}
				});
			} else {
				// this.loadData();
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'baseURL', 'hasLogin']),
			...mapState(['weichatObj']),
		},
		methods: {
			// 点击捐赠意向
			addType(e) {
				chosintention({}).then(({
					data
				}) => {
					console.log(data)
					this.chooseDire = data.map(item => item.title)
				}).catch()
			},
			// 选择捐赠意向
			PickerDire: function(e) {
				console.log(334, this.chooseDire)
				this.intention = this.chooseDire[e.target.value];
				this.index = e.target.value + 1;
			},
			// 选择捐款方式
			PickerType: function(e) {
				this.way = this.chooseType[e.target.value];
				this.index = e.target.value + 1;
				console.log('选择捐款方式', this.index)
				if (this.index == 1) {
					this.is_show = true
				} else {
					this.is_show = false
				}
				// if ( )
			},
			// 选择捐款金额
			PickerMoney: function(e) {
				this.money = this.chooseMoney[e.target.value];
				this.index = e.target.value + 1;
				console.log('选择金额', this.money)
				if (this.money == '其他金额') {
					this.isshowMoney = true
				} else {
					this.isshowMoney = false
					this.elsemoney = ''
				}

			},
			// 其他金额 选择
			tochooseMoney: function() {
				this.$refs.popup.open();
			},
			addmoney(mon) {
				console.log('点击金额按钮', mon.money)
				this.popmoney = mon.money
				console.log(123, this.popmoney)
			},
			cancel() {
				this.$refs.popup.close();
			},
			cancel1() {
				this.$refs.popup1.close();
			},
			comfirm1: function() {
				let obj = this
				if (obj.popmoney.toString().trim() == '') {
					console.log('输入框为空')
				} else {
					console.log('输入框为不为空')
					obj.money = obj.popmoney
					obj.popmoney = ''
					this.$refs.popup.close();
				}
			},
			comfirmExit() {
				console.log('点击comfirmExit')
				this.$refs.popup1.close()
				uni.switchTab({
					url: '/pages/home/home'
				});

			},
			// 是否实名公开
			switch1Change(e) {
				this.is_public = e.detail.value
				console.log(this.is_public)
			},
			//是都寄发票
			switch2Change(e) {
				this.is_receipts = e.detail.value
				console.log('is_receipts', this.is_receipts)
			},
			// 提交
			confirm: async function() {
				let obj = this
				if(!obj.intention) {
					return this.$api.msg('请选择捐款意向！');
				}else {
					if(obj.intention == '其他') {
						if(obj.jkyx == '') {
							return this.$api.msg('请输入捐款意向！');
						}
					}
				}
				if (!obj.way) {
					this.$api.msg('请选择捐款方式！');
					return;
				}
				if (!obj.money) {
					this.$api.msg('请输入捐款金额！');
					return;
				}
				if (this.is_show) {
					if (!obj.donate_er) {
						this.$api.msg('请填写您的姓名');
						return;
					}
				} else {
					if (!obj.donate_er) {
						this.$api.msg('请填写您的单位');
						return;
					}
				}

				const reg = /^(\+?0?86-?)?1[\d]\d{9}$/;
				if (!reg.test(obj.mobile)) {
					obj.$api.msg('请填写正确的手机号码');
					return;
				}
				if (this.is_receipts == true) {
					// obj.address = '用户未填写联系地址'
					if (!obj.address) {
						this.$api.msg('请输入联系地址');
						return;
					}
				}

				if (!obj.address) {
					obj.address = '用户未填写联系地址'
				}
				createOrderkey({
					money: obj.money, //捐款金额
					intention: obj.intention == '其他' ? obj.jkyx : obj.intention, //捐款意向
					way: obj.way, //捐款方式
					is_public: obj.is_public, //是否实名公开
					is_receipts: obj.is_receipts, //是否开发票
					donate_er: obj.donate_er, //捐款人/单位
					mobile: obj.mobile, //手机号
					address: obj.address, //联系地址
				}).then(({
					data
				}) => {
					console.log(345, data)
					console.log(666, obj)
					let res = data.result.jsConfig;
					console.log(res)
					// 仅作为示例，非真实参数信息。
					obj.weichatObj.chooseWXPay({
						timestamp: res.timestamp,
						nonceStr: res.nonceStr,
						package: res.package,
						signType: res.signType,
						paySign: res.paySign,
						success: function(res) {
							// obj.$api.msg('支付成功')
							let date = new Date()
							let year = date.getFullYear()
							let month = date.getMonth() >= 9 ? date.getMonth() + 1 : '0' + (date
								.getMonth() + 1)
							let day = date.getDate() >= 10 ? date.getDate() : '0' + date.getDate()
							uni.navigateTo({
								url: '/pages/form/donaSuccess?money=' + obj.money +
									'&name=' + obj.donate_er + '&time=' + year + '年' +
									month + '月' + day + '日'
							})
						},
						fail: function(res) {
							this.$refs.popup1.open()
							console.log(res, "失败")
							console.log(res.errMsg)
						}
					});
				})
				// 支付中
				obj.payLoding = true;
			}
		},
	}
</script>

<style lang="scss">
	.content {}

	.top {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #E63931;
		color: #FFFFFF;
		padding: 22rpx 0;
	}

	.box {
		margin-top: 10rpx;

		.box-item2 {
			background-color: #FFFFFF;
			padding: 18rpx 24rpx;
			// display: flex;
			border-bottom: 1rpx solid #F2F2F2;

			.box-left {
				color: #E63931;
			}

			.box-info {
				text-indent: 68rpx;
				margin-top: 16rpx;
				color: #7b7b7b;
			}

			.box-phone {
				text-indent: 68rpx;
				margin-top: 6rpx;
				// text-align: center;
				color: #7b7b7b;
			}
		}

		.box-item1 {
			background-color: #FFFFFF;
			padding: 18rpx 24rpx;
			// display: flex;
			border-bottom: 1rpx solid #F2F2F2;

		}

		.box-main {
			display: flex;

			.box-left {
				width: 200rpx;
				flex-shrink: 0;
				// flex: 0;
			}

			.box-right {
				width: 100%;
				color: #999999;
				text-align: right;
			}
		}

		.box-bottom {
			color: #999999;
			// padding-left: 12rpx;
			padding-top: 12rpx;
			font-size: 26rpx;
		}

		.box-item {
			background-color: #FFFFFF;
			padding: 24rpx;
			display: flex;
			border-bottom: 1rpx solid #F2F2F2;
		}

		.box-left {
			width: 200rpx;
			flex-shrink: 0;

			// flex: 0;
			.imp {
				color: #E63931;
				margin-right: 2rpx;
			}
		}

		.box-right {
			width: 100%;
			color: #999999;
			text-align: right;
		}
	}

	.switch-box {
		margin-top: 24rpx;
		display: flex;
		align-items: center;
		padding: 16rpx 24rpx;
		color: #7b7b7b;
		background-color: #FFFFFF;
		border-bottom: 1rpx solid #F2F2F2;
		justify-content: space-between;

		.switch-right {
			// background-color: #E63931;
		}
	}

	.infoOptional {
		padding: 20rpx 24rpx;
	}

	.submit {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 750rpx;
		height: 100rpx;
		background: #FA7E67;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.popup_row {
		height: 500rpx;
		width: 100%;
		padding: 24rpx;
		background-color: #FFFFFF;

		.title {
			border-bottom: 2rpx solid #F2F2F2;
			color: #E63931;
			font-size: 32rpx;
			padding-left: 4rpx;
			padding-bottom: 16rpx;
			display: flex;
			justify-content: space-between;

			// align-items: center;
			.cancel {
				width: 36rpx;
				height: 36rpx;

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		.money-btn {
			display: flex;
			justify-content: space-around;
			margin-top: 28rpx;

			.btn {
				// 	width: 20%;
				// 	display: flex;
				// 	button{
				// 		background-color: #FFFFFF;
				// 	}
			}
		}

		.pop-main {
			margin-top: 32rpx;
			font-size: 34rpx;
			display: flex;

			.money-left {
				// width: 100rpx;
				padding: 0 6rpx;
				flex-shrink: 0;
				color: #E63931;
				// background-color: #457DBF;
			}

			.money-iup {
				width: 100%;
				padding-left: 22rpx;

				input {
					font-size: 32rpx;
					// color: #1B1B1B;
					color: #FF9797;

					.input-placeholder {
						// height: 70rpx;
						font-size: 32rpx;
						color: #FF9797;
					}
				}

				// background-color: pink;
			}
		}

		.comfirm {
			display: flex;
			justify-content: flex-end;
			margin-top: 54rpx;

			.comfirm1 {
				padding: 12rpx 24rpx;
				border-radius: 12rpx;
				color: #FFFFFF;
				background-color: #E63931;
			}
		}
	}

	.popup-box {
		width: 522rpx;
		height: 605rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;

		.img {
			border-radius: 20rpx 20rpx 0 0;
			width: 522rpx;
			height: 307rpx;

			image {
				border-radius: 20rpx 20rpx 0 0;
				width: 522rpx;
				height: 307rpx;
			}
		}

		.mian {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 32rpx 32rpx;
			background-color: #FFFFFF;
			border-radius: 0 0 20rpx 20rpx;
			text-align: center;

			.delivery {
				font-size: 36rpx;
				color: #333333;
				// margin-top: 46rpx;
			}

			.nocancel {
				font-size: 30rpx;
				color: #999999;
				margin-top: 26rpx;
			}

			.comfirm-box {
				margin-top: 52rpx;
				display: flex;
				// margin-bottom: 32rpx;

				// justify-content: space-around;
				.cancel {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 197rpx;
					height: 61rpx;
					border: 1px solid #C90F1B;
					border-radius: 31rpx;

					font-size: 24rpx;
					color: #C90F1B;
				}

				.comfirm {
					margin-left: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 197rpx;
					height: 61rpx;
					background: #FA7E67;
					border-radius: 31px;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}
	}
</style>