pointsMall/src/views/HomeView/SignIn.vue

<template>
  <div class="timeline-container">
    <div class="timeline-content">
      <div class="timeline-entry-list">
        <div class="entry-list-container">
          <div class="tab-header">
            <span class="tab-title">每日签到</span>
          </div>
          <div class="content-body">
            <div class="figures">
              <div class="figure-card">
                <div class="figure">{{ signDays }}</div>
                <div class="attention">
                  <span class="text">本月累计签到天数</span>
                </div>
              </div>
              <div class="figure-card">
                <div class="figure">{{ integral }}</div>
                <div class="attention">
                  <span class="text">本月签到获得积分</span>
                </div>
              </div>
            </div>
            <calendar
              showPrepNext
              :markDate="markDate"
              @clickDate="clickDate"
              @changeMonth="changeMonth"
            />
          </div>
        </div>
      </div>
      <div class="index-aside aside" :class="{ 'sticky top': isActive }">
        <div class="signin-tip sidebar-block signin">
          <div class="first-line">
            <button @click="signIn" v-if="dataInfo.signStatus == 0" class="btn">
              立即签到
            </button>
            <button v-else class="btn signed-btn">今日已签到</button>
          </div>
        </div>
        <div class="signin-tip sidebar-block">
          <div class="avatar">
            <el-avatar :size="50" :src="avatarUrl"></el-avatar>
            <span class="name">{{ dataInfo.userName }}</span>
          </div>
          <div class="info">
            <div class="info-item">
              <div class="item-itle">部门：</div>
              <div class="item-content">{{ dataInfo.deptName }}</div>
            </div>
            <div class="info-item">
              <div class="item-itle">积分：</div>
              <div class="item-content blue">
                {{ dataInfo.surplusIntegral }}积分
              </div>
            </div>
            <div class="info-item">
                    <div class="item-itle">排行：</div>
                    <div class="item-content blue">5名</div>
                </div>
                <div class="info-item">
                    <div class="item-itle">勋章：</div>
                    <div class="item-content blue">{{ dataInfo.medalCount }}枚</div>
                </div>
          </div>
        </div>
        <div class="sidebar-block sticky-block">
          <div class="avatar">
            <el-avatar :size="50" :src="avatarUrl"></el-avatar>
            <span class="name">{{ dataInfo.userName }}</span>
          </div>
          <div class="info">
            <div class="info-item">
              <div class="item-itle">部门：</div>
              <div class="item-content">{{ dataInfo.deptName }}</div>
            </div>
            <div class="info-item">
              <div class="item-itle">积分：</div>
              <div class="item-content blue">
                {{ dataInfo.surplusIntegral }}积分
              </div>
            </div>
            <div class="info-item">
                    <div class="item-itle">排行：</div>
                    <div class="item-content blue">5名</div>
                </div>
                <div class="info-item">
                    <div class="item-itle">勋章：</div>
                    <div class="item-content blue">{{ dataInfo.medalCount }}枚</div>
                </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { sign, signInfo,useInfo } from "@/api/allApi";
import calendar from '@/components/Calendar'
export default {
  components: {
    calendar,
  },
  data() {
    return {
      signDays:'20',
      integral:'20',
      markDate: ["2023/5/4"],
      isActive: false,
      dataInfo: {},
      avatarUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      dataList: [],
    };
  },
  created() {
    this.getSignInfo();
    this.getUserInfo();
  },
  methods: {
    // 点击日期
    clickDate(date) {
      console.log(date);
    },
    // 切换月份
    changeMonth(date) {
      console.log(date);
    },
    getUserInfo() {
      const parmas = {
        userId: 13683797487,
      };
      useInfo(parmas).then((response) => {
        this.dataInfo = response.data.data;
        this.avatarUrl = this.dataInfo.httpFile + this.dataInfo.headImage;
      });
    },
    getSignInfo() {
      const parmas = {
        userId: 13683797487,
      };
      signInfo(parmas).then((response) => {
          this.markDate = response.data.data.signDays;
          this.integral = response.data.data.integral;
          this.signDays = response.data.data.signDays.length;
      });
    },
    signIn() {
      sign().then((response) => {
        this.$notify({
          title: '成功',
          message: '签到成功！',
          type: 'success'
        });
        // this.getSignInfo();
      });
    },
    // 保存滚动值，这是兼容的写法
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (scrollTop >= 550) {
        this.isActive = true;
      } else {
        this.isActive = false;
      }
    },
  },

  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },

  destroyed() {
    // 离开该页面需要移除这个监听的事件，不然会报错
    window.removeEventListener("scroll", this.handleScroll);
  },
};
</script>
<style scoped>
.timeline-container {
  margin: 0 auto;
}
.timeline-entry-list {
  margin-right: 17.5rem;
  border-radius: 2px;
  width: 720px;
  position: relative;
}
.entry-list-container {
  background-color: #fff;
  border-radius: 4px;
  min-height: 500px;
}
.entry-list-container .tab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid #e5e6eb;
  overflow: hidden;
}

.tab-header .tab-title {
  white-space: nowrap;
  font-size: 18px;
  font-weight: 600;
}
.content-body {
  padding: 10px 20px 16px;
}
.content-body .figures {
  display: flex;
  flex-shrink: 0;
  min-width: 586px;
  justify-content: space-around;
  background-color: #f7f8fa;
  border-radius: 2px;
  padding: 20px 55px;
  box-sizing: border-box;
  margin-top: 10px;
}
.figure-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.figure-card .figure {
  font-weight: 700;
  font-size: 32px;
  color: #1d2129;
  line-height: 36px;
  font-family: DIN Alternate;
  white-space: nowrap;
  margin-right: 12px;
  position: relative;
  top: 1px;
}
.figure-card .attention {
  display: flex;
  align-items: flex-end;
  margin-top: 4px;
}
.figure-card .attention .text {
  color: #86909c;
  font-weight: 400;
  font-size: 14px;
  white-space: nowrap;
}
.entry-list {
  width: 100%;
  background-color: #fff;
  position: relative;
}
.list-item:hover {
  background: #fafafa;
}
.list-item {
  position: relative;
  cursor: pointer;
  padding: 12px 20px 0;
}
.list-item .meta-container {
  display: flex;
  align-items: center;
}
.list-item .meta-container .user-message {
  max-width: 162px;
  font-size: 13px;
  line-height: 22px;
  color: #4e5969;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}
.list-item .meta-container .dividing {
  line-height: 22px;
  width: 1px;
  height: 14px;
  background: #e5e6eb;
  margin: 0 8px;
}
.list-item .meta-container .date {
  line-height: 22px;
  font-size: 13px;
  color: #86909c;
}
.list-item .main {
  margin-top: 6px;
  padding-bottom: 12px;
  display: flex;
  border-bottom: 1px solid #e5e6eb;
}
.list-item .main .info-box {
  flex-grow: 1;
}
.list-item .main .info-box .title:visited {
  color: #86909c;
}
.list-item .main .info-box .title {
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: #1d2129;
  margin-bottom: 8px;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.list-item .main .info-box .description {
  font-weight: 400;
  font-size: 13px;
  line-height: 22px;
  color: #86909c;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.list-item .thumb {
  flex: 0 0 auto;
  width: 120px;
  height: 80px;
  margin-left: 24px;
  border-radius: 2px;
}
.aside {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

.aside.index-aside {
  width: 16.3rem;
}

.hot-list-wrap {
  /* padding: 1.33rem 0 0.66rem; */
  background-color: #fff;
  border-radius: 4px;
  margin-bottom: 1.25rem;
}

.timeline-index-view.sidebar-block {
  box-shadow: none;
}

.sidebar-block {
  background-color: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border-radius: 2px;
  margin-bottom: 1rem;
  font-size: 1.16rem;
  line-height: 1.29;
  border-radius: 4px;
  color: #333;
}

.signin-tip {
  padding: 20px;
  background-color: #fff;
  box-sizing: border-box;
}

.first-line {
  display: flex;
  align-items: center;
  justify-content: center;
}

.first-line .btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 56px;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  background-color: #007fff;
  border: none;
}

.first-line .signed-btn {
  background-color: #e8f3ff;
  color: #1e80ff;
}
.first-line .btn-text {
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}

.first-line .title {
  color: #1d2129;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.second-line {
  color: #8a919f;
  font-size: 12px;
  font-weight: 400;
  line-height: 24px;
  margin-top: 2px;
}

.first-line .title-days {
  margin-left: 4px;
  color: #1e80ff;
}

.sidebar-block .avatar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.avatar .name {
  margin-top: 2px;
  font-size: 1rem;
  font-weight: 600;
  color: #252933;
}

.sidebar-block .info {
  margin-top: 5px;
}

.info .info-item {
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
  line-height: 2rem;
}

.info-item .blue {
  color: #1e80ff;
}

.sidebar-block.sticky-block {
  padding: 20px;
  background-color: #fff;
  box-sizing: border-box;
  position: fixed;
  box-shadow: none;
  opacity: 0;
  transition: all 0.2s;
  width: 16.3rem;
  z-index: -1;
  top: 67px;
  pointer-events: none;
}

.index-aside.sticky.top .sticky-block {
  top: 20px;
}

.index-aside.sticky .sticky-block {
  opacity: 1;
  top: 80px;
  z-index: 5;
  pointer-events: all;
}
</style>