提交有效期查询页面切图

packages/card/index.vue

@@ -1,35 +1,32 @@
 <template>
-	<view class="cotainer">
-		<view class="myswiper">
-			<u-swiper :list="list" height="450"></u-swiper>
-		</view>
-		<view class="scan">
-			<view class="scan-form">
-				<view class="scan-form-flex">
-					<view class="scan-form-label">
-						卡号
-					</view>
-					<view class="scan-form-input">
-						<u-input v-model="form.code" type="text" placeholder="请输入卡号/扫码" />
-						<u-icon @click="getScanCode" name="scan" size="60" color="#333"></u-icon>
-					</view>
-				</view>
-				<view class="scan-form-flex">
-					<view class="scan-form-label">
-						密码
-					</view>
-					<view class="scan-form-input">
-						<u-input v-model="form.password" type="password" placeholder="请输入密码" />
-					</view>
-				</view>
-				<view class="scan-form-flex">
-					<view class="scan-form-btn" @click="goSubmit">
-						点击查询
-					</view>
-				</view>
+	<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>
 
@@ -38,47 +35,38 @@
 		components: {},
 		data() {
 			return {
+				autoplay: true,
+				interval: 3000,
+				duration: 500,
+			  indicatorColor: 'rgba(204,204,203,.5)',
+				indicatorActiveColor: '#b98b44',
 				form: {
 					code: '',
-					password: ''
 				},
-				list: [{
-						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
-						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
-					},
-					{
-						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
-						title: '身无彩凤双飞翼，心有灵犀一点通'
-					},
-					{
-						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
-						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
-					}
-				],
-
+				
 			}
 		},
 		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))
-					}
-
-				})
+				// 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() {
 
@@ -91,63 +79,83 @@
 	}
 </script>
 
-<style lang="scss">
-	.cotainer {
-
-
-
-		.myswiper {
-			padding: 40rpx;
+<style type="text/css" scoped>
+	.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;
 		}
-
-		.scan {
-			margin: 30rpx;
-
-			&-form {
-				display: flex;
-				margin: 30rpx;
-				flex-wrap: wrap;
-
-				&-flex {
-					display: flex;
-					align-items: center;
-					margin: 0 auto;
-					width: 80%;
-					margin-bottom: 20rpx;
-				}
-
-				&-label {
-					margin-right: 20rpx;
-					font-size: 32rpx;
-					width: 80rpx;
-				}
-
-				&-input {
-					display: flex;
-					align-items: center;
-					border: 1px solid #ddd;
-					border-radius: 10rpx;
-					padding: 0 20rpx;
-					width: calc(100% - 100rpx);
-
-					u-input {
-						width: 100%;
-					}
-
-					u-icon {
-						margin-left: 15rpx;
-					}
-				}
-
-				&-btn {
-					background-color: #A4ADB3;
-					color: #fff;
-					border-radius: 10rpx;
-					padding: 10rpx 30rpx;
-					margin: 20rpx auto;
-
-				}
-			}
+		.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>