activitys-uniapp/components/alert/verificationCodeAlert.vue

<template>
	<view>
		<u-popup v-model="show" mode="center" width="80%" border-radius="15" :closeable="true" :mask-close-able="false">
			<view class="code-alert-container">
				<view class="title">投票验证</view>
				<view class="code-input">
					<u-input placeholder="请输入验证码" maxlength="4" v-model="codevalue" type="number"></u-input>
					<image style="width: 160rpx; height: 80rpx;" :src="codeImg" @click="handleRefreshCode"></imague>
				</view>
				<view style="color: #EF9944; margin-bottom: 30rpx;">* 为了保证投票的公平性，防止刷票行为，请先完成验证</view>
				<u-button :custom-style="customStyle" shape="circle" @click="confirm">确认</u-button>
			</view>
		</u-popup>
		<toast ref="toast"></toast>
	</view>
</template>

<script>
	export default {
		props: {
			codeImg: ''
		},
		data() {
			return {
				show: false,
				customStyle: {
					color: 'white',
					background: "#E72226",
					width: '400rpx'
				},
				codevalue: ''
			};
		},
		created() {
			this.customStyle.background = this.vuex_theme.bgColor;
		},
		computed: {},
		methods: {
			handleRefreshCode(){
				this.$emit('handleRefreshCode')
			},
			confirm(){
				this.$emit('confirm',this.codevalue)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.code-alert-container {
		padding: 50rpx;

		.title {
			width: 100%;
			text-align: center;
			padding: 0rpx 10rpx 50rpx 10rpx;
			font-weight: 500;
			color: #353535;
			letter-spacing: 2rpx;
			font-size: 30rpx;
		}
		.code-input{
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
		}
	}
</style>