oil-station/fuintAdmin/src/views/EventMarketing/exchange/index.vue

<template>
  <div class="app-container">
    <el-card style="margin-bottom: 20px">
      <div style="width: 100%;display: flex;align-items: center;justify-content: space-between">
      <el-breadcrumb separator="/" style="margin-right: 35px">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/EventMarketing/CardHolder/index' }" >电子卡券管理</el-breadcrumb-item>
        <el-breadcrumb-item>电子兑换券</el-breadcrumb-item>
      </el-breadcrumb>
      <el-radio-group v-model="value">
        <el-radio-button label="1">兑换券</el-radio-button>
        <el-radio-button label="4">在线核销</el-radio-button>
      </el-radio-group>
      </div>
    </el-card>
    <cardExchange v-if="value == 1"></cardExchange>
    <cardExchangeRecord  v-if="value == 2"></cardExchangeRecord>
    <Writeoffrecords v-if="value == 3"></Writeoffrecords>
    <online v-if="value == 4"></online>
    <!-- 添加或修改兑换券对话框 -->


  </div>
</template>

<script>
  import QRCode from 'qrcodejs2'
  import {
    listExchange,
    getExchange,
    delExchange,
    addExchange,
    updateExchange
  } from '@/api/EventMarketing/cardExchange'
  import cardExchange from '../cardExchange/index'
  import cardExchangeRecord from '../cardExchangeRecord/index'
  import Writeoffrecords from '../Writeoffrecords/index'
  import  online from  '../online/index'
  export default {
    name: 'Exchange',
    data() {
     return{
       value:1
     }
    },
    created() {


    },
    components:{
      cardExchange,cardExchangeRecord,Writeoffrecords,online
    },
    methods: {
      qrcodelook(url) {
        this.loadingdialog = true
        this.centerDialogVisible = true
        setTimeout(() => {
          this.creatQrCode(url)
          this.loadingdialog = false
        }, 1000);

      },
      creatQrCode(url) {

          document.getElementById("qrCode").innerHTML = ""

          new QRCode(this.$refs.qrCodeUrl, {
            text: url, // 二维码的内容
            width: 300,
            height: 300,
            colorDark: '#000',
            colorLight: '#fff',
            correctLevel: QRCode.CorrectLevel.H
          })


      },

      /** 查询兑换券列表 */
      getList() {
        this.loading = true
        listExchange(this.queryParams).then(response => {
          this.exchangeList = response.data.records
          this.total = response.data.total
          this.loading = false
        })
      },
      // 取消按钮
      cancel() {
        this.open = false
        this.reset()
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          chainStorId: null,
          storeId: null,
          isonline: null,
          status: null,
          name: null,
          type: null,
          giftName: null,
          validity: null,
          useInstructions: null,
          qrCodeLink: null,
          count: null,
          outTime: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null
        }
        this.resetForm('form')
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm('queryForm')
        this.handleQuery()
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset()
        this.open = true
        this.title = '添加兑换券'
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset()
        this.form = row
        this.open = true
        this.title = '修改兑换券'
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateExchange(this.form).then(response => {
                this.$modal.msgSuccess('修改成功')
                this.open = false
                this.getList()
              })
            } else {
              addExchange(this.form).then(response => {
                this.$modal.msgSuccess('新增成功')
                this.open = false
                this.getList()
              })
            }
          }
        })
      },
      /** 下线操作 */
      handleXia(row) {
        let data = row
        data.isonline = 1
        updateExchange(data).then(res => {
          if (res.code == 200) {
            this.$message.success('下线成功')
          }
        })
      },
      /** 上线操作 */
      handleShang(row) {
        let data = row
        data.isonline = 0
        updateExchange(data).then(res => {
          if (res.code == 200) {
            this.$message.success('上线成功')
          }
        })
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('system/exchange/export', {
          ...this.queryParams
        }, `exchange_${new Date().getTime()}.xlsx`)
      }
    }
  }
</script>
<style scoped lang="scss">
  .qr-code{
    margin: 0px auto;
  }
</style>