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

<template>
  <div class="wrapper" v-if="detail">
    <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">
      <div class="title-wrapper">
        <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="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">· 认证的云端开发者可同时接两单</div>
          <img class="item-include" src="@/assets/img/vip/icon_include_brown.png" alt="">
        </div>
        <div class="item">
          <div class="item-title"> · 专属VIP服务顾问</div>
          <img class="item-include" src="@/assets/img/vip/icon_include_brown.png" alt="">
        </div>
      </div>
      <div class="list" 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" 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>
      <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";

  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 (window.appBridge && _this.active === 1 && _this.current === 0) {
                window.appBridge.setTitleBarColor('#308EFF');
                _this.currentType = 1;
              } else if (window.appBridge && _this.active === 1 && _this.current === 1) {
                window.appBridge.setTitleBarColor('#00BF66');
                _this.currentType = 3;
              }
            },
          }
        },
        buyDialog: false,
        type: "com", // com: 企业会员, dev: 开发者会员
        currentType: 2,
      };
    },
    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
      if (activeName==='enterprise') {
        this.active = 1
      } else {
        this.active = 0
      }
      if (window.appBridge && this.active === 0) {
        window.appBridge.setTitleBarColor('#D89823')
      } else if (window.appBridge && this.active === 1 && this.current === 0) {
        window.appBridge.setTitleBarColor('#308EFF')
      } else if (window.appBridge && this.active === 1 && this.current === 1) {
        window.appBridge.setTitleBarColor('#00BF66')
      }
    },
    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 (window.appBridge) {
          if (this.active === 0) {
            window.appBridge.setTitleBarColor('#D89823');
          } else if (this.active === 1 && this.current === 0) {
            window.appBridge.setTitleBarColor('#308EFF');
          } else if (this.active === 1 && this.current === 1) {
            window.appBridge.setTitleBarColor('#00BF66');
          }
        }
      }
    }
  };
</script>

<style scoped lang="scss">

  @import "~@/assets/css/scssCommon.scss";

  .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(.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(.17);
    line-height: remtovw(0.3);
    font-size: remtovw(0.22);
    color: #919AA7;
    text-decoration: line-through;
  }

  .monthly-discount-price {
    margin-left: remtovw(.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: remtovw(0.15);
    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>