uniapp-shunfengche/my/wallet/index.vue

<template>
	<view>
		<view class="padding">
			<view style="width: 690rpx; height: 200rpx; background: #fff; border-radius: 16rpx; padding: 30rpx;">
				<view class="list_box">
					<view class="box_left">当前余额</view>
					<view @click="goNav('/my/wallet/moneydetail')">
						钱包明细
						<u-icon style="margin-left: 15rpx;" name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="pri" style="padding-top: 25rpx;"><text style="font-size: 60rpx;color: #fe6b01; font-weight: bold;">¥{{money}}</text></view>
				<!-- <view class="margin-top-sm">累计充值:{{accumulateMoney?accumulateMoney:'0'}}元</view> -->
			</view>
			<view class="flex align-center justify-between padding-top">
				<view>
					<!-- <view class="padding-bottom-xs">可提现金额（元）</view>
					<view class="text-bold" style="font-size: 48rpx;">{{balance}}</view> -->
				</view>
			</view>
			<view class="list-box-item">
				<view class="title">
					选择充值金额
				</view>
				
				<view>
					<!-- <view class="flex  justify-between radius bg ">
						<view class=" u-flex u-p-l-30 u-p-t-30 u-p-b-30">
							<view class="u-m-r-20">
								<u-avatar :src="avatar" size="80"></u-avatar>
							</view>
							<view class="u-flex-1 ">
								<view class="u-font-16 text-bold">{{money}}元</view>
								<view class="u-font-14 u-m-t-10">可用于平台消费</view>
							</view>
						</view>
						<view class="margin-right margin-top-sm" @click="goNav('/my/wallet/moneydetail')">钱包明细
						</view>
					</view> -->
					<view class=" radius bg flex justify-between flex-wrap" style="padding-top: 20rpx;text-align: center;">
						<view v-for="(item,index) in wallet" :key='index'
							class="flex justify-between align-center padding-sm radius margin-top"
							style=" width: 46%;border: 1px solid #ccc;"
							@click="active(item,index)" :class="wallIndex===index?'active':''">
							<view style="text-align: center;width: 100%;">
								<view style="font-size: 40rpx; font-weight: bold;width: 100%;text-align: center;line-height: 80rpx;">
									¥{{item.money}}
								</view>
								<view class="" style="font-size: 24rpx; color: #fe6b01;" v-if="item.tbCoupon">
									赠送{{item.couponNum}}张{{item.tbCoupon.money}}元优惠劵
								</view>
							</view>
						</view>
					</view>
					<!-- <view class="margin-top" style="width: 100%;padding-left: 40rpx;">
						充值后仅可用于消费，不支持退款。
					</view> -->
					<view class="bg margin-top radius">
						<view class="title">
							自定义金额
						</view>
						<view class="flex" style="margin: 20rpx 0; padding: 20rpx;border-radius: 11rpx; border: 1px #ccc solid;">
							<view style="font-size: 28rpx; line-height: 46rpx;">
								¥
							</view> <input class="uni-input" v-model="price"  @input="handlePriceInput" style="margin-left: 15rpx;" placeholder="输入充值金额" />
						</view>
						<!-- <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="#0278FE" :checked="openWay === item.id ? true : false" />
									</label>
								</radio-group>
							</view>
						</view> -->
					</view>
				
					<!-- <view class="btn" @click="pay">确认支付</view> -->
				</view>
				<!-- <view class="flex align-center"> -->
					<!-- <view class="tx" @click="gotx()">提现</view> -->
					<!-- gocz() -->
					
					<view style="display: flex; height: 90rpx; justify-content: space-between; margin-top: 20rpx;">
						<view>
							<view class="">
								实际支付
							</view>
							<view style="color: #fe6b01; font-size: 42rpx; margin-top: 10rpx;">
								¥ {{ price }}
							</view>
						</view>
						<view class="cz" style="margin-top: 20rpx;" @click="pay">一键充值</view>
					</view>
				</view>
			<!-- </view> -->
		</view>
		<view class="list-box-item2">
			<view class="title">
				选择支付方式
			</view>
			<view>
				<view style="display: flex;height: 100upx;align-items: center;padding: 20upx;margin: 20rpx 0; border: 1rpx #ccc solid; border-radius: 11rpx;"
					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="#0278FE" :checked="openWay === item.id ? true : false" />
						</label>
					</radio-group>
				</view>
			</view>
		</view>
		<view class="list-box-item2" style="margin-top: 30rpx;">
			<view class="list_box">
				<view class="box_left">充值记录</view>
				<view @click="goNav('/my/wallet/moneydetailadd')" style="font-size: 24rpx;">
					查看全部
				</view>
			</view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" @scrolltoupper="upper"
				@scrolltolower="lower" @scroll="scroll">
				<view v-for="(item,index) in moeylist.slice(0, 3)" :key="index">
					<view class="flex align-center justify-between" style="padding: 30rpx 0; border-bottom: #ccc solid 1rpx;">
						<view>
							<view class="text-bold" style="color: #333333;font-size: 32rpx;font-weight: 500;color: #fe6b01;">
								充值¥{{item.money}}
							</view>
							<view class="text-sm margin-top-xs" style="color: #999999;">订单号：{{item.order_id}}</view>
						</view>
						<view class="text-bold" style="color: #333333;">
							<view class="text-sm margin-top-xs" style="color: #999999;">{{item.pay_time}}</view>
							<view style="color: #00c18a; float: right;font-weight: 500;">充值成功</view>
						</view>
					</view>
					<!-- <view style="width: 100%;height: 1rpx;background: #E6E6E6;"></view> -->
				</view>
				
				<empty v-if="moeylist.length==0" style="height: 50vh;"></empty>
			</scroll-view>
		</view>
		
		<view class="list-box-item3" style="margin-top: 30rpx;">
			<view class="flex "
				style=" border-radius: 14rpx; padding: 20rpx; margin: 20rpx 0;">
				<view style="margin-top: 10rpx;">
					<image v-if="globalImages" :src="globalImages + 'images/credit/shijia.png'"
						style="width: 25rpx;height: 35rpx;margin-left: 30rpx;" mode=""></image>
				</view>
				<view style="margin-left: 30rpx; line-height: 30rpx;">
					<view>支付安全提示</view>
					<view style="color: #999; font-size: 24rpx;">
						请勿向他人泄露验证码， 平台不会以任何理由索要您的验证码信息。
					</view>
				</view>
			</view>
		</view>
		
		<view class="flex"  style="margin-top: 40rpx; padding-bottom: 30rpx;justify-content: center;">
			<image v-if="globalImages" :src="globalImages + 'images/credit/xinxi.png'"
				style="width: 32rpx;height: 32rpx;margin-right: 10rpx;" mode=""></image>
			充值体验反馈
		</view>
		<!-- <view class="bg margin-top-sm">
			<view class="padding-tb-sm padding-lr flex align-center">
				<view class="lin"></view>
				<view>账单明细</view>
			</view>
			<view style="width: 100%;height: 1rpx;background: #E6E6E6;"></view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
				@scrolltolower="lower" @scroll="scroll">
				<view v-for="(item,index) in moeylist" :key="index">
					<view class="flex align-center justify-between padding">
						<view>
							<view class="flex align-center">
								{{item.title}}
								<image src="../../static/image/copy.png" style="width: 35rpx;height: 35rpx;"></image>
							</view>
							<view class="margin-top-xs">{{item.content}}</view>
							<view class="text-sm margin-top-xs" style="color: #999999;">{{item.createTime}}</view>
						</view>
						<view class="text-bold" style="color: #333333;font-size: 38rpx;">
							<text v-if="item.type==1">+</text>
							<text v-if="item.type==2">-</text>
							{{item.money}}
						</view>
					</view>
					<view style="width: 100%;height: 1rpx;background: #E6E6E6;"></view>
				</view>
				
				<empty v-if="moeylist.length==0" style="height: 50vh;"></empty>
			</scroll-view>
		</view> -->
	</view>
</template>

<script>
	import empty from '@/components/empty.vue'
	import { waitForGlobalImages } from '@/utils/globalImageLoader'
	export default {
		components: {
			empty
		},
		data() {
			return {
				money: 0,
				moeylist: [],
				balance: 0,
				page: 1,
				limit: 10,
				totalPage: '',
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				accumulateMoney:0,
				title_color: 1,
				money: 0,
				avatar: '',
				Profit: 0,
				openLists: [{
					image: '../../static/image/zhifubao.png',
					text: '支付宝',
					id: 1
				}, {
					image: '../../static/image/icon_weixin.png',
					text: '微信',
					id: 2
				}],
				openWay: 1,
				wallet: [],
				wallIndex: 0,
				price: 0,
				moneyNum: null,
				
				charge: 0, //提现手续费
				maxMoney: 0, //最高提现额度
				minMoney: 0, //最低提现额度
				ratio: '', //金元比例
				placeholder: '',
				sp: 0,
				rechargeId: '',
				globalImages: ''
			}
		},
		onLoad() {
			waitForGlobalImages().then((path) => {
			    console.log('✅ 全局图片路径:', path)
			    this.globalImages = path
			  })
			this.avatar = uni.getStorageSync('avatar')
			// #ifdef APP-PLUS
			this.openLists = [{
				image: '../../static/image/zhifubao.png',
				text: '支付宝',
				id: 1
			}, {
				image: '../../static/image/icon_weixin.png',
				text: '微信',
				id: 2
			}];
			this.openWay = 1;
			// #endif
			
			// #ifdef MP-WEIXIN
			this.openLists = [{
				image: '../../static/image/icon_weixin.png',
				text: '微信',
				id: 2
			}];
			this.openWay = 2;
			// #endif
			
			// #ifdef H5
			let ua = navigator.userAgent.toLowerCase();
			if (ua.indexOf('micromessenger') !== -1) {
				//公众号是否自动登录  443
				this.$Request.get('/app/common/type/443').then(res => {
					if (res.data && res.data.value && res.data.value == '是') {
						this.openLists = [{
							image: '../../static/image/icon_weixin.png',
							text: '微信',
							id: 2
						}];
						this.openWay = 2;
					} else {
						this.openLists = [];
						this.openWay = -1;
					}
				})
			} else {
				this.openLists = [{
					image: '../../static/image/zhifubao.png',
					text: '支付宝',
					id: 1
				}];
				this.openWay = 1;
			}
			// #endif
		},
		onShow() {
			this.taskData()
			this.getUserInfo();
			this.getlist();
			this.getMoney();
			this.getUserInfo();
			this.getMoneyList();
		},
		methods: {
			getMoneyList() {
				this.$Request.getT("/app/rechargeConfig/getConfigInfoList").then(res => {
					if (res.code == 0) {
						this.wallet = res.data.records
						this.price = this.wallet[0].money
						this.rechargeId = this.wallet[0].rechargeId
					}
				});
			},
			getUserInfo() {
				this.$Request.getT("/app/user/selectUserById").then(res => {
					if (res.code == 0) {
						this.avatar = res.data.avatar ? res.data.avatar : this.globalImages ? this.globalImages + 'images/static/image/logo.png' : ''
						uni.setStorageSync('avatar', res.data.avatar)
					}
				});
			},
			cut(e) {
				this.title_color = e
			},
			goNav(url) {
				uni.navigateTo({
					url
				})
			},
			handlePriceInput() {
			  this.wallIndex = -1; // 取消预设金额的选中状态
			  this.rechargeId = null; // 清空充值 ID
			},
			active(e, index) {
				this.wallIndex = index
				this.price = e.money
				this.rechargeId = e.rechargeId
				// this.wallet = 
				// this.wallet.forEach(res => {
				// 	if (res.id == e.id) {
				// 		res.isSelect = true
				// 		this.thisSelect = e
				// 	} else {
				// 		res.isSelect = false
				// 	}
				// })
			},
			// 我的余额
			getMoney() {
				this.$Request.getT("/app/userMoney/selectMyMoney").then(res => {
					if (res.code == 0 && res.data) {
						console.log(res.data.money)
						this.money = res.data.money
					}
				});
			},
			selectWay: function(item) {
				this.openWay = item.id;
			},
			//h5支付
			payH5() {
				let that = this
				let data = {
					money: that.price,
					rechargeId: that.rechargeId
				}
				if (this.openWay == 1) { //h5支付宝
					this.$Request.postT("/app/aliPay/payH5Money", 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()
							uni.hideLoading()
						} else {
							uni.showToast({
								icon: 'none',
								title: '支付失败!'
							});
						}
					});
				} else { //h5微信支付
					this.$Request.postT("/app/wxPay/wxPayMpMoney", data).then(res => {
						if (res.code == 0) {
							uni.hideLoading()
							that.callPay(res.data);
						} else {
							uni.showToast({
								icon: 'none',
								title: '支付失败!'
							});
						}
					});
				}
			},
			//app支付
			payApp() {
				let that = this
				let data = {
					money: that.price,
					rechargeId: that.rechargeId
				}
				if (this.openWay == 1) { //app支付宝
					that.$Request.postT("/app/aliPay/payAppMoney", data).then(ret => {
						console.log(ret)
						that.isCheckPay(ret.code, 'alipay', ret.data);
					});
				} else { //app微信支付
					that.$Request.postT("/app/wxPay/payAppMoney", data).then(ret => {
						console.log(ret, 'retretretretretret')
						that.isCheckPay(ret.code, 'wxpay', JSON.stringify(ret.data));
					});
				}
			},
			//微信支付
			payMP(money) {
				let that = this
				let data = {
					money: that.price,
					rechargeId: that.rechargeId
				}
				that.$Request.postT('/app/wxPay/wxPayJsApiMoney', data).then(ret => {
					uni.hideLoading()
					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'
							})
						}
					});
				});
			},
			pay() {
				// console.log(this.thisSelect)
				// let data = {
			
				// }this.price
				uni.showLoading({
					title: '支付中...'
				});
				// H5
				// #ifdef H5
				this.payH5()
				// #endif
				//APP
				// #ifdef APP
				this.payApp()
				// #endif
				//小程序
				// #ifdef MP-WEIXIN
				this.payMP()
				// #endif
			},
			callPay: function(response) {
				console.log(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 {
					console.log(1)
					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();
							}, 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: '支付成功'
						});
					},
					fail: function(err) {
						console.log(err)
						uni.hideLoading();
					},
					complete() {
						uni.hideLoading();
					}
				});
			},
			getUserInfo() {
				this.$Request.getT('/app/user/selectUserById').then(res => {
					console.log(res)
					if (res.code == 0) {
						this.balance = res.data.balance
					}
				});
			},
			// 获取余额
			taskData() {
				this.$Request.getT('/app/userMoney/selectMyMoney').then(res => {
					if (res.code == 0) {
						if (res.data) {
							this.money = res.data.money
							this.accumulateMoney = res.data.accumulateMoney
						}

					}
				});
			},
			getlist() {
				let data = {
					page: this.page,
					limit: this.limit,
					classify:3
				}
				this.$Request.getT('/app/wxPay/wxPayJsApiMoneyDetails', data).then(res => {
					if (res.code == 0) {
						this.totalPage = res.data.currPage
						if (this.page == 1) {
							this.moeylist = res.data.list
						} else {
							this.moeylist = [...this.moeylist, ...res.data.list]
						}
						// console.log(this.totalPage, '==========')
						uni.stopPullDownRefresh();

					}
				});
			},
			upper: function(e) {
				// console.log(e)
				this.page = 1;
				this.getlist();

			},
			lower: function(e) {
				// console.log(e)
				if (this.page < this.totalPage) {
					this.page = this.page + 1;
					this.getlist();
				}
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			gocz() { // 充值
				uni.navigateTo({
					url: '/my/wallet/Txmoney'
				})
			},
			gotx() { // 提现 
				uni.navigateTo({
					url: '/my/wallet/wallet'
				})
			}
		},
		onReachBottom: function() {
			// console.log(this.page < this.totalPage, '-------------', this.page, this.totalPage)
			if (this.page < this.totalPage) {
				this.page = this.page + 1;
				this.getlist();
			}

		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getlist();
		},
	}
</script>

<style lang="less">
	.active {
		border: #fe6b01 solid 1rpx !important;
	}
	page {
		background: #F5F5F5;
	}

	.bg {
		background: #FFFFFF;
	}

	.scroll-Y {
		height: 60vh;
	}

	.box {
		width: 690rpx;
		height: 312rpx;
		background: linear-gradient(90deg, #75B6FF 0%, #0278FE 100%);
		border-radius: 16rpx;
		color: #FFFFFF;
		text-align: center;
		padding-top: 50rpx;

		.tit {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
		}

		.pri {
			margin-top: 20rpx;

			text {
				font-size: 68rpx;
				font-family: DINPro;
				font-weight: 500;
				color: #FFFFFF;
				margin-right: 10rpx;
			}
		}
	}

	.tx {
		width: 160rpx;
		height: 70rpx;
		border: 3rpx solid #5074FF;
		border-radius: 8rpx;
		text-align: center;
		line-height: 70rpx;
		color: #5074FF;
	}

	.cz {
		width: 200rpx;
		height: 70rpx;
		border-radius: 8rpx;
		text-align: center;
		line-height: 70rpx;
		color: #FFFFFF;
		margin-left: 20rpx;
		background: #fe6b01;
	}

	.lin {
		width: 6rpx;
		height: 32rpx;
		background: #0278FE;
		margin-right: 15rpx;
	}
	
	.list_box {
		display: flex;
		height: 40rpx;
		// margin: 0 30rpx;
	}
	
	.box_left {
		flex: 1;
		display: flex;
		justify-content: left;
		align-items: center;
	}
	
	.list-box-item {
		width: 100%;
		// height: 200rpx;
		border-radius: 16rpx;
		background-color: #ffffff;
		padding: 30rpx 30rpx;
	}
	
	.list-box-item2 {
		// height: 200rpx;
		border-radius: 16rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
		padding: 30rpx 30rpx;
		margin: 0 30rpx;
	}
	
	.list-box-item3 {
		// height: 200rpx;
		border-radius: 16rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
		margin: 0 30rpx;
	}
	
	.title {
		font-size: 32rpx;
		font-family: PingFang SC;
		color: #333333;
	}
</style>