kailin_mp/pages/score/clockin.vue

<template>
  <view>
    <view class="main_view">
      <view class="status_bar" :style="status_bar_style">
        <view v-if="hasPrePage" class="back-btn" @click="goBack">
          <uni-icons type="left" size="20" color="#333"></uni-icons>
        </view>
      </view>
      <view class="info_box">
        <view class="left_box">
          <view class="score_info">
            <view class="score_title">当前积分</view>
            <view class="score_current">{{ scoreInfo.score }} </view>
          </view>
          <view class="wait_info">
            <view class="wait_title">待入账积分</view>
            <view class="wait_score">{{ scoreInfo.wait_score ? scoreInfo.wait_score : 0 }}</view>
          </view>
        </view>
        <view class="right_box" v-if="show_lottery">
          <navigator url="/pages/score/lottery" class="lottery_enter">
            <image class="lottery_img" src="https://mall.findit.ltd/uploads/images/default/lottery_record.png" mode=""></image>
            <view class="lottery_text">点我抽奖</view>
          </navigator>
        </view>
      </view>
      <view class="clockin_box" v-if="clockinList.length > 0">
        <view class="box_title">
          <view class="left_icon" v-if="this.listKey > 0" @click="leftClockin()"><uni-icons type="left" size="20"></uni-icons></view>
          {{ isMark.finish_day ? '已连续签到 ' + isMark.finish_day + ' 天' : '连续签到奖励更丰厚' }}
          <view class="right_icon" v-if="this.listKey < this.listLength - 1" @click="rightClockin()"> <uni-icons type="right" size="20"></uni-icons></view>
        </view>
        <view class="clockin_list">
          <view class="clockin_item" :class="item.is_finish ? 'acitve' : ''" v-for="(item, index) in clockinList[listKey]" :key="index">
            <view class="give_coupon" v-if="item['coupon_id']">券</view>
            <view class="what_day">{{ item.what_day }}</view>
            <view class="score_one">
              <image class="score_icon" src="https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/score.png" mode=""></image>
            </view>
            <!--						<view class="score_tow" v-if="index == 2 ||  index == 4">
							<image class="score_icon" src="https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/score.png" mode=""></image>
							<image class="score_icon" src="https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/score.png" mode=""></image>
						</view>-->
            <view class="give_score">+{{ item.reward }}</view>
          </view>
        </view>
        <button class="clockin_btn" :class="isMark.is_clockin ? 'active' : ''" @click="toClockin()">{{ isMark.is_clockin ? '已签到' : '签到' }}</button>
        <navigator url="/pages/score/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>
        <navigator url="/pages/score/record" class="score_record">积分记录 &gt;</navigator>
      </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: {},
      hasPrePage: false,
      clockinList: [],
      isMark: {
        finish_day: 0,
        is_clockin: 0,
      },
      scoreInfo: {
        score: 0,
        use_score: 0,
        wait_score: 0,
      },
      isReqing: false,
      listKey: 0,
      listLength: 0,
      active_id: 0,
      active_rule: '',
      show_lottery: 0,
    };
  },
  onLoad() {
    // #ifdef MP-WEIXIN
    let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    this.status_bar_style = {
      height: menuButtonInfo.height + 'px',
      'padding-top': menuButtonInfo.top + 'px',
      position: 'relative',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      zIndex: 1000,
    };

    // 判断是否有上级页面
    const pages = getCurrentPages();
    this.hasPrePage = pages.length > 1;
    // #endif
    // #ifdef MP-WEIXIN

    //分享按钮
    uni.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline'],
    });
    // #endif
  },
  onShareAppMessage(obj) {
    // 获取分享信息
    let shareList = getApp().globalData.shareList;
    // 获取分享信息
    let shareObj = {
      title: '999智控终端平台\n药优惠 得积分 兑豪礼',
      path: '/pages/score/clockin',
      imageUrl: '',
    };
    // 循环列表
    for (let i in shareList) {
      if (shareList[i].pages == 'pages/score/clockin') {
        shareObj.path = shareList[i].path ? shareList[i].path : shareObj.path;
        shareObj.title = shareList[i].title ? `999智控终端平台\n${shareList[i].title}` : shareObj.title;
        shareObj.imageUrl = shareList[i].image_url ? shareList[i].image_url : shareObj.imageUrl;
      }
    }
    // 返回分享信息
    return shareObj;
  },
  onShow() {
    // 登录提示
    if (!this.$checkAccess.checkLogin()) return;
    // 请求打卡列表
    this.getClockinList();
    // 请求中，不允许刷新
    if (this.isReqing) return;
    // 设置请求中
    this.isReqing = true;
    // 请求列表
    this.$http.request('/api/custom_score/get_info', this.requestParam).then((re) => {
      // 设置非请求中
      this.isReqing = false;
      // 成功结果
      if (re.code == 'success') {
        this.scoreInfo = re.data;
      }
    });
    // 请求
    this.$http.request('api/lottery_score/get_detail').then((re) => {
      // 成功结果
      if (re.code == 'success') {
        this.show_lottery = 1;
      }
    });
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    showRule() {
      this.$refs.clockinRule.open('center');
    },
    closeRule() {
      this.$refs.clockinRule.close();
    },
    toClockin() {
      // 如果已经打卡
      if (this.isMark.is_clockin) return;
      // 登录提示
      if (!this.$checkAccess.alterLogin()) return;
      if (this.active_id === 0) {
        uni.showToast({
          title: '暂无活动',
          icon: 'none',
        });
      }
      // 请求中，不允许刷新
      if (this.isReqing) return;
      // 设置请求中
      this.isReqing = true;
      // 请求列表
      this.$http
        .request(
          'api/score_clockin/finish',
          {
            active_id: this.active_id,
          },
          'post'
        )
        .then((re) => {
          // 设置非请求中
          this.isReqing = false;
          // 成功结果
          if (re.code == 'success') {
            // 赋值
            this.isMark = re.data;
            // 积分更新
            this.scoreInfo.score = re.data.reward + this.scoreInfo.score;
            // 更新打卡
            for (let i in this.clockinList[this.listKey]) {
              // 如果小于等于连续打卡天数，设置为打卡
              if (this.clockinList[this.listKey][i].what_day <= this.isMark.finish_day) this.clockinList[this.listKey][i].is_finish = 1;
            }
          } else {
            uni.showToast({
              title: '打卡失败',
              icon: 'none',
            });
          }
        });
    },
    getClockinList() {
      // 请求列表
      this.$http.request('api/score_clockin/get_list', this.requestParam).then((re) => {
        // 成功结果
        if (re.code == 'success') {
          // 赋值
          this.clockinList = re.data.list;
          this.listLength = this.clockinList.length;
          this.active_id = re.data.active_id;
          this.active_rule = re.data.active_rule;
          // 赋值
          this.isMark = re.data.is_mark;
        }
      });
    },
    leftClockin() {
      if (this.listKey > 0) {
        this.listKey = this.listKey - 1;
      }
    },
    rightClockin() {
      this.listKey = this.listKey + 1;
    },
  },
};
</script>

<style lang="less">
.status_bar {
  .back-btn {
    position: absolute;
    left: 16px;
    bottom: 0;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }
}
page {
  background-color: #ffffff;
}
.main_view {
  display: block;
  height: 1000rpx;
  background: linear-gradient(to bottom, #fc335f 0%, #fb7224 50%, #ffffff 100%);

  .status_bar {
    width: 100%;
    height: 64rpx;
    display: block;
    padding-top: var(--status-bar-height);
  }

  .info_box {
    display: block;
    overflow: hidden;

    .left_box {
      float: left;
      width: 450rpx;

      .score_info {
        color: #ffffff;
        overflow: hidden;
        padding: 0rpx 35rpx;

        .score_title {
          width: 240rpx;
          height: 60rpx;
          display: block;
          font-size: 26rpx;
          line-height: 60rpx;
        }

        .score_current {
          width: 240rpx;
          height: 80rpx;
          display: block;
          font-size: 66rpx;
          line-height: 80rpx;
        }
      }

      .wait_info {
        color: #ffffff;
        display: block;
        overflow: hidden;
        padding: 0rpx 35rpx;
        margin-top: 20rpx;

        .wait_title {
          width: 240rpx;
          height: 40rpx;
          display: block;
          font-size: 24rpx;
          line-height: 40rpx;
        }

        .wait_score {
          width: 240rpx;
          height: 60rpx;
          display: block;
          font-size: 36rpx;
          line-height: 60rpx;
        }
      }
    }

    .right_box {
      float: right;
      overflow: hidden;
      margin-top: 60rpx;
      margin-right: 35rpx;

      .lottery_enter {
        display: block;
        overflow: hidden;
        text-align: center;

        .lottery_img {
          width: 150rpx;
          height: 150rpx;
          display: block;
          margin: 0 auto;
        }

        .lottery_text {
          color: #ffffff;
          height: 60rpx;
          font-size: 28rpx;
          line-height: 60rpx;
        }
      }
    }
  }

  .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 {
      height: 80rpx;
      color: #999999;
      text-align: center;
      line-height: 80rpx;

      .left_icon {
        float: left;
        padding-left: 20rpx;
      }

      .right_icon {
        float: right;
        padding-right: 20rpx;
      }
    }

    .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>