小程序二维码预览

src/icons/svg/icon-minprogram.svg

@@ -0,0 +1 @@
+<svg t="1663569990742" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2380" width="200" height="200"><path d="M402.2 734.6c-71.9 0-130.4-54.1-130.4-121 0-20.8 6-41.2 16.9-59.5 16.4-26.8 42.7-46.6 74.4-56 8.4-2.5 14.9-3.5 20.8-3.5 13.9 0 24.8 10.9 24.8 24.8s-10.9 24.8-24.8 24.8c-1 0-3 0-5.5 1-21.3 6-38.2 18.4-47.6 34.7-6.5 10.4-9.4 21.8-9.4 33.7 0 39.2 36.2 71.4 80.4 71.4 15.4 0 30.3-4 43.7-11.4 23.3-13.4 37.2-35.7 37.2-60V405.7c0-42.2 23.3-80.8 62-102.7 20.8-11.9 44.1-17.9 68-17.9 71.9 0 130.4 54.1 130.4 121 0 20.8-6 41.2-16.9 59.5-16.4 26.8-42.7 46.6-74.4 56-8.9 2.5-14.9 3.5-20.8 3.5-13.9 0-24.8-10.9-24.8-24.8s10.9-24.8 24.8-24.8c1 0 3 0 5.5-1 21.3-6.4 38.2-18.9 47.6-34.7 6.4-10.4 9.4-21.8 9.4-33.7 0-39.2-36.2-71.4-80.8-71.4-15.4 0-30.3 4-43.7 11.4-23.3 13.4-37.2 35.7-37.2 60v207.3c0 42.2-23.3 80.9-62 102.7-20.5 12.5-43.8 18.5-67.6 18.5z m504.4-223.2c0-219.2-177.6-396.8-396.8-396.8S113 292.1 113 511.4s177.6 396.8 396.8 396.8 396.8-177.6 396.8-396.8z m49.6 0c0 246.5-199.9 446.4-446.4 446.4-246.5 0-446.4-199.9-446.4-446.4C63.4 264.9 263.3 65 509.8 65c246.5 0 446.4 199.9 446.4 446.4z m0 0" p-id="2381"></path></svg>

src/views/main-navbar-update-password.vue

@@ -17,7 +17,7 @@
         <el-input type="password" v-model="dataForm.confirmPassword"></el-input>
       </el-form-item>
     </el-form>
-    <span slot="footer" class="dialog-footer">
+    <span slot="footer">
       <el-button @click="visible = false">取消</el-button>
       <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
     </span>
@@ -28,7 +28,7 @@
   import { clearLoginInfo } from '@/utils'
   export default {
     data () {
-      var validateConfirmPassword = (rule, value, callback) => {
+      const validateConfirmPassword = (rule, value, callback) => {
         if (this.dataForm.newPassword !== value) {
           callback(new Error('确认密码与新密码不一致'))
         } else {

src/views/main-navbar.vue

@@ -31,6 +31,13 @@
             </el-badge>
           </template>
         </el-menu-item>
+        <el-menu-item index="2" @click="previewPic">
+          <template slot="title">
+            <el-badge value="">
+              <icon-svg name="minprogram" class="el-icon-setting"></icon-svg>
+            </el-badge>
+          </template>
+        </el-menu-item>
         <el-menu-item class="site-navbar__avatar" index="3">
           <el-dropdown :show-timeout="0" placement="bottom">
             <span class="el-dropdown-link">
@@ -47,6 +54,7 @@
     <!-- 弹窗, 修改密码 -->
     <update-password v-if="updatePasswordVisible" ref="updatePassowrd"></update-password>
     <Msg ref="msgDialog" @noticeAdded="noticeAdded"/>
+    <youli-component v-if="previewVisible" ref="preview"/>
   </nav>
 </template>
 
@@ -54,14 +62,19 @@
   import UpdatePassword from './main-navbar-update-password'
   import Msg from './common/msg'
   import { clearLoginInfo } from '@/utils'
-  export default {
+  import PreviewComponent from '@/views/modules/common/preview-component'
+  import YouliComponent from '@/views/modules/common/youli-component'
+export default {
     data () {
       return {
         updatePasswordVisible: false,
-        cnt: 0
+        cnt: 0,
+        previewVisible: false
       }
     },
     components: {
+      YouliComponent,
+      PreviewComponent,
       UpdatePassword,
       Msg
     },
@@ -113,6 +126,13 @@
       // 通知数量变化
       noticeAdded (num) {
         this.cnt = num
+      },
+      // 小程序图片预览
+      previewPic () {
+        this.previewVisible = true
+        this.$nextTick(() => {
+          this.$refs.preview.init()
+        })
       }
     }
   }

src/views/modules/common/youli-component.vue

@@ -0,0 +1,28 @@
+<template>
+    <section>
+      <!-- 图片预览 -->
+      <el-dialog title="图片预览" :append-to-body="true" :visible.sync="previewVisible" width="20%">
+        <img class="my-img" src="../../../assets/img/youli.jpg" alt="none" style="width:100%;height:100%"/>
+      </el-dialog>
+    </section>
+</template>
+
+<script>
+export default {
+  name: 'youli-component',
+  data () {
+    return {
+      previewVisible: false
+    }
+  },
+  methods: {
+    init () {
+      this.previewVisible = true
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>