绑定会员等级规则

src/App.vue

@@ -59,7 +59,7 @@ export default {
 
 <style>
 @import './assets/global/font.css';
-@import '//at.alicdn.com/t/font_863923_9v70nlynbdt.css';
+@import '//at.alicdn.com/t/font_863923_pxnr9ox66cp.css';
 @import './assets/global/global.css';
 body,html{
   padding: 0px;

src/components/newPersonalCenter/block/MemberCenter.vue

@@ -111,6 +111,7 @@ export default {
   },
   data(){
     return {
+      UserAllJursdictionsList: [],
       UserMemberExp: {},
       showRule: false,
       point: 0,
@@ -140,8 +141,26 @@ export default {
   mounted() {
     this.userInfo = this.getLocalStorage();
     this.getUserMemberExp()
+    this.getUserAllJursdictions()
   },
   methods: {
+
+    // 获取用户所有特权
+    getUserAllJursdictions: function () {
+      this.apiJavaPost(
+        "/api/member/getUserAllJursdictions",
+        {customer: this.userInfo.customerId},
+        res => {
+          if (res.data.resultCode == 1) {
+            // console.log(res)
+            this.UserAllJursdictionsList = res.data.data
+          } else {
+            this.Error(res.data.message);
+          }
+        },
+        null
+      );
+    },
     // 获取会员经验与下个会员等级信息
     getUserMemberExp: function () {
       this.apiJavaPost(
@@ -149,22 +168,61 @@ export default {
         {customer: this.userInfo.customerId},
         res => {
           if (res.data.resultCode == 1) {
-            console.log(res)
+            // console.log(res)
             let UserMemberExp = res.data.data
             let getExpArr = [0]
-            let getExpTimeArr = ['-']
-            let getExpNullArr = ['-']
+            let getExpTimeArr = [{value: '-'}]
+            let getExpNullArr = [{value: '-'}]
             UserMemberExp.exps.forEach((element, index) => {
-              getExpArr.push(element.exp)
+              
               getExpTimeArr.push(element.time)
               if (index === UserMemberExp.exps.length-1) {
-                getExpNullArr.push(element.exp)
+                getExpArr.push({
+                  value: element.exp,
+                  label:{
+                    normal: {
+                      show: true,
+                      formatter: [
+                        '{b|当前}',
+                        '{a|{c}}',
+                      ].join('\n'),
+                      // textAlign: 'center',
+                      // borderColor: 'rgb(199,86,83)',
+                      // borderWidth: 2,
+                      // borderRadius: 5,
+                      
+                      // color: '#000',
+                      // fontSize: 14,
+                      // shadowBlur: 3,
+                      // shadowColor: '#888',
+                      // shadowOffsetX: 0,
+                      // shadowOffsetY: 3,
+                      // lineHeight: 30,
+                      rich: {
+                        b: {
+                          color: 'rgba(255, 255, 255, 0.4)',
+                          lineHeight: 25,
+                          fontSize: 12,
+                          padding: 5,
+                        },
+                        a: {
+                          fontSize: 18,
+                          fontFamily: 'Microsoft YaHei',
+                          borderColor: '#449933',
+                          paddingLeft: 15
+                        },
+                      }
+                    }
+                  },
+                })
+                getExpNullArr.push({value: element.exp})
                 this.point = index
               } else {
-                getExpNullArr.push('-')
+                getExpArr.push({value: element.exp})
+                getExpNullArr.push({value: '-'})
               }
             });
-            getExpArr.push('-')
+            getExpArr.push({value: '-'})
             getExpTimeArr.push(UserMemberExp.next.rate)
             getExpNullArr.push(UserMemberExp.next.gap)
             this.creatChart(getExpArr, getExpTimeArr, getExpNullArr)
@@ -176,7 +234,7 @@ export default {
       );
     },
     getColor:function (param) { 
-      console.log(param.dataIndex, this.point+1)
+      // console.log(param.dataIndex, this.point+1)
       if (param.dataIndex === this.point+1) {
         return '#67C23A';
       } else {
@@ -185,7 +243,7 @@ export default {
     },
     creatChart: function(getExpArr, getExpTimeArr, getExpNullArr) {
       let that = this
-      console.log(getExpArr, getExpTimeArr, getExpNullArr,[0, 1000, 2000, '-', '-','-'],['-', '-', 2000, 4000, 6000, 8000])
+      // console.log(getExpArr, getExpTimeArr, getExpNullArr,[0, 1000, 2000, '-', '-','-'],['-', '-', 2000, 4000, 6000, 8000])
       let myChart = this.$echarts.init(document.getElementById("chartsMap"));
       myChart.setOption({
         title: {
@@ -280,6 +338,11 @@ export default {
                     borderWidth: 5,
                     color: that.getColor
                 },
+                markPoint: {
+                  data: [
+                    {name: '123', value: 700, xAxis: 2, yAxis: 2}
+                  ]
+                }
             }
         ]
       },true);

src/components/newPersonalCenter/block/model/Rule.vue

@@ -87,6 +87,18 @@
   color: #EE4454;
   padding-right: 20px;
 }
+.level_equity ._yes{
+  display: inline-block;
+  height: 15px;
+  width: 15px;
+  text-align: center;
+  line-height: 15px;
+  font-weight: bold;
+  font-size: 12px;
+  border-radius: 50%;
+  background-color: #67c93c;
+  color: white
+}
 </style>
 
 <template>
@@ -101,167 +113,34 @@
         <table>
           <thead>
             <tr>
-              <th>权益\等级</th>
-              <th>注册会员</th>
-              <th>一星会员</th>
-              <th>二星会员</th>
-              <th>三星会员</th>
-              <th>四星会员</th>
-              <th>五星会员</th>
-              <th>白金会员</th>
-              <th>钻石会员</th>
+              <th width="200">权益\等级</th>
+              <th v-for="item in MemberRateSimpleList">{{item.name}}</th>
             </tr>
           </thead>
           <tbody>
-            <tr>
-              <th>抵用特权</th>
-              <td>1倍</td>
-              <td>1倍</td>
-              <td>1倍</td>
-              <td>1倍</td>
-              <td>1.5倍</td>
-              <td>2倍</td>
-              <td>2倍</td>
-              <td>2倍</td>
-            </tr>
-            <tr>
-              <th>预订奖励</th>
-              <td>1倍</td>
-              <td>1倍</td>
-              <td>1倍</td>
-              <td>1倍</td>
-              <td>1.5倍</td>
-              <td>2倍</td>
-              <td>2倍</td>
-              <td>2倍</td>
-            </tr>
-            <tr>
-              <th>签到特权</th>
-              <td></td>
-              <td></td>
-              <td><i class="iconfont icon-xuanzhong2"></i></td>
-              <td><i class="iconfont icon-xuanzhong2"></i></td>
-              <td><i class="iconfont icon-xuanzhong2"></i></td>
-              <td><i class="iconfont icon-xuanzhong2"></i></td>
-              <td><i class="iconfont icon-xuanzhong2"></i></td>
-              <td><i class="iconfont icon-xuanzhong2"></i></td>
-            </tr>
-            <tr>
-              <th>活动尊享</th>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td><i class="iconfont icon-xuanzhong2"></i></td>
-              <td><i class="iconfont icon-xuanzhong2"></i></td>
-              <td><i class="iconfont icon-xuanzhong2"></i></td>
-              <td><i class="iconfont icon-xuanzhong2"></i></td>
-              <td><i class="iconfont icon-xuanzhong2"></i></td>
-            </tr>
-            <tr>
-              <th>生日关怀</th>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td><i class="iconfont icon-xuanzhong2"></i></td>
-              <td><i class="iconfont icon-xuanzhong2"></i></td>
-              <td><i class="iconfont icon-xuanzhong2"></i></td>
-            </tr>
-            <tr>
-              <th>送机特权</th>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td><i class="iconfont icon-xuanzhong2"></i></td>
-              <td><i class="iconfont icon-xuanzhong2"></i></td>
-              <td><i class="iconfont icon-xuanzhong2"></i></td>
-            </tr>
-            <tr>
-              <th>贵宾室特权</th>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td><i class="iconfont icon-xuanzhong2"></i></td>
-              <td><i class="iconfont icon-xuanzhong2"></i></td>
+            <tr v-for="(item, index) in privilege">
+              <th>{{item.name}}</th>
+              <td v-for="(s, sIndex) in MemberRateSimpleList">
+                <span v-if="item[`V${sIndex}`]" class="_yes iconfont icon-gou2"></span>
+              </td>
             </tr>
           </tbody>
         </table>
       </el-row>
-      <!-- 登记规则 -->
+      <!-- 等级规则 -->
       <el-row class="level_rule">
         <p><span></span>等级规则</p>
         <table class="group">
           <tbody>
           <tr>
-              <th rowspan="2" class="modu_level_tit" style="width: 80px">会员级别</th>
-              <th rowspan="2" width="15%">级别标准</th>
-              <th width="30%">升降级标准</th>
-              <th class="modu_level_tit" width="40%">星级有效期延长的条件</th>
-          </tr>
-          <tr>
-              <td>1、二星以上会员的星级有效期为1年，自完成升星之日<br>
-                  算起；注册及一星会员的星级有效期长期有效<br>
-                  2、当星级到期时，将扣除二星及以上会员不同数量的成<br>
-                  长值，并根据剩余成长值重新计算会员星级<br>
-                  3、若达到上一级别的级别标准，即可升级。若未达到，<br>
-                  则根据星级有效期延长的条件判断<br>
-                  说明：扣除成长值时，会员的成长值最低为0</td>
-              <td>当会员星级到期后，未能达到升级标准，<br>
-                  1、只要符合以下条件，您的当前会员级别可以顺延一年<br>
-                  2、若未能达到以下条件，将顺次下调一个会员级别，同时按照下调日更新会员星级有效期
-              </td>
-          </tr>
-          <tr>
-              <td>注册会员</td>
-              <td>注册但无消费记录</td>
-              <td colspan="2" style="text-align: center">永久有效</td>
-          </tr>
-          <tr>
-              <td>一星会员</td>
-              <td>成长值在1-1999，并有出游归来订单（指途牛旅游产品订单）</td>
-              <td colspan="2" style="text-align: center">永久有效</td>
-          </tr>
-          <tr>
-              <td>二星会员</td>
-              <td>成长值2000—6999</td>
-              <td>有效期1年，到期后扣除<span style="color: red">1000</span>成长值，根据剩余成长值重新计算会员星级。</td>
-              <td>在会员星级有效期内，签约未取消订单数≥<span style="color: red">2单</span>或签约未取消订单金额（仅订单实际支付金额，不包括旅游券等）≥<span style="color: red">100元</span></td>
-          </tr>
-          <tr>
-              <td>三星会员</td>
-              <td>成长值7000—14999</td>
-              <td>有效期1年，到期后扣除<span style="color: red">1500</span>成长值，根据剩余成长值重新计算星级</td>
-              <td>在会员星级有效期内，签约未取消订单数≥<span style="color: red">2单</span>或签约未取消订单金额（仅订单实际支付金额，不包括旅游券等）≥<span style="color: red">600元</span></td>
-          </tr>
-          <tr>
-              <td>四星会员</td>
-              <td>成长值15000—49999</td>
-              <td>有效期1年，到期后扣除<span style="color: red">3500</span>成长值，根据剩余成长值重新计算星级</td>
-              <td>在会员星级有效期内，签约未取消订单数≥<span style="color: red">2单</span>或签约未取消订单金额（仅订单实际支付金额，不包括旅游券等）≥<span style="color: red">1500元</span></td>
+              <th class="modu_level_tit" width="80">会员级别</th>
+              <th>级别标准</th>
+              <th>等级说明</th>
           </tr>
-          <tr>
-              <td>五星会员</td>
-              <td>成长值50000—99999</td>
-              <td>有效期1年，到期后扣除<span style="color: red">7000</span>成长值，根据剩余成长值重新计算星级</td>
-              <td>在会员星级有效期内，签约未取消订单数≥<span style="color: red">3单</span>或签约未取消订单金额（仅订单实际支付金额，不包括旅游券等）≥<span style="color: red">3000元</span></td>
-          </tr>
-          <tr>
-              <td>白金会员</td>
-              <td>成长值100000—299999</td>
-              <td>有效期1年，到期后扣除<span style="color: red">15000</span>成长值，根据剩余成长值重新计算星级</td>
-              <td>在会员星级有效期内，签约未取消订单数≥<span style="color: red">3单</span>或签约未取消订单金额（仅订单实际支付金额，不包括旅游券等）≥<span style="color: red">5000元</span></td>
-          </tr>
-          <tr>
-              <td>钻石会员</td>
-              <td>成长值300000+</td>
-              <td>有效期1年，到期后扣除<span style="color: red">50000</span>成长值，根据剩余成长值重新计算星级</td>
-              <td>在会员星级有效期内，签约未取消订单数≥<span style="color: red">4单</span>或签约未取消订单金额（仅订单实际支付金额，不包括旅游券等）≥<span style="color: red">8000元</span></td>
+          <tr v-for="(item, index) in RuleList">
+              <td>{{item.name}}</td>
+              <td>{{item.tradeMoneyReq}}{{index !== RuleList.length-1 ? `-${RuleList[index+1].tradeMoneyReq}` : ''}}</td>
+              <td colspan="2" style="text-align: center">{{item.remark}}</td>
           </tr>
           </tbody>
         </table>
@@ -281,6 +160,15 @@
 export default {
   data(){
     return {
+      dataList: [],
+      msg: {
+        state: -1,
+        name: '',
+        memberId: -1,
+      },
+      MemberRateSimpleList: [],
+      privilege: [],
+      RuleList: [],
     }
   },
   computed: {
@@ -289,9 +177,65 @@ export default {
   created(){
     
   },
-  mounted() {
+  mounted() { 
+    this.getMemberRateSimpleList()
+    this.getRuleList()
   },
   methods: {
+    //获取特权数据
+    getAllJurisdictions: function () {
+      this.loading = true;
+      this.apiJavaPost("/api/member/getAllJurisdictions", this.msg, res => {
+        this.loading = false;
+        if (res.data.resultCode === 1) {
+          this.dataList = res.data.data;
+          this.getPrivilege()
+        } else {
+          this.Error(res.data.message)
+        }
+      }, null);
+    },
+    // 获取所有会员等级
+    getMemberRateSimpleList: function () {
+      this.apiJavaPost("/api/member/getMemberRateSimpleList", this.msg, res => {
+        this.loading = false;
+        if (res.data.resultCode === 1) {
+          this.MemberRateSimpleList = res.data.data;
+          this.getAllJurisdictions()
+        } else {
+          this.Error(res.data.message)
+        }
+      }, null);
+    },
+    //组装对应的等级权益
+    getPrivilege: function () {
+      let privilege = []
+      this.dataList.forEach(x=>{
+        if (x.state === '-1') return
+        let obj = {
+          name: x.name,
+        }
+        this.MemberRateSimpleList.forEach((y, index)=>{
+          obj[`V${index}`] = x.rateName.indexOf(y.name) != -1 ? true : false
+        })
+        privilege.push(obj)
+      })
+      this.privilege = privilege
+    },
+    //组装对应的等级规则
+    getRuleList: function () {
+      let msg = {
+        state: -1,
+        name: '',
+      }
+      this.apiJavaPost("/api/member/getmemberrate", msg, res => {
+        if (res.data.resultCode === 1) {
+          this.RuleList = res.data.data;
+        } else {
+          this.Error(res.data.message)
+        }
+      }, null);
+    },
     childMethod: function () {
       this.$emit('childrenFun');
     }