moxuan_takeaway_qishou_1/pages/riderMy/myAccount/Txmoney/Txmoney.vue

<template>
	<view class="content" v-if="XCXIsSelect != '否'">
		<view class="part_one">
			<view class="one_title">可提现金额</view>
			<view class="one_price">¥{{ mayMoney }}</view>
		</view>
		<view class="part_two">
			<view class="two_title">
				提现金额
				<text>提现最低额度{{ minMoney }}元</text>
			</view>
			<view class="two_box">
				¥
				<u-input v-model="money" type="number" :clearable="false" :border="border" placeholder="请输入提现金额" />
			</view>

			<view class="beizhu">*注单笔限制提现最低额度{{ minMoney }}元，最大提现额度为{{ manMoney }}元，单笔提现手续费{{ shouxufei * 100 }}%</view>
		</view>
		<view class="part_three">
			<view class="three_name">兑换方式</view>
			<view class="btn">
				<view class="btn_left" :class="current == 2 ? 'btna' : ''" @click="bindToindex(2)">
					<image src="../../../../static/my/weixin.png"></image>
					<text>微信</text>
				</view>
				<view class="btn_right" :class="current == 1 ? 'btna' : ''" @click="bindToindex(1)">
					<image src="../../../../static/my/zhifubao.png"></image>
					<text>支付宝</text>
				</view>
			</view>
		</view>
		<view style="margin-top: 59upx" class="padding-lr margin-lr-sm">
			<view class="yinghang">提现银行卡信息</view>
			<view style="color: #333333; text-align: left">
				银行卡号：
				<text class="yinghang2">{{ yingNo }}</text>
			</view>
			<view style="color: #333333; text-align: left">
				开户行：
				<text class="yinghang2">{{ yingName }}</text>
			</view>
			<view style="color: #333333; text-align: left">
				开户人姓名：
				<text class="yinghang2">{{ yingPeople }}</text>
			</view>
			<!-- <view class="flex justify-between margin-bottom-xl" v-for="(item,index) in openLists" :key="index">
				<view class="flex align-center">
					<image :src="item.image" style="width:23px;height:20px"></image>
					<text class="text-lg margin-left-sm" style="color:#333333;font-weight:700;">{{item.text}}</text>
				</view>
				<view>
					<radio-group name="openWay" style="margin-left: 20upx;" @tap='selectWay(item)'>
						<label class="tui-radio">
							<radio color="#FF7F00" :checked="openWay === item.id ? true : false" />
						</label>
					</radio-group>
				</view>
			</view> -->
		</view>
		<view class="part_four">
			<view class="submit" @click="getOut()">立即提现</view>
			<view class="four_box">
				<view class="box_left" @click="goZhifuBao">提现账户</view>
				<view class="box_right" @click="list">提现记录</view>
				<view class="box_right" @click="isShow">微信收款码</view>
			</view>
		</view>

		<!-- 微信收款码弹框 -->
		<u-popup v-model="show" mode="center">
			<view class="padding">
				<view class="text-center text-lg text-bold flex justify-between">
					<view></view>
					<view>添加微信收款码</view>
					<view @click="show = false">X</view>
				</view>
				<!-- <view class="text-center padding-top-sm padding-bottom-lg" style="color: #999999;">请提交微信号和微信二维码
				</view> -->
				<view style="width: 80%; margin: 0 auto">
					<view class="margin-top" @click.stop="weixin" style="border: 4rpx solid #010101; border-radius: 16rpx; overflow: hidden">
						<image v-if="!wximg" src="../../../../static/image/erweima.png"></image>
						<image v-else :src="wximg" mode=""></image>
					</view>
				</view>
				<!-- <view class="text-center margin-top-sm " @click="submit"
					style="border-radius: 10rpx;background-color: #7E59FF;color: #fff;height: 80rpx;line-height: 80rpx;">保存</view> -->
			</view>
		</u-popup>

		<!-- 用于图片压缩的canvas画布 -->
		<canvas
			:style="{
				width: cw + 'px',
				height: cw + 'px',
				position: 'absolute',
				zIndex: -1,
				left: '-10000rpx',
				top: '-10000rpx'
			}"
			canvas-id="zipCanvas"
		></canvas>
		<!--画布结束-->
	</view>
</template>

<script>
import { showToast } from '../../../../common/queue'
import configdata from '../../../../common/config.js'
import getLessLimitSizeImage from '@/utils/imageCompress.js'
export default {
	data() {
		return {
			show: false,
			current: '1',
			// value: 10,
			money: '',
			zhifubaoName: '',
			zhifubao: '',
			shouxufei: 0.01,
			minMoney: '10',
			manMoney: '200',
			mayMoney: '',
			XCXIsSelect: '否',
			wximg: '',
			values: '',
			// 银行卡号
			yingNo: '',
			// 开户行
			yingName: '',
			// 开户人姓名
			yingPeople: '',
			//画板边长默认是屏幕宽度，正方形画布
			cw: uni.getSystemInfoSync().windowWidth
		}
	},
	onLoad() {
		this.XCXIsSelect = this.$queue.getData('XCXIsSelect')
		if (this.XCXIsSelect == '否') {
			uni.setNavigationBarTitle({
				title: '隐私政策'
			})
		} else {
			uni.setNavigationBarTitle({
				title: '余额提现'
			})
		}
	},
	onShow() {
		this.getMoney()
		//最低可提现金额度
		this.$Request.getT('/app/common/type/112').then((res) => {
			if (res.code === 0) {
				this.minMoney = res.data.value
			}
		})
		//最高可提现金额度
		this.$Request.getT('/app/common/type/153').then((res) => {
			if (res.code === 0) {
				this.manMoney = res.data.value
			}
		})
		//手续费
		this.$Request.getT('/app/common/type/114').then((res) => {
			if (res.code === 0) {
				this.shouxufei = res.data.value
			}
		})
		//判断微信提现方式
		this.$Request.getT('/app/common/type/290').then((res) => {
			if (res.code == 0) {
				if (res.data && res.data.value) {
					this.values = res.data.value
				}
			}
		})
		// 银行卡信息
		let data = {
			userId: uni.getStorageSync('userId')
		}
		this.$Request.getT('/app/rider/bank/getUserId', data).then((res) => {
			if (res.code == 0) {
				this.yingNo = res.data.cardNo
				this.yingName = res.data.openBank
				this.yingPeople = res.data.realName
			}
		})
	},
	methods: {
		//用户收款码弹框
		isShow() {
			this.getMoney()
			this.show = true
		},
		//微信 支付宝提现选择
		bindToindex(e) {
			this.current = e
			console.log(e, this.current)
		},
		list() {
			uni.navigateTo({
				url: '/pages/riderMy/myAccount/AcontMoney/cashList'
			})
		},
		goZhifuBao() {
			uni.navigateTo({
				url: '/pages/riderMy/myAccount/AcontMoney/zhifubao'
			})
		},
		getMoney() {
			let that = this
			let token = this.$queue.getData('token')
			let userId = this.$queue.getData('userId')
			if (token) {
				//this.$queue.showLoading("加载中...");
				//可以提现金额查询预估收入查询
				that.$Request.getT('/app/userinfo/findUserInfoById').then((res) => {
					console.log(res, '111')
					if (res.code === 0 && res.data) {
						that.mayMoney = res.data.balance
						this.zhifubao = res.data.zhiFuBao
						this.zhifubaoName = res.data.zhiFuBaoName
						that.wximg = res.data.cashQrCode
					} else if (res.code === -102) {
						that.$queue.showToast(res.msg)
						that.$queue.logout()
						// uni.navigateTo({
						// 	url: '/pages/public/login'
						// });
					} else {
						that.mayMoney = '0'
						//this.$queue.showToast(res.msg);
					}
				})
			}
		},
		getOut() {
			let that = this
			let token = that.$queue.getData('token')
			let userId = that.$queue.getData('userId')
			if (token) {
				if (that.current == 1) {
					// if (!this.zhifubao || !this.zhifubaoName) {
					// 	uni.navigateTo({
					// 		url: '/pages/riderMy/myAccount/AcontMoney/zhifubao'
					// 	})
					// 	return
					// }
					if (!/^\d+$/.test(that.money)) {
						// uni.showToast({
						// 	icon: 'none',
						// 	title: '请输入正确金额,不能包含中文,英文,特殊字符和小数'
						// });
						that.$queue.showToast('请输入正确金额,不能包含中文,英文,特殊字符和小数')
						return
					}
					if (Number(that.money) < Number(that.minMoney)) {
						uni.showToast({
							icon: 'none',
							title: '提现金额不能小于' + that.minMoney + '元'
						})
						return
					}

					if (Number(that.money) > Number(that.manMoney)) {
						uni.showToast({
							icon: 'none',
							title: '提现金额不能大于' + that.manMoney + '元'
						})
						return
					}
					uni.showModal({
						title: '提现申请提示',
						content:
							'请仔细确认收款人信息\r\n姓名:' +
							that.yingPeople +
							`\r\n提现金额:` +
							that.money +
							'元' +
							'\r\n提现手续费:' +
							parseFloat(that.money * that.shouxufei).toFixed(2) +
							'元' +
							'\r\n收款账号：' +
							that.yingNo +
							'',
						success: (e) => {
							if (e.confirm) {
								let data = {
									classify: that.current,
									money: that.money
								}
								that.$queue.showLoading('提现中...')
								that.$Request.getT('/app/cash/cashMoney', data).then((res) => {
									if (res.code === 0) {
										that.$queue.showToast('提现申请成功，预计三个工作日到账')
										that.getMoney()
										that.mayMoney = ''
									} else {
										uni.showModal({
											title: '温馨提示',
											content: res.msg,
											showCancel: false,
											cancelText: '取消',
											confirmText: '确认'
										})
									}
									uni.hideLoading()
								})
							}
						}
					})
				} else if (that.current == 2) {
					if (!/^\d+$/.test(that.money)) {
						// uni.showToast({
						// 	icon: 'none',
						// 	title: '请输入正确金额,不能包含中文,英文,特殊字符和小数'
						// });
						that.$queue.showToast('请输入正确金额,不能包含中文,英文,特殊字符和小数')
						return
					}
					if (Number(that.money) < Number(that.minMoney)) {
						uni.showToast({
							icon: 'none',
							title: '提现金额不能小于' + that.minMoney + '元'
						})
						return
					}

					if (Number(that.money) > Number(that.manMoney)) {
						uni.showToast({
							icon: 'none',
							title: '提现金额不能大于' + that.manMoney + '元'
						})
						return
					}
					if (that.values == 2) {
						that.$Request.getT('/app/userinfo/findUserInfoById').then((res) => {
							if (res.code === 0) {
								let wxImg = res.data.cashQrCode
								if (!wxImg) {
									uni.showModal({
										title: '提现提示',
										content: '请上传微信收款码',
										showCancel: true,
										cancelText: '取消',
										confirmText: '上传',
										success: (res) => {
											if (res.confirm) {
												that.show = true
											}
										},
										fail: () => {},
										complete: () => {}
									})
									return
								}

								if (that.money * 1 >= that.minMoney * 1) {
									uni.showModal({
										title: '提现申请提示',
										content:
											'请仔细确认收款人信息\r\n姓名:' +
											that.yingPeople +
											'\r\n提现金额:' +
											that.money +
											'元' +
											'\r\n提现手续费:' +
											parseFloat(that.money * that.shouxufei).toFixed(2) +
											'元' +
											'\r\n收款账号：' +
											that.yingNo +
											'',
										success: (e) => {
											if (e.confirm) {
												that.$queue.showLoading('提现中...')
												let data = {
													money: that.money,
													classify: 2
												}
												that.$Request.getT('/app/cash/cashMoney', data).then((res) => {
													if (res.code === 0) {
														setTimeout(function () {
															that.$queue.showToast('提现申请成功，预计三个工作日到账')
														}, 1000)
														that.getMoney()
														that.money = ''
													} else {
														uni.showModal({
															title: '温馨提示',
															content: res.msg,
															showCancel: false,
															cancelText: '取消',
															confirmText: '确认'
														})
													}
													uni.hideLoading()
												})
											}
										}
									})
								} else {
									setTimeout(function () {
										that.$queue.showToast('提现金额必须大于或等于' + that.minMoney + '元才可提现')
									}, 1000)
								}
							} else {
								that.$queue.showToast('网络状态不好，请刷新后重试！')
							}
						})
					} else {
						if (!/^\d+$/.test(that.money)) {
							// uni.showToast({
							// 	icon: 'none',
							// 	title: '请输入正确金额,不能包含中文,英文,特殊字符和小数'
							// });
							that.$queue.showToast('请输入正确金额,不能包含中文,英文,特殊字符和小数')
							return
						}
						if (parseFloat(that.money).toFixed(1) >= that.minMoney) {
							uni.showModal({
								title: '提现申请提示',
								content:
									'请仔细确认收款人信息\r\n姓名:' +
									that.yingPeople +
									'\r\n提现金额:' +
									that.money +
									'元' +
									'\r\n提现手续费:' +
									parseFloat(that.money * that.shouxufei).toFixed(2) +
									'元' +
									'\r\n收款账号：' +
									that.yingNo +
									'',
								success: (e) => {
									if (e.confirm) {
										that.$queue.showLoading('提现中...')
										let data = {
											money: that.money,
											classify: 2,
											type: 3
										}
										that.$Request.getT('/shop/shopmoney/shopCashMoney', data).then((res) => {
											if (res.code === 0) {
												setTimeout(function () {
													that.$queue.showToast('提现申请成功，预计三个工作日到账')
												}, 1000)
												that.getMoney()
												that.money = ''
											} else {
												uni.showModal({
													title: '温馨提示',
													content: res.msg,
													showCancel: false,
													cancelText: '取消',
													confirmText: '确认'
												})
												that.getMoney()
											}
											uni.hideLoading()
										})
									}
								}
							})
						} else {
							that.$queue.showToast('提现金额必须大于或等于' + that.minMoney + '元才可提现')
						}
					}
				}
			} else {
				uni.showToast({
					title: '提现失败'
				})
			}
		},
		config: function (name) {
			var info = null
			if (name) {
				var name2 = name.split('.') //字符分割
				if (name2.length > 1) {
					info = configdata[name2[0]][name2[1]] || null
				} else {
					info = configdata[name] || null
				}
				if (info == null) {
					// let web_config = cache.get("web_config");
					// if (web_config) {
					// 	if (name2.length > 1) {
					// 		info = web_config[name2[0]][name2[1]] || null;
					// 	} else {
					// 		info = web_config[name] || null;
					// 	}
					// }
				}
			}
			return info
		},
		weixin() {
			let that = this
			uni.chooseImage({
				count: 1,
				sourceType: ['album', 'camera'],
				success: (res) => {
					for (let i = 0; i < 1; i++) {
						//这里的id和页面中写的html代码的canvas的id要一致
						let canvasId = 'zipCanvas'
						//原图的路径
						let imagePath = res.tempFiles[i].path
						//大小限制
						let limitSize = 1024 * 2
						//初始绘画区域是画布自身的宽度也就是屏幕宽度
						let drawWidth = uni.getSystemInfoSync().windowWidth
						let that = this
						getLessLimitSizeImage(canvasId, imagePath, limitSize, drawWidth, that, (resPath) => {
							uni.showLoading({
								title: '上传中'
							})
							uni.uploadFile({
								url: that.config('APIHOST1') + '/alioss/upload',
								filePath: resPath,
								name: 'file',
								success: (uploadFileRes) => {
									let img = JSON.parse(uploadFileRes.data).data
									let userId = that.$queue.getData('userId')
									let data = {
										cashQrCode: img
									}
									that.$Request.postJson('/app/user/updateUser', data).then((res) => {
										if (res.code == 0) {
											that.getMoney()
											setTimeout(function () {
												that.$queue.showToast('上传成功')
											}, 1000)
										}
									})
									uni.hideLoading()
								},
								fail: () => {
									uni.showToast({
										title: '上传失败',
										icon: 'error'
									})
								}
							})
						})
					}
				}
			})
		}
	}
}
</script>

<style>
body {
	background: #f5f5f5;
}

.content {
	width: 100%;
}

.part_one {
	width: 90%;
	margin: 0 auto;
	background: #ffffff;
	margin-top: 20rpx;
	border-radius: 20rpx;
	height: 170rpx;
}

.one_title {
	width: 90%;
	margin: 0 auto;
	font-size: 32rpx;
	letter-spacing: 1rpx;
	padding-top: 30rpx;
}

.one_price {
	width: 90%;
	margin: 0 auto;
	margin-top: 20rpx;
	font-size: 47rpx;
	font-weight: bold;
}

.part_two {
	width: 90%;
	margin: 0 auto;
	background: #ffffff;
	margin-top: 20rpx;
	border-radius: 20rpx;
}

.two_title {
	width: 90%;
	margin: 0 auto;
	line-height: 95rpx;
	font-size: 34rpx;
}

.two_title text {
	font-size: 27rpx;
	margin-left: 34rpx;
}

.two_box {
	width: 90%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	font-size: 32rpx;
	font-weight: bold;
}

.u-input__input {
	font-size: 50rpx !important;
	color: #747474 !important;
	border-bottom: 1rpx solid #cccccc;
}

.tit {
	width: 90%;
	margin: 0 auto;
	font-size: 31rpx;
	margin-top: 10rpx;
	color: black;
}

.beizhu {
	width: 90%;
	margin: 0 auto;
	line-height: 55rpx;
	color: red;
	letter-spacing: 1rpx;
}

.part_three {
	width: 90%;
	margin: 0 auto;
	background: #ffffff;
	margin-top: 20rpx;
	border-radius: 20rpx;
}

.three_name {
	width: 90%;
	margin: 0 auto;
	font-size: 33rpx;
	color: black;
	line-height: 80rpx;
}

.btn {
	width: 96%;
	margin: 0 auto;
	display: flex;
	padding-bottom: 30rpx;
}

.btn_left {
	flex: 1;
	height: 90rpx;
	border: 1rpx solid #ccc;
	border-radius: 20rpx;
	margin-right: 10rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.btn_right {
	flex: 1;
	/* width: 240rpx; */
	height: 90rpx;
	border: 1rpx solid #ccc;
	border-radius: 20rpx;
	margin-left: 10rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.btna {
	border: 1rpx solid #e34b21 !important;
}

.btn_left image {
	width: 50rpx;
	height: 50rpx;
	margin-right: 12rpx;
}

.btn_right image {
	width: 50rpx;
	height: 50rpx;
	margin-right: 12rpx;
}

.part_four {
	width: 90%;
	margin: 0 auto;
	/* background: #FFFFFF; */
	margin-top: 20rpx;
	border-radius: 20rpx;
}

.submit {
	width: 100%;
	height: 90rpx;
	background: #f8501f;
	color: #f8ebd2;
	text-align: center;
	line-height: 90rpx;
	font-size: 37rpx;
	border-radius: 12rpx;
}

.four_box {
	width: 90%;
	margin: 0 auto;
	height: 125rpx;
	display: flex;
	color: #838383;
}

.box_left {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.box_right {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}
/* // 提现银行卡信息 */
.yinghang {
	height: 80rpx;
	line-height: 80rpx;
	font-size: 36rpx;
	font-weight: 700;
	text-align: left;
}
.yinghang2 {
	height: 80rpx;
	line-height: 80rpx;
	font-size: 36rpx;
	font-weight: 700;
}
</style>