CBB3/pages/user/detail/anticipate_gift.vue

<template>
	<view>

		<uni-nav-bar :border="false" statusBar left-icon="left" @clickLeft="utils.navigateBack()"
			@clickRight="tapOpenLog" fixed title="易趣卷转账">
			<view style="color: #ef4034;" slot="right">
				转账记录
			</view>
		</uni-nav-bar>

		<view style="height: 10px;"></view>

		<view class="topinfo fx-h fx-bc fx-ac">
			<view class="count">{{ user.anticipate || 0 }}</view>
			<view class="text">当前可用(易趣卷)</view>
		</view>

		<view style="height: 10px;"></view>
		<view class="info-line">
			<view class="il-top">
				<text>转账类型</text>
			</view>
			<view class="il-bot fx-r fx-bc fx-ac">
				<uv-radio-group v-model="type">
					<uv-radio activeColor="red" name="id" label="收款ID"></uv-radio>
						<view style="width: 40px;"></view>
						<uv-radio activeColor="red" name="phone" label="收款手机号"></uv-radio>
				</uv-radio-group>
			</view>
		</view>
		<view class="info-line" v-if="type == 'id'">
			<view class="il-top">
				<text>收款人id</text>
			</view>
			<view class="il-bot">
				<input placeholder="收款人id" @input="tapGetId" type="number" v-model="uid" />
				<view class="name">{{ sendname }}</view>
			</view>
		</view>

		<view class="info-line" v-if="type == 'phone'">
			<view class="il-top">
				<text>手机号码</text>
			</view>
			<view class="il-bot">
				<input placeholder="转账手机号码" @input="tapGetMobile" type="number" v-model="new_mobile" />
				<view class="name">{{ sendname }}</view>
			</view>
		</view>

		<view class="info-line">
			<view class="il-top">
				<text>转账金额</text>
			</view>
			<view class="il-code">
				<view class="etb-left">
					<input placeholder="请输入转账金额" @blur="tapBlur" placeholder-class="placeholder-class" v-model="num" />
				</view>
				<!-- <view class="etb-right" @click="num = allMoney()">
					<text>全部</text>
				</view> -->
			</view>
		</view>
		<uv-alert title="温馨提示" type="warning" description="转账金额必须10倍数!"></uv-alert>

		<view class="info-line">
			<view class="update-btn" @click="tapSubmit">
				<text>确认转账</text>
			</view>

			<view style="height: 10px;"></view>
		</view>
		<PayDialog ref="payDialog" @getPassword="getPassword"></PayDialog>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import PayDialog from "@/components/ui-pay/payDialog.vue";
	export default {
		computed: mapState(['user', 'sysData']),
		components: {
			PayDialog
		},
		data() {
			return {
				num: "",
				type: "id",
				new_mobile: "",
				sendname: "",
				uid: "",
				data: {
					lv: 0
				}
			}
		},
		onLoad(options) {
			this.checkUserLogin({
				page: this,
				isLogion: false
			});
		},
		methods: {
			...mapMutations(['checkUserLogin']),

			tapGetMobile: function(ev) {
				let mobile = ev.detail.value;
				if (!this.utils.isPoneAvailable(mobile)) {
					this.sendname = '';
					return;
				}
				this
					.request
					.post("userCkUserName", {
						mobile: mobile,
						type: 1
					})
					.then(res => {
						if (res.code == 200) {
							this.sendname = res.data.name;
						} else {
							this.utils.Tip(res.msg);

						}
					});

			},


			tapGetId: function(ev) {
				let id = ev.detail.value;
				if (id == "") {
					this.sendname = '';
					return;
				}
				this
					.request
					.post("userCkUserName", {
						uid: id,
						type: 1
					})
					.then(res => {
						if (res.code == 200) {
							this.sendname = res.data.name;
						} else {
							this.sendname = "";
						}
					});
			},

			tapOpenLog: function() {
				uni.navigateTo({
					url: "anticipate_gift_log"
				});
			},


			/**
			 * 预计扣除
			 */
			getKc: function() {
				if (isNaN(this.num)) return "0.00";
				let val = this.utils.returnFloat(this.num * (this.data.lv / 10));
				return val;
			},
			/**
			 * 全部
			 */
			allMoney: function() {
				if (this.user.anticipate <= 0) return 0;
				let val = this.utils.returnFloat(this.user.anticipate * (this.data.lv / 10));
				let value = this.user.anticipate - parseFloat(val);
				return parseInt(value / 10) * 10;
			},

			tapBlur: function(ev) {
				var value = ev.detail.value;
				if (isNaN(value)) {
					this.num = 0;
					return;
				}
				this.num = parseInt(value / 10) * 10;
			},
			/**
			 * 提交数据
			 */
			tapSubmit: function() {

				if (this.new_mobile == '' && this.type == 'phone') {
					this.utils.Tip("请输入转账号码");
					return;
				}

				if (this.uid == '' && this.type == 'id') {
					this.utils.Tip("请输入转账id");
					return;
				}

				if (this.num <= 0 || this.num == '') {
					this.utils.Tip("请输入正确转账金额!");
					return;
				}
				if (parseFloat(this.num) > this.allMoney()) {
					this.utils.Tip("转账金额超过剩余金额");
					return;
				}

				this.$refs['payDialog'].show();
			},

			getPassword: function(val) {
				var password = val.password;
				this.utils.loadIng("提交中..");
				this
					.request
					.post("anticipateGive", {
						new_password: password,
						new_mobile: this.new_mobile,
						num: this.num,
						uid: this.uid,
						type: this.type
					})
					.then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							this.utils.Tip(res.msg);
							setTimeout(function() {
								uni.navigateBack();
							}, 1000);
						} else {
							this.utils.Tip(res.msg);
							this.$refs['payDialog'].cleanNum();
						}
					}).catch(function() {
						uni.hideLoading();
						this.utils.Tip("网络错误，请稍后尝试");
					});
			}

		},

	}
</script>


<style>
	page {
		background: #F5F5F5;
	}

	#box {
		padding-top: 90px;
		z-index: -1;
	}

	.topinfo {
		background: #fff;
		padding: 40rpx 0;

		.count {
			background-size: 100%;
			font-size: 24px;
			color: #303133;
			font-weight: 700;
			background-repeat: no-repeat;
			background-position: 50%;
		}

		.text {
			color: #909399;
			font-size: 18px;
		}

	}

	.info-line {
		min-height: 80px;
		padding: 0 15px;
		background-color: #fff;
		border-top: 1px #f5f5f5 solid;
	}

	.il-top {
		color: #ef4034;
		font-size: 14px;
		margin-top: 10px;
	}

	.il-bot {
		margin-top: 10px;
		position: relative;
	}

	.il-bot input {
		width: 100%;
		height: 100%;
	}

	.il-bot .name {
		position: absolute;
		right: 10px;
		top: 0px;
	}

	.update-btn {
		width: 90%;
		height: 40px;
		text-align: center;
		line-height: 40px;
		margin: 30px auto;
		background: #ef4034;
		color: #fff;
		border-radius: 100px;
		font-size: 16px;
	}

	.il-code {
		display: flex;
		align-items: center;
		margin-top: 10px;
	}

	.il-code input {
		width: 50%;
		height: 100%;
		font-size: 13px;
	}

	.ilc-btn {
		width: 90px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		margin-left: auto;
		font-size: 12px;
		background: #ef4034;
		color: #fff;
		border-radius: 100px;
	}

	.ilc-no-show {
		width: 90px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		margin-left: auto;
		font-size: 12px;
		background: #eee;
		color: #999;
		border-radius: 100px;
	}

	.etb-left {
		width: 80%;
		height: 100%
	}

	.placeholder-class {
		color: #7e7e7e;
		font-size: 13px;
		font-weight: 400
	}

	.etb-left input {
		width: 100%;
		height: 100%;
		color: #484747;
		font-size: 22px;
		font-weight: 600
	}

	.etb-right {
		margin-left: auto;
		color: #2d2438;
		font-size: 13px
	}

	.tip {
		font-size: 14px;
		padding: 10px 0;
		color: #ef4034;
	}

	.tip-info {
		padding: 5px 0;
	}

	.tip-info .label {
		color: #000;
		font-weight: bold;
	}

	.tip-info .money {
		color: orangered;
	}
</style>