update

src/components/home/NavList.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="app-card" @click="goToNavDetail">
-    <div style="display: flex;flex-direction: row;align-items: center">
+  <div class="app-card" >
+    <div style="display: flex;flex-direction: row;align-items: center" @click="goToNavDetail">
       <el-image v-if="nav.icon" :src="nav.icon" style="width: 30px;height: 30px"></el-image>
       <div class="content-card">
 
@@ -22,17 +22,29 @@
         <i v-show="nav.isNeedAgent===1" style="color: red" class="qr el-icon-info"></i>
       </el-tooltip>
       <!--      <button class="content-button status-button"><i class="el-icon-d-arrow-right"></i>详情</button>-->
-      <el-tooltip placement="bottom" width="150"
-                  trigger="hover"
-                  effect="dark" close-delay="2000">
+
         <div class="MyPopover" slot="content">
-          <span style="font-size:12px !important;">【{{ nav.name }}】手机二维码</span><br/><br/>
-          <div style="width:100% ;text-align: center"><img v-if="nav.urlId && nav.icon" style="width:150px"
-                                                           :src="getQR(nav.urlId,nav.icon)"/>
-          </div>
+<!--          <span style="font-size:12px !important;">【{{ nav.name }}】手机二维码</span><br/><br/>-->
+<!--          <div style="width:100% ;text-align: center"><img v-if="nav.urlId" style="width:150px"-->
+<!--                                                           :src="getQR(nav.urlId)"/>-->
+<!--          </div>-->
         </div>
-        <i class="qr el-icon-s-grid"></i>
-      </el-tooltip>
+        <i @click="openShowQR(nav.urlId)" class="qr el-icon-s-grid"></i>
+      <el-dialog
+          :title="'【'+nav.name+'】'+'手机二维码'"
+          :visible.sync="dialogVisible"
+          :show-close="true"
+          append-to-body
+          center
+          width="25%"
+          :before-close="handleClose">
+
+
+        <div style="width:100% ;text-align: center">
+          <img v-if="imageCode!==''" style="width:250px" :src="imageCode"/>
+        </div>
+
+      </el-dialog>
     </div>
   </div>
 </template>
@@ -49,6 +61,7 @@ export default {
   data() {
     return {
       imageCode: '',
+      dialogVisible:false,
     }
   },
   mounted() {
@@ -59,29 +72,35 @@ export default {
   },
   computed: {},
   methods: {
-    getQR(url_id, icon_url) {
+    handleClose(){
+      this.dialogVisible=false;
+    },
+    openShowQR(id){
+      this.dialogVisible=true;
+      this.getQR(id);
+    },
+    getQR(url_id) {
       let _this = this;
-      if(url_id && icon_url){
+      if(url_id){
         axios({
           method: 'post',
           url: '/api/qrcode/qrc_return',
-          data: {
+          params: {
             url_id: url_id,
-            icon_url: icon_url
           }
         }).then(function (res) {
-          if (res.data) {
+          if (res.data!==''){
             _this.imageCode = "data:image/jpg;base64," + res.data;
           }
-          return false;
+
+
         }).catch((error) => {
-          Vue.prototype.$notify.error({
-            title: '错误',
-            message: error === null ? '' : error,
-            offset: 0
-          });
+          // Vue.prototype.$notify.error({
+          //   title: '错误',
+          //   message: error === null ? '' : error,
+          //   offset: 0
+          // });
         })
-        return this.imageCode
       }else{
         return false
       }