基本页面

public/index.html

@@ -18,11 +18,7 @@
     <META HTTP-EQUIV="expires" CONTENT="0">
       <!-- 标签图标 -->
     <!-- <link type="favicon" rel="shortcut icon" href="./static/favicon.ico" /> -->
-    <title>国家重大疾病</title>
-    <link rel="stylesheet" href="./static/swiper/idangerous.swiper.css">
-    <script src="./static/swiper/idangerous.swiper.min.js"></script>
-  
-    <!-- <script src="./static/iSlider.js"></script> -->
+    <title>视频诊断</title>
     <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
     <script type="text/javascript">
       var _hmt = _hmt || [];

src/App.vue

 <template>
-  <div
-    id="app"
-    :class="{'is-ipx':isIPX == 1}"
-  >
+  <div id="app">
     <transition :name="routerAnimate">
-      <keep-alive :include="keepAlive">
-        <router-view class="app-content"></router-view>
+      <keep-alive>
+        <router-view
+          class="app-content"
+          v-if="$route.meta.keepAlive"
+        ></router-view>
       </keep-alive>
     </transition>
-    <!-- <transition :name="routerAnimate">
-      <router-view class="app-content" v-if="!$route.meta.keepAlive"></router-view>
-    </transition> -->
-    <!--底部导航 路由 -->
-    <footer
-      class="app-footer"
-      v-if="$route.meta.index == 1 && carTabFlag!=2"
-    >
-      <wx-tab :tab="tabIndex"></wx-tab>
-    </footer>
+    <transition :name="routerAnimate">
+      <router-view
+        class="app-content"
+        v-if="!$route.meta.keepAlive"
+      ></router-view>
+    </transition>
   </div>
 </template>
 
 <script>
-import { mapActions, mapState } from 'vuex'
-import wxTab from '@/components/common/tab'
 export default {
   name: 'app',
-  components: {
-    wxTab,
-  },
   data () {
     return {
-      "tabIndex": 1,
-      "pageName": "",
-      "routerAnimate": "",
-      keepAlive: ['cHome'],
-      aliveRoute: ['screeningMap', 'screeningFiles']
+      aliveRoute: [],
+      routerAnimate: ''
     }
   },
   watch: {
     // 监听 $route 为内页设置不同的过渡效果
     "$route" (to, from) {
-      /*动态设置路由缓存 start*/
-      if (this.aliveRoute.includes(to.name)) {
-        to.meta.keepAlive = true
-      }
-      let aliveRoute = this.$router.options.routes.filter(e => e.meta && e.meta.keepAlive).map(e => e.name)
-      this.keepAlive = aliveRoute
-      /*动态设置路由缓存 end*/
-      // console.log(aliveRoute);
-      if (to.path == "/homePageIdx") {
-        this.tabIndex = 0
-        this.setCarTabFlagData(1);
-        this.$forceUpdate();
-      } else if (to.path == "/categoryIdx") {
-        this.tabIndex = 1
-        this.setCarTabFlagData(1);
-      } else if (to.path == "/carIndex") {
-        this.tabIndex = 2
-        this.$forceUpdate();
-      } else if (to.path == "/userIndex") {
-        this.setCarTabFlagData(1);
-        this.tabIndex = 3
-      }
-      this.routerAnimate = ""
       if (to.meta.index === from.meta.index) {
         return;
         // this.routerAnimate = "slide-left"
@@ -88,21 +53,12 @@ export default {
     },
   },
   computed: {
-    isIPX () {
-      // console.log(this.$store.state.isLogin)
-      return this.$store.state.isIPX
-    },
     userInfo () {
       return this.$store.state.userInfo || {}
     },
-    carTabFlag () {
-      return this.$store.state.carTabFlag
-    }
 
   },
   methods: {
-    ...mapActions(['setIsFromShareAction', 'setCarTabFlagData']),
-
   },
   created () {
 

src/pages/login.vue

 <template>
-  <div></div>
+  <!-- 筛查地图 -->
+  <div class="index-wrap">
+    <!-- <x-header :left-options="{ backText: '', showBack: false }">
+      登录
+    </x-header> -->
+    <v-content
+      :has-header="false"
+      :has-footer="false"
+    >
+      
+      <van-form @submit="onSubmit">
+        <div class="title">登录</div>
+        <van-field
+          v-model="username"
+          name="username"
+          label=""
+          placeholder="用户名"
+          :rules="[{ required: true, message: '请填写用户名' }]"
+        />
+        <van-field
+          v-model="password"
+          type="password"
+          name="password"
+          label=""
+          placeholder="密码"
+          :rules="[{ required: true, message: '请填写密码' }]"
+        />
+        <div style="margin: 16px;">
+          <van-button
+            round
+            block
+            type="info"
+            class="btn"
+            native-type="submit"
+            @click="$router.push('/peopleList')"
+          >提交</van-button>
+        </div>
+      </van-form>
+    </v-content>
+  </div>
 </template>
 <script>
 export default {
+  name: 'login',
   data () {
-    return {}
+    return {
+      username: '',
+      password: '',
+    };
   },
-  methods: {},
-  mounted () { },
-  watch: {}
-}
+  methods: {
+    onSubmit (values) {
+      console.log('submit', values);
+    },
+  }
+};
 </script>
 <style lang="scss" scoped>
-</style>
\ No newline at end of file
+.content {
+  position: relative;
+  padding: 0 5px;
+}
+.van-form {
+  width: 100%;
+  position: absolute;
+  top: 30%;
+  transform: translateY(-50%);
+  .title{
+    text-align: center;
+    font-size: 20px;
+    margin: 20px 0;
+  }
+  .van-field{
+    // height: 44px;
+  }
+  .btn{
+    height: 44px;
+    border-radius: 22px !important;
+  }
+}
+</style>

src/pages/peopleList.vue

 <template>
   <!-- 筛查地图 -->
   <div class="index-wrap">
-    <x-header :left-options="{ backText: '', showBack: true }">
-      筛查地图
+    <x-header :left-options="{ backText: '', showBack: false }">
+      人员列表
     </x-header>
     <v-content
       has-header
       :has-footer="false"
     >
-      <van-search
-        v-model="searchInputValue"
-        shape="round"
-        background="#127BFF"
-        placeholder="请输入搜索关键词"
-      >
-        <template slot="right-icon">
-          <div
-            @click="inputSearch"
-            class="doText"
-          >搜索</div>
-        </template>
-      </van-search>
-      <div class="top_select">
-        <div
-          class="select_address"
-          v-for="(item, index) in selectObj"
-          :key="index"
-        >
-          <span
-            v-show="!item.chooseData"
-            @click="showChooseData(index)"
-          >{{ item.label }}
-            <van-icon
-              name="play"
-              class="column_play"
-            />
-          </span>
-          <span v-show="item.chooseData">{{ item.chooseData }}
-            <van-icon
-              name="cross"
-              color="red"
-              @click="clearLocate(index)"
-            />
-          </span>
-        </div>
-      </div>
       <!-- 列表 -->
       <div
         class="list_content"
@@ -52,219 +15,152 @@
       >
         <van-list
           v-model="loading"
+          :immediate-check='false'
           :finished="finished"
           finished-text="没有更多了"
-          @load="getList"
+          :offset='100'
+          @load="loadMore"
         >
           <van-cell-group
             inset
-            v-for="(item, index) in hospitalList"
+            v-for="(item, index) in peopleList"
             :key="index"
           >
             <van-cell
               center
-              :title="item.hospitalName"
-              :label="item.address||'--'"
               is-link
-              :to="`appointmentType?id=${item.hospitalNumber}`"
+              @click="JumpTo(item.id)"
             >
-              <template #right-icon> </template>
-              <template
-                #icon
-                v-if="item.hospitalRank"
-              >
-                123
+              <template #title>
+                <div class="avater">
+                  <div
+                    class="circle"
+                    :style="{background:item.riskRank=='a'?'#ED4014':item.riskRank=='b'?'#FF9900':'#2DB7F5'}"
+                  >
+                  </div>
+                  {{ item.name }}
+                </div>
+              </template>
+              <template #right-icon>
+                <div class="right">
+                  <div class="plan_time">
+                    计划随访时间 : {{ item.followUpTime }}
+                  </div>
+                  <div class="module">
+                    模式 : {{ item.diseaseType | vtol }}
+                  </div>
+                </div>
               </template>
-              <template
-                #icon
-                v-else
-              >
-               234
+              <template #label>
+                <span>
+                  {{ item.patientInfo?item.patientInfo.sex=='a'?'男':'女':'--' }}
+                </span>
+                &nbsp;
+                <span>
+                  {{ item.patientInfo?item.patientInfo.birthday:'--' }}
+                </span>
+                &nbsp;
+                <span>
+                  {{ item.patientInfo?item.patientInfo.address:'--' }}
+                </span>
               </template>
             </van-cell>
           </van-cell-group>
         </van-list>
       </div>
     </v-content>
-    <!-- 弹出层公用 -->
-    <van-popup
-      v-model="chooseFlag"
-      position="bottom"
-    >
-      <van-picker
-        :title="showTitle"
-        show-toolbar
-        :columns="showOptions"
-        @confirm="onConfirm"
-        @cancel="onCancel"
-      />
-    </van-popup>
   </div>
 </template>
 <script>
-let addressInfo = [
-  {
-    value: "330301000000",
-    label: "市辖区"
-  },
-  {
-    value: "330302000000",
-    label: "鹿城区"
-  },
-  {
-    value: "330303000000",
-    label: "龙湾区"
-  },
-  {
-    value: "330304000000",
-    label: "瓯海区"
-  },
-  {
-    value: "330305000000",
-    label: "洞头区"
-  },
-  {
-    value: "330324000000",
-    label: "永嘉县"
-  },
-  {
-    value: "330326000000",
-    label: "平阳县"
-  },
-  {
-    value: "330327000000",
-    label: "苍南县"
-  },
-  {
-    value: "330328000000",
-    label: "文成县"
-  },
-  {
-    value: "330329000000",
-    label: "泰顺县"
-  },
-  {
-    value: "330381000000",
-    label: "瑞安市"
-  },
-  {
-    value: "330382000000",
-    label: "乐清市"
-  }
-]
 export default {
-  name: 'screeningMap',
+  name: 'peopleList',
   data () {
     return {
-      searchInputValue: "",
-      chooseFlag: false,
-      showTitle: "",
       pageNum: 1,
       pageSize: 10,
       totalCount: 0,
-      showIndex: 0, // 展示的下标
-      showOptions: [],
-      selectObj: [
-        {
-          label: "选择区县",
-          chooseData: '',
-          options: addressInfo.map(e => e.label)
-        },
-        {
-          label: "全部等级",
-          chooseData: '',
-          options: ["三级", "二级", "一级", "其他"]
-        }
-      ],
-      hospitalList: [
-        // {
-        //   name: "长江医院",
-        //   address: "温州皮革厂"
-        // }
-      ],
+      peopleList: [],
       loading: false,
       finished: false,
     };
   },
   methods: {
-    // 搜索
-    inputSearch () {
-      this.pageNum = 0
-      this.getList()
+    JumpTo (id) {
+      this.$router.push(`/videoList?id=${id}`)
     },
     getList () {
-      this.loading = true;
-      this.finished = false;
-      //? 处理一下区县编码
-      let locatecode = this.selectObj[0].chooseData
-      if (locatecode) {
-        locatecode = addressInfo.filter(e => e.label == locatecode)[0].value
-      }
-      if (this.hospitalList.length > 0 && this.hospitalList.length <= this.totalCount) {
-        this.pageNum++
-      }
       let data = {
         pageNum: this.pageNum,
-        pageSize: this.pageSize,
-        hospitalName: this.searchInputValue || undefined,
-        districtCode: locatecode || undefined,
-        hospitalRank: this.selectObj[1].chooseData || undefined,
+        pageSize: this.pageSize
       }
-    },
-    // 调出底部面板
-    showChooseData (num) {
-      this.showIndex = num;
-      this.showOptions = this.selectObj[num].options
-      switch (num) {
-        case 0:
-          this.showTitle = "请选择所在区县";
-          break;
-        case 1:
-          this.showTitle = "请选择等级";
-          break;
+      this.finished = false;
+      setTimeout(() => {
+        this.loading = false
+        this.totalCount = 40
+        this.setNum(this.pageSize)
+        if (this.peopleList.length >= this.totalCount) {
+          this.finished = true
+        }
+      }, 1000);
 
-        default:
-          break;
-      }
-      this.chooseFlag = true;
     },
-    clearLocate (index) {
-      this.selectObj[index].chooseData = "";
-      this.chooseFlag = false;
-      this.pageNum = 0
+    loadMore () {
+      this.pageNum++
       this.getList()
     },
-    // 选择
-    onConfirm (value, index) {
-      this.chooseFlag = false;
-      this.selectObj[this.showIndex].chooseData = value;
-      this.pageNum = 0
-      this.getList()
-    },
-    onCancel () {
-      this.chooseFlag = false;
+    setNum (num) {
+      for (let i = 0; i < num; i++) {
+        this.peopleList.push(
+          {
+            name: "test06271021",
+            followUpTime: '2022-08-88',
+            diseaseType: 'sj_wzz',
+            id: "62b90d53e4b0123121be58a8",
+            patientInfo: {
+              sex: 'a',
+              birthday: '1976-08-11',
+              address: '上海'
+            },
+            riskRank: 'c'
+          }
+        )
+      }
     }
   },
-  watch: {},
+  created () {
+    this.getList()
+  },
   activated () {
     const scrollTop = this.$route.meta.scrollTop;
-    const $content = document.querySelector('.list_content');
-    if (scrollTop && $content) {
-      this.$refs.scroller.scrollTo(0, scrollTop);
+    const $wrapper = document.querySelector('.list_content');
+    if (scrollTop && $wrapper) {
+      document.querySelector('.list_content').scrollTop = scrollTop;
     }
   },
-  beforeRouteLeave (to, from, next) {
-    if (to.path != '/appointmentType') {
-      from.meta.keepAlive = false
-    } else
-      if (to.path == '/appointmentType') {
-        from.meta.keepAlive = true
-        const $content = document.querySelector('.list_content'); // 列表的外层容器
-        const scrollTop = $content ? $content.scrollTop : 0;
-        from.meta.scrollTop = scrollTop;
+  mounted () {
+  },
+  watch: {},
+  filters: {
+    vtol (v) {
+      if (v) {
+        return [{
+          label: "无症状早癌筛查流程",
+          value: "sj_wzz",
+        },
+        {
+          label: "体检人群胃癌筛查",
+          value: "sj_tj",
+        },
+        {
+          label: "院内胃癌筛查流程",
+          value: "sj_nj",
+        }].filter(e => e.value == v)[0].label
+      } else {
+        return '--'
       }
-    next()
-  }
+
+    }
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -272,32 +168,44 @@ export default {
   font-size: 16px;
   color: #127bff;
 }
-.top_select {
-  display: flex;
-  padding: 20px 10px;
-  font-size: 14px;
-  .select_address {
-    margin-right: 20px;
-    .column_play {
-      font-size: 12px;
-      transform: rotate(90deg);
-    }
-  }
+
+.content {
 }
 .list_content {
-  height: calc(100vh - 159px);
+  height: calc(100vh - 44px);
   overflow: auto;
+  padding: 20px 0;
 }
-::v-deep .hospital_level {
-  width: 100%;
-  height: 24px;
-  font-size: 12px;
-  position: absolute;
-  bottom: 0;
-  text-align: center;
-  color: #fff;
+.avater {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  .circle {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    margin-right: 5px;
+  }
 }
 ::v-deep .van-cell-group {
-  margin-bottom: 10px;
+  height: 100px;
+  margin-bottom: 16px;
+  .van-cell {
+    height: 100%;
+  }
+}
+.right {
+  height: 100%;
+  padding: 9px 0 8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+.plan_time,
+.module {
+  margin-bottom: 2px;
+  font-size: 12px;
+  color: #969799;
 }
 </style>

src/pages/videoList.vue

 <template>
   <div>
     <x-header :left-options="{backText: '',showBack:true}">
-      预约类型
+      内镜视频
+      <div
+        class="uploadBtn"
+        slot="right"
+      >
+        <van-uploader>
+          <van-button type="text">上传文件</van-button>
+        </van-uploader>
+      </div>
     </x-header>
 
     <!-- 列表 -->
     <v-content
       has-header
-      has-footer
+      :has-footer="false"
     >
       <div class="list_content">
-        <van-cell-group
-          inset
-          v-for="(item,index) in typeList"
-          :key="index"
+        <van-row
+          type="flex"
+          justify="space-between"
         >
-          <van-cell
-            center
-            :title="item.name"
-            :label="item.address"
-            is-link
-            @click="jumpTo(index)"
+          <van-col
+            v-for="(item,index) in videoList"
+            :key="index"
+            class="col"
           >
-            <template #icon>
-              456
-            </template>
-          </van-cell>
-        </van-cell-group>
+            <!-- 视频 -->
+            <video
+              id="video"
+              controls
+              preload="auto"
+              loop="loop"
+              x5-video-player-fullscreen="true"
+              x5-video-orientation="portraint"
+              playsinline="true"
+              x5-video-player-type="h5"
+              style="object-fit:fill"
+            >
+              <!-- :poster="'https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'" -->
+              <source src="../assets/img/video.mp4">
+            </video>
+
+            <div class="label">
+              {{item.name}}
+            </div>
+            <div class="label">
+              {{item.time}}
+            </div>
+            <div class="label">
+              <a>诊断详情</a>
+              <a
+                style="color:#127BFF;"
+                @click="showPop(item.describe)"
+              >点击查看</a>
+            </div>
+          </van-col>
+        </van-row>
       </div>
     </v-content>
+    <van-popup
+      v-model="show"
+      position="bottom"
+      round
+      :style="{ height: '40%' }"
+    >
+      <div class="pop_content">
+        <div class="item">
+          <div class="label">
+            诊断日期：
+          </div>
+          <div class="value">
+            {{ describe.date }}
+          </div>
+        </div>
+        <div class="item">
+          <div class="label">
+            诊断所见：
+          </div>
+          <div class="value">
+            {{ describe.see }}
+          </div>
+        </div>
+        <div class="item">
+          <div class="label">
+            诊断结果：
+          </div>
+          <div class="value">
+            {{ describe.result }}
+          </div>
+        </div>
+      </div>
+    </van-popup>
   </div>
 </template>
 <script>
 export default {
   data () {
     return {
-      typeList: [
+      show: false,
+      describe: {},//诊断详情
+      videoList: [
+        {
+          name: '视频',
+          url: 'https://docs.egret.com/engine/img/engine2d.mp4',
+          time: '2022-01-04',
+          describe: {
+            date: '2022-01-08',
+            see: '大肿瘤',
+            result: '倒计时20天'
+          }
+        },
+        {
+          name: '视频',
+          url: 'https://docs.egret.com/engine/img/engine2d.mp4',
+          time: '2022-01-04',
+          describe: {
+            date: '2022-01-08',
+            see: '大肿瘤',
+            result: '倒计时20天'
+          }
+        },
         {
-          name: '门诊预约',
-          address: '看病看医生',
+          name: '视频',
+          url: 'https://docs.egret.com/engine/img/engine2d.mp4',
+          time: '2022-01-04',
+          describe: {
+            date: '2022-01-08',
+            see: '大肿瘤',
+            result: '倒计时20天'
+          }
         },
         {
-          name: '医技预约',
-          address: '检验检查、无需等待',
+          name: '视频',
+          url: 'https://docs.egret.com/engine/img/engine2d.mp4',
+          time: '2022-01-04',
+          describe: {
+            date: '2022-01-08',
+            see: '大肿瘤',
+            result: '倒计时20天'
+          }
         }
-      ]
+      ],
+
     }
   },
   methods: {
-    jumpTo (i) {
-      if (i == 0) {
-        this.$API.getEncryptedInfo(
-          this.$route.query.id
-        ).then(res => {
-          if (res.code == 1) {
-            let str = res.object
-            // console.log(str);
-            // let url
-            // if (process.env.NODE_ENV === 'development') {
-            // url = `https://ih.wzaijk.com/patient-wenzhou-h5/#/projects/wenzhou/pages/yygh/yyghHome?content=${str}&app=yygh`
-            // } else {
-            //   url = `https://ih.wzaijk.com.cn/patient-wenzhou-h5/#/projects/wenzhou/pages/yygh/yyghHome?content=${str}&app=yygh`
-            // }
-            // console.log(url);
-            window.open(str, '_self');
-          }
-        })
-
-      }
-    }
+    jumpTo () {
+      console.log('双穿视屏');
+    },
+    showPop (data) {
+      this.show = true
+      this.describe = data
+    },
   },
   beforeRouteEnter (to, from, next) {
     from.meta.keepAlive = true
     next()
   },
-  mounted () { },
+  mounted () {
+  },
   watch: {}
 }
 </script>
 <style lang="scss" scoped>
+.content {
+  background: rgb(246, 246, 246);
+}
 .list_content {
-  padding: 10px;
+  padding: 14px 14px;
+
+  .col {
+    width: 48%;
+    padding: 10px;
+    background: #fff;
+    margin-bottom: 10px;
+    .label {
+      display: flex;
+      justify-content: space-between;
+      font-size: 12px;
+    }
+  }
+}
+#video {
+  width: 100%;
+  height: 150px;
 }
-::v-deep .van-cell-group {
-  margin: 10px 0;
+.uploadBtn {
+  transform: translateY(-16px) translatex(12px);
+  color: #fff;
+}
+.pop_content {
+  padding: 20px;
+  .item {
+    display: flex;
+    margin-bottom: 10px;
+    .label {
+      color: #127bff;
+    }
+    .value {
+      color: #444;
+    }
+  }
 }
 </style>
\ No newline at end of file

src/router/index.js

@@ -5,11 +5,17 @@ Vue.use(Router);
 const page = [
   {
     path: "/",
-    redirect: "/peopleList" //调试
+    redirect: "/login" //调试
+  },
+  {
+    path: "/login",
+    meta: { index: 1, keepAlive: false },
+    name: "login",
+    component: () => import("@/pages/login")
   },
   {
     path: "/peopleList",
-    meta: { index: 1, keepAlive: true },
+    meta: { index: 1, keepAlive: true, scrollTop: 0 },
     name: "peopleList",
     component: () => import("@/pages/peopleList")
   },
@@ -29,6 +35,12 @@ const router = new Router({
 });
 
 router.beforeEach((to, from, next) => {
+  if (from.meta.keepAlive) {
+    const $wrapper = document.querySelector(".list_content"); // 列表的外层容器 注意找到滚动的盒子
+    const scrollTop = $wrapper ? $wrapper.scrollTop : 0;
+    // console.log("scrollTop=", scrollTop);
+    from.meta.scrollTop = scrollTop;
+  }
   next();
 });
 // 解决编程式路由往同一地址跳转时会报错的情况