添加优惠券相关

src/views/coupon_manage/components/coupon_details.vue

@@ -0,0 +1,204 @@
+<template>
+  <div>
+    <el-dialog title="领取详情" :visible.sync="dialogVisible" width="70%" @close="reset">
+      <div class="search">
+        <el-form :model="query" inline label-position="left">
+          <el-form-item>
+            <el-input v-model="query.name" placeholder="用户ID/用户昵称/用户手机" style="width: 180px;" />
+          </el-form-item>
+          <el-form-item>
+            <el-select v-model="query.state" placeholder="选择状态" style="width: 154px;">
+              <el-option
+                v-for="item in stateList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item />
+          <el-form-item label="领取时间">
+            <el-date-picker
+              v-model="query.createdAt"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :default-time="['00:00:00', '23:59:59']"
+              value-format="yyyy-MM-dd HH:mm:ss"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="getTableData">查询</el-button>
+            <el-button v-loading="downloadLoading" icon="el-icon-download" @click="downloadHandle">
+              <span v-if="!downloadLoading">导出</span>
+              <span v-else>下载中...</span>
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div>
+        <el-table v-loading="loading" :data="tableData">
+
+          <el-table-column label="用户ID" prop="id" />
+          <el-table-column label="用户名" prop="areaName" />
+          <el-table-column label="领取时间" prop="tableName" />
+          <el-table-column label="使用时间" prop="tableName" />
+          <el-table-column label="获得来源" prop="tableName" />
+          <el-table-column label="状态" prop="tableName" />
+          <el-table-column label="使用门店" prop="tableName" />
+          <el-table-column label="订单数量" prop="orderCount">
+            <template v-slot="scope">
+              <div class="cursor-pointer" @click="toTableOrderList(scope.row)">
+                {{ scope.row.orderCount }}
+              </div>
+            </template>
+          </el-table-column>
+
+        </el-table>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dialogVisible: true,
+      downloadLoading: false,
+      loading: false,
+      stateList: [
+        { label: '未使用', value: 1 },
+        { label: '已使用', value: 2 }
+      ],
+      query: {
+        name: '',
+        createdAt: [],
+        state: ''
+      },
+      tableData: null
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    /**
+     * 查询
+     */
+    getTableData() {
+
+    },
+    // 导出Excel
+    async downloadHandle() {
+      try {
+        this.downloadLoading = true
+        // eslint-disable-next-line no-undef
+        const file = await summaryTableDownload({
+          startTime: this.query.createdAt[0],
+          endTime: this.query.createdAt[1]
+        })
+        // eslint-disable-next-line no-undef
+        downloadFile(file, '数据', 'xlsx')
+        this.downloadLoading = false
+      } catch (error) {
+        this.downloadLoading = false
+        console.log(error)
+      }
+    },
+    // 提交
+    onSubmitHandle() {
+
+    },
+    /**
+     * 打开详情
+     * @param obj
+     */
+    show(obj) {
+      this.dialogVisible = true
+    //   if (obj && obj.id) {
+    //     this.form = { ...obj }
+    //   }
+    },
+    /**
+     * 关闭详情
+     */
+    close() {
+      this.dialogVisible = false
+    },
+    reset() {
+      this.form = { ...this.resetForm }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.shop_list {
+    display: flex;
+    flex-wrap: wrap;
+
+    .item_wrap {
+        $size: 80px;
+
+        .item {
+            $radius: 4px;
+            width: $size;
+            height: $size;
+            border-radius: $radius;
+            overflow: hidden;
+            position: relative;
+            margin-right: 10px;
+            margin-top: 10px;
+
+            &:hover {
+                cursor: pointer;
+            }
+
+            &::after {
+                content: attr(data-index);
+                font-size: 12px;
+                height: 20px;
+                display: flex;
+                padding: 0 10px;
+                border-radius: 0 0 $radius 0;
+                align-items: center;
+                background-color: rgba(0, 0, 0, 0.3);
+                backdrop-filter: blur(10px);
+                color: #fff;
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 10;
+            }
+
+            &::before {
+                content: '删除';
+                font-size: 12px;
+                width: 100%;
+                height: 20px;
+                display: flex;
+                padding: 0 10px;
+                align-items: center;
+                justify-content: center;
+                background-color: rgba(0, 0, 0, 0.3);
+                backdrop-filter: blur(10px);
+                color: #fff;
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                z-index: 10;
+                transition: all .1s ease-in-out;
+            }
+        }
+
+        .name {
+            width: $size;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+}
+</style>