update

src/layout/common/page.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="page">
-    <el-row>
+    <el-row style="z-index: -1">
       <el-col :span="24" class="main">
         <van-pagination v-model="currentPage" @change="changePage" :total-items="total" :items-per-page="limit" :show-page-size="5" force-ellipses />
       </el-col>

src/plugins/stomp.js

@@ -5,7 +5,7 @@
 import Vue from 'vue';
 import _ from 'lodash';
 import assert from 'assert';
-import { Client } from '@stomp/stompjs/esm5/client';
+import { Client } from '@stomp/stompjs/esm6/client';
 
 const Plugin = {
   install(Vue, options) {

src/router/index.js

@@ -38,6 +38,12 @@ const web = [
     meta: { title: '我的额度' },
     component: () => import('../views/cashing/quota.vue'),
   },
+  {
+    path: '/cashing/quota/detail',
+    name: 'cashing_quota_detail',
+    meta: { title: '我的额度' },
+    component: () => import('../views/cashing/quota-detail.vue'),
+  },
   {
     path: '/cashing/order',
     name: 'cashing_order',

src/views/cashing/parts/list.vue

@@ -0,0 +1,105 @@
+<template>
+  <div id="list">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+            <el-col :span="24" class="name">
+              {{ item.name }}
+            </el-col>
+            <el-col :span="24" class="other">
+              <el-col :span="12" class="other_info textOver">
+                券类型:<span>{{ getWord(item, 'coupons.coupons_type') }}</span>
+              </el-col>
+              <el-col :span="12" class="other_info textOver">
+                折扣类型:<span>{{ getWord(item, 'coupons.discount_type') }}</span>
+              </el-col>
+              <el-col :span="12" class="other_info textOver">
+                适用类型:<span>{{ getWord(item, 'coupons.use_type') }}</span>
+              </el-col>
+              <el-col :span="12" class="other_info textOver">
+                所属分类:<span>{{ getWord(item, 'coupons.classify') }}</span>
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="btn">
+              <el-button type="info" size="mini" @click="detail(item)">查看详情</el-button>
+            </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+const _ = require('lodash');
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'list',
+  props: {
+    list: { type: Array },
+  },
+  components: {},
+  data: function () {
+    return {};
+  },
+  created() {},
+  methods: {
+    getWord(data, model) {
+      return _.get(data, model, '暂无');
+    },
+    detail(data) {
+      console.log(data);
+      this.$router.push({ path: '/cashing/quota/detail', query: { id: data.id } });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .one {
+    .list {
+      background-color: #fff;
+      padding: 8px;
+      border-radius: 5px;
+      margin: 0 0 10px 0;
+      .name {
+        font-size: 16px;
+        font-weight: bold;
+        margin: 0 0 5px 0;
+      }
+      .other {
+        margin: 0 0 5px 0;
+        .other_info {
+          font-size: 14px;
+          color: #666;
+          margin: 0 0 5px 0;
+          span {
+            color: #000;
+          }
+        }
+      }
+      .btn {
+        text-align: center;
+        .el-button {
+          margin: 0 10px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/cashing/quota-detail.vue

@@ -0,0 +1,96 @@
+<template>
+  <div id="quotaDetail">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <el-image :src="coupons"></el-image>
+        </el-col>
+        <el-col :span="24" class="two">
+          <van-cell title="创新券类型" :value="getWord(form, 'coupons.coupons_type')" />
+          <van-cell title="创新券名称" :value="getWord(form, 'coupons.name')" />
+          <van-cell title="折扣类型" :value="getWord(form, 'coupons.discount_type')" />
+          <van-cell title="抵扣比例" :value="getWord(form, 'coupons.scale') + '%'" v-if="form.coupons && form.coupons.discount_type == '折扣券'" />
+          <van-cell title="面额" :value="getWord(form, 'coupons.allowance') + '元'" v-if="form.coupons && form.coupons.discount_type == '定额券'" />
+          <van-cell title="适用服务类型" :value="getWord(form, 'coupons.use_type')" />
+          <van-cell title="所属分类" :value="getWord(form, 'coupons.classify')" />
+          <van-cell title="券总额度" :value="getWord(form, 'coupons.total_allowance') + '元'" />
+          <van-cell title="使用期限" :value="getWord(form, 'coupons.limit_time') + '个月'" />
+          <van-swipe-cell class="desc">
+            <p>描述：</p>
+            <p>{{ getWord(form, 'coupons.desc') || '暂无' }}</p>
+          </van-swipe-cell>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+const _ = require('lodash');
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: couponsApply } = createNamespacedHelpers('couponsApply');
+export default {
+  name: 'quotaDetail',
+  props: {},
+  components: {},
+  data: function () {
+    return {
+      coupons: require('@a/coupons.jpg'),
+      form: {},
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    ...couponsApply(['fetch']),
+    async search() {
+      const res = await this.fetch(this.id);
+      if (this.$checkRes(res)) {
+        this.$set(this, `form`, res.data);
+      }
+    },
+    getWord(data, model) {
+      return _.get(data, model, '');
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .one {
+    margin: 0 0 5px 0;
+    .el-image {
+      width: 100%;
+      height: 180px;
+      /deep/.el-image__inner {
+        border-radius: 8px;
+      }
+    }
+  }
+  .two {
+    .desc {
+      background-color: #fff;
+      padding: 10px 15px;
+      font-size: 14px;
+      p:nth-child(1) {
+        margin: 0 0 5px 0;
+      }
+      p:nth-child(2) {
+        text-indent: 1rem;
+        color: #969799;
+      }
+    }
+  }
+}
+</style>

src/views/cashing/quota.vue

@@ -5,7 +5,10 @@
         <el-col :span="24" class="top">
           <top topType="2" :leftArrow="false"></top>
         </el-col>
-        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }"> 我的额度 </el-col>
+        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
+          <coupons-list :list="list"></coupons-list>
+        </el-col>
+        <page :limit="limit" :total="total" @search="search"></page>
         <el-col :span="24" class="foot">
           <foot :type="1"></foot>
         </el-col>
@@ -17,25 +20,43 @@
 <script>
 import top from '@/layout/common/top.vue';
 import foot from '@/layout/common/foot.vue';
+import page from '@/layout/common/page.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: couponsApply } = createNamespacedHelpers('couponsApply');
 export default {
   name: 'quota',
   props: {},
   components: {
     top,
     foot,
+    page,
+    couponsList: () => import('./parts/list.vue'),
   },
   data: function () {
     return {
       clientHeight: '',
+      list: [],
+      total: 0,
+      limit: '10',
     };
   },
-  async created() {},
+  async created() {
+    this.search();
+  },
   mounted() {
-    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 80;
+    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 135;
     this.$set(this, `clientHeight`, clientHeight);
   },
-  methods: {},
+  methods: {
+    ...couponsApply(['query']),
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      const res = await this.query({ skip, limit, ...info, user_id: this.user.user_id });
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+        this.$set(this, `total`, res.total);
+      }
+    },
+  },
   computed: {
     ...mapState(['user']),
   },
@@ -62,6 +83,8 @@ export default {
   .info {
     overflow-x: hidden;
     overflow-y: auto;
+    background: #f9f9f9;
+    padding: 5px;
   }
   .foot {
     height: 40px;