基本页面

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>
+.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/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"
+        <van-row
+          type="flex"
+          justify="space-between"
+        >
+          <van-col
+            v-for="(item,index) in videoList"
             :key="index"
+            class="col"
           >
-          <van-cell
-            center
-            :title="item.name"
-            :label="item.address"
-            is-link
-            @click="jumpTo(index)"
+            <!-- 视频 -->
+            <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"
             >
-            <template #icon>
-              456
-            </template>
-          </van-cell>
-        </van-cell-group>
+              <!-- :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: '门诊预约',
-          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天'
           }
-      ]
+        },
+        {
+          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');
+        {
+          name: '视频',
+          url: 'https://docs.egret.com/engine/img/engine2d.mp4',
+          time: '2022-01-04',
+          describe: {
+            date: '2022-01-08',
+            see: '大肿瘤',
+            result: '倒计时20天'
           }
-        })
-
         }
+      ],
+
     }
   },
+  methods: {
+    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: 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();
 });
 // 解决编程式路由往同一地址跳转时会报错的情况