<template>
	<view class="changecontainer">
		<view class="logobox">
			<image src="../../static/logo-xietaitai.png" mode="widthFix"></image>
		</view>
		<view class="formSystem">
			<view class="systemtop">
				<view class="systemtitle">蟹太太提货系统</view>
				<view class="systemtext">
					<text>2024年提货已开放!</text>
					<text>自2024年<text class="colorOrange">9月25日</text>起 至2024年<text class="colorOrange">12月15日</text></text>
				</view>
			</view>
			<view class="formChange">
				<u-form :model="form" ref="uForm">
					<u-form-item class="formitem" prop="card_number" :border-bottom="false" >
						<u-input type="text" class="card_number" v-model="form.card_number" placeholder="请输入卡号"/>
					</u-form-item>
					<u-form-item class="formitem password" prop="password" :border-bottom="false">
						<u-input class="password" type="password" v-model="form.password" placeholder="请输入密码" :password-icon="false" />
					</u-form-item>
				</u-form>
				<u-button class="formitem submitform" form-type="submit" :plain="true" @click="goSubmit">点击提货</u-button>
			</view>	
		</view>
	</view>
	
</template>

<script>
	import {toast,isNull} from '@/common/util.js'
	export default {
		components: {},
		data() {
			return {
				form: {
					card_number: '',
					password: '',
				},
				rules:{
					card_number:[{
						required: true,
						message: '请输入卡号',
						trigger: 'change'
					}],
					password:[{
						required: true,
						message: '请输入密码',
						trigger: 'change'
					}]
				}
			};
		},
		methods: {
			goSubmit() {
				if(isNull(this.form.card_number)||isNull(this.form.password)){
					toast('请填写卡号或密码')
					return
				}
				
				
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style scoped>
	.changecontainer{
		width: 100%;
		background-image: url(../../static/bg-change.jpg);
		background-position: center top;
		background-size: cover;
		padding-top: 114rpx;
		padding-bottom: 400rpx;
	}
	.logobox{
		width: 162rpx;
		height: 162rpx;
		border-radius: 50%;
		overflow: hidden;
		margin: 0 auto;
		background: #fff;
		margin-bottom: 80rpx;
		box-shadow: 0 22rpx 32rpx rgba(53,53,53,.6);
	}
	.logobox image{
		width: 100%;
		height: auto;
	}
	.formSystem{
		width: 87.33%;
		margin: 0 auto;
		border-radius: 10rpx;
		background: #fff;
		padding-bottom: 84rpx;
	}
	.systemtop{
		padding-top: 80rpx;
		text-align: center;
		padding-bottom: 58rpx;
		border-bottom: 1rpx dashed #a4a5a4;
		position: relative;
		margin-bottom: 80rpx;
	}
	.systemtop::before,.systemtop::after{
		content: " ";
		position: absolute;
		display: inline-block;
		width: 28rpx;
		height: 28rpx;
		border-radius: 50%;
		background: #4a4b4a;
		bottom: -14rpx;
	}
	.systemtop::before{
		left: -14rpx;
	}
	.systemtop::after{
		right: -14rpx;
	}
	.systemtitle{
		font-size: 36rpx;
		font-weight: 700;
		color: #b98b44;
		margin-bottom: 25rpx;
	}
	.systemtext text{
		display: block;
		font-size: 20rpx;
		color: #000;
		line-height: 36rpx;
	}
	.systemtext text.colorOrange{
		display: inline-block;
		color: #b98b44;
	}
	.formChange{
		width: 68.7%;
		margin: 0 auto;
	}
	/deep/ .u-form-item{
		margin-bottom: 40rpx;
		height: 74rpx;
		width: 100%;
		line-height: 74rpx;
		border-radius: 50rpx;
		background-color: #f4f3f2;
		border: none;
		padding: 0 !important;
		
		border: none !important;
		
		font-size: 20rpx;
		color: #676767;
	}

	/deep/ .u-form-item.password{
		background-image: url(../../static/icon-change2.png);
	}
	/deep/ .u-input{

		
	}

	/deep/ .u-form-item .u-input__input{
		display: block;
		border: none;
		width: 100%;
		height: 74rpx;
		line-height: 74rpx;
		color: #676767 !important;
		font-size: 20rpx !important;
		padding-left: 104rpx;
		padding-right: 40rpx;
		background-position: left 40rpx center;
		background-size: 38rpx auto;
		background-repeat: no-repeat;
	}
	/deep/ .card_number .u-input__input{
		background-image: url(../../static/icon-change1.png) !important;
	}
	/deep/ .password .u-input__input{
		background-image: url(../../static/icon-change2.png) !important;
	}
	/deep/ .u-btn{
		color: #b98b44 !important;
		font-size: 24rpx !important;
		font-weight: bold;
		padding: 0;
		height: 74rpx !important;
		width: 100%;
		line-height: 74rpx !important;
		border-radius: 50rpx;
		background-color: #f4f3f2 !important;
	}
	/deep/ .u-btn::after{
		display: none;
	}
</style>