client-mazu/src/pages/member/memberUpgrade.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="名称"
        prop="keyWords1">
        <el-input v-model="form.keyWords1"></el-input>
      </el-form-item>
      <el-form-item
        label="类型"
        prop="keyWords2">
        <el-select v-model="form.keyWords2">
          <el-option
            value=""
            label="全部"
          ></el-option>
          <el-option
            label="游客"
            :value="1"
          ></el-option>
          <el-option
            label="多人卡"
            :value="2"
          ></el-option>
          <el-option
            label="居民"
            :value="3"
          ></el-option>
          <el-option
            label="管理员"
            :value="4"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="是否IC卡通关"
        prop="keyWords3">
        <el-select v-model="form.keyWords3">
          <el-option
            label="全部"
            value=""
          ></el-option>
          <el-option
            label="是"
            :value="1"
          ></el-option>
          <el-option
            label="否"
            :value="0"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="是否身份证通关"
        prop="keyWords4">
        <el-select v-model="form.keyWords4">
          <el-option
            label="全部"
            value=""
          ></el-option>
          <el-option
            label="是"
            :value="1"
          ></el-option>
          <el-option
            label="否"
            :value="0"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="是否人脸通关"
        prop="keyWords5">
        <el-select v-model="form.keyWords5">
          <el-option
            label="全部"
            value=""
          ></el-option>
          <el-option
            label="是"
            :value="1"
          ></el-option>
          <el-option
            label="否"
            :value="0"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="是否可售"
        prop="keyWords6">
        <el-select v-model="form.keyWords6">
          <el-option
            label="全部"
            value=""
          ></el-option>
          <el-option
            label="是"
            :value="1"
          ></el-option>
          <el-option
            label="否"
            :value="0"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="是否指纹通关"
        prop="keyWords7">
        <el-select v-model="form.keyWords7">
          <el-option
            label="全部"
            value=""
          ></el-option>
          <el-option
            label="是"
            :value="1"
          ></el-option>
          <el-option
            label="否"
            :value="0"
          ></el-option>
        </el-select>
      </el-form-item>
      <div class="btn-wrap">
        <el-button
          @click="reset">
          重置
        </el-button>
        <el-button
          type="primary"
          @click="getMemberList">
          搜索
        </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">
            <el-form
              inline
              class="table-expand">
              <el-form-item label="通关方式">
                <span>{{ props.row.checkWay }}</span>
              </el-form-item>
              <el-form-item label="检票类型">
                <span>
                  {{
                    [
                      props.row.check_pattern,
                      props.row.scenic_checkTimes_type,
                      props.row.valid_days,
                      props.row.checkLimitTimes
                    ] | complicatedCheckType
                  }}
                </span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="类型名称">
        </el-table-column>
        <el-table-column
          label="会员大类">
          <template slot-scope="scope">
            {{ scope.row.category | memberCategory }}
          </template>
        </el-table-column>
        <el-table-column
          width="300"
          prop="scenicText"
          label="适用景点">
        </el-table-column>
        <el-table-column
          width="100"
          prop="capital"
          label="价格">
        </el-table-column>

        <el-table-column
          width="200"
          prop="memberUpgrades"
          label="可升级会员卡"
        >
          <template slot-scope="scope">
            <el-tag
              v-for="(item,index) in scope.row.memberUpgrades"
              :key="index"
            >
              {{ item.upgradeName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          width="180px"
          label="可售日期">
          <template slot-scope="scope">
            {{ scope.row.saleDateStart | formatDate }} 至 {{ scope.row.saleDateEnd | formatDate }}
          </template>
        </el-table-column>
        <el-table-column
          width="180px"
          label="游玩日期">
          <template slot-scope="scope">
            {{ scope.row.play_startdate | formatDate }} 至 {{ scope.row.play_enddate | formatDate }}
          </template>
        </el-table-column>
        <el-table-column
          width="60px"
          label="状态">
          <template slot-scope="scope">
            <span>{{ scope.row.isSale ? '已激活' : '已禁用' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="120"
          label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="$refs.dialog.show(scope.row)">
              升级设置
            </el-button>
          </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="getMemberList()"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <Dialog
      :all-member-type-list="allMemberTypeList"
      ref="dialog"
      @update="getMemberList"></Dialog>
  </div>
</template>

<script>
import { getScenic } from '@/api/ticketType'
import { getMemberType } from '@/api/member'
import moment from 'moment'
import Dialog from './memberUpgrade/Dialog'

export default {
  name: 'memberType',
  data () {
    return {
      total: 0,
      loading: false,
      tableData: [],
      dialogType: 'edit',
      dialogVisible: false,
      dialogEditVisible: false,
      currentItem: {},
      scenicList: [],
      allMemberTypeList: [], // 所以会员类型
      form: {
        keyWords1: '',
        keyWords2: '',
        keyWords3: '',
        keyWords4: '',
        keyWords5: '',
        keyWords6: '',
        keyWords7: '',
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  async created () {
    this.loading = true
    await this.getScenicList()
    this.getMemberList()
    this.getAllMemberList()
  },
  components: {
    Dialog
  },
  methods: {
    openDialog (type, item) {
      this.dialogType = type
      this.currentItem = item
      this.dialogVisible = true
    },
    // 获取景点列表
    getScenicList () {
      return getScenic().then(res => {
        let treeArr = res?.data.children.map(item => item.data)
        this.scenicList = treeArr
      })
    },
    getScenicName (id) {
      let scenic = this.scenicList.find(s => s.id === id)
      return scenic ? scenic.name : ''
    },
    handleSizeChange (size) {
      this.form.pageSize = size
      this.getMemberList()
    },
    // 获取会员卡类型列表
    getMemberList () {
      this.loading = true
      getMemberType(this.form).then(res => {
        this.total = res.total
        res.list.forEach(item => {
          this.formatRow(item)
        })
        this.tableData = res.list
      }).finally(() => {
        this.loading = false
      })
    },
    getAllMemberList () {
      getMemberType({
        pageNum: 1,
        pageSize: 1000,
        keyWords6: 1,
        keyWords8: 1,
        keyWords9: 1 }).then(res => {
        this.allMemberTypeList = res.list
      }).finally(() => {
      })
    },
    // 格式化表格信息
    formatRow (item) {
      item.scenicText = item.memberTypeScenic.map(s => {
        return this.getScenicName(s.scenic_id)
      }).join('、')
      let checkWayList = []
      if (item.idcard_check) checkWayList.push('身份证')
      if (item.face_check) checkWayList.push('人脸识别')
      if (item.iccard_check) checkWayList.push('IC卡')
      if (item.fingerprint_check) checkWayList.push('指纹')
      item.checkWay = checkWayList.join('、')
    },
    reset () {
      this.$refs.form.resetFields()
    },
    formatTime (time) {
      return moment(time).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style scoped lang="scss">
  .info-form {
    display: flex;
    flex-wrap: wrap;
    .info-form-item {
      width: 33%;
      display: flex;
      align-items: center;
      .info-form-label {
        flex-shrink: 0;
        width: 70px;
        padding-right: 12px;
        color: #64667B;
      }
    }
  }
</style>