kailin_mp/pages/recruitment/index.vue

<template>
  <view>
    <view class="main_view">
      <image v-if="action_info.banner_img" :src="action_info.banner_img" class="banner_img"></image>
      <view class="active_title">
          活动内容
      </view>
      <view class="clockin_box" v-if="active_rule.length > 0">
        <view class="box_title">
          邀请好友成功注册，即可获得奖励
        </view>
        <view class="box_time_text">
          三步奖励到账
        </view>
        <view class="box_text">
          <uni-steps mode="number" :options="[{title: '邀请新人好友'}, {title: '好友注册成功'}, {title: '奖励到账'}]"></uni-steps>
        </view>
        <view class="box_time_text">
              活动时间
        </view>
        <view class="box_time">
          {{ action_info.start_time }} 至 {{ action_info.end_time }}
        </view>
        <navigator url="/pages/recruitment/record" class="score_record">我的奖励记录 &gt;</navigator>
        <button class="clockin_rule_btn" @click="showRule">活动规则 &gt;</button>
      </view>
      <view class="clockin_box" v-else>
        <view class="box_title">
          暂无拉新活动
        </view>
      </view>
      <uni-popup ref="clockinRule" type="center">
        <view class="clockin_rule_box">
          <view class="clockin_rule_title">
            <text>签到规则</text>
            <view class="close_btn" @click="closeRule"> X </view>
          </view>
          <scroll-view class="clockin_rule_info" scroll-y="true" >
            <rich-text :nodes="active_rule" class="rich_text"></rich-text>
          </scroll-view>
        </view>
      </uni-popup>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      status_bar_style: {},
      action_info:[],
      isReqing: false,
      listKey: 0,
      listLength: 0,
      active_id: 0,
      active_rule: "",
    }
  },
  onLoad(param) {
    // 存储分享标识
    if (param.share_uid){
      uni.setStorageSync('share_uid',param.share_uid);
      console.log('share_uid',param.share_uid)
    }
    //分享按钮
    uni.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline']
    })
  },
  onShareAppMessage(obj) {
    //获取当前用户信息
    let userInfo  = uni.getStorageSync("userInfo");
    let param     = '';
    if (userInfo.uid){
      param       = '?share_uid='+userInfo.uid;
    }
    console.log(222,param)
    // 获取分享信息
    let shareList 	= getApp().globalData.shareList;
    // 获取分享信息
    let shareObj	= {
      title: '药优惠 得积分 兑豪礼',
      path: '/pages/recruitment/index',
      imageUrl:'',
    };
    // 循环列表
    for ( let i in shareList ) {
      if( shareList[i].pages == 'pages/recruitment/index' ) {
        shareObj.path  = shareList[i].path ? shareList[i].path : shareObj.path ;
        shareObj.title  = shareList[i].title ? shareList[i].title : shareObj.title ;
        shareObj.imageUrl  = shareList[i].image_url ? shareList[i].image_url : shareObj.imageUrl ;
      }
    }
    if (param){
      shareObj.path   +=  param;
    }
    // 返回分享信息
    return shareObj;
  },
  onShow() {
    // 登录提示
    if (!this.$checkAccess.alterLogin()) return;
    // 请求中，不允许刷新
    if (this.isReqing) return;
    // 设置请求中
    this.isReqing = true;
    // 请求列表
    this.$http.request('/api/recruitment/get_info', this.requestParam).then((re) => {
      // 设置非请求中
      this.isReqing = false;
      // 成功结果
      if (re.code == 'success') {
        this.action_info = re.data;
        this.active_rule = this.action_info.active_rule;
        console.log(this.action_info.length)
      }
    });
  },
  methods: {
    showRule(){
      this.$refs.clockinRule.open('center')
    },
    closeRule(){
      this.$refs.clockinRule.close();
    }
  }
}
</script>

<style lang="less">
page {
  background-color: #FFFFFF;
}
.main_view {
  display: block;
  height: 1000rpx;
  background: linear-gradient(to bottom, #FC335F 0%, #FB7224 50%, #FFFFFF 100%);
  .banner_img{
    height: 450rpx;
    width:  100%;
  }
  .status_bar {
    width: 100%;
    height: 64rpx;
    display: block;
    padding-top: var(--status-bar-height);
  }
  .active_title{
    width: 700rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    margin: 0rpx auto;
    border-radius: 30rpx;
    background-color: #F86526;
    color: #F9F9F9;
  }
  .clockin_box {
    z-index: 9;
    display: block;
    width: 700rpx;
    margin: 0rpx auto;
    position: relative;
    border-radius: 40rpx;
    background-color: #FFFFFF;
    box-shadow: 5rpx 5rpx 2rpx 0rpx #DDDDDD;

    .box_title {
      padding-top: 20rpx;
      height: 80rpx;
      color: #000000;
      text-align: center;
      line-height: 80rpx;
    }
    .box_text{
      padding-top: 20rpx;
    }
    .box_time_text{
      padding-top: 40rpx;
      text-align: center;
      color: #e15c21;
    }
    .box_time{
      padding-top: 20rpx;
      text-align: center;
      color: #555555;
      font-size: 25rpx;
    }
    .clockin_list {
      display: block;
      overflow: hidden;
      width: 100%;
      padding-top: 25rpx;

      .clockin_item {
        float: left;
        position: relative;
        width: 70rpx;
        height: 165rpx;
        text-align: center;
        margin-left: 25rpx;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
        background-color: #F8F8F8;

        .what_day {
          display: block;
          height: 40rpx;
          font-size: 24rpx;
          line-height: 60rpx;
        }

        .score_one {
          display: block;
          height: 60rpx;
          margin: 10rpx auto;
          position: relative;

          .score_icon {
            display: block;
            width: 60rpx;
            height: 60rpx;
            margin: 0rpx auto;
          }
        }

        .score_tow {
          display: block;
          height: 80rpx;
          margin: 10rpx auto;
          position: relative;

          .score_icon {
            display: block;
            width: 80rpx;
            height: 80rpx;
            margin: 0rpx auto;
          }

          .score_icon:nth-child(1) {
            top: 0rpx;
            left: 10rpx;
            width: 80rpx;
            height: 80rpx;
            position: absolute;
          }

          .score_icon:nth-child(2) {
            top: 0rpx;
            left: 55rpx;
            width: 80rpx;
            height: 80rpx;
            position: absolute;
          }
        }

        .score_the {
          width: 200rpx;
          display: block;
          height: 100rpx;
          margin: 10rpx auto;
          position: relative;

          .score_icon {
            display: block;
            width: 80rpx;
            height: 80rpx;
            margin: 0rpx auto;
          }

          .score_icon:nth-child(1) {
            top: 15rpx;
            left: 20rpx;
            width: 80rpx;
            height: 80rpx;
            position: absolute;
          }

          .score_icon:nth-child(2) {
            top: 15rpx;
            left: 95rpx;
            width: 80rpx;
            height: 80rpx;
            position: absolute;
          }

          .score_icon:nth-child(3) {
            top: 0rpx;
            left: 60rpx;
            width: 80rpx;
            height: 80rpx;
            position: absolute;
          }
        }

        .give_score {
          display: block;
          height: 30rpx;
          font-size: 24rpx;
          line-height: 40rpx;
        }

        .give_coupon {
          position: absolute;
          font-size: 20rpx;
          padding: 2px 5px;
          background-color: #f00;
          color: #fff;
          border-radius: 6px;
          display: inline-block;
          text-align: center;
          right: -15rpx;
          top: -15rpx;
        }
      }

      /*.clockin_item:nth-child(7){
        width: 315rpx;
      }*/
      .clockin_item.acitve {
        color: #FFFFFF;
        background-color: #E03519;
      }
    }

    .clockin_btn {
      width: 660rpx;
      color: #FFFFFF;
      font-size: 30rpx;
      margin-top: 20rpx;
      padding: 0rpx 0rpx;
      border-radius: 60rpx;
      background-color: #E03519;
      border: 0rpx solid transparent;
    }

    .clockin_btn.active {
      color: #FFFFFF;
      background-color: #AAAAAA;
    }

    .clockin_btn::after {
      border: 0rpx solid transparent;
    }

    .score_record {
      height: 60rpx;
      display: block;
      color: #999999;
      font-size: 24rpx;
      margin-top: 20rpx;
      text-align: center;
      line-height: 80rpx;
    }

    .clockin_rule_btn{
      color: #999999;
      overflow: hidden;
      font-size: 24rpx;
      text-align: center;
      line-height: 80rpx;
      padding: 0rpx 0rpx;
      background: transparent;
    }
    .clockin_rule_btn::after{
      border: 0rpx solid transparent;
    }
  }
}
.popup{
  overflow: hidden;
}
.clockin_rule_box{
  width: 500rpx;
  display: block;
  overflow: hidden;
  background: #FFFFFF;
  font-size: 26rpx;
  margin: 0rpx auto;
  line-height: 50rpx;
  border-radius: 10rpx;
  padding: 0rpx 25rpx;
  padding-bottom: 20rpx;
  background: linear-gradient(to bottom, #FC335F 0%, #FB7224 100%);
  .clockin_rule_title{
    color: #FFFFFF;
    height: 60rpx;
    font-size: 32rpx;
    line-height: 60rpx;
    text-align: center;
    margin-bottom: 10rpx;
    .close_btn{
      float: right;
      width: 40rpx;
      height: 40rpx;
      font-size: 24rpx;
      margin-top: 9rpx;
      line-height: 40rpx;
      border-radius: 50%;
      border: 1rpx solid #FFFFFF;
    }
  }
  .clockin_rule_info{
    display: block;
    height: 500rpx;
    font-size: 24rpx;
    line-height: 40rpx;
    border-radius: 10rpx;
    padding: 20rpx 20rpx;
    box-sizing: border-box;
    background-color: #FFFFFF;
    .rich_text{
      white-space: break-spaces;
    }
  }
}
</style>