修改兑换页面表单样式兼容性

packages/card/detail.vue

@@ -1,35 +1,23 @@
 <template>
-	<view class="cotainer">
-		<view class="myswiper">
-			<view class="cardtitle">卡面示例</view>
-			<u-image src="https://cdn.uviewui.com/uview/swiper/1.jpg" height="300"></u-image>
-		</view>
-		<view class="scan">
-			<view class="cardtitle">卡片信息</view>
-			<view class="scan-form">
-				<view class="scan-form-flex">
-					<view class="scan-form-label">
-						卡片名称
-					</view>
-					<view class="scan-form-input">
-						红金款999
-					</view>
-				</view>
-				<view class="scan-form-flex">
-					<view class="scan-form-label">
-						卡片有效期
-					</view>
-					<view class="scan-form-input">
-						卡片至2025年11月31号有效
+	<view class="changecontainer">
+		<view class="cardcontent">
+			<view class="myswiper">
+				<image src="../../static/cardimg1.jpg" mode="widthFix"></image>
+				<view class="cardtitle">卡片信息</view>
+			</view>
+			<view class="cardinfobox">
+				<view class="cardlist">
+					<view class="listitem">
+						<view>卡片名称</view>
+						<text>红金款999型蟹卡</text>
 					</view>
-				</view>
-				<view class="scan-form-flex">
-					<view class="scan-form-btn" @click="saveImg">
-						点击保存图片
+					<view class="listitem">
+						<view>卡片有效期</view>
+						<text>卡片至2025年10月31日有效</text>
 					</view>
 				</view>
+				<view class="cardbtn" @click="saveImg">点击保存图片</view>
 			</view>
-
 		</view>
 	</view>
 </template>
@@ -42,38 +30,14 @@
 		components: {},
 		data() {
 			return {
-				form: {
-					code: '',
-					password: ''
-				},
-
+				
 			}
 		},
 		onLoad() {
 			console.log(wx.env.USER_DATA_PATH)
 		},
 		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))
-					}
-
-				})
-			},
+			
 			saveImg() {
 				let _this = this
 				let fileName = new Date().valueOf()
@@ -82,7 +46,7 @@
 					scope: 'scope.writePhotosAlbum',
 					success: (res) => {
 						uni.downloadFile({
-							url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
+							url: '../../static/cardimg1.jpg',
 							filePath:filePath,
 							success(res) {
 								console.log(res)
@@ -114,65 +78,21 @@
 </script>
 
 <style lang="scss">
-	.cotainer {
-
-
-		.cardtitle {
-			text-align: center;
-			font-weight: bold;
-			margin-bottom: 20rpx;
-		}
-
-		.myswiper {
-			padding: 40rpx;
-		}
-
-		.scan {
-			margin: 30rpx;
-			margin-top: 0;
-
-			&-form {
-				display: flex;
-				margin: 30rpx;
-				flex-wrap: wrap;
-
-				&-flex {
-					display: flex;
-					align-items: center;
-					margin: 0 auto;
-					width: 100%;
-					margin-bottom: 20rpx;
-				}
-
-				&-label {
-					// font-size: 32rpx;
-					width: 220rpx;
-					text-align: center;
-					padding: 10rpx;
-					border: 1px solid #ccc;
-					background: #ddd;
-				}
-
-				&-input {
-					border: 1px solid #ddd;
-					padding: 0 20rpx;
-					width: calc(100% - 220rpx);
-					padding: 10rpx;
-					border: 1px solid #ccc;
-					text-align: center;
-					border-left: none;
-
-				}
-
-				&-btn {
-					background-color: #A4ADB3;
-					color: #fff;
-					border-radius: 10rpx;
-					padding: 10rpx 30rpx;
-					margin: 20rpx auto;
-
-				}
-			}
-		}
+	.changecontainer{
+		width: 100%;
+		background-image: url(../../static/bg-change.jpg);
+		background-position: center top;
+		background-size: cover;
+		padding-top: 195rpx;
+		padding-bottom: 310rpx;
+	}
+	.cardcontent{
+		width: 87.33%;
+		margin: 0 auto;
+		background: #fff;
+		border-radius: 10rpx;
+		overflow: hidden;
+		padding: 54rpx 46rpx;
+	
 	}
 </style>

packages/card/index.vue

@@ -79,7 +79,7 @@
 	}
 </script>
 
-<style type="text/css" scoped>
+<style type="text/css" scoped lang="scss">
 	.changecontainer{
 		width: 100%;
 		background-image: url(../../static/bg-change.jpg);

pages/change/change.vue

@@ -57,22 +57,7 @@
 					toast('请填写卡号或密码')
 					return
 				}
-				// this.$u.api.getCard(this.form).then(res=>{
-				// 	if(res.card.status===2){
-				// 		uni.setStorageSync('vuex_card',{
-				// 			card_number:this.form.card_number,
-				// 			password:this.form.password,
-				// 			card:res.card
-				// 		})
-				// 		uni.navigateTo({
-				// 			url: ''
-				// 		})
-				// 	}else{
-				// 		toast(res.card.can_delivery)
-				// 	}
-				// }).then(res=>{
-					
-				// })
+				
 				
 			}
 		},
@@ -82,7 +67,7 @@
 	}
 </script>
 
-<style type="text/css" scoped>
+<style scoped>
 	.changecontainer{
 		width: 100%;
 		background-image: url(../../static/bg-change.jpg);
@@ -156,7 +141,7 @@
 		width: 68.7%;
 		margin: 0 auto;
 	}
-	.formitem{
+	/deep/ u-form-item.formitem{
 		margin-bottom: 40rpx;
 		height: 74rpx;
 		width: 100%;
@@ -174,13 +159,13 @@
 		font-size: 20rpx;
 		color: #676767;
 	}
-	.formitem.card_number{
+	/deep/ u-form-item.formitem.card_number{
 		background-image: url(../../static/icon-change1.png);
 	}
-	.formitem.password{
+	/deep/ u-form-item.formitem.password{
 		background-image: url(../../static/icon-change2.png);
 	}
-	.formitem u-input{
+	/deep/ u-form-item.formitem u-input{
 		display: block;
 		border: none;
 		width: 100%;
@@ -189,14 +174,13 @@
 		color: #676767;
 		font-size: 20rpx;
 	}
-	.formitem.submitform{
+	/deep/ u-form-item.formitem.submitform{
 		color: #b98b44;
 		font-size: 24rpx;
 		font-weight: bold;
 		padding: 0;
-		/* border: none !important; */
 	}
-	.formitem.submitform::after{
+	/deep/ u-form-item.formitem.submitform::after{
 		display: none;
 	}
 </style>