|
|
@@ -0,0 +1,303 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <div class="filter-container">
|
|
|
+ <div class="filter-control">
|
|
|
+ <span>机构名称:</span>
|
|
|
+ <el-input
|
|
|
+ v-model="listQuery.clubName"
|
|
|
+ placeholder="机构名称"
|
|
|
+ clearable
|
|
|
+ @keyup.enter.native="getList"
|
|
|
+ @clear="getList"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="filter-control">
|
|
|
+ <span>联系人:</span>
|
|
|
+ <el-input
|
|
|
+ v-model="listQuery.linkMan"
|
|
|
+ placeholder="联系人"
|
|
|
+ clearable
|
|
|
+ @keyup.enter.native="getList"
|
|
|
+ @clear="getList"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="filter-control">
|
|
|
+ <span>手机号:</span>
|
|
|
+ <el-input
|
|
|
+ v-model="listQuery.mobile"
|
|
|
+ placeholder="手机号"
|
|
|
+ clearable
|
|
|
+ style="width:160px;"
|
|
|
+ @keyup.enter.native="getList"
|
|
|
+ @clear="getList"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="filter-control">
|
|
|
+ <span>购买套餐:</span>
|
|
|
+ <el-select v-model="listQuery.packageId" style="width:120px;" clearable @change="getList">
|
|
|
+ <el-option value="" label="请选择" />
|
|
|
+ <el-option :value="0" label="系统赠送" />
|
|
|
+ <el-option :value="1" label="1个月" />
|
|
|
+ <el-option :value="1" label="3个月" />
|
|
|
+ <el-option :value="1" label="12个月" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="filter-control">
|
|
|
+ <span>会员状态:</span>
|
|
|
+ <el-select v-model="listQuery.status" style="width:120px;" clearable @change="getList">
|
|
|
+ <el-option value="" label="请选择" />
|
|
|
+ <el-option value="" label="全部" />
|
|
|
+ <el-option :value="1" label="已生效" />
|
|
|
+ <el-option :value="2" label="已过期" />
|
|
|
+ </el-select>
|
|
|
+ </div><br>
|
|
|
+ <div class="filter-control">
|
|
|
+ <span>购买时间:</span>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="time"
|
|
|
+ type="daterange"
|
|
|
+ unlink-panels
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ @change="getList"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="filter-control">
|
|
|
+ <span>到期时间:</span>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="time"
|
|
|
+ type="daterange"
|
|
|
+ unlink-panels
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ :picker-options="pickerEndOptions"
|
|
|
+ @change="getList"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="filter-control">
|
|
|
+ <el-button type="primary" @click="getList">查询</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-table v-loading="isLoading" :data="tableData" height="550" border style="width: 100%">
|
|
|
+ <el-table-column label="购买套餐" width="180">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ {{ row.packageId | packageFilters }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="购买价格" width="180">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ {{ row.packageId | packageFilters }}
|
|
|
+ </template>
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <template v-if="row.payWay === '4'">
|
|
|
+ <span>{{ row.userBeans }}采美豆</span>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <span>{{ row.price | priceFormat }}采美豆</span>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="购买渠道">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <span v-if="row.payWay === '0'" class="el-span-status">
|
|
|
+ 未知
|
|
|
+ </span>
|
|
|
+ <span v-else-if="row.payWay === '1'" class="el-span-status">
|
|
|
+ 未知
|
|
|
+ </span>
|
|
|
+ <span v-else-if="row.payWay === '2'" class="el-span-status">
|
|
|
+ 线下
|
|
|
+ </span>
|
|
|
+ <span v-else-if="row.payWay === '3'" class="el-span-notStatus">
|
|
|
+ 余额抵扣
|
|
|
+ </span>
|
|
|
+ <span v-else-if="row.payWay === '4'" class="el-span-notEffective">
|
|
|
+ 采美豆抵扣
|
|
|
+ </span>
|
|
|
+ <span v-else-if="row.payWay === '5'" class="el-span-notEffective">
|
|
|
+ 系统赠送
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="会员状态">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <span v-if="row.status === '1'" class="el-span-status">
|
|
|
+ 已生效
|
|
|
+ </span>
|
|
|
+ <span v-else-if="row.status === '2'" class="el-span-notStatus">
|
|
|
+ 已过期
|
|
|
+ </span>
|
|
|
+ <span v-else class="el-span-notEffective">
|
|
|
+ 暂未生效
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="payTime" label="购买时间" />
|
|
|
+ <el-table-column prop="beginTime" label="生效时间" />
|
|
|
+ <el-table-column prop="endTime" label="到期时间" />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { findHistory } from '@/api/member/manage/manage'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'MemberRecord',
|
|
|
+ filters: {
|
|
|
+ packageFilters(value) {
|
|
|
+ // 套餐
|
|
|
+ const map = {
|
|
|
+ 1: '1个月',
|
|
|
+ 3: '3个月',
|
|
|
+ 12: '12个月'
|
|
|
+ }
|
|
|
+ return map[value]
|
|
|
+ },
|
|
|
+ priceFormat(value) {
|
|
|
+ return Number(value).toFixed(2)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ const pickerOptions = {
|
|
|
+ shortcuts: [
|
|
|
+ {
|
|
|
+ text: '近1年',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date()
|
|
|
+ const start = new Date()
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
|
|
|
+ picker.$emit('pick', [start, end])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '近半年',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date()
|
|
|
+ const start = new Date()
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 183)
|
|
|
+ picker.$emit('pick', [start, end])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '近1月',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date()
|
|
|
+ const start = new Date()
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
|
|
+ picker.$emit('pick', [start, end])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '近1周',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date()
|
|
|
+ const start = new Date()
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
|
|
+ picker.$emit('pick', [start, end])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '昨天',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date()
|
|
|
+ const start = new Date()
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24)
|
|
|
+ picker.$emit('pick', [start, end])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ const pickerEndOptions = {
|
|
|
+ shortcuts: [
|
|
|
+ {
|
|
|
+ text: '近1年',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date()
|
|
|
+ const start = new Date()
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
|
|
|
+ picker.$emit('pick', [start, end])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '近半年',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date()
|
|
|
+ const start = new Date()
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 183)
|
|
|
+ picker.$emit('pick', [start, end])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '近1月',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date()
|
|
|
+ const start = new Date()
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
|
|
+ picker.$emit('pick', [start, end])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '近1周',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date()
|
|
|
+ const start = new Date()
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
|
|
+ picker.$emit('pick', [start, end])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '昨天',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date()
|
|
|
+ const start = new Date()
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24)
|
|
|
+ picker.$emit('pick', [start, end])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ pickerOptions,
|
|
|
+ pickerEndOptions,
|
|
|
+ time: '',
|
|
|
+ isLoading: true,
|
|
|
+ listQuery: {
|
|
|
+ clubId: 0, // 机构Id
|
|
|
+ userId: 0, // 用户Id
|
|
|
+ clubName: '', // 机构名称
|
|
|
+ linkMan: '', // 联系人
|
|
|
+ mobile: '', // 手机号
|
|
|
+ packageId: '', // 购买套餐
|
|
|
+ status: '', // 会员状态
|
|
|
+ startPayTime: '', // 购买开始时间
|
|
|
+ endPayTime: '', // 购买结束时间
|
|
|
+ startEndTime: '', // 到期开始时间
|
|
|
+ endEndTime: '', // 到期结束时间
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 20
|
|
|
+ },
|
|
|
+ tableData: [],
|
|
|
+ total: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.listQuery = { ...this.listQuery, ...this.$route.query }
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getList() {
|
|
|
+ this.isLoading = true
|
|
|
+ const res = await findHistory(this.listQuery)
|
|
|
+ this.tableData = res.data.results
|
|
|
+ this.total = res.data.totalRecord
|
|
|
+ this.isLoading = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style></style>
|
