<template>
	<view class="changecontainer">
		<view class="cardindexbox">
			<view class="myswiper">
				<swiper class="swiper" circular :indicator-dots="true" :indicator-color="indicatorColor" :indicator-active-color="indicatorActiveColor" :autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item>
						<view class="swiper-item">
							<image src="../../static/cardimg1.jpg" mode="widthFix"></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<image src="../../static/cardimg2.jpg" mode="widthFix"></image>
						</view>
					</swiper-item>
					
				</swiper>
			</view>
			<view class="formChange">
				<u-form :model="form" ref="uForm">
					<u-form-item class="formitem card_number" prop="card_number" :border-bottom="false">
						<u-input type="text" v-model="form.card_number" placeholder="请输入卡号"/>
					</u-form-item>
				</u-form>
				<u-button class="formitem submitform" form-type="submit" :plain="true" @click="goSubmit">点击查询</u-button>
			</view>	
		</view>
		
		
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				autoplay: true,
				interval: 3000,
				duration: 500,
			  indicatorColor: 'rgba(204,204,203,.5)',
				indicatorActiveColor: '#b98b44',
				form: {
					code: '',
				},
				
			}
		},
		methods: {
			getScanCode() {
				// uni.scanCode({
				// 	onlyFromCamera: false,
				// 	scanType: ['qrCode', 'barCode', 'dataMatrix'],
				// 	success: res => {
				// 		if (res.errMsg == 'scanCode:ok') {
				// 			this.form.code = res.result
				// 		} else {
				// 			uni.showToast({
				// 				title: '扫码失败',
				// 				icon: "none",
				// 				mask: true,
				// 			})
				// 		}
				// 	},
				// 	fail: err => {
				// 		console.log(JSON.stringify(err))
				// 	}

				// })
			},
			goSubmit() {


				uni.navigateTo({
					url: '/packages/card/detail'
				})
			}
		}
	}
</script>

<style type="text/css" scoped lang="scss">
	.changecontainer{
		width: 100%;
		background-image: url(../../static/bg-change.jpg);
		background-position: center top;
		background-size: cover;
		padding-top: 195rpx;
		padding-bottom: 520rpx;
	}
	
	.cardindexbox{
		width: 87.33%;
		margin: 0 auto;
		background: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		padding: 54rpx 46rpx;
	}
	.myswiper{
		position: relative;
	}
	.swiper{
		padding-bottom: 48rpx;
		overflow: hidden;
		.uni-swiper-wrapper{
			overflow: initial;
		}
		.uni-swiper-dots{
			bottom: -48rpx;
		}
		.swiper-item image{
			width: 100%;
			height: auto;
		}
	}
	.formChange{
		width: 450rpx;
		margin: 0 auto;
		margin-top: 104rpx;
	}
	.formitem{
		margin-bottom: 40rpx;
		height: 74rpx;
		width: 100%;
		line-height: 74rpx;
		border-radius: 50rpx;
		background-color: #f4f3f2;
		border: none;
		padding: 0;
		padding-left: 104rpx;
		padding-right: 40rpx;
		border: none !important;
		background-position: left 40rpx center;
		background-size: 38rpx auto;
		background-repeat: no-repeat;
		font-size: 20rpx;
		color: #676767;
	}
	.formitem.card_number{
		background-image: url(../../static/icon-change1.png);
	}
	.formitem u-input{
		display: block;
		border: none;
		width: 100%;
		height: 100%;
		line-height: 76rpx;
		color: #676767;
		font-size: 20rpx;
	}
	.formitem.submitform{
		color: #b98b44;
		font-size: 24rpx;
		font-weight: bold;
		padding: 0;
	}
	.formitem.submitform::after{
		display: none;
	}
</style>