会员名单UI完成

src/api/ebiz/laurelClub/laurelClub.js

@@ -126,3 +126,32 @@ export function revokeOrder(data) {
     data
   })
 }
+//--------以上不属于桂冠俱乐部----------------
+//桂冠俱乐部
+
+// 会员等级列表
+export function queryLaureList(data) {
+  return request({
+    url: getUrl('/agent/laure/queryLaureList', 1),
+    method: 'post',
+    data
+  })
+}
+
+// 会员名单列表
+export function queryLaureMemberList(data) {
+  return request({
+    url: getUrl('/agent/laure/queryLaureMemberList', 1),
+    method: 'post',
+    data
+  })
+}
+
+// 获取当前登录人机构信息
+export function getBranchByUser(data) {
+  return request({
+    url: getUrl('/data/branch/getBranchByUser', 1),
+    method: 'post',
+    data
+  })
+}

src/views/ebiz/laurelClub/MembershipList.vue

@@ -1,69 +1,83 @@
 <template>
   <div class="sale-list-container box">
     <!-- <div class="div100"> -->
-        <img class="backImg" src="@/assets/images/laurelClub/background.png" alt="">
-      <van-sticky>
+      <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="GGrade" :title="prevDate+'月桂冠名单'"></van-tab>
+          <van-tab name="SGrade" :title="prevDate+'月双冠名单'"></van-tab>
           <van-tab name="Team" title="我的团队"></van-tab>
         </van-tabs>
-      </van-sticky>
+      </van-sticky> -->
+      <!-- 内勤 1 外勤 0 -->
+      <div class="fs12 bntTab" v-if="branchType == '1'"> 
+          <span :class="[active=='GGrade'?'tabLeft mr2':'unTabLeft mr2']" @click="tabChange('GGrade')">{{prevDate}}月桂冠名单</span>
+          <span :class="[active=='SGrade'?'tabMiddle mr2':'unTabMiddle mr2']" @click="tabChange('SGrade')">{{prevDate}}月桂冠名单</span>
+          <span :class="[active=='Team'?'tabRight':'unTabRight']" @click="tabChange('Team')">我的团队</span>
+      </div>
+      <div class="fs12 bntTab" v-else-if="branchType == '0'"> 
+          <span :class="[active=='GGrade'?'tabLeft mr2':'unTabLeft mr2']" @click="tabChange('GGrade')">{{prevDate}}月桂冠名单</span>
+          <span :class="[active=='SGrade'?'tabRight mr2':'unTabRight mr2']" @click="tabChange('SGrade')">{{prevDate}}月桂冠名单</span>
+      </div>
       <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>            -->
+          <span :class="[plainStatus=='1'?'unCheckedLeft mr2':'checkedLeft mr2']" @click="approvalRecordSwitch('1')">桂冠</span>
+          <span :class="[plainStatus=='0'?'unCheckedRight':'checkedRight']" @click="approvalRecordSwitch('0')">双冠</span>
       </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">
+            <div class="pv15 pr15 pl15 mt15">
+              <van-collapse v-model="activeNames" :border='false'>
+                  <van-collapse-item :name="index" v-for="(item, index) in claimApprovalList" :key="index" :border='false'>
                     <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>
+                      <!-- 会员等级 01-正式会员 02-铜牌会员 03-银牌会员 04-金牌会员 05-白金会员 06-终身会员 -->
+                        <img v-if="item.grade == '01'" class="iconGrade" src="@/assets/images/laurelClub/grade01.png" alt="">
+                        <img v-else-if="item.grade == '02'" class="iconGrade" src="@/assets/images/laurelClub/grade02.png" alt="">
+                        <img v-else-if="item.grade == '03'" class="iconGrade" src="@/assets/images/laurelClub/grade03.png" alt="">
+                        <img v-else-if="item.grade == '04'" class="iconGrade" src="@/assets/images/laurelClub/grade04.png" alt="">
+                        <img v-else-if="item.grade == '05'" class="iconGrade" src="@/assets/images/laurelClub/grade05.png" alt="">
+                        <img v-else-if="item.grade == '06'" class="iconGrade" src="@/assets/images/laurelClub/grade06.png" alt="">
+                        <span class="ml20 mr10 fwb w80 inline-b v-middle" style="word-break: break-all;">{{item.grade | statusFormat}}</span>
+                        <span class="ml100 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 class="pb10 pt10 border-t border-gb">
+                        <img class="iconGrade mr30" src="@/assets/images/laurelClub/touxiang.png" alt="">
+                        <div class="w100 inline-b v-middle">南宁青秀<br> 王婷婷</div>
+                        <span class="fs14 c-gray-dark ml80">62 冠</span>
                     </div>
+                    <div class="pb10 pt10 border-gb">
+                         <img class="iconGrade mr30" src="@/assets/images/laurelClub/touxiang.png" alt="">
+                        <div class="w100 inline-b v-middle">南宁青秀<br> 王婷婷</div>
+                        <span class="fs14 c-gray-dark ml80">62 冠</span>
+                    </div>
+                    <div class="pb10 pt10 border-gb">
+                         <img class="iconGrade mr30" src="@/assets/images/laurelClub/touxiang.png" alt="">
+                        <div class="w100 inline-b v-middle">南宁青秀<br> 王婷婷</div>
+                        <span class="fs14 c-gray-dark ml80">62 冠</span>
+                    </div>
+                    <div @click="putAwayFunc(index)" class="m-bottom white">收起<img class="w20 h20" src="@/assets/images/laurelClub/putAway.png" alt=""></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 v-else class="text-center bg-white m20 borderYellow p20">
+        <img class="w300 inline-b" src="@/assets/images/laurelClub/pic_page-non.png" />
       </div>
+      <van-popup v-model="show">
+        <img class="w12 h12 inline-b btnClose" @click="closeFunc" src="@/assets/images/laurelClub/close.png" />
+        <img src="@/assets/images/laurelClub/ruleBack.png" alt="">
+      </van-popup>
     </div>
   <!-- </div> -->
 </template>
 
 
 <script>
-import { Tab, Tabs, Collapse, CollapseItem,Checkbox, CheckboxGroup,Dialog } from 'vant'
-import { queryClaimData } from '@/api/ebiz/claims/claims'
+import { Tab, Tabs, Collapse, CollapseItem,Checkbox, CheckboxGroup,Dialog,Popup } from 'vant'
+import { getAgentInfo } from '@/api/ebiz/my/my'
+import { queryLaureList,queryLaureMemberList,getBranchByUser } from '@/api/ebiz/laurelClub/laurelClub'
 
 export default {
   name: 'claimApprovalList',
@@ -74,40 +88,43 @@ export default {
     [CollapseItem.name]: CollapseItem,
     [Dialog.name]: Dialog,
     [Checkbox.name]: Checkbox,
-    [CheckboxGroup.name]: CheckboxGroup
+    [CheckboxGroup.name]: CheckboxGroup,
+    [Popup.name]: Popup
   },
   data() {
     return {
+      prevDate:new Date().getMonth(), //上月月份
+      branchType: null, // 1内勤 0外勤
+      show: false, //弹框是否显示
       active: 'GGrade', // GGrade(桂冠) SGrade(双冠) Team(团队)
       claimApprovalList: [
         {
-           grade: 1,
+           grade: '01',
            number:33
         }, 
         {
-           grade: 2,
+           grade: '02',
            number:34
         }, 
         {
-           grade: 3,
+           grade: '03',
            number:35
         }, 
         {
-           grade: 4,
+           grade: '04',
            number:34
         }, 
         {
-           grade: 5,
+           grade: '05',
            number:35
         }, 
         {
-           grade: 6,
+           grade: '06',
            number:36
         }, 
       ], //接口数据
       isSuccess: false, //有无数据显示
       plainStatus:'1', //审批记录--1已通过，0未通过按钮状态
-      total:0, //统计list中有多少条子数据
       activeNames:[],//控制展开的面板列表
     }
   },
@@ -117,8 +134,47 @@ export default {
   mounted() {
     this.checkBtn() // 初始化显示按钮
     window.appCallBack = this.appCallBack
+    this.initThisPage()
   },
   methods: {
+    //获取当前人是否内外勤接口
+    async initThisPage() {
+      const res = await getAgentInfo({})
+      if (res.result == 0) {
+        // res.branchType 以N打头的是内勤 其他是外勤
+        this.branchType = /^N{1}/.test(res.branchType) ? '1' : '0'
+      }
+    },
+    //tab按钮切换
+    tabChange(active) {
+      let that = this
+      this.active = active
+      if(active == 'GGrade'){
+        
+      }
+      //切换tab时，需要重置右上角的按钮状态--全部展开
+      that.activeNames = []
+
+
+      // this.claimApprovalList = []
+      // if(this.active == 'approvalRecord'){
+      //     //当为审批记录时，重置状态为1已通过
+      //     this.plainStatus = 1
+      //     this.getList(1)
+      // }else{
+      //     this.getList()
+      // }
+    },
+    //底部收起按钮
+    putAwayFunc(id){
+      var index = this.activeNames.findIndex(item =>{
+          if(item == id){
+             return true
+          }
+        })
+      this.activeNames.splice(index,1)
+    },
+    // 右上角按钮
     checkBtn() {
       setTimeout(() => {
         let title = '会员规则'
@@ -137,8 +193,12 @@ export default {
     },
     appCallBack(data) {
       if (data.trigger == 'right_button_click') {
-
+         this.show = true
       }
+    },
+    //关闭方法会员规则弹层
+    closeFunc(){
+      this.show = false
     },
      //审批记录--切换1已通过，0未通过按钮状态
     approvalRecordSwitch(plainStatus){
@@ -170,7 +230,7 @@ export default {
     //   let res = await queryClaimData(data)
       this.$toast.clear()
     //   if (res.result == '0') {
-        // this.isSuccess = true
+        this.isSuccess = true
     //     if (res.content.length) {
     //       this.claimApprovalList = res.content
     //       this.claimApprovalList.forEach(function(item) {
@@ -188,47 +248,132 @@ export default {
     //   } 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()
+    } 
+  },
+  filters: {
+    statusFormat: function(status) {
+      let text
+      switch (status) {
+        case '01':
+          text = '正式会员'
+          break
+        case '02':
+          text = '铜牌会员'
+          break
+        case '03':
+          text = '银牌会员'
+          break
+        case '04':
+          text = '金牌会员'
+          break
+        case '05':
+          text = '白金会员'
+          break
+        case '06':
+          text = '终身会员'
+          break
       }
-      //切换tab时，需要重置右上角的按钮状态--全部展开
-      that.activeNames = []
-      that.isOpen = 0 //右上角按钮状态 0 全部收起 1 全部展开
-      that.checkBtn() // 初始化显示按钮
-    }  
+      return text
+    }
   }
 }
 </script>
 <style lang="scss" scoped>
+.box{
+    min-height: 100vh;
+    background-color:#142162
+}
+// 顶部背景图
 .backImg{
     width: 100%;
     height: 317px;
 }
-.box{
-    height: 100vh;
-    background-color:#142162
+// 顶部tab按钮
+.bntTab{
+  margin-top: -25px;
+  text-align: center;
+  .unTabLeft{
+      background-color: #fff;
+      color: #333333;
+      border: 1px solid #fff;
+      border-radius: 10px 0 0 10px;
+      width: 114px;
+      height: 40px;
+      line-height: 40px;
+      display: inline-block;
+      text-align: center;
+  }
+  .tabLeft{
+      background: linear-gradient(135deg, #30339A 0%, #181935 100%);       
+      color: #FFCB6B;
+      border: 1px solid rgba(222, 144, 34, 1);
+      border-radius: 10px 0 0 10px;
+      width: 114px;
+      height: 40px;
+      line-height: 40px;
+      display: inline-block;
+      text-align: center;
+  }
+  .unTabMiddle{
+      background-color: #fff;
+      color: #333333;
+      border: 1px solid #fff;
+      // border-radius: 8px 0 0 8px;
+      width: 114px;
+      height: 40px;
+      line-height: 40px;
+      display: inline-block;
+      text-align: center;
+  }
+  .tabMiddle{
+      background: linear-gradient(135deg, #30339A 0%, #181935 100%);       
+      color: #FFCB6B;
+      border: 1px solid rgba(222, 144, 34, 1);
+      // border-radius: 8px 0 0 8px;
+      width: 114px;
+      height: 40px;
+      line-height: 40px;
+      display: inline-block;
+      text-align: center;
+  }
+  .unTabRight{
+      background-color: #fff;
+      color: #333333;
+      border: 1px solid #fff;
+      border-radius: 0 10px 10px 0;
+     width: 114px;
+      height: 40px;
+      line-height: 40px;
+      display: inline-block;
+      text-align: center;
+  }
+  .tabRight{
+      background: linear-gradient(135deg, #30339A 0%, #181935 100%);       
+      color: #FFCB6B;
+      border: 1px solid rgba(222, 144, 34, 1);
+      border-radius: 0 10px 10px 0;
+      width: 114px;
+      height: 40px;
+      line-height: 40px;
+      display: inline-block;
+      text-align: center;
+  }
 }
+
 /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-radius: 10px;
         border: 1px solid rgba(222, 144, 34, 1);
         height:40px;
+        background-color: transparent;
         .van-tab{
            color: #333333;
-           border-right: 1px solid #FFE97C;
+           border-right: 1px solid rgba(222, 144, 34, 1);
            line-height: 10.66667vw;
+          //  margin-right: 5px;
+           background-color: #fff;
         }
         .van-tab:last-child {
             border-right: none;
@@ -237,27 +382,49 @@ export default {
     .van-tab--active{
         background: linear-gradient(135deg, #30339A 0%, #181935 100%);
         color: #FFCB6B !important;
-        // border-radius: 5px;
     }
 }
+//桂冠，双冠按钮
 .bntCheck{
     text-align: right;
-    .unChecked{
+    .unCheckedLeft{
        background-color: #fff;
        color: #333333;
        border: 1px solid #fff;
-       border-radius: 8px 0 0 8px;
+       border-radius: 10px 0 0 10px;
        width: 45px;
        height: 20px;
        line-height: 22px;
        display: inline-block;
        text-align: center;
     }
-    .checked{
+    .checkedLeft{
        background: linear-gradient(135deg, #30339A 0%, #181935 100%);       
        color: #FFCB6B;
        border: 1px solid rgba(222, 144, 34, 1);
-       border-radius: 0 8px 8px 0;
+       border-radius: 10px 0 0 10px;
+       width: 45px;
+       height: 20px;
+       line-height: 22px;
+       display: inline-block;
+       text-align: center;
+    }
+    .unCheckedRight{
+       background-color: #fff;
+       color: #333333;
+       border: 1px solid #fff;
+       border-radius: 0 10px 10px 0;
+       width: 45px;
+       height: 20px;
+       line-height: 22px;
+       display: inline-block;
+       text-align: center;
+    }
+    .checkedRight{
+       background: linear-gradient(135deg, #30339A 0%, #181935 100%);       
+       color: #FFCB6B;
+       border: 1px solid rgba(222, 144, 34, 1);
+       border-radius: 0 10px 10px 0;
        width: 45px;
        height: 20px;
        line-height: 22px;
@@ -265,7 +432,70 @@ export default {
        text-align: center;
     }
 }
+.borderYellow{
+  border: 2px solid rgba(222, 144, 34, 1);
+  border-radius:4px;
+}
+//折叠面板样式
+/deep/.van-collapse{
+  .van-collapse-item{
+    border: 2px solid rgba(222, 144, 34, 1);
+    border-radius:10px;
+    margin-bottom: 30px;
+    background-color: #fff;
+    position: relative;
+    .van-cell{
+      background-color: transparent;
+      padding: 13px 15px;
+    }
+    .van-collapse-item__content{
+      padding-top: 0;
+      background-color: transparent;
+    }
+    .m-bottom{
+      position: absolute;
+      bottom: -23px;
+      left: 150px;
+      img{
+        vertical-align: text-bottom;
+      }
+    }
+  }
+}
+//隐藏顶部线条
+.van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after,.van-hairline--top::after{
+  border-width: 0;
+}
+.border-t{
+  border-top: 1px solid #dadada;
+}
 
+/deep/#app .van-cell:not(:last-child)::after {
+    border-bottom: 1px solid red !important;
+}
+
+.iconGrade{
+  width: 30px;
+  height: 30px;
+  vertical-align: middle;
+}
+//会员规则弹层
+/deep/.van-popup--center{
+  position: fixed;
+  width: 80%;
+  height: 80%;
+  border-radius: 8px;
+  background-color: #142162;
+  border: 2px solid rgba(222, 144, 34, 1);
+  img{
+    width: 100%;
+  }
+  .btnClose{
+    position: absolute;
+    right: 12px;
+    top: 13px;
+  }
+}
   // .div100{
   //   height: 100%;
   // }