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

<template>
  <div class="wrapper">
    <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">{{isCom?'暂未开通':endTimeCalc}}</div>
          </div>
          <div class="renew-btn">{{vipNow ? '续费' : '开通'}}</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">{{isCom?'暂未开通':endTimeCalc}}</div>
                </div>
                <div class="renew-btn">{{vipNow ? '续费' : '开通'}}</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">{{isCom?'暂未开通':endTimeCalc}}</div>
                </div>
                <div class="renew-btn">{{vipNow ? '续费' : '开通'}}</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">开发者会员</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">· 整包项目-平台服务费(减免2%) </div>
          <div class="item-discount">{{detail.project_discount}}折</div>
        </div>
        <div class="item">
          <div class="item-title">· 云端工作-平台服务费(减免1%)  </div>
          <div class="item-discount">{{detail.project_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">· 整包项目-平台服务费(减免2%) </div>
          <div class="item-discount">8.0折</div>
        </div>
        <div class="item">
          <div class="item-title">· 云端工作-平台服务费(减免1%)  </div>
          <div class="item-discount">8.3折</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===1">
        <div class="item">
          <div class="item-title">· 整包项目-平台服务费(减免2%) </div>
          <div class="item-discount">8.0折</div>
        </div>
        <div class="item">
          <div class="item-title">· 云端工作-平台服务费(减免1%)  </div>
          <div class="item-discount">8.3折</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="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>
  </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", "vipDetail", "isCom"],
  data() {
    const _this = this
    return {
      active: 0,
      current: 0,
      swiperOption: {
        loop: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        spaceBetween: 30,
        pagination: {
          el: '.swiper-pagination',
          dynamicBullets: true
        },
        on: {
          slideChange() {
            console.log(window)
            _this.current = this.realIndex
            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')
            }
          },
          tap() {
            console.log('onTap', this);
          }
        }
      },
      // 当前是企业页
      currentCom: false,
      // 会员详情
      // vipDetail: {},
      buyDialog: false,
      type: "com" // com: 企业会员, dev: 开发者会员
    };
  },
  components: {
    buyDialog
  },
  mixins: [getDeviceType],
  computed: {
    item: function() {
      return this[this.type] || {};
    },
    endTimeCalc() {
      return this.vipNow ? "有效期至" + this.userInfo.vip_end_date : "暂未开通";
    },
    detail() {
      return (this.currentCom ? this.com : this.dev) || {};
    },
    vipNow() {
      return this.vipDetail.is_vip || false;
    },
    vipInfo() {
      return this.vipDetail.vip_info || {};
    },
    userInfo() {
      console.log(this.vipDetail);
      return this.vipDetail.user_info || {};
    },
    pricePrefix() {
      return this.deviceType === "ios" ? "apple_" : "";
    }
  },
  mounted() {
    console.log("mobile", this.com, this.dev);
    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") {
        let cookie = this.getSign();
        let res = await this.$axios.$post("/api/vip/pay", {
          product_type: 11,
          number: number,
          product_id: item.id,
          channel: "apple",
          ...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();
    },
    /**
     * 点击会员计划
     */
    clickProject(index) {
      const vip = this.vipDetail[index];
      window.open(recommend.seo_uri);
    },
    handleSwitchClick(index) {
      this.active = index
      console.log(this.active)
      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')
      }
    }
  }
};
</script>

<style scoped>
.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: .4rem;
  padding-bottom: .15rem;
}

.switch-item .switch-item-title {
  line-height: .42rem;
  text-align: center;
  font-size: .3rem;
  color: #FFFFFF;
}

.switch-item .switch-item-border {
  margin: .18rem auto 0;
  width: .6rem;
  height: .06rem;
  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: 7rem;
  height: 2.9rem;
  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: 7rem;
  height: 2.9rem;
  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: 7rem;
  height: 2.9rem;
  background-image:url('~@/assets/img/vip/banner_green.png');
  background-size: 100%;
  background-repeat:no-repeat;
}

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

.avatar {
  position: relative;
  margin-left: .32rem;
  width: 1.1rem;
  height: 1.1rem;
}

.avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: .03rem solid #E1A83F;
}

.name-wrapper {
  flex: 1;
  margin-left: .23rem;
}

.name {
  line-height: .48rem;
  font-weight: 500;
  font-size: .34rem;
  color: #222222;
}

.validity {
  margin-top: .02rem;
  line-height: .3rem;
  font-size: .22rem;
  color: rgba(34,34,34,0.6)
}

.renew-btn {
  margin-right: .3rem;
  width: 1.54rem;
  height: .64rem;
  border-radius: .32rem;
  background-color: #D89823;
  line-height: .64rem;
  font-weight: 600;
  text-align: center;
  font-size: .26rem;
  color: #FFFFFF;
}

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

.title-wrapper {
  margin: 0 auto;
  width: 7.1rem;
  padding-bottom: .2rem;
  display: flex;
}

.title {
  flex: 1;
  margin-top: .17rem;
  margin-left: .24rem;
  line-height: .75rem;
  font-weight: 600;
  font-size: .29rem;
  color: #222222;
}

.price-wrapper {
  margin-top: .23rem;
  text-align: right;
}

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

.monthly-origin-price {
  margin-top: .17rem;
  line-height: .3rem;
  font-size: .22rem;
  color: #919AA7;
  text-decoration: line-through;
}

.monthly-discount-price {
  margin-left: .07rem;
  line-height: .62rem;
  font-size: .24rem;
  color: #222222;
}

.monthly-discount-price span {
  font-weight: 600;
  font-size: .45rem;
}

.quarterly-price {
  margin-top: .01rem;
  margin-right: .05rem;
  line-height: .33rem;
  font-size: .24rem;
  color: #666666;
}

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

.list {
  padding-top: .3rem;
  padding-bottom: .33rem;
}

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

.item-title {
  flex: 1;
  line-height: .74rem;
  font-size: .28rem;
  color: #1D2A3A;
}

.item-discount {
  width: 1.02rem;
  height: .44rem;
  background-image: url('~@/assets/img/vip/icon_discount_brown.png');
  background-size: 100%;
  background-repeat: no-repeat;
  line-height: .44rem;
  text-indent: .16rem;
  font-size: .22rem;
  color: #E1A83F;
}

.item-include {
  margin-right: .35rem;
  width: .3rem;
  height: .2rem;
}

.tips-wrapper {
  overflow: hidden;
  margin-top: .15rem;
  padding-bottom: .39rem;
  background-color: #ffffff;
}

.tips-title {
  margin-top: .36rem;
  margin-left: .2rem;
  line-height: .4rem;
  font-weight: 600;
  font-size: .28rem;
  color: #666666;
}

.tips-content {
  margin-top: .18rem;
  margin-left: .2rem;
  width: 6.8rem;
  line-height: .56rem;
  font-size: .26rem;
  color: #999999;
}
</style>