diff --git a/src/assets/images/laurelClub/background.png b/src/assets/images/laurelClub/background.png
new file mode 100644
index 000000000..2925d8c66
Binary files /dev/null and b/src/assets/images/laurelClub/background.png differ
diff --git a/src/assets/images/laurelClub/pic_page-non.png b/src/assets/images/laurelClub/pic_page-non.png
new file mode 100644
index 000000000..85a19b50d
Binary files /dev/null and b/src/assets/images/laurelClub/pic_page-non.png differ
diff --git a/src/views/ebiz/laurelClub/MembershipList.vue b/src/views/ebiz/laurelClub/MembershipList.vue
index e69de29bb..091141c57 100644
--- a/src/views/ebiz/laurelClub/MembershipList.vue
+++ b/src/views/ebiz/laurelClub/MembershipList.vue
@@ -0,0 +1,278 @@
+<template>
+  <div class="sale-list-container box">
+    <!-- <div class="div100"> -->
+        <img class="backImg" src="@/assets/images/laurelClub/background.png" alt="">
+      <van-sticky>
+        <van-tabs type="card" v-model="active" @change="tabChange" sticky>
+          <van-tab name="GGrade" title="7月桂冠名单"></van-tab>
+          <van-tab name="SGrade" title="7月双冠名单"></van-tab>
+          <van-tab name="Team" title="我的团队"></van-tab>
+        </van-tabs>
+      </van-sticky>
+      <div class="fs12 mt20 mr20 bntCheck" v-if="active == 'Team'">
+          <span :class="[plainStatus=='1'?'unChecked mr2':'checked mr2']">桂冠</span>
+          <span :class="[plainStatus=='0'?'unChecked':'checked']">双冠</span>
+          <!-- <van-button
+              round
+              :plain="plainStatus=='0'"
+              size="small"
+              class="mr5"
+              type="danger"
+              @click="approvalRecordSwitch('1')"
+              >已通过</van-button>
+          <van-button
+              round
+              :plain="plainStatus=='1'"
+              size="small"
+              class="mr5"
+              type="danger"
+              @click="approvalRecordSwitch('0')"
+              >未通过</van-button>            -->
+      </div>
+      <div class="section" v-if="isSuccess">
+        <div v-if="claimApprovalList.length > 0">
+          <div>
+            <div class="w80 inline-b pv15 pr15 pl10 mt15">
+              <van-collapse v-model="activeNames">
+                  <van-collapse-item :name="index" v-for="(item, index) in claimApprovalList" :key="index">
+                    <template #title>
+                        <span class="mr10 fwb">头像</span>
+                        <span class="ml5 mr10 fwb w80 inline-b v-middle" style="word-break: break-all;">{{item.grade}}</span>
+                        <span class="mr10 fwb">{{item.number}}</span>
+                    </template>
+                    <div class="pb10 pt10 border-gb" style="border-top: 1px solid #dadada;">
+                        <div class="w130 inline-b">头像</div>
+                        <div class="w130 inline-b">南宁青秀 王婷婷</div>
+                        <span class="fs14 c-gray-dark ml20">62 冠</span>
+                    </div>
+                  </van-collapse-item>
+              </van-collapse>           
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-else class="text-center bg-white">
+        <img class="mt40 w300 inline-b" src="@/assets/images/laurelClub/pic_page-non.png" />
+        <!-- <div class="fs17 mt40" v-if="active == 'notApproved'">暂无未审批信息！</div>
+        <div class="fs17 mt40" v-if="active == 'approvalRecord'">暂无审批记录！</div> -->
+      </div>
+    </div>
+  <!-- </div> -->
+</template>
+
+
+<script>
+import { Tab, Tabs, Collapse, CollapseItem,Checkbox, CheckboxGroup,Dialog } from 'vant'
+import { queryClaimData } from '@/api/ebiz/claims/claims'
+
+export default {
+  name: 'claimApprovalList',
+  components: {
+    [Tab.name]: Tab,
+    [Tabs.name]: Tabs,
+    [Collapse.name]: Collapse,
+    [CollapseItem.name]: CollapseItem,
+    [Dialog.name]: Dialog,
+    [Checkbox.name]: Checkbox,
+    [CheckboxGroup.name]: CheckboxGroup
+  },
+  data() {
+    return {
+      active: 'GGrade', // GGrade(桂冠) SGrade(双冠) Team(团队)
+      claimApprovalList: [
+        {
+           grade: 1,
+           number:33
+        }, 
+        {
+           grade: 2,
+           number:34
+        }, 
+        {
+           grade: 3,
+           number:35
+        }, 
+        {
+           grade: 4,
+           number:34
+        }, 
+        {
+           grade: 5,
+           number:35
+        }, 
+        {
+           grade: 6,
+           number:36
+        }, 
+      ], //接口数据
+      isSuccess: false, //有无数据显示
+      plainStatus:'1', //审批记录--1已通过，0未通过按钮状态
+      total:0, //统计list中有多少条子数据
+      activeNames:[],//控制展开的面板列表
+    }
+  },
+  created(){
+    this.getList()
+  },
+  mounted() {
+    this.checkBtn() // 初始化显示按钮
+    window.appCallBack = this.appCallBack
+  },
+  methods: {
+    checkBtn() {
+      setTimeout(() => {
+        let title = '会员规则'
+        this.$jump({
+          flag: 'webview_right_button',
+          extra: {
+            btns: [
+              {
+                title: title,
+                title_color: '4473EE'
+              }
+            ]
+          }
+        })
+      }, 500)
+    },
+    appCallBack(data) {
+      if (data.trigger == 'right_button_click') {
+
+      }
+    },
+     //审批记录--切换1已通过，0未通过按钮状态
+    approvalRecordSwitch(plainStatus){
+      this.getList(plainStatus)
+      this.plainStatus = plainStatus
+    },
+    //初始化列表
+    async getList(plainStatus) {
+      let that = this
+      that.total = 0
+      let status
+      that.claimApprovalIds = []
+      //审批记录切换按钮时，1已通过，0未通过按钮状态
+      if(plainStatus){
+         status = plainStatus
+      }else{
+          status = this.active == 'notApproved'?'2':'1'
+      }
+    //   let data = {
+    //     status: status
+    //   }
+      this.$toast.loading({
+        duration: 0, // 持续展示 toast
+        forbidClick: true, // 禁用背景点击
+        loadingType: 'spinner',
+        message: '加载中……'
+      })
+
+    //   let res = await queryClaimData(data)
+      this.$toast.clear()
+    //   if (res.result == '0') {
+        // this.isSuccess = true
+    //     if (res.content.length) {
+    //       this.claimApprovalList = res.content
+    //       this.claimApprovalList.forEach(function(item) {
+    //           item.claimApprovalSearchLst.forEach(function(item01) {
+    //             that.total++  //统计list中有多少条子数据
+    //             that.claimApprovalIds.push(item01.id)
+    //             item01.isChecked = '0'
+    //           })
+    //       })
+    //       that.$forceUpdate();
+    //     }
+    //     if (this.claimApprovalList.length == 0) {
+    //       this.isSuccess = false
+    //     }
+    //   } else {
+    //     this.$toast(res.resultMessage)
+    //   }
+    },
+    tabChange(name) {
+      let that = this
+      this.currentPage = 1
+      this.active = name
+      this.claimApprovalList = []
+      if(this.active == 'approvalRecord'){
+          //当为审批记录时，重置状态为1已通过
+          this.plainStatus = 1
+          this.getList(1)
+      }else{
+          this.getList()
+      }
+      //切换tab时，需要重置右上角的按钮状态--全部展开
+      that.activeNames = []
+      that.isOpen = 0 //右上角按钮状态 0 全部收起 1 全部展开
+      that.checkBtn() // 初始化显示按钮
+    }  
+  }
+}
+</script>
+<style lang="scss" scoped>
+.backImg{
+    width: 100%;
+    height: 317px;
+}
+.box{
+    height: 100vh;
+    background-color:#142162
+}
+/deep/.van-tabs{
+    padding-top:0;
+    .van-tabs__nav--card{
+        box-shadow: 0 0 0 1px rgba(222, 144, 34, 1);
+        border-radius: 4px;
+        border: 1px solid rgba(222, 144, 34, 1);
+        height:40px;
+        .van-tab{
+           color: #333333;
+           border-right: 1px solid #FFE97C;
+           line-height: 10.66667vw;
+        }
+        .van-tab:last-child {
+            border-right: none;
+        }
+    }
+    .van-tab--active{
+        background: linear-gradient(135deg, #30339A 0%, #181935 100%);
+        color: #FFCB6B !important;
+        // border-radius: 5px;
+    }
+}
+.bntCheck{
+    text-align: right;
+    .unChecked{
+       background-color: #fff;
+       color: #333333;
+       border: 1px solid #fff;
+       border-radius: 8px 0 0 8px;
+       width: 45px;
+       height: 20px;
+       line-height: 22px;
+       display: inline-block;
+       text-align: center;
+    }
+    .checked{
+       background: linear-gradient(135deg, #30339A 0%, #181935 100%);       
+       color: #FFCB6B;
+       border: 1px solid rgba(222, 144, 34, 1);
+       border-radius: 0 8px 8px 0;
+       width: 45px;
+       height: 20px;
+       line-height: 22px;
+       display: inline-block;
+       text-align: center;
+    }
+}
+
+  // .div100{
+  //   height: 100%;
+  // }
+  // .section{
+  //   height: 100%;
+  //   overflow-x: hidden;
+  //   overflow-y: scroll;
+  //   -webkit-overflow-scrolling: touch;
+  // }
+</style>