lirenGO_uniapp/trace/pages/fake/mould1/index.vue

<template>
	<view class="indexPage">
		<image class="indexBG" :src="Config.imgUrl + 'trace/fake/mould1/indexBG.png'" mode="aspectFill"></image>
		<view class="main">
			<view class="brand">
				<image class="brandImg" src="@/trace/static/fake/mould1/brandImg.png" mode="widthFix"></image>
			</view>
			<view class="card">
				<view class="cardTitle">
					<text>防伪查询验证</text>
				</view>
				<view class="cardBody">
					<text>请输入防伪码或扫码识别验证</text>
					<view class="inputBox">
						<input type="text" v-model="code" placeholder="请输入防伪码"/>
						<view class="scanBox">
							<image class="scanIcon" src="@/trace/static/scanIcon.png" mode="aspectFill"></image>
							<!-- <uni-icons type="scan" color="#FFFFFF" size="34" style="margin: 0;"></uni-icons> -->
						</view>
					</view>
					<button class="checkBtn" @click="verifyCode">立即验证</button>
					<view class="tips">
						<text>1.  名创优品防伪验证，扫描包装盒的防伪码即可打开验证页面，刮开涂层输入验证码进行验证。</text>
						<text>2.  名创优品用正版授权+亲民价格的战略打法，颠覆了动漫IP周边产品开发的传统模式和价格生态。不断创新门店消费场景，以IP场景带动产品销售，释放IP潮流消费活力，打造独特的“IP乐园”。 </text>
						<text>品牌也借助这些全球顶级IP的影响力进一步扩大了自身在全世界范围内的知名度和美誉度。</text>
					</view>
				</view>
			</view>
		</view>
		<verifyPopup ref="verifyPopup"></verifyPopup>
	</view>
</template>

<script>
	import verifyPopup from './components/verifyPopup.vue';
	import Config from '@/common/js/config.js';
	export default {
		data() {
			return {
				Config,
				code:'',
			}
		},
		components:{
			verifyPopup
		},
		methods: {
			verifyCode(){
				// this.$util.redirectTo('./success')
				this.$refs.verifyPopup.open()
				// uni.showModal({
				// 	title: '温馨提示',
				// 	content: '防伪码验证失败，谨防假冒！',
				// 	showCancel: false,
					
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
.indexPage{
	width: 100%;
	height: 100vh;
	position: relative;
	.indexBG{
		position: absolute;	
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		display: block;
	}
}
.main{
	position: relative;
	z-index: 10;
	width: 100%;
	padding-top: 100rpx;
	.brand{
		width: 100%;
		text-align: center;
		.brandImg{
			width: 154rpx;
			height: auto;
		}
	}
	.card{
		margin: 66rpx 26rpx;
		background: rgba(255,255,255,0.8);
		border-radius: 28rpx;
		border: 2rpx solid #FFFFFF;
		box-sizing: border-box;
		padding: 26rpx;
		.cardTitle{
			padding-bottom: 26rpx;
			@include fontStyle(34rpx,#000000,center,bold,48rpx);
		}
		.cardBody{
			@include fontStyle(28rpx,#000000,left,400,48rpx);
			.inputBox{
				margin: 16rpx 0;
				width: 100%;
				height: 96rpx;
				background: #FFFFFF;
				border-radius: 18rpx 18rpx 18rpx 18rpx;
				border: 2rpx solid #D6000F;
				
				@include flexBox(between,center);
				box-sizing: border-box;
				padding-left: 16rpx;
				input{
					flex: 1;
					height: 100%;
					@include fontStyle(28rpx,#000000,left,400,38rpx);
				}
				.scanBox{
					width: 92rpx;
					height: 92rpx;
					background: #D6000F;
					border-radius: 0rpx 18rpx 18rpx 0rpx;
					@include flexBox();
					.scanIcon{
						width: 56rpx;
						height: 56rpx;
					}
				}
			}
		
			.checkBtn{
				width: 626rpx;
				height: 92rpx;
				background: #D6000F;
				border-radius: 18rpx 18rpx 18rpx 18rpx;
				font-weight: 500;
				font-size: 33rpx;
				color: #FFFFFF;
				@include flexBox();
				margin: 26rpx 0;
			}
			.tips{
				@include fontStyle(24rpx,#666666,left,400,40rpx);
				text{
					display: block;
				}
			}
			
		}
		
	}
}
</style>