超级会员

src/api/member/manage/manage.js

@@ -7,4 +7,25 @@ export function fetchMemberList(params) {
     params
   })
 }
+export function fetchClubList(params) {
+  return request({
+    url: '/svip/member/findClubList',
+    method: 'get',
+    params
+  })
+}
+export function saveSvip(params) {
+  return request({
+    url: '/svip/member/saveSvip',
+    method: 'post',
+    params
+  })
+}
+export function findHistory(params) {
+  return request({
+    url: '/svip/member/findHistory',
+    method: 'get',
+    params
+  })
+}
 

src/router/modules/member.js

@@ -34,7 +34,7 @@ const memberRouter = {
           hidden: true,
           component: () => import('@/views/member/member/record-list.vue'),
           name: 'MemberRecord',
-          meta: { title: '购买记录', activeMenu: '/member/member' }
+          meta: { title: '购买记录', activeMenu: '/member/member/' }
         }
       ]
     },

src/views/member/member/list.vue

@@ -102,9 +102,9 @@
               </span>
             </template>
           </el-table-column>
-          <el-table-column label="地址" width="75">
-            <template>
-              <el-button type="text" size="mini">购买记录</el-button>
+          <el-table-column label="操作" width="75">
+            <template slot-scope="{ row }">
+              <el-button type="text" size="mini" @click="handleTagsList(row)">购买记录</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -116,22 +116,36 @@
           :page-size="20"
           :page.sync="listQuery.pageNum"
           :limit.sync="listQuery.pageSize"
+          @pagination="getList"
         />
       </template>
       <template v-else>
         <div class="filter-container">
           <div class="filter-control">
             <el-form :model="form" label-width="120px">
-              <el-form-item label="机构">
-                <el-button type="text" size="mini" @click="dialogTableVisible = true">请选择机构</el-button>
+              <el-form-item label="机构" :hidden="!hiddenItem">
+                <el-button type="text" size="mini" @click="getclubList()">请选择机构</el-button>
+              </el-form-item>
+              <el-form-item label="机构" :hidden="hiddenItem">
+                <el-table :data="clubData" border>
+                  <el-table-column prop="clubId" label="机构Id" />
+                  <el-table-column prop="name" label="机构名称" width="150px" />
+                  <el-table-column prop="linkMan" label="联系人" />
+                  <el-table-column prop="contractMobile" label="手机号" width="120px" />
+                  <el-table-column label="操作">
+                    <template slot-scope="{ row }">
+                      <el-button type="text" @click="deleteClub(row)">删除</el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
               </el-form-item>
               <el-form-item label="赠送会员">
-                <el-input v-model="form.month" size="mini">
+                <el-input v-model="form.month" size="mini" style="width: 150px">
                   <template slot="append">个月</template>
                 </el-input>
               </el-form-item>
               <el-form-item>
-                <el-button type="primary" size="mini">保存</el-button>
+                <el-button type="primary" size="mini" @click="save()">保存</el-button>
               </el-form-item>
             </el-form>
           </div>
@@ -169,25 +183,26 @@
           <el-button type="primary">搜索</el-button>
         </div>
       </div>
-      <el-table ref="table" :data="clubTableData" @select="handleSelect">
+      <el-table ref="table" :data="clubTableData" height="350px" @select="handleSelect">
         <el-table-column type="selection" width="55" />
         <el-table-column property="clubId" label="机构Id" width="150" />
-        <el-table-column property="clubName" label="机构名称" width="150" />
-        <el-table-column property="sname" label="机构简称" width="200" />
+        <el-table-column property="name" label="机构名称" width="150" />
+        <el-table-column property="shortName" label="机构简称" width="200" />
         <el-table-column property="linkMan" label="联系人" />
-        <el-table-column property="mobile" label="地址" />
+        <el-table-column property="contractMobile" label="手机号" />
       </el-table>
       <div slot="footer">
-        <el-button type="primary">确定</el-button>
+        <el-button type="primary" @click="pushClub()">确定</el-button>
         <el-button type="primary" @click="dialogTableVisible = false">取消</el-button>
       </div>
       <!-- 页码 -->
       <pagination
         :total="clubTotal"
-        :page-sizes="[100]"
-        :page-size="100"
-        :page.sync="listQuery.pageNum"
-        :limit.sync="listQuery.pageSize"
+        :page-sizes="[20, 30, 50, 100]"
+        :page-size="20"
+        :page.sync="clubForm.pageNum"
+        :limit.sync="clubForm.pageSize"
+        @pagination="getclubList"
       />
     </el-dialog>
   </div>
@@ -195,7 +210,7 @@
 
 <script>
 
-import { fetchMemberList } from '@/api/member/manage/manage'
+import { fetchMemberList, fetchClubList, saveSvip } from '@/api/member/manage/manage'
 
 const defaultListQuery = {
   clubName: '', // 机构名称
@@ -322,6 +337,9 @@ export default {
       total: 0,
       tableData: [],
       form: {
+        clubId: 0,
+        userId: 0,
+        contractMobile: 0,
         month: 0
       },
       dialogTableVisible: false,
@@ -330,37 +348,18 @@ export default {
       clubForm: {
         clubId: 0,
         clubName: '',
-        sname: ''
+        sname: '',
+        pageNum: 1,
+        pageSize: 20
       },
       // 机构选择
       radio: 1,
-      clubTableData: [
-        {
-          clubId: 1,
-          clubName: '2016-05-03',
-          sname: '555',
-          linkMan: '王小虎',
-          mobile: '15874692135'
-        }, {
-          clubId: 2,
-          clubName: '2016-05-03',
-          sname: '555',
-          linkMan: '王小虎',
-          mobile: '15874692135'
-        }, {
-          clubId: 3,
-          clubName: '2016-05-03',
-          sname: '555',
-          linkMan: '王小虎',
-          mobile: '15874692135'
-        }, {
-          clubId: 4,
-          clubName: '2016-05-03',
-          sname: '555',
-          linkMan: '王小虎',
-          mobile: '15874692135'
-        }
-      ]
+      hiddenItem: true,
+      clubTableData: [],
+      // 选择机构
+      rows: [],
+      // 机构数据
+      clubData: []
     }
   },
   created() {
@@ -371,7 +370,8 @@ export default {
     handleSelect(selection, row) {
       this.$refs.table.clearSelection()
       this.$refs.table.toggleRowSelection(row)
-      console.log('row', row)
+      this.rows = row
+      console.log('row', this.rows)
     },
     // 会员列表数据
     async getList() {
@@ -380,6 +380,36 @@ export default {
       this.tableData = res.data.results
       this.total = res.data.totalRecord
       this.isLoading = false
+    },
+    async getclubList() {
+      this.dialogTableVisible = true
+      const res = await fetchClubList(this.clubForm)
+      this.clubTableData = res.data.results
+      this.clubTotal = res.data.totalRecord
+    },
+    pushClub() {
+      this.clubData.push(this.rows)
+      this.dialogTableVisible = false
+      this.row = []
+      this.hiddenItem = false
+      console.log(this.clubData)
+    },
+    // 清除机构
+    deleteClub(row) {
+      this.clubData = []
+      this.hiddenItem = true
+    },
+    async save() {
+      this.form.clubId = this.clubData[0].clubId
+      this.form.userId = this.clubData[0].userId
+      this.form.contractMobile = this.clubData[0].contractMobile
+      const res = await saveSvip(this.form)
+      if (res.code === 1) {
+        this.deleteClub()
+      }
+    },
+    handleTagsList(row) {
+      this.$router.push({ path: '/member/member/record-list', query: { clubId: row.clubId, userId: row.userId }})
     }
   }
 }

src/views/member/member/record-list.vue

@@ -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>