Delivery-merchant/pages/Walletdetails.vue

<template>
	<view class="titlenav">
		<!-- <titlenav :flag="true"></titlenav> -->
		<view class="top">
			<view class="title">提现</view>
			<view class="box-con">
				<p>提现金额</p>
				<view class="num">
					<span>全部可提现 ¥{{ money || 0 }}</span>
				</view>
				<view class="box">
					<view class="numbers">
						<image class="img" src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-24-15-57-32PFysvIHT.png" mode=""></image>
						<input type="number" v-model="boxPrice" placeholder="请输入金额" />
					</view>
					<view class="text2" @click="allMoney">全部</view>
				</view>
				<view class="btom" @click="show = true">
					<span>提现至</span>
					<view class="btomIpc">
						<image class="imgBox" src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-26-15-27-51oTVSzeFr.png" mode=""></image>
						<text>光大银行储蓄卡(1234)</text>
						<image class="imgBox2" src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-26-15-15-54YOiVgcKi.png" mode=""></image>
					</view>
				</view>
				<u-button type="primary" size="small" :disabled="notWithdrawal" @click="Withdrawal(notWithdrawal)">申请提现</u-button>
			</view>
			<u-popup v-model="show" mode="bottom" border-radius="12">
				<view class="ipc">选择到账的银行卡</view>
				<u-cell-group>
					<view class="conPup" @click="Add">
						<view class="right">
							<image class="img2" src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-26-15-15-33kVvYGRfP.png" mode=""></image>
							<view class="add">添加新卡提现</view>
						</view>
						<image class="img3" src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-26-15-15-54YOiVgcKi.png" mode=""></image>
					</view>
				</u-cell-group>
			</u-popup>
		</view>
	</view>
</template>
<script>
import { mapState } from 'vuex';
import Titlenav from '../components/Titlenav.vue';
export default {
	components: { Titlenav },
	data() {
		return {
			boxPrice: '',
			money: '',
			show: false
		};
	},
	computed: {
		...mapState(['systemInfo']),
		notWithdrawal() {
			let flag = false;
			this.boxPrice > this.money ? (flag = false) : (flag = true);
			return flag;
		}
	},
	methods: {
		Add() {
			uni.navigateTo({
				url: '/pages/Addipc'
			});
		},
		Withdrawal() {
			uni.navigateTo({
				url: '/pages/Review'
			});
		}
		// Withdrawal(notWithdrawal) {
		// 	if (notWithdrawal) {
		// 		wx.showToast({
		// 			icon: 'none',
		// 			title: '提现金额超出'
		// 		});
		// 		return;
		// 	}
		// 	if (this.boxPrice < 1) {
		// 		wx.showToast({
		// 			icon: 'none',
		// 			title: '金额不能低于1元',
		// 			duration: 2000
		// 		});
		// 		return;
		// 	}
		// 		})
		// 		.catch(e => {
		// 			wx.showToast({
		// 				icon: 'none',
		// 				title: e.error
		// 			});
		// 		});
		// }
	}
};
</script>
<style lang="scss" scoped>
/deep/ .u-btn {
	height: 48px;
	background: #214bbe;
	border-radius: 4px;
	margin: 88px 23px 0 23px;
}
/deep/ .uni-input-input {
	font-size: 30px;
	font-family: OSP-DIN, OSP;
	font-weight: normal;
	color: #000000;
}
/deep/ .uni-scroll-view {
	min-height: 200px;
	border-radius: 12px 12px 10px 10px;
	.ipc {
		margin: 20px 0;
		text-align: center;
		font-size: 16px;
		font-weight: 400;
		color: #000000;
		line-height: 24px;
	}
	.conPup {
		height: 56px;
		line-height: 56px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 20px;
		.right {
			display: flex;
			align-items: center;
			.img2 {
				width: 24px;
				height: 24px;
			}
			.add {
				font-size: 16px;
				font-weight: 400;
				color: #000000;
				line-height: 22px;
				margin-left: 6px;
			}
		}
		.img3 {
			width: 12px;
			height: 24px;
		}
	}
}
.titlenav {
	height: 491px;
	background: linear-gradient(180deg, #214bbe 0%, #ffffff 100%);
	.top {
		padding-top: 10px;
		.title {
			font-size: 22px;
			font-weight: bold;
			color: #ffffff;
			line-height: 26px;
			margin: 0 0 20px 20px;
		}
		.box-con {
			height: 600px;
			background: #ffffff;
			border-radius: 8px;
			margin: 0 20px;
			p {
				font-size: 14px;
				font-weight: bold;
				color: #000000;
				line-height: 20px;
				padding: 30px 0 4px 16px;
			}
			.num {
				display: flex;
				align-items: center;
				padding-left: 16px;
				span {
					font-size: 13px;
					font-weight: 400;
					color: #c8c9cc;
					line-height: 22px;
				}
			}
			.box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 42px;
				margin: 16px 16px 0 16px;
				padding-bottom: 12px;
				border-bottom: 1px solid #f5f7fa;
				.numbers {
					display: flex;
					align-items: center;
					.img {
						width: 15px;
						height: 17px;
						margin-right: 5px;
					}
				}
				.text2 {
					width: 70px;
					height: 31px;
					border-radius: 8px;
					border: 1px solid #214bbe;
					font-size: 13px;
					color: #214bbe;
					font-weight: bold;
					text-align: center;
					line-height: 28.5px;
				}
			}
			.btom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 17px;
				margin-top: 21px;
				span {
					font-size: 14px;
					font-weight: bold;
					color: #000000;
					line-height: 24px;
				}
				.btomIpc {
					display: flex;
					align-items: center;
					text {
						font-size: 16px;
						font-weight: 400;
						color: #000000;
						line-height: 22px;
						margin: 0 2px 0 6px;
					}
					.imgBox {
						width: 24px;
						height: 24px;
					}
					.imgBox2 {
						width: 12px;
						height: 24px;
					}
				}
			}
		}
	}
}
</style>