ltred/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">
				<view class="box-left">
					<text class="imp">*</text>
					捐款方式
				</view>
				<view class="box-right">
					<!-- <input type="text" placeholder="请选择捐款方式" /> -->
					<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">根据捐赠意愿点击生成捐赠证书、感谢信同时可以联系红十字会出具纸质证书和发票</view>
			</view>
		</view>
		<!-- <view class="infoOptional">
			信息(选填)
		</view> -->
		<view class="box" v-if="is_public">
			<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,
			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() {
		saveUrl();
		// let token = uni.getStorageSync('token');
		console.log(1, this);
		// uni.showModal({
		// 	title: '判断hasLogin',
		// 	content: JSON.stringify(this.hasLogin),
		// })
		if (!this.hasLogin) {
			// 登录拦截
			// interceptor();
			uni.showModal({
				title: '登录',
				content: '您未登录，是否马上登陆?',
				success: e => {
					if (e.confirm) {
						interceptor();
					}
				},
				fail: e => {
					console.log(e);
					uni.showModal({
						title: 'cuowu',
						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.way) {
				this.$api.msg('请选择捐款方式！');
				return;
			}
			if (!obj.money) {
				this.$api.msg('请输入捐款金额！');
				return;
			}
			if (obj.is_public) {
				const reg = /^(\+?0?86-?)?1[\d]\d{9}$/;
				if (!reg.test(obj.mobile)) {
					obj.$api.msg('请填写正确的手机号码');
					return;
				}
				if (this.is_show) {
					if (!obj.donate_er) {
						this.$api.msg('请填写您的姓名');
						return;
					}
				} else {
					if (!obj.donate_er) {
						this.$api.msg('请填写您的单位');
						return;
					}
				}
			}
			if (this.is_receipts) {
				if (!obj.address) {
					this.$api.msg('请输入联系地址');
					return;
				}
			} else {
				if (!obj.address) {
					obj.address = '用户未填写联系地址';
				}
			}

			console.log(obj.is_public, '11111');
			createOrderkey({
				money: obj.money, //捐款金额
				intention: 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('支付成功')
						if (obj.is_public) {
							uni.navigateTo({
								url: '/pages/form/donaSuccess?money=' + obj.money + '&name="' + obj.donate_er + '"'
							});
						} else {
							uni.navigateTo({
								url: '/pages/form/donaSuccess?money=' + obj.money
							});
						}
					},
					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: #f3392c;
	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: #c90f1b;
				border-radius: 31px;
				font-size: 24rpx;
				color: #ffffff;
			}
		}
	}
}
</style>