wlred/pages/applic/contribution.vue

<template>
	<view class="content">
		<!-- <view class="top">
			爱心捐款
		</view> -->
		<view class="jg" style="height: 43rpx;"></view>
		<view class="nav flex">
			<view class="nav-item" v-for="(item,indez) in navList" :class="{'action': currentIndex == indez}"
				@click="navClick(indez)">
				{{item.tit}}
			</view>
		</view>
		<template v-if="currentIndex == 1">
			<view class="tit">
				捐赠意向
			</view>
			<picker :value="jkindex" @change="PickerDire" :range="chooseDire" class="choose-yx-box">
				<view class="">{{ intention || '请选择捐款意向'}}</view>
			</picker>
			<view class="list-box" v-for="(item,index) in gyList" :key='index' @click="Jump(item)"
				v-if="item.title == intention">
				<view class="box-left">
					<image :src="item.image_input[0]" mode="" class="left-img"></image>
				</view>
				<view class="box-right">
					<view class="right-top word1_ellipsis">
						{{item.title}}
					</view>
					<view class="right-center">
						{{item.synopsis}}
					</view>
					<!-- <view class="right-foot">
						已阅读人数：{{item.visit || 0}}
					</view> -->
				</view>
			</view>
		</template>
		<template v-if="currentIndex == 0">
			<view class="tit">
				类型
			</view>
			<picker :value="index" @change="PickerHf" :range="hfList" class="choose-yx-box">
				<view class="">{{ hfType || '请选择会费类型'}}</view>
			</picker>
		</template>
		<view class="tit">
			{{currentIndex == 1? '捐款方式' : '缴费方式'}}
		</view>
		<picker :value="index" @change="PickerType" :range="chooseType" class="choose-yx-box">
			<view class="">{{ way || '请选择捐款方式'}}</view>
		</picker>
		<view class="tit">
			{{currentIndex == 1? '捐赠者' : '缴费者'}}
		</view>
		<template v-if="currentIndex == 1">
			<view class="flex" style="align-items: center;">
				<input type="text" placeholder="请输入姓名" v-model="donate_er" v-if="way=='个人'" class="name-ipt" />
				<input type="text" placeholder="请输入单位名称" v-model="donate_er" v-else class="name-ipt" />
				<view class="">
					<switch :checked="!is_public" color='#E63931' style="transform: scale(0.7,0.7)"
						@change="switch1Change" />匿名捐赠<br />
					<switch :checked="is_receipts" color='#E63931' style="transform: scale(0.7,0.7)"
						@change="switch2Change" />寄发票
				</view>
			</view>
		</template>

		<template v-if="currentIndex == 0">
			<input type="text" placeholder="请输入姓名" v-model="donate_er" v-if="way=='个人'" class="name-ipt name-ipt-t" />
			<input type="text" placeholder="请输入单位名称" v-model="donate_er" v-else class="name-ipt name-ipt-t" />
		</template>
		<input type="text" placeholder="请输入手机号" v-model="mobile" class="name-ipt name-ipt-t"
			style="margin: 40rpx 0 40rpx 30rpx" />
		<view class="tit">
			{{currentIndex == 1? '捐赠金额' : '缴费金额'}}
		</view>
		<input type="text" placeholder="请输入金额" v-model="money" class="name-ipt name-ipt-t money-box" />
		<template v-if="is_receipts">
			<view class="tit">
				联系地址
			</view>
			<input type="text" placeholder="请输入联系地址" v-model="address" class="name-ipt name-ipt-t" />
		</template>


		<view class="submit" @click="confirm()">
			立即提交
		</view>

		<template v-if="currentIndex == 1 ">
			<view class="tit">
				爱心榜
			</view>
			<scroll-view class="love-wrap" scroll-y @scrolltolower="getLoveList()">
				<view class="love-item" v-for="item in loveList">
					<view class="itemt clamp">
						{{item.donate_er}}
					</view>
					<view class="itemt clamp" style="text-align: center;">
						{{item.pay_time | time}}
					</view>
					<view class="itemt clamp" style="text-align: right;">
						￥{{item.money}}
					</view>
				</view>
				<uni-load-more :status="loadingType"></uni-load-more>
			</scroll-view>
			<view class="" style="height: 20rpx;">

			</view>
		</template>

		<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 {
		getArticleList
	} from '@/api/index.js'
	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 {
		loveList
	} from '@/api/order.js'
	export default {
		filters: {
			time(val) {
				let str = ''
				if (val) {
					let date = new Date(val * 1000)
					let y = date.getFullYear()
					let m = date.getMonth() + 1
					let d = date.getDate()
					return str = y + '/' + m + '/' + d
				}
				return str
			}
		},
		components: {
			uniPopup,
			// uniLoadMore
		},
		watch: {
			currentIndex(newValue, oldValue) {
				if (newValue == 0) {
					uni.setNavigationBarTitle({
						title: '会费缴纳'
					})
				} else if (newValue == 1) {
					uni.setNavigationBarTitle({
						title: '在线捐赠'
					})
				} else if (newValue == 2) {
					uni.setNavigationBarTitle({
						title: '我的记录'
					})
				}

			}
		},
		data() {
			return {
				jkindex: '',
				hfType: '',
				hfList: [],
				navList: [{
						tit: '会费缴纳',
					},
					{
						tit: '在线捐赠',
					},
					// {
					// 	tit: '我的记录',
					// }
				],
				currentIndex: 0,
				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',
				loveList: [],
				page: 1,
				limit: 20,
				loadingType: 'more',
				loaded: false,
				gyList: []

				// orderInfo: {},
			}
		},
		onLoad(options) {
			// console.log(333,options)
			if (options.key) {
				this.intention = options.key
			}
			this.getYxList()
			this.getLoveList()
			this.getGyList()
			this.currentIndex = 1
		},
		onShow() {
			// this.getYxList()

			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: {
			// 获取公益项目
			getGyList() {
				getArticleList({
					page: 1,
					limit: 20
				}, 17).then(({
					data
				}) => {
					console.log(data, '17')
					this.gyList = data.list
				})
			},
			Jump(item) {
				console.log(item.url, 'item.url')
				
				if (item.url != '') {
					window.location.href = item.url
				} else {
					uni.navigateTo({
						url: '/pages/article/detail?id=' + item.id
					})
				}

			},
			ceshi() {
				window.location.href = 'weixin://dl/business/?t=gLuI4kyK2mj'
			},
			getLoveList() {
				let obj = this
				if (obj.loadingType == 'loading' || obj.loadingType == 'noMore') {
					return
				}
				obj.loadingType = 'loading'
				loveList({
					page: this.page,
					limit: this.limit
				}).then(res => {
					console.log(res, 'loveList')
					this.loveList = this.loveList.concat(res.data.list)
					this.page++
					if (res.data.list.length == this.limit) {
						this.loadingType = 'more'
					} else {
						this.loadingType = 'noMore'
					}
					obj.loaded = true
				})
			},
			navClick(indez) {
				this.currentIndex = indez
			},
			//获取捐赠意向
			getYxList() {
				chosintention({}).then(({
					data
				}) => {
					console.log(data)

					let arr = data.filter(item => {
						return item.title.indexOf('会费') == -1
					})
					let arr2 = data.filter(item => {
						return item.title.indexOf('会费') != -1
					})
					this.hfList = arr2.map(item => item.title)
					this.hfType = this.hfList[0]
					this.chooseDire = arr.map(item => item.title)

					if (!this.intention) {
						this.intention = this.chooseDire[0]
					}

					console.log(this.chooseDire, 'filter')
				}).catch()
			},
			// 点击捐赠意向
			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;
			},
			PickerHf(e) {
				// console.log(334, this.chooseDire)
				this.hfType = this.hfList[e.target.value];
			},
			// 选择捐款方式
			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 (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.currentIndex == 0 ? obj.hfType : 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('支付成功')
							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: 675rpx;
		height: 95rpx;
		background: #ff5c5c;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 40rpx auto;
		border-radius: 10rpx;
	}

	.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;
				}
			}
		}
	}

	.nav {
		height: 84rpx;
		width: 660rpx;

		margin: auto;
		color: #ff5c5c;
		font-size: 32rpx;
		font-weight: bold;

		.nav-item {
			flex-grow: 1;
			line-height: 84rpx;
			text-align: center;
			border: 1px solid #ff5c5c;
		}

		.action {
			background-color: #ff5c5c;
			color: #fff;
		}
	}

	.tit {
		font-size: 34rpx;
		font-weight: bold;
		padding-left: 30rpx;
		margin: 40rpx 0;
	}

	.choose-yx-box {
		width: 676rpx;
		height: 92rpx;
		border: 1px solid #989898;
		background-color: #dddddd;
		margin-left: 30rpx;

		view {
			line-height: 92rpx;
			width: 676rpx;
			height: 92rpx;
			padding-left: 28rpx;
			font-size: 32rpx;
		}

	}

	.name-ipt {
		width: 470rpx;
		height: 120rpx;
		font-size: 32rpx;
		line-height: 120rpx;
		border: 1px solid #989898;
		padding-left: 30rpx;
		margin-left: 30rpx;
		background-color: #ffffff;
	}

	.name-ipt-t {
		width: 676rpx;
	}

	.money-box {
		position: relative;

		&::after {
			content: '元';
			position: absolute;
			top: 0;
			bottom: 0;
			right: 20rpx;
			margin: auto;
		}
	}

	.love-wrap {
		width: 693rpx;
		height: 380rpx;
		margin: auto;
		border-radius: 10rpx;
		background-color: #fff;

		.love-item {
			height: 60rpx;
			line-height: 60rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.itemt {
				width: 231rpx;
				height: 60rpx;
				font-size: 30rpx;
			}
		}
	}

	.list-box {
		width: 725rpx;
		height: 200rpx;
		margin: 20rpx auto 0;
		background: #FFFFFF;
		box-shadow: 0px 5rpx 5rpx 0px rgba(35, 24, 21, 0.06);
		border-radius: 7rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;

		.box-left {
			width: 230rpx;
			height: 145rpx;
			margin-right: 20rpx;

			.left-img {
				width: 230rpx;
				height: 145rpx;
			}
		}

		.box-right {
			width: 430rpx;
			height: 145rpx;
			position: relative;

			.right-top {
				font-size: 25rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 24rpx;
			}

			.right-center {
				width: 362rpx;
				// height: 53rpx;
				font-size: 21rpx;
				font-weight: bold;
				color: #999999;
				line-height: 33rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2; //在第几行显示...
				-webkit-box-orient: vertical;
			}

			.right-foot {
				font-size: 21rpx;
				font-weight: bold;
				color: #999999;
				line-height: 31rpx;
				text-align: right;
				// margin-top: 13rpx;
				position: absolute;
				right: 0;
				bottom: 0;
			}
		}
	}
</style>