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_275 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 class="app__f_r app__al_c">
          <p class="app_f_g_1">每月可交换名片{{detail.name_card_num}}次</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.hire_times }}次</div>
          <img class="item-include" src="@/assets/img/vip/icon_include_brown.png" alt/>
        </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.name_card_num }}次</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 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">· 免费技术信用服务</div>
          <img class="item-include" src="@/assets/img/vip/icon_include_brown.png" alt/>
        </div>
        <div class="item">
          <div class="item-title">· 招聘岗位{{ detail.recruit_num }}次</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.hire_times }}次</div>
          <img class="item-include" src="@/assets/img/vip/icon_include_brown.png" alt/>
        </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.name_card_num }}次</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 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">· 免费技术信用服务</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.开通会员即代表您已同意<a href="https://support.proginn.com/rule/member/" style="color: #308eff;">《程序员客栈会员服务条款》</a>；</p>
          <p>3.如有任何问题，欢迎咨询在线客服，或拨打热线：0571-28120931 转1。</p>
        </div>
      </div>
    </div>
    <!-- 底部浮动立即开通/续费按钮 -->
    <!-- <div class="buy-dev-btn" v-if="active===0" @click="handleClickBuyDev">
      {{ vipType === 2 ? '立即续费' : '立即开通' }}
    </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('#B07F29');
      } 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: {
    async clickPay(type) {
      if (!this.userInfo || !this.userInfo.nickname) {
        if (this.deviceType === "ios" || this.deviceType === "android") {
          location.href = "proginn://login?backToPage=true";
        } else {
          location.href = this.$store.state.domainConfig.siteUrl + '/?loginbox=show&next=' + encodeURIComponent(location.href)
        }
        return
      }
      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('#B07F29');
        } else if (this.active === 1 && this.current === 0) {
          bridge.setNavigationBarColor('#308EFF');
        } else if (this.active === 1 && this.current === 1) {
          bridge.setNavigationBarColor('#00BF66');
        }
      }
    },
    viewRateDetail() {
      if (bridge.isAndroid) {
        location.href = `proginn://webview?url=${this.$store.state.domainConfig.siteUrl}/type/vip/orderRateDetail&title=会员中心`
      } else
        location.href = "/type/vip/orderRateDetail";
    },
    async getVipInfo() {
      let _this = this;
      let res = await this.$axios.$post(`/api/user/getUserVipInfo`, { notShowError: true });
      if (Number(res.status) === 1) {
        console.log("6666", res);
        this.vipInfo = res.data;
      }
    },
    /**
     * 点击开通/续费开发者会员
     */
    handleClickBuyDev () {
      this.$message('开通/续费开发者会员，跳转端原生页面')
    }
  },
};
</script>

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

.wrapper {
  overflow: hidden;
  margin-top: 0 !important;
  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;
}

.dev-wrapper {
  margin: 0;
  padding-bottom: 84px;
}

.buy-dev-btn {
  position: fixed;
  z-index: 11;
  width: calc(100% - 20px);
  height: 40px;
  line-height: 40px;
  left: 10px;
  bottom: 32px;
  opacity: 1;
  background: #e1a83f;
  border-radius: 6px;
  font-size: 15px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: center;
  color: #ffffff;
  cursor: pointer;
}
</style>