hwnc/pagesD/pages/money/pay.vue

<template>
	<view :class="[AppTheme]" class="app">
		<view class="price-box">
			<text>支付金额</text>
			<text class="price text-neutral">{{payprice}}</text>
		</view>

		<view class="pay-type-list">
			<view class="type-item b-b" @click="changePayType(1)">
				<u-icon name="weixin-fill" color="#62b900" size="30"></u-icon>
				<view class="con">
					<text class="tit">微信支付</text>
					<text>推荐使用微信支付</text>
				</view>
				<label class="radio">
					<radio value="" :color="primary" :checked='payType == 1' />
					</radio>
				</label>
			</view>
			<view class="type-item" @click="changePayType(2)">
				<u-icon name="red-packet-fill" color="rgb(224, 116, 114)" size="30"></u-icon>
				<view class="con">
					<text class="tit">余额支付</text>
					<text>可用余额 ¥{{money}}</text>
				</view>
				<label class="radio">
					<radio value="" :color="primary" :checked='payType == 2' />
					</radio>
				</label>
			</view>
		</view>

		<text class="mix-btn bg-linear-gradient" @click="confirm">确认支付</text>
		<u-keyboard ref="uKeyboard" mode="number" :tooltip="false" :safeAreaInsetBottom="true" :overlay="true"
			:closeOnClickOverlay="true" :dotDisabled="false" @change="onChange" @backspace="onBackspace" :show="show">
			<view>
				<view class="u-text-center u-padding-20 money">
					<view class="text-neutral">
						<text>{{payprice}}</text>
						<text class="u-font-20 u-padding-left-10">元</text>
					</view>
					<view class="u-padding-10 close" data-flag="false" @tap="showPop(false)">
						<u-icon name="close" color="#333333" size="28"></u-icon>
					</view>
				</view>
				<view class="u-flex u-row-center codeinput" style="margin: 20rpx 0; padding: auto;100%;">
					<u-code-input :color="primary" :borderColor="primary" :space="20" size="40" mode="box"
						:maxlength="6" :dot="true" v-model="password" :disabledKeyboard="true" @finish="finish">
					</u-code-input>
				</view>
			</view>
		</u-keyboard>
	</view>
</template>

<script>
	import wallApi from '@/api/wall/index.js';
	import cart from '@/api/cart/index.js';
	import api from '@/api/mall/index.js';
	import adoptApi from '@/api/home/index.js';
	import loginApi from '@/api/login/login.js';
	export default {
		data() {
			return {
				primary: this.$theme.primary,
				settingFile: getApp().globalData.siteinfo,
				payType: 1,
				orderInfo: {},
				money: '',
				show: false,
				password: '',
				payprice: '',
				orderid: '',
				djqid: '',
				n_type: 0,
				oid: '',
				goodids: '',
				params: {
					// 支付方式
					paytype: 1, //为1是微信支付 2是支付宝支付
					rid: '',
					systype: '', //h5 或 app
					money: 1
				}

			};
		},
		computed: {

		},
		onLoad(options) {
			console.log(options)
			this.goodids = options.goodids ? options.goodids : ''
			this.orderid = options.orderid ? options.orderid : '';
			this.djqid = options.djqid ? options.djqid : '';
			this.payprice = parseFloat(options.payprice ? options.payprice : 0).toFixed(2);
			this.params.money = Number(this.payprice)
			this.n_type = options.type ? options.type : 0
			this.oid = options.oid ? options.oid : 0
			wallApi.income({}).then(res => {
				console.log(res)
				if (res.status == 200) {
					this.money = res.data.money; //余额
				}
			});
		},

		methods: {
			//选择支付方式
			changePayType(type) {
				this.payType = type;
			},
			//确认支付
			confirm() {

				// // #ifdef H5
				// 				   // H5支付
				// 				   console.log('进来了');
				// 				   this.params.systype = 'h5'
				// 				   if (this.params.paytype === 1) {
				// 					   this.params.paytype = 'wxpay'
				// 				   	//paytype为1使用微信支付
				// 				   wallApi.Wxpaycz(this.params).then(res => {
				// 						this.params.paytype = 1
				// 				   		if (res.status == 200) {
				// 							
				// 				   			this.wxPay(res.data)
				// 				   		} else {
				// 				   			uni.showToast({
				// 				   				icon: 'none',
				// 				   				title: res.msg
				// 				   			})
				// 				   		}
				// 				   	})
				// 				   } 
				// 				// #endif

				// // #ifdef APP-PLUS
				// if(this.payType == 1){
				// 	let orderInfo = JSON.stringify(this.params)
				// 	      this.params.systype = 'app'
				// 	      let payplatform = ''
				// 	      if (this.params.paytype === 1 || this.params.paytype === 2) {

				// 	      	//paytype为1使用微信支付，为2使用支付宝支付
				// 	      	payplatform = this.params.paytype === 1 ? 'wxpay' : 'alipay'
				// 			this.params.paytype = 'wxpay'
				// 			console.log(this.params);
				// 	      	wallApi.Wxpaycz(this.params).then(res => {
				// 				this.params.paytype = 1
				// 				
				// 	      		if (res.code === 1) {
				// 	      			uni.requestPayment({
				// 	      				provider: payplatform,
				// 	      				orderInfo: res.data,
				// 	      				//微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
				// 	      				success: function(res) {
				// 							
				// 	      					uni.showToast({
				// 	      						title: '购买会员成功',
				// 	      						icon: 'none'
				// 	      					})
				// 	      					setTimeout(() => {
				// 	      						uni.navigateBack({
				// 	      							delta: 1
				// 	      						})
				// 	      					}, 1000)
				// 	      				},
				// 	      				fail: function(err) {
				// 							console.log(err);
				// 	      					uni.showToast({
				// 	      						title: err.errMsg,
				// 	      						icon: 'none'
				// 	      					})
				// 	      				}
				// 	      			})
				// 	      		} else {
				// 	      			uni.showToast({
				// 	      				title: res.msg,
				// 	      				icon: 'none'
				// 	      			})
				// 	      		}
				// 	      	})
				// 	      } else {
				// 	      	// paytype为3,使用余额支付
				// 	      	// this.balancepayment(this.params)
				// 			console.log('错误');
				// 	      }
				// }

				// // #endif

				if (this.payType == 2) {
					this.show = true;
					this.password = ''
				} else {
					if (this.n_type == 1) {
						this.wxZf(); // 农场微信支付
					} else {
						console.log('走到这了');
						this.pay(); // 支付
					}
				}

			},
			onChange(val) {
				if (this.password.length < 6) {
					this.password += val;
				}
				if (this.password.length >= 6) {
					if (this.n_type == 1) {
						this.goZf()
					} else {
						this.pay(); // 支付
					}
				}
			},
			onBackspace(e) {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
			pay() {
				let that = this
				uni.showLoading({
					title: '支付中'
				})
				if (this.payType == 1) {
					pays(this.payType)

					return
				}
				cart.checkPayPassword({
					password: this.password
				}).then(res => {
					console.log(res)
					uni.hideLoading();
					if (res.status == 200) {
						this.showPop(false)
						pays(this.payType)
					} else if (res.status == 0) {
						this.showPop(false)
						this.$refs.uTips.show({
							title: res.msg,
							type: 'error',
							duration: '2300',
							icon: "none"
						})
						if (res.msg === '未设置支付密码，现在进行设置!') {
							console.log(res.msg)
							setTimeout(() => {
								that.$u.route({
									url: '/pagesD/pages/set/changemima/changemima'
								})
							}, 1000)
						}
					}
				})

				function pays(payType) {

					if (that.orderid) {
						var obj = {
							orderid: that.orderid,
							sid: 0
						};
						payType === 1 ? obj["type"] = 'wxpay' : obj["type"] = 'money';
						payType === 1 ? wxpay(obj) : money(obj);
						return
					}
					var pages = getCurrentPages();
					if (pages[pages.length - 2] && pages[pages.length - 2].$vm) {
						var page = pages[pages.length - 2].$vm;
						page.goumai(payType)
					}

					function wxpay(res) {
						api.wxpay(res).then(ret => {
							if (ret.return_msg) {
								uni.showToast({
									title: ret.return_msg,
									icon: 'error',
									duration: 1500
								});
							} else {
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: ret.timeStamp,
									nonceStr: ret.nonceStr,
									package: ret.package,
									signType: ret.signType,
									paySign: ret.paySign,
									success: function(res) {
										uni.showToast({
											title: '微信支付成功',
											icon: 'success',
											duration: 1500
										});
										uni.redirectTo({
											url: '/pagesD/pages/money/paySuccess'
										});
									},
									fail: function(err) {
										console.log('fail999999')
									}
								});
							}
						});
					}

					function money(res) {
						/* 支付 */

						api.pay(res).then(ret => {
							console.log(ret, "ret");
							that.$u.toast(ret.msg);
							if (ret.status == 200) {
								if (ret.data.id) {
									that.$u.route('/pagesD/pages/mall/groupShare', {
										id: ret.data.id
									});
								} else {
									uni.redirectTo({
										url: '/pagesD/pages/money/paySuccess'
									});
								}
							}
						});
					}
				}
			},
			showPop(flag = true) {
				this.password = '';
				this.show = flag;
			},
			finish() {
				console.log(11111)
			},
			// #ifdef H5
			wxPay(paydata) {
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						'appId': paydata.appId, //公众号id名称，由商户传入
						'timeStamp': paydata.timeStamp, //时间戳     
						'nonceStr': paydata.nonceStr, //随机串     
						'package': paydata.package,
						'signType': paydata.signType, //微信签名方式：     
						'paySign': paydata.paySign //微信签名 
					},
					function(res) {
						if (res.err_msg === 'get_brand_wcpay_request:ok') {
							uni.showToast({
								title: '购买会员成功',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						} else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
							uni.showToast({
								icon: 'none',
								title: '已取消支付'
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: '支付失败'
							})
						}
					})
			},
			// #endif
			wxZf() {
				let obj = {
					oid: this.oid,
					paytype: 'wxpay',
					money: this.payprice,
				}

				adoptApi.renyang_pay(obj).then(ret => {
					// #ifdef H5
					uni.showToast({
						title: '此商家的收款功能已被限制，暂无法支付。商家可以登录微信商户平台/微信支付商家助手小程序查看原因和解决方案。',
						icon: 'none'
					})
					// #endif
					console.log(ret);
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: ret.timeStamp,
						nonceStr: ret.nonceStr,
						package: ret.package,
						signType: ret.signType,
						paySign: ret.paySign,
						success: function(res) {

							uni.showToast({
								title: '微信支付成功',
								icon: 'success',
								duration: 1500
							});
							uni.redirectTo({
								url: `/pagesD/pages/money/paySuccess?type=1`
							});
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
						}
					});
				});
			},
			//农场跳转过来支付
			//余额支付
			goZf() {
				let type;
				if (this.payType == 2) {
					type = 1;
				} else {

				}


				cart.checkPayPassword({
					password: this.password
				}).then(res => {

					console.log(res)
					uni.hideLoading();
					if (res.status == 200) {
						adoptApi.payNew({
								orderid: this.orderid,
								djqid: this.djqid,
								type: type,
								paypass: this.password
							})
							.then(res => {
								if (res.status == 0) {
									uni.showToast({
										title: res.msg,
										icon: "none"
									});
								} else {
									uni.showToast({
										title: res.msg,
										icon: "none"
									});
									uni.redirectTo({
										url: `/pagesD/pages/money/paySuccess?type=1`
									});
								}
							});

					} else if (res.status == 0) {
						// this.showPop(false)
						this.$refs.uTips.show({
							title: res.msg,
							type: 'error',
							duration: '2300',
							icon: "none"
						})
						if (res.msg === '未设置支付密码，现在进行设置!') {
							console.log(res.msg, "失败啦")
							setTimeout(() => {
								this.$u.route({
									url: '/pagesD/pages/set/changemima/changemima'
								})
							}, 1000)
						}
					}
				})


			}


		}
	}
</script>

<style lang='scss'>
	.codeinput {
		justify-content: space-evenly;
		display: flex;
	}

	.app {
		width: 100%;
	}

	.money {
		font-size: 80rpx;
		position: relative;
		text-align: center;

		.close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			line-height: 28rpx;
			font-size: 28rpx;
		}
	}

	.tips {
		color: $u-tips-color;
		text-align: center;
	}

	.price-box {
		background-color: #fff;
		height: 265upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 28upx;
		color: #909399;

		.price {
			font-size: 50upx;
			margin-top: 12upx;

			&:before {
				content: '￥';
				font-size: 40upx;
			}
		}
	}

	.pay-type-list {
		/* margin-top: 20upx; */
		background-color: #fff;
		padding-left: 60upx;

		.type-item {
			height: 120upx;
			padding: 20upx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 60upx;
			font-size: 30upx;
			position: relative;

			.con {
				margin-left: 20rpx;
			}
		}

		.icon {
			width: 100upx;
			font-size: 52upx;
		}

		.icon-erjiye-yucunkuan {
			color: #fe8e2e;
		}

		.icon-weixinzhifu {
			color: #36cb59;
		}

		.icon-alipay {
			color: #01aaef;
		}

		.tit {
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 4upx;
		}

		.con {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-sm;
			color: $font-color-light;
		}
	}

	.mix-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 630upx;
		height: 80upx;
		margin: 80upx auto 30upx;
		font-size: $font-lg;
		color: #fff;
		border-radius: 10upx;
	}
</style>