moxuan_takeaway_shanghu/my/other/cashDetail.vue

<template>
	<view class="cash">
		<view style="background-image: url('../../static/images/my/qanbaobg.png'); background-size: 100%; height: 400upx">
			<view style="font-size: 32upx; padding-top: 100upx">可提现总额</view>
			<view style="font-size: 40upx; padding-top: 20upx">¥ {{ money }}</view>

			<view
				style="
					width: 90%;
					height: max-content;
					margin-left: 40upx;
					background-color: #ffffff;
					box-shadow: rgba(183, 183, 183, 0.3) 0px 1px 10px;
					margin-top: 50upx;
					border-radius: 20upx;
				"
			>
				<view style="display: flex; flex-direction: row; padding: 20upx">
					<view style="font-size: 32upx; color: #333333">
						提现金额
						<text style="font-size: 28upx; color: #ff2638" v-if="shouxufei">（注：提现手续费为{{ shouxufei * 100 }}%）</text>
					</view>
				</view>
				<view style="display: flex; flex-direction: row; padding: 20upx">
					<view style="font-size: 40upx; color: #333333">¥</view>
					<input type="text" v-model="moneys" placeholder="请输入金额" style="font-size: 40upx; color: #333333; text-align: left; margin-left: 10upx; width: 100%" />
				</view>
				<view style="background: #e6e6e6; width: 100%; height: 1upx"></view>

				<view style="display: flex; flex-direction: row; flex-wrap: wrap">
					<view style="display: flex; flex-direction: row" v-for="(item, index) in moneyList" :key="index">
						<view>
							<view style="padding: 20upx" @click="getOut(item.money)">
								<view style="padding-top: 40upx; width: 180upx; height: 120upx; background-color: #ffffff; border: 1px solid #ffcc00; border-radius: 10upx">
									{{ item.money }}
								</view>
							</view>
						</view>
					</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 @click="getOut()" style="margin: 32upx; font-size: 18px; background: #ffcc00; border-radius: 10px; height: 40px; line-height: 40px">提现</view>

			<view style="display: flex; width: 100%; justify-content: center">
				<!-- <view style="color: grey;padding-bottom: 30px;padding-top: 20upx;flex: 1;" @click="goZhifuBao">提现账号
				</view> -->
				<view style="color: grey; padding-bottom: 30px; padding-top: 20upx; flex: 1" @click="goqianbao">钱包明细</view>
				<!-- <view style="color: grey;padding-bottom: 30px;padding-top: 20upx;flex: 1;" @click="isShow">微信收款码
				</view> -->
				<view style="color: grey; padding-bottom: 30px; padding-top: 20upx; flex: 1" @click="gojilu">提现记录</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/images/my/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 configdata from '@/common/config.js'
import getLessLimitSizeImage from '@/utils/imageCompress.js'
export default {
	data() {
		return {
			show: false,
			money: '',
			moneys: '',
			zhifubao: '',
			mayMoney: '0',
			zhifubaoName: '',
			shouxufei: '',
			moneyList: [
				{
					money: '10'
				},
				{
					money: '500'
				},
				{
					money: '1000'
				},
				{
					money: '3000'
				},
				{
					money: '5000'
				},
				{
					money: '10000'
				}
			],
			value: 0,
			min: '',
			zhifubao: '',
			zhifubaoName: '',
			openLists: [],
			openWay: 1,
			values: '',
			wximg: '',
			yingName: '',
			yingNo: '',
			yingPeople: '',
			//画板边长默认是屏幕宽度，正方形画布
			cw: uni.getSystemInfoSync().windowWidth
		}
	},
	onLoad() {
		this.getUserInfo()
		this.getyinghanglist()
		this.$Request.getT('/common/type/290').then((res) => {
			//判断微信提现方式
			if (res.code == 0) {
				if (res.data && res.data.value) {
					this.values = res.data.value
				}
			}
		})

		//提现手续费
		this.$Request.getT('/common/type/115').then((res) => {
			if (res.code === 0) {
				this.shouxufei = res.data.value
			}
		})

		this.openLists = [
			{
				image: '../../static/images/img/icon_weixin.png',
				text: '微信',
				id: 1
			},
			{
				image: '../../static/images/img/zhifubao.png',
				text: '支付宝',
				id: 2
			}
		]
		this.openWay = 1
	},
	onShow: function (e) {
		this.getwalletMoney()
		this.getUserInfo()
		this.getyinghanglist()
	},
	onNavigationBarButtonTap() {
		this.list()
	},
	methods: {
		//获取商户银行信息
		getyinghanglist() {
			let data = {
				userId: this.$queue.getData('userId')
			}
			this.$Request.getA('/admin/shop/bank/get-by-user', data).then((res) => {
				if (res.msg == 'success') {
					this.yingName = res.data.openBank
					this.yingNo = res.data.cardNo
					this.yingPeople = res.data.realName
				} else if (res.msg == 'shopId对应的银行卡记录不存在') {
					uni.showToast({
						icon: 'none',
						title: '银行信息不完整无法提现'
					})
				}
			})
		},
		//用户收款码弹框
		isShow() {
			this.getUserInfo()
			this.show = true
		},

		//微信 支付宝提现选择
		selectWay: function (item) {
			this.openWay = item.id
		},
		//获取用户信息获取用户是否上传收款码
		getUserInfo() {
			this.$Request.getA('/sys/user/info').then((res) => {
				if (res.code == 0) {
					this.zhifubao = res.user.userEntity.zhiFuBao
					this.zhifubaoName = res.user.userEntity.zhiFuBaoName
					this.wximg = res.user.userEntity.cashQrCode
					// console.log(this.zhifubao, this.zhifubaoName, '-')
				}
			})
		},
		//获取账户余额
		getwalletMoney() {
			this.$Request.getT('/shop/shopmoney/selectShopMoney').then((res) => {
				if (res.code == 0) {
					this.money = res.data.money
				}
				uni.hideLoading()
			})
		},
		gojilu() {
			uni.navigateTo({
				url: '/my/other/moneydetail'
			})
		},
		goqianbao() {
			uni.navigateTo({
				url: '/my/other/cashList'
			})
		},

		goZhifuBao() {
			uni.navigateTo({
				url: '/my/other/zhifubao'
			})
		},
		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 data = {
										cashQrCode: img
									}
									that.$Request.getA('/shop/shopmoney/shopBindingQrCode', data).then((res) => {
										if (res.code == 0) {
											that.getUserInfo()
											setTimeout(function () {
												that.$queue.showToast('上传成功')
											}, 1000)
										}
									})
									uni.hideLoading()
								},
								fail: () => {
									uni.showToast({
										title: '上传失败',
										icon: 'error'
									})
								}
							})
						})
					}
				}
			})
		},
		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
		},
		//校验用户输入金额
		checkMobile(money) {
			return RegExp(/^1[34578]\d{9}$/).test(money)
		},
		getOut(money) {
			let that = this
			if (money) {
				that.moneys = money
			}

			if (!/^\d+$/.test(that.moneys)) {
				uni.showModal({
					title: '提示',
					content: '请输入正确金额,不能包含中文,英文,特殊字符和小数',
					success: function (res) {
						if (res.confirm) {
						} else if (res.cancel) {
						}
					}
				})
				return
			}
			if (that.openWay == 2) {
				//支付宝提现
				if (that.zhifubao != null && that.zhifubaoName != null) {
					uni.showModal({
						title: '提现申请提示',
						content:
							'请仔细确认收款人信息\n\n收款人姓名:' +
							that.zhifubaoName +
							'\n\n收款人账号：' +
							that.zhifubao +
							'\n\n提现金额:' +
							that.moneys +
							'元\t\t手续费:' +
							(that.moneys * that.shouxufei).toFixed(1),
						success: (e) => {
							if (e.confirm) {
								that.$queue.showLoading('提现中...')
								let data = {
									money: that.moneys
									// classify: '1'
								}
								that.$Request.getT('/shop/shopmoney/shopCashMoney', data).then((res) => {
									if (res.status === 0 && res.data) {
										setTimeout(function () {
											that.$queue.showToast('提现申请成功，预计三个工作日到账')
										}, 3000)

										that.getwalletMoney()
									} else {
										that.$queue.showToast(res.msg)
										that.getwalletMoney()
									}
									uni.hideLoading()
								})
							}
						}
					})
				} else {
					uni.navigateTo({
						url: '/my/other/zhifubao'
					})
				}
			} else if (that.openWay == 1) {
				//微信提现
				if (that.values == 2) {
					that.$Request.getA('/sys/user/info').then((res) => {
						if (res.code === 0) {
							let wxImg = res.user.userEntity.cashQrCode
							if (!wxImg) {
								uni.showModal({
									title: '提现提示',
									content: '请上传微信收款码',
									showCancel: true,
									cancelText: '取消',
									confirmText: '上传',
									success: (res) => {
										if (res.confirm) {
											that.show = true
										}
									},
									fail: () => {},
									complete: () => {}
								})
								return
							}
							if (!/^\d+$/.test(that.moneys)) {
								uni.showModal({
									title: '提示',
									content: '请输入正确金额,不能包含中文,英文,特殊字符和小数',
									success: function (res) {
										if (res.confirm) {
										} else if (res.cancel) {
										}
									}
								})
								return
							}

							if (that.moneys * 1 >= that.value * 1) {
								uni.showModal({
									title: '提现申请提示',
									content: '金额:' + that.moneys + '元' + ',' + '手续费:' + (that.moneys * that.shouxufei).toFixed(1),
									success: (e) => {
										if (e.confirm) {
											that.$queue.showLoading('提现中...')
											let data = {
												money: that.moneys
												// classify: 2
											}
											that.$Request.getT('/shop/shopmoney/shopCashMoney', data).then((res) => {
												if (res.code === 0) {
													setTimeout(function () {
														that.$queue.showToast('提现申请成功，预计三个工作日到账')
													}, 1000)
													that.getwalletMoney()
												} else {
													uni.showModal({
														title: '温馨提示',
														content: res.msg,
														showCancel: false,
														cancelText: '取消',
														confirmText: '确认'
													})
												}
												uni.hideLoading()
											})
										}
									}
								})
							} else {
								setTimeout(function () {
									that.$queue.showToast('提现金额必须大于或等于' + that.value + '元才可提现')
								}, 1000)
							}
						} else {
							that.$queue.showToast('网络状态不好，请刷新后重试！')
						}
					})
				} else {
					if (!/^\d+$/.test(that.moneys)) {
						uni.showModal({
							title: '提示',
							content: '请输入正确金额,不能包含中文,英文,特殊字符和小数',
							success: function (res) {
								if (res.confirm) {
								} else if (res.cancel) {
								}
							}
						})
						return
					}
					if (parseFloat(that.moneys).toFixed(1) >= that.value) {
						uni.showModal({
							title: '提现申请提示',
							content: '金额:' + that.moneys + '元' + ',' + '手续费:' + parseFloat(that.moneys * that.shouxufei).toFixed(1),
							success: (e) => {
								if (e.confirm) {
									that.$queue.showLoading('提现中...')
									let data = {
										money: that.moneys
										// classify: 2
									}
									that.$Request.getT('/shop/shopmoney/shopCashMoney', data).then((res) => {
										if (res.code === 0) {
											setTimeout(function () {
												that.$queue.showToast('提现申请成功，预计三个工作日到账')
											}, 1000)
											that.getwalletMoney()
										} else {
											uni.showModal({
												title: '温馨提示',
												content: res.msg,
												showCancel: false,
												cancelText: '取消',
												confirmText: '确认'
											})
											that.getwalletMoney()
										}
										uni.hideLoading()
									})
								}
							}
						})
					} else {
						that.$queue.showToast('提现金额必须大于或等于' + that.value + '元才可提现')
					}
				}
			}
		}
	}
}
</script>

<style lang="less">
// @import '../../static/css/index.css';

.view2-view-text {
	font-size: 14px;
	color: #000000;
	margin-left: 20upx;
	width: 80%;
}

.view2-view-image-right {
	width: 18upx;
	height: 30upx;
	margin-left: 50upx;
}

.cash {
	text-align: center;
	background: white;
	height: 100%;
	position: absolute;
	width: 100%;

	.cash-top {
		padding: 32upx 32upx 50upx 32upx;
		/* border-bottom: 1px solid gainsboro; */
		background: #ff2638;
	}

	.leiji {
		font-size: 14px;
		color: #ffffff;
		margin-bottom: 10px;
	}
	// 提现银行卡信息
	.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>