pages/activity/activity_deatil.vue

@@ -3,9 +3,9 @@
     <view class="header">
       <view class="title-read">
         <view class="title">
-          400场讲座，200多门课程，免费送上门！就等你来申请啦～
+          {{ model.title }}
         </view>
-        <view class="read">阅读量 123</view>
+        <view class="read">阅读量 {{ model.read }}</view>
       </view>
       <view class="header-image">
         <image src="/static/activity/u1104.png" alt="" />
@@ -15,15 +15,15 @@
       <ul>
         <li>
           <p class="name">活动时间</p>
-          <p class="deatil-content">2021.08.20 14:00 - 2021.08.30 17:00</p>
+          <p class="deatil-content">{{ model.date }}</p>
         </li>
         <li>
           <p class="name">活动类型</p>
-          <p class="deatil-content">线上</p>
+          <p class="deatil-content">{{ model.type == 1 ? "线上" : "线下" }}</p>
         </li>
         <li>
           <p class="name">主办方</p>
-          <p class="deatil-content">区人力资源局</p>
+          <p class="deatil-content">{{ model.way }}</p>
         </li>
       </ul>
     </view>
@@ -32,12 +32,24 @@
     </view>
     <view class="share-box">
       <view class="share">
-        <view class="shareCount">17</view>
+        <view class="shareCount">{{ model.share }}</view>
         <image src="../../static/share_icon.png"></image>
       </view>
       <view class="button"
-        ><button @click="signUpActivity">活动进行中</button></view
+        ><button
+          @click="signUpActivity"
+          :disabled="!(model.status == 0 && model.type == 2)"
+          :class="{
+            start: model.status == 0,
+            begun: model.status == 1,
+            ended: model.status == 2,
+          }"
+        >
+          {{ model.activiteState }}
+        </button></view
       >
+      <!--         "status":"活动状态 0：待开始；1：已开始； 2：已结束
+        "type":"活动类型 1:线上;2 线下"} -->
     </view>
   </view>
 </template>
@@ -53,14 +65,15 @@ export default {
     return {
       id: "",
       model: {
-        title: "",
-        read: 0,
+        title: "400场讲座，200多门课程，免费送上门！就等你来申请啦～",
+        read: 123,
         url: "",
-        date: "",
-        type: "",
-        way: "",
+        date: "2021.08.20 14:00 - 2021.08.30 17:00",
+        type: 1,
+        status: 0,
+        way: "区人力资源局",
         share: 0,
-        activiteState: "",
+        activiteState: "活动进行中",
       },
       textModel: {
         title: "活动内容",
@@ -275,11 +288,26 @@ export default {
       button {
         width: 80%;
         height: 90%;
-        border: 1px solid #00a8ea;
+        border: 1px solid;
         outline: none;
         background: none;
+      }
+      .start {
+        //待开始
+        background-color: #00a8ea;
+        color: #ffffff;
+        border-color: none;
+      }
+      .begun {
+        //已开始
+        border-color: #00a8ea;
         color: #00a8ea;
       }
+      .ended {
+        //已结束
+        color: #aaaaaa;
+        border-color: #aaaaaa;
+      }
     }
   }
 }

pages/activity/index.vue

@@ -30,7 +30,7 @@
     </div>
     <div class="actives">
       <div
-        v-for="(active, idx) in activeList"
+        v-for="(active, idx) in activeListCopy"
         :key="idx"
         class="actives-item"
         @click="goDeatil(active.id)"
@@ -45,7 +45,7 @@
                   :class="{ color: active.type == 1 }"
                   class="originColor"
                 ></div>
-                <div>{{ active.type == 1 ? "线下" : "线上" }}</div>
+                <div>{{ active.type == 1 ? "线上" : "线下" }}</div>
               </div>
               <div class="inf-way" style="width: 24%;">
                 {{ active.way }}
@@ -114,25 +114,26 @@ export default {
         },
       ],
       activeList: [
-        {
-          url: "/static/activity/1.png",
-          title: "400场讲座,200门课程,免费送上门!就等你申请",
-          way: "区人力资源局",
-          date: "2021-08-08",
-          read: 322,
-          share: 1,
-          type: 1, //1线上
-        },
-        {
-          url: "/static/activity/2.png",
-          title: "智能制造商标品牌培育系列培训活动",
-          way: "市场监督管理局",
-          date: "2021-08-07",
-          read: 322,
-          share: 1,
-          type: 2, //2线下
-        },
+        // {
+        //   url: "/static/activity/1.png",
+        //   title: "400场讲座,200门课程,免费送上门!就等你申请",
+        //   way: "区人力资源局",
+        //   date: "2021-08-08",
+        //   read: 322,
+        //   share: 1,
+        //   type: 1, //1线上
+        // },
+        // {
+        //   url: "/static/activity/2.png",
+        //   title: "智能制造商标品牌培育系列培训活动",
+        //   way: "市场监督管理局",
+        //   date: "2021-08-07",
+        //   read: 322,
+        //   share: 1,
+        //   type: 2, //2线下
+        // },
       ],
+      activeListCopy: [],
     };
   },
   onLoad() {
@@ -152,8 +153,20 @@ export default {
           this.pickerState = this.pickerStateArray[this.indexState].label;
           this.typeActive = false;
       }
-
-      this.index = e.detail.value;
+      /* 
+        {  label: "全部",  value: 1,   },   { label: "线上",  value: 2,   }, { label: "线下", value: 3, }, 
+      { label: "全部",   value: 1, }, { label: "待开始",value: 2,},{label: "已开始",value: 3, }, { label: "已结束",value: 4, },
+        "status":"活动状态 0：待开始；1：已开始； 2：已结束
+        "type":"活动类型 1:线上;2 线下"}
+        */
+      let type = this.indexType ;
+      let state = this.indexState;
+      this.activeListCopy = this.activeList.filter((item) => {
+        return (
+          ( type == 0 || item.type == type) &&
+          ( state == 0 || item.status == state - 1)
+        );
+      });
     },
     goDeatil(id) {
       uni.navigateTo({
@@ -188,7 +201,7 @@ export default {
         },
         data: postData,
         success: (res) => {
-          console.log(res);
+          // console.log(res);
           if (res.data.code === 200) {
             let list = res.data.data.list;
             this.activeList = list.map((item) => {
@@ -211,6 +224,7 @@ export default {
                 type: "",
 				status:'',
                 id: "",
+                status: 0,
               };
               ob.url = getApp().globalData.shareUrl + item.pic_url;
               ob.title = item.name;
@@ -223,8 +237,10 @@ export default {
               ob.type = item.type;
 			  ob.status = item.status; 
               ob.id = item.id;
+              ob.status = item.status;
               return ob;
             });
+            this.activeListCopy = this.activeList;
           }
         },
         fail: () => {