|
@@ -0,0 +1,269 @@
|
|
|
+<template>
|
|
|
+ <a-modal
|
|
|
+ :title="查看详情"
|
|
|
+ :footer="null"
|
|
|
+ :destroyOnClose="true"
|
|
|
+ @cancel="isShow = false"
|
|
|
+ v-model="isShow">
|
|
|
+ <!-- 搜索条件 -->
|
|
|
+ <!-- <h3 class="coupon-detail-title" v-model="title">{{ title }},领取详情</h3> -->
|
|
|
+ <a-divider />
|
|
|
+ <div class="CouponStatisticsDetail-searchForm">
|
|
|
+ <a-form ref="searchForm" labelAlign="left">
|
|
|
+ <a-row :gutter="48">
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-form-item label="领券时间" :label-col="{ span:6 }" :wrapper-col="{ span:14 }">
|
|
|
+ <a-range-picker v-model="time" :format="dateFormat" :placeholder="['开始时间','结束时间']" @change="onChange" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-form-item label="手机号码" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
|
|
|
+ <a-input v-model.trim="searchForm.name" placeholder="请输入" allowClear/>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-form-item label="用券网点" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
|
|
|
+ <a-input v-model.trim="searchForm.name" placeholder="请输入" allowClear/>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-button style="margin-right: 10px;" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
|
|
|
+ <a-button type="" @click="resetForm">重置</a-button>
|
|
|
+ </a-col>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="48">
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-form-item label="用券时间" :label-col="{ span:6 }" :wrapper-col="{ span:14 }">
|
|
|
+ <a-range-picker v-model="usedTime" :format="dateFormat" :placeholder="['开始时间','结束时间']" @change="onChange" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-form-item label="使用状态" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
|
|
|
+ <v-select v-model="searchForm.status" placeholder="请选择" allowClear></v-select>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+ <!-- 列表 -->
|
|
|
+ <s-table
|
|
|
+ ref="table"
|
|
|
+ size="default"
|
|
|
+ :rowKey="(record) => record.id"
|
|
|
+ :columns="columns"
|
|
|
+ :data="loadData"
|
|
|
+ bordered>
|
|
|
+ <!-- 状态 -->
|
|
|
+ <span slot="status" slot-scope="text, record">
|
|
|
+ <template v-if="record.status == 0">{{ '未使用' }}</template>
|
|
|
+ <template v-if="record.status == 1">{{ '已使用' }}</template>
|
|
|
+ <template v-if="record.status == -1">{{ '已过期' }}</template>
|
|
|
+ </span>
|
|
|
+ <!-- 用券时间 -->
|
|
|
+ <span slot="usedTime" slot-scope="text, record">
|
|
|
+ <template>{{ record.usedTime || '--' }}</template>
|
|
|
+ </span>
|
|
|
+ <!-- 关联消费金额 -->
|
|
|
+ <span slot="consumAmount" slot-scope="text, record">
|
|
|
+ <template>{{ record.consumAmount || '--' }}</template>
|
|
|
+ </span>
|
|
|
+ </s-table>
|
|
|
+ </a-modal>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ STable,
|
|
|
+ VSelect
|
|
|
+} from '@/components'
|
|
|
+import getDate from '../../libs/getDate.js'
|
|
|
+import moment from 'moment'
|
|
|
+import { couponReceiveDetail } from '../../api/couponStatistics.js'
|
|
|
+export default {
|
|
|
+ name: 'CouponDetailModal',
|
|
|
+ components: { STable, VSelect },
|
|
|
+ props: {
|
|
|
+ openModal: { // 弹框是否展示
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ nowCouponId: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ nowStoreId: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ nowCouponTitle: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ isShow: this.openModal,
|
|
|
+ searchForm: {
|
|
|
+ store: {
|
|
|
+ name: ''
|
|
|
+ }, // 网点名称
|
|
|
+ beginDate: null, // 创建的开始时间
|
|
|
+ endDate: null, // 创建的结束时间
|
|
|
+ useCouponBeginTime: null, // 用券的开始时间
|
|
|
+ useCouponEndTime: null, // 用券的结束时间
|
|
|
+ couponId: '', // 当前优惠券id----查看详情
|
|
|
+ storeNo: '' // 当前发券网点id----查看详情
|
|
|
+ },
|
|
|
+ title: '3元代金券',
|
|
|
+ dateFormat: 'YYYY-MM-DD',
|
|
|
+ time: [
|
|
|
+ moment(getDate.getToday().starttime, this.dateFormat),
|
|
|
+ moment(getDate.getToday().endtime, this.dateFormat)
|
|
|
+ ],
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ title: '序号',
|
|
|
+ dataIndex: 'no',
|
|
|
+ minWidth: '40',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '领券时间',
|
|
|
+ dataIndex: 'receiveTime',
|
|
|
+ minWidth: '40',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '领券手机号码',
|
|
|
+ dataIndex: 'ownerPhone',
|
|
|
+ minWidth: '40',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '使用状态',
|
|
|
+ dataIndex: 'status',
|
|
|
+ minWidth: '40',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: {
|
|
|
+ customRender: 'status'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '用券网点',
|
|
|
+ dataIndex: 'store.name',
|
|
|
+ minWidth: '40',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '用券时间',
|
|
|
+ dataIndex: 'usedTime',
|
|
|
+ minWidth: '40',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: {
|
|
|
+ customRender: 'usedTime'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '关联消费金额',
|
|
|
+ dataIndex: 'consumAmount',
|
|
|
+ minWidth: '40',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: {
|
|
|
+ customRender: 'consumAmount'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // 加载数据方法 必须为 Promise 对象
|
|
|
+ loadData: parameter => {
|
|
|
+ this.searchForm.beginDate == null ? this.searchForm.beginDate = getDate.getToday().starttime : null
|
|
|
+ this.searchForm.endDate == null ? this.searchForm.endDate = getDate.getToday().endtime : null
|
|
|
+ return couponReceiveDetail(Object.assign(parameter, this.searchForm)).then(res => {
|
|
|
+ console.log(res, '----------------')
|
|
|
+ if (res.status == 200) {
|
|
|
+ const no = (res.data.pageNo - 1) * res.data.pageSize
|
|
|
+ for (let i = 0; i < res.data.list.length; i++) {
|
|
|
+ const _item = res.data.list[i]
|
|
|
+ _item.no = no + i + 1
|
|
|
+ // _item.status = _item.status + '' === '1'
|
|
|
+ }
|
|
|
+ return res.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 时间change
|
|
|
+ onChange (dates, dateStrings) {
|
|
|
+ if ((dates, dateStrings)) {
|
|
|
+ this.searchForm.beginDate = dateStrings[0]
|
|
|
+ this.searchForm.endDate = dateStrings[1]
|
|
|
+ }
|
|
|
+ console.log(this.searchForm.beginDate, this.searchForm.endDate)
|
|
|
+ },
|
|
|
+ // 重置
|
|
|
+ resetForm () {
|
|
|
+ this.searchForm = {
|
|
|
+ store: {
|
|
|
+ name: ''
|
|
|
+ }, // 用券网点名称
|
|
|
+ beginDate: null, // 创建的开始时间
|
|
|
+ endDate: null, // 创建的结束时间
|
|
|
+ useCouponBeginTime: null, // 用券的开始时间
|
|
|
+ useCouponEndTime: null, // 用券的结束时间
|
|
|
+ couponId: '', // 当前优惠券id----查看详情
|
|
|
+ storeNo: '' // 当前发券网点id----查看详情
|
|
|
+ }
|
|
|
+ // this.$refs.searchForm.resetFields()
|
|
|
+ this.$refs.table.refresh(true)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ // 父页面传过来的弹框状态以及当前行id
|
|
|
+ openModal (newValue, oldValue) {
|
|
|
+ this.isShow = newValue
|
|
|
+ },
|
|
|
+ nowCouponId (newValue, oldValue) {
|
|
|
+ console.log(newValue)
|
|
|
+ },
|
|
|
+ nowStoreId (newValue, oldValue) {
|
|
|
+ console.log(newValue)
|
|
|
+ },
|
|
|
+ nowCouponTitle (newValue, oldValue) {
|
|
|
+ console.log(newValue)
|
|
|
+ },
|
|
|
+ // 重定义的弹框状态
|
|
|
+ isShow (val) {
|
|
|
+ if (!val) {
|
|
|
+ this.$emit('close')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // beforeRouteEnter (to, form, next) {
|
|
|
+ // next(vm => {
|
|
|
+ // vm.resetForm()
|
|
|
+ // console.log(vm.$route, '----详情')
|
|
|
+ // vm.title = vm.$route.params.title
|
|
|
+ // vm.searchForm.couponId = vm.$route.params.id
|
|
|
+ // vm.searchForm.storeNo = vm.$route.params.storeNo
|
|
|
+ // console.log(vm.title, vm.searchForm)
|
|
|
+ // // vm.$refs.table.refresh(true)
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+ .ant-form-item{
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .ant-divider-horizonta{
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
+ .coupon-detail-title{
|
|
|
+ margin-bottom: 20px;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+</style>
|