更新会员相关

components/type/vip/buy-dialog.vue

@@ -62,7 +62,7 @@
           class="buy-btn"
           type="primary"
           @click="gotoPay(number)"
-        >{{vipDetail.user_info.vip_type >0 ? "续费" : "开通"}}</el-button>
+        >{{vipDetail.user_info && vipDetail.user_info.vip_type >0 ? "续费" : "开通"}}</el-button>
       </span>
     </div>
   </el-dialog>

components/type/vip/mobile copy.vue

@@ -1,469 +0,0 @@
-<template>
-  <section 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="avatar" />
-              <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="true || 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="avatar avatar-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="true || 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="true || 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="true || 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>
-    <buy-dialog
-      :handleClose="handleClose"
-      :buyDialog="buyDialog"
-      :gotoPay="gotoPay"
-      :type="type"
-      :item="item"
-      :vipDetail="vipDetail"
-      :pricePrefix="pricePrefix"
-    ></buy-dialog>
-  </section>
-</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() {
-    return {
-      // 当前是企业页
-      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);
-  },
-  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);
-    }
-  }
-};
-</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;
-}
-.avatar {
-  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;
-}
-.avatar-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>

components/type/vip/mobile.vue

@@ -100,11 +100,15 @@
           <div class="item-discount">{{detail.job_discount}}折</div>
         </div>
         <div class="item">
-          <div class="item-title">· 每天50次程序员聊天次数</div>
+          <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"> · 每天50次雇佣项目发布次数</div>
+          <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>
@@ -118,11 +122,15 @@
           <div class="item-discount">{{detail.job_discount}}折</div>
         </div>
         <div class="item">
-          <div class="item-title">· 认证的云端开发者可同时接两单</div>
+          <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>
+          <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>
@@ -161,7 +169,7 @@
         active: 0,
         current: 0,
         swiperOption: {
-          loop: true,
+          loop: false,
           slidesPerView: 'auto',
           centeredSlides: true,
           spaceBetween: 30,
@@ -172,21 +180,14 @@
           on: {
             slideChange() {
               _this.current = this.realIndex
-              if (window.appBridge && _this.active === 0) {
-                window.appBridge.setTitleBarColor('#D89823');
-                _this.currentType = 2;
-              } else if (window.appBridge && _this.active === 1 && _this.current === 0) {
+              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;
               }
             },
-            tap() {
-              console.log('onTap', this);
-            }
           }
         },
         buyDialog: false,
@@ -323,14 +324,6 @@
             window.appBridge.setTitleBarColor('#00BF66');
           }
         }
-        if (this.active === 0) {
-          this.vipType = 2;
-        } else if (this.active === 1 && this.current === 0) {
-          this.vipType = 1;
-        } else if (this.active === 1 && this.current === 1) {
-          this.vipType = 3;
-        }
-
       }
     }
   };