Browse Source

修复扫码组件在低配手机自动拉伸问题

caojunjie 4 năm trước cách đây
mục cha
commit
7c7069543c
3 tập tin đã thay đổi với 32 bổ sung21 xóa
  1. 3 5
      common/p-scan/scan.vue
  2. 4 1
      pages.json
  3. 25 15
      pages/home/scancode/index.vue

+ 3 - 5
common/p-scan/scan.vue

@@ -17,22 +17,20 @@
 		},
 		created() {
 			var statusBarHeight = uni.getSystemInfoSync().statusBarHeight; //状态栏
-			var height = statusBarHeight + 44 + 104 + 'px';
+			var height = statusBarHeight + 44 + 144 + 'px';
 			var pages = getCurrentPages();
 			var page = pages[pages.length - 1];
 			// #ifdef APP-PLUS
 			var currentWebview = page.$getAppWebview();
 			this.barcode = plus.barcode.create('barcode', this.barcode, {
-				top: '7px',
+				top: '85px',
 				left: '10%',
 				width: '80%',
-				height: '35%', //180px
+				height: '31.5%', //180px
 				position: 'static',
 				background:'#ffffff',
 				frameColor:'#00A0EA',
 				scanbarColor:'#00A0EA'
-				
-				
 			});
 			this.barcode.onmarked = this.onmarked;
 			currentWebview.append(this.barcode);

+ 4 - 1
pages.json

@@ -57,7 +57,10 @@
 				"style": {
 					"navigationBarTitleText": "扫码入库",
 					"navigationBarBackgroundColor": "#0095FF",
-					"navigationBarTextStyle": "white"
+					"navigationBarTextStyle": "white",
+					"app-plus": {
+						"titleNView": false
+					}
 				}
 
 			},

+ 25 - 15
pages/home/scancode/index.vue

@@ -1,5 +1,6 @@
 <template>
 	<view class="content">
+		<u-navbar :title="nbTitle" back-icon-color="#ffffff" title-color="#ffffff" :background="background" :border-bottom="false"></u-navbar>
 		<view class="text-area">
 			<view class="white_b"></view>
 		</view>
@@ -18,8 +19,8 @@
 					<image src="../../../static/sailun/line.png" style="width: 100%;height: 1rpx;" mode=""></image>
 				</view>
 			</view>
-			<view class="generate" style="overflow:auto;">
-				<u-table font-size="20" border-color="#ffffff" bg-color="#fff">
+			<view class="generate">
+				<u-table font-size="24" border-color="#ffffff" bg-color="#fff">
 					<u-tr class="u-tr">
 						<u-th class="u-th" width="30%">胎号</u-th>
 						<u-th class="u-th">规格</u-th>
@@ -51,20 +52,22 @@
 			return {
 				tips: '提示',
 				number: '请扫码入库',
+				nbTitle: '扫码标题',
 				i: 1,
 				lisi: [{
-					name: '1',
+					name: '123456789154Sad',
 					Specifications: '175/70R14 88T XL BH15 BGBL'
-				}]
+				}],
+				background: {
+					backgroundColor: '#0094fe',
+				}
 			}
 		},
 		onLoad() {
 
 		},
 		onReady() {
-			uni.setNavigationBarTitle({
-				title: '扫码干哈'
-			});
+
 		},
 		methods: {
 			bug() {
@@ -82,19 +85,20 @@
 				this.tips = "胎号"
 				this.bug()
 			},
-			scancodein(){
+			scancodein() {
 				this.$u.route({
-					url: 'pages/home/Scan-code-in/index',
+					url: 'pages/home/Scan-code-in/index'
 				})
 			}
 		}
 	}
 </script>
 
-<style>
+<style scoped>
 	.generate {
-		width: 92%;
+		width: 98%;
 		height: 420rpx;
+		overflow:auto;
 		margin: 0 auto;
 		margin-top: 120rpx;
 	}
@@ -123,15 +127,15 @@
 	.stripe {
 		width: 720rpx;
 		height: 30rpx;
-		background: rgba(0, 0, 0, 0.2);
+		background-color: rgba(0, 0, 0, 0.2);
 		border-radius: 12rpx;
 		margin: 0 auto;
-		margin-top: -200rpx;
+		margin-top: -100rpx;
 	}
 
 	.text-area {
 		width: 100%;
-		height: 750rpx;
+		height: 650rpx;
 		background-color: #0094fe;
 		display: flex;
 		justify-content: center;
@@ -140,7 +144,7 @@
 	.white_b {
 		width: 83%;
 		height: 540rpx;
-		background-color: rgb(255, 255, 255, 0.5);
+		background-color: rgba(255, 255, 255, 0.5);
 		border-radius: 20rpx;
 	}
 
@@ -197,4 +201,10 @@
 		float: left;
 		margin-left: -30rpx;
 	}
+
+	.status_bar {
+		height: var(--status-bar-height);
+		width: 100%;
+		background-color: #0095FF;
+	}
 </style>