dxh/pages/applic/contribution2.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">
					<!-- <input type="text" placeholder="请选择捐款意向" @click="addType"/> -->
					<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="0.01-不限" 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>
				<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 class="box-item">
				<view class="box-left">
					<text class="imp">*</text>联系地址
				</view>
				<view class="box-right">
					<input   type="text" placeholder="请输入联系地址(用于寄发票)" v-model="address"/>
				</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="submit" @click="!payLoding ? 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>
		
	</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:'', // 按钮金额 弹窗金额
				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;
				// 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();
			},
			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();
				}					
			},
			// 是否实名公开
			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
				console.log('点击提交')
				
				if (!obj.intention) {
					this.$api.msg('请选择捐款意向！');
					return;
				}
				if (!obj.way) {
					this.$api.msg('请选择捐款方式！');
					return;
				}
				if (!obj.money) {
					this.$api.msg('请输入捐款金额！');
					return;
				}
				// if (!obj.mobile) {
				// 	this.$api.msg('请输入手机号！');
				// 	return;
				// }
				const reg = /^(\+?0?86-?)?1[\d]\d{9}$/;
				if (!reg.test(obj.mobile)) {
					obj.$api.msg('请填写正确的手机号码');
					return;
				}
				if (!obj.address) {
					this.$api.msg('请输入联系地址');
					return;
				}
				uni.showModal({ 
					title:'暂未开启捐款，请耐心等待',
				})
				// console.log('is_receipts',obj.is_receipts)
				// 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 }) => {
					// uni.showModal({
					// 	title:'触发点击',
					// 	content:JSON.stringify(data)
					// })
					// console.log(345,data)
					// 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('支付成功')
										// 		uni.navigateTo({
										// 			url: '/pages/donaSuccess/donaSuccess'
										// 		})
										// 	},
										// 	fail: function(res) {
										// 		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{
		.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{
		background-color: #E63931;
		color: #FFFFFF;
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 12rpx;
		margin: 52rpx;
	}
	.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;
			}
		}
	}
</style>