换分段器

src/project/huizhili/AppCooperationPropaganda/circleDetail.vue

@@ -44,7 +44,7 @@
 
       <div class="list_content">
         <div class="list_card">
-          <div class="tab" v-show="update">
+          <!-- <div class="tab" v-show="update">
             <u-subsection
               :list="subsection"
               mode="button"
@@ -52,6 +52,11 @@
               :current="subIndex"
               @change="changeSub"
             ></u-subsection>
+          </div> -->
+          <div class="tab" v-show="update">
+            <div class="item" :class="subIndex == index? 'bgactive': ''" v-for="(item,index) in subsection" :key="index" @click="changeSub(index)">
+              {{ item }}
+            </div>
           </div>
 
           <AiTable
@@ -82,9 +87,9 @@ export default {
       detail: {},
 
       subsection: [
-        { name: "未执行" },
-        { name: "已执行" },
-        { name: "无法执行" },
+        // { name: "未执行" },
+        // { name: "已执行" },
+        // { name: "无法执行" },
       ],
       update: true,
       type: "",
@@ -103,6 +108,18 @@ export default {
     this.id = o.id;
     this.type = o.type
   },
+  watch: {
+    type: {
+      handler(v) {
+        if(v=="CircleOfFriends") {
+          this.subsection = ["未执行","已执行"]
+        }
+        if(v=="Residents") {
+          this.subsection = ["未执行","已执行","无法执行"]
+        }
+      }
+    }
+  },
   methods: {
     getDetail() {
       this.$http.post(`/app/whchatmomentstask/queryDetailById?id=${this.id}`).then((res) => {
@@ -413,7 +430,47 @@ export default {
 
       .tab {
         margin-bottom: 34px;
+
+        ::v-deep .u-subsection uni-view{
+          background: #eeef !important;
+        }
       }
+
+      ::v-deep .AiTable .u-table .u-tr .u-td p{
+        width: 100%;
+        word-break: keep-all;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      
+      ::v-deep .AiTable .u-table .u-tr .u-td {
+        width: 30%;
+      }
+    }
+  }
+  .tab {
+    height: 70px;
+    background-color: #eeeeef;
+    padding: 3px 4px;
+    border-radius: 10px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .item {
+      flex: 1;
+      height: 58px;
+      line-height: 58px;
+      align-self: center;
+      text-align: center;
+      border-radius: 16px;
+      color: #606266;
+    }
+    .bgactive {
+      background: #fff;
+      font-weight: 600;
+      color: #3aa0ff;
     }
   }
 }