love-nav-vue/src/components/home/NavList.vue

<template>
  <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">
        <div slot="error" class="image-slot">
          <img style="width: 30px" :src="require('@/assets/img/null.png')" alt="图标">
        </div>
      </el-image>
      <div class="content-card">

        <el-tooltip v-if="nav.name" class="item" effect="dark" :content="nav.name" placement="top">
          <span v-if="nav.name" class="content-title">{{ nav.name }}</span>
        </el-tooltip>
        <el-tooltip v-if="nav.desc" class="item" effect="dark" :content="nav.desc" placement="bottom">
          <span v-if="nav.desc" class="content-desc">{{ nav.desc.substr(0, 8) + '...' }}</span>
        </el-tooltip>
      </div>
      <el-tooltip class="item" effect="dark" content="详情" placement="right" @click="goToNavDetail()">
        <i style="margin-left: 3px" class="card-icon el-icon-d-arrow-right"></i>
      </el-tooltip>
    </div>
    <!--    <div class="app-card__subtext">{{nav.desc}}</div>-->
    <div class="dividing-line"></div>
    <div class="app-card-buttons">
      <el-tooltip v-if="nav.agentHint || copyright_info" class="item" effect="dark" :content="nav.agentHint || copyright_info" placement="bottom">
        <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>-->

        <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" style="width:150px"-->
<!--                                                           :src="getQR(nav.urlId)"/>-->
<!--          </div>-->
        </div>
        <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>
<script>

import axios from "axios";
import Vue from "vue";

export default {
  name: "NavList",
  props: {
    nav: Object
  },
  data() {
    return {
      imageCode: '',
      dialogVisible:false,
      copyright_info:null,
    }
  },
  mounted() {
this.getConfig('copyright_info');
  },
  created() {

  },
  computed: {},
  methods: {
    handleClose(){
      this.dialogVisible=false;
    },
    openShowQR(id){
      this.dialogVisible=true;
      this.getQR(id);
    },
    getQR(url_id) {
      let _this = this;
      if(url_id){
        axios({
          method: 'post',
          url: '/api/qrcode/qrc_return',
          params: {
            url_id: url_id,
          }
        }).then(function (res) {
          if (res.data!==''){
            _this.imageCode = "data:image/jpg;base64," + res.data;
          }


        }).catch((error) => {
          // Vue.prototype.$notify.error({
          //   title: '错误',
          //   message: error === null ? '' : error,
          //   offset: 0
          // });
        })
      }else{
        return false
      }

    },
    goToNavDetail() {
      if (this.nav.urlId) {
        let pathInfo = this.$router.resolve({
          path: '/nav',
          query: {
            uid: this.nav.urlId,
            refresh: true
          }
        })
        window.open(pathInfo.href, '_self');
      } else {
        return false;
      }
    },
    getConfig(name) {
      let _this = this;
      if (name) {
        axios({
          method: 'get',
          url: '/api/getConfig',
          params: {
            name: name
          }
        }).then(function (res) {
          if (res) {
            if (res.data.copyright_info) {
              _this.copyright_info = res.data.copyright_info.value;
            }

            //   if(res.data.light_bg){
            //     _this.light_bg=res.data.light_bg.value;
            //   }

          }

        }).catch((error) => {
        })
      } else {
        return false
      }
    },
  }
}
</script>
<style scoped>
.dividing-line {
  margin-top: 10px;
  border-bottom: 1px solid var(--border-color);
}

.content-card {
  display: flex;
  flex-direction: column;
}

.content-title {
  margin-left: 5px;
  font-size: 15px;
  font-weight: bold;
  width: 110px;
  height: 20px;
  overflow: hidden;
  white-space: nowrap;
  overflow-x: scroll;
  color: var(--theme-color);
  /*background-color: var(--theme-bg-color);*/
}

.content-desc {
  font-size: 13px;
  margin-left: 5px;
  width: 110px;
  color: #999ba5;
  height: 20px;
  margin-top: 5px;
  white-space: nowrap;
  overflow-x: scroll;
  /*background-color: var(--theme-bg-color);*/
}

.card-icon {
  font-size: 20px;
  font-weight: bold;
  color: var(--theme-color);
}

.card-icon:hover {
  color: #5ddcff;
}

.qr:hover {
  color: #5ddcff;
}
::v-deep .el-dialog {
  border-radius: 30px;
}
</style>