活动核销

.env.development

@@ -2,7 +2,7 @@
 ENV = 'development'
 
 # base api
-VUE_APP_BASE_API = https://yybtest.ali251.langye.net/
+VUE_APP_BASE_API = https://yunyubang.ali251.langye.net/
 #VUE_APP_BASE_API = https://yunyubang.ali251.langye.net/
 #VUE_APP_BASE_DEV_API = https://yunyubang.ali251.langye.net/
 

src/views/activity/activityList.vue

@@ -26,10 +26,11 @@
       @pageIndexChange="pageChange"
       :table-item="table">
       <template v-slot:btns>
-        <el-table-column fixed="right" label="操作" width="260" header-align="center">
+        <el-table-column fixed="right" label="操作" width="320" header-align="center">
           <template slot-scope="scope">
             <Button type="primary" size="small" @click="editorActivity(scope.row.id,'editor')">编辑</Button>
              <Button style="margin-left: 10px;" type="primary" size="small" @click="checkActivity(scope.row.id)">审核</Button>
+             <Button type="primary" size="small" style="margin-left: 10px;" @click="codeActivity(scope.row.id)">二维码</Button>
             <Button type="primary" size="small" style="margin-left: 10px;" @click="editorActivity(scope.row.id,'copy')">复制新增</Button>
             <Poptip
               transfer
@@ -46,6 +47,8 @@
 
     <addActivity ref="addActivity" @refresh="getActivities"></addActivity>
     <checkActivity ref="checkActivity" @refresh="getActivities"></checkActivity>
+
+    <codeActivity ref="codeActivity"></codeActivity>
     <showActiveOrder :id="activeId" :name="activeName" :state='state' :is-show.sync="isShowOrder"></showActiveOrder>
   </div>
 </template>
@@ -55,13 +58,16 @@ import {index,destroy} from "@/api/activity"
 import {index as getTypes} from "@/api/activityType"
 import addActivity from '@/views/activity/component/addActivity'
 import checkActivity from '@/views/activity/component/checkActivity'
+import codeActivity from '@/views/activity/component/codeActivity'
+
 import showActiveOrder from '@/views/activity/component/showActiveOrder'
 import { Message } from 'element-ui'
 export default {
   components:{
     addActivity,
     showActiveOrder,
-    checkActivity
+    checkActivity,
+    codeActivity
   },
   data() {
     return {
@@ -417,6 +423,11 @@ export default {
       this.$refs['checkActivity'].id = id
       // this.$refs['addActivity'].type = type
       this.$refs['checkActivity'].isShow = true
+    },
+    codeActivity(id){
+      this.$refs['codeActivity'].id = id
+      // this.$refs['addActivity'].type = type
+      this.$refs['codeActivity'].isShow = true
     }
   },
   mounted() {

src/views/activity/component/codeActivity.vue

@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <xy-dialog ref="dialog" :is-show.sync="isShow" type="normal" :title="'核销二维码'">
+      <template v-slot:default>
+        <div style="display: flex;justify-content: center;flex-wrap: wrap;">
+          <img style="width: 150px;height: 150px;margin: 0 auto;display: inline-block;" :src="qrcode" alt="">
+          <div style="width: 100%;text-align: center;margin-top: 20px;">
+            <el-button
+                    type="primary"
+                    icon="el-icon-download"
+                    class="btn-qr"
+                    @click="downloadQR"
+                    >下载二维码</el-button
+                  >
+          </div>
+
+        </div>
+      </template>
+
+    </xy-dialog>
+  </div>
+</template>
+
+<script>
+import {show,save} from "@/api/activity"
+
+export default {
+  components:{
+  },
+  data() {
+    return {
+      isShow:false,
+      id:'',
+      qrcode:'',
+      active_name:''
+    }
+  },
+  created(){
+  },
+  methods: {
+    async getDetail(){
+      const res = await show({id:this.id})
+      this.qrcode = res.qrcode
+      this.active_name = res.active_name
+    },
+    downloadQR() {
+      if (!this.qrcode) return;
+      // 直接下载图片
+      const link = document.createElement("a");
+      link.href = this.qrImgUrl;
+      const fileName =`${this.active_name}-签到二维码.png`
+      link.download = fileName;
+      link.target = "_blank";
+      link.click();
+      link.remove(); // 清理临时元素
+    },
+  },
+  watch:{
+    isShow(newVal){
+      if(newVal){
+        this.getDetail()
+      }else{
+        this.id = ''
+        this.qrcode = ""
+        this.active_name = ""
+        this.$refs['dialog'].reset()
+      }
+    }
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+.xy-table-item-label{
+  width: 160px;
+}
+.img__delete{
+  transform: scale(0.8,0.8);
+
+  position: absolute;
+  top: 4px;
+  right: 4px;
+}
+::v-deep .avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+::v-deep .avatar-uploader .el-upload:hover {
+  border-color: #409EFF;
+}
+::v-deep .el-upload--picture-card {
+  font-size: 28px;
+  color: #8c939d;
+  width: 80px !important;
+  height: 80px !important;
+  line-height: 80px !important;
+  text-align: center;
+}
+::v-deep .avatar-uploader-icon{
+  font-size: 28px;
+  color: #8c939d;
+  width: 80px !important;
+  height: 80px !important;
+  line-height: 80px !important;
+  text-align: center;
+}
+::v-deep .avatar {
+  width: 80px !important;
+  display: block;
+  border-radius: 6px;
+}
+
+::v-deep .xy-table-item-label{
+  width: 160px !important;
+}
+
+::v-deep .el-date-editor .el-range-separator{
+  width: auto !important;
+}
+
+::v-deep .el-input-number .el-input__inner{
+  text-align: left !important;
+}
+  .searchCompanys{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom:16px;
+    .el-input{
+      width:80%
+    }
+  }
+</style>