yunxing 4 rokov pred
rodič
commit
2b2fe153e9
8 zmenil súbory, kde vykonal 144 pridanie a 13 odobranie
  1. 1 1
      .env.aly
  2. 1 1
      .env.production
  3. 1 1
      .env.test
  4. 10 1
      src/App.vue
  5. BIN
      src/assets/images/test.png
  6. 81 0
      src/components/ImagePreview.vue
  7. 1 1
      src/main.ts
  8. 49 8
      src/views/Overview.vue

+ 1 - 1
.env.aly

@@ -1,2 +1,2 @@
-NODE_ENV=production //表明这是生产环境(需要打包,否者打包后,没有开启代码拆分)
+NODE_ENV=production
 VUE_APP_RealEnv=aly

+ 1 - 1
.env.production

@@ -1,2 +1,2 @@
-NODE_ENV=production //表明这是生产环境(需要打包,否者打包后,没有开启代码拆分)
+NODE_ENV=production
 VUE_APP_RealEnv=production

+ 1 - 1
.env.test

@@ -1,2 +1,2 @@
-NODE_ENV=production //表明这是生产环境(需要打包,否者打包后,没有开启代码拆分)
+NODE_ENV=production
 VUE_APP_RealEnv=test

+ 10 - 1
src/App.vue

@@ -3,12 +3,14 @@
     <div id='app' :class='isIOS?"ios-padding":""'>
         <!-- 顶部navbar -->
         <NarBar class='nav-bar' />
+        <!-- <div class='container'> -->
         <keep-alive>
             <router-view v-if='$route.meta.keepAlive' />
         </keep-alive>
         <router-view v-if='!$route.meta.keepAlive' />
+        <!-- </div> -->
         <!-- 底部tabbar -->
-        <van-tabbar v-show='$route.meta.showTabbar' v-model='active' @change='changeTabbar'>
+        <van-tabbar v-show='$route.meta.showTabbar' class='tabber' v-model='active' :fixed='true' @change='changeTabbar'>
             <van-tabbar-item icon='home-o'>项目概况</van-tabbar-item>
             <van-tabbar-item icon='search'>楼层功能</van-tabbar-item>
             <van-tabbar-item icon='friends-o'>设备设施</van-tabbar-item>
@@ -82,4 +84,11 @@ export default {
     width: 100%;
     height: 50px;
 }
+// .container {
+//     height: calc(100% - 105px);
+//     background-color: #aaa;
+// }
+// .tabber {
+//     height: 55px;
+// }
 </style>

BIN
src/assets/images/test.png


+ 81 - 0
src/components/ImagePreview.vue

@@ -0,0 +1,81 @@
+<template>
+    <div class='m-image-preview' v-show='show'>
+        <van-image-preview
+            :show-index='false'
+            class='img-preview'
+            v-model='show'
+            :images='imgList'
+            :show-indicators='true'
+            @close='close'
+            @change='onChange'
+        ></van-image-preview>
+        <span class='direction' @click='changeOri'>横竖屏切换</span>
+    </div>
+</template> 
+<script>
+/**
+ * @description 图片预览组件
+ *
+ */
+import Vue from 'vue'
+import { ImagePreview } from 'vant'
+Vue.use(ImagePreview)
+export default {
+    name: 'ImagePreview',
+    props: {
+        visible: {
+            type: Boolean,
+            default: false,
+        },
+        imgList: {
+            type: Array,
+            default: () => {
+                return []
+            },
+        },
+    },
+    watch: {
+        visible(val) {
+            this.show = val
+        },
+    },
+    data() {
+        return {
+            currentIndex: 1,
+            direction: false,
+            show: false,
+        }
+    },
+    components: {},
+    beforeMount() {},
+    mounted() {},
+    methods: {
+        onChange(index) {
+            this.currentIndex = index + 1
+        },
+        changeOri() {
+            this.direction = !this.direction
+            console.log(this.direction)
+        },
+        close() {
+            this.$emit('update:visible', false)
+        },
+    },
+}
+</script>
+<style lang='less' scoped>
+.m-image-preview {
+    .direction {
+        display: inline-block;
+        position: fixed;
+        z-index: 3000;
+        height: 30px;
+        line-height: 30px;
+        width: 80px;
+        bottom: 50px;
+        right: 50px;
+        background-color: #fff;
+        text-align: center;
+    }
+}
+</style>

+ 1 - 1
src/main.ts

@@ -15,7 +15,7 @@ Vue.config.productionTip = false
 
 import VConsole from 'vconsole'
 // 开发环境引入 vConsole调试工具
-if (process.env.NODE_ENV === 'production') {
+if (process.env.NODE_ENV === 'production' && process.env.VUE_APP_RealEnv !== 'production') {
     new VConsole()
 }
 new Vue({

+ 49 - 8
src/views/Overview.vue

@@ -1,20 +1,36 @@
 <template>
     <div class='overview'>
-        <p>Overview</p>
-        <van-button @click='handleClick' type='primary'>测试</van-button>
+        <p class='test'>Overview</p>
+        <van-button @click='openPreview' type='primary'>测试</van-button>
+        <ImagePreview1 :visible.sync='showImgPreview' :imgList='imgList' />
     </div>
 </template>
 <script>
 import Vue from 'vue'
-import { Button } from 'vant'
-Vue.use(Button)
+import { Button, ImagePreview } from 'vant'
+Vue.use(Button).use(ImagePreview)
+import ImagePreview1 from '../components/ImagePreview'
 export default {
     name: 'Overview',
     props: {},
+    components: { ImagePreview1 },
     data() {
-        return {}
+        return {
+            showImgPreview: false,
+            imgList: [
+                'https://img.yzcdn.cn/vant/apple-1.jpg',
+                'https://img.yzcdn.cn/vant/apple-2.jpg',
+                'https://img.yzcdn.cn/vant/apple-1.jpg',
+                'https://img.yzcdn.cn/vant/apple-2.jpg',
+            ],
+        }
+    },
+    watch: {
+        showImgPreview(val) {
+            console.log('========')
+            console.log(val)
+        },
     },
-    components: {},
     beforeMount() {},
     mounted() {
         console.log('项目概况页面mounted')
@@ -23,8 +39,18 @@ export default {
         // debugger
     },
     methods: {
-        handleClick(e) {
-            console.log(e)
+        openPreview() {
+            this.showImgPreview = true
+            this.imgList = [
+                'https://img.yzcdn.cn/vant/apple-1.jpg',
+                'https://img.yzcdn.cn/vant/apple-2.jpg',
+                'https://img.yzcdn.cn/vant/apple-1.jpg',
+                'https://img.yzcdn.cn/vant/apple-2.jpg',
+                'https://img.yzcdn.cn/vant/apple-1.jpg',
+                'https://img.yzcdn.cn/vant/apple-2.jpg',
+                'https://img.yzcdn.cn/vant/apple-1.jpg',
+                'https://img.yzcdn.cn/vant/apple-2.jpg',
+            ].slice(0, parseInt(Math.random() * 8 + 1))
         },
     },
 }
@@ -34,5 +60,20 @@ export default {
     width: 100%;
     height: calc(100% - 50px);
     // background-color: #87cefa;
+    .img-preview {
+        width: 100%;
+    }
+}
+
+@media screen and (orientation: portrait) {
+    .test {
+        color: lightcoral;
+    }
+}
+
+@media screen and (orientation: landscape) {
+    .test {
+        color: lightgreen;
+    }
 }
 </style>