kly_uniapp/pages/personal/wallet.vue

<!-- 我的-钱包 -->
<!-- 注意，不要重排代码格式 -->

<template>
	<view>
		<!-- 非商家钱包 -->
		<view v-if="sys_role==0">
			<view :style="'background-image:url( '+serverUrlImg+'  )'" class="wal_bg">
				<view style="margin-left: 4%;" class="wal_bg_left">
					<view>账户余额（元）</view>
					<view style="font-size: 56upx;margin-top: 6upx;">{{finance_balance.toFixed(2)}}</view>
				</view>
				<view class="wal_bg_right" style="margin-right: 4%;">
					<view @click="open_modal('wxRecharge')" style="background-color: #ffefcb;color: #f96a3e;">充值</view>
					<view @click="open_modal('withdraw')"
						style="background-color: #d3fff2;color: #05a87d;margin-top: 20upx;">提现</view>
				</view>
			</view>
		</view>

		<!-- 商家钱包 -->
		<view v-else>
			<view :style="'background-image:url( '+serverUrlImgMer+'  )'" class="wal_bg">
				<view style="display: flex;justify-content: space-between;width: 100%;height: 160upx;">
					<view style="margin-left: 4%;" class="wal_bg_left">
						<view>{{user_info.company_name}}</view>
					</view>
					<view class="wal_bg_right" style="margin-right: 4%;">
						<view @click="open_modal('withdraw')" style="background-color: #d3fff2;color: #05a87d;">提现
						</view>
					</view>
				</view>
			</view>
			<view class="merch_money_box">
				<view style="width: 38%;border-right: 2upx solid #efefef;box-sizing: border-box;"
					class="merch_money_box_in">
					<view class="merch_money_box_in_1">{{finance_frozenBalance.toFixed(2)}}</view>
					<view class="merch_money_box_in_2">冻结金额（元）</view>
				</view>
				<view style="width: 38%;" class="merch_money_box_in">
					<view class="merch_money_box_in_1">{{finance_balance.toFixed(2)}}</view>
					<view class="merch_money_box_in_2">账户余额（元）</view>
				</view>
				<view @click="open_modal('wxRecharge')" style="background-color: #ffefcb;color: #ff6044;"
					class="merch_money_box_in_3">充值</view>
			</view>
		</view>

		<!-- 都显示 -->
		<view class="head">
			<view @click="change_type(0)" :class="type=='0'?'focus':''">收益</view>
			<view @click="change_type(1)" :class="type=='1'?'focus':''">支出</view>
		</view>
		<view style="background-color: #F4F4F4;height: 20upx;"></view>
		<view class="loading_text" v-if="loading">加载中...</view>
		<view v-else>
			<view :key="index" v-for="(item, index) in data" class="con box">
				<view style="display: flex;align-items: center;">
					<view style="">
						<view style="font-size: 32upx;font-weight: bold;display: flex;">
							<view :style="'color: '+(type==0?'#f53c41':'#00AB92')+';'">
								{{item.bizCatalogName||item.typeName}}
							</view>
							<view style="margin-left: 10upx;">
								{{item.biz_roletype==1?'现场经理-':''}}
								{{item.bt2_true_name||''}}
							</view>
						</view>
						<view style="width: 550upx;margin-top: 10upx;">{{item.remark}}</view>
						<view style="color: #8D8D8D;font-size: 28upx;margin-top: 10upx;">{{item.occurdatetime}}</view>
					</view>
				</view>
				<view :style="'color: '+(type==0?'#f53c41':'#00AB92')+';'">
					{{type==0?'+':'-'}}{{item.money}}
				</view>
			</view>
		</view>
		<view class="loading_text" v-if="data.length==0&&!loading">暂无数据</view>

		<!-- 遮罩内容 -->
		<uni-popup ref="popup" :mask-click="false">
			<view style="overflow: hidden;" class="modal_box">
				<view style="margin-top: 30upx;">
					<view style="text-align: center;color: #00ba98;font-size: 32upx;">
						{{todo_title}}
					</view>
					<view v-if="todo=='buyPrepay'" style="text-align: center;margin-top: 10upx;">
						{{'单价'+pricePer+'元/人'}}
					</view>
					<input :value="ipt_value" v-model="ipt_value" @input="ipt_change"
						:type="todo=='buyPrepay'?'number':'digit'" class="ipt" :placeholder="'请输入'+todo_title" />
					<input v-if="todo=='withdraw'" :value="trueName" v-model="trueName" @input="trueNameChange"
						:type="'text'" class="ipt" :placeholder="'请输入真实姓名'" />
					<view class="modal_btn">
						<view @click="close_modal()" class="modal_btn_cancel">取消</view>
						<view @click="process()" v-if="todo=='withdraw'" class="modal_btn_confirm">确认提现</view>
						<view v-else @click="process()" class="modal_btn_confirm">
							{{current_pay_loading?'计算中...':(current_pay+'元')}}
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import commonData from '../../commonData.js'
	import commonFun from '../../commonFun.js'

	export default {
		data() {
			return {
				serverUrlImg: this.serverUrl + 'wallet_bg.png',
				serverUrlImgMer: this.serverUrl + 'merchant/my_bg.png',
				type: 0, //tab栏status
				data: [], //主数据
				loading: true, //数据加载中...
				finance_balance: 0, //账户余额
				finance_frozenBalance:0,//冻结金额
				user_info: {}, //用户信息
				sys_role: commonData.sys_role, //角色
				todo_title: '', //操作todo标题
				rule: {}, //当前配置
				todo: '', //操作todo
				ipt_value: '', //输入框值
				current_pay: 0, //当前需要支付的实时金额
				current_pay_loading: false, //当前实时金额加载中...
				finance_numtotalbalance: 0, //剩余次数
				pricePer: 0,
				trueName: '',
			}
		},
		methods: {
			// 真实姓名输入
			trueNameChange(e) {
				this.trueName = e.target.value
			},
			// 输入框输入
			ipt_change(e) {
				if (e.target.value > 100000) {
					uni.showModal({
						content: '输入值应小于100000',
						showCancel: false
					})
					return
				}
				if (isNaN(Number(e.target.value))) {
					return
				}
				this.ipt_value = Number(e.target.value)
				// 充次数
				if (this.todo == 'buyPrepay') {
					this.fetchRecuritRule()
				}
				// 充值
				if (this.todo == 'wxRecharge' || this.todo == 'withdraw') {
					this.current_pay = this.ipt_value.toFixed(2)
				}
			},
			//拉取当前单价等配置
			fetchRecuritRule() {
				this.current_pay_loading = true
				commonFun.requestUrl('&WsAjaxBiz=Trader&WsAjaxAction=entityDataHandle', {
					handleMode: 'fetchRecuritRule',
					bizCatalog: 'PlatConfigEntity'
				}, res => {
					if (res.status) {
						this.rule = res.data.Result
						this.current_pay = (Number(this.ipt_value).toFixed(0) * Number(this.rule.pricePer))
							.toFixed(2)
						this.pricePer = this.rule.pricePer
						console.log('拉取当前配置')
						console.log(this.rule, this.current_pay)
					}
					this.current_pay_loading = false
				})
			},
			// 关闭遮罩
			close_modal() {
				this.$refs.popup.close('top')
			},
			// 打开遮罩
			open_modal(todo) {
				if (todo == 'withdraw') {
					if (this.finance_balance == 0) {
						return
					}
					if ((this.sys_role == 0 && !this.user_info.idcard ) || (this.sys_role == 1 && (!this
							.user_info.lawer_idcard || this.user_info.certif_confirmed == '0'))) {
						uni.showModal({
							title: '提现需要实名认证',
							success: (res) => {
								if (res.confirm) {
									uni.navigateTo({
										url: this.sys_role == 0 ? './authentication' :
											'./authentication_merchant'
									})
								}
							}
						})
						return
					}
				}
				this.ipt_value = ''
				this.current_pay = 0.00
				this.todo = todo
				this.$refs.popup.open('top')
				this.todo_title = commonData.todo_wal_title_obj[todo]['title']
			},
			// 处理
			process() {
				// 判断输入
				if (isNaN(Number(this.ipt_value)) || Number(this.ipt_value) <= 0) {
					uni.showModal({
						title: '请输入正确的金额或人数！',
						showCancel: false
					})
					return
				}
				// 处理提现
				if (this.todo == 'withdraw' && ((Number(this.ipt_value) > this.finance_balance) || Number(this.ipt_value) <
						1)) {
					uni.showModal({
						title: '提现金额应该小于账户余额，且不小于1元！',
						showCancel: false
					})
					return
				}
				if (this.todo == 'withdraw' && this.trueName == '') {
					uni.showModal({
						title: '请输入真实姓名！',
						showCancel: false
					})
					return
				}

				// 处理充值金额
				uni.showModal({
					content: '确认' + this.todo_title + this.current_pay + '元？',
					success: (res) => {
						if (res.confirm) {
							uni.login({
								success: res => {
									uni.showLoading({
										title: '加载中...',
										mask: true
									})
									let params = {
										bizCatalog: commonData.todo_wal_title_obj[this.todo][
											'bizCatalog'
										],
										handleMode: commonData.todo_wal_title_obj[this.todo][
											'handleMode'
										],
										todo: 'part',
										buyCount: Number(this.ipt_value).toFixed(0),
										money: Number(this.ipt_value).toFixed(2),
										minaCode: res.code,
										trueName: this.trueName,
									}
									console.log('处理请求参数')
									console.log(params)
									// return
									commonFun.requestUrl(
										'&WsAjaxBiz=Worker&WsAjaxAction=entityDataHandle',
										params,
										res => {
											console.log(res)
											if (res.status) {
												// 提现
												if (this.todo == 'withdraw') {
													uni.hideLoading()
													uni.showModal({
														title: '提现成功!',
														showCancel: false,
														success: () => {
															setTimeout(() => {
																this.get_data()
																this.close_modal()
															}, 300)
														}
													})
													return
												}
												// 充值预处理结果/购买次数预处理结果
												if (this.todo == 'wxRecharge' || this.todo ==
													'buyPrepay') {
													let prePayInfo = this.todo ==
														'wxRecharge' ? res.data.Result
														.prePayInfo : res.data.Result
													console.log('充值预处理结果')
													console.log(prePayInfo)

													if (this.todo == 'buyPrepay' && prePayInfo
														.payResult == true) {
														uni.hideLoading()
														uni.showModal({
															title: '充值成功',
															confirmText: '充值完成',
															cancelText: '返回上页',
															success: res => {
																if (res.confirm) {
																	this.get_data()
																	this.close_modal()
																} else {
																	uni.navigateBack({
																		delta: 1
																	})
																}
															}
														})
														return
													}

													uni.requestPayment({
														...prePayInfo,
														success: (res2) => {
															uni.showModal({
																title: '充值成功',
																confirmText: '充值完成',
																cancelText: '返回上页',
																success: res => {
																	if (res
																		.confirm
																	) {
																		this.get_data()
																		this.close_modal()
																	} else {
																		uni.navigateBack({
																			delta: 1
																		})
																	}
																}
															})
														},
														fail: function(res2) {
															if (res2.errMsg
																.indexOf(
																	'cancel') == -1
															) {
																uni.showModal({
																	title: '充值失败',
																	content: JSON
																		.stringify(
																			res2
																		),
																	showCancel: false,
																})
															}
														}
													});
												}
											}
											uni.hideLoading()
										})
								}
							})
						}
					}
				})
			},
			// 获取用户信息
			get_info() {
				this.finance_balance = 0
				commonFun.get_user_info(res => {
					if (res.status) {
						uni.hideLoading()
						let user_info = res.data.Result
						this.user_info = user_info
						this.finance_balance = user_info.finance_balance
						this.finance_frozenBalance = user_info.finance_frozenBalance
						this.finance_numtotalbalance = this.user_info.finance_numFreeCount + this.user_info
							.finance_numtotalbalance
						console.log('钱包打印个人信息')
						console.log(this.user_info)
					}
					uni.stopPullDownRefresh()
				})
			},
			//切换tab
			change_type(type) {
				this.type = type
				this.get_data()
			},
			// 获取数据
			get_data() {
				if (this.sys_role == 1) {
					this.fetchRecuritRule()
				}
				this.get_info()
				if (this.isTrader2 == 1 || this.FOREND_TOKEN == '') {
					uni.stopPullDownRefresh()
					return
				}

				this.loading = true
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let params = {
					bizCatalog: 'AccountEntity',
					handleMode: 'fetchall',
					pageIndex: 1,
					pageSize: 1000,
					orderby: 0,
					query: {
						type: this.type + 1,
					}
				}
				console.log('钱包列表请求参数')
				console.log(params)
				commonFun.requestUrl('&WsAjaxBiz=Worker&WsAjaxAction=fetchPageData', params, res => {
					if (res.status) {
						this.data = res.data.Result.pageData
						console.log('钱包获取数据')
						console.log(this.data)
					}
					this.loading = false
					uni.hideLoading()
					uni.stopPullDownRefresh()
				})
			},
		},
		components: {},
		onShow() {
			this.get_data()
		},
		onLoad(e) {
			// 如果携带需要充值的次数，则自动弹窗并携带次数
			if (e.dvalue) {
				this.open_modal('buyPrepay')
				setTimeout(() => {
					this.ipt_value = Number(e.dvalue)
					this.fetchRecuritRule()
				}, 300)
			}
			this.get_data()
		},
		onPullDownRefresh() {
			this.get_data();
		},
	};
</script>

<style>
	.ipt {
		background-color: #f4f4f4;
		width: 90%;
		margin-left: 5%;
		height: 90upx;
		text-align: center;
		margin-top: 20upx;
	}

	.wal_bg_right view {
		width: 150upx;
		height: 60upx;
		border-radius: 30upx;
		line-height: 60upx;
		text-align: center;
	}

	.wal_bg_left view {
		color: white !important;
	}

	.wal_bg {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 300upx;
		background-size: 750upx 300upx;
	}

	.box {
		border-bottom: 4upx solid #ececec;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 92% !important;
		margin-left: 4% !important;
	}

	.head view.focus {
		border-bottom: 6upx solid #00AB92;
		color: #00AB92;
	}

	.head view {
		height: 70upx;
		margin-top: 40upx;
		width: 150upx;
		text-align: center;
	}

	.head {
		display: flex;
		justify-content: space-around;
		overflow: hidden;
	}

	.con {
		width: 100%;
		/* height: 170upx; */
		background: #FFFFFF;
		padding: 30upx 0;
	}

	.wal {
		width: 100%;
		height: 254upx;
		background: linear-gradient(90deg, #0ABACC 0%, #00DC7C 100%);
		border-radius: 26upx;
		color: #ffffff;
		margin-top: 20upx;
		overflow: hidden;
	}

	.merch_money_box_in_3 {
		width: 120upx;
		height: 50upx;
		border-radius: 30upx;
		line-height: 50upx;
		text-align: center;
		margin-top: 20upx;
	}

	.merch_money_box_in_1 {
		color: #333333;
		font-size: 40upx;
	}

	.merch_money_box_in_2 {
		color: #999999;
		margin-top: 10upx;
	}

	.merch_money_box_in view {
		margin-left: 60upx;
	}

	.merch_money_box_in {
		height: 200upx;
		/* background-color: #006566; */
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.merch_money_box {
		width: 92%;
		height: 220upx;
		margin-left: 4%;
		margin-top: -130upx;
		background: #FFFFFF;
		box-shadow: 0px 3px 9px 0px rgba(115, 115, 115, 0.09);
		border-radius: 16upx;
		display: flex;
		align-items: center;
	}

	.wal_bg_right view {
		width: 150upx;
		height: 60upx;
		border-radius: 30upx;
		line-height: 60upx;
		text-align: center;
	}

	.wal_bg_left view {
		color: white !important;
		font-size: 32upx;
	}

	.wal_bg {
		width: 100%;
		height: 370upx;
		background-size: 750upx 370upx;
	}

	.wal_bg_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 240upx;
	}

	.box {
		border-bottom: 4upx solid #ececec;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.head view.focus {
		border-bottom: 6upx solid #00AB92;
		color: #00AB92;
	}

	.head view {
		height: 70upx;
		margin-top: 40upx;
		width: 150upx;
		text-align: center;
	}

	.head {
		display: flex;
		justify-content: space-around;
		overflow: hidden;
	}

	.con {
		width: 100%;
		/* height: 170upx; */
		background: #FFFFFF;
		padding: 30upx 0;
	}

	.wal {
		width: 100%;
		height: 254upx;
		background: linear-gradient(90deg, #0ABACC 0%, #00DC7C 100%);
		border-radius: 26upx;
		color: #ffffff;
		margin-top: 20upx;
		overflow: hidden;
	}
</style>