serviceHome-uniapp-241015/service-uniapp-technician/pages/mine/wallet.vue

<template>
	<view class="content">
		<mNavbar title="分销代理" :leftClick="leftClick" />
		<view class="banner" />

		<view class="b-relative center font-m">
			<image src="/static/ms/1120.jpg" />
			<view class="title" style="position: absolute; top: 40rpx; left: 40rpx">
				<view style="line-height: 40rpx; font-size: 28rpx">账号余额（元）</view>
				<view style="line-height: 60rpx; font-size: 40rpx">{{ belece.money }}</view>
			</view>
			<view class="font-menu flex flex-sb">
				<view @click="toRunningWater(0)">充值记录</view>
				<view @click="toRunningWater(1)">提现记录</view>
				<view @click="toRunningWater(2)">下单记录</view>
				<view @click="toRunningWater(3)">佣金记录</view>
			</view>
		</view>

		<view class="from-body">
			<view>我要提现</view>
			<view class="from-line">
				<input placeholder="请输入提现金额" v-model="form.price"/>
			</view>
			<!-- <view class="from-line">
				<input placeholder="请输入姓名" v-model="form.name"/>
			</view> -->
			<!-- <view class="from-line">
				<input placeholder="请输入电话" v-model="form.phone"/>
			</view> -->
			<view class="from-line">
				<input placeholder="请输入开户行" v-model="form.bank"/>
			</view>
			<view class="from-line">
				<input placeholder="请输入银行卡卡号" v-model="form.card"/>
			</view>
			<!-- <view class="mt56">提现说明</view> -->
			<view style="line-height: 45rpx; font-size: 24rpx;color: #666666;" 
			v-html="notice">
			</view>
				<!-- <p>1、本次提现必须通过银行卡提现，暂不支持其他途径。</p>
				<p>2、如若遇到24小时提现未到账，请联系客服。</p> -->
		</view>


		<view class="b-fiexd">
			<view class="button-submit"
			@click="submit">提交</view>
		</view>

	</view>
</template>

<script>
	import mNavbar from '../../components/base/m-navbar.vue'
	export default {
		components: {
			mNavbar,
		},
		data() {
			return {
				config : [],
				notice : '',
				form : {
					type : 1
				},
				userInfo : {},
				belece : {}
			}
		},
		onShow() {
			this.getUserInfo()
			this.getConfig()
		},
		methods: {
			getUserInfo() {
				this.$api('giveTenInfo', {}, res => {
					if (res.code == 200) {
						this.userInfo = res.result.msgTen;
						this.belece = res.result.belece;
					}
				})
			},
			leftClick() { //返回个人中心
				uni.switchTab({
					url: '/pages/index/center'
				})
			},
			getConfig() {
				this.vid = uni.getStorageSync("ivcode");
				this.$api('getConfig', {} ,res => {
					if(res.code == 200){
						res.result.forEach(n => {
							if(n.keyValue == 'withdraw'){
								this.notice = n.content
							}
						})
						this.config = res.result
					}
				})
			},
			submit(){ //立即提现
				let isOk = this.parameterVerification();
				if(isOk && !isOk.auth){
					return uni.showToast({
						title : isOk.title,
						icon : 'none'
					})
				}
				this.$api('giveWithdrawal', this.form, res => {
					if (res.code == 200) {
						uni.showToast({
							title: '提现成功',
							icon: 'none'
						})
						setTimeout(uni.navigateBack, 1000, -1)
					}
				})
			},
			parameterVerification(){		//验证用户参数合法性
				let { price , bank , card, phone } = this.form
				
				// if(!phone){
				// 	return { title : '请填写联系电话' , auth : false }
				// }
				
				if(!price){
					return { title : '请填写提现金额' , auth : false }
				}else if(price <= 0){
					return { title : '提现金额必须大于0' , auth : false }
				}else if(price > this.belece.money){
					return { title : '提现金额大于余额' , auth : false }
				}else if(bank.trim() == ''){
					return { title : '请填写开户行' , auth : false }
				}else if(card.trim() == ''){
					return { title : '请填写卡号' , auth : false }
				}
				return { title : '验证通过' , auth : true }
			},
			toRunningWater(status) { //跳转流水页面
				uni.navigateTo({
					url: `/pages/mine/runningWater?status=${status}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	body {
		background-color: #fff;
	}

	.banner {
		width: 100vw;
		height: 256rpx;
		background: rgba($uni-color, 0.2);
	}

	.center {
		width: 710rpx;
		height: 316rpx;
		margin: -204rpx auto 0;
	}

	.center image {
		width: 710rpx;
		height: 316rpx;
		border-radius: 12rpx;
	}

	.font-m {
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: left;
		color: #ffffff;
		text-shadow: 0 4rpx 6rpx 0 rgba($uni-color, 0.81);
	}

	.font-menu {
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 500;
		text-align: center;
		color: #ffffff;
		line-height: 24rpx;
		width: 710rpx;

		position: absolute;
		left: 0;
		bottom: 25rpx;
	}

	.font-menu view {
		width: calc(100% / 4);
		border-right: 1rpx solid #fff;
	}


	.item-line input {
		width: 456rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: #f5f5f5;
		border-radius: 12rpx;

		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		text-align: left;
		color: #939393;

		padding: 0 20rpx;
	}



	.from-body {
		padding: 40rpx 20rpx;

		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: left;
		color: #333333;
		line-height: 40px;
		padding-bottom: 160rpx;
	}

	.from-line {
		margin-top: 40rpx;
	}

	.from-body input {
		width: 612rpx;
		height: 90rpx;
		line-height: 90rpx;
		background: #f5f5f5;
		border-radius: 46rpx;

		padding: 0 50rpx;

		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: left;
		color: #333;
	}



	.button-submit {
		width: 596rpx;
		height: 90rpx;
		line-height: 90rpx;
		background: $uni-bg-color;
		color: $uni-color;
		border-radius: 46rpx;

		margin: 20rpx auto;

		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: center;
	}
</style>