client-mazu/src/pages/member/memberTradeLog.vue

<template>
  <div class="form-wrap">
    <el-form
      class="search-box"
      ref="form"
      :model="form"
      :inline="true"
      label-width="140px"
    >
      <div class="block-title">
        查询条件
      </div>
      <el-form-item
        label="会员ID"
        prop="keyWords8">
        <el-input v-model="form.keyWords8"></el-input>
      </el-form-item>
      <el-form-item
        label="交易类型"
        prop="keyWords1"
      >
        <el-select
          v-model="form.keyWords1"
          placeholder="请选择"
        >
          <el-option
            v-for="item in memberTradeTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="操作员"
        prop="keyWords2"
      >
        <el-input v-model="form.keyWords2"></el-input>
      </el-form-item>
      <el-form-item
        label="会员名字"
        prop="keyWords3"
      >
        <el-input v-model="form.keyWords3"></el-input>
      </el-form-item>

      <el-form-item
        label="IC卡号"
        prop="keyWords4">
        <ReaderInput
          type="IC"
          v-model="form.keyWords4"></ReaderInput>
      </el-form-item>

      <el-form-item
        label="身份证号"
        prop="keyWords5">
        <ReaderInput
          type="ID"
          v-model="form.keyWords5"></ReaderInput>
      </el-form-item>

      <el-form-item
        label="会员类型"
        prop="keyWords6"
      >
        <el-select
          v-model="form.keyWords6"
          placeholder="请选择"
        >
          <el-option
            label="全部"
            value=""
          >
          </el-option>
          <el-option
            v-for="item in memberTypeList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="起始时间"
        prop="startDate"
      >
        <el-date-picker
          v-model="form.startDate"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        label="截止时间"
        prop="endDate"
      >
        <el-date-picker
          v-model="form.endDate"
          type="datetime"
          default-time="23:59:59"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        label="银行交易流水号"
        prop="keyWords17"
        label-width="180px"
      >
        <el-input v-model="form.keyWords17"></el-input>
      </el-form-item>
      <el-form-item
        label="支付方式"
        prop="keyWords10">
        <el-select v-model="form.keyWords10">
          <el-option
            v-for="item in payChannelOptions"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>

      <div class="btn-wrap">
        <el-button @click="exportStatist">
          导出
        </el-button>
        <el-button
          @click="reset"
        >
          重置
        </el-button>
        <el-button
          type="primary"
          @click="getList"
        >
          搜索
        </el-button>
      </div>
    </el-form>

    <div class="table-box">
      <div class="block-title">
        会员卡列表
      </div>
      <el-table
        border
        stripe
        v-loading="loading"
        :data="tableData">
        <el-table-column type="expand">
          <template slot-scope="props">
            <div
              class="block-title"
              v-if="props.row.upgrade_info">
              升级信息
            </div>
            <el-form
              inline
              v-if="props.row.upgrade_info"
              class="table-expand">
              <!-- <el-form-item label="原卡ID">
                <span>{{ props.row.upgrade_info.old_memberTypeId }}</span>
              </el-form-item> -->
              <el-form-item label="原会员卡类型">
                <span>{{ props.row.upgrade_info.oldMemberTypeName }}</span>
              </el-form-item>
              <el-form-item label="订单号">
                <span>{{ props.row.upgrade_info.orderNo }}</span>
              </el-form-item>
              <el-form-item label="票号">
                <span>{{ props.row.upgrade_info.ticketNo }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          prop="iccardNo"
          label="IC卡号"
        >
        </el-table-column>
        <el-table-column
          prop="number"
          label="数量"
        >
        </el-table-column>
        <el-table-column
          prop="category"
          label="会员大类"
        >
          <template slot-scope="prop">
            {{ prop.row.category | memberCategory }}
          </template>
        </el-table-column>
        <el-table-column
          prop="memberTypeName"
          label="会员类型"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
        >
        </el-table-column>
        <el-table-column
          width="100"
          prop="address"
          label="地址"
        >
          <template slot-scope="prop">
            <Ellipsis
              type="tooltips"
              :content="prop.row.address"
              :length="10"></Ellipsis>
          </template>
        </el-table-column>
        <el-table-column
          label="交易天数"
          width="120"
          prop="recharge_day_time">
        </el-table-column>
        <el-table-column
          label="交易类型"
        >
          <template slot-scope="prop">
            {{ prop.row.trade_type | tradeType }}
          </template>
        </el-table-column>
        <el-table-column
          label="支付方式"
          width="120"
          prop="payChannel">
        </el-table-column>

        <el-table-column
          width="180"
          prop="idcardNo"
          label="身份证号"
        >
          <template slot-scope="scope">
            {{ isPapersIdDesensitize ? $options.filters.formatIDCard(scope.row.idcardNo) : scope.row.idcardNo }}
          </template>
        </el-table-column>
        <el-table-column
          prop="payChannel"
          label="支付方式"
        >
        </el-table-column>
        <el-table-column
          prop="pay_status"
          label="支付状态"
        >
          <template slot-scope="prop">
            <el-tag
              :type="getPayStatus(prop.row.pay_status,'type')"
              size="normal"
            >
              {{ getPayStatus(prop.row.pay_status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="total_money"
          label="交易金额"
        >
        </el-table-column>
        <el-table-column
          prop="creator"
          label="操作员"
        >
        </el-table-column>
        <el-table-column
          width="160"
          label="交易时间"
        >
          <template slot-scope="prop">
            {{ prop.row.trade_time | formatTime }}
          </template>
        </el-table-column>
        <el-table-column
          label="已开发票"
          width="120"
          prop="is_invoice_picked">
          <template slot-scope="scope">
            <el-tag :type="scope.row.is_invoice_picked?'success':'info'">
              {{ scope.row.is_invoice_picked?'是':'否' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          width="160"
          label="操作"
        >
          <template slot-scope="prop">
            <el-link
              v-if="(scenicName==='狼山景区'||scenicName==='军山景区')&&(prop.row.payChannel==='POS支付'||prop.row.payChannel==='中行支付')&&(prop.row.pay_status==='WAIT_PAY')"
              type="primary"
              @click="confirmPOS(prop.row)">
              确认POS支付
            </el-link>

            <el-link
              type="primary"
              v-if="!prop.row.is_invoice_picked"
              @click="showPickInvoice(prop.row)">
              开票
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page.sync="form.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="form.pageSize"
        @size-change="handleSizeChange"
        @current-change="getList()"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog
      title="开票"
      :visible.sync="visible"
      width="500px"
      @close="visible=false">
      <el-form
        class="search-box"
        ref="formEl"
        :model="formEl"
        :inline="true"
        label-width="100px"
        style="background: transparent"
      >
        <el-form-item
          verify
          label="开票方式"
          prop="invoiceType"
        >
          <el-radio
            v-model="formEl.invoiceType"
            :label="1">
            扫码开票
          </el-radio>
          <el-radio
            v-model="formEl.invoiceType"
            :label="0">
            普通开票
          </el-radio>
        </el-form-item>
        <el-form-item
          v-if="!formEl.invoiceType"
          verify
          label="购买方"
          prop="invoiceBuyer"
        >
          <el-input
            v-model="formEl.invoiceBuyer"
            style="width:100%"></el-input>
        </el-form-item>
        <el-form-item
          v-if="!formEl.invoiceType"
          label="纳税⼈识别号"
          prop="invoiceBuyerTaxNum "
        >
          <el-input
            v-model="formEl.invoiceBuyerTaxNum"
            style="width:100%"></el-input>
        </el-form-item>
        <el-form-item
          v-if="!formEl.invoiceType"
          label="纳税⼈手机号"
          prop="invoiceBuyerPhone "
        >
          <el-input
            v-model="formEl.invoiceBuyerPhone"
            style="width:100%"></el-input>
        </el-form-item>
        <el-form-item
          v-if="!formEl.invoiceType"
          label="纳税⼈邮箱"
          prop="invoiceBuyerEmail "
        >
          <el-input
            v-model="formEl.invoiceBuyerEmail"
            style="width:100%"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button
          type="primary"
          @click="submitPickInvoice">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ReaderInput from '@/components/ReaderInput'
import { memberTradeTypeList } from '@/assets/staticData'
import { getMemberType, getMemberTradeList, pickInvoice } from '@/api/member'
import { exportMemberTradeList } from '@/api/queryReport'
import moment from 'moment'
import { getPayStatus } from '@/utils/index'
import { payPOS } from '@/api/pay'
import { getSelf } from '@/api/systemSetting/account'

const Store = require('electron-store')
const localStore = new Store()

export default {
  name: 'memberTradeLog',
  components: {
    ReaderInput
  },
  data () {
    return {
      comName: '',
      memberTradeTypeList,
      memberTypeList: [],
      form: {
        startDate: new Date(moment().startOf('day').valueOf()), // 销售起始时间
        endDate: new Date(moment().endOf('day').valueOf()), // 销售截止时间
        keyWords1: '', // 交易类型 1销售 2充值 3结算 4补卡
        keyWords2: '', // 创建人
        keyWords3: '', // 会员名字
        keyWords4: '', // ic卡号
        keyWords5: '', // 身份证号
        keyWords6: '', // 会员类型id
        keyWords8: '', // 会员类型id
        keyWords10: '', // 支付方式
        keyWords17: '', // 银行交易流水号
        orderByKeyWords: '',
        orderString: '',
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      total: 0,
      loading: false,
      invoiceType: 0,
      formEl: {
        invoiceType: 1,
        invoiceBuyer: '',
        invoiceBuyerTaxNum: '',
        invoiceBuyerPhone: '',
        invoiceBuyerEmail: ''
      },
      currentOrder: {},
      visible: false
    }
  },
  computed: {
    isPapersIdDesensitize () {
      const value = this.$store.state.app.systemConfig.find(i => i.configKey === 'papers_id_desensitize')?.configValue
      return value === '1'
    },
    scenicName () {
      return this.$localStore.get('scenicName') || this.$store.state.user.scenicName
    },
    payChannelOptions () {
      return this.$store.state.app.payChannelOptions
    }
  },
  filters: {
    tradeType (input) {
      return memberTradeTypeList.find(i => i.value === input).label
    }
  },
  mounted () {
    this.getMemberTypeList().then(() => {
      this.getList()
    })
  },
  methods: {
    getPayStatus,
    reset () {
      this.$refs.form.resetFields()
    },
    exportStatist () {
      exportMemberTradeList(this.form).then(res => {
        this.$message.success('导出成功。')
        this.goToDownload()
      })
    },
    // 获取会员类型
    getMemberTypeList () {
      return getMemberType({
        pageNum: 1,
        pageSize: 10000
      }).then(res => {
        this.memberTypeList = res.list
      })
    },
    handleSizeChange (size) {
      this.form.pageSize = size
      this.getList()
    },
    // 获取列表
    getList () {
      this.loading = true
      getMemberTradeList(this.form).then(res => {
        this.total = res.total
        this.tableData = res.list
      }).finally(() => {
        this.loading = false
      })
    },
    confirmPOS (record) {
      this.$confirm('请确认该订单已付款,将手动更新订单状态为已支付', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        getSelf().then(response => {
          const params = {
            managerId: response.id,
            id: record.id,
            payChannel: record.payChannel,
            posId: localStore.get('termId'),
            tradeInfo: '',
            type: 'MEMBER'
          }
          payPOS(params).then(res => {
            this.$message.success('操作成功')
            this.getList()
          })
        })
      }).catch(() => {
      })
    },
    showPickInvoice (order) {
      this.visible = true
      this.currentOrder = order
    },
    submitPickInvoice () {
      this.$refs.formEl.validate(valid => {
        if (!valid) return
        if (this.formEl.invoiceType) {
          this.formEl.invoiceBuyer = ''
          this.formEl.invoiceBuyerTaxNum = ''
          this.formEl.invoiceBuyerPhone = ''
          this.formEl.invoiceBuyerEmail = ''
        }
        pickInvoice([this.currentOrder.id], this.formEl.invoiceType, this.formEl.invoiceBuyer, this.formEl.invoiceBuyerTaxNum, this.formEl.invoiceBuyerPhone, this.formEl.invoiceBuyerEmail).then(res => {
          this.$message.success('操作成功')
          this.getList()
          this.visible = false
          this.currentOrder = {}
          this.formEl = {
            invoiceType: 1,
            invoiceBuyer: '',
            invoiceBuyerTaxNum: ''
          }
          this.$confirm('发票已生成，是否跳转到发票下载页？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$router.push('/queryReport/invoiceRecord')
          })
        })
      })
    }
  }
}
</script>