uniapp 九宫格抽奖

<template>
  <view class="container">
    <view class="navleft" @click="navback">
      <image src="@/static/cj/left.png" mode=""></image>
    </view>
    <view class="navtitle">抽奖</view>
    <view class="bg">
      <image src="https://szcc.test03.qcw800.com/uploads/images/20240708/kIKHgR1pGuYUwq0D9AhTXcl9ufcKmwsVuXn0lKUp.png" mode=""></image>
    </view>
    <view class="title">幸运大抽奖</view>
    <view class="cont">
      <view
        class="cont_item"
        :class="{ 'no-margin': index % 3 === 2, highlight: index === highlightIndex }"
        v-for="(item, index) in drawList"
        :key="index"
        @click="changeCont(item)"
      >
        <view class="cont_img" v-if="item.text !== '抽奖'">
          <image src="@/static/cj/jp.png" mode=""></image>
        </view>
        <view class="cont_cj" v-if="item.text == '抽奖'">
          {{ item.text }}
        </view>
        <view class="cont_txt" v-if="item.text !== '抽奖'">{{ item.title }}</view>
      </view>
    </view>

    <view class="sycj">
      <view class="sycj_txt">剩余抽奖次数：{{ luck }}</view>
    </view>
    <view class="foot">
      <view class="foot_title">
        <view class="foot_left"></view>
        <view class="foot_title">活动规则</view>
        <view class="foot_right"></view>
      </view>
      <view class="foot_txt">
        活动最终解释权归平台所有，活动最终解释权归平台所有，活动最终解释权归平台所有活动最终解释权归平台所有，活动最终解释权归平台所有，活动最终解释权归平台
      </view>
    </view>
    <view>
      <!-- 弹窗 -->
      <uni-popup ref="popup" background-color="#fff">
        <view class="popup-con" v-if="result.title !== '谢谢惠顾'">
          <view class="con_title">提示</view>
          <view class="con_text">恭喜您本次抽中{{ result.title }},是否需要快递邮寄？</view>
          <view class="title_btns">
            <view class="title_err" @click="popupClose">不需要</view>
            <view class="title_res" @click="goAddress">需要</view>
          </view>
        </view>
        <view class="popup-con" v-else>
          <view class="con_title">提示</view>
          <view class="con_text">您本次抽中谢谢惠顾,继续努力</view>
          <view class="conbut" @click="popupClose">确定</view>
          <!-- <view class="title_btns">
            <view class="title_err" @click="popupClose">不需要</view>
            <view class="title_res" @click="goAddress">需要</view>
          </view> -->
        </view>
      </uni-popup>
    </view>
  </view>
</template>

<script>
import { get, post } from '@/utils/request.js';
export default {
  data() {
    return {
      luck: '', //抽奖次数
      drawList: '', //抽奖列表
      isAnimating: false,
      currentIndex: null, // 用于追踪当前正在高亮的列表项的索引
      isLuckyDrawAnimating: false,
      winningItemId: null, // 存储从服务器返回的中奖ID
      highlightIndex: null, // 初始化 highlightIndex
      result: '' //中奖结果
    };
  },
  created() {
    this.getDrawList();
  },
  onShow() {
    this.getDrawNum();
  },
  // 方法部分
  methods: {
    async getDrawNum() {
      const res = await get('/api/user/luckDrawNum', { api_token: uni.getStorageSync('api_token') });
      console.log('抽奖次数', res.data.num);
      this.luck = res.data.num;
    },
    async getDrawList() {
      const res = await get('/api/public/luckDrawList');
      console.log(res);
      this.drawList = res.data;
      // 抽奖按钮配置
      const drawButton = {
        text: '抽奖',
        image: null
      };
      // 在第5项位置插入抽奖按钮
      if (this.drawList.length >= 5) {
        this.drawList.splice(4, 0, drawButton);
      } else {
        // 如果当前列表长度不足5项，可以考虑直接添加到末尾或不做任何操作
        this.drawList.push(drawButton);
      }
    },
    navback() {
      uni.navigateBack();
    },
    popupOpen() {
      this.$refs.popup.open();
    },
    popupClose() {
      this.$refs.popup.close();
      this.getDrawNum();
    },
    goAddress() {
      this.$refs.popup.close();
      this.getDrawNum();
      uni.navigateTo({
        url: '/pages/draw/address'
      });
    },
    changeCont(item) {
      if (item.text === '抽奖') {
        if (this.luck > 0) {
          this.luckyDraw();
        } else {
          uni.showToast({
            title: '没有抽奖次数了',
            icon: 'none',
            duration: 2000
          });
        }
      }
    },
    startLuckyDrawAnimation() {
      this.highlightIndex = 0; // 在这里重置 highlightIndex
      this.isLuckyDrawAnimating = true;
      this.cycleHighlight();
    },
    cycleHighlight() {
      if (this.isLuckyDrawAnimating && this.highlightIndex < this.drawList.length) {
        if (this.drawList[this.highlightIndex].text === '抽奖') {
          // 直接跳过抽奖按钮，不进行高亮
          this.highlightIndex++;
          // 使用立即执行的函数表达式确保在抽奖按钮跳过后，立即进行下一次高亮处理
          (() => {
            setTimeout(() => {
              this.cycleHighlight();
            }, 200);
          })();
        } else {
          // 应用高亮样式
          this.$nextTick(() => {
            // 更新highlightIndex之后再设置高亮，确保DOM更新完成
            setTimeout(() => {
              this.highlightIndex++;
              this.cycleHighlight();
            }, 200);
          });
        }
      } else {
        this.stopAtWinningItem();
      }
    },
    stopAtWinningItem() {
      if (this.winningItemId !== null) {
        this.highlightIndex = this.drawList.findIndex((item) => item.id === this.winningItemId);
        this.result = this.drawList.find((item) => item.id === this.winningItemId);
        console.log('执行', this.result);
        // 这里可以添加额外的中奖动画效果
        this.isLuckyDrawAnimating = false;
        //获取中奖的那一项数据
        this.popupOpen(); // 显示中奖弹窗
      }
    },
    luckyDraw() {
      this.startLuckyDrawAnimation();
      uni.request({
        url: 'https://szcc.test03.qcw800.com/api/user/LuckDraw',
        method: 'GET',
        data: { api_token: uni.getStorageSync('api_token') },
        success: (res) => {
          console.log(res); //{luck_id: "8", luck_draw_record_id: "4"} luck_draw_record_id是中奖id
          this.winningItemId = res.data.data.luck_id;
          // this.winningItemId = '4';
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.highlight {
  box-shadow: 0 0 10rpx 5rpx rgba(255, 255, 0, 0.8) !important;
}
::v-deep .uni-popup__wrapper {
  width: 662rpx;
  height: 424rpx;
  background: #ffffff;
  border-radius: 16rpx;
}
.popup-con {
  .con_title {
    margin-top: 40rpx;
    font-size: 34rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    text-align: center;
    color: #1d2129;
    letter-spacing: -0.44rpx;
  }
  .con_text {
    width: 540rpx;
    margin: 62rpx auto;
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    text-align: center;
    color: #1b1b1b;
    line-height: 48rpx;
  }
  .conbut {
    margin: auto;
    width: 286rpx;
    height: 82rpx;
    background: linear-gradient(82deg, #d93624 13%, #f09072 80%);
    border-radius: 16rpx;
    text-align: center;
    line-height: 82rpx;
    color: #fff;
  }
  .title_btns {
    margin: auto;
    width: 602rpx;
    display: flex;
    justify-content: space-between;
    .title_err {
      width: 286rpx;
      height: 82rpx;
      background: #f6f7f9;
      border-radius: 16rpx;
      text-align: center;
      line-height: 82rpx;
      color: #666666;
    }
    .title_res {
      width: 286rpx;
      height: 82rpx;
      background: linear-gradient(82deg, #d93624 13%, #f09072 80%);
      border-radius: 16rpx;
      text-align: center;
      line-height: 82rpx;
      color: #ffffff;
    }
  }
}
.navleft {
  position: absolute;
  top: 108rpx;
  left: 24rpx;
  width: 48rpx;
  height: 48rpx;
  z-index: 2;
  image {
    width: 100%;
    height: 100%;
  }
}
.navtitle {
  z-index: 2;
  position: absolute;
  top: 108rpx;
  left: 342rpx;
  width: 68rpx;
  height: 48rpx;
  font-size: 34rpx;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 500;
  color: #ffffff;
}
.bg {
  position: relative;
  width: 750rpx;
  height: 1624rpx;
  image {
    width: 100%;
    height: 100%;
  }
}
.title {
  position: absolute;
  top: 194rpx;
  left: 126rpx;
  width: 496rpx;
  height: 140rpx;
  font-size: 90rpx;
  font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
  font-weight: 400;
  color: #fdf1b8;
}
.cont_cj {
  width: 148rpx;
  height: 148rpx;
  background: radial-gradient(#d94235, #e54f2c 55%, #eb7854);
  border-radius: 12rpx;
  box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(237, 102, 60, 0.56);
  font-size: 48rpx;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 500;
  text-align: center;
  color: #fdf1b8;
  line-height: 148rpx;
  margin-right: 30rpx;
}

.cont {
  position: absolute;
  top: 366rpx;
  left: 66rpx;
  background: url(https://szcc.test03.qcw800.com/uploads/images/20240709/POqESSmKSQmWtm5XekLxwZu9zI0bXIGuIXoEbC8V.png) center;
  width: 504rpx;
  height: 500rpx;
  background-size: 100% 100%;
  padding: 60rpx;
  display: flex;
  flex-wrap: wrap;

  .cont_item {
    width: 148rpx;
    height: 148rpx;
    background: url(https://szcc.test03.qcw800.com/uploads/images/20240709/yIVTR4jIGECShJpwQzOquyntD08ZgshWV2cPAOZK.png);
    background-size: 100% 100%;
    margin-right: 30rpx;
    &.no-margin {
      margin-right: 0;
    }
    .cont_img {
      width: 76rpx;
      height: 76rpx;
      margin: auto;
      image {
        margin-top: 24rpx;
        width: 100%;
        height: 100%;
      }
    }
    .cont_txt {
      margin-top: 24rpx;
      height: 32rpx;
      font-size: 22rpx;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      text-align: center;
      color: #fd9440;
    }
  }
}
.sycj {
  position: absolute;
  top: 1016rpx;
  left: 66rpx;
  width: 618rpx;
  height: 90rpx;
  background: url(https://szcc.test03.qcw800.com/uploads/images/20240709/d3MRq1bYG9Uy7hdLFvMkk7nvfM7z4jPFj5p97W8E.png) center;
  background-size: 100% 100%;
  .sycj_txt {
    margin-left: 34rpx;
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC-Semibold;
    font-weight: 600;
    text-align: left;
    line-height: 90rpx;
    color: #ffffff;
  }
}
.foot {
  position: absolute;
  top: 1136rpx;
  left: 66rpx;
  background-color: #fff;
  border-radius: 12rpx;
  width: 572rpx;
  height: 410rpx;
  padding: 24rpx 22rpx 0 24rpx;
  .foot_title {
    display: flex;
    align-items: center;
    justify-content: center;
    .foot_left {
      width: 114rpx;
      height: 6rpx;
      background: linear-gradient(270deg, #eb592b, rgba(240, 144, 114, 0));
    }
    .foot_title {
      margin: 0 24rpx;
      width: 160rpx;
      height: 56rpx;
      font-size: 40rpx;
      font-family: PingFang SC, PingFang SC-Semibold;
      font-weight: 600;
      text-align: left;
      color: #ed581d;
    }
    .foot_right {
      width: 114rpx;
      height: 6rpx;
      background: linear-gradient(90deg, #eb592b, rgba(240, 144, 114, 0));
    }
  }
  .foot_txt {
    margin-top: 22rpx;
    width: 572rpx;
    height: 256rpx;
    font-size: 26rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: left;
    color: #333333;
    line-height: 44rpx;
  }
}
</style>

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/791866.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

真实测评网上较火的两款智能生成PPT产品：秒出PPTAI PPT

真实测评网上较火的两款智能生成PPT产品：秒出PPTAI PPT

测评两款AI生成PPT的工具&#xff1a;秒出PPT和AI PPT。这俩个款是目前竞争比较激烈的且使用起来比较好的产品。一下主要从PPT模板、一键生成及生成效果、Word转PPT来分析一下使用感受。 秒出PPT 秒出PPT是集模板站与编辑站一体的产品&#xff0c;支持微信扫码登录。主页可以直…
阅读更多...
用SmartEDA点亮电路教学：传统课堂的革新之道

用SmartEDA点亮电路教学：传统课堂的革新之道

在数字化浪潮的推动下&#xff0c;教育领域也迎来了前所未有的变革。特别是在电路教学这一专业领域&#xff0c;传统的黑板加课本的教学模式已难以满足现代学生的需求。今天&#xff0c;我们就来探讨一下&#xff0c;如何利用SmartEDA电路仿真软件来补充传统教学&#xff0c;为…
阅读更多...
算力革命：弹性租赁，解锁无限可能

算力革命：弹性租赁，解锁无限可能

华为创始人任正非曾在一场程序设计竞赛中说道&#xff0c;我们即将进入第四次工业革命&#xff0c;基础就是大算力。事实上&#xff0c;随着5G、人工智能等信息技术的迅猛发展&#xff0c;算力需求持续增长&#xff0c;但高昂的成本和快速的技术迭代让许多中小企业和个人开发者…
阅读更多...
杆塔倾斜在线监测装置

杆塔倾斜在线监测装置

概述 我国约960万平方公里已经基本实现电网和基站通讯全覆盖&#xff0c;但我国地貌复杂多样&#xff0c;大部分杆塔需要安装在野外&#xff0c;在安装时并不能保证地基的结实可靠&#xff0c;一不小心就可能导致杆塔的倾斜倒塌。 在通信铁塔倾斜现象发生发展的初期&#xff0…
阅读更多...
【机器学习】支持向量机与主成分分析在机器学习中的应用

【机器学习】支持向量机与主成分分析在机器学习中的应用

文章目录 一、支持向量机概述什么是支持向量机&#xff1f;超平面和支持向量大边距直觉 二、数据预处理与可视化数据集的基本信息导入必要的库加载数据集数据概况数据可视化特征对的散点图矩阵类别分布条形图平均面积与平均光滑度的散点图变量之间的相关性热图 三、模型训练&am…
阅读更多...
electron + express 实现 vue 项目客户端部署

electron + express 实现 vue 项目客户端部署

写在前面 作为一个前端程序员&#xff0c;如何实现从前端到客户端的跨越&#xff0c;可能是一个很难实现的事。但客户需求千奇百怪&#xff0c;偶尔遇到一个非要客户端的&#xff0c;如何应对&#xff1f; 那Electron可能真是你福音。具体它有哪些功能&#xff0c;可自行官网…
阅读更多...
linux 命令之diff工具的使用

linux 命令之diff工具的使用

linux 命令之diff工具的使用 -u:表示在比较结果中输出上下文中一些相同的行,有利于查看文件区别,有和----提示 -r:表示递归比较各个子目录下的文件 -N:将不存在的 -w:ignore空格的比较 -B:ignore空行的比较 创建两个文件,文件一:文件一: 『&#xff11;』大学之道在明明德&a…
阅读更多...
52771-009P 同轴连接器

52771-009P 同轴连接器

型号简介 52771-009P是Southwest Microwave的连接器。这款连接器外导体外壳、耦合螺母和电缆夹紧螺母都采用了不锈钢 UNS-S30300 材料。不锈钢具有优异的耐腐蚀性和机械强度&#xff0c;能够保证连接器在各种恶劣环境下都能稳定工作。 型号特点 中心触点、外壳、衬套固定环&am…
阅读更多...
HIS系统，云HIS系统源码，一款适用于公立二级以下医院、专科医院和社区卫生机构的综合性医院信息系统

HIS系统，云HIS系统源码，一款适用于公立二级以下医院、专科医院和社区卫生机构的综合性医院信息系统

医院管理信息系统(全称为Hospital Information System)即HIS系统。 常规模版包括门诊管理、住院管理、药房管理、药库管理、院长查询、电子处方、财务管理、物资管理等&#xff0c;为医院管理提供更有力的保障。 HIS系统以财务信息、病人信息和物资信息为主线&#xff0c;通过…
阅读更多...
【YOLOv8】 用YOLOv8实现数字式工业仪表智能读数(一)

【YOLOv8】 用YOLOv8实现数字式工业仪表智能读数(一)

上一篇圆形表盘指针式仪表的项目受到很多人的关注&#xff0c;咱们一鼓作气&#xff0c;把数字式工业仪表的智能读数也研究一下。本篇主要讲如何用YOLOV8实现数字式工业仪表的自动读数&#xff0c;并将读数结果进行输出&#xff0c;若需要完整数据集和源代码可以私信。 目录 &…
阅读更多...
springboot零食盒子-计算机毕业设计源码50658

springboot零食盒子-计算机毕业设计源码50658

目 录 1 绪论 1.1 研究背景 1.2研究意义 1.3论文结构与章节安排 2 微信小程序的零食盒子系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1 数据流程 3.3.2 业务流程 2.3 系统功能分析 2.3.1 功能性分析 2.3.2 非功能性分析 2.4 系统用例分析 2.5本章小结 3 微信…
阅读更多...
postgres 的dblink使用，远程连接数据库

postgres 的dblink使用，远程连接数据库

一.安装下载 dblink create extension if not exists dblink 查看是否已经安装 select * from pg_extension;二.运行&#xff0c;查询数据 其中&#xff0c;第一个参数是dblink名字&#xff0c;也可以是连接字符串。 第二个参数是要执行的SQL查询语句。AS子句用于指定返回结…
阅读更多...
FastAPI 学习之路（三十九）对开发接口进行测试

FastAPI 学习之路（三十九）对开发接口进行测试

概况 对于开发好的接口需要进行测试之后才能发布。当我们在开发的时候&#xff0c;没有提前测试&#xff0c;我们也要对我们自己的接口进行测试&#xff0c;那么FastApi自身也带有针对开发的接口进行测试的功能。我们看下FastApi官方给我们提供了什么样的支持。 接口还是基于…
阅读更多...
zerotier-one自建根服务器方法 六

zerotier-one自建根服务器方法 六

一、简介 前面几篇文章已经写完了自己建立服务器的方法与常见问题&#xff0c;今天就写一下服务器备份与迁移吧。 二、准备工作 准备一个有公网IP的云主机。 要稳定性、安全性、不差钱的可以使用阿里、腾讯等大厂的云服务器。 本人穷屌丝一枚&#xff0c;所以我用的是免费的“…
阅读更多...
一.9 重要主题

一.9 重要主题

在此&#xff0c;小结一下我们旋风式的系统漫游。这次讨论得出一个很重要的观点&#xff0c;那就是系统不仅仅只是硬件。系统是硬件和系统软件互相交织的集合体。它们必须共同协作以达到运行应用程序的最终目的。本书的余下部分会讲述硬件和软件的详细内容&#xff0c;通过了解…
阅读更多...
中国AI大模型，谁是实力派

中国AI大模型，谁是实力派

继2022年11月&#xff0c;OpenAI发布旗下AI聊天机器人应用ChatGPT后&#xff0c;大模型逐渐走入公众视野。2023年被视为中国大模型的发展元年。 这一年里&#xff0c;中国本土厂商、各大科技巨头、科研院所、初创公司都纷纷下场&#xff0c;部署自己的大模型。从优化算法全面追…
阅读更多...
Linux 忘记root密码，通过单用户模式修改

Linux 忘记root密码，通过单用户模式修改

银河麒麟桌面操作系统 V10&#xff08;sp1&#xff09;”忘记用户密码&#xff0c;需要修改用户密码所写&#xff0c;可用于 X86 架构和 arm 架构。 2. 选择第一项&#xff0c;在上图界面按“e”键进行编辑修改。 3. 在以 linux 开头这行的行末&#xff0c;添加“init/bin/bas…
阅读更多...
充气膜游泳馆安全吗—轻空间

充气膜游泳馆安全吗—轻空间

充气膜游泳馆&#xff0c;作为一种新型的游泳场馆&#xff0c;以其独特的结构和众多优点&#xff0c;逐渐受到各地体育设施建设者的青睐。然而&#xff0c;关于充气膜游泳馆的安全性&#xff0c;一些人仍然心存疑虑。那么&#xff0c;充气膜游泳馆到底安全吗&#xff1f;轻空间…
阅读更多...
基督教堂变身“知识网红”！枢纽云助力传统教堂数智化升级

基督教堂变身“知识网红”！枢纽云助力传统教堂数智化升级

随着互联网技术的发展&#xff0c;知识获取的方式悄然发生了改变。传统的书籍、课堂教学等知识传递模式逐渐被线上课程、电子书、知识付费平台等新形式所补充和替代。知识付费&#xff0c;作为一种新兴的知识传播和变现模式&#xff0c;迅速崛起并受到广泛关注和欢迎。 何为知…
阅读更多...
PyTorch实现BERT预训练模型转化指南

PyTorch实现BERT预训练模型转化指南

huggingface官方的介绍&#xff1a; https://huggingface.co/transformers/converting_tensorflow_models.html 直接用命令行 把箭头处路径改为自己放原有tf版本预训练模型的路径 回车后会有一大堆提示&#xff0c;然后发现路径下多了一个bin文件&#xff0c;加上原本的config…
阅读更多...
最新文章

Copyright @ 2022~2023