MeiMeiZhuan/pages/order/components/createOrder_pay.vue

<template>
	<uni-popup ref="popup" class="create-order-pay" type="bottom">
		<view class="bcf page">
			<!-- 标题 -->
			<view class="d-f flex-c p10 title">
				<view class="F1 f15 fw700">选择支付方式</view>
				<text class="iconfont iconclose" @click="close"></text>
			</view>
			<!-- 选择支付方式 -->
			<view class="pay-type">
				<view class="d-f p10 flex-c" v-for="(l, i) in list" v-bind:key="i">
					<image style="height:20px;width:19px;" :src="l.img"></image>
					<text class="f14 c6 F1 ml8">{{ l.title }}</text>
					<view @click="radioClick(l, l.type)" :class="'radio ' + (l.check ? 'radio-active' : '')"></view>
				</view>
			</view>
			
			<!-- 提交按钮 -->
			<view class="d-f flex-c" >
				<view class="F1 pl10 d-f flex-c">
					<text class="f16">合计：</text>
					<text class="money-color f12 pt4">￥</text>
					<text class="money-color f20">{{ totalPrice }}</text>
				</view>
				<view class="button cf" :style="'background:' + (isSubmit ? '#999' : '#FC5B62')" @click="payTypeload">立即支付</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
const type = [
	{
		img: 'http://lxscimg.liuniu946.com/2019-11-29_5de0aad619857.png',
		title: '微信支付',
		check: false,
		type: 0 // wx
	},
	{
		img: 'http://lxscimg.liuniu946.com/2019-11-29_5de0aad9224d4.png',
		title: '零钱支付',
		check: false,
		type: 1 // 1 
	},
	{
		img: 'http://lxscimg.liuniu946.com/2019-11-29_5de0aad9224d4.png',
		title: '钱包支付',
		check: false,
		type: 3 // 1
	},
	// #ifdef APP-PLUS
	{
		img: 'http://lxscimg.liuniu946.com/2019-12-12_5df1aa4e0f9b8.png',
		title: '支付宝支付',
		check: false,
		type: 2 // ali
	},
	// #endif
	{
		img: 'http://lxscimg.liuniu946.com/2019-12-26_5e0421807d558.png',
		title: '积分兑换',
		check: false,
		type: 4 // ali
	}
];
export default {
	props: {
		totalPrice: [String, Number],
		//有几种支付方式
		payType: {
			type: Array,
			default: () => [0, 1, 2, 3]
		},
		//默认的支付方式
		defaultType: {
			type: Number,
			default: 2
		},
		// 是否需要调用外部按钮触发方法
		payCall: {
			type: Boolean,
			default: false
		},
		mtype: [String, Number]
	},
	data() {
		let list = [],
			_self = this;
		let payType = _self.payType.slice(0);
		// if(!_self.$store.state.app.state){
		// 	payType = [2]
		// }
		// if(_self.payType.slice(0).indexOf(4)>-1){
		// 	payType = [4]
		// }
		let ttype = null;
		type.forEach(e => {
			if (payType.indexOf(e.type) > -1) {
				e.check = e.type == _self.defaultType ? true : false;
				if (e.type == _self.defaultType) {
					ttype = e.type;
				}
				list.push(e);
			}
		});
		return {
			list,
			isSubmit: false,
			type: ttype, //0 微信支付 1余额支付 2支付宝支付
			order_num: '' //订单号
		};
	},
	created() {
		this.init();
	},
	methods: {
		//拼团购买逻辑
		assembleBuy(parent, d) {
			let _self = this;
			let data = {
				gg_id: _self.ggId,
				num: d[0].goods_info[0].num * 1,
				add_id: parent.addressData.id,
				ms_type: _self.msType
			};
			let url = '/goods/groupAdd';
			if (_self.gpId) {
				data.gp_id = _self.gpId;
				url = '/goods/groupUpd';
			}
			_self
				.request({ url, data })
				.then(r => {
					if (r.code == 200) {
						_self.order_num = r.data;
						_self.submit();
					} else {
						_self.$api.msg(r.msg);
						_self.isSubmit = false;
					}
				})
				.catch();
		},
		//立即购买生成订单
		buy(data) {
			let _self = this;
			_self
				.request({ url: '/Order/buy', data })
				.then(r => {
				     console.log(JSON.stringify(r)+'777')
					if (r.code == 200) {
						_self.order_num = r.data;
						_self.submit();
					} else {
						_self.$api.msg(r.msg);
						_self.isSubmit = false;
					}
				})
				.catch(() => {
					_self.isSubmit = false;
				});
		},
		// 购物车购买生成订单
		carBuy(data) {
			let _self = this;
			_self
				.request({ url: '/Order/shopCarBuy', data })
				.then(r => {
					if (r.code == 200) {
						_self.order_num = r.data;
						_self.submit();
					} else {
						_self.$api.msg(r.msg);
						_self.isSubmit = false;
					}
					console.log(r);
				})
				.catch(() => {
					_self.isSubmit = false;
				});
		},
		// 初始化
		init() {
			let _self = this;
			let list = _self.list.slice(0).map(e => {
				if (e.type == _self.type) {
					e.check = true;
				}
				return e;
			});
		},
		// 打开弹窗
		open() {
			this.$refs.popup.open();
		},
		// 关闭弹窗
		close() {
			this.$refs.popup.close();
			uni.setStorageSync('pay_bottoms', 'true');
		},
		// 选择支付方式
		radioClick(e, index) {
			let _self = this;
			_self.list.map(e => {
				e.check = false;
				return e;
			});
			e.check = true;
			_self.type = index;
		},
		// 立即支付按钮
		submit() {
			let _self = this;
			let parent = _self.utils.getParent.call(this);
			
			let data = {
				order_num: this.order_num,
				remark: parent.$refs.info.desc,
				add_id: parent.addressData.id
			};
			if (!data.add_id) {
				_self.$api.msg('请选择收货地址');
				return;
			}
			_self.isSubmit = true;
			// 微信
			if (_self.type == 0) {
				_self.wxPay(data);
			}
			if (_self.type == 1) {
				_self.smallChange(data);
			}
			// 支付宝
			if (_self.type == 2) {
				_self.zfbPay(data);
			}
			//
			if (_self.type == 3) {
				_self.walletPay(data);
			}
			//积分兑换
			if (_self.type == 4) {
				_self.integralBuy(data);
			}
		},
		// 判断生成订单类型
		payTypeload() {
			let _self = this;
			//如果payCall 为true时 则表示需要调用外部支付方法，跳过执行下面的程序，开启回调
			if (_self.payCall) {
				// 触发支付方法
				_self.$emit('submit', _self.type);
				return;
			}
			//如果order_num 存在的时候 直接打开选择支付的按钮
			if(_self.order_num){
				_self.submit();
			}else{
				let parent = _self.utils.getParent.call(this);
				//不存在的时候 调用接口  生成订单
				if (_self.isSubmit) {
					return;
				}
				if (!parent.addressData.id) {
					_self.$api.msg('请选择收货地址');
					return;
				}
				_self.isSubmit = true;
				let d = parent.$refs.product.productList;
				//如果是拼团购买 前往拼团购买逻辑
				if (_self.msType * 1 == 3) {
					_self.assembleBuy(parent, d);
					return;
				}
				//秒杀 只执行立即购买下单逻辑  不从购物车过来
				if (parent.gid) {
					let data = {
						gid: parent.gid,
						num: d[0].goods_info[0].num,
						add_id: parent.addressData.id,
						ms_type: _self.msType,
						type: _self.msType
					};
				
					if (parent.couponId) {
						data.card_id = parent.couponId;
					}
					
					_self.buy(data);
				}
				//打印一下 数据
				if (parent.cid) {
					let data = {
						cid: parent.cid,
						add_id: parent.addressData.id
					};
					// if(!data.add_id){
					// 	_self.$api.msg("请选择收货地址")
					// 	return
					// }
					if (parent.couponId) {
						data.card_id = parent.couponId;
					}
					_self.carBuy(data);
				}
			}
			
		},
		// 积分购买
		integralBuy(data) {
			let _self = this;
			_self
				.request({ url: '/Order/integralPay', data })
				.then(r => {
					console.log(r);
					_self.$api.msg(r.msg, 2000, false, 'none', function() {
						if (r.code == 200) {
							uni.redirectTo({ url: '/pages/order/order?state=2' });
						}
						_self.isSubmit = false;
					});
				})
				.catch();
		},
		//支付宝支付
		zfbPay(data) {
			let _self = this;
			data.pay_type = 'ali';
			_self
				.request({ url: '/Order/alipay', data })
				.then(r => {
					//let rs=eval('(' + r + ')')
					if (r.code == 200) {
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: r.data,
							success(r) {
								uni.redirectTo({ url: '/pages/order/order?state=2' });
								_self.isSubmit = false;
							},
							fail() {
								uni.redirectTo({ url: '/pages/order/order?state=1' });
								_self.isSubmit = false;
							}
						});
					} else {
						_self.isSubmit = false;
					}
				})
				.catch(() => {
					_self.isSubmit = false;
				});
		},
		// 获取传值并保存为对象
		paramToObject(url) {
			let o = {};
			url.split('&').forEach(e => {
				e = e.split('=');
				o[e[0]] = e[1];
			});
			return o;
		},
		// 将对象解析为传值
		objectToParam(o) {
			let param = '';
			for (let i in o) {
				param += i + `=` + o[i] + '&';
			}
			param = param.substr(0, param.length - 1);
			return param;
		},
		// 微信支付
		wxPay(data) {
			let _self = this;
			// data.pay_type
			_self
				.request({ url: '/order/wxpay', data })
				.then(r => {	
					let rs=''
					console.log(uni.getSystemInfoSync().platform)
					if(uni.getSystemInfoSync().platform == 'ios'){
						rs=r
					}else{
						rs=eval('(' + r + ')')
					}
					if (rs.code == 200) {
						uni.requestPayment({
							provider: 'wxpay',
							orderInfo: rs.data,
							success(r) {
					            console.log(r)
								uni.redirectTo({ url: '/pages/order/order?state=2' });
								_self.isSubmit = false;
							},
							fail(r) {
					            console.log(r)
								uni.redirectTo({ url: '/pages/order/order?state=1' });
								_self.isSubmit = false;
							}
						});
					} else {
						_self.$api.msg(r.msg);
						_self.isSubmit = false;
					}
				})
				.catch(() => {
					_self.isSubmit = false;
				});
		},
		// 零钱支付
		smallChange(data) {
			let _self = this;
			_self
				.request({
					url: '/Order/changePay',
					data
				})
				.then(r => {
					if (r.code == 200) {
						_self.close();
						_self.$api.msg(r.msg);
						//支付成功跳转到待发货页面
						uni.redirectTo({
							url: '/pages/order/order?state=2'
						});
						_self.isSubmit = false;
					} else {
						_self.isSubmit = false;
					}
				})
				.catch(() => {
					_self.isSubmit = false;
				});
		},
		// 钱包支付
		walletPay(data) {
			let _self = this;
			_self
				.request({ url: '/Order/walletPay', data })
				.then(r => {
					if (r.code == 200) {
						_self.close();
						_self.$api.msg(r.msg);
						//支付成功跳转到待发货页面
						uni.redirectTo({
							url: '/pages/order/order?state=2'
						});
						_self.isSubmit = false;
					} else {
						_self.isSubmit = false;
					}
				})
				.catch(() => {
					_self.isSubmit = false;
				});
		}
	},
	components: {
		uniPopup
	}
};
</script>

<style lang="scss">
.create-order-pay {
	z-index: 9999;
	.page {
		border-radius: 10rpx 10rpx 0 0;
	}
	.title {
		border-bottom: 2rpx solid #eee;
	}
	.pay-type {
		border-bottom: 20rpx solid #f8f6f6;
	}
	.button {
		padding: 20rpx 60rpx;
		line-height: 40rpx;
		font-size: 30rpx;
		background-color: #dc4d46;
	}
	.money-color {
		color: $base-color;
	}
	.radio {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-size: 40rpx 40rpx;
		background-position: center;
		background-image: url('http://lxscimg.liuniu946.com/2019-11-29_5de0badfc57f7.png');
	}
	.radio-active {
		background-image: url('http://lxscimg.liuniu946.com/2019-11-29_5de0bae3bcbd4.png');
	}
}
</style>