update: dist

src/mixins/tableMethods.js

@@ -10,6 +10,7 @@ export default {
       this.getTableList();
     },
     handleSizeChange(val) {
+      this.listParams.currentPage = 1;
       this.listParams.pageSize = val;
       this.getTableList();
     },

src/service/api/cardApi.js

@@ -167,3 +167,12 @@ export const downloadDestroyCodeTemplate = config.api + PREFIX + 'download-destr
 
 //是否显示卡券当月有效期
 export const getCardEffectiveMode = params => requests(PREFIX + '/get-card-effective-mode', params);
+
+//退单卡券积分列表
+export const listConsumeRefundPage = params => requests(PREFIX + '/list-consume-refund-page', params);
+
+//退单卡券积分列表导出
+export const ecmConsumeCouponExcel = config.api + PREFIX + 'ecm-consume-coupon-excel';
+
+//退单卡券积分列表详情
+export const listConsumeCouponDetail = params => requests(PREFIX + '/list-consume-coupon-detail', params);

src/views/card/recycle-record-detail.vue

 <template>
   <section v-loading="loading">
     <div class="pb22 clearfix">
-      <el-input v-model="listParams.search" class="w300" placeholder="请输入姓名/昵称/手机号/会员卡号" clearable @change="refresh"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
-      <el-input v-model="listParams.search" class="w300" placeholder="卡券名称/卡券代码/会员信息" clearable @change="refresh"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
-      <el-date-picker class="w250" v-model="dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="refresh"></el-date-picker>
-
-      <el-button class="fr" type="primary" v-if="$getButtonLimit($buttonCode.marketingDownloadRefundLog)" :limit-code="$buttonCode.marketingDownloadRefundLog" @click="exportExcel" icon="iconfont icon-icon_yunxiazai fz14"> 下载Excel</el-button>
+      <el-input v-model="listParams.searchParams" class="w300" placeholder="请输入姓名/昵称/手机号/会员卡号" clearable @change="refresh"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
+      <el-input v-model="listParams.refundOrderSerial" class="w300" placeholder="请输入退款单号" clearable @change="refresh"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
+      <el-date-picker class="w250" v-model="dateTime" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="handleDateChange"></el-date-picker>
+      <el-button class="fr" type="primary" @click="exportExcel" icon="iconfont icon-icon_yunxiazai fz14"> 下载Excel</el-button>
     </div>
+    <el-table tooltipEffect="light" :data="tableList" :style="{ width: '100%' }">
+      <el-table-column show-overflow-tooltip width="180" prop="sendBackTime" label="基本信息" fixed="left">
+        <template slot-scope="{ row }">
+          <img class="vertical-middle table__avatar--40" :src="row.memberImage || defaultAvatar" width="60" height="60" />
+          <div class="inline-block vertical-middle">
+            <p class="table-name--ellipsis">{{ row.memberName || '--' }}</p>
+            <p class="fz13 gray">{{ row.memberPhone || '--' }}</p>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column show-overflow-tooltip min-width="120" prop="memberCardNo" label="会员卡号" />
+      <el-table-column show-overflow-tooltip prop="refundOrderSerial" label="退款单号" />
+      <el-table-column show-overflow-tooltip min-width="120" prop="couponAutoDestroy" label="系统回收券数" />
+      <el-table-column show-overflow-tooltip min-width="120" prop="couponAmountAuto" label="系统回收金额"> </el-table-column>
+      <el-table-column show-overflow-tooltip min-width="120" prop="couponManualDestroy" label="手动回收券数"></el-table-column>
+      <el-table-column show-overflow-tooltip min-width="120" prop="couponAmountManual" label="手动回收金额"></el-table-column>
+      <el-table-column show-overflow-tooltip min-width="150" prop="integralOrder" label="当笔订单退回积分"></el-table-column>
+      <el-table-column show-overflow-tooltip width="100" prop="integralRemain" label="剩余积分"></el-table-column>
+      <el-table-column show-overflow-tooltip min-width="120" prop="integralFee" label="积分折现金额"></el-table-column>
+      <el-table-column show-overflow-tooltip min-width="120" prop="refundOrderTime" label="退单时间">
+        <template slot-scope="{ row }">
+          <p class="cell-time">
+            {{ formatDateTimeByType(row.refundOrderTime, 'yyyy-MM-dd-HH-mm', true).y }}<br />
+            <span>{{ formatDateTimeByType(row.refundOrderTime, 'yyyy-MM-dd-HH-mm', true).h }}</span>
+          </p>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" fixed="right">
+        <template slot-scope="{ row }">
+          <el-button type="text" @click="detail(row)">详情</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <dm-pagination v-show="tableList.length" background class="dm-pagination" :current-page="listParams.currentPage" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[20, 40, 60, 80]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></dm-pagination>
+    <vue-gic-export-excel :dialogVisible.sync="dialogVisible" :dataArr="tableList" :type="2" :excelUrl="excelUrl" :params="params" projectName="marketing"></vue-gic-export-excel>
+    <el-dialog title="详情" :visible.sync="show" width="700px" :before-close="handleClose">
+      <div v-loading="detailLoading">
+        <el-table tooltipEffect="light" :data="detailList" :style="{ width: '100%' }" :height="400">
+          <el-table-column show-overflow-tooltip prop="destoryType" label="卡券回收">
+            <template slot-scope="{ row }">
+              {{ destoryType[row.destoryType] }}
+            </template>
+          </el-table-column>
+          <el-table-column show-overflow-tooltip width="120" prop="couponType" label="卡券类型">
+            <template slot-scope="{ row }">
+              {{ couponType[row.couponType] }}
+            </template>
+          </el-table-column>
+          <el-table-column show-overflow-tooltip min-width="120" prop="couponName" label="卡券名称">
+            <template slot-scope="{ row }">
+              <a :href="'/marketing/#/card/info/' + row.couponId" target="_blank"> {{ row.couponName }}</a>
+            </template>
+          </el-table-column>
+          <el-table-column show-overflow-tooltip width="80" prop="couponDenomination" label="卡券金额" />
+          <el-table-column show-overflow-tooltip min-width="120" prop="couponCode" label="卡券代码" />
+        </el-table>
+      </div>
+    </el-dialog>
   </section>
 </template>
 
 <script>
+import { formatDateTimeByType } from '@/utils/index.js';
+import { listConsumeRefundPage, ecmConsumeCouponExcel, listConsumeCouponDetail } from '@/service/api/cardApi.js';
+import talbeMethods from '@/mixins/tableMethods.js';
+const destoryType = {
+  0: '自动',
+  1: '手动'
+};
+const couponType = {
+  0: '抵金券',
+  1: '折扣券',
+  2: '礼品券'
+};
+
 export default {
   data() {
-    return {};
+    return {
+      listParams: {
+        beginTime: '',
+        endTime: '',
+        searchParams: '',
+        refundOrderSerial: '',
+        currentPage: 1,
+        pageSize: 20
+      },
+      dateTime: '',
+      formatDateTimeByType,
+      total: 0,
+      tableList: [{}],
+      loading: true,
+      dialogVisible: false,
+      show: false,
+      detailLoading: false,
+      detailList: [],
+      destoryType,
+      couponType
+    };
+  },
+  mounted() {
+    this.getTableList();
   },
-  methods: {}
+  mixins: [talbeMethods],
+  methods: {
+    async getTableList() {
+      this.loading = true;
+      try {
+        let res = await listConsumeRefundPage(this.listParams);
+        this.tableList = res.result.result || [];
+        this.total = res.result.totalCount || 0;
+      } catch (err) {
+        this.$tips({ type: 'error', message: '加载列表失败' });
+      }
+      this.loading = false;
+    },
+    async detail(row) {
+      this.show = true;
+      this.detailLoading = true;
+      try {
+        let res = await listConsumeCouponDetail({ id: row.couponId }); //2c90a8838020f6a2018020f6ed1f0000
+        this.detailList = res.result || [];
+      } catch (err) {
+        this.$tips({ type: 'error', message: '加载列表失败' });
+        this.show = false;
+      } finally {
+        this.detailLoading = false;
+      }
+    },
+    // 导出列表
+    exportExcel() {
+      this.dialogVisible = true;
+      this.excelUrl = ecmConsumeCouponExcel;
+      const { searchParam, beginTime, endTime } = this.listParams;
+      this.params = {
+        searchParam,
+        beginTime,
+        endTime,
+        requestProject: 'marketing'
+      };
+    },
+    handleDateChange(val) {
+      if (val) {
+        this.listParams.beginTime = val[0];
+        this.listParams.endTime = val[1];
+      } else {
+        this.listParams.beginTime = '';
+        this.listParams.endTime = '';
+      }
+      this.refresh();
+    }
+  }
 };
 </script>
 
-<style></style>
+<style>
+.wrapText {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  width: 90%;
+  text-align: left;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+</style>