1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/f-m-vue-lucky-draw

Клонировать/Скачать
README.md 5 КБ
Копировать Редактировать Web IDE Исходные данные Просмотреть построчно История
Отправлено 08.06.2025 15:29 459cbb2

vue-lucky-draw

Компонент для проведения розыгрышей на мобильных устройствах с использованием Vue.js. Данные о призах определяются через API.

Примеры экранов

Пример экрана

Розыгрыш

Так как результаты розыгрыша возвращаются с сервера, необходимо учитывать, что окончательное положение барабана должно соответствовать призу, возвращаемому сервером. Это означает, что нужно имитировать процесс розыгрыша (поэтому все розыгрыши — это обман, хехе). Сначала нужно написать CSS для каждого положения, а затем динамически переключаться между классами, чтобы создать эффект вращения. Понимание процесса упрощает реализацию.Кнопка в центре использует анимацию CSS3. В данном случае все призы расположены на одной картинке, но вы можете использовать 8 отдельных изображений, что потребует написания большего количества стилей.

// Розыгрыш
  handleStart() {
    if (this.isRuningLucky) {
      return Toast("Розыгрыш уже идет...");
    }
    if (isNaN(Number(this.initSpeed))) {
      return false;
    }
    this.speed = this.initSpeed;
    // Начать розыгрыш
    this.isRuningLucky = true;
    this.time = Date.now();
    this.drawAward();
    Toast("Начало розыгрыша");
  },
  drawAward() {
    // Запрос к API для получения данных о призе (предположим, что время запроса составляет 2 секунды)
    setTimeout(() => {
      this.award = {
        id: "4"
      };
      console.log("Результат розыгрыша:", this.award);
    }, 2000);
    this.move();
  },
  move() {
    let timer = setTimeout(() => {
      this.current++;
      if (this.current > 7) {
        this.current = 0;
      }
      // Если ID приза существует, начинаем замедлять вращение
      if (this.award.id && (Date.now() - this.time) / 1000 > 2) {
        console.log("Приз появился");
        this.speed += this.diff; // Замедление вращения
        
        // Если время вращения превышает 4 секунды и ID приза соответствует ID приза на текущей позиции, останавливаем вращение
        if (
          (Date.now() - this.time) / 1000 > 4 &&
          this.award.id == this.awards[this.current].id
        ) {
          clearTimeout(timer);
        }
      }
    }, this.speed);
  }
```          setTimeout(() => {
            this.isRuningLucky = false;
            // Здесь пишем действия после остановки (показываем окно с призом)
            Toast(
              "Вы выиграли приз " + this.awards[this.current].name + ", ID приза " + this.awards[this.current].id
            );
          }, 400);
          return;
        }
``````markdown
      // Если выигрышного приза нет, увеличиваем скорость вращения
      } else {
        if (this.speed >= 50) {
          this.speed -= this.diff; // Увеличение скорости
        }
      }

      this.move();
    }, this.speed);
  },

Постройка списка номеров

Используем ненумерованный список для циклического отображения списка номеров (обычно получаемых из интерфейса). Управляем анимацией, устанавливая таймер и свойства transition, чтобы добиться эффекта бесшовного соединения. Если изменяется стиль (высота li), необходимо регулировать время таймера (управлять временем отображения следующего элемента).

// Анимация списка победителей
  scroll() {
    this.animate = true;
    let timer = setTimeout(() => {
      this.list.push(this.list[0]);
      this.list.shift();
      this.animate = false;
    }, 500);
  }

Для клонирования проекта используйте npm i, npm run dev. Если вам понравился проект, не забудьте поставить звезду ^_^~

Опубликовать ( 0 )

Вы можете оставить комментарий после Вход в систему

1
https://api.gitlife.ru/oschina-mirror/f-m-vue-lucky-draw.git
git@api.gitlife.ru:oschina-mirror/f-m-vue-lucky-draw.git
oschina-mirror
f-m-vue-lucky-draw
f-m-vue-lucky-draw
master