tongchengred/pages/form/donateLove.vue

<template>
	<view class="content">
		<view class="top">
			爱心捐赠
		</view>
		<view class="box">
			<view class="box-item">
				<view class="box-left">
					捐款意向
				</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">
					捐款方式
				</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">
					<input type="text" placeholder="单位(元)" v-model="money"/>
				</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_receiptsL" color='#E63931' style="transform: scale(0.7,0.7)" @change="switch2Change"/>
			</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">
					手机号
				</view>
				<view class="box-right">
					<input type="text" placeholder="请填写手机号" v-model="mobile"/>
				</view>
			</view>
			<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="!payLoding ? confirm() : ''">
			提交
		</view>
		
	</view>
</template>

<script>
	import {
		chosintention,
		joinDona
	} from '@/api/ask.js';
	import { computedOrderkey, balance, createOrderkey, orderPay } from '@/api/money.js';
	export default{
		data(){
			return{
				index: 0,
				intention:'',  //捐款意向
				way:'', //捐款方式
				money:'',    //捐款金额
				is_public: false,  //是否实名公开
				is_receiptsL: false,   //是否开发票
				donate_er: '',    //捐款人/单位
				mobile: '',    //手机号
				address:'',   // 联系地址
				// chooseDire: ['请选择捐款意向','疫情防控','其他','红十字人道事业（非定向捐赠）','红十字博爱送万家','AED救护及科普','青少年生命安全教育基地建设项目','关注重度失能老人项目','青少年白血病救护项目','地芯行动-关爱地中海贫血儿童','会费缴纳'],
				chooseDire:[],
				chooseType:['个人','单位'],
				payLoding: false, //判断是否支付中
				froms: '', //保存h5中数据来源对象
				type: '', //判断是否从订单中进入
			}
		},
		onLoad(options) {
			console.log(333,options)
			},
		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;
			},
			// 是否实名公开
			switch1Change(e){
				this.is_public = e.detail.value
				console.log(this.is_public )
			},
			//是都寄发票
			switch2Change(e){
				this.is_receiptsL = e.detail.value
				console.log(this.is_receiptsL )
			},
			// 提交, 
			//确认支付
			confirm: async function() {
				let obj = this;
				// 支付中
				obj.payLoding = true;
				// #ifdef H5
				// 获取当前是否为微信浏览器
				obj.froms = uni.getStorageSync('weichatBrowser') || '';
				// #endif
				// 判断是否为未支付订单中跳转进入
				if (obj.type != 1) {
					// 初次生成订单
					obj.firstCreateOrder();
				} else {
					// 已经生成订单未支付
					obj.orderMoneyPay();
				}
			},
			
			// 初次订单创建
			firstCreateOrder() {
				let obj = this;
				// 获取下单页面数据
				let prepage = obj.$api.prePage();
				let data = {
					use_integral_pink: obj.use_integral_pink,
					real_name: prepage.addressData.real_name, //联系人名称
					phone: prepage.addressData.phone, //联系人号码
					couponId: prepage.couponChecked.id, //优惠券编号
					addressId: prepage.addressData.id, //支付地址id
					useIntegral: prepage.checkedPoints ? 1 : 0, //是否积分抵扣1为是0为否
					useShopping_card: prepage.shoppingPoints ? 1 : 0, //是否使用购物卡
					payType: obj.payName, //支付类型  weixin-微信 yue-余额
					mark: prepage.idcardName+prepage.idcardNum, //备注
					// #ifdef H5
					from: obj.froms ? 'weixin' : 'H5', //来源
					// #endif
					// #ifdef MP-WEIXIN
					from: 'routine', //来源
					// #endif
					// #ifdef APP-PLUS
					from: 'app', //来源
					// #endif
					shipping_type: 1, //提货方式 1 快递 2自提
				};
				// 判断是否拼团商品
				if (obj.typegoods == 6) {
					data.level = obj.level;
				}else{
					data.pinkId = obj.pinkid;
				}
				// 生成订单
				createOrderkey(data, obj.orderKey)
					.then(({ data, status, msg }) => {
						// 保存订单号
						obj.orderId = data.result.orderId;
						
						// 允许支付
						obj.payLoding = false;
						if (data.status == 'ORDER_EXIST') {
							obj.$api.msg(msg);
							return;
						}
						// 判断是否为余额支付
						if (obj.payName == 'yue') {
							if (status == 200&&data.status == 'SUCCESS') {
								obj.paySuccessTo();
							} else {
								alert(msg);
								obj.$api.msg(msg)							
							}
						} else {
							// 立即支付
							obj.orderMoneyPay();
						}
					})
					.catch(e => {
						alert(e.message);
						console.log(e);
					});
			}
	// 		add() {
	// 			console.log('点击提交按钮')
	// 			let obj = this
	// 			if (obj.intention == '') {
	// 				obj.$api.msg('请输入捐款意向');
	// 				return;
	// 			};
	// 			if (obj.way == '') {
	// 				obj.$api.msg('请输入捐款方式');
	// 				return;
	// 			};
	// 			if (obj.money == '') {
	// 				obj.$api.msg('请输入捐款金额');
	// 				return;
	// 			};
	// 			orderPay({
	// 			uni: obj.orderId,
	// 			// #ifdef H5
	// 			from: obj.froms ? 'weixin' : 'H5', //来源
	// 			// #endif
	// 			// #ifdef MP-WEIXIN
	// 			from: 'routine', //来源
	// 			// #endif
	// 			// #ifdef APP-PLUS
	// 			from: 'app', //来源
	// 			// #endif
	// 			paytype: obj.payName //支付类型  weixin-微信 yue-余额
	// 		}).then(e =>{
	// 			console.log(e)
	// 		})
				
	// 			joinDona({
	// 				intention:obj.intention,  //捐款意向
	// 				way:obj.way, //捐款方式
	// 				money:obj.money,    //捐款金额
	// 				is_public: obj.is_public,  //是否实名公开
	// 				is_receiptsL: obj.is_receiptsL,   //是否开发票
	// 				donate_er: obj.donate_er,    //捐款人/单位
	// 				mobile: obj.mobile,    //手机号
	// 				address:obj.address,   // 联系地址
	// 			}).then(({data})=>{
	// 				console.log(data)
	// 				console.log('登录成功')
	// 				// uni.navigateTo({
	// 				// 	url: "/pages/form/donaSuccess"
	// 				// })
 
	// 			}).catch((err)=>{
	// 				console.log(err)
	// 			})
	// 		}
		},
 	}
</script>

<style lang="scss">
	.content{
		
	}
	.top{
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #E63931;
		color: #FFFFFF;
		padding: 22rpx 0;
	}
	.box{
		.box-item{
			background-color: #FFFFFF;
			padding: 24rpx;
			display: flex;
			border-bottom: 1rpx solid #F2F2F2;
		}
		.box-left{
			width: 200rpx;
			flex-shrink: 0;
			// flex: 0;
		}
		.box-right{
			width: 100%;
			color: #999999;
		}
	}
	.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: 32rpx;
	}
	
</style>