From 6327fd5eb72a35726bd3037b1fa48400fdc48b6e Mon Sep 17 00:00:00 2001
From: langz <1816023719@qq.com>
Date: Wed, 16 Aug 2023 14:04:09 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8E=A8=E5=95=8A=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                  |   5 +
 src/views/hotVIPPages/mtvip.vue      | 574 +++++++++++++++++++++++++++
 src/views/hotVIPPages/recieveVIP.vue |  78 +++-
 3 files changed, 647 insertions(+), 10 deletions(-)
 create mode 100644 src/views/hotVIPPages/mtvip.vue

diff --git a/src/router/index.js b/src/router/index.js
index 133f86d..e053269 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -11,6 +11,11 @@ const routes = [
     name: 'vip',
     component: () => import('../views/hotVIPPages/vip.vue')
   },
+  {
+    path: '/mtvip',
+    name: 'mtvip',
+    component: () => import('../views/hotVIPPages/mtvip.vue')
+  },
   {
     path: '/recieveVIP',
     name: 'recieveVIP',
diff --git a/src/views/hotVIPPages/mtvip.vue b/src/views/hotVIPPages/mtvip.vue
new file mode 100644
index 0000000..7094704
--- /dev/null
+++ b/src/views/hotVIPPages/mtvip.vue
@@ -0,0 +1,574 @@
+<template>
+    <div class="hotVipV2-wrap">
+        <!-- 头图 -->
+        <div class="top-img"></div>
+        <div class="scroll-wrap">
+            <div class="scroll-box" >
+                <div class="scroll-item" v-for="(item, index) in scrollArr" :key="index">{{item}} <span style="color: rgb(255, 240, 148);">领取成功</span></div> 
+            </div>
+        </div>
+        
+         <!-- 手机号输入框 -->
+         <div class="mid-box" >
+            <div class="cls_div_phone_input">
+                 <input class="cls_input_phone"  ref="phoneInput" v-model="mobile" type="tel" maxlength="11" placeholder="请输入手机号码">
+            </div>
+            <img class="cls_img_btn" @click="aiThreePay()" src="https://image.ireadwo.cn/resources/yq-mtwm-20djj/btn-get.png">
+           
+            
+            <!-- 隐私协议 -->
+            <div class="privacy-box">
+                <img v-if="!agreePrivacy" @click="clickAgreePrivacy()" src="https://image.ireadwo.cn/resources/yq-6gb-ypvip/ic-select-not.png" class="selectBox"  />
+                <img v-if="agreePrivacy"  @click="clickAgreePrivacy()" src="https://image.ireadwo.cn/resources/yq-6gb-ypvip/ic-select.png" class="selectBox"  />
+
+                我已阅读并同意 
+                <span class="cls_sp_procotol_2" @click="changeShowRule()"> 活动规则 </span>、
+                <span class="cls_sp_procotol_2" @click="goLookPrivacy()"> 隐私条款 </span> 等协议
+            </div>
+            <!-- <div class="price" style="margin-top:0.05rem;">产品名称：惠点生活</div> -->
+
+             <!-- 资费 -->
+             <div class="price" style="margin-top:0.05rem;">升级联合会员，月月领热门VIP会员+外卖券 <br/>业务资费：19.9元/月 </div>
+             
+            
+             <!-- <div class="price"></div> -->
+        </div>
+        <!-- 规则 -->
+        <div v-if="showRule" class="rule-wrap">
+        <div  class="rule-box">
+            <img class="closeBtn"  src="https://image.ireadwo.cn/resources/flownode/ic-confirm-close.png"  @click="changeShowRule()">
+            <div class="rule-icon">活动规则</div>
+            <div class="rule-content">
+                [产品名称] :惠点生活 <br/>
+                [计费方式] : 支付宝连续包月<br/>
+                [权益说明] :<br/>
+                活动期间在本页面成功开通业务，即可获得爆款会员月卡(10选1) +美团外卖20元代金券(每月领取5元代金卷，连续领取4个月)，数量有限，送完即止。<br/>
+                [爆款会员月卡] :<br/>
+                腾讯视频月卡、爱奇艺月卡、优酷月卡、芒果TV月卡、哗哩哗哩大会员月卡、网易云音乐月卡、喜马拉雅会员月卡、知乎盐选会员月卡、饿了么会员月卡、百度网盘会员月卡。<br/>
+                [领取方式]:<br/>
+                本产品订购生效后，用户需要通过关注【次元意境】微信公众号，[会员福利 - 会员月月领] 入口及时领取权益，领取成功后1小时到账。凭订购手机号登录相应APP即可享受会员权益。<br/>
+                 [注意事项]：<br/>
+                1.权益领取成功后当月内不能进行退订、更改；<br/>
+                2.订购生效后凭订购手机号可每月领取会员一次，不可结转与转赠，当月不领取则视为自动放弃当月领取资格；<br/>
+                3.如您在权益充值未到账期间退订产品，将会导致权益充值失败。<br/>
+                [退订方式]：<br/>
+                进入支付宝APP---右下方“我的”---右上方的齿轮进入设置页面---点击“支付设置”---点击“免密支付/自动扣款”---选择“惠点生活”---点击“关闭服务”即可完成退订。<br/>
+                [联系我们]：<br/>
+                致电客服热线：19983417235，客服在线时间：9:00-18:00。
+                <!-- 致电客服热线：4008723215，客服在线时间：9:00-18:00。 -->
+
+            </div>
+        </div>
+    </div>
+        <!-- <div class="bottom-tips">成都英来科技有限公司 <br/> 400-8723215</div> -->
+     
+    </div>
+</template>
+
+<script>
+import { Toast, Indicator } from "mint-ui";
+export default {
+    data() {
+    return{
+        scrollTop: 0,
+        phoneFixed: false,
+        mobile: '',
+        lid: 0,
+        channelType: null,
+        canClick: true,
+        showPop: false,
+        agreePrivacy: false,
+        appkey: null,
+        showRule: false,
+        scrollArr:[
+            '151**** 2分钟前 ',
+            '135**** 1分钟前 ',
+            '132**** 1分钟前 ',
+            '189**** 3分钟前 ',
+            '180**** 2分钟前 ',
+            '181**** 1分钟前 ',
+            '134**** 4分钟前 ',
+            '132**** 3分钟前 ',
+            '189**** 3分钟前 ',
+            '153**** 1分钟前 ',
+            '172**** 1分钟前 ',
+            '185**** 1分钟前 ',
+            '199**** 4分钟前 ',
+            '175**** 1分钟前 ',
+            '156**** 1分钟前 ',
+            '145**** 3分钟前 ',
+            '175**** 2分钟前 ',
+            '137**** 2分钟前 ',
+            '177**** 1分钟前 ',
+            '189**** 1分钟前 ',
+        ],
+     
+    }
+    },
+    created(){
+      document.documentElement.scrollTop = 0;
+      document.title = "会员权益随心选";   
+    },
+    watch:{
+        'mobile' : {
+            handler(value) {
+               this.checkPhone(value)
+            }
+        }
+    },
+
+    mounted() {
+       this.getUrlParam()
+    },
+
+
+    methods: {
+         // 同意隐私授权
+         clickAgreePrivacy() {
+            this.agreePrivacy = !this.agreePrivacy
+        },
+        goLookPrivacy() {
+            window.open ("https://rights.bnyer.cn/#/privacy")
+        },
+
+        changeShowRule() {
+            this.showRule = !this.showRule
+        },
+        
+        // 手机号居底
+        handleScroll() {
+            const scrollTop = window.scrollY || document.documentElement.scrollTop;
+            if (scrollTop > this.scrollTop + 50) {
+                this.phoneFixed = true;
+            } else {
+                this.phoneFixed = false;
+            }
+        },
+        // 获取lid
+        getUrlParam() {
+            this.lid = this.$route.query.id;
+            this.channelType = this.$route.query.type;
+            console.log(this.lid);
+            console.log(this.channelType);
+
+            // if(this.channelType == 'llg') {
+            //     this.getLLGAppKey()
+            // } else {
+            //     this.getAppKey()
+            // }
+          
+            if(this.lid == '1160') {
+                  // ta
+                this.getTAAppKey() 
+            } else if(this.lid == '1162') {
+                  // 赤金头条
+                this.getAppKey() 
+            } 
+        }, 
+        // ta
+        getTAAppKey() {
+            // this.appkey = location.search.replace(/^\?/, '') + location.hash.replace(/^\#/, '&')
+            this.appkey = this.$route.query.a_oId;
+        },
+        // llg
+        getLLGAppKey() {
+            this.appkey = this.$route.query.llgclickid;
+        },
+        // gdt tt
+        getAppKey() {
+          this.appkey = "";
+
+          let testNew = window.location.hash;
+          let testsNew = decodeURIComponent(testNew);
+          console.log(testsNew);
+          this.union_site = ((testsNew || '').split("&")[1] || '').split("=")[1];
+
+          var test = window.location.search;
+
+          var tests = decodeURIComponent(test);
+
+          var clickid;
+          var dkey;
+
+          if (tests.indexOf("?") != -1) {
+            var str = tests.substr(1);
+            var strs = str.split("&");
+            console.log(strs,'打印strs');
+            // console.log(strs);
+            for (var i = 0; i < strs.length; i++) {
+              // Request.push(strs[i].split("="))
+              // console.log(strs[i].split("="));
+              if (
+                  strs[i].split("=")[0] == "clickid" ||
+                  strs[i].split("=")[0] == "clickid " ||
+                  strs[i].split("=")[1] == "clickid" ||
+                  strs[i].split("=")[0] == "qz_gdt" ||
+                  strs[i].split("=")[0] == "gdt_vid" ||
+                  strs[i].split("=")[0] == "llgclickid"
+              ) {
+                clickid = strs[i].split("=")[1];
+                // console.log(clickid);
+                // console.log(clickid)
+                this.appkey = clickid;
+                console.log('打印this.appkey===',clickid,);
+                // alert(this.appkey)
+                // alert(this.appkey,"344444444444444444444444")
+              }
+              if (
+                  strs[i].split("=")[0] == "adid" ||
+                  strs[i].split("=")[0] == "adid "
+              ) {
+                dkey = strs[i].split("=")[1];
+                // console.log(dkey, '0000000000000000000000')
+                this.dkey = dkey;
+                console.log(this.dkey);
+                // alert(this.dkey,"566666666666666666666666")
+              }
+            }
+          }
+    //       console.log(this.appkey);
+        },
+      
+        // 手机号末尾判断
+        checkPhone(mobile) {
+           if(mobile.length == 11) {
+                this.agreePrivacy = true
+                var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
+                if (!myreg.test(this.mobile)) {
+                    Toast('请输入正确的手机号')
+                    return
+                } else {
+                    this.aiThreePay()
+                }
+           }
+        },
+        // 开通
+        aiThreePay() {
+            // 手机号校验
+            if(this.mobile) {
+                var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
+                if (!myreg.test(this.mobile)) {
+                    Toast('请输入正确的手机号')
+                    return
+                }
+            } else {
+                Toast('请输入正确的手机号')
+                return
+            }
+            if(!this.agreePrivacy) {
+                Toast('请阅读并同意隐私协议')
+                return
+            }
+            // 防连点
+            if(!this.canClick) return
+            // 加载中
+            Indicator.open('领取中...')
+            this.canClick = false
+            // 参数
+            const data = {
+                mobile: this.mobile,
+                linkId: this.lid,
+                sendApiData: this.appkey,
+                // channelType: this.channelType
+            }
+            this.axios({
+                method: "post",
+                url:"https://interface.bnyer.cn/alipay/signUp",
+                //    url: `http://192.168.2.8:8086/alipay/signUp`,
+                data: data
+                }).then((res) => {
+                    Indicator.close()
+                    this.canClick = true
+                    if(res.code == 0){
+                        // 跳转支付宝
+                        window.location.href = res.result
+                    } else if (res.code == '10031') {
+                        Toast('您当前已开通，请勿重复开通~')
+                    } else if (res.code == '10033') {
+                        // 黑名单用户
+                        Toast('网络繁忙，请稍后再试~')
+                    } else{
+                        Toast('网络繁忙，请稍后再试~')
+                    } 
+                    
+            })
+        },
+    }
+
+      
+}
+</script>
+
+<style lang="scss">
+.mint-indicator-wrapper {
+  z-index: 9999;
+}
+</style>
+
+<style lang="scss" scoped>
+
+
+.hotVipV2-wrap {
+    width: 100%;
+    height: auto;
+    position: absolute;
+    background-color: #ff5900;
+    padding-bottom: 0.5rem;
+    padding-top: 8.7rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    background-image: url('https://img.bnyer.cn/vip/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230815174126.png');
+    background-size: 100% auto;
+    background-repeat: no-repeat;
+   
+    // .top-img {
+    //     background-image: url('https://img.bnyer.cn/vip/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230815174126.png');
+    //     background-size: 100% 100%;
+    //     width: 100%;
+    //     // height: 360px;
+    //     height: 12.8rem;
+    // }
+
+    .bottom-tips {
+        text-align: center;
+        margin-top: 1rem;
+        font-size: 0.22rem;
+        color: #fdf9e3;
+    }
+
+
+
+    .scroll-wrap {
+        margin-top: 10px;
+        width: 100%;
+        // overflow: hidden;
+        animation: 5s goleft linear infinite normal;
+        @keyframes goleft {
+            from {
+                transform: translateX(0);
+            }
+            to {
+                transform: translateX(-100%);
+            }
+        }
+        .scroll-box {
+            // width: 5100px;
+            width: auto;
+            display: flex;
+            
+
+            .scroll-item {
+                flex-shrink: 0;
+                // width: 235px;
+                display: inline-block;
+                color: #fff;
+                background-color: rgba($color: #000000, $alpha: 0.25);
+                padding: 5px 15px;
+                text-align: center;
+                font-size: 0.25rem;
+                border-radius: 25px;
+                margin-right: 20px;
+            }
+        }
+    }
+
+  
+
+    .fixed {
+        position: fixed !important;
+        bottom: 0rem !important;
+        left: 0.16rem !important;
+        right: 0;
+        // z-index: 100;
+        transform: scale(0.8);
+        margin-top: 0rem !important;
+    }
+
+    .mid-box {
+        // z-index: 100;
+        width: 87%;
+        left: 0rem;
+        right: 0rem;
+        position: relative;
+        margin-top: 0rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        // background-color: #fff;
+     
+        box-sizing: border-box;
+        padding:35px 0px;
+        border-radius: 10px;
+        // box-sizing: border-box;
+
+        .cls_div_phone_input {
+            height: 1rem;
+            width: 7rem;
+            position: relative;
+           
+            .phone-icon {
+                width: 0.6rem;
+                position: absolute;
+                top: 0.18rem;
+                left: 1.1rem;
+                // z-index: 1;
+            }
+            .cls_input_phone {
+                position: relative;
+                left: 50%;
+                transform: translateX(-50%);
+                height: 1rem;
+                width: 5.6rem;
+                border-radius: 25px;
+                padding-left: 20px;
+                box-sizing: border-box;
+                font-size: 0.32rem;
+                // font-weight: bold;
+                // text-align: center;
+                background-color: white;
+                // border: 2px solid red;
+                
+                border: none;
+            }
+        }
+        .cls_img_btn {
+            margin-top: 0.3rem;
+            position: relative;
+            width: 5.2rem;
+            // height: 1rem;
+            animation: btnScaleAnim 1s infinite;
+            @keyframes btnScaleAnim {
+                0%{
+                    transform: scale(0.9);
+                }
+                50% {
+                    transform: scale(1.05);
+                }
+                100% {
+                    transform: scale(0.9);
+                }
+            }
+        }
+    }
+
+    .price {
+        // font-weight: bold;
+        // margin-top: 0.25rem;
+        text-align: center;
+        // color: rgba(0,0,0,0.9);
+        color: #fff;
+        font-size: 0.24rem;
+
+    }
+
+    .tips {
+        color: #fff;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 600;
+        // margin-top: 0.25rem;
+        // text-align: center;
+        // color: rgb(108, 1, 1);
+        font-size: 0.24rem;
+
+        margin-bottom: -0.2rem;
+    }
+  
+    .privacy-box {
+        // color: rgba(0,0,0,0.9);
+        color: #fff;
+
+        margin-top: 0.35rem;
+        // margin-bottom: 0.2rem;
+        width: 100%;
+        // z-index: 1;
+        // line-height: 0.25rem;
+        text-align: center;
+        // color: #fff6f3;
+        font-size: 0.24rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .selectBox {
+            margin-right: 0.1rem;
+            
+            width: 0.35rem; 
+            height: 0.35rem;
+        }
+        .cls_sp_procotol_2 {
+            // margin-left: 0.1rem;
+            color: #ffdd5c;
+            // font-weight: bold;
+            text-decoration: underline;
+        }
+    }
+
+    
+    .rule-wrap {
+        position: fixed;
+        top: 0px;
+        right: 0px;
+        height: 100vh;
+        width: 100%;
+        background-color: #ff5900;
+        display: flex;
+        // align-items: center;
+        justify-content: center;
+        // padding-bottom: 2rem;
+        overflow-y: scroll;
+    }
+    .rule-box {
+     
+        margin-top: 0.5rem;
+        position: relative;
+        width: 97%;
+        // height: auto;
+        // background-color: #fdf9e3;
+        border-radius: 10px;
+        padding: 30px 18px;
+        box-sizing: border-box;
+
+        .closeBtn {
+            position: absolute;
+            top: -0.1rem;
+            right: 0.4rem;
+        }
+        .rule-icon {
+            position: relative;
+            left: 50%;
+            transform: translateX(-50%);
+            // margin: 0 auto;
+            // background-image: url('https://vediocnd.corpring.com/hotVIP/rule-icon.png');
+            // background-size: 100% 100%;
+            background-color: #ffc72c;
+            border-radius: 25px;
+            font-weight: bold;
+            font-size: 0.38rem;
+            padding: 8px 30px;
+            display: inline-block;
+            // width: auto;
+            // width: 1.7rem;
+            // height: 0.6rem;
+        }
+        .rule-content {
+            margin-top: -20px;
+            margin-bottom: 20px;
+            line-height: 15px;
+            font-size: 0.26rem;
+            line-height: 0.46rem;
+            // color: #FFF;
+            padding: 40px 20px;
+            border-radius: 10px;
+
+             background-color: #fdf9e3;
+            //  margin-bottom: 20px;
+        }
+    }
+
+}
+</style>
\ No newline at end of file
diff --git a/src/views/hotVIPPages/recieveVIP.vue b/src/views/hotVIPPages/recieveVIP.vue
index ac5447b..ba53386 100644
--- a/src/views/hotVIPPages/recieveVIP.vue
+++ b/src/views/hotVIPPages/recieveVIP.vue
@@ -3,14 +3,25 @@
       
         <!-- 权益列表 -->
         <div class="vip-box">
-            <div class="get-title">请选择您要领取的会员月卡</div>
+            <div class="get-title">请选择您要领取的权益：</div>
+            <div class="sub-title">爆款会员月卡</div>
+
             <div class="vip-list">
-                <div class="vip-item" v-for="(item, index) in vipList" :key="index" @click="selectVip(index)">
+                <div class="vip-item" v-for="(item, index) in vipList" :key="index" v-if="index < 10" @click="selectVip(index)">
                     <div class="vip-icon" :class="curVipIndex == index? 'active' : ''"
                     :style=" `background: url(${item.icon}) no-repeat;background-size: 100% 100%;`"></div>
                     <!-- <div class="vip-name">{{ item.name }}</div> -->
                 </div>
             </div>
+            <div class="sub-title">美团外卖5元券</div>
+            <div class="mt-list">
+                <div class="mt-item" v-for="(item, index) in vipList" :key="index" v-if="index == 10" @click="selectVip(index)">
+                    <div class="mt-icon" :class="curVipIndex == 10? 'active' : ''"
+                    :style=" `background: url(${item.icon}) no-repeat;background-size: 100% 100%;`"></div>
+                    <!-- <div class="vip-name">{{ item.name }}</div> -->
+                </div>
+            </div>
+
         </div>
          <!-- 手机号输入框 -->
          <div class="mid-box" >
@@ -26,27 +37,28 @@
         <div class="rule-box">
             <div class="rule-icon"></div>
             <div class="rule-content">
-                [商品名称] :惠点生活 <br/>
+                [产品名称] :惠点生活 <br/>
                 [计费方式] : 支付宝连续包月<br/>
-                [商品权益说明] :<br/>
-                用户每月可领取腾讯视频月卡、爱奇艺月卡、优酷月卡、芒果TV月卡、哗哩哗哩大会员月卡、网易云音乐月卡、喜马拉雅会员月卡、知乎盐选会员月卡、饿了么会员月卡、百度网盘会员月卡中的任意一张。<br/>
+                [权益说明] :<br/>
+                活动期间在本页面成功开通业务，即可获得爆款会员月卡(10选1) +美团外卖20元代金券(每月领取5元代金卷，连续领取4个月)，数量有限，送完即止。<br/>
+                [爆款会员月卡] :<br/>
+                腾讯视频月卡、爱奇艺月卡、优酷月卡、芒果TV月卡、哗哩哗哩大会员月卡、网易云音乐月卡、喜马拉雅会员月卡、知乎盐选会员月卡、饿了么会员月卡、百度网盘会员月卡。<br/>
                 [领取方式]:<br/>
                 本产品订购生效后，用户需要通过关注【次元意境】微信公众号，[会员福利 - 会员月月领] 入口及时领取权益，领取成功后1小时到账。凭订购手机号登录相应APP即可享受会员权益。<br/>
-                
-               [注意事项]：<br/>
+                 [注意事项]：<br/>
                 1.权益领取成功后当月内不能进行退订、更改；<br/>
                 2.订购生效后凭订购手机号可每月领取会员一次，不可结转与转赠，当月不领取则视为自动放弃当月领取资格；<br/>
                 3.如您在权益充值未到账期间退订产品，将会导致权益充值失败。<br/>
                 [退订方式]：<br/>
                 进入支付宝APP---右下方“我的”---右上方的齿轮进入设置页面---点击“支付设置”---点击“免密支付/自动扣款”---选择“惠点生活”---点击“关闭服务”即可完成退订。<br/>
                 [联系我们]：<br/>
-                致电客服热线： 19983417235，客服在线时间：9:00-18:00。
+                致电客服热线：19983417235，客服在线时间：9:00-18:00。
             </div>
         </div>
         <div class="confirm-wrap" v-if="showPop">
             <div class="confirm-box">
                 <div class="close-button" @click="isShowPop()">×</div>
-                <div class="confirm-title">确认领取<br/>【{{ vipList[curVipIndex].name}}】月卡吗？<br/><br/>
+                <div class="confirm-title">确认领取<br/>【{{ vipList[curVipIndex].name}}】吗？<br/><br/>
                 领取手机号：{{ mobile }}</div>
                 <div class="icon" :style=" `background: url(${vipList[curVipIndex].icon}) no-repeat;background-size: 100% 100%;`"></div>
                 <div class="confirm-button" @click="receiveRights()">确认</div>
@@ -65,6 +77,7 @@ export default {
         mobile: '',
         showPop: false,
         canClick: true,
+       
         vipList: [
             {
                 name: '优酷黄金会员',
@@ -119,6 +132,11 @@ export default {
                 icon: 'https://img.bnyer.cn/vip/baidu.png',
                 vipKey: '10000437'
             },
+            {   
+                name: '美团外卖5元券',
+                icon: '	https://p1.meituan.net/travelcube/7264ce9c25de2e464e3acd996fe8ad362803.png',
+                 vipKey: '10000153'
+            },
           
             
         ]
@@ -136,6 +154,7 @@ export default {
     methods: {
         selectVip(index) {
             this.curVipIndex = index
+            console.log(index);
         },
         isShowPop() {
             this.showPop = !this.showPop
@@ -170,7 +189,7 @@ export default {
                         this.axios({
                             method: "post",
                             url: `https://interface.bnyer.cn/yunmei/directBuy`,
-                            // url: `http://192.168.2.8:8086/yunmei/directBuy`,
+                            // url: `http://192.168.2.64:8086/yunmei/directBuy`,
                             data: parms
                             }).then((rsp) => {
                                 
@@ -340,6 +359,13 @@ export default {
             text-align: center;
             margin-bottom: 15px;
         }
+        .sub-title {
+            font-size: 14px;
+            font-weight: bold;
+            text-align: center;
+            margin-bottom: 10px;
+            
+        }
         .vip-list {
             display: flex;
             flex-wrap: wrap;
@@ -371,6 +397,38 @@ export default {
                 }
             }
         }
+        .mt-list {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+
+            // align-items: center;
+            .active {
+                border: 5px solid #dc2c00;
+            }
+            .mt-item {
+                width: 18%;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                margin-bottom: 10px;
+                .mt-icon {
+                    // border-radius: 5px;
+                    width: 100%;
+                    height: 1.11rem;
+                    background-color: #fff;
+                    margin-bottom: 4px;
+                    box-sizing: border-box;
+                }
+                .vip-name {
+                    width: 100%;
+                    text-align: center;
+                    white-space: wrap;
+                    font-size: 10px;
+                    line-height: 12px;
+                }
+            }
+        }
     }
 
     .mid-box {