tongchengred/pages/index/pay.vue

<template>
	<view class="content">
		<view class="tc-wrap">
			<view class="" style="text-align: center;font-size: 28rpx;font-weight: bold;padding: 20rpx;">
				世界因你而美好
			</view>
			<view class="" style="text-align: center;font-size: 24rpx;padding-top: 10rpx;color: red;">
				每月不高于500
			</view>
			<!-- <view class="tit flex">
				<view class="">
					捐款金额
				</view>
				<image src="../../static/icon/cl.png" mode="" @click="closeTc"></image>
			</view> -->
			<view class="m-list flex">
				<view class="mitem" v-for="item in list" :class="{'action': item == money}" @click="money = item">
					￥{{item}}/月
				</view>
			</view>
			<view class="sy-wrap flex">
				<input type="number" placeholder="请输入自定义金额" class="user-inp" v-if="diy" v-model="money" />
				<view class="user-inp" v-if="!diy" @click="diy = true">自定义金额</view>
				<view @click="sy" class="flex" style="align-items: center;">
					<image src="../../static/icon/re.png" mode="" class="re"></image>
					<view class="sy">
						随缘
					</view>
				</view>

			</view>
			<view class="line">
				
			</view>
			<view class="jz-info">
				<view class="tit1">
					捐赠方式
				</view>
				<picker @change="PickerType" :value="index" :range="chooseType" class="box-right">
					<view class="inp" >{{way}}</view>
				</picker>
			</view>
			<view class="jz-info">
				<view class="tit1">
					{{way === '个人'?'捐赠人':'捐赠单位'}}<text>*</text>
				</view>
				<input type="text" :placeholder="'请输入'+ (way === '个人'?'捐赠人':'捐赠单位')" class="inp" v-model="donate_er" />
			</view>
			<view class="jz-info">
				<view class="tit1">
					手机号码
				</view>
				<input type="text" placeholder="请输入手机号码" class="inp" v-model="mobile" />
			</view>
			<view class="" style="text-align: center;padding: 20rpx;">
				<checkbox style="transform:scale(0.7)"  :checked="isok" @click="changeOK" />我已阅读并同意<text
					style="color: #4768c9;" @click="openxy">用户协议</text>
			</view>
			<view class="" style="text-align: center;font-size: 24rpx;padding-top: 10rpx;color: red;">
				开通月捐后，每月自动扣费，可随时取消
			</view>
			
			<view class="go" @click="go">
				确认支付{{money}}元/月
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="xy">
				<p style="text-align: center; "><span style="font-size: 9px;">&nbsp;&nbsp;&nbsp;&nbsp;</span><span
						style="white-space: pre;"></span><span style="font-size: 18px;">用户协议</span></p>
				<p> </p>
				<p>&nbsp; 尊敬的付款人/捐款人，当您准备转账时，您应明确如下事项：</p>
				<p> </p>
				<p> </p>
				<p>&nbsp;
					（一）您已经年满18周岁或具备完全民事行为能力，或者您是在中国大陆地区合法开展经营活动或其他业务的法人或其他组织；本协议内容不受您所属国家或地区法律的排斥。不具备该条件的，您应立即停止支付行为。
				</p>
				<p> </p>
				<p>&nbsp;
					（二）您在使用该系统时，应自行判断收款发起方是否是完全民事行为能力人或是否为有资格进行收款的主体，您应自行判断发起方及其关联方是否有履约能力。并自行决定是否与对方进行交易或转账给对方等，且您应自行承担与此相关的所有风险。
				</p>
				<p> </p>
				<p>&nbsp; （三）您认可，您已经充分阅读、了解收款发起方、收款方发起方的主体资质、发布的内容或者提供的商品或服务。您认可您的支付行为完全出于自愿。</p>
				<p> </p>
				<p>&nbsp;
					（四）您同意，您通过该系统上发生的所有交易或支付，您不可撤销地授权由本单位按照制定的相应规则进行处理；同时本单位有权获取您的相关信息（包括但不限于交易商品、服务描述、物流信息、行为信息、账户相关信息等）。您确认，您使用灵析服务时，您仍应完全遵守本服务协议及本单位制定的各项规则及页面提示等。
				</p>
				<p> </p>
				<p>&nbsp; （五）本单位特别提示：</p>
				<p> </p>
				<p>&nbsp; 您所转出的款项将进入收款发起方账户，或发起方指定的收款人的账户。基于此项服务可能存在的风险, 在使用转账服务时, 您理解并接受:&nbsp;</p>
				<p> </p>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;<span style="white-space:pre"></span>1.&nbsp; 使用交易或转账服务是基于您对收款发起方与转账原因的充分了解,
					一旦您选用转账服务进行转账, 您应当自行承担因您指示错误(失误)。而导致的风险。本单位依照您指示的收款方并根据本协议的约定完成转账后,
					即完成了当次服务的所有义务。对于收付款双方之间产生的关于当次转账的任何纠纷不承担任何责任, 也不提供任何形式的纠纷解决途径, 您应当自行处理相关的纠纷。</p>
				<p> </p>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;<span style="white-space:pre"></span>2.&nbsp;
					本单位并非银行或其它金融机构，本服务也非金融业务，本协议项下的资金移转均通过银行或第三方支付平台（包括支付宝、财付通、微信支付、银联在线、Paypal）来实现，你理解并同意您的资金在流转途中需要时间，本单位无法保障资金流转时间。
				</p>
				<p> </p>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;3.&nbsp;
					非经特别说明，本协议中“收款发起方”是指发起收费项目的收款的主体，收费项目包括但不限于：收费活动、销售商品或服务、众筹、募款，系实际收款的支配方。“收款方”是指您的资金所汇入的账户方，收款方既可以是收款发起方，也可以是收款发起方指定的第三方。
				</p>
				<p> </p>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;<span style="white-space:pre"></span>4.&nbsp;
					本单位并非银行或其他金融机构，亦不是收款方。因此事实上无法提供退款服务，您的款项一旦转出，将不可通过本单位撤销，如有疑问，请直接与收款发起方或收款方联系沟通。</p>
				<p> </p>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;5.&nbsp; 本单位根据业务需求，有权随时对本协议条款进行调整，无需单独通知您，请您在转款之前，请认真阅读本协议。</p>
				<p>（六）您同意：</p>
				<p> </p>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;1.&nbsp; 本单位仅对该系统中列明的责任承担范围负责。&nbsp;</p>
				<p> </p>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;<span style="white-space:pre"></span>2.&nbsp;
					您因交易或转账所产生的任何风险应由您与收款发起方承担。&nbsp;</p>
				<p> </p>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;3.&nbsp; 本单位不对交易标的及本服务提供任何形式的保证，包括但不限于以下事项：&nbsp;</p>
				<p> </p>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;<span style="white-space:pre"></span>（1）本服务符合您的需求。&nbsp;</p>
				<p> </p>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;<span style="white-space:pre"></span>（2）本服务不受干扰、及时提供或免于出错。&nbsp;</p>
				<p> </p>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;<span
						style="white-space:pre"></span>（3）您经由本服务购买或取得之任何产品、服务、资讯或其他资料符合您的期望。&nbsp;</p>
				<p> </p>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;<span
						style="white-space:pre"></span>（4）您经由本服务之使用下载或取得任何资料，应由您自行考量且自负风险，因资料之下载而导致您电脑系统之任何损坏或资料流失，您应负完全责任。&nbsp;
				</p>
				<p> </p>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;<span
						style="white-space:pre"></span>（5）您自本单位及本单位工作人员或经由本服务取得之建议和资讯，无论其为书面或口头形式，均不构成本单位对本服务之保证。</p>
				<p> </p>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;<span
						style="white-space:pre"></span>（6）除本单位另有规定外，在任何情况下，本单位对本协议所承担的违约赔偿责任总额不超过向您收取的当次服务费用总额。</p>
				<p> </p>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;<span
						style="white-space:pre"></span>（7）您充分知晓并同意本单位可能同时为您及您的（交易）对手方提供本服务，您同意对本单位可能存在的该等行为予以明确豁免，并不得以此来主张本单位在提供本服务时存在法律上的瑕疵。
				</p>
				<p>&nbsp;&nbsp;&nbsp;&nbsp;（8）除本单位另有规定或另行同意外，您对本单位的委托及向本单位发出的指令均不可撤销。</p>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	
	import {
		createSign
	} from '@/api/money.js';
	export default {
		data() {
			return {
				mobile: '',
				address:'',
				way: '个人', // 捐款方式
				way_id: 0, // 捐款方式id
				index:0,
				chooseType: ['个人', '单位'],
				donate_er: '',
				isok: false,
				isShowBase: false,
				diy: false,
				isOpen: false,
				money: 100,
				umoney: '',
				list: [50, 100, 200],
				description: '',
				art: {},
				id: 0,
				plan_id:0,
				order_name:''
			}
		},
		computed: {
			...mapState(['weichatObj']),
			...mapState('user',['userInfo']),
		},
		onLoad(opt) {
			this.plan_id = opt.id
			this.order_name = opt.tit
			this.donate_er = this.userInfo.nickname
		},
		methods: {
			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 ( )
			},
			sy() {
				this.diy = true
				this.money = Math.floor(Math.random() * 500) + 1;
			},
			openxy() {
				this.$refs.popup.open()
			},
			changeOK(e) {
				// console.log(e);
				this.isok = !this.isok
			},
			go() {
				if (this.isok) {
					// uni.showModal({
					// 	title: '提示',
					// 	content: '功能审核中...',
					// 	success(res) {
					// 		if (res.confirm) {
					// 			console.log('用户点击确定');
					// 		} else if (res.cancel) {
					// 			console.log('用户点击取消');
					// 		}

					// 	}
					// })
					this.confirm()
				} else {
					uni.showModal({
						title: '提示',
						content: '请先阅读并同意用户协议',
						success(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}

						}
					})
				}

			},
			confirm() {
				let obj = this
			// 	if (!obj.way) {
			// 		this.$api.msg('请选择捐款方式！');
			// 		return;
			// 	}
			// 	if (!obj.money) {
			// 		this.$api.msg('请输入捐款金额！');
			// 		return;
			// 	}
			// 	if (obj.public) {
			// 		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 == '0') {
			// 		// obj.address = '用户未填写联系地址'
			// 		if (!obj.address) {
			// 			this.$api.msg('请输入联系地址');
			// 			return;
			// 		}
			// 	}
			
			// 	if (!obj.address) {
			// 		obj.address = '用户未填写联系地址'
			// 	}
			// 	if (!obj.isHelp) {
			// 		if (!obj.intention) {
			// 			this.$api.msg('请选择捐款意向');
			// 			return;
			// 		}
			// 	}
				let updata = {
					amount: obj.money, //捐款金额
					name: obj.donate_er, //捐款人/单位
					tel: obj.mobile, //手机号
					address: obj.address, //联系地址
					is_open: 1, //是否实名公开
					is_ticket: 0, //是否开发票
					pay_type: 0, //支付方式0微信1支付宝
					type: obj.way_id,
					plan_id: obj.plan_id
				}
				// if (obj.isHelp) {
				// 	updata.help_id = obj.help_id
					updata.order_name = obj.order_name
				// } else {
				// 	updata.order_name = obj.intention //捐款意向
				// 	updata.category_id = obj.category_id //捐款意向id
				// }
				createSign(updata).then(({
					data
				}) => {
					let res = data.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) {
							
							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 + '日'
							// })
							uni.navigateTo({
								url:'/pages/index/thank?money=' + obj.money +'&name=' + obj.donate_er + '&time=' + encodeURI(year + '年' + month + '月' + day + '日') + '&order_name=' + encodeURI(obj.order_name)
							})
							
						},
						fail: function(res) {
							// this.$refs.popup1.open()
							console.log(res, "失败")
							console.log(res.errMsg)
						}
					});
				})
				// 支付中
				obj.payLoding = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
		height: 100%;
	}

	.tc-wrap {
		width: 750rpx;
		// height: 578rpx;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0 0;
		padding: 0 31rpx 66rpx 32rpx;

		.tit {
			height: 114rpx;
			align-items: center;
			justify-content: space-between;
			font-weight: bold;
			font-size: 42rpx;
			color: #1E2B31;
			border-bottom: 1px solid #EDF0F2;

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

		.m-list {
			justify-content: space-between;
			padding: 30rpx 0;

			.mitem {
				width: 215rpx;
				line-height: 96rpx;
				background: #FFFFFF;
				border-radius: 5rpx;
				border: 1px solid #78919d;
				text-align: center;
				font-weight: bold;
				font-size: 29rpx;
				color: #1E2B31;
			}

			.action {
				background: #fdecee;
				border: 1px solid #ed3142;
				color: #ED3142;
			}

		}

		.sy-wrap {
			align-items: center;
			justify-content: space-between;
		}

		.user-inp {
			display: inline-block;
			width: 554rpx;
			height: 81rpx;
			line-height: 81rpx;
			background: #FFFFFF;
			border-radius: 5rpx;
			border: 1px solid #78919d;
			text-align: center;
			font-weight: bold;
			font-size: 29rpx;
			color: #1E2B31;
		}

		.re {
			width: 30rpx;
			height: 30rpx;
			margin-left: 33rpx;
			margin-right: 14rpx;
		}

		.sy {
			font-weight: bold;
			font-size: 29rpx;
			color: #0C0C0C;
		}

		.go {
			width: 100%;
			line-height: 94rpx;
			background: #f3392c;
			border-radius: 46rpx;
			text-align: center;
			font-weight: bold;
			font-size: 33rpx;
			color: #FFFFFF;
			margin-top: 20rpx;
		}
	}

	.xy {
		width: 600rpx;
		height: 700rpx;
		// overflow: hidden;
		background-color: #fff;
		border-radius: 40rpx 30rpx;
		padding: 20rpx;
		overflow: auto;
		line-height: 1.5;

	}
	.jz-info {
		padding: 20rpx 0;
		.tit1 {
			font-size:28rpx;
			padding-bottom: 10rpx;
			text {
				color:red;
			}
		}
		.inp {
			width: 690rpx;
			height: 81rpx;
			line-height: 81rpx;
			background: #FFFFFF;
			border-radius: 5rpx;
			border: 1px solid #78919d;
			text-align: center;
			font-weight: bold;
			font-size: 29rpx;
			color: #1E2B31;
		}
	}
	.line {
		width: 100%;
	}
</style>