上传文件至 'src/pages/meetingRoom'

src/pages/meetingRoom/meetingRoomDetail.vue

@@ -1,23 +1,132 @@
 <template>
-  <div class="div_page_bg">
+  <div class="content">
+    <h3 class="blueTitle">会议室预定信息</h3>
+    <div class="item-title">
+      <span class="text-color-description item-address">流水号:{{ item.lsh }}</span>
+      <span class="text-color-description" :style="{ color: generateColor() }">{{ generateState() }}</span>
+    </div>
+    <div class="item-title">
+      <span class="text-color-title item-address">会议室:{{ item.hys }}</span>
+    </div>
+    <div class="text-color-description">预订人：{{ item.ydr }}</div>
+    <div class="text-color-description">预定时间：{{ item.ydsj }}</div>
+    <div class="text-color-description">增值服务：{{ item.zzfw }}</div>
+    <div class="item-title" style="margin-top: 20px">
+      <span class="text-color-description item-address">待跟进事项</span>
+      <span class="text-color-description item-address">服务状态</span>
+    </div>
+    <div>
+      <div class="item-title">
+        <span class="text-color-fw item-address">1.安保服务（跟进人：秩序主管）</span>
+        <span class="text-color-fw item-address" style="display: flex; align-item: center">
+          <van-switch v-model="checked[0]" />
+          <span class="status">{{ checked[0] ? '完成' : '待服务' }}</span>
+        </span>
+      </div>
+      <div class="item-title">
+        <span class="text-color-fw item-address">1.安保服务（跟进人：秩序主管）</span>
+        <span class="text-color-fw item-address" style="display: flex; align-item: center">
+          <van-switch v-model="checked[1]" />
+          <span class="status">{{ checked[1] ? '完成' : '待服务' }}</span>
+        </span>
+      </div>
+      <div class="item-title">
+        <span class="text-color-fw item-address">1.安保服务（跟进人：秩序主管）</span>
+        <span class="text-color-fw item-address" style="display: flex; align-item: center">
+          <van-switch v-model="checked[2]" />
+          <span class="status">{{ checked[2] ? '完成' : '待服务' }}</span>
+        </span>
+      </div>
+    </div>
+
+    <div class="footer">
+      <p v-show="checked.filter(a => a).length != checked.length">需要将所有的服务状态改为完成</p>
+      <van-button type="info" v-show="checked.filter(a => a).length == checked.length">完成服务</van-button>
+    </div>
   </div>
 </template>
 
 <script>
-import {
-} from "../../service/getData";
+import {} from "../../service/getData";
 export default {
   name: "meetingRoomDetail",
   data() {
     return {
-    }
-  },
-  activated() {
-  },
-  created() {
+      checked: [false, false, false],
+      item: {
+        hys: "xxx会议室",
+        lsh: 2020202020,
+        examineState: 0,
+        ydr: "张三",
+        ydsj: "2020-11-11 11:11",
+        zzfw: "矿泉水 X3 (瓶)"
+      }
+    };
   },
+  activated() {},
+  created() {},
 
   methods: {
+    generateState() {
+      //"decorationState": "0",//0-未开始，1-装修中，2-待整改，3-已初验，4-已复验5-没审核
+      switch (this.item.examineState + "") {
+        case "0":
+          return "待审核";
+          break;
+        case "1":
+          switch (this.item.decorationState + "") {
+            case "0":
+              return "未开始";
+              break;
+            case "1":
+              return "装修中";
+              break;
+            case "2":
+              return "待整改";
+              break;
+            case "3":
+              return "已初验";
+              break;
+            case "4":
+              return "已复验";
+              break;
+          }
+          break;
+        case "2":
+          return "驳回";
+          break;
+      }
+    },
+    generateColor() {
+      //"decorationState": "0",//0-未开始，1-装修中，2-待整改，3-已初验，4-已复验5-没审核
+      switch (this.item.examineState + "") {
+        case "0":
+          return "#999";
+          break;
+        case "1":
+          switch (this.item.decorationState + "") {
+            case "0":
+              return "#999";
+              break;
+            case "1":
+              return "#57a2fe";
+              break;
+            case "2":
+              return "#fba908";
+              break;
+            case "3":
+              return "#57a2fe";
+              break;
+            case "4":
+              return "#57a2fe";
+              break;
+          }
+          break;
+        case "2":
+          return "#fc4e50";
+          break;
+      }
+    }
   }
 };
 </script>
@@ -25,5 +134,72 @@ export default {
 
 
 <style scoped lang="less">
+.content {
+  padding: 10px;
+}
+.footer {
+  font-size: 16px;
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+  button {
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+  }
+}
+.blueTitle {
+  margin-bottom: 10px;
+  padding-left: 15px;
+  line-height: 25px;
+  font-weight: normal;
+  font-size: 18px;
+  position: relative;
+  &:before {
+    content: "";
+    background: #55a2fc;
+    position: absolute;
+    top: 2.5px;
+    left: 0;
+    height: 20px;
+    width: 3px;
+  }
+}
+.text-color-fw {
+  color: #7e7b7e;
+  display: inline-block;
+  line-height: 30px;
+}
+
+.text-color-title {
+  color: #333;
+}
 
+.text-color-description {
+  color: #999;
+}
+.item-title {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-bottom: 9px;
+}
+.item-address {
+  font-size: 15px !important;
+}
+.status {
+  display: inline;
+  width: 50px;
+  text-align: right;
+}
+.item-description {
+  margin-bottom: 5px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 </style>