前端vue开发连续签到功能

╰半夏微凉° 2022-09-04 03:52 352阅读 0赞

### 话不多说 直接上代码 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4ODM1NTk5_size_16_color_FFFFFF_t_70]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4ODM1NTk5_size_16_color_FFFFFF_t_70]: /images/20220829/23f181b78ddb4616bfb4ddec13920e93.png