From 3b3e03df8846ee6ee20e32ae105c37e11e33427e Mon Sep 17 00:00:00 2001
From: liyuetong <li.yuetong@ebiz-fooge.com>
Date: Thu, 12 Aug 2021 17:51:35 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E8=81=94=E8=B0=83=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ebiz/laurelClub/MembershipList.vue | 678 ++++++++++---------
 1 file changed, 344 insertions(+), 334 deletions(-)

diff --git a/src/views/ebiz/laurelClub/MembershipList.vue b/src/views/ebiz/laurelClub/MembershipList.vue
index 709c675a7..a98a61b93 100644
--- a/src/views/ebiz/laurelClub/MembershipList.vue
+++ b/src/views/ebiz/laurelClub/MembershipList.vue
@@ -1,86 +1,73 @@
 <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="prevDate+'月桂冠名单'"></van-tab>
-          <van-tab name="SGrade" :title="prevDate+'月双冠名单'"></van-tab>
-          <van-tab name="Team" title="我的团队"></van-tab>
-        </van-tabs>
-      </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'?'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="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>
-                      <!-- 会员等级 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-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>
+    <img class="backImg" src="@/assets/images/laurelClub/background.png" alt="" />
+    <!-- 内勤 1 外勤 0（区部组） -->
+    <div class="fs12 bntTab" v-if="branchType == '0'">
+      <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 == '1'">
+      <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 == 'GGrade' ? 'checkedLeft mr2' : 'unCheckedLeft mr2']" @click="approvalRecordSwitch('GGrade')">桂冠</span>
+      <span :class="[plainStatus == 'SGrade' ? 'checkedRight' : 'unCheckedRight']" @click="approvalRecordSwitch('SGrade')">双冠</span>
+    </div>
+    <div class="section" v-if="isSuccess">
+      <div v-if="list.length > 0">
+        <div>
+          <div class="pv15 pr15 pl15 mt15">
+            <van-collapse v-model="activeNames" :border="false" @change="collapseChange">
+              <van-collapse-item :class="[item.status == '0' ? 'mb20' : 'mb45']" :name="index" v-for="(item, index) in list" :key="index" :border="false">
+                <template #title>
+                  <!-- 会员等级 01-正式会员 02-铜牌会员 03-银牌会员 04-金牌会员 05-白金会员 06-终身会员 -->
+                  <img v-if="item.level == '01'" class="iconGrade" src="@/assets/images/laurelClub/grade01.png" alt="" />
+                  <img v-else-if="item.level == '02'" class="iconGrade" src="@/assets/images/laurelClub/grade02.png" alt="" />
+                  <img v-else-if="item.level == '03'" class="iconGrade" src="@/assets/images/laurelClub/grade03.png" alt="" />
+                  <img v-else-if="item.level == '04'" class="iconGrade" src="@/assets/images/laurelClub/grade04.png" alt="" />
+                  <img v-else-if="item.level == '05'" class="iconGrade" src="@/assets/images/laurelClub/grade05.png" alt="" />
+                  <img v-else-if="item.level == '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.level | statusFormat }}</span>
+                  <span class="ml100 fwb">{{ item.count }}人</span>
+                </template>
+                <div class="pb10 pt10 border-tb" v-for="(item01, index01) in item.queryLaureMemberList" :key="index01">
+                  <img class="iconGrade mr30" :src="item01.agentHeadImgUrl" alt="" />
+                  <div class="w100 inline-b v-middle">
+                    {{ item01.managerComName }}<br />
+                    {{ item01.name }}
+                  </div>
+                  <span class="fs14 c-gray-dark ml80">{{ item01.crownLevel }}冠</span>
+                </div>
+                <div v-if="item.status == '1'" @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 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 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,Popup } from 'vant'
-import { getAgentInfo } from '@/api/ebiz/my/my'
-import { queryLaureList,queryLaureMemberList,getBranchByUser } from '@/api/ebiz/laurelClub/laurelClub'
+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',
+  name: 'list',
   components: {
     [Tab.name]: Tab,
     [Tabs.name]: Tabs,
@@ -93,86 +80,120 @@ export default {
   },
   data() {
     return {
-      prevDate:new Date().getMonth(), //上月月份
+      prevDate: new Date().getMonth(), //上月月份
       branchType: null, // 1内勤 0外勤
       show: false, //弹框是否显示
       active: 'GGrade', // GGrade(桂冠) SGrade(双冠) Team(团队)
-      claimApprovalList: [
-        {
-           grade: '01',
-           number:33
-        }, 
-        {
-           grade: '02',
-           number:34
-        }, 
-        {
-           grade: '03',
-           number:35
-        }, 
-        {
-           grade: '04',
-           number:34
-        }, 
-        {
-           grade: '05',
-           number:35
-        }, 
-        {
-           grade: '06',
-           number:36
-        }, 
-      ], //接口数据
+      list: [], //接口数据
       isSuccess: false, //有无数据显示
-      plainStatus:'1', //审批记录--1已通过，0未通过按钮状态
-      activeNames:[],//控制展开的面板列表
+      plainStatus: 'GGrade', //我的团队--切换GGrade(桂冠) SGrade(双冠)
+      activeNames: [], //控制展开的面板列表
+      qubranchattr: '', //总监区的编码
+      bubranchattr: '', //营业部的编码
+      zubranchattr: '' //营业组的编码
     }
   },
-  created(){
-    this.getList()
-  },
+  created() {},
   mounted() {
     this.checkBtn() // 初始化显示按钮
     window.appCallBack = this.appCallBack
-    this.initThisPage()
+    // this.initThisPage()
+    this.getBranchByUserFunc()
   },
   methods: {
-    //获取当前人是否内外勤接口
-    async initThisPage() {
-      const res = await getAgentInfo({})
+    //获取当前登录人机构信息
+    async getBranchByUserFunc() {
+      const res = await getBranchByUser({})
       if (res.result == 0) {
-        // res.branchType 以N打头的是内勤 其他是外勤
-        this.branchType = /^N{1}/.test(res.branchType) ? '1' : '0'
+        // 机构等级(06-区  07-部  08-组  只有这三个显示'我的团队' )
+        let level = res.content.level
+        if (level == '06') {
+          this.qubranchattr = res.content.code
+        } else if (level == '07') {
+          this.bubranchattr = res.content.code
+        } else if (level == '08') {
+          this.zubranchattr = res.content.code
+        }
+        if (level == '06' || level == '07' || level == '08') {
+          this.branchType = 0
+        } else {
+          this.branchType = 1
+        }
+        this.getList()
       }
     },
-    //tab按钮切换
-    tabChange(active) {
+    //获取当前人是否内外勤接口
+    // async initThisPage() {
+    //   const res = await getAgentInfo({})
+    //   if (res.result == 0) {
+    //     // res.branchType 以N打头的是内勤 其他是外勤
+    //     this.branchType = /^N{1}/.test(res.branchType) ? '1' : '0'
+    //   }
+    // },
+    //折叠面板
+    collapseChange(activeNames) {
       let that = this
-      this.active = active
-      if(active == 'GGrade'){
-        
+      //0 收起 1 展开
+      //重置每条数据为收起状态
+      this.list.forEach(function (item) {
+        item.status = '0'
+      })
+      //数据展开
+      if (activeNames.length) {
+        activeNames.forEach(function (item) {
+          that.list[item].status = '1'
+        })
       }
-      //切换tab时，需要重置右上角的按钮状态--全部展开
-      that.activeNames = []
-
-
-      // this.claimApprovalList = []
-      // if(this.active == 'approvalRecord'){
-      //     //当为审批记录时，重置状态为1已通过
-      //     this.plainStatus = 1
-      //     this.getList(1)
-      // }else{
-      //     this.getList()
-      // }
+      //展开状态的数据，会员名单取值
+      this.list.forEach(function (item) {
+        if (item.queryLaureMemberList.length == 0 && item.status == '1') {
+          //返回值从Promise中取值PromiseValue
+          var a = Promise.resolve(that.getQueryLaureMemberListFunc(item))
+          // Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: "xx"}
+          a.then(function (result) {
+            item.queryLaureMemberList = result
+          })
+        }
+      })
+      setTimeout(() => {
+        this.$forceUpdate()
+      }, 1000)
+    },
+    //获取会员名单列表接口
+    async getQueryLaureMemberListFunc(item) {
+      let data = {
+        type: '',
+        monthStr: item.monthStr,
+        level: item.level,
+        qubranchattr: '',
+        bubranchattr: '',
+        zubranchattr: ''
+      }
+      if (this.active == 'Team') {
+        data.type = this.plainStatus
+        data.qubranchattr = this.qubranchattr
+        data.bubranchattr = this.bubranchattr
+        data.zubranchattr = this.zubranchattr
+      } else {
+        data.type = this.active
+      }
+      let content = []
+      const res = await queryLaureMemberList(data)
+      if (res.result == 0) {
+        content = res.content
+      }
+      return content
     },
     //底部收起按钮
-    putAwayFunc(id){
-      var index = this.activeNames.findIndex(item =>{
-          if(item == id){
-             return true
-          }
-        })
-      this.activeNames.splice(index,1)
+    putAwayFunc(id) {
+      var index = this.activeNames.findIndex((item) => {
+        if (item == id) {
+          return true
+        }
+      })
+      this.activeNames.splice(index, 1)
+      //控制展开的面板列表数据变化时，重新定义展开收起时的margin-bottom值
+      this.collapseChange(this.activeNames)
     },
     // 右上角按钮
     checkBtn() {
@@ -193,33 +214,51 @@ export default {
     },
     appCallBack(data) {
       if (data.trigger == 'right_button_click') {
-         this.show = true
+        this.show = true
       }
     },
     //关闭方法会员规则弹层
-    closeFunc(){
+    closeFunc() {
       this.show = false
     },
-     //审批记录--切换1已通过，0未通过按钮状态
-    approvalRecordSwitch(plainStatus){
-      this.getList(plainStatus)
-      this.plainStatus = plainStatus
+    //我的团队--切换GGrade(桂冠) SGrade(双冠)
+    approvalRecordSwitch(plainStatus) {
+      if (this.plainStatus != plainStatus) {
+        this.plainStatus = plainStatus
+        this.getList()
+      }
+    },
+    //tab按钮切换
+    tabChange(active) {
+      let that = this
+      if (this.active != active) {
+        this.active = active
+        this.getList()
+        //切换tab时，需要重置右上角的按钮状态--全部展开
+        that.activeNames = []
+      }
     },
     //初始化列表
-    async getList(plainStatus) {
+    async getList() {
       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 = {
+        type: '',
+        qubranchattr: '',
+        bubranchattr: '',
+        zubranchattr: ''
       }
-    //   let data = {
-    //     status: status
-    //   }
+      that.activeNames = []
+      //我的团队--切换GGrade(桂冠) SGrade(双冠)
+      if (this.active == 'Team') {
+        data.type = this.plainStatus
+        data.qubranchattr = this.qubranchattr
+        data.bubranchattr = this.bubranchattr
+        data.zubranchattr = this.zubranchattr
+      } else {
+        data.type = this.active
+      }
+
       this.$toast.loading({
         duration: 0, // 持续展示 toast
         forbidClick: true, // 禁用背景点击
@@ -227,31 +266,35 @@ export default {
         message: '加载中……'
       })
 
-    //   let res = await queryClaimData(data)
+      let res = await queryLaureList(data)
       this.$toast.clear()
-    //   if (res.result == '0') {
+      if (res.result == '0') {
+        this.list = []
         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)
-    //   }
-    } 
+        if (res.content.length) {
+          this.list = res.content
+          this.list.forEach(function (item) {
+            item.status = '0' //0 收起 1 展开
+            item.queryLaureMemberList = []
+            //返回值从Promise中取值PromiseValue
+            //用async/await来发送异步请求，从服务端获取数据，它的调用会返回一个promise对象
+            var a = Promise.resolve(that.getQueryLaureMemberListFunc(item))
+            a.then(function (result) {
+              item.queryLaureMemberList = result
+            })
+          })
+          that.$forceUpdate()
+        }
+        if (this.list.length == 0) {
+          this.isSuccess = false
+        }
+      } else {
+        this.$toast(res.resultMessage)
+      }
+    }
   },
   filters: {
-    statusFormat: function(status) {
+    statusFormat: function (status) {
       let text
       switch (status) {
         case '01':
@@ -279,230 +322,197 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.box{
-    min-height: 100vh;
-    background-color:#142162
+.box {
+  min-height: 100vh;
+  background-color: #142162;
 }
 // 顶部背景图
-.backImg{
-    width: 100%;
-    height: 317px;
+.backImg {
+  width: 100%;
+  height: 317px;
 }
 // 顶部tab按钮
-.bntTab{
+.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;
+  .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;
+  .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;
+  .unTabMiddle {
+    background-color: #fff;
+    color: #333333;
+    border: 1px solid #fff;
+    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;
+  .tabMiddle {
+    background: linear-gradient(135deg, #30339a 0%, #181935 100%);
+    color: #ffcb6b;
+    border: 1px solid rgba(222, 144, 34, 1);
+    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;
+  .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;
+  .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: 10px;
-        border: 1px solid rgba(222, 144, 34, 1);
-        height:40px;
-        background-color: transparent;
-        .van-tab{
-           color: #333333;
-           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;
-        }
-    }
-    .van-tab--active{
-        background: linear-gradient(135deg, #30339A 0%, #181935 100%);
-        color: #FFCB6B !important;
-    }
-}
 //桂冠，双冠按钮
-.bntCheck{
-    text-align: right;
-    .unCheckedLeft{
-       background-color: #fff;
-       color: #333333;
-       border: 1px solid #fff;
-       border-radius: 10px 0 0 10px;
-       width: 45px;
-       height: 20px;
-       line-height: 22px;
-       display: inline-block;
-       text-align: center;
-    }
-    .checkedLeft{
-       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: 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;
-       display: inline-block;
-       text-align: center;
-    }
+.bntCheck {
+  text-align: right;
+  .unCheckedLeft {
+    background-color: #fff;
+    color: #333333;
+    border: 1px solid #fff;
+    border-radius: 10px 0 0 10px;
+    width: 45px;
+    height: 20px;
+    line-height: 22px;
+    display: inline-block;
+    text-align: center;
+  }
+  .checkedLeft {
+    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: 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;
+    display: inline-block;
+    text-align: center;
+  }
 }
-.borderYellow{
+.borderYellow {
   border: 2px solid rgba(222, 144, 34, 1);
-  border-radius:4px;
+  border-radius: 4px;
 }
 //折叠面板样式
-/deep/.van-collapse{
-  .van-collapse-item{
+/deep/.van-collapse {
+  .van-collapse-item {
     border: 2px solid rgba(222, 144, 34, 1);
-    border-radius:10px;
-    margin-bottom: 30px;
+    border-radius: 10px;
+    // margin-bottom: 30px;
     background-color: #fff;
     position: relative;
-    .van-cell{
+    .van-cell {
       background-color: transparent;
       padding: 13px 15px;
     }
-    .van-collapse-item__content{
+    .van-collapse-item__content {
       padding-top: 0;
       background-color: transparent;
     }
-    .m-bottom{
+    .m-bottom {
       position: absolute;
-      bottom: -23px;
+      bottom: -30px;
       left: 150px;
-      img{
+      img {
         vertical-align: text-bottom;
       }
     }
   }
 }
 //隐藏顶部线条
-.van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after,.van-hairline--top::after{
+.van-hairline--top-bottom::after,
+.van-hairline-unset--top-bottom::after,
+.van-hairline--top::after {
   border-width: 0;
 }
-.border-t{
+.border-tb {
   border-top: 1px solid #dadada;
 }
 
 /deep/#app .van-cell:not(:last-child)::after {
-    border-bottom: 1px solid red !important;
+  border-bottom: 1px solid red !important;
 }
 
-.iconGrade{
+.iconGrade {
   width: 30px;
   height: 30px;
   vertical-align: middle;
 }
 //会员规则弹层
-/deep/.van-popup--center{
+/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{
+  img {
     width: 100%;
   }
-  .btnClose{
+  .btnClose {
     position: absolute;
     right: 12px;
     top: 13px;
   }
 }
-  // .div100{
-  //   height: 100%;
-  // }
-  // .section{
-  //   height: 100%;
-  //   overflow-x: hidden;
-  //   overflow-y: scroll;
-  //   -webkit-overflow-scrolling: touch;
-  // }
 </style>