feat: 档案详情列表生成二维码

project/fengdu/AppOutSource/AppArchives/components/List.vue

@@ -2,7 +2,8 @@
   <div>
     <ai-list class="app-archives-list">
       <template slot="title">
-        <ai-title title="门店档案" isShowBottomBorder v-model="search.areaId" isShowArea :hideLevel="hideLevel - 1" @change="search.current = 1, getList()"></ai-title>
+        <ai-title title="门店档案" isShowBottomBorder v-model="search.areaId" isShowArea :hideLevel="hideLevel - 1"
+                  @change="search.current = 1, getList()"></ai-title>
       </template>
       <template slot="content">
         <ai-search-bar class="search-bar">
@@ -68,7 +69,8 @@
                        @success="getList()">
               <el-button icon="iconfont iconImport">导入</el-button>
             </ai-import>
-            <ai-download :instance="instance" url="/app/appintegraluser/girdIntegralExport" :params="search" fileName="门店档案"
+            <ai-download :instance="instance" url="/app/appintegraluser/girdIntegralExport" :params="search"
+                         fileName="门店档案"
                          :disabled="tableData.length == 0">
             </ai-download>
           </template>
@@ -112,12 +114,14 @@
     <ai-dialog title="二维码"
                :visible.sync="dialog"
                :destroyOnClose="true"
-                  width="720px"></ai-dialog>
+               width="720px">
+      <img :src="qrSrc" class="qr-img" alt="">
+    </ai-dialog>
   </div>
 </template>
 
 <script>
-import { MessageBox } from 'element-ui'
+import {MessageBox} from 'element-ui'
 import {mapState} from "vuex";
 
 export default {
@@ -127,10 +131,10 @@ export default {
     dict: Object
   },
 
-  data () {
+  data() {
     return {
       search: {
-        areaId:'',
+        areaId: '',
         current: 1,
         size: 10,
         applyItemId: '',
@@ -144,50 +148,51 @@ export default {
       total: 10,
       colConfigs: [
         {type: "selection"},
-        { slot: 'pic', align: 'center' },
-        { prop: 'shopName',  label: '门店名称', align: 'center' },
-        { prop: 'name',  label: '经营者姓名', align: 'center' },
-        { prop: 'phone',  label: '联系电话', align: 'center' },
-        { prop: 'createTime',  label: '录入时间', align: 'center' },
-        { prop: 'address',  label: '门店地址', align: 'center'},
-        { prop: 'operatorTypes',  label: '经营类型', align: 'center' },
-        {slot:'mark',align: 'center'}
+        {slot: 'pic', align: 'center'},
+        {prop: 'shopName', label: '门店名称', align: 'center'},
+        {prop: 'name', label: '经营者姓名', align: 'center'},
+        {prop: 'phone', label: '联系电话', align: 'center'},
+        {prop: 'createTime', label: '录入时间', align: 'center'},
+        {prop: 'address', label: '门店地址', align: 'center'},
+        {prop: 'operatorTypes', label: '经营类型', align: 'center'},
+        {slot: 'mark', align: 'center'}
       ],
       tableData: [],
       dateList: [],
-      dialog:false
+      dialog: false,
+      qrSrc: ''
     }
   },
 
 
-  computed:{
+  computed: {
     ...mapState(['user']),
 
-  hideLevel () {
+    hideLevel() {
       return this.user.info.areaList.length || 0
     },
   },
 
-  created () {
+  created() {
     this.search.areaId = this.user.info.areaId
-    this.$dict.load('yesOrNo','storeLevel','operatorType').then(() => {
+    this.$dict.load('yesOrNo', 'storeLevel', 'operatorType').then(() => {
       this.getList()
     })
   },
 
   methods: {
-    handleAdd(){
+    handleAdd() {
       this.$emit('change', {
         type: 'Add',
         params: {}
       })
     },
 
-    handleDelBatch(){
+    handleDelBatch() {
 
     },
 
-    onGridChange (e) {
+    onGridChange(e) {
       if (e.length) {
         this.search.girdId = e[0].id
         this.search.girdName = e[0].girdName
@@ -196,7 +201,7 @@ export default {
       }
     },
 
-    getList () {
+    getList() {
       this.instance.post(`/app/appshoparchives/list`, null, {
         params: {
           ...this.search
@@ -209,7 +214,7 @@ export default {
       })
     },
 
-    changeArea () {
+    changeArea() {
       this.search.current = 1
 
       this.$nextTick(() => {
@@ -217,7 +222,7 @@ export default {
       })
     },
 
-    push (id) {
+    push(id) {
       MessageBox.confirm('是否将精选内容对全体居民公开，选则否将只对本村/社区居民公开。', '推送精选', {
         distinguishCancelAndClose: true,
         confirmButtonText: '是',
@@ -243,7 +248,7 @@ export default {
       })
     },
 
-    remove (id) {
+    remove(id) {
       this.$confirm('确定删除该帖子？').then((e) => {
         this.instance.post(`/app/appintegraluserapply/delete?id=${id}`).then(res => {
           if (res.code == 0) {
@@ -254,7 +259,7 @@ export default {
       })
     },
 
-    toDetail ({id}) {
+    toDetail({id}) {
       this.$emit('change', {
         type: 'Detail',
         params: {
@@ -263,7 +268,7 @@ export default {
       })
     },
 
-    handleEdit({id}){
+    handleEdit({id}) {
       this.$emit('change', {
         type: 'Add',
         params: {
@@ -272,13 +277,26 @@ export default {
       })
     },
 
-    handleDelete({id}){
+    handleDelete({id}) {
       this.$confirm('确定删除该数据？').then(() => {
         console.log(id)
       })
     },
 
-    generateQr(row){
+    async generateQr({id}) {
+      try {
+        const {code, data} = await this.instance.post('/app/appshoparchives/generateQrCode', null, {
+          params: {
+            id
+          }
+        })
+        if (code === 0) {
+          this.dialog = true
+          this.qrSrc = data
+        }
+      } catch (e) {
+        console.error(e)
+      }
       this.dialog = true
     },
 
@@ -296,6 +314,9 @@ export default {
 
 <style lang="scss" scoped>
 .app-archives-list {
-
+  .qr-img {
+    width: 100%;
+    height: 100%;
+  }
 }
 </style>