Explorar el Código

更新会员相关

xiaozhen hace 6 años
padre
commit
7684eb0f23

BIN
assets/img/vip/vip_icon_premium.png


+ 52 - 32
components/header.vue

@@ -37,18 +37,6 @@
               />进制数据
             </a>
           </el-dropdown-item>
-          <!--<el-dropdown-item>-->
-            <!--<a-->
-              <!--class="workstation"-->
-              <!--:href="baseUrl+'/type/interview/?from=top_nav'"-->
-              <!--style="display: flex; align-items: center;"-->
-            <!--&gt;-->
-              <!--<img-->
-                <!--src="@/assets/img/header/review.png"-->
-                <!--style="width: 24px;height: 24px;margin-right: 5px;"-->
-              <!--/>技术面试官-->
-            <!--</a>-->
-          <!--</el-dropdown-item>-->
         </el-dropdown-menu>
       </el-dropdown>
       <div>
@@ -138,7 +126,7 @@
               <img
                 v-if="myInfo.is_vip"
                 class="header-vip-icon"
-                :src="baseUrl+`/Public/image/h5/vip_icon${isCom ? '_com' : ''}.png`"
+                :src="baseUrl+`/Public/image/h5/vip_icon${vipImage}.png`"
                 alt="vip-icon"
               />
             </a>
@@ -146,24 +134,20 @@
           </div>
           <div class="menu">
             <div v-if="myInfo.is_vip" class="vip-info vip-info-com">
-              <div class="vip-info-top">
-                <img
-                  class="vip-icon"
-                  :src="baseUrl+`/Public/image/h5/vip_icon${isCom ? '_com' : ''}.png`"
-                  alt="vip-icon"
-                />
+              <div class="vip-info-top" >
+                <img class="vip-icon" :src="baseUrl+`/Public/image/h5/vip_icon${vipImage}.png`" alt="vip-icon"/>
                 <span class="vip-content">
-                  <span class="vip-title" :class="{'is-dev': !isCom}">{{isCom ? '企业会员' : '开发者会员'}}</span>
+                  <span class="vip-title" :class="vipTextClass">{{vipText}}</span>
                   <br />
                   <span class="vip-end-date">{{vipInfo.endDate}}到期</span>
                 </span>
               </div>
               <div class="vip-arcs">
-                <a class="vip-arc" :class="{'is-dev': !isCom}" :href="baseUrl+'/type/vip'">查看权益</a>
+                <a class="vip-arc" :class="vipTextClass" :href="baseUrl+'/type/vip'">查看权益</a>
                 <a
                   class="vip-arc"
-                  :class="{'is-dev': !isCom}"
-                  :href="baseUrl+'/vip/pay?number=3&amp;product_id=1&amp;next=/type/vip'"
+                  :class="vipTextClass"
+                  :href="baseUrl+'/vip/pay?number=3&amp;product_id='+this.$store.state.userinfo.vip_type_id+'&amp;next=/type/vip'"
                 >立即续费</a>
               </div>
             </div>
@@ -215,6 +199,7 @@ export default {
     };
   },
   computed: {
+
     vipInfo() {
       let userinfo = this.$store.state.userinfo;
       return {
@@ -227,6 +212,42 @@ export default {
     },
     isCom() {
       return this.$store.state.userinfo.vip_type_id === "1";
+    },
+    vipImage(){
+      switch (parseInt(this.$store.state.userinfo.vip_type_id)) {
+        case 1:
+          return '_com';
+        case 2:
+          return '';
+        case 3:
+          return '_premium';
+        default:
+          return '';
+      }
+    },
+    vipTextClass(){
+      switch (parseInt(this.$store.state.userinfo.vip_type_id)) {
+        case 1:
+          return 'is-newly';
+        case 2:
+          return 'is-dev';
+        case 3:
+          return 'is-premium';
+        default:
+          return '';
+      }
+    },
+    vipText(){
+      switch (parseInt(this.$store.state.userinfo.vip_type_id)) {
+        case 1:
+          return '初创版会员';
+        case 2:
+          return '开发者会员';
+        case 3:
+          return '企业版会员';
+        default:
+          return '';
+      }
     }
   },
   mounted() {
@@ -256,15 +277,6 @@ export default {
   created() {
     this.baseUrl = process.env.baseUrl;
     this.jishuBaseUrl = process.env.jishuBaseUrl;
-    console.log("dfdfdfdfdf:", process.env.baseUrl, process.env.NODE_ENV);
-    // if (process.env.baseUrl == "test") {
-    //   console.log(22233333333);
-    //   this.baseUrl = "https://dev.test.proginn.com";
-    //   this.jishuBaseUrl = "https://dev.test-jishuin.proginn.com";
-    // } else {
-    //   this.baseUrl = "https://www.proginn.com";
-    //   this.jishuBaseUrl = "https://jishuin.proginn.com";
-    // }
   }
 };
 </script>
@@ -477,6 +489,14 @@ span.other-icon {
 .vip-info-com .is-dev {
   color: #cb9d53;
 }
+.vip-info-com .is-newly{
+ color:  #308EFF;
+}
+
+.vip-info-com .is-premium{
+  color: #00C469;
+}
+
 .workstation {
   color: #606266;
 }

+ 6 - 2
components/type/vip/buy-dialog.vue

@@ -5,9 +5,13 @@
         <img src="~@/assets/img/vip/vip_icon.png" alt="vip_icon" />
         <h4>购买开发者会员</h4>
       </template>
-      <template v-else>
+      <template v-else-if="type==='com'">
         <img src="~@/assets/img/vip/vip_icon_com.png" alt="vip_icon_com" />
-        <h4>购买企业会员</h4>
+        <h4>购买初创版会员</h4>
+      </template>
+      <template v-else>
+        <img src="~@/assets/img/vip/vip_icon_premium.png" alt="vip_icon_com" />
+        <h4>购买企业版会员</h4>
       </template>
       <div class="wrapper-number">
         <div

+ 2 - 2
components/type/vip/pc.vue

@@ -93,7 +93,7 @@
 <script>
 import buyDialog from "./buy-dialog";
 export default {
-  props: ["com", "dev", "vipDetail", "isCom"],
+  props: ["com", "dev",'premium', "vipDetail", "isCom"],
   data() {
     return {
       buyDialog: false,
@@ -110,7 +110,7 @@ export default {
     }
   },
   mounted() {
-      location.href="/#vip";
+
     //console.log(this.com, this.dev);
   },
   methods: {

+ 333 - 267
pages/type/vip/developer.vue

@@ -44,7 +44,7 @@
           <div class="developer-price"><span>¥149</span>/月</div>
           <div class="original-price">原价¥299/月</div>
         </div>
-        <div class="developer-btn">立即开通</div>
+        <div class="developer-btn" @click="clickPay('dev')">立即开通</div>
       </div>
     </div>
     <div class="tips">
@@ -55,276 +55,342 @@
         <p> 3.如有任何问题,欢迎咨询在线客服,或拨打热线:0571-28120931 转1</p>
       </div>
     </div>
+    <buy-dialog
+      :handleClose="handleClose"
+      :buyDialog="buyDialog"
+      :gotoPay="gotoPay"
+      :type="type"
+      :item="item"
+      :vipDetail="vipDetail"
+      :pricePrefix="pricePrefix"
+    ></buy-dialog>
   </div>
+
 </template>
 
 <script>
-export default {
-  
-}
+  import buyDialog from "@/components/type/vip/buy-dialog";
+
+  export default {
+    data() {
+      return {
+        buyDialog: false,
+        pricePrefix: "",
+        type: "dev", // com: 企业会员, dev: 开发者会员
+        vipList: [],
+        vipDetail: {},
+        item: {}
+      };
+    },
+    async mounted() {
+      await this.getList();
+      await this.getVipDetail();
+    },
+    components: {
+      buyDialog
+    },
+    computed: {},
+    methods: {
+      async getList() {
+        let extraHeaders = {};
+        if (this.deviceType === "ios") {
+          extraHeaders = this.getSign();
+        }
+        let res = await this.$axios.$post(`/api/vip/getList`, extraHeaders);
+        if (res) {
+          this.vipList = res.data;
+        }
+      },
+      /**
+       * 点击支付
+       */
+      clickPay(type) {
+        this.type = type;
+        this.item = this.vipList[1];
+        this.buyDialog = true;
+      },
+      handleClose() {
+        this.buyDialog = false;
+      },
+      gotoPay(number) {
+        const item = this.item;
+        location.href = `/vip/pay?product_id=${item.id}&number=${number}&next=/type/vip/`;
+      },
+      // 点击会员计划
+      clickProject(index) {
+        let vip = this.vipList[index];
+        window.open(recommend.seo_uri);
+      },
+      async getVipDetail() {
+        let res = await this.$axios.$post("/api/vip/get_vip_user_detail");
+        this.vipDetail = res && res.data ? res.data : {};
+      }
+    }
+  }
 </script>
 
 <style lang="scss" scope>
-.wrapper {
-  overflow: hidden;
-}
-
-.title {
-  margin-top: 54px;
-  line-height: 45px;
-  text-align: center;
-  font-weight: 600;
-  font-size: 32px;
-  color: #222222;
-}
-
-.subtitle {
-  margin-top: 4px;
-  line-height: 22px;
-  text-align: center;
-  font-size: 16px;
-  color: #999999;
-}
-
-.content {
-  margin: 49px auto 0;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-}
-
-.explain {
-  overflow: hidden;
-  width: 304px;
-  height: 606px;
-  border-radius:2px;
-  background-color: #FFFFFF;
-  border:1px solid #D6DBE3;
-  box-shadow:0px 4px 20px 0px rgba(0,21,53,0.05);
-  text-align: center;
-}
-
-.explain-title {
-  margin-top: 45px;
-  line-height: 28px;
-  font-weight: 600;
-  font-size: 20px;
-  color: #8E5B15;
-}
-
-.explain-content {
-  overflow: hidden;
-  line-height: 20px;
-  font-size: 14px;
-  color: #222222;
-}
-
-.explain-content p:nth-child(1) {
-  margin-top: 125px;
-}
-
-.explain-content p:nth-child(2) {
-  margin-top: 30px;
-}
-
-.explain-content p:nth-child(3) {
-  margin-top: 30px;
-}
-
-.explain-content p:nth-child(4) {
-  margin-top: 30px;
-}
-
-.explain-content p:nth-child(5) {
-  margin-top: 30px;
-}
-
-.explain-content p {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.explain-content img {
-  margin-left: 5px;
-  width: 13px;
-  height: 13px;
-}
-
-.ordinary {
-  overflow: hidden;
-  width: 315px;
-  height: 606px;
-  border-radius:2px;
-  background-color: #FFFFFF;
-  border:1px solid #D6DBE3;
-  box-shadow:0px 4px 20px 0px rgba(0,21,53,0.05);
-  text-align: center;
-}
-
-.ordinary-title {
-  margin-top: 45px;
-  line-height: 28px;
-  font-weight: 600;
-  font-size: 20px;
-  color: #666666;
-}
-
-.ordinary-avatar {
-  margin: 16px auto 0;
-  width: 66px;
-  height: 66px;
-}
-
-.ordinary-avatar img {
-  width: 100%;
-  height: 100%;
-}
-
-.ordinary-content {
-  overflow: hidden;
-  line-height: 20px;
-  font-size: 14px;
-  color: #666666;
-}
-
-.ordinary-content p:nth-child(1) {
-  margin-top: 43px;
-}
-
-.ordinary-content p:nth-child(2) {
-  margin-top: 30px;
-}
-
-.ordinary-content p:nth-child(3) {
-  margin-top: 30px;
-}
-
-.ordinary-content p:nth-child(4) {
-  margin-top: 30px;
-}
-
-.ordinary-content p:nth-child(5) {
-  margin-top: 30px;
-}
-
-.developer {
-  overflow: hidden;
-  width: 326px;
-  height: 606px;
-  border-radius:2px;
-  background-color: #FFF9ED;
-  border:1px solid #C89A29;
-  box-shadow:0px 4px 20px 0px rgba(199,160,61,0.13);
-  text-align: center;
-}
-
-.developer-title {
-  margin-top: 47px;
-}
-
-.developer-title img {
-  width: 156px;
-  height: 23px;
-}
-
-.developer-avatar {
-  margin: 19px auto 0;
-  width: 66px;
-  height: 66px;
-}
-
-.developer-avatar img {
-  width: 100%;
-  height: 100%;
-}
-
-.developer-content {
-  overflow: hidden;
-  line-height: 20px;
-  font-weight: 600;
-  font-size: 14px;
-  color: #9E733A;
-}
-
-.developer-content p:nth-child(1) {
-  margin-top: 43px;
-}
-
-.developer-content p:nth-child(2) {
-  margin-top: 30px;
-}
-
-.developer-content p:nth-child(3) {
-  margin-top: 30px;
-}
-
-.developer-content p:nth-child(4) {
-  margin-top: 30px;
-}
-
-.developer-content p:nth-child(5) {
-  margin-top: 30px;
-}
-
-.developer-price-wrapper {
-  margin-top: 52px;
-  display: flex;
-  justify-content: center;
-}
-
-.developer-price {
-  font-size: 15px;
-  color: #222222;
-}
-
-.developer-price span {
-  line-height: 40px;
-  font-weight: 600;
-  font-size: 28px;
-  color: #222222;
-}
-
-.original-price {
-  margin-top: 15px;
-  margin-left: 5px;
-  line-height: 17px;
-  font-size: 12px;
-  color: #666666;
-  text-decoration: line-through;
-}
-
-.developer-btn {
-  margin: 21px auto 0;
-  width: 195px;
-  height: 44px;
-  background-color: #D4AB4C;
-  line-height: 44px;
-  text-align: center;
-  font-weight: 500;
-  font-size: 14px;
-  color: #0E0E0E;
-}
-
-.tips {
-  margin-top: 38px;
-}
-
-.tips-title {
-  line-height: 20px;
-  font-weight: 600;
-  font-size: 14px;
-  color: #666666;
-}
-
-.tips-content {
-  margin-top: 3px;
-  line-height: 28px;
-  font-size: 14px;
-  color: #919AA7;
-}
-
-.tips-content span {
-  color: #308EFF;
-}
-</style>
+  .wrapper {
+    overflow: hidden;
+  }
+
+  .title {
+    margin-top: 54px;
+    line-height: 45px;
+    text-align: center;
+    font-weight: 600;
+    font-size: 32px;
+    color: #222222;
+  }
+
+  .subtitle {
+    margin-top: 4px;
+    line-height: 22px;
+    text-align: center;
+    font-size: 16px;
+    color: #999999;
+  }
+
+  .content {
+    margin: 49px auto 0;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  .explain {
+    overflow: hidden;
+    width: 304px;
+    height: 606px;
+    border-radius: 2px;
+    background-color: #FFFFFF;
+    border: 1px solid #D6DBE3;
+    box-shadow: 0px 4px 20px 0px rgba(0, 21, 53, 0.05);
+    text-align: center;
+  }
+
+  .explain-title {
+    margin-top: 45px;
+    line-height: 28px;
+    font-weight: 600;
+    font-size: 20px;
+    color: #8E5B15;
+  }
+
+  .explain-content {
+    overflow: hidden;
+    line-height: 20px;
+    font-size: 14px;
+    color: #222222;
+  }
+
+  .explain-content p:nth-child(1) {
+    margin-top: 125px;
+  }
+
+  .explain-content p:nth-child(2) {
+    margin-top: 30px;
+  }
+
+  .explain-content p:nth-child(3) {
+    margin-top: 30px;
+  }
+
+  .explain-content p:nth-child(4) {
+    margin-top: 30px;
+  }
+
+  .explain-content p:nth-child(5) {
+    margin-top: 30px;
+  }
+
+  .explain-content p {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .explain-content img {
+    margin-left: 5px;
+    width: 13px;
+    height: 13px;
+  }
+
+  .ordinary {
+    overflow: hidden;
+    width: 315px;
+    height: 606px;
+    border-radius: 2px;
+    background-color: #FFFFFF;
+    border: 1px solid #D6DBE3;
+    box-shadow: 0px 4px 20px 0px rgba(0, 21, 53, 0.05);
+    text-align: center;
+  }
+
+  .ordinary-title {
+    margin-top: 45px;
+    line-height: 28px;
+    font-weight: 600;
+    font-size: 20px;
+    color: #666666;
+  }
+
+  .ordinary-avatar {
+    margin: 16px auto 0;
+    width: 66px;
+    height: 66px;
+  }
+
+  .ordinary-avatar img {
+    width: 100%;
+    height: 100%;
+  }
+
+  .ordinary-content {
+    overflow: hidden;
+    line-height: 20px;
+    font-size: 14px;
+    color: #666666;
+  }
+
+  .ordinary-content p:nth-child(1) {
+    margin-top: 43px;
+  }
+
+  .ordinary-content p:nth-child(2) {
+    margin-top: 30px;
+  }
+
+  .ordinary-content p:nth-child(3) {
+    margin-top: 30px;
+  }
+
+  .ordinary-content p:nth-child(4) {
+    margin-top: 30px;
+  }
+
+  .ordinary-content p:nth-child(5) {
+    margin-top: 30px;
+  }
+
+  .developer {
+    overflow: hidden;
+    width: 326px;
+    height: 606px;
+    border-radius: 2px;
+    background-color: #FFF9ED;
+    border: 1px solid #C89A29;
+    box-shadow: 0px 4px 20px 0px rgba(199, 160, 61, 0.13);
+    text-align: center;
+  }
+
+  .developer-title {
+    margin-top: 47px;
+  }
+
+  .developer-title img {
+    width: 156px;
+    height: 23px;
+  }
+
+  .developer-avatar {
+    margin: 19px auto 0;
+    width: 66px;
+    height: 66px;
+  }
+
+  .developer-avatar img {
+    width: 100%;
+    height: 100%;
+  }
+
+  .developer-content {
+    overflow: hidden;
+    line-height: 20px;
+    font-weight: 600;
+    font-size: 14px;
+    color: #9E733A;
+  }
+
+  .developer-content p:nth-child(1) {
+    margin-top: 43px;
+  }
+
+  .developer-content p:nth-child(2) {
+    margin-top: 30px;
+  }
+
+  .developer-content p:nth-child(3) {
+    margin-top: 30px;
+  }
+
+  .developer-content p:nth-child(4) {
+    margin-top: 30px;
+  }
+
+  .developer-content p:nth-child(5) {
+    margin-top: 30px;
+  }
+
+  .developer-price-wrapper {
+    margin-top: 52px;
+    display: flex;
+    justify-content: center;
+  }
+
+  .developer-price {
+    font-size: 15px;
+    color: #222222;
+  }
+
+  .developer-price span {
+    line-height: 40px;
+    font-weight: 600;
+    font-size: 28px;
+    color: #222222;
+  }
+
+  .original-price {
+    margin-top: 15px;
+    margin-left: 5px;
+    line-height: 17px;
+    font-size: 12px;
+    color: #666666;
+    text-decoration: line-through;
+  }
+
+  .developer-btn {
+    margin: 21px auto 0;
+    width: 195px;
+    height: 44px;
+    background-color: #D4AB4C;
+    line-height: 44px;
+    text-align: center;
+    font-weight: 500;
+    font-size: 14px;
+    color: #0E0E0E;
+    cursor: pointer;
+  }
+
+  .tips {
+    margin-top: 38px;
+  }
+
+  .tips-title {
+    line-height: 20px;
+    font-weight: 600;
+    font-size: 14px;
+    color: #666666;
+  }
+
+  .tips-content {
+    margin-top: 3px;
+    line-height: 28px;
+    font-size: 14px;
+    color: #919AA7;
+  }
+
+  .tips-content span {
+    color: #308EFF;
+  }
+</style>

+ 430 - 373
pages/type/vip/enterprise.vue

@@ -45,7 +45,7 @@
           <p>无</p>
         </div>
         <div class="newly-price"><span>¥599</span>/月</div>
-        <div class="newly-btn" @click="submit(1)">立即开通</div>
+        <div class="newly-btn" @click="clickPay('com')">立即开通</div>
       </div>
       <div class="enterprise">
         <div class="enterprise-title">企业版</div>
@@ -56,13 +56,13 @@
           <p>100次/天</p>
           <p>每月送99元券3张<br/>每月送199元券2张<br/>每月送299元券1张</p>
           <p>不限次</p>
-          <p>整包服务减免<span>3%</span><br/>云端服务减免<span>3%</span></p>
+          <p>整包服务减免<span>2%</span><br/>云端服务减免<span>2%</span></p>
           <p>免费</p>
           <p>1人次/月</p>
           <p>1人次/月</p>
         </div>
         <div class="enterprise-price"><span>¥1599</span>/月</div>
-        <div class="enterprise-btn" @click="submit(2)">立即开通</div>
+        <div class="enterprise-btn" @click="clickPay('pre')">立即开通</div>
       </div>
     </div>
     <div class="tips">
@@ -73,385 +73,442 @@
         <p> 3.如有任何问题,欢迎咨询在线客服,或拨打热线:0571-28120931 转1</p>
       </div>
     </div>
+    <buy-dialog
+      :handleClose="handleClose"
+      :buyDialog="buyDialog"
+      :gotoPay="gotoPay"
+      :type="type"
+      :item="item"
+      :vipDetail="vipDetail"
+      :pricePrefix="pricePrefix"
+    ></buy-dialog>
   </div>
 </template>
 
 <script>
-export default {
-    data(){
-        return {
-
-        }
+  import buyDialog from "@/components/type/vip/buy-dialog";
+
+  export default {
+    data() {
+      return {
+        buyDialog: false,
+        pricePrefix: "",
+        type: "com", // com: 企业会员, dev: 开发者会员
+        vipList: [],
+        vipDetail: {},
+        item:{}
+      }
     },
-    methods:{
-    submit(type){
-        switch (type) {
-            case 1:
+    components: {
+      buyDialog
+    },
+    async mounted() {
+      await this.getList();
+      await this.getVipDetail();
+    },
+    methods: {
+      async getList() {
+        let extraHeaders = {};
+        if (this.deviceType === "ios") {
+          extraHeaders = this.getSign();
+        }
+        let res = await this.$axios.$post(`/api/vip/getList`, extraHeaders);
+        if (res) {
+          this.vipList = res.data;
+        }
+      },
+      async getVipDetail() {
+        let res = await this.$axios.$post("/api/vip/getVipUserDetail");
+        this.vipDetail = res && res.data ? res.data : {};
 
-                break;
+      },
+      clickPay(type) {
+        switch (type) {
+          case 'com':
+            this.item = this.vipList[0];
+            this.type='com';
+            break;
+          case 'pre':
+            this.item = this.vipList[2];
+            this.type='pre';
+            break;
         }
+        this.buyDialog = true;
+        // location.href = `/vip/pay?product_id=${item.id}&number=3&next=/type/vip/`;
+      },
+      handleClose() {
+        this.buyDialog = false;
+      },
+      gotoPay(number) {
+        const item = this.item;
+        location.href = `/vip/pay?product_id=${item.id}&number=${number}&next=/type/vip/`;
+      },
+      // 点击会员计划
+      clickProject(index) {
+        let vip = this.vipList[index];
+        window.open(recommend.seo_uri);
+      }
     }
-}
-}
+  }
 </script>
 
 <style lang="scss" scope>
-.wrapper {
-  overflow: hidden;
-}
-
-.title {
-  margin-top: 54px;
-  line-height: 45px;
-  text-align: center;
-  font-weight: 600;
-  font-size: 32px;
-  color: #222222;
-}
-
-.subtitle {
-  margin-top: 4px;
-  line-height: 22px;
-  text-align: center;
-  font-size: 16px;
-  color: #999999;
-}
-
-.content {
-  margin: 49px auto 0;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-}
-
-.explain {
-  overflow: hidden;
-  width: 226px;
-  height: 740px;
-  border-radius:2px;
-  background-color: #FFFFFF;
-  border:1px solid #D6DBE3;
-  box-shadow:0px 4px 20px 0px rgba(0,21,53,0.05);
-  text-align: center;
-}
-
-.explain-title {
-  margin-top: 88px;
-  line-height: 28px;
-  font-weight: 600;
-  font-size: 20px;
-  color: #666666;
-}
-
-.explain-content {
-  overflow: hidden;
-  line-height: 20px;
-  font-size: 14px;
-  color: #222222;
-}
-
-.explain-content p:nth-child(1) {
-  margin-top: 85px;
-}
-
-.explain-content p:nth-child(2) {
-  margin-top: 43px;
-}
-
-.explain-content p:nth-child(3) {
-  margin-top: 43px;
-}
-
-.explain-content p:nth-child(4) {
-  margin-top: 33px;
-}
-
-.explain-content p:nth-child(5) {
-  margin-top: 33px;
-}
-
-.explain-content p:nth-child(6) {
-  margin-top: 23px;
-}
-
-.explain-content p:nth-child(7) {
-  margin-top: 23px;
-}
-
-.ordinary {
-  overflow: hidden;
-  width: 260px;
-  height: 740px;
-  border-radius:2px;
-  background-color: #FFFFFF;
-  border:1px solid #D6DBE3;
-  box-shadow:0px 4px 20px 0px rgba(0,21,53,0.05);
-  text-align: center;
-}
-
-.ordinary-title {
-  margin-top: 40px;
-  line-height: 28px;
-  font-weight: 600;
-  font-size: 20px;
-  color: #666666;
-}
-
-.ordinary-avatar {
-  margin: 21px auto 0;
-  width: 66px;
-  height: 66px;
-}
-
-.ordinary-avatar img {
-  width: 100%;
-  height: 100%;
-}
-
-.ordinary-content {
-  overflow: hidden;
-  line-height: 20px;
-  font-size: 14px;
-  color: #666666;
-}
-
-.ordinary-content p:nth-child(1) {
-  margin-top: 46px;
-}
-
-.ordinary-content p:nth-child(2) {
-  margin-top: 43px;
-}
-
-.ordinary-content p:nth-child(3) {
-  margin-top: 43px;
-}
-
-.ordinary-content p:nth-child(4) {
-  margin-top: 33px;
-}
-
-.ordinary-content p:nth-child(5) {
-  margin-top: 33px;
-}
-
-.ordinary-content p:nth-child(6) {
-  margin-top: 23px;
-}
-
-.ordinary-content p:nth-child(7) {
-  margin-top: 23px;
-}
-
-.newly {
-  overflow: hidden;
-  width: 260px;
-  height: 740px;
-  border-radius:2px;
-  background-color: #F6FAFF;
-  border:1px solid #308EFF;
-  box-shadow:0px 4px 20px 0px rgba(48,142,255,0.15);
-  text-align: center;
-}
-
-.newly-title {
-  margin-top: 40px;
-  line-height: 28px;
-  font-weight: 600;
-  font-size: 20px;
-  color: #308EFF;
-}
-
-.newly-avatar {
-  margin: 21px auto 0;
-  width: 66px;
-  height: 66px;
-}
-
-.newly-avatar img {
-  width: 100%;
-  height: 100%;
-}
-
-.newly-content {
-  overflow: hidden;
-  line-height: 20px;
-  font-size: 14px;
-  color: #111111;
-}
-
-.newly-content p:nth-child(1) {
-  margin-top: 46px;
-}
-
-.newly-content p:nth-child(2) {
-  margin-top: 33px;
-}
-
-.newly-content p:nth-child(3) {
-  margin-top: 33px;
-}
-
-.newly-content p:nth-child(4) {
-  margin-top: 23px;
-}
-
-.newly-content p:nth-child(4) span {
-  color: #308EFF;
-}
-
-.newly-content p:nth-child(5) {
-  margin-top: 23px;
-}
-
-.newly-content p:nth-child(6) {
-  margin-top: 23px;
-}
-
-.newly-content p:nth-child(7) {
-  margin-top: 23px;
-}
-
-.newly-price {
-  margin-top: 52px;
-  font-size: 15px;
-  color: #222222;
-}
-
-.newly-price span {
-  line-height: 40px;
-  font-weight: 600;
-  font-size: 28px;
-  color: #222222;
-}
-
-.newly-btn {
-  margin: 21px auto 0;
-  width: 195px;
-  height: 44px;
-  background-color: #308EFF;
-  line-height: 44px;
-  text-align: center;
-  font-weight: 500;
-  font-size: 14px;
-  color: #FFFFFF;
-  cursor: pointer;
-}
-
-.enterprise {
-  overflow: hidden;
-  width: 260px;
-  height: 740px;
-  border-radius:2px;
-  background-color: #F3FFFA;
-  border:1px solid #00C469;
-  box-shadow:0px 4px 20px 0px rgba(0,196,105,0.14);
-  text-align: center;
-}
-
-.enterprise-title {
-  margin-top: 40px;
-  line-height: 28px;
-  font-weight: 600;
-  font-size: 20px;
-  color: #00C469;
-}
-
-.enterprise-avatar {
-  margin: 21px auto 0;
-  width: 66px;
-  height: 66px;
-}
-
-.enterprise-avatar img {
-  width: 100%;
-  height: 100%;
-}
-
-.enterprise-content {
-  overflow: hidden;
-  line-height: 20px;
-  font-size: 14px;
-  color: #111111;
-}
-
-.enterprise-content p:nth-child(1) {
-  margin-top: 46px;
-}
-
-.enterprise-content p:nth-child(2) {
-  margin-top: 23px;
-}
-
-.enterprise-content p:nth-child(3) {
-  margin-top: 23px;
-}
-
-.enterprise-content p:nth-child(4) {
-  margin-top: 23px;
-}
-
-.enterprise-content p:nth-child(4) span {
-  color: #00C469;
-}
-
-.enterprise-content p:nth-child(5) {
-  margin-top: 23px;
-}
-
-.enterprise-content p:nth-child(6) {
-  margin-top: 23px;
-}
-
-.enterprise-content p:nth-child(7) {
-  margin-top: 23px;
-}
-
-.enterprise-price {
-  margin-top: 52px;
-  font-size: 15px;
-  color: #222222;
-}
-
-.enterprise-price span {
-  line-height: 40px;
-  font-weight: 600;
-  font-size: 28px;
-  color: #222222;
-}
-
-.enterprise-btn {
-  margin: 21px auto 0;
-  width: 195px;
-  height: 44px;
-  background-color: #00C469;
-  line-height: 44px;
-  text-align: center;
-  font-weight: 500;
-  font-size: 14px;
-  color: #FFFFFF;
-  cursor: pointer;
-}
-
-.tips {
-  margin-top: 38px;
-}
-
-.tips-title {
-  line-height: 20px;
-  font-weight: 600;
-  font-size: 14px;
-  color: #666666;
-}
-
-.tips-content {
-  margin-top: 3px;
-  line-height: 28px;
-  font-size: 14px;
-  color: #919AA7;
-}
-
-.tips-content span {
-  color: #308EFF;
-}
+  .wrapper {
+    overflow: hidden;
+  }
+
+  .title {
+    margin-top: 54px;
+    line-height: 45px;
+    text-align: center;
+    font-weight: 600;
+    font-size: 32px;
+    color: #222222;
+  }
+
+  .subtitle {
+    margin-top: 4px;
+    line-height: 22px;
+    text-align: center;
+    font-size: 16px;
+    color: #999999;
+  }
+
+  .content {
+    margin: 49px auto 0;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  .explain {
+    overflow: hidden;
+    width: 226px;
+    height: 740px;
+    border-radius: 2px;
+    background-color: #FFFFFF;
+    border: 1px solid #D6DBE3;
+    box-shadow: 0px 4px 20px 0px rgba(0, 21, 53, 0.05);
+    text-align: center;
+  }
+
+  .explain-title {
+    margin-top: 88px;
+    line-height: 28px;
+    font-weight: 600;
+    font-size: 20px;
+    color: #666666;
+  }
+
+  .explain-content {
+    overflow: hidden;
+    line-height: 20px;
+    font-size: 14px;
+    color: #222222;
+  }
+
+  .explain-content p:nth-child(1) {
+    margin-top: 85px;
+  }
+
+  .explain-content p:nth-child(2) {
+    margin-top: 43px;
+  }
+
+  .explain-content p:nth-child(3) {
+    margin-top: 43px;
+  }
+
+  .explain-content p:nth-child(4) {
+    margin-top: 33px;
+  }
+
+  .explain-content p:nth-child(5) {
+    margin-top: 33px;
+  }
+
+  .explain-content p:nth-child(6) {
+    margin-top: 23px;
+  }
+
+  .explain-content p:nth-child(7) {
+    margin-top: 23px;
+  }
+
+  .ordinary {
+    overflow: hidden;
+    width: 260px;
+    height: 740px;
+    border-radius: 2px;
+    background-color: #FFFFFF;
+    border: 1px solid #D6DBE3;
+    box-shadow: 0px 4px 20px 0px rgba(0, 21, 53, 0.05);
+    text-align: center;
+  }
+
+  .ordinary-title {
+    margin-top: 40px;
+    line-height: 28px;
+    font-weight: 600;
+    font-size: 20px;
+    color: #666666;
+  }
+
+  .ordinary-avatar {
+    margin: 21px auto 0;
+    width: 66px;
+    height: 66px;
+  }
+
+  .ordinary-avatar img {
+    width: 100%;
+    height: 100%;
+  }
+
+  .ordinary-content {
+    overflow: hidden;
+    line-height: 20px;
+    font-size: 14px;
+    color: #666666;
+  }
+
+  .ordinary-content p:nth-child(1) {
+    margin-top: 46px;
+  }
+
+  .ordinary-content p:nth-child(2) {
+    margin-top: 43px;
+  }
+
+  .ordinary-content p:nth-child(3) {
+    margin-top: 43px;
+  }
+
+  .ordinary-content p:nth-child(4) {
+    margin-top: 33px;
+  }
+
+  .ordinary-content p:nth-child(5) {
+    margin-top: 33px;
+  }
+
+  .ordinary-content p:nth-child(6) {
+    margin-top: 23px;
+  }
+
+  .ordinary-content p:nth-child(7) {
+    margin-top: 23px;
+  }
+
+  .newly {
+    overflow: hidden;
+    width: 260px;
+    height: 740px;
+    border-radius: 2px;
+    background-color: #F6FAFF;
+    border: 1px solid #308EFF;
+    box-shadow: 0px 4px 20px 0px rgba(48, 142, 255, 0.15);
+    text-align: center;
+  }
+
+  .newly-title {
+    margin-top: 40px;
+    line-height: 28px;
+    font-weight: 600;
+    font-size: 20px;
+    color: #308EFF;
+  }
+
+  .newly-avatar {
+    margin: 21px auto 0;
+    width: 66px;
+    height: 66px;
+  }
+
+  .newly-avatar img {
+    width: 100%;
+    height: 100%;
+  }
+
+  .newly-content {
+    overflow: hidden;
+    line-height: 20px;
+    font-size: 14px;
+    color: #111111;
+  }
+
+  .newly-content p:nth-child(1) {
+    margin-top: 46px;
+  }
+
+  .newly-content p:nth-child(2) {
+    margin-top: 33px;
+  }
+
+  .newly-content p:nth-child(3) {
+    margin-top: 33px;
+  }
+
+  .newly-content p:nth-child(4) {
+    margin-top: 23px;
+  }
+
+  .newly-content p:nth-child(4) span {
+    color: #308EFF;
+  }
+
+  .newly-content p:nth-child(5) {
+    margin-top: 23px;
+  }
+
+  .newly-content p:nth-child(6) {
+    margin-top: 23px;
+  }
+
+  .newly-content p:nth-child(7) {
+    margin-top: 23px;
+  }
+
+  .newly-price {
+    margin-top: 52px;
+    font-size: 15px;
+    color: #222222;
+  }
+
+  .newly-price span {
+    line-height: 40px;
+    font-weight: 600;
+    font-size: 28px;
+    color: #222222;
+  }
+
+  .newly-btn {
+    margin: 21px auto 0;
+    width: 195px;
+    height: 44px;
+    background-color: #308EFF;
+    line-height: 44px;
+    text-align: center;
+    font-weight: 500;
+    font-size: 14px;
+    color: #FFFFFF;
+    cursor: pointer;
+  }
+
+  .enterprise {
+    overflow: hidden;
+    width: 260px;
+    height: 740px;
+    border-radius: 2px;
+    background-color: #F3FFFA;
+    border: 1px solid #00C469;
+    box-shadow: 0px 4px 20px 0px rgba(0, 196, 105, 0.14);
+    text-align: center;
+  }
+
+  .enterprise-title {
+    margin-top: 40px;
+    line-height: 28px;
+    font-weight: 600;
+    font-size: 20px;
+    color: #00C469;
+  }
+
+  .enterprise-avatar {
+    margin: 21px auto 0;
+    width: 66px;
+    height: 66px;
+  }
+
+  .enterprise-avatar img {
+    width: 100%;
+    height: 100%;
+  }
+
+  .enterprise-content {
+    overflow: hidden;
+    line-height: 20px;
+    font-size: 14px;
+    color: #111111;
+  }
+
+  .enterprise-content p:nth-child(1) {
+    margin-top: 46px;
+  }
+
+  .enterprise-content p:nth-child(2) {
+    margin-top: 23px;
+  }
+
+  .enterprise-content p:nth-child(3) {
+    margin-top: 23px;
+  }
+
+  .enterprise-content p:nth-child(4) {
+    margin-top: 23px;
+  }
+
+  .enterprise-content p:nth-child(4) span {
+    color: #00C469;
+  }
+
+  .enterprise-content p:nth-child(5) {
+    margin-top: 23px;
+  }
+
+  .enterprise-content p:nth-child(6) {
+    margin-top: 23px;
+  }
+
+  .enterprise-content p:nth-child(7) {
+    margin-top: 23px;
+  }
+
+  .enterprise-price {
+    margin-top: 52px;
+    font-size: 15px;
+    color: #222222;
+  }
+
+  .enterprise-price span {
+    line-height: 40px;
+    font-weight: 600;
+    font-size: 28px;
+    color: #222222;
+  }
+
+  .enterprise-btn {
+    margin: 21px auto 0;
+    width: 195px;
+    height: 44px;
+    background-color: #00C469;
+    line-height: 44px;
+    text-align: center;
+    font-weight: 500;
+    font-size: 14px;
+    color: #FFFFFF;
+    cursor: pointer;
+  }
+
+  .tips {
+    margin-top: 38px;
+  }
+
+  .tips-title {
+    line-height: 20px;
+    font-weight: 600;
+    font-size: 14px;
+    color: #666666;
+  }
+
+  .tips-content {
+    margin-top: 3px;
+    line-height: 28px;
+    font-size: 14px;
+    color: #919AA7;
+  }
+
+  .tips-content span {
+    color: #308EFF;
+  }
 </style>

+ 3 - 7
pages/type/vip/index.vue

@@ -5,17 +5,11 @@
 
 <script>
 import { mapState } from "vuex";
-// import http from '@/plugins/http'
 import pc from "@/components/type/vip/pc";
 import mobile from "@/components/type/vip/mobile";
 import getDeviceType from "@/mixins/getDeviceType";
-import qs from "qs";
 
 export default {
-  // async asyncData({ $axios, params }) {
-  //   let res = await $axios.$get(`/api/vip/getList`)
-  //   console.log('init', res)
-  // },
   head: {
     title: "会员中心页 - 程序员客栈"
   },
@@ -46,6 +40,9 @@ export default {
   async mounted() {
     await this.getList();
     this.getVipDetail();
+    if (this.isPC){
+      //location.href="/#vip";
+    }
   },
   methods: {
     async getList() {
@@ -60,7 +57,6 @@ export default {
     },
     async getVipDetail() {
       let res = await this.$axios.$post("/api/vip/getVipUserDetail");
-      // if (!res || !res.data) return
       this.vipDetail = res && res.data ? res.data : {};
       if (this.isCom) this.currentCom = true;
     }