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" deactiveColor="#1aad19" :options="[{ title: '邀请新人好友' }, { title: '好友注册成功' }, { title: '奖励到账' }]" :active="3"></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);
    // 返回分享信息
    return {
      title: '999智控终端平台\n药优惠 得积分 兑豪礼',
      path: '/pages/recruitment/index',
      imageUrl: '',
      promise: new Promise((resolve, reject) => {
        this.$http.request('api/share_message/get_item', { item_id: this.action_info.id, pages: '/pages/recruitment/index' }).then((callback) => {
          console.log(callback, 'api/share_message/get_item');
          let obj = {
            title: callback.data?.title == '' ? '999智控终端平台\n药优惠 得积分 兑豪礼' : callback.data.title,
            path: '/pages/recruitment/index',
          };
          if (callback.data?.image_url !== '') {
            obj.imageUrl = callback.data.image_url;
          }
          if (param) {
            obj.path += param;
          }
          resolve(obj);
        });
      }),
    };
  },
  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: #f89c33;
      }
    }

    .clockin_btn {
      width: 660rpx;
      color: #ffffff;
      font-size: 30rpx;
      margin-top: 20rpx;
      padding: 0rpx 0rpx;
      border-radius: 60rpx;
      background-color: #f89c33;
      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>