proginn-frontend/components/type/vip/mobile.vue

<template>
  <div class="wrapper" v-if="detail">
    <!--顶部tab-->
    <div class="switch-bar" :class="active===0?'switch-bar-brown':current===0?'switch-bar-blue':'switch-bar-green'">
      <div class="switch-item" :class="{'switch-item-active':active===0}" @click="handleSwitchClick(0)">
        <div class="switch-item-title">开发者会员</div>
        <div class="switch-item-border"/>
      </div>
      <div class="switch-item" :class="{'switch-item-active':active===1}" @click="handleSwitchClick(1)">
        <div class="switch-item-title">企业会员</div>
        <div class="switch-item-border"/>
      </div>
    </div>
    <!--名片-->
    <div class="banner-brown-wrapper" v-show="active===0">
      <div class="banner-brown">
        <div class="banner-content">
          <div class="avatar">
            <img :src="userInfo.icon_url" alt/>
          </div>
          <div class="name-wrapper">
            <div class="name">{{userInfo.nickname}}</div>
            <div class="validity">{{vipType === 2 ? endTimeCalc :'暂未开通'}}</div>
          </div>
          <div
            class="renew-btn"
            :class="vipColor"
            @click="clickPay('dev')"
          >{{vipType === 2 ? '续费' : '开通'}}
          </div>
        </div>
      </div>
    </div>
    <!--企业会员信息-->
    <div v-swiper:mySwiper="swiperOption" v-show="active===1">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="banner-blue-wrapper">
            <div class="banner-blue">
              <div class="banner-content">
                <div class="avatar">
                  <img :src="userInfo.icon_url" alt/>
                </div>
                <div class="name-wrapper">
                  <div class="name">{{userInfo.nickname}}</div>
                  <div class="validity">{{vipType ===1 ? endTimeCalc : '暂未开通'}}</div>
                </div>
                <div
                  class="renew-btn"
                  :class="vipColor"
                  @click="clickPay('com')"
                >{{vipType === 1 ? '续费' : '开通'}}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="banner-green-wrapper">
            <div class="banner-green">
              <div class="banner-content">
                <div class="avatar">
                  <img :src="userInfo.icon_url" alt/>
                </div>
                <div class="name-wrapper">
                  <div class="name">{{userInfo.nickname}}</div>
                  <div class="validity">{{vipType ===3 ? endTimeCalc : '暂未开通'}}</div>
                </div>
                <div
                  class="renew-btn"
                  :class="vipColor"
                  @click="clickPay('pre')"
                >{{vipType === 3 ? '续费' : '开通'}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-pagination swiper-pagination-bullets"></div>
    </div>
    <div class="content" style="background: #f4f5f9">
      <div class="title-wrapper app__bg_w app__pl_10 app__pr_10 app__bd_b_eee" style="margin: 0;width:100vw">
        <div class="title">{{vipName}}</div>
        <div class="price-wrapper">
          <div class="monthly-price-wrapper">
            <div class="monthly-origin-price">原价￥{{detail.monthly_origin_price}}/月</div>
            <div class="monthly-discount-price">
              <span>￥{{detail.monthly_real_price}}</span>/月
            </div>
          </div>
          <div class="quarterly-price">
            按季付费
            <span>￥{{detail.quarterly_real_price}}</span>
          </div>
        </div>
      </div>

      <div class="app__f_r app__al_c app__fs_15 app__pd_10 app__pt_10 app__pb_10 app__bg_w app__h_50" @click="viewRateDetail()" v-if="active===0">
        <p class="app__ml_10 app_f_g_1">会员数据:</p>
        <span class="app__fc_999">优先派单:{{Number(vipInfo.jobCount || 0) + Number(vipInfo.projectCount || 0)}}</span>
        <span class="app__fc_999 app__mr_5 app__ml_10">收益提升:{{vipInfo.vipFee || 0}}元</span>
      </div>
      <div class="app__fs_14 app__lh_3 app__pl_20 app__pr_20 app__fc_666 app__fw_400 app__h_233 app__bg_w app__mt_10 app__f_c app__jf_c" v-if="active===0">
        <div class="app__f_r app__al_c">
          <p class="app_f_g_1">系统优先派单,提升综合接单率</p>
          <img src="@/assets/img/vip/icon_include_brown.png" style="width:16px;height:11px;">
        </div>
        <div class="app__f_r app__al_c">
          <p class="app_f_g_1">每天可ping5次，综合提升接单率</p>
          <img src="@/assets/img/vip/icon_include_brown.png" style="width:16px;height:11px;">
        </div>
        <div class="app__f_r app__al_c">
          <p class="app_f_g_1">程序员列表置顶</p>
          <img src="@/assets/img/vip/icon_include_brown.png" style="width:16px;height:11px;">
        </div>
        <div class="app__f_r app__al_c">
          <p class="app_f_g_1">每月不限接单上限，最多同时派2单</p>
          <img src="@/assets/img/vip/icon_include_brown.png" style="width:16px;height:11px;">
        </div>
        <div class="app__f_r app__al_c">
          <p class="app_f_g_1">减免1%平台服务费,资质认证低至2折</p>
          <img src="@/assets/img/vip/icon_include_brown.png" style="width:16px;height:11px;">
        </div>
      </div>
      <!-- <div class="list" v-show="active===0">
         <div class="item">
           <div class="item-title">· 整包项目-平台服务费(减免{{detail.project_reduction_rate}}%)</div>
           <div class="item-discount">{{detail.project_discount}}折</div>
         </div>
         <div class="item">
           <div class="item-title">· 云端工作-平台服务费(减免{{detail.job_reduction_rate}}%)</div>
           <div class="item-discount">{{detail.job_discount}}折</div>
         </div>
         <div class="item">
           <div class="item-title">· 认证的自由开发者可同时接2单</div>
           <img class="item-include" src="@/assets/img/vip/icon_include_brown.png" alt />
         </div>
       </div>-->
      <div class="list app__bg_w app__mt_10" v-show="active===1 && current===0">
        <div class="item">
          <div class="item-title">· 整包项目-平台服务费(减免{{detail.project_reduction_rate}}%)</div>
          <div class="item-discount">{{detail.project_discount}}折</div>
        </div>
        <div class="item">
          <div class="item-title">· 云端工作-平台服务费(减免{{detail.job_reduction_rate}}%)</div>
          <div class="item-discount">{{detail.job_discount}}折</div>
        </div>
        <div class="item">
          <div class="item-title">· 每天{{detail.chat_times}}次程序员聊天次数</div>
          <img class="item-include" src="@/assets/img/vip/icon_include_brown.png" alt/>
        </div>
        <div class="item">
          <div class="item-title">· 每天{{detail.hire_times}}次雇佣项目发布次数</div>
          <img class="item-include" src="@/assets/img/vip/icon_include_brown.png" alt/>
        </div>
        <div class="item">
          <div class="item-title">· 免费进行企业认证</div>
          <img class="item-include" src="@/assets/img/vip/icon_include_brown.png" alt/>
        </div>
      </div>
      <div class="list app__bg_w app__mt_10" v-show="active===1 && current===1">
        <div class="item">
          <div class="item-title">· 整包项目-平台服务费(减免{{detail.project_reduction_rate}}%)</div>
          <div class="item-discount">{{detail.project_discount}}折</div>
        </div>
        <div class="item">
          <div class="item-title">· 云端工作-平台服务费(减免{{detail.job_reduction_rate}}%)</div>
          <div class="item-discount">{{detail.job_discount}}折</div>
        </div>
        <div class="item">
          <div class="item-title">· 每天不限次程序员聊天次数</div>
          <img class="item-include" src="@/assets/img/vip/icon_include_brown.png" alt/>
        </div>
        <div class="item">
          <div class="item-title">· 每天{{detail.hire_times}}次雇佣项目发布次数</div>
          <img class="item-include" src="@/assets/img/vip/icon_include_brown.png" alt/>
        </div>
        <div class="item">
          <div class="item-title">· 免费进行企业认证</div>
          <img class="item-include" src="@/assets/img/vip/icon_include_brown.png" alt/>
        </div>
      </div>
      <!--      <h4 class="app__pl_20 app__pt_10">会员权益</h4>-->

      <div class="tips-wrapper">
        <div class="tips-title">会员说明</div>
        <div class="tips-content">
          <p>1.购买会员按季付费；</p>
          <p>2.开通会员即代表您已同意《程序员客栈会员服务条款》；</p>
          <p>3.如有任何问题，欢迎咨询在线客服，或拨打热线：0571-28120931 转1。</p>
        </div>
      </div>
    </div>
    <buy-dialog
      :handleClose="handleClose"
      :buyDialog="buyDialog"
      :gotoPay="gotoPay"
      :type="type"
      :item="detail"
      :vipDetail="vipDetail"
      :pricePrefix="pricePrefix"
    ></buy-dialog>
  </div>
</template>

<script>
  let touchX = 0;
  import getDeviceType from "@/mixins/getDeviceType";
  import qs from "qs";
  import buyDialog from "./buy-dialog";
  import bridge from '../../../plugins/bridge';

  export default {
    props: ["com", "dev", "pre", "vipDetail"],
    data() {
      const _this = this;
      return {
        active: 0,
        current: 0,
        swiperOption: {
          loop: false,
          slidesPerView: "auto",
          centeredSlides: true,
          spaceBetween: 30,
          pagination: {
            el: ".swiper-pagination",
            dynamicBullets: true,
          },
          on: {
            slideChange() {
              _this.current = this.realIndex;
              if (bridge.isInApp) {
                if (_this.active === 1 && _this.current === 0) {
                  bridge.setNavigationBarColor('#308EFF');
                  _this.currentType = 1;
                } else if (_this.active === 1 && _this.current === 1) {
                  bridge.setNavigationBarColor('#00BF66');
                  _this.currentType = 3;
                }
              }
            },
          },
        },
        buyDialog: false,
        type: "com", // com: 企业会员, dev: 开发者会员
        currentType: 2,
        vipInfo: {}
      };
    },
    components: {
      buyDialog,
    },
    mixins: [getDeviceType],
    computed: {
      endTimeCalc() {
        return "有效期至" + this.userInfo.vip_end_date;
      },
      detail() {
        if (this.active === 0) {
          return this.dev;
        } else if (this.active === 1) {
          if (this.current === 0) {
            return this.com;
          } else if (this.current === 1) {
            return this.pre;
          } else {
            return [];
          }
        }
      },
      vipType() {
        return this.userInfo.vip_type || 0;
      },
      userInfo() {
        return this.vipDetail.user_info || {};
      },
      pricePrefix() {
        return this.deviceType === "ios" ? "apple_" : "";
      },
      vipName() {
        if (this.active === 0) {
          return "开发者会员";
        } else if (this.active === 1) {
          if (this.current === 0) {
            return "初创版会员";
          } else if (this.current === 1) {
            return "企业版会员";
          }
        }
      },
      vipColor() {
        if (this.active === 0) {
          return "yellow";
        } else if (this.active === 1) {
          if (this.current === 0) {
            return "blue";
          } else if (this.current === 1) {
            return "green";
          }
        }
      },
    },
    mounted() {
      const activeName = this.$route.query.activeName;
      const current = this.$route.query.current;
      if (activeName === "enterprise") {
        this.active = 1;
      } else {
        this.active = 0;
      }
      if (current === "1") {
        this.current = 1;
      }
      if (bridge.isInApp) {
        if (this.active === 0) {
          bridge.setNavigationBarColor('#D89823');
        } else if (this.active === 1 && this.current === 0) {
          bridge.setNavigationBarColor('#308EFF');
        } else if (this.active === 1 && this.current === 1) {
          bridge.setNavigationBarColor('#00BF66');
        }
      }
      this.getVipInfo();
    },
    methods: {
      clickPay(type) {
        this.type = type;
        this.buyDialog = true;
        // location.href = `/vip/pay?product_id=${item.id}&number=3&next=/type/vip/`;
      },
      handleClose() {
        this.buyDialog = false;
      },
      async gotoPay(number) {
        const item = this[this.type];
        let query = {
          product_type: 11,
          number: number,
          product_id: item.id,
        };
        // if (this.deviceType === "ios") {
        //   // alert('ios begin pay..');
        //   let cookie = this.getSign();
        //   let res = await this.$axios.$post("/api/vip/pay", {
        //     product_type: 11,
        //     number: number,
        //     product_id: item.id,
        //     channel: "apple",
        //     needLogin: true,
        //     ...cookie
        //   });
        //   if (res && res.data) {
        //     query = Object.assign({}, query, res.data);
        //     location.href = "proginn://pay?" + qs.stringify(query);
        //   }
        // } else {
        location.href = "proginn://pay?" + qs.stringify(query);
        // }
      },
      /**
       * 手指右划
       */
      swipeRight() {
        this.currentCom = false;
      },
      /**
       * 手指左划
       */
      swipeLeft() {
        this.currentCom = true;
      },
      touchStart(e) {
        touchX = e.touches[0].clientX;
      },
      touchEnd(e) {
        var offsetX = e.changedTouches[0].clientX - touchX;
        if (offsetX < -50) this.swipeLeft();
        else if (offsetX > 50) this.swipeRight();
      },

      handleSwitchClick(index) {
        this.active = index;
        if (bridge.isInApp) {
          if (this.active === 0) {
            bridge.setNavigationBarColor('#D89823');
          } else if (this.active === 1 && this.current === 0) {
            bridge.setNavigationBarColor('#308EFF');
          } else if (this.active === 1 && this.current === 1) {
            bridge.setNavigationBarColor('#00BF66');
          }
        }
      },
      viewRateDetail() {
        location.href = "../type/vip/orderRateDetail";
      },
      async getVipInfo() {
        let _this = this;
        let res = await this.$axios.$post(`/api/user/getUserVipInfo`);
        if (Number(res.status) === 1) {
          console.log("6666", res);
          this.vipInfo = res.data;
        }
      },
    },
  };
</script>

<style scoped lang="scss">
  @import "../../../assets/css/scssCommon.scss";
  @import "../../../assets/css/public.css";

  .wrapper {
    overflow: hidden;
    margin-top: 0;
    width: 100%;
    background-color: #f4f5f9;
  }

  .switch-bar {
    display: flex;
    background-color: #d89823;
  }

  .switch-bar-brown {
    background-color: #d89823;
  }

  .switch-bar-blue {
    background-color: #308eff;
  }

  .switch-bar-green {
    background-color: #00bf66;
  }

  .switch-item {
    flex: 1;
    padding-top: remtovw(0.4);
    padding-bottom: remtovw(0.15);
  }

  .switch-item .switch-item-title {
    line-height: remtovw(0.42);
    text-align: center;
    font-size: remtovw(0.3);
    color: #ffffff;
  }

  .switch-item .switch-item-border {
    margin: remtovw(0.18) auto 0;
    width: remtovw(0.6);
    height: remtovw(0.06);
    background-color: transparent;
  }

  .switch-item-active .switch-item-title {
    font-weight: 600;
  }

  .switch-item-active .switch-item-border {
    background-color: #ffffff;
  }

  .banner-brown-wrapper {
    background-color: #d89823;
  }

  .banner-brown {
    overflow: hidden;
    margin: 0 auto;
    width: remtovw(7);
    height: remtovw(2.9);
    background-image: url("~@/assets/img/vip/banner_brown.png");
    background-size: 100%;
    background-repeat: no-repeat;
  }

  .banner-blue-wrapper {
    background-color: #308eff;
  }

  .banner-blue {
    overflow: hidden;
    margin: 0 auto;
    width: remtovw(7);
    height: remtovw(2.9);
    background-image: url("~@/assets/img/vip/banner_blue.png");
    background-size: 100%;
    background-repeat: no-repeat;
  }

  .banner-green-wrapper {
    background-color: #00bf66;
  }

  .banner-green {
    overflow: hidden;
    margin: 0 auto;
    width: remtovw(7);
    height: remtovw(2.9);
    background-image: url("~@/assets/img/vip/banner_green.png");
    background-size: 100%;
    background-repeat: no-repeat;
  }

  .banner-content {
    margin-top: remtovw(1.12);
    display: flex;
    align-items: center;
  }

  .avatar {
    position: relative;
    margin-left: remtovw(0.32);
    width: remtovw(1.1);
    height: remtovw(1.1);
  }

  .avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: remtovw(0.03) solid #e1a83f;
  }

  .name-wrapper {
    flex: 1;
    margin-left: remtovw(0.23);
  }

  .name {
    line-height: remtovw(0.48);
    font-weight: 500;
    font-size: remtovw(0.34);
    color: #222222;
  }

  .validity {
    margin-top: remtovw(0.02);
    line-height: remtovw(0.3);
    font-size: remtovw(0.22);
    color: rgba(34, 34, 34, 0.6);
  }

  .renew-btn {
    margin-right: remtovw(0.3);
    width: remtovw(1.54);
    height: remtovw(0.64);
    border-radius: remtovw(0.32);
    background-color: #d89823;
    line-height: remtovw(0.64);
    font-weight: 600;
    text-align: center;
    font-size: remtovw(0.26);
    color: #ffffff;
  }

  .content {
    overflow: hidden;
    background-color: #ffffff;
  }

  .title-wrapper {
    margin: 0 auto;
    width: remtovw(7.1);
    padding-bottom: remtovw(0.2);
    display: flex;
  }

  .title {
    flex: 1;
    margin-top: remtovw(0.17);
    margin-left: remtovw(0.24);
    line-height: remtovw(0.75);
    font-weight: 600;
    font-size: remtovw(0.29);
    color: #222222;
  }

  .price-wrapper {
    margin-top: remtovw(0.23);
    text-align: right;
  }

  .monthly-price-wrapper {
    display: flex;
  }

  .monthly-origin-price {
    margin-top: remtovw(0.17);
    line-height: remtovw(0.3);
    font-size: remtovw(0.22);
    color: #919aa7;
    text-decoration: line-through;
  }

  .monthly-discount-price {
    margin-left: remtovw(0.07);
    line-height: remtovw(0.62);
    font-size: remtovw(0.24);
    color: #222222;
  }

  .monthly-discount-price span {
    font-weight: 600;
    font-size: remtovw(0.45);
  }

  .quarterly-price {
    margin-top: remtovw(0.01);
    margin-right: remtovw(0.05);
    line-height: remtovw(0.33);
    font-size: remtovw(0.24);
    color: #666666;
  }

  .quarterly-price span {
    color: #333333;
  }

  .list {
    padding-top: remtovw(0.3);
    padding-bottom: remtovw(0.33);
  }

  .item {
    margin: 0 auto;
    width: remtovw(7.1);
    display: flex;
    align-items: center;
  }

  .item-title {
    flex: 1;
    line-height: remtovw(0.74);
    font-size: remtovw(0.28);
    color: #1d2a3a;
  }

  .item-discount {
    width: remtovw(1.02);
    height: remtovw(0.44);
    background-image: url("~@/assets/img/vip/icon_discount_brown.png");
    background-size: 100%;
    background-repeat: no-repeat;
    line-height: remtovw(0.44);
    text-indent: remtovw(0.16);
    font-size: remtovw(0.22);
    color: #e1a83f;
  }

  .item-include {
    margin-right: remtovw(0.35);
    width: remtovw(0.3);
    height: remtovw(0.2);
  }

  .tips-wrapper {
    overflow: hidden;
    margin-top: 10px;
    padding-bottom: remtovw(0.39);
    background-color: #ffffff;
  }

  .tips-title {
    margin-top: remtovw(0.36);
    margin-left: remtovw(0.2);
    line-height: remtovw(0.4);
    font-weight: 600;
    font-size: remtovw(0.28);
    color: #666666;
  }

  .tips-content {
    margin-top: remtovw(0.18);
    margin-left: remtovw(0.2);
    width: remtovw(6.8);
    line-height: remtovw(0.56);
    font-size: remtovw(0.26);
    color: #999999;
  }

  .green {
    background-color: #00bf66;
  }

  .yellow {
    background-color: #d89823;
  }

  .blue {
    background-color: #308eff;
  }
</style>