uniapp 九宫格抽奖

news2025/6/2 7:50:10 
<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>

 

 

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

鸿蒙应用开发之Counter容器

鸿蒙应用开发之Counter容器

前面学习了纵向容器，现在来学习一个计数器的容器，就是说这个容器显示增加或减少，但数值会显示一个文本组件内，如下图所示： 上面组件中间显示5的组件是一个文本组件，边上提供了增减的按钮。 它有两个事件组件，用来响应边上两个按钮： 要在文本组件里显示出来，需要定义一…
阅读更多...
批量提取Word文档中表格内容

批量提取Word文档中表格内容

1 背景 有一个word文件&#xff0c;其中包含多个格式一致的表格&#xff08;如下图&#xff09;&#xff0c;需要将其内容进行提取&#xff0c;填写到excel中 2 实现代码 ## 导入工具包 from docx import Document import pandas as pd## 读取 Word 文件 document Document(…
阅读更多...
如何有效去除论文中的AI痕迹？AI工具让降AI率变得简单

如何有效去除论文中的AI痕迹？AI工具让降AI率变得简单

在学术写作的征途上&#xff0c;每个字都需独一无二。但AI写作的普及带来了AI痕迹的难题&#xff0c;增加了论文被标记的风险。笔灵AI工具的问世&#xff0c;为这一问题提供了完美的解决方案&#xff0c;让原创性不再是奢望。 传送门&#xff1a;https://ibiling.cn/paper-pas…
阅读更多...
电脑硬盘分区及合并指南

电脑硬盘分区及合并指南

电脑硬盘分区是指将一个硬盘划分成多个独立的区域&#xff0c;每个区域可以被操作系统单独管理和使用&#xff0c;我们可以根据需要将数据分类存储&#xff0c;例如将系统文件、个人文件和多媒体内容分别存放在不同的分区中。合理的分区不仅可以提升系统性能&#xff0c;还能提…
阅读更多...
AI大模型技术的四大核心架构演进之路

AI大模型技术的四大核心架构演进之路

随着人工智能技术的飞速发展&#xff0c;大模型技术已经成为AI领域的重要分支。 本文将深入探讨四种关键的大模型技术架构&#xff1a;纯粹Prompt提示词法、Agent Function Calling机制、RAG&#xff08;检索增强生成&#xff09;以及Fine-tuning微调技术&#xff0c;揭示它们…
阅读更多...
git-工作场景

git-工作场景

1. 远程分支为准 强制切换到远程分支并忽略本地未提交的修改 git fetch origin # 获取最新的远程分支信息 git reset --hard origin/feature_server_env_debug_20240604 # 强制切换到远程分支&#xff0c;并忽略本地修改 2. 切换分支 1. **查看所有分支&#xff1a;**…
阅读更多...
如何避免因AI代写导致的学位撤销风险？降AI率是关键

如何避免因AI代写导致的学位撤销风险？降AI率是关键

现在的论文审查都比较严格&#xff0c;随着AI的发展&#xff0c;很多学生都会选择用AI工具进行论文的写作&#xff0c;所以现在的论文审查&#xff0c;除了查重率&#xff0c;还有一个AIGC率也是需要关注的&#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 微信…
阅读更多...
electron + express 实现 vue 项目客户端部署

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

写在前面 作为一个前端程序员&#xff0c;如何实现从前端到客户端的跨越&#xff0c;可能是一个很难实现的事。但客户需求千奇百怪&#xff0c;偶尔遇到一个非要客户端的&#xff0c;如何应对&#xff1f; 那Electron可能真是你福音。具体它有哪些功能&#xff0c;可自行官网…
阅读更多...
Spring系列二：基于XML配置bean 中

Spring系列二：基于XML配置bean 中

基于XML配置bean &#x1f496;使用utillist进行配置&#x1f496;属性级联赋值配置&#x1f496;通过静态工厂获取bean&#x1f496;bean配置信息重用&#x1f496;bean创建顺序&#x1f496;bean的单例和多实例&#x1f496;bean的生命周期 &#x1f496;使用utillist进行配置…
阅读更多...
C#中的MD5摘要算法与哈希算法

C#中的MD5摘要算法与哈希算法

文章目录 一、哈希算法基础二、MD5 算法原理三、MD5摘要算法四、哈希算法五、C#实现示例MD5算法示例哈希算法示例字符串MD5值对比 六、总结 一、哈希算法基础 哈希算法是一种单向密码体制&#xff0c;它将任意长度的数据转换成固定长度的字符串。这种转换是不可逆的&#xff0…
阅读更多...
uniapp x — 跨平台应用开发的强大助力

uniapp x — 跨平台应用开发的强大助力

摘要&#xff1a; 随着前端技术的不断演进&#xff0c;跨平台应用开发框架成为了提升开发效率、降低开发成本的重要工具。uni-app以其跨平台兼容性和丰富的功能受到了开发者的广泛青睐。然而&#xff0c;随着应用需求的日益增长&#xff0c;对框架的功能和性能要求也在不断提高…
阅读更多...
景联文科技打造高质量图文推理问答数据集，赋能大语言模型提升推理能力

景联文科技打造高质量图文推理问答数据集，赋能大语言模型提升推理能力

大语言模型在处理推理任务时&#xff0c;不同于人类能够反思错误并修正思维路径&#xff0c;当它遇到自身知识盲区时&#xff0c;缺乏自我校正机制&#xff0c;往往导致输出结果不仅无法改善&#xff0c;反而可能变得更不准确。 需要依赖外部的知识库和推理能力来克服其在理解和…
阅读更多...
生产英特尔CPU处理器繁忙的一天

生产英特尔CPU处理器繁忙的一天

早晨&#xff1a;准备与检查 7:00 AM - 起床与准备 工厂员工们早早起床&#xff0c;快速洗漱并享用早餐。为了在一天的工作中保持高效&#xff0c;他们会进行一些晨间锻炼&#xff0c;保持头脑清醒和身体活力。 8:00 AM - 到达工厂 员工们到达英特尔的半导体制造工厂&#…
阅读更多...
代码随想录算法训练营第三十天

代码随想录算法训练营第三十天

56. 合并区间 这道题跟452. 用最少数量的箭引爆气球 (opens new window)和 435. 无重叠区间 (opens new window)都是一个套路。 回了上面两个这道题并不难 这题主要就是发现重叠后更新一下当前元素的起始范围 if (intervals[i][0] < intervals[i-1][1]) {intervals[i][0…
阅读更多...
解决在window资源管理器的地址栏中输入\\192.168.x.x\sambashare之后显示无法访问，错误代码 0x80070035，找不到网络路径。

解决在window资源管理器的地址栏中输入\\192.168.x.x\sambashare之后显示无法访问，错误代码 0x80070035，找不到网络路径。

一、错误重现 二、解决方法 1、在cmd中输入gpedit.msc gpedit.msc确定 -> 打开本地组策略编辑器 2、启用不安全的来宾登录 计算机配置 -> 管理模板 -> 网络 -> Lanman工作站 -> 右侧双击编辑"启用不安全的来宾登录"&#xff0c;把状态改为 “已启…
阅读更多...
unity知识点 专项四 一文彻底说清楚(锚点(anchor)、中心点(pivot)、位置(position)之间的关系)

unity知识点 专项四 一文彻底说清楚(锚点(anchor)、中心点(pivot)、位置(position)之间的关系)

一 概述 想要使UI控件在屏幕中达到正确的显示效果&#xff0c;比如自适应屏幕尺寸、固定边距等等&#xff0c;首先要理清楚几个基本概念和设置&#xff1a;锚点(anchor)、中心点(pivot)、位置(position)、UI缩放模式、父物件的transform设置 二 Anchor、Pivot与Position 2…
阅读更多...
java：运用字节缓冲输入流将文件中的数据写到集合中

java：运用字节缓冲输入流将文件中的数据写到集合中

代码主要是将文本文件中的数据写到集合中&#xff0c;运用到的是java字节缓冲输入流的知识点。 public static void main(String[] args) throws IOException {//创建字符缓冲流输入对象BufferedReader bufferedReader new BufferedReader(new FileReader("student.txt&q…
阅读更多...
Linux 忘记root密码，通过单用户模式修改

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

银河麒麟桌面操作系统 V10&#xff08;sp1&#xff09;”忘记用户密码&#xff0c;需要修改用户密码所写&#xff0c;可用于 X86 架构和 arm 架构。 2. 选择第一项&#xff0c;在上图界面按“e”键进行编辑修改。 3. 在以 linux 开头这行的行末&#xff0c;添加“init/bin/bas…
阅读更多...
机遇与挑战并存 券商国际化战略布局关键要素

机遇与挑战并存 券商国际化战略布局关键要素

引言 在全球金融市场不断开放和技术快速进步的背景下&#xff0c;越来越多中资背景的券商开始寻求国际化发展。富途和老虎证券作为先行者&#xff0c;展示了中国券商在出海过程中的巨大潜力和成功经验。鉴于中资在海外设立券商的成功&#xff0c;不少公司也有意愿在海外设立券…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023