前端vue开发连续签到功能-蒲公英云

前端vue开发连续签到功能

话不多说直接上代码

在这里插入图片描述

<template>
  <div class="signBox">
    <div class="tips">
      <span>Signed in for </span> <span>{ {  days }}</span>
      <span>consecutive days</span>
    </div>
    <p class="history" @click="goToHistory">View score history ></p>
    <ul class="signBtnBox">
      <li class="signBtnOne" v-for="(item, key, index) in list" :key="index">
        <div
          v-if="Number(days) == index + 1 || Number(days) > index + 1"
          style=" width: 100%; height: 100%; border-radius: 4px; background-color: #ff9400; ">
          <img src="./image/2.png" />
          <p>{ {  item.gift_num }}</p>
        </div>
        <div v-else @click="signInToday">
          <img src="./image/3.png" />
          <p>{ {  item.gift_num }}</p>
        </div>
      </li>
    </ul>
    <p class="signResetTime">Check-in reset time: daily 18:00:00</p>
    <div class="pointJump">
      <div class="pointShop" @click="gotoPointsStore">
        <P>Points</P>
        <p>Shop</p>
      </div>
      <div class="textCenter">
        <P>Task</P>
        <p>Center</p>
      </div>
      <div class="myWallet" @click="gotoWallet">
        <P>My</P>
        <p>Wallet</p>
      </div>
    </div>
  </div>
</template>
<script>
import {  assetsVersionDir } from "../../../hrefs";
export default { 
  data() { 
    return { 
      list: [],
      res: "",
      /* 签到的总天数 */
      days: "",
      signOK:""
    };
  },
  methods: { 
    // 跳转到积分历史页面
    goToHistory() { 
      this.$openUrl(assetsVersionDir + "index.html?#/profile/wallet/points",1);
    },
    // 打开积分商城页面
    gotoPointsStore() { 
      this.$openUrl();
    },
    // 打开我的钱包页面
    gotoWallet() { 
      this.$openUrl(assetsVersionDir + "index.html?#/other/getPoints", 1);
    },
    todaySignIn() { 
      this.$http.get(window.apis.sign_in_today).then((res) => { 
        this.getSignIn();
        console.log(res);
        let signOK = res;
        this.signOK = signOK
        console.log(signOK);
      });
    },
    // 点击签到
    signInToday() { 
      console.log(this.res.data.today);
      if (this.res.data.today == 0) { 
        this.todaySignIn()
        console.log(this.res.code);
        if(this.res.code !== 0){ 
          this.$message.success("签到失败");
        }else{ 
          this.$message.error("签到成功");
        }
      } else { 
        this.$message.error("今日已签到");
      }
    },
    getSignIn() { 
      this.$http.get(window.apis.check_in_query).then((res) => { 
        // console.log(res);
        this.res = res;
        console.log(this.res);
        //传值发给list[]
        let list = res.data.conf;
        this.list = list;
        let days = this.res.data.days_num;
        this.days = days;
        console.log(days);
        console.log(this.res.data.today);
        // console.log(this.list);
      });
    },
  },
  components: { },
  created() { 
    this.getSignIn();
  },
};
</script>
<style lang="scss" scoped>
* { 
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.signBox { 
  width: 398px;
  height: 276px;
  background: #2d3949;
  border-radius: 10px;
  padding: 1.4% 2.3%;
  margin: 0 auto;
  .tips { 
    margin-top: 3%;
    span { 
      color: #ffffff;
      font-size: 16px;
      font-family: PingFang SC;
      letter-spacing: -0.1px;
      line-height: 22px;
      font-weight: 500;
    }
    :nth-of-type(2) { 
      color: #fe9300;
      letter-spacing: -0.1px;
    }
  }
  .history { 
    opacity: 0.5;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #ffffff;
    letter-spacing: 0;
    font-weight: 400;
    cursor: pointer;
    margin: 3% 0 6% 0;
  }
  .signBtnBox { 
    display: flex;
    justify-content: space-between;
    & > li { 
      cursor: pointer;
      width: 42px;
      height: 52px;
      background: #28313e;
      border-radius: 4px;
      img { 
        margin: 6px 0 0 10px;
      }
      p { 
        text-align: center;
        opacity: 0.6;
        font-family: PingFangSC-Medium;
        font-size: 14px;
        color: #ffffff;
        letter-spacing: 0;
        font-weight: 500;
      }
    }
    .signed { 
      background: #ff9400;
      color: #ffffff;
      p { 
        opacity: 1 !important;
      }
    }
  }
  .signResetTime { 
    text-align: center;
    opacity: 0.5;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #ffffff;
    letter-spacing: 0;
    font-weight: 400;
    margin: 3% 0;
  }
  .pointJump { 
    display: flex;
    justify-content: space-between;
    .pointShop { 
      width: 110px;
      height: 76px;
      background-image: url(./image/积分商城.png);
    }
    .textCenter { 
      width: 110px;
      height: 76px;
      background-image: url(./image/任务中心.png);
    }
    .myWallet { 
      width: 110px;
      height: 76px;
      background-image: url(./image/我的钱包.png);
    }
    .pointShop,
    .textCenter,
    .myWallet { 
      padding: 20px 10px;
      line-height: 20px;
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: #ffffff;
      letter-spacing: 0;
      font-weight: 500;
      cursor: pointer;
      p { 
        opacity: 0.9;
      }
    }
  }
}
</style>