t

package.json

@@ -22,6 +22,7 @@
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
+    "qrcode": "^1.5.3",
     "vue": "2.6.10",
     "vue-amap": "^0.5.10",
     "vue-cropper": "^0.5.6",

src/views/activity/components/popup/Qrcode.vue

@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <el-dialog
+      v-loading="loading"
+      :show-close="false"
+      :close-on-click-modal="false"
+      :visible.sync="isShow"
+      :title="'活动二维码'"
+      :fullscreen="false"
+      width="400px"
+      custom-class="xl-dialog"
+      center
+    >
+      <img :src="curImgUrl" class="scoped-img">
+      <base-form ref="ruleForm" :data="formData" :is-inline="false" label-width="100px">
+        <div slot="footer" style="padding-top: 20px;">
+          <el-button class="xl-form-btn t2" @click="close">关 闭</el-button>
+          <el-button class="xl-form-btn t1" @click="close('confirm')">下载</el-button>
+        </div>
+      </base-form>
+    </el-dialog>
+  </div>
+</template>
+<script>
+var QRCode = require('qrcode')
+export default {
+  components: { },
+  mixins,
+  props: {
+    isShow: Boolean,
+    curObj: Object
+  },
+  inject: ['parentData'],
+  data() {
+    return {
+      formData: [],
+      loading: true,
+      curImgUrl: '',
+    }
+  },
+  watch: {
+    isShow: function(val) {
+      if (val) {
+        const that = this
+        QRCode.toDataURL(that.curObj.code, function (err, url) {
+          that.curImgUrl = url
+        })
+      }
+    },
+  },
+  methods: {
+    getDef() {
+      let params = { ...this.curObj }
+      this.formData = [
+      ]
+      this.setDefaultValue(params)
+    },
+    close(str) {
+      if (str === 'confirm') {
+        const cObj = this.curObj
+        let Link = document.createElement("a")
+        Link.download = `${cObj.estate_name}${cObj.remark}-活动签到二维码`
+        Link.href = this.curImgUrl
+        Link.click()
+        Link.remove()
+      } else {
+        this.$emit('close')
+        this.setDefaultValue()
+      }
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../../../../styles/libEdit.scss';
+.lib-edit {
+  padding-top: 0;
+  ::v-deep .el-form-item {
+    margin-bottom: 10px;
+  }
+  ::v-deep .el-date-editor.el-input {
+    width: 100%;
+  }
+}
+::v-deep .img-upload {
+  height: 40px;
+  overflow: hidden;
+  .el-upload {
+    height: 35px;
+  }
+  .icon {
+    width: 110px;
+    height: 35px;
+    line-height: 35px;
+    font-size: 20px;
+  }
+  .img {
+    width: 110px;
+    height: 35px;
+  }
+}
+
+
+
+.scoped-img {
+  width: 360px;
+  height: 360px;
+}
+
+</style>

src/views/activity/index.vue

@@ -21,18 +21,25 @@
       :curObj="curObj"
       @close="closePopup"
     />
+    <cur-qrcode
+      :isShow="isQrcodeShow"
+      :curObj="curObj"
+      @close="closeQrcodePopup"
+    />
   </div>
 </template>
 <script>
 import { arrToObj } from '@/utils'
 import SearchForm from './components/searchForm/Index'
 import PopupEdit from './components/popup/IndexEdit'
+import CurQrcode from './components/popup/Qrcode'
 import baseTable from '_m/baseTable.js'
 export default {
   name: 'index',
   components: {
     SearchForm,
     PopupEdit,
+    CurQrcode,
   },
   provide() {
     return {
@@ -42,6 +49,7 @@ export default {
   mixins: [baseTable],
   data() {
     return {
+      isQrcodeShow: false,
       apiStr: 'other.admactivitylist',
       searchForm: null,
       isDtlShow: false,
@@ -67,6 +75,7 @@ export default {
           [
             { label: '统计', func: this.linkDtl, btnType: 'success' },
             { label: '编辑', func: this.openPopup, btnType: 'primary' },
+            { label: '二维码', func: this.openQrcodePopup, btnType: 'info' },
             { label: '删除', func: this.delHandle, btnType: 'danger' },
           ]
         }
@@ -100,6 +109,20 @@ export default {
       if (obj) {
         this.fetchData() 
       }
+    },
+    openQrcodePopup(row) {
+      if (row && row.code) {
+        this.curObj = row
+        this.isQrcodeShow = true
+      } else {
+        this.$msg('未找到二维码')
+      }
+    },
+    closeQrcodePopup(obj) {
+      this.isQrcodeShow = false
+      if (obj) {
+        this.fetchData() 
+      }
     }
   }
 }