MP_XOIL_company_new/components/transBlock/index.vue

<template>
	<view>
		<uni-popup ref="indexPopup" type="bottom">
			<view class="trans-block">
				<view class="title">请输入赠卡金额</view>
				<text>￥</text>
				<input v-model="params.occurAmount" class="uni-input" type="digit"
					:placeholder=" '最多可以赠送'+ info.balance + '元'" />

				<view style="width: 90vw; margin: 150rpx auto 0;">
					<view class="newcard_title zc">
						转出说明
						<view class="tiao"></view>
					</view>
					<view class="text" style="">转出油费实时到账，本页非任何法律文件，转出钱请认真核对
						转出人，转出金额，如遇纠纷问题，请联系当事人解决处理。 </view>
				</view>


				<button @click="sendTextMessage">确认赠卡</button>
			</view>
		</uni-popup>

		<uni-popup ref="smscodePopup" type="center">
			<view class="poput_tip">
				<view :style="'background-image: url('+popupbg+ ');'" class="popup_header">短信身份验证</view>
				<view style="margin: 20rpx auto;width: 90%;">转出验证：本次转出需要短信确认，验证码 已发送至您的手机
					{{phoneHandle(this.user.userPhone)}}
				</view>
				<xt-verify-code class="code" v-model="params.code" @confirm="submit" :isFocus="isFocus"></xt-verify-code>
				<button @click="send" class="oliout_butten"
					style="width:60%; border-radius: 50rpx;">{{time===0?'重新发送验证码':time+'S'}}
				</button>
			</view>
		</uni-popup>

		<uni-popup ref="successPopupt" type="center">
			<view class="poput_tip">
				<view :style="'background-image: url('+popupbg+ ');'" class="popup_header">温馨提示</view>
				<view style="margin: 20rpx auto;width: 90%;text-align: center;">
					<view class="container_img">
						<image class="success_img" src="../../static/img/success.png"></image>
					</view>
					转出成功!
				</view>
				<button @click="$refs.successPopupt.close()" class="oliout_butten"
					style="width:60%; border-radius: 50rpx;">确认</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import serve from '@/api/account.js'
	export default {
		data() {
			return {
				popupbg: 'https://xoi-support.oss-cn-hangzhou.aliyuncs.com/web/cuscomtrac/popupbg.png',
				time: 0,
				price: '',
				info: {},
				isFocus:false,
				user: uni.getStorageSync('user') || {},
				params: {
					occurAmount: '',
					code: '',
					verifyCodeToken: '',
					billType: 'OIL_DONATION',
					createSource: 'XOIL_DRIVER_WECHAT_APPLET',
				}
			}
		},

		methods: {
			_open(item) {
				if (item) {
					this.params.occurAmount = ''
					this.info = item
					this.$refs.indexPopup.open()
				}
			},
			sendTextMessage() {
				if (!this.submitCheck()) return

				if (this.time === 0) {
					this.params.code = ''
					this.params.verifyCodeToken = ''
					serve.giveCard({
						phone: this.user.userPhone
					}).then(res => {
						this.time = 60
						this.params.verifyCodeToken = res.data.verifyCodeToken
						this.timefn()
						this.isFocus = true
						this.$refs.smscodePopup.open()
					})

				}
			},
			submitCheck() {
				let {
					occurAmount
				} = this.params
				if (!occurAmount) {
					uni.showToast({
						title: '请输入赠送金额',
						icon: 'none'
					})
					return
				}
				if (occurAmount > this.info.balance) {
					uni.showToast({
						title: '超过最多赠送金额',
						icon: 'none'
					})
					return
				}
				if (occurAmount < 5) {
					uni.showToast({
						title: '赠送金额不可低于5元',
						icon: 'none'
					})
					return
				}
				return true
			},
			submit() {
				let {
					giveCustomerId, //收款方
					companyId, //付款方
					accountCardCode //付款方
				} = this.info

				serve.oilCustomerAccountRecord({
					giveCustomerId,
					givePhone: '',
					companyId,
					payerCustomerId: this.user.id,
					accountCardCode,
					...this.params
				}).then(res => {
					this.$refs.indexPopup.close()
					this.$refs.smscodePopup.close()
					this.$refs.successPopupt.open()
					this.$emit('reloadCard')
				})
			},


			phoneHandle(e) {
				return e.substr(0, 3) + "****" + e.substr(7);
			},

			timefn() {
				if (this.time !== 0) {
					this.time--
					setTimeout(() => {
						this.timefn()
					}, 1000)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.newcard_title {
		font-size: 30rpx;
		font-weight: 600;
	}

	.tiao {
		height: 5px;
		width: 100%;
		background: -webkit-linear-gradient(left, rgba(254, 5, 5, 1), rgba(254, 5, 5, .2), rgba(254, 5, 5, 0));
	}

	.text {
		padding-right: 50rpx;
		color: #666666;
		font-size: 23rpx;
		margin-top: 15rpx;
	}

	.zc {
		width: max-content;

	}


	.poput_tip {
		width: 85vw;
		height: 40vh;
		background-color: #F8F8F8;
		border-radius: 15rpx;
		overflow: hidden;
	}

	.popup_header {
		height: 20%;
		width: 100%;
		background-color: #FE0505;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		background-size: 100% 30vh;
	}

	.container_img {
		height: 100rpx;
		width: 100rpx;
		overflow: hidden;
		border-radius: 50%;
		margin: 0 auto;
		margin-top: 50rpx;
		margin-bottom: 25rpx;
	}

	// .xt__verify-code .xt__input-ground .xt__box-box.data-v-e4b72d00 {
	// 	height: 100rpx !important;
	// }

	// .xt__verify-code {
	// 	width: 90% !important;
	// 	margin: 0 auto !important;
	// }

	.oliout_butten {
		width: 90vw;
		margin: 0 auto;
		background-color: #FE0505;
		margin-top: 60rpx;
		color: #F0F0F0;
	}

	.trans-block {
		padding: 54rpx 43rpx 0 63rpx;
		width: 100%;
		height: 679rpx;
		background: #FFF;
		border-radius: 15rpx 15rpx 0 0;

		.title {
			margin-bottom: 35rpx;
			font-size: 26rpx;
			font-weight: 550;
			color: #333;
		}

		>text {
			position: relative;
			top: -10rpx;
			font-size: 42rpx;
			font-weight: 550;
			color: #000;
		}

		>input {
			display: inline-block;
			margin-left: 10rpx;
			font-size: 28rpx;
			color: #000;
		}

		>button {
			margin-top: 40rpx;
			width: 441rpx;
			height: 89rpx;
			color: #fff;
			font-size: 34rpx;
			text-align: center;
			background: #FF6700;
			border-radius: 10rpx
		}
	}
</style>