yizhizan-h5/my/wallet/index.vue

<template>
	<view>
		<view class="padding">
			<view class=" radius bg padding">
				<view>充值钻石</view>
				<view class="padding-tb-xs" style="border-bottom: 1rpx solid rgba(0, 221, 154, 0.1);">
					<u-input v-model="money" type="number" placeholder="0钻石" placeholder-style="color:#000;"
						inputAlign="text-align:left" @input="input" />
				</view>
			</view>
			<view class="margin-top radius bg flex justify-between flex-wrap padding-lr padding-bottom">
				<view v-for="(item,index) in wallet" :key='index'
					class="flex padding-sm radius margin-top justify-center"
					style="background: rgba(0, 221, 154, 0.1);color: #00B88F; width: 48%;" @click="active(item,index)"
					:class="tabIndex==index?'active':''">
					<view style="font-size: 34upx;" class="flex align-center">
						<!-- <text style="font-size: 22upx;margin-right: 5upx;"></text> -->
						<image src="../static/jifenss.png" style="width: 32upx;height: 34upx;margin-right: 5upx;">
						</image>
						{{item.price}}
					</view>
				</view>
			</view>

			<view class="bg margin-top padding-lr radius">
				<view>
					<view style="display: flex;height: 100upx;align-items: center;padding: 20upx 0;"
						v-for="(item,index) in openLists" :key='index'>
						<image :src="item.image" style="width: 55upx;height: 55upx;border-radius: 50upx;"></image>
						<view style="font-size: 30upx;margin-left: 20upx;width: 70%;">{{item.text}}
						</view>
						<radio-group name="openWay" style="margin-left: 20upx;" @tap='selectWay(item)'>
							<label class="tui-radio">
								<radio color="#00B88F" :checked="openWay === item.id ? true : false" />
							</label>
						</radio-group>
					</view>
				</view>
			</view>
			<view class="btn" @click="pay">确认支付</view>
			<view class="" style="margin-top: 20rpx;">
				如需开具发票请<span style="color: red;padding-left: 5rpx;" @click="goChat">联系客服</span>！
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				openLists: [],
				openWay: 1,
				wallet: [],
				tabIndex: -1,
				money: '',
				placeholder: '',
			}
		},
		onLoad() {
			this.getwalletList() //获取充值列表 
			// #ifdef APP-PLUS
			this.openLists = [{
				image: '../../static/images/my/zhifubao.png',
				text: '支付宝',
				id: 1
			}, {
				image: '../../static/images/my/icon_weixin.png',
				text: '微信',
				id: 2
			}];
			this.openWay = 1;
			// #endif

			// #ifdef MP-WEIXIN
			this.openLists = [{
				image: '../../static/share/icon_weixin.png',
				text: '微信',
				id: 2
			}];
			this.openWay = 2;
			// #endif

			// #ifdef H5
			let ua = navigator.userAgent.toLowerCase();
			if (ua.indexOf('micromessenger') !== -1) {
				this.openLists = [{
					image: '../../static/images/my/zhifubao.png',
					text: '支付宝',
					id: 1
				}, {
					image: '../../static/share/icon_weixin.png',
					text: '微信',
					id: 2
				}];
			} else {
				this.openLists = [{
					image: '../../static/images/my/zhifubao.png',
					text: '支付宝',
					id: 1
				}];
			}

			this.openWay = 1;
			// #endif
		},
		onShow() {
			this.getCharge()
			this.getMinMoney()
			this.getMaxMoney()
			this.getRatio()


		},
		methods: {
			goChat() {
				let that = this
				if (uni.getStorageSync('userType') == 1) { //用户端
					// #ifdef MP-WEIXIN
					wx.openCustomerServiceChat({
						extInfo: {
							url: that.$queue.getData('kefu')
						},
						corpId: that.$queue.getData('kefuAppid'),
						success(res) {
							console.log(res)
						},
					})
					// #endif
					// #ifdef H5
					window.location.href = that.$queue.getData('kefu');
					// #endif
					// #ifdef APP
					let kefu = that.$queue.getData('kefu')
					console.log(kefu)
					plus.runtime.openURL(kefu, function(res) {});
					// #endif
				} else { //企业端
					// #ifdef MP-WEIXIN
					wx.openCustomerServiceChat({
						extInfo: {
							url: that.$queue.getData('kefuq')
						},
						corpId: that.$queue.getData('kefuAppidq'),
						success(res) {
							console.log(res)
						},
					})
					// #endif
					// #ifdef H5
					window.location.href = that.$queue.getData('kefuq');
					// #endif
					// #ifdef APP
					let kefu = that.$queue.getData('kefuq')
					console.log(kefu)
					plus.runtime.openURL(kefu, function(res) {});
					// #endif
				}
			},
			input(e) {
				console.log(e)
				this.tabIndex = -1
				this.money = e
			},
			//获取充值列表 
			getwalletList() {
				this.$Request.get("/app/payClassify/selectPayClassifyList").then(res => {
					if (res.code == 0) {
						this.wallet = res.data
					}
				});
			},

			// 提现手续费
			getCharge() {
				this.$Request.get("/app/common/type/152").then(res => {
					if (res.code == 0) {
						this.charge = res.data.value
						this.placeholder = '服务费:' + this.charge * 100 + '%' + ',最低提现:' +
							this.minMoney * 1 + ',最高提现:' + this.maxMoney * 1
					}
				});
			},
			// 最低提现额度
			getMinMoney() {
				this.$Request.get("/app/common/type/112").then(res => {
					if (res.code == 0) {
						this.minMoney = res.data.value
						this.placeholder = '服务费:' + this.charge * 100 + '%' + ',最低提现:' +
							this.minMoney * 1 + ',最高提现:' + this.maxMoney * 1
					}
				});
			},
			// 最高提现额度
			getMaxMoney() {
				this.$Request.get("/app/common/type/153").then(res => {
					if (res.code == 0) {
						this.maxMoney = res.data.value
						this.placeholder = '服务费:' + this.charge * 100 + '%' + ',最低提现:' +
							this.minMoney * 1 + ',最高提现:' + this.maxMoney * 1
					}
				});
			},
			// 金元比例
			getRatio() {
				this.$Request.get("/app/common/type/154").then(res => {
					if (res.code == 0) {
						this.ratio = res.data.value
						this.placeholder = '服务费:' + this.charge * 100 + '%' + ',最低提现:' +
							this.minMoney * 1 + ',最高提现:' + this.maxMoney * 1
						this.wallet.forEach(re => {
							re.num = re.price * res.data.value
						})
					}
				});
			},
			cut(e) {
				this.title_color = e
			},
			goNav(url) {
				uni.navigateTo({
					url
				})
			},
			active(e, index) {
				this.tabIndex = index
				this.money = e.price
			},

			selectWay: function(item) {
				this.openWay = item.id;
			},

			pay() {
				if (!this.money) {
					uni.showToast({
						title: '请选择或输入充值的金额',
						icon: 'none'
					})
					return
				}
				if (this.openWay == 2) {
					// #ifdef APP-PLUS
					// 微信APP支付 根据订单id获取支付信息
					this.$Request.post("/app/wxPay/wxPayOrder", {
						classify: 1,
						money: this.money,
						type: 1,
					}).then(ret => {
						this.isCheckPay(ret.code, 'wxpay', JSON.stringify(ret.data));
					});
					// #endif

					// #ifdef MP-WEIXIN
					// 微信小程序支付
					this.$Request.post('/app/wxPay/wxPayOrder', {
						classify: 3,
						money: this.money,
						type: 1,
					}).then(ret => {
						uni.hideLoading()
						console.log(ret.data)
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: ret.data.timestamp,
							nonceStr: ret.data.noncestr,
							package: ret.data.package,
							signType: ret.data.signType,
							paySign: ret.data.sign,
							success: function(suc) {
								console.log('success:' + JSON.stringify(suc));
								uni.showToast({
									title: '支付成功',
									icon: 'success'
								})
								setTimeout(d => {
									uni.navigateBack(1)
								}, 1000);
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
								uni.showToast({
									title: '支付失败',
									icon: 'none'
								})
							}
						});
					});
					// #endif

					// #ifdef H5
					let ua = navigator.userAgent.toLowerCase();
					if (ua.indexOf('micromessenger') !== -1) {
						let data = {
							classify: 2,
							money: this.money,
							type: 1,
						}
						this.$Request.post('/app/wxPay/wxPayOrder', data).then(res => {
							if (res.code == 0) {
								this.callPay(res.data);
							} else {
								uni.showToast({
									icon: 'none',
									title: '支付失败!'
								});
							}
						});
					}
					// #endif

				} else {
					// APP支付宝支付
					// #ifdef APP
					this.$Request.post("/app/aliPay/payMoneyOrder", {
						classify: 4,
						money: this.money,
						type: 1,
					}).then(ret => {
						console.log(ret)
						this.isCheckPay(ret.code, 'alipay', ret.data);
					});
					// #endif
					// #ifdef H5
					let data = {
						classify: 5,
						money: this.money,
						type: 1,
					}
					this.$Request.post('/app/aliPay/payMoneyOrder', data).then(
						res => {
							if (res.code === 0) {
								const div = document.createElement('div')
								div.innerHTML = res.data //此处form就是后台返回接收到的数据
								document.body.appendChild(div)
								document.forms[0].submit()
							} else {
								uni.showToast({
									icon: 'none',
									title: '支付失败!'
								});
							}
						});
					// #endif
				}
			},
			callPay: function(response) {
				if (typeof WeixinJSBridge === "undefined") {
					if (document.addEventListener) {
						document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(response), false);
					} else if (document.attachEvent) {
						document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(response));
						document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(response));
					}
				} else {
					this.onBridgeReady(response);
				}
			},
			onBridgeReady: function(response) {
				let that = this;
				if (!response.package) {
					return;
				}
				console.log(response, '++++++++')
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": response.appid, //公众号名称，由商户传入
						"timeStamp": response.timestamp, //时间戳，自1970年以来的秒数
						"nonceStr": response.noncestr, //随机串
						"package": response.package,
						"signType": response.signType, //微信签名方式：
						"paySign": response.sign //微信签名
					},
					function(res) {
						console.log(res, '/*-/*-/*-')
						if (res.err_msg === "get_brand_wcpay_request:ok") {
							// 使用以上方式判断前端返回,微信团队郑重提示：
							//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
							uni.showLoading({
								title: '支付成功'
							});
							setTimeout(function() {
								uni.hideLoading();
								uni.navigateBack(1)
							}, 1000);
						} else {
							uni.hideLoading();
						}
						WeixinJSBridge.log(response.err_msg);
					}
				);
			},
			isCheckPay(status, name, order) {
				if (status == 0) {
					this.setPayment(name, order);
				} else {
					uni.hideLoading();
					uni.showToast({
						title: '支付信息有误',
						icon: 'none'
					});
				}
			},
			setPayment(name, order) {
				console.log('*-*-*')
				uni.requestPayment({
					provider: name,
					orderInfo: order, //微信、支付宝订单数据
					success: function(res) {
						console.log(res)
						uni.hideLoading();
						uni.showLoading({
							title: '支付成功'
						});
						uni.navigateBack(1)
					},
					fail: function(err) {
						console.log(err)
						uni.hideLoading();
					},
					complete() {
						uni.hideLoading();
					}
				});
			},
			// 提现
			cashMoney() {
				if (!this.moneyNum) {
					uni.showToast({
						icon: 'none',
						title: '请输入提现金额'
					})
					return
				}
				if (this.moneyNum > this.money * 1) {
					uni.showToast({
						icon: 'none',
						title: '您的余额不足'
					})
					return
				}
				// if (this.moneyNum*1+this.charge*this.moneyNum > this.money*1) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '您的手续费不足'
				// 	})
				// 	return
				// }

				let zhiFuBao = uni.getStorageSync('zhiFuBao')
				let zhiFuBaoName = uni.getStorageSync('zhiFuBaoName')

				if (!zhiFuBao && !zhiFuBaoName) {
					uni.navigateTo({
						url: '/my/wallet/zhifubao'
					})
					return
				}

				let that = this
				that.sp = (that.moneyNum * this.charge).toFixed(2)
				uni.showModal({
					title: '提示',
					content: '本次提现' + that.moneyNum + '元，服务费' + this.sp + '元，是否确认提现？',
					success: function(res) {
						if (res.confirm) {
							that.$Request.get("/app/cash/cashMoney", {
								money: that.moneyNum
							}).then(res => {
								if (res.code == 0) {
									uni.showToast({
										icon: 'none',
										title: res.msg
									})
									that.moneyNum = null
								} else {
									uni.showToast({
										icon: 'none',
										title: res.msg
									})
								}
								that.getMoney()
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
	}

	.bg {
		background-color: #FFFFFF;
	}

	.active {
		border: 1px solid #00B88F !important;
		/* color: #557EFD !important; */
		/* background: #00B88F !important;
		color: #FFFFFF !important; */
	}

	.title_btn {
		height: 78upx;
		line-height: 78upx;
		/* background: #f7f7f7; */
	}

	.btn {
		width: 100%;
		height: 88upx;
		background: #00B88F;
		border-radius: 44upx;
		text-align: center;
		line-height: 88upx;
		margin-top: 40upx;
		font-size: 28upx;
		color: #FFF;
	}
</style>