拍照点界面序列号圈添加横向滚动

pages/work/record/RecordList.uvue

@@ -1,21 +1,23 @@
 <template>
-	<view class="record-card flex-row">
-		<!-- <uni-tag class="tag-circle" v-for="(tag,index) in 6" :key="index" :text="tag+''" size="medium" type="primary" circle
-			@click="tabsClick(tag)"></uni-tag> -->
-		<view class="tag-circle" v-for="(tag,index) in maxcount" :key="index" @click="tabsClick(tag)"
-			:class="{'checked-tag' : tag === current}">
-			<text class="circle" :class="{
-							'bg-green': tag<=2,
-							'bg-yellow': tag%3 === 0,
-							'bg-red': tag%2 === 0,
-							'bg-black': tag>=4
-						  }">{{tag}}</text>
+	<scroll-view class="tag-scroll-container" scroll-x="true">
+		<view class="record-card2 flex-row">
+			<view class="tag-circle" v-for="(tag,index) in maxcount" :key="index" @click="tabsClick(tag)"
+				:class="{'checked-tag' : tag === current}">
+				<text class="circle" :class="{
+								'bg-green': tag<=2,
+								'bg-yellow': tag%3 === 0,
+								'bg-red': tag%2 === 0,
+								'bg-black': tag>=4
+							  }">{{tag}}</text>
+			</view>
 		</view>
-	</view>
+	</scroll-view>
+
 	<!-- #ifdef APP -->
 	<scroll-view style="flex:1">
 	<!-- #endif -->
-		<view class="record-card" v-for="(item, index) in records" :key="index" v-show="current == item.senum as number">
+		<view class="record-card" v-for="(item, index) in records" :key="index"
+			v-show="current == item.senum as number">
 			<view class="header-row">
 				<text class="label">序号：</text>
 				<text class="value">{{ item.senum }}</text>
@@ -31,7 +33,7 @@
 				<text class="label">拍照点：</text>
 				<text class="value">{{ item.part }}</text>
 			</view>
-			
+
 			<view class="info-row">
 				<text class="label">拍照位置：</text>
 				<text class="value">{{ item.photoitem }}</text>
@@ -101,47 +103,47 @@
 		ref
 	} from 'vue'
 	import { getList, Record } from '@/api/work';
-	
+
 	//检查项目最大数量
 	var maxcount = 5
 	var current = ref(1)
 	var records = ref<Record[]>([]);
-	var closeTags = ref([true, true, true, true, true, true, true])	
+	var closeTags = ref([true, true, true, true, true, true, true])
 	var initRecords = [] as Record[]
-	
-	onLoad((options) => {	
-	   const tid = options?.id ?? ""
-	   const num = options?.num ?? "1"
-	   maxcount = parseInt(num)		  
-	// #ifdef APP-ANDROID
-	   getList('app_media_record', 'sxid', tid, null).then((res:UTSJSONObject) => {
-	    		let dataList = res?.['data'] as UTSJSONObject[] ?? Array<UTSJSONObject>()
-	   			if(dataList!=null && dataList.length>0){
-	   				dataList.forEach(item =>{
-	   					if(item!=null){
-							const imgnameStr = item['imgname'] as string
-							const urlpdtStr = item['urlpdt'] as string
-							const imgnameArr = imgnameStr.split(",")
-							const urlpdtArr = urlpdtStr.split(",")
-							item['imgname'] = imgnameArr
-							item['urlpdt'] = urlpdtArr
-	   						let record = JSON.parse<Record>(item.toJSONString());
-	   						if(record!=null){
-	   							initRecords.push(record)
-	   						}
-	   					}
-	   				});
-	   			}	   		
-			if(initRecords.length>0){
+
+	onLoad((options) => {
+		const tid = options?.id ?? ""
+		const num = options?.num ?? "1"
+		maxcount = parseInt(num)
+		// #ifdef APP-ANDROID
+		getList('app_media_record', 'sxid', tid, null).then((res : UTSJSONObject) => {
+			let dataList = res?.['data'] as UTSJSONObject[] ?? Array<UTSJSONObject>()
+			if (dataList != null && dataList.length > 0) {
+				dataList.forEach(item => {
+					if (item != null) {
+						const imgnameStr = item['imgname'] as string
+						const urlpdtStr = item['urlpdt'] as string
+						const imgnameArr = imgnameStr.split(",")
+						const urlpdtArr = urlpdtStr.split(",")
+						item['imgname'] = imgnameArr
+						item['urlpdt'] = urlpdtArr
+						let record = JSON.parse<Record>(item.toJSONString());
+						if (record != null) {
+							initRecords.push(record)
+						}
+					}
+				});
+			}
+			if (initRecords.length > 0) {
 				current.value = initRecords[0].senum
 				records.value = [initRecords[0]]
-				console.log(records)	
+				console.log(records)
 			}
-	    });
+		});
 		// #endif
 	});
-	
-	
+
+
 	// #ifdef H5
 	initRecords = [{
 		sxid: 1,
@@ -175,7 +177,7 @@
 	}] as Record[];
 	records.value = initRecords.filter(item => item['senum'] == current.value)
 	// #endif
-	
+
 	const tabsClick = (obj : number) => {
 		current.value = obj
 		records.value = initRecords.filter(item => item['senum'] == current.value)
@@ -189,8 +191,6 @@
 			url: `/pages/work/record/Camera?id=${id}`
 		})
 	}
-	
-		
 </script>
 
 <style scoped>
@@ -232,6 +232,17 @@
 		margin-bottom: 20rpx;
 		margin-top: 20rpx;
 	}
+	
+	/* 卡片整体 */
+	.record-card2 {
+		background: #ffffff;
+		border-radius: 20rpx;
+		padding: 24rpx 32rpx;
+		display: flex;
+		flex-direction: column;
+		margin-bottom: 20rpx;
+		margin-top: 20rpx;
+	}
 
 	/* 头部：科室 和 状态 */
 	.header-row {
@@ -342,6 +353,10 @@
 
 	.flex-row {
 		flex-direction: row;
+		flex-wrap: nowrap;
+		width: auto;
+		min-width: 100%;
+		/* 确保容器宽度至少为屏幕宽度 */
 	}
 
 	.demo-view-label {
@@ -358,6 +373,7 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
+		flex-shrink: 0;
 	}
 
 	.circle {
@@ -423,4 +439,24 @@
 	.btn-second {
 		right: 15rpx;
 	}
+
+	/* 安卓兼容的滚动容器样式 */
+	.tag-scroll-container {
+		width: 100%;
+		overflow-x: auto;
+		overflow-y: hidden;
+		-webkit-overflow-scrolling: touch;
+		box-sizing: border-box;
+		padding: 10rpx 15rpx;
+		white-space: nowrap;
+		display: flex;
+		flex-direction: row;
+	}
+
+
+	.tag-scroll-container::-webkit-scrollbar-thumb {
+		background-color: rgba(0, 0, 0, 0.2) !important;
+		border-radius: 3rpx !important;
+	}
+
 </style>