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

<template>
  <section v-if="vipDetail" class="vip">
    <section class="banners-box" @touchstart="touchStart" @touchend="touchEnd">
      <section class="banners" :class="{'banners-com': currentCom}">
        <section class="banner">
          <img src="~@/assets/img/vip/vip.png" class="card">
          <section class="header">
            <section style="position: relative;">
              <img :src="userInfo.icon_url" class="avator">
              <img v-if="vipNow && !isCom" src="~@/assets/img/vip/vip_icon.png" class="diamond">
            </section>
            <section>
              <span class="name">{{userInfo.nickname}}</span>
              <br>
              <span v-if="isCom" class="date">暂未开通</span>
              <span v-else class="date">{{endTimeCalc}}</span>
            </section>
          </section>
          <section v-if="deviceType !== 'ios'">
            <button v-if="!vipNow" class="renewal-fee" @click="clickPay(dev)">开通</button>
            <button v-else-if="isCom" disabled class="renewal-fee disabled">开通</button>
            <button v-else class="renewal-fee" @click="clickPay(dev)">{{vipNow ? '续费' : '开通'}}</button>
          </section>
        </section>
        <section class="banner">
          <img src="~@/assets/img/vip/vip_com.png" class="card">
          <section class="header">
            <section style="position: relative;">
              <img :src="userInfo.icon_url" class="avator avator-com">
              <img v-if="vipNow && isCom" src="~@/assets/img/vip/vip_icon_com.png" class="diamond">
            </section>
            <section>
              <span class="name">{{userInfo.nickname}}</span>
              <br>
              <span v-if="isCom" class="date">{{endTimeCalc}}</span>
              <span v-else class="date">暂未开通</span>
            </section>
          </section>
          <section v-if="deviceType !== 'ios'">
            <button v-if="!vipNow" class="renewal-fee renewal-fee-com" @click="clickPay(com)">开通</button>
            <button v-else-if="isCom" class="renewal-fee renewal-fee-com" @click="clickPay(com)">
              {{vipNow ? '续费' :
              '开通'}}
            </button>
            <button v-else disabled class="renewal-fee disabled">开通</button>
          </section>
        </section>
      </section>
      <section class="anli-radios">
        <div class="anli-radio" :class="{'anli-radio-death': currentCom}"></div>
        <div class="anli-radio" :class="{'anli-radio-death': !currentCom}"></div>
      </section>
    </section>
    <section class="block-top">
      <section class="list">
        <section class="price-box">
          <span class="vip">{{currentCom ? '企业会员' : '开发者会员'}}</span>
          <span v-if="deviceType !== 'ios'" class="price">
            <span class="del" v-if="detail.is_month_discount">原价￥{{detail.monthly_origin_price}}/月</span>
            <span class="money">
              ￥{{detail.monthly_real_price}}
              <span class="mouth">/月</span>
            </span>
          </span>
        </section>
        <div class="prices" v-if="deviceType !== 'ios'">
          按季付费
          <span style="color: #333;">￥{{detail.quarterly_real_price}}</span>
        </div>
      </section>
      <ul class="project" :class="{ 'is-com': currentCom }">
        <li>
          <span>· 整包项目-平台服务费(减免{{detail.project_reduction_rate}}%)</span>
          <div v-show="currentCom" class="right">
            <img src="~@/assets/img/vip/tag_com.png" class="sale">
            <span class="discount">{{detail.project_discount}}折</span>
          </div>
          <div v-show="!currentCom" class="right">
            <img src="~@/assets/img/vip/tag.png" class="sale">
            <span class="discount">{{detail.project_discount}}折</span>
          </div>
        </li>
        <li>
          <span>· 云端工作-平台服务费(减免{{detail.job_reduction_rate}}%)</span>
          <div v-show="currentCom" class="right">
            <img src="~@/assets/img/vip/tag_com.png" class="sale">
            <span class="discount">{{detail.job_discount}}折</span>
          </div>
          <div v-show="!currentCom" class="right">
            <img src="~@/assets/img/vip/tag.png" class="sale">
            <span class="discount">{{detail.job_discount}}折</span>
          </div>
        </li>
        <li>
          <span v-if="currentCom">· 每天50次程序员聊天次数</span>
          <span v-else>· 认证的自由开发者可同时接两单</span>
          <img v-show="currentCom" src="~@/assets/img/vip/check_com.png" class="yes">
          <img v-show="!currentCom" src="~@/assets/img/vip/check.png" class="yes">
        </li>
        <li>
          <span v-if="currentCom">· 优先推荐对接优质的开发者</span>
          <span v-else>· Ping接单意愿权重更高</span>
          <img v-show="currentCom" src="~@/assets/img/vip/check_com.png" class="yes">
          <img v-show="!currentCom" src="~@/assets/img/vip/check.png" class="yes">
        </li>
      </ul>
    </section>
    <section class="block-bottom">
      <div class="member-Description">会员说明</div>
      <ul class="member">
        <li class="li">1.购买会员按季付费；</li>
        <li class="li">2.开通会员即代表您已同意《程序员客栈会员服务条款》</li>
        <li class="li">3.如有任何问题，欢迎咨询在线客服，或拨打热线：0571-28120931 转1。</li>
      </ul>
    </section>
  </section>
</template>

<script>
let touchX = 0

export default {
  props: ['com', 'dev'],
  data() {
    return {
      // 当前是企业页
      currentCom: false,
      // 会员详情
      vipDetail: null,
      // 设备类型pc,ios,android
      deviceType: 'pc'
    }
  },
  computed: {
    endTimeCalc() {
      return this.vipNow ? '有效期至' + this.userInfo.vip_end_date : '暂未开通'
    },
    detail() {
      return (this.currentCom ? this.com : this.dev) || {}
    },
    vipNow() {
      return this.vipDetail.is_vip
    },
    vipInfo() {
      return this.vipDetail.vip_info
    },
    userInfo() {
      return this.vipDetail.user_info
    },
    isCom() {
      if (this.$route.query.isCom) return true
      return this.vipDetail.vip_type_id !== '2'
    },
  },
  mounted() {
    this.getVipDetail();
    this.getDeviceType();
  },
  methods: {
    /**
     * 设备判断
     */
    getDeviceType() {
      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
        this.deviceType = 'ios';
      } else if (/(Android)/i.test(navigator.userAgent)) {  //判断Android
        this.deviceType = 'android';
      } else { //pc
      };
    },
    /**
     * 点击开通
     */
    clickPay(item) {
      location.href = 'proginn://pay?product_type=11&number=3&product_id=' + item.id
    },
    /**
     * 手指右划
     */
    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);
    },
    /**
     * 获取会员详情
     */
    async getVipDetail() {
      let res = await this.$post('/api/vip/getVipUserDetail')
      if (!res.data) return
      this.vipDetail = res.data
      if (this.isCom) this.currentCom = true
    }
  },
}
</script>

<style scoped>
.vip {
  flex-direction: column;
}
.banners-box {
  position: relative;
  width: 100%;
  height: 145px;
  overflow: hidden;
}
.banners {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(200% - 30px);
  height: 145px;
  transform: translate(0, 0);
  transition: transform 0.2s linear;
}
.banners-com {
  transform: translate(calc(-50% + 40px), 0);
}
.banner {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 50%;
  height: 145px;
  padding: 43px 40px 0 25px;
  box-sizing: border-box;
  background: #1d1e1f;
  z-index: -2;
}
.banner:nth-child(2) {
  left: calc(50% - 15px);
}
.card {
  position: absolute;
  left: 10px;
  top: 0;
  width: 91%;
  height: 100%;
  z-index: -1;
}
.avator {
  width: 55px;
  height: 55px;
  border-radius: 28px;
  border: 2px solid #e1a83f;
  left: 20px;
  top: 57px;
}
.diamond {
  width: 16px;
  height: 16px;
  position: absolute;
  left: 40px;
  top: 40px;
}
.renewal-fee {
  width: 77px;
  height: 32px;
  border-radius: 16px;
  background: #e1a83f;
  color: white;
  font-size: 13px;
  font-weight: 300;
  left: 262px;
  top: 80px;
  border: 0;
}
.disabled {
  background: grey;
}
.name {
  color: black;
  font-weight: 460;
  font-size: 16px;
  left: 92px;
  top: 74px;
  margin-left: 10px;
}
.date {
  color: black;
  font-weight: 200;
  font-size: 9px;
  left: 92px;
  top: 100px;
  margin-left: 10px;
}
.block-top {
  padding: 20px 10px;
  background: white;
}
.list {
  display: flex;
  flex-direction: column;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
}
.vip {
  font-size: 14px;
  color: rgba(34, 34, 34, 1);
  font-weight: 800;
}
.price-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.price {
  font-size: 11px;
  color: rgba(145, 154, 167, 1);
}
.prices {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 12px;
  font-family: PingFangSC-Regular;
  color: #666;
  line-height: 33px;
}
.del {
  text-decoration: line-through;
}
.money {
  font-size: 22px;
  color: rgba(34, 34, 34, 1);
  font-weight: 800;
}
.mouth {
  font-size: 12px;
  color: rgba(34, 34, 34, 1);
}
.project {
  list-style: none;
  padding: 0;
}
li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  color: rgba(29, 42, 58, 1);
  margin: 12px 0;
  height: 24px;
}
.right {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sale {
  height: 22px;
  width: 51px;
}
.discount {
  position: absolute;
  left: 6px;
  top: 5px;
  font-size: 11px;
  color: rgba(225, 168, 63, 1);
}
.yes {
  width: 15px;
  height: 10px;
  margin-right: 18px;
}
.block-bottom {
  margin: 8px 0 0 0;
  padding: 26px 10px 7px 10px;
  background: white;
}
.member-Description {
  font-size: 14px;
  font-weight: 600;
  color: #222222;
}
.li {
  font-size: 13px;
  color: rgba(145, 154, 167, 1);
  line-height: 28px;
  font-weight: 400;
}
.member {
  padding-inline-start: 0px;
}
.header {
  display: flex;
  align-items: center;
}
.avator-com {
  border: 2px solid #308eff;
}
.is-com .discount {
  color: #308eff;
}
.renewal-fee-com {
  background: #308eff;
}
.anli-radios {
  position: absolute;
  bottom: 8px;
  display: flex;
  justify-content: center;
  width: 100%;
  text-align: center;
  z-index: 2;
}
.anli-radio {
  width: 16px;
  height: 4px;
  border: 0;
  border-radius: 2px;
  margin: 0 2px;
  outline: none;
  cursor: pointer;
  background: rgba(200, 200, 200, 0.8);
}
.anli-radio-death {
  width: 8px;
  background: rgba(200, 200, 200, 0.4);
}
</style>