newjzred/pages/cart/hyjj.vue

<template>
	<view class="content">
		<!-- <view class="top">
			爱心捐款
		</view> -->
		<view class="box">
			<!-- <view class="box-item" v-if="!isHelp">
				<view class="box-left">
					<text class="imp">*</text>捐款意向
				</view>
				<view class="box-right">
					<picker :value="index" @change="PickerDire" :range="chooseDire" class="box-right">
						<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="" v-model="jjtype" disabled/>
					<!-- <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">
				<!-- <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 />
					</view>
				</view>
			</view>

		</view>
		<!-- <view class="infoOptional">
			信息(选填)
		</view> -->
		<view class="box">
			<view class="box-item">
				<view class="box-left">
					<view v-if="jjtype == '个人会员'">
						<text class="imp">*</text>姓名
					</view>
					<view v-if="jjtype == '团体会员'">
						<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="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';
		import { getVipmoney, createOrder } from '@/api/index.js'
	export default {
		components: {
			uniPopup,
			// uniLoadMore
		},
		data() {
			return {
				mid: '',
				jjtype: '',//会员类型
				index: 0,
				intention: '', // 捐款意向
				category_id: '', // 捐款意向ID
				way: '', // 捐款方式
				way_id: '', // 捐款方式id
				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: '0', // 是否实名公开
				is_receipts: '1', // 是否开发票
				public: true, // 是否实名公开
				receipts: false, // 是否开发票
				donate_er: '', // 捐款人/单位
				mobile: '', // 手机号
				isshowMoney: false, // 其他金额是否展示
				address: '', // 联系地址
				// chooseDire: ['请选择捐款意向','红十字人道事业（非定向捐赠）','疫情防控','其他','红十字博爱送万家','AED救护及科普','青少年生命安全教育基地建设项目','关注重度失能老人项目','青少年白血病救护项目','地芯行动-关爱地中海贫血儿童','会费缴纳'],
				chooseDire: [],
				chooseList: [], //捐款意向真实列表
				chooseType: ['个人', '单位'],
				chooseMoney: ['5元', '10元', '50元', '其他金额'],
				payLoding: false, //判断是否支付中
				froms: '', //保存h5中数据来源对象
				type: '', //判断是否从订单中进入
				payName: 'weixin',
				// orderInfo: {},
				help_id: 0,
				isHelp: false,
				order_name: '',
			}
		},
		onLoad(options) {
			// console.log(333,options)
			if (options.helpid) {
				this.help_id = options.helpid
				this.order_name = options.order_name
				this.isHelp = true
			}
			if(options.type == 1) {
				this.jjtype = '个人会员'
			}else {
				this.jjtype = '团体会员'
			}
		},
		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();
				userinfo({}).then(({
					data
				}) => {
					// this.setUserInfo(data);
					// this.to_phone = data.mobile || ''
				
				});
				this.getVipmoney()
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'baseURL', 'hasLogin']),
			...mapState(['weichatObj']),
		},
		methods: {
			getVipmoney() {
				let obj = this
				getVipmoney().then(({
					data
				}) => {
					console.log(data, 'getVipmoney');
					data.forEach(e => {
						if (e.name == obj.jjtype) {
							obj.money = e.pay_price;
							obj.mid = e.id;
							console.log(obj.money, obj.mid)
						}
					});
				});
			},
			// 点击捐赠意向
			// addType(e) {
			// 	chosintention({}).then(({
			// 		data
			// 	}) => {
			// 		this.chooseDire = data.map(item => {
			// 			console.log(item.name,item.name.indexOf('红十字会'),'++++++++++++')
			// 			if(item.name.indexOf('红十字会') != -1) {
			// 				return item.name
			// 			}
			// 		})
			// 		this.chooseList = data.map(item => {
			// 			if(item.name.indexOf('红十字会') != -1) {
			// 				return item
			// 			}
			// 		})
			// 	}).catch()
			// },
			// 选择捐赠意向
			PickerDire: function(e) {
				console.log(334, e)
				this.intention = this.chooseDire[e.target.value];
				this.category_id = this.chooseList[e.target.value].id;
			},
			// 选择捐款方式
			PickerType: function(e) {
				this.way = this.chooseType[e.target.value];
				this.way_id = e.target.value;
				this.index = e.target.value;
				console.log('选择捐款方式', this.way_id)
				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.public = e.detail.value
				console.log(e.detail.value,'e.detail.value')
				if (e.detail.value) {
					this.is_public = '1'
				} else {
					this.is_public = '0'
				}
				console.log(this.is_public)
			},
			//是都寄发票
			switch2Change(e) {
				this.is_receipts = e.detail.value
				if (e.detail.value) {
					this.is_receipts = '1'
				} else {
					this.is_receipts = '0'
				}
				console.log('is_receipts', this.is_receipts)
			},
			// 提交
			confirm: async function() {
				let obj = this
				if (obj.jjtype == '团体会员') {
					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;
				}
				
				uni.showModal({
					title: '提示',
					content: '续费' + obj.jjtype + '需要缴交' + obj.money + '元年费，是否续费',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							createOrder({
								level_id: obj.mid,
								body: '红会年费',
								pay_type: 0,
								// name: obj.name,
								pay_price: obj.money,
								from: 'weixin'
							}).then(({data}) =>{
								let res = data.jsConfig;
								obj.weichatObj.chooseWXPay({
									timestamp: res.timestamp,
									nonceStr: res.nonceStr,
									package: res.package,
									signType: res.signType,
									paySign: res.paySign,
									success: function(res) {
										// uni.navigateTo({
										// 	url: '../joinSuc/joinNow'
										// });
										// obj.loadBaseData()
										uni.showModal({
											title:'提示',
											content: '续费成功'
										})
									},
									fail: function(res) {
										console.log(res, "失败")
										console.log(res.errMsg)
									}
								});
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			}
		},
	}
</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>