微信小程序实现连续签到七天

news/2024/7/20 3:38:57 标签: 微信小程序, notepad++, 小程序

在这里插入图片描述
断签之后会从第一天重新开始


<template>
  <view class="content" style="height: 100vh;background: white;">
    <view class="back">
      <view style="position: absolute;bottom: 200rpx;left: 40rpx;width: 90%;">
		  <image :src="headimgUrl" mode="widthFix" style="width: 92rpx;height: 92rpx;border-radius: 50%;float: left;margin-top: -6rpx;margin-right: 14rpx;"></image>
			<view style="float: left;">
				
				<span style="font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;">当月连续签到 </span> <span style="font-size: 44rpx;color: #FF7D00;line-height: 40rpx;">{{ days }}</span><span style="font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;">天</span>
				        <view style="font-size: 24rpx;
				font-weight: 100;
				color: #FFFFFF;">连续签到七天可获得{{ sevenDay }}积分</view>
			</view>
			 <uni-calendar ref="calendar" class="uni-calendar--hook"
			      :clear-date="true" :date="info.date"
			      :insert="info.insert" 
			      :startDate="info.startDate"
			      :endDate="info.endDate" :range="info.range" @confirm="confirm"  />
      </view>
    
    </view>
    <view class="sign_content">
      <div class="signBox">
        <text style="font-size: 30rpx;
font-weight: bold;
color: #0D052C;">签到得积分,直接当钱花</text>

        <ul class="signBtnBox">
          <li class="signBtnOne" v-for="(item, index) in list" :key="index" :class="{ signed: index + 1 <= Number(days) }">
            <div @click="handleSignIn(index+1, item.code)">
              <p style="line-height: 50rpx;">{{ item.gift_num }}</p>
            <!--  <p v-if="index + 1 <= Number(days)">已签到</p>
              <p v-else>签到</p> -->
              <p style="line-height: 210rpx;font-size: 20rpx;">{{ item.points }}积分</p>
            </div>
          </li>
        </ul>
		<view style="background: linear-gradient(to bottom right, #FF5A23, #FF920D);width: 80%;margin: 0 auto;text-align: center;color: white;font-size: 34rpx;height: 88rpx;line-height: 88rpx;margin-top: 120rpx;border-radius: 40rpx;" @click="handleSignIn1">签到</view>
      </div>
	  
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
		showCalendar: false,
		info: {
			lunar: true,
			range: true,
			insert: false,
			selected: []
		},
      list: [
        { gift_num: "第一天", code: "USER_SIGN_POINT_1", points: null },
        { gift_num: "第二天", code: "USER_SIGN_POINT_2", points: null },
        { gift_num: "第三天", code: "USER_SIGN_POINT_3", points: null },
        { gift_num: "第四天", code: "USER_SIGN_POINT_4", points: null },
        { gift_num: "第五天", code: "USER_SIGN_POINT_5", points: null },
        { gift_num: "第六天", code: "USER_SIGN_POINT_6", points: null },
        { gift_num: "第七天", code: "USER_SIGN_POINT_7", points: null },
      ],
      res: "",
      days: "", // 签到的总天数
      signOK: "",
      headimgUrl: "",
      sevenDay: "",
    };
  },
  onReady() {
  	this.$nextTick(() => {
  		this.showCalendar = true
  	})
  },
  methods: {
	  open() {
	  	this.$refs.calendar.open()
	  },
	 
    async todaySignIn(code) {
      const res = await this.$request.post(
        "user/userSign",
        {
          token: uni.getStorageSync("token").token,
        },
        {
          native: true,
        }
      );
      if (res.data.status == "ok") {
        var data = res.data.data;
        uni.showToast({
          title: "签到成功！",
		  duration:2000
        })
		setTimeout(()=>{
			this.getSignIn()
		},2000)
      } else {
        this.handleSignIn()
      }
    },
	handleSignIn1() {
	    const index = Number(this.days) + 1;
	    if (index <= this.list.length) {
	      const code = this.list[index - 1].code;
	      this.todaySignIn(code);
	    } else {
	      uni.showToast({
	        icon: 'none',
	        title: "明天再来签到吧"
	      })
	    }
	  },
    async qiandao(code, index) {
      const res = await this.$request.post(
        "user/getUserConf",
        {
          token: uni.getStorageSync("token").token,
          code: code,
          type: 1
        },
        {
          native: true,
        }
      );
      if (res.data.status == "ok") {
        var data = res.data.data;
        console.log(data, "签到");
		this.sevenDay = data[0].values
        this.list[index].points = data[0].values;
      }
    },
    // 点击签到
    handleSignIn(index, code) {
      if (index > Number(this.days) + 1) {
        uni.showToast({
          icon: 'none',
          title: "请按顺序签到"
        })
      } else if (index === Number(this.days) + 1) {
        this.todaySignIn(code);
		
      } else {
        uni.showToast({
          icon: 'none',
          title: "明天再来签到吧"
        })
      }
    },
// async getSignIn() {
//   const res = await this.$request.post(
//     "user/getUserSignList",
//     {
//       token: uni.getStorageSync("token").token,
//     },
//     {
//       native: true,
//     }
//   );
//   if (res.data.status == "ok") {
//     var data = res.data.data;
//     this.days = data.sign_num;
//     this.headimgUrl = data.headimgurl;
// 	console.log(this.headimgUrl,'头像')
//     // 更新签到列表数据
//     for (let i = 0; i < this.list.length; i++) {
//       if (i < 7) {	
//         // 前七天的日期都显示原始的第一天、第二天等日期
//         this.list[i].gift_num = `第${i + 1}天`;
//       } else {
//         // 第八天及以后的日期只有在连续签到七天后才显示
//         if (this.days >= 7) {
//           this.list[i].gift_num = `第${i + 1}天`;
//         } else {
//           this.list[i].gift_num = "";
//         }
//       }
//       this.qiandao(this.list[i].code, i);
//     }
//   }
// },
    async getSignIn() {
      const res = await this.$request.post(
        "user/getUserSignList",
        {
          token: uni.getStorageSync("token").token,
        },
        {
          native: true,
        }
      );
      if (res.data.status == "ok") {
        var data = res.data.data;
        this.days = data.sign_num;
        this.headimgUrl = data.headimgUrl;
		 // this.apiDates = data.map(item => item.create_time.split(' ')[0]); // 提取日期字符串中的日期部分
        console.log(data, "签到列表");
		
        for (let i = 0; i < this.list.length; i++) {
          this.qiandao(this.list[i].code, i);
        }
      }
    },
  },
  components: {},
  onShow(){
	  this.getSignIn();
  },
  created() {
    this.getSignIn();
    this.qiandao("USER_SIGN_POINT_7", 6);
  },
};
</script>

<style lang="scss" scoped>
.back {
  width: 100%;
  height: 460rpx;
  background: url("https://-picture.oss-cn-hangzhou.aliyuncs.com/ebk-wap/img-202308240245145778-Group%2034161%403x.png") no-repeat;
  position: relative;
  top: 0;
  .avatar {
    width: 400rpx;
    position: absolute;
    height: 100rpx;
    left: 40rpx;
    top: 20rpx;
    z-index: 9;
  }
  .sign-date {
   
  }
}
.sign_content {
  position: relative;
  top: -150rpx;
  // width: 96%;
  height: 622rpx;
  background: white;
  border-radius: 24rpx;
  padding: 34rpx;
   display: flex;
    justify-content: center; /* 水平居中 */
  .sign_day {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 436rpx;
  }
}
.signBox {
	width: 100%;
  background: white;
  border-radius: 10px;
  margin: 0 auto;
  .tips {
    margin-top: 3%;
    span {
      font-size: 16px;
      letter-spacing: -0.1px;
      line-height: 22px;
      font-weight: 500;
    }
    :nth-of-type(2) {
      color: #fe9300;
      letter-spacing: -0.1px;
    }
  }
  .signBtnBox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    & > li {
      // cursor: pointer;
      width: 22%;
      height: 172rpx;
      background:url('https://ebk-picture.oss-cn-hangzhou.aliyuncs.com/ebk-wap/img-202308300426108993-Group%2034210%403x.png');
      border-radius: 4px;
	  background-size: 100%;
	  margin-top: 50rpx;
      img {
        margin: 6px 0 0 10px;
      }
      p {
        text-align: center;
        opacity: 0.6;
        font-size: 14px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
      }
    }
	li:nth-child(7){
		 width: 49%;
		  height: 172rpx;
		  color: #333333;
		  background: url('https://ebk-picture.oss-cn-hangzhou.aliyuncs.com/ebk-wap/img-202308300506217750-Group%2034211%403x.png');
		  background-size: cover;
		  background-position: center;
		  border-radius: 4px;
		  margin-top: 50rpx;
		  p{
			  text-align: left;
			  padding-left: 50rpx;
		  }
	}
		
		.signed:nth-child(7){
			background: url('https://ebk-picture.oss-cn-hangzhou.aliyuncs.com/ebk-wap/img-202309070948277933-Group%2034267%403x.png');
			background-size: 100%;
			color: #333333;
			p {
			  opacity: 1 !important;
					color: #333;
			}
		}
    .signed {
      background: url('https://ebk-picture.oss-cn-hangzhou.aliyuncs.com/ebk-wap/img-202308300412527364-Group%2034209%403x.png');
	  background-size: 100%;
      color: #333333;
      p {
        opacity: 1 !important;
		color: #333;
      }
    }
	
  }
}
</style>

http://www.niftyadmin.cn/n/5007951.html

相关文章

java的springboot框架中使用logback日志框架使用RabbitHandler注解为什么获取不到消费的traceId信息？

java的springboot框架中使用logback日志框架使用RabbitHandler注解为什么获取不到消费的traceId信息？

当使用 Logback 日志框架和 RabbitMQ 的 RabbitHandler 注解时&#xff0c;如果无法获取消费的 traceId 信息&#xff0c;可能是因为在处理 RabbitMQ 消息时&#xff0c;没有正确地将 traceId 传递到日志中。 为了将 traceId 传递到日志中&#xff0c;你可以利用 MDC&#xff…
阅读更多...
golang 定时器timer实用记录

golang 定时器timer实用记录

golang 的for-select结构&#xff0c;没有default会被阻塞&#xff0c;可以利用定时器任务&#xff1b; func TimerJob(ctx context.Context) {ter : time.NewTimer(1 * time.Second)for {select {case <-ctx.Done():fmt.Println("subctx exit.")returncase now …
阅读更多...
长胜证券：资本市场的含义是什么？

长胜证券：资本市场的含义是什么？

本钱商场是指企业和政府通过证券生意来筹集资金并进行出资活动的商场。本钱商场通常被分为两个部分&#xff1a;初级商场和二级商场。初级商场是新证券发行的商场&#xff0c;而二级商场则是已发行证券的生意商场。本钱商场的展开程度是一个国家经济展开的重要目标之一。 从宏…
阅读更多...
Struts.xml 配置文件说明

Struts.xml 配置文件说明

<?xml version"1.0" encoding"UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts-2.3.dtd"> <struts> <!--…
阅读更多...
Spring学习笔记——3

Spring学习笔记——3

Spring学习笔记——3 一、AOP简介1.1、AOP概述1.2、AOP思想的实现方案1.3、模拟AOP的基础代码1.4、AOP的相关概念 二、基于XML配置的AOP2.1、XML方式AOP快速入门2.2、XML方式AOP配置详解2.3、XML方式AOP原理剖析 三、基于注解配置AOP3.1、注解方式AOP基本使用3.2、注解方式AOP配…
阅读更多...
永恒之黑_CVE-2020-0796漏洞复现

永恒之黑_CVE-2020-0796漏洞复现

永恒之黑&#xff1a;CVE-2020-0796漏洞复现 目录 永恒之黑&#xff1a;CVE-2020-0796漏洞复现漏洞介绍漏洞影响范围漏洞复现1.环境准备2.复现过程 漏洞介绍 本漏洞源于SMBv3没有正确处理压缩的数据包&#xff0c;在解压数据包的时候使用客户端传过来的长度进行解压时&#xf…
阅读更多...
uniapp使用webview将页面转换成图片支持h5、app、小程序

uniapp使用webview将页面转换成图片支持h5、app、小程序

uniapp使用webview将页面转换成图片支持h5、app、小程序 在uniapp项目中新建主页和webview页面 index.vue代码 <template><view><!-- 微信小程序要设置src为网络路径 --><web-view src"/hybrid/html/webview.html"></web-view><…
阅读更多...
cocos 之纹理格式和压缩纹理

cocos 之纹理格式和压缩纹理

Cocos2dx 版本&#xff1a; 3.10 CocosCreator 版本&#xff1a; 3.8.0 环境&#xff1a; Mac 简介 在项目开发中&#xff0c;图片资源的优化是作为性能优化和包体优化的一项重要侧露。常用的手段有&#xff1a; 使用TexturePacker将散图打包图集 JPG和PNG的使用&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023