frontend-app/pages/rwa_package/account/components/code-item.vue

<template>
	<u-popup :show="codeShow" mode="bottom" bgColor="transparent">
		<view class="select-item">
			<view class="select-head">
				<view></view>
				<text class="text-28 text-fu1">验证码</text>
				<u-icon name="close" color="#333" size="16" @click="onClose"></u-icon>
			</view>
			<view class="item-mid-view">
				<view class="input-view">
					<up-input placeholder="请输入验证码" border="surround" v-model="code"
					:customStyle="inputCss">
						<template #suffix style="margin-right: 10rpx;">
							<view v-if="countdown" class="code-warp">
								<up-count-down :time="60 * 1000" format="ss" @finish="countdown = false"></up-count-down>
								<text style="margin-left: 10rpx;">s</text>
							</view>
							<view v-else @click="getMobileCode" class="code_msg">
								获取验证码
							</view>
						</template>
					</up-input>
				</view>
				
			</view>
			<view class="item-bottom-btn">
				<MyBtn @ok="onOk" text="确定"></MyBtn>
			</view>
		</view>
		<up-toast ref="uToastRef"></up-toast>
	</u-popup>
</template>

<script>
import { getUserList } from '@/api/common.js';
	
	import MyBtn from '@/components/common/my-btn.vue'
	export default {
		data() {
			return {
				code:'',
				countdown:'',
				inputCss: {
					"background": "#fff",
				},
			}
		},
		components: { MyBtn },
		props:{
			codeShow:{
				type:Boolean,
				default:false
			},
			phone:{
				type:String,
				default:''
			},
		},
		mounted(){
		},
		methods: {
			onOk(){
				if(!this.code){
					this.$refs.uToastRef.show({
						type: 'error',
						message: "验证码不可为空",
					});
					return;
				}
				this.$emit('ti',this.code);
				this.code = '';
			},
			onClose(){
				this.$emit('close');
				this.countdown = false;
			},
			async getMobileCode() {
				if (!this.phone) {
					this.$refs.uToastRef.show({
						type: 'error',
						message: "请输入手机号码",
					});
					return;
				}
				this.countdown = true;
			
				const params = {
					mobile: this.phone,
					type: 'withdraw'
				}
				const response = await getUserList(params);
				if (response && response.bizcode === 100) {
					this.$refs.uToastRef.show({
						type: 'success',
						message: response.msg,
					});
				} else {
					this.countdown = false;
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.select-item{
		width:100%;
		min-height:418rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 32rpx 24rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		.item-bottom-btn{
			width:100%;
			margin-top:24rpx;
			min-height:88rpx;
			display: flex;
		}
		.item-mid-view{
			width:100%;
			height:218rpx;
			min-height:218rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			overflow-y: auto;
			.input-view{
				width:100%;
				height:88rpx;
				min-height:88rpx;
			}
			
		}
		.select-head{
			width:100%;
			height:88rpx;
			min-height:88rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
	}
</style>