左滑删除

pages/index.vue

@@ -38,31 +38,32 @@
           lower-threshold="50"
           scroll-with-animation
       >
-        <tn-swipe-action>
+        <uni-swipe-action>
-        <tn-swipe-action-item
+        <uni-swipe-action-item
             v-for="(item, index) in listData"
             :key="index"
-            :options="options"
             :class="['list-item', { 'list-item-disabled': item.online === '离线' }]"
-            @tap="item.online !== '离线' && onItemTap(item)"
+            :right-options="options">
-        >
+          <view class="item-card"
-          <view class="item-title">
+              @click="item.online !== '离线' && onItemTap(item)">
-            <view class="title-text">{{ item.agriName }}</view>
+            <view class="item-title">
-            <text :class="['tag','tag-status',{'tag-manual':item.workModeDesc==='手动模式'}]" v-if="item.workModeDesc">{{ item.workModeDesc }}</text>
+              <view class="title-text">{{ item.agriName }}</view>
-            <text :class="['tag','tag-online',{'tag-offline':item.online==='离线'}]"  v-if="item.online">{{ item.online }}</text>
+              <text :class="['tag','tag-status',{'tag-manual':item.workModeDesc==='手动模式'}]" v-if="item.workModeDesc">{{ item.workModeDesc }}</text>
-          </view>
+              <text :class="['tag','tag-online',{'tag-offline':item.online==='离线'}]"  v-if="item.online">{{ item.online }}</text>
+            </view>
 
-          <view class="item-subtitle">
+            <view class="item-subtitle">
-            设备编号：{{ item.imei }}
+              设备编号：{{ item.imei }}
-          </view>
+            </view>
 
-          <view class="item-tags">
+            <view class="item-tags">
-            <text class="tag tag-temp1">温度1: {{ item.temp1 }}℃</text>
+              <text class="tag tag-temp1">温度1: {{ item.temp1 }}℃</text>
-            <text class="tag tag-temp2">温度2: {{ item.temp2 }}℃</text>
+              <text class="tag tag-temp2">温度2: {{ item.temp2 }}℃</text>
-            <text class="tag tag-temp3">温度3: {{ item.temp3 }}℃</text>
+              <text class="tag tag-temp3">温度3: {{ item.temp3 }}℃</text>
-            <text class="tag tag-temp4">温度4: {{ item.temp4 }}℃</text>
+              <text class="tag tag-temp4">温度4: {{ item.temp4 }}℃</text>
+            </view>
           </view>
-        </tn-swipe-action-item>
+        </uni-swipe-action-item>
 
         <view v-if="isLoading" class="loading-more">
           <uni-icons type="spinner-cycle" size="20" color="#999"></uni-icons>
@@ -74,7 +75,7 @@
           <image :src="imageSrc" :style="'width:'+80+'rpx;height:'+80+'rpx'"></image>
           <text class="text">点击添加大棚</text>
         </view>
-        </tn-swipe-action>
+        </uni-swipe-action>
       </scroll-view>
     </uni-section>
 <!--    <uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"-->
@@ -280,8 +281,17 @@ export default {
     refresh() {
       this.getListData();
     },
+    onDeleteItem(item) {
+      console.info(`点击了${item.content.text}`)
+
+    },
     // 点击列表项
-    onItemTap(item) {
+    onItemTap(item,index) {
+      console.info(item,index)
+      if (item.online==='离线') {
+        return;
+      }
+      console.info(item)
       var agri = JSON.stringify(
           {
             imei:item.imei,
@@ -368,18 +378,41 @@ page {
   background-color: #e0e0e0;
   border-radius: 2rpx;
 }
-
+.item-card {
-.list-item {
+  background-color: #FFFFFF;
-  padding: 14rpx 25rpx;
+  border-radius: 12rpx;
-  /* 移除border-bottom，改为margin-top，并且把列表项背景设为半透明白色 */
+  box-shadow: 8rpx 5rpx 10rpx #999;
   margin-bottom: 20rpx;
+  // #ifndef H5
+  //margin-right: 10rpx;
+  // #endif
+}
+/deep/ .uni-swipe {
+  // #ifdef MP-WEIXIN
+  height: 214rpx !important;
+  // #endif
+}
+/deep/ .uni-swipe_button {
+  // #ifdef MP-WEIXIN
+  height: 198rpx !important;
+  // #endif
   margin-right: 10rpx;
-  background-color: rgba(255, 255, 255, 0.85);
+  border-radius: 12rpx;
+  box-shadow: 8rpx 5rpx 10rpx #999;
+}
+.list-item,/deep/.tn-swipe-action-item {
+  height: 190rpx;
+  /* 移除border-bottom，改为margin-top，并且把列表项背景设为半透明白色 */
+  // #ifdef H5
+  margin-bottom: 20rpx;
+  background-color: #FFFFFF;
   border-radius: 12rpx;
   /* 新增：点击态样式，双端统一 */
   transition: all 0.2s ease;
+  overflow: hidden;
   box-shadow: 8rpx 5rpx 10rpx #999;
   pointer-events: auto !important;
+  // #endif
 }
 .list-item:active {
   background-color: #F5F5F5;
@@ -396,6 +429,7 @@ page {
   align-items: center;
   width: 100%;
   box-sizing: border-box;
+  padding: 14rpx 25rpx 0 25rpx;
 }
 .title-text {
   overflow: hidden;
@@ -428,13 +462,14 @@ page {
   color: #666;
   line-height: 52rpx;
   display: block;
+  padding: 0 25rpx;
 }
 
 .item-tags {
   display: flex;
   gap: 8rpx;
   flex-wrap: wrap; /* 新增：标签过多时换行，避免溢出 */
-  padding: 14rpx 0;
+  padding: 14rpx 25rpx 28rpx 25rpx;
 }
 
 .tag {
@@ -513,7 +548,6 @@ page {
   background-color: #fafafa;
   /* 可选：添加透明度 */
   opacity: 0.7;
-  pointer-events: none !important; /* 禁止所有交互 */
 }
 
 /* 禁用状态下的子元素也置灰 */
@@ -567,7 +601,6 @@ page {
   /* 可选：添加背景和圆角，和列表项风格统一 */
   background-color: rgba(255, 255, 255, 0.85);
   border-radius: 12rpx;
-  margin-top: 20rpx;
   /* 点击态效果，和列表项保持一致 */
   transition: all 0.2s ease;
 }