改造企业微信会议通知

src/apps/AppMeetingNotice/AppMeetingNotice.vue

@@ -1,47 +1,51 @@
 <template>
   <div class="meeting">
-    <ai-top-fixed>
-      <u-grid :col="3" :border="false">
-        <u-grid-item v-for="(item,index) in grid" :key="index" :custom-style="{padding:'14px 0'}" @click="handleClick(index)">
-          <u-icon :name="item.icon" :size="64"></u-icon>
-          <view class="label">{{item.label}}</view>
-        </u-grid-item>
-      </u-grid>
-    </ai-top-fixed>
-    <div class="body">
-      <header>待参加的会议</header>
-      <template v-if="meetingList.length">
-        <div class="card" v-for="(item,index) in meetingList" :key="index" @click="detail(item)">
-          <header>{{item.title}}</header>
-          <u-row justify="between">
-            <div class="time">
-              <span>{{item.startTime|format}}</span>
-              <span>{{item.startTime|formatDate(0)}}年{{item.startTime|formatDate(1)}}月{{item.startTime|formatDate(2)}}日 周{{item.startTime|formatWeek}}</span>
-            </div>
-            <div class="arrow"></div>
-            <div class="time">
-              <span>{{item.endTime|format}}</span>
-              <span>{{item.endTime|formatDate(0)}}年{{item.endTime|formatDate(1)}}月{{item.endTime|formatDate(2)}}日 周{{item.endTime|formatWeek}}</span>
-            </div>
-          </u-row>
-          <u-row class="info">
-            <span>发起人员：</span>
-            <span>{{item.userName}}</span>
-          </u-row>
-          <u-gap height="20"></u-gap>
-          <u-row class="info">
-            <span>会议地点：</span>
-            <span>{{item.address}}</span>
-          </u-row>
-          <div class="tag" :style="{background:'url(' + $cdn + tag(item.joinStatus) + ')'}"></div>
-        </div>
-      </template>
-      <template v-else>
-        <ai-empty/>
-      </template>
-    </div>
-    <u-divider bg-color="#F5F5F5" v-if="meetingList.length">已经到底啦</u-divider>
-    <ai-add @add="add"/>
+    <template v-if="isList">
+      <ai-top-fixed>
+        <u-grid :col="3" :border="false">
+          <u-grid-item v-for="(item,index) in grid" :key="index" :custom-style="{padding:'14px 0'}"
+                       @click="handleClick(index)">
+            <u-icon :name="item.icon" :size="64"></u-icon>
+            <view class="label">{{item.label}}</view>
+          </u-grid-item>
+        </u-grid>
+      </ai-top-fixed>
+      <div class="body">
+        <header>待参加的会议</header>
+        <template v-if="meetingList.length">
+          <div class="card" v-for="(item,index) in meetingList" :key="index" @click="detail(item)">
+            <header>{{item.title}}</header>
+            <u-row justify="between">
+              <div class="time">
+                <span>{{item.startTime|format}}</span>
+                <span>{{item.startTime|formatDate(0)}}年{{item.startTime|formatDate(1)}}月{{item.startTime|formatDate(2)}}日 周{{item.startTime|formatWeek}}</span>
+              </div>
+              <div class="arrow"></div>
+              <div class="time">
+                <span>{{item.endTime|format}}</span>
+                <span>{{item.endTime|formatDate(0)}}年{{item.endTime|formatDate(1)}}月{{item.endTime|formatDate(2)}}日 周{{item.endTime|formatWeek}}</span>
+              </div>
+            </u-row>
+            <u-row class="info">
+              <span>发起人员：</span>
+              <span>{{item.userName}}</span>
+            </u-row>
+            <u-gap height="20"></u-gap>
+            <u-row class="info">
+              <span>会议地点：</span>
+              <span>{{item.address}}</span>
+            </u-row>
+            <div class="tag" :style="{background:'url(' + $cdn + tag(item.joinStatus) + ')'}"></div>
+          </div>
+        </template>
+        <template v-else>
+          <ai-empty/>
+        </template>
+      </div>
+      <u-divider bg-color="#F5F5F5" v-if="meetingList.length">已经到底啦</u-divider>
+      <ai-add @add="add"/>
+    </template>
+    <component v-else :is="comp" :params="params"></component>
   </div>
 </template>
 
@@ -49,14 +53,18 @@
   import AiEmpty from "../../components/AiEmpty/AiEmpty";
   import AiTopFixed from "../../components/AiTopFixed";
   import AiAdd from "../../components/AiAdd";
+  import {addMeeting, belongToMe, detail, meetingList} from './components'
 
   export default {
     name: "AppMeetingNotice",
     appName: "会议通知",
-    components: {AiEmpty, AiTopFixed, AiAdd},
+    components: {AiEmpty, AiTopFixed, AiAdd, addMeeting, belongToMe, detail, meetingList},
     data() {
       return {
-        meetingList:[]
+        meetingList: [],
+        isList: true,
+        comp: "",
+        params: null,
       }
     },
     computed: {
@@ -78,16 +86,16 @@
       }
     },
     methods: {
-      tag(status){
+      tag(status) {
         return {
-          "0":"common/1wqr.png",
-          "1":"common/1yqr.png",
-          "2":"common/1yqj.png",
+          "0": "common/1wqr.png",
+          "1": "common/1yqr.png",
+          "2": "common/1yqj.png",
         }[status]
       },
-      detail({id}){
+      detail({id}) {
         uni.navigateTo({
-          url:"/pages/meetingNotice/components/detail?id=" + id
+          url: "/pages/meetingNotice/components/detail?id=" + id
         })
       },
       getData() {
@@ -97,42 +105,44 @@
             meetingStatus: "1|2",
             size: 999
           }
-        }).then(res=>{
-          if(res && res.data){
+        }).then(res => {
+          if (res && res.data) {
             this.meetingList = res.data.records
           }
         })
       },
-      handleClick(index){
+      handleClick(index) {
         let url
-        if(index==0 || index==2){
-          url="/pages/meetingNotice/components/meetingList?index=" + index
-        }else if(index==1){
-          url="/pages/meetingNotice/components/belongToMe"
+        if (index == 0 || index == 2) {
+          this.comp = "meetingList";
+          this.params = index;
+          this.isList = false;
+        } else if (index == 1) {
+          url = "/pages/meetingNotice/components/belongToMe"
         }
         uni.navigateTo({url})
       },
       add() {
         uni.navigateTo({
-          url:"/pages/meetingNotice/components/addMeeting"
+          url: "/pages/meetingNotice/components/addMeeting"
         })
       }
     },
 
-    filters:{
-      format(date){
-        return date.split(" ")[1].substr(0,5)
+    filters: {
+      format(date) {
+        return date.split(" ")[1].substr(0, 5)
       },
-      formatDate(date,index){
+      formatDate(date, index) {
         return date.split(" ")[0].split("-")[index]
       },
-      formatWeek(date){
+      formatWeek(date) {
         return "日一二三四五六".charAt((new Date(date.split(" ")[0]).getDay()))
       }
     },
 
-    onShow(){
-     this.getData()
+    onShow() {
+      this.getData()
     }
   }
 </script>
@@ -212,6 +222,7 @@
             position: absolute;
             transform: scaleY(1.3) translate(30%, -40px) rotate(45deg);
           }
+
           &:before {
             top: 59px;
             background-color: #CCCCCC;
@@ -236,7 +247,7 @@
           }
         }
 
-        .tag{
+        .tag {
           width: 112px;
           height: 112px;
           background-repeat: no-repeat !important;
@@ -248,7 +259,7 @@
       }
     }
 
-    ::v-deep .content{
+    ::v-deep .content {
       padding: 0 !important;
     }
   }

src/apps/AppMeetingNotice/components/index.js

@@ -0,0 +1,4 @@
+export {default as addMeeting} from './addMeeting'
+export {default as belongToMe} from './belongToMe'
+export {default as detail} from './detail'
+export {default as meetingList} from './meetingList'

src/apps/AppMeetingNotice/components/meetingList.vue

@@ -27,7 +27,7 @@
         <span>会议地点：</span>
         <span>{{item.address}}</span>
       </u-row>
-        <div class="tag" v-if="item.status!=0" :style="{background:'url(' + $cdn + tag(item.status) +')'}"></div>
+      <div class="tag" v-if="item.status!=0" :style="{background:'url(' + $cdn + tag(item.status) +')'}"></div>
     </div>
     <u-loadmore :status="status" v-if="list.length"/>
     <AiEmpty v-if="!list.length"></AiEmpty>
@@ -42,9 +42,14 @@
   export default {
     name: "meetingList",
     components: {AiBack, AiEmpty},
+    props: {
+      params: {
+        type: String,
+        default: ""
+      }
+    },
     data() {
       return {
-        index: null,
         list: [],
         current: 1,
         status: "加载更多",
@@ -52,16 +57,15 @@
     },
 
     onLoad(opt) {
-      this.index = opt.index
       uni.setNavigationBarTitle({
-        title: opt.index == 0 ? "历史会议" : "草稿箱"
+        title: this.params == 0 ? "历史会议" : "草稿箱"
       });
     },
 
     methods: {
       detail({id}) {
         let url
-        if (this.index == 2) {
+        if (this.params == 2) {
           url = "/pages/meetingNotice/components/addMeeting?id=" + id
         } else {
           url = "/pages/meetingNotice/components/detail?id=" + id
@@ -79,8 +83,8 @@
       getData() {
         this.$http.post("/app/appmeetinginfo/list", null, {
           params: {
-            listType: this.index == 0 ? "2" : '0',
-            meetingStatus: this.index == 0 ? "4" : "0",
+            listType: this.params == 0 ? "2" : '0',
+            meetingStatus: this.params == 0 ? "4" : "0",
             size: 10,
             current: this.current,
           }
@@ -107,7 +111,7 @@
       }
     },
 
-    onShow(){
+    onShow() {
       this.getData()
     },
 
@@ -199,6 +203,7 @@
 
       .info {
         flex-wrap: nowrap;
+
         & > span:first-child {
           flex-shrink: 0;
           font-size: 30px;