Web_QiCaiYao/components/sign.vue

<!-- 签到 -->
<template>
  <div class="sign">
    <el-dialog
      :visible="signVisible"
      width="430px"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :show-close="false"
      custom-class="qddialog"
      @update:visible="updateVisible"
      top="8vh"
      v-loading="Signloading"
    >
      <div slot="title" class="title">
        <img src="~assets/images/qd.png" alt />
        <span>签到成功！获得{{ this.jdjl }}积分！</span>
        <!-- <span>签到成功！获得XXX红包！</span>
        <span>签到成功！获得枸杞一袋！</span>
        <span>签到成功！获得xx优惠券！</span>-->
      </div>
      <p class="timenum">{{ records.length }}</p>
      <p class="timeText">本月已连续签到（天）</p>

      <div class="gz">
        <p>签到规则</p>
        <div class="gztext">
          <p>
            1.连续签到{{
              awardData.cycle
            }}天为一个周期，连续签到天数签满一个周期或者签到中断，将清空连签天数重新计算签到天数
          </p>
          <p>
            2.用户可在签到页每日签到一次，签到后可获得每日签到奖励；连续签到天数达到连签奖励的当天，可额外获得连签奖励
          </p>
          <div v-for="(item, index) in awardData.reward" :key="index">
            <p v-if="index == 0">
              3.每{{ item.day == 1 ? "日" : item.day }}天签到奖励: {{ item.point }}积分
              {{ item.growth }}成长值
              <span></span>
            </p>
            <p v-if="!index == 0">
              {{ index + 4 }}.连续签到{{ item.day }}天额外奖励: {{ item.point }}积分
              {{ item.growth }}成长值
            </p>
          </div>
        </div>
      </div>
      <div class="jl">
        <p class="qdjl">签到记录</p>
        <ul>
          <li v-for="(item, index) in jlList" :key="index">
            <div class="left">
              <div class="img">
                <img src="@/assets/images/jf.png" alt />
              </div>
              <div class="cnt">
                <p class="title">{{ item.remark }}</p>
                <p class="time">
                  {{ $dayjs(item.create_time * 1000).format("YYYY-MM-DD HH:mm:ss") }}
                </p>
              </div>
            </div>
            <div class="right">
              <span class="big">{{ item.account_data }}</span>
            </div>
          </li>
        </ul>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="clickKonw" size="mini">我知道了</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    signVisible: Boolean,
    Signloading: Boolean,
  },
  data() {
    //这里存放数据
    return {
      awardData: {},
      records: [],
      jlList: [],
      jdjl: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (this.signVisible) {
      this.getAward();
      this.getRecords();
      this.getIntegralList();
    }
  },

  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //方法集合
  methods: {
    // 获取规则
    getAward() {
      this.$axios
        .post(`/membersignin/award`)
        .then((res) => {
          this.awardData = res.data;
          console.log(res.data);
        })
        .catch((err) => {});
    },
    // 获取签到天数
    getRecords() {
      this.$axios
        .post(`/membersignin/getSignRecords`)
        .then((res) => {
          this.records = res.data;
        })
        .catch((err) => {});
    },
    // 获取积分记录
    getIntegralList() {
      this.jdjl = [];
      let obj = {
        page: 1,
        page_size: 4,
        clock: 1,
        account_type: "point",
      };
      this.$axios
        .post(`/memberaccount/page`, obj)
        .then((res) => {
          // this.jlList = res.data.list;
          this.jdjl = res.data.list[0].account_data;
          res.data.list.forEach((item) => {
            if (item.from_type == "signin") {
              this.jlList.push(item);
            }
          });
          console.log(this.jlList);
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },

    clickKonw() {
      this.updateVisible(false);
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit("update:signVisible", value);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .el-dialog__header,
  .el-dialog__body,
  .el-dialog__footer {
    padding: 0 30px;
  }
  .el-dialog__header {
    padding-top: 33px;
  }
  .el-dialog__footer {
    padding-bottom: 20px;
  }
}
.qddialog {
  padding: 33px 30px 20px;

  .title {
    display: flex;
    align-items: center;
    img {
      width: 24px;
      height: 24px;
      margin-right: 11px;
    }

    span {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #222222;
      line-height: 24px;
    }
  }
  .timenum {
    font-size: 30px;
    font-family: DINAlternate-Bold, DINAlternate;
    font-weight: bold;
    color: #ff1449;
    line-height: 35px;
    text-align: center;
    margin: 20px 0 10px;
  }
  .timeText {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    text-align: center;
    line-height: 20px;
  }
  .gz {
    p {
      margin: 20px 0 10px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #222222;
      line-height: 20px;
    }
    .gztext {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;

      line-height: 22px;
      p {
        color: #999999;
      }
    }
  }
  .jl {
    .qdjl {
      margin: 20px 0 10px;

      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #222222;
      line-height: 20px;
    }
    ul {
      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        .left {
          display: flex;
          align-items: center;
          .img {
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            // background-color: $--color-primary;
            background: linear-gradient(141deg, #ffac73 0%, #fe6e0b 100%);
            border-radius: 100%;
            img {
              width: 26px;
              height: 26px;
            }
          }
          .cnt {
            height: 44px;

            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .title {
              font-size: 16px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #222222;
              line-height: 22px;
              letter-spacing: 1px;
            }
            .time {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999999;
              line-height: 17px;
            }
          }
        }
        .right {
          .big {
            font-size: 20px;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #585858;
            line-height: 24px;
          }
          .min {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #585858;
            line-height: 20px;
          }
        }
      }
    }
  }
}
</style>