jdt-yaotouzi/src/pages/index/index.vue

<template>
  <view class="index">
    <!--  公告  -->
    <view class="subColor tips"></view>
    <scroll-view style="height: 100vh" scroll-y>
      <!--  用户信息  -->
      <view class="subColor userInfo">
        <view class="left">
          <image :src="userInfo.avatarUrl"></image>
          <view class="userText">
            <view class="userName">{{ userInfo.nickName || "用户" }}</view>
            <view class="userScore">积分: {{ userInfo.integral || 0 }}</view>
          </view>
        </view>
        <view class="right">
          <view class="icon"></view>
          <view class="bean">{{ userInfo.pulse || 0 }}</view>
        </view>
      </view>
      <!--  游戏信息  -->
      <view class="subColor gameInfo">
        <view class="left">
          <image src="../../static/tx.png"></image>
          <view class="game_box">
            <view class="gameName">{{ kJData[0]?.Periods || 0 }}期开奖</view>
            <view class="lottery">
              <text class="text">{{ kJData[0]?.Start || 0 }}</text>
              <text class="text">{{ kJData[0]?.End || 0 }}</text>
            </view>
          </view>
        </view>
        <view class="center">
          <view>剩余{{ time }}s开奖</view>
        </view>
        <view class="right">
          <view class="btn" @click="utils.vibrateShort(() => toPage(1))"
            >开奖记录
          </view>
          <view class="btn mt-15" @click="utils.vibrateShort(() => toPage(2))">
            投注记录
          </view>
        </view>
      </view>
      <!--  选项区  -->
      <view class="opt">
        <view
          class="subColor item"
          :class="{ flicker: item.flicker }"
          v-for="item in odds"
          :key="item.id"
          @click.stop="utils.vibrateShort(() => addNum(item))"
        >
          <view class="name">{{ item.name }}</view>
          <view class="odd">赢{{ item.odds }}倍</view>
          <view class="mask" v-if="item.status">
            <view class="text">{{ item.numStr }}</view>
          </view>
          <view
            class="close"
            v-if="item.status"
            @click.stop="utils.vibrateShort(() => clearOneBet(item))"
          >
            x
          </view>
        </view>
      </view>
      <view class="opt1" v-if="odds1.length > 0">
        <view class="optt">
          <view
            class="subColor item"
            :class="{ flicker: odds1[0].flicker }"
            @click.stop="utils.vibrateShort(() => addNum(odds1[0]))"
          >
            <view class="name">{{ odds1[0].name }}</view>
            <view class="odd">赢{{ odds1[0].odds }}倍</view>
            <view class="mask" v-if="odds1[0].status">
              <view class="text">{{ odds1[0].numStr }}</view>
            </view>
            <view
              class="close"
              v-if="odds1[0].status"
              @click.stop="utils.vibrateShort(() => clearOneBet(odds1[0]))"
            >
              x
            </view>
          </view>
          <view
            class="subColor item"
            :class="{ flicker: odds1[1].flicker }"
            @click.stop="utils.vibrateShort(() => addNum(odds1[1]))"
          >
            <view class="name">{{ odds1[1].name }}</view>
            <view class="odd">赢{{ odds1[1].odds }}倍</view>
            <view class="mask" v-if="odds1[1].status">
              <view class="text">{{ odds1[1].numStr }}</view>
            </view>
            <view
              class="close"
              v-if="odds1[1].status"
              @click.stop="utils.vibrateShort(() => clearOneBet(odds1[1]))"
            >
              x
            </view>
          </view>
        </view>
        <view class="base">
          <view class="qz">
            <view :class="{ activeQz: isExpanding }">
              {{ qzTitle }}
            </view>
          </view>
          <view class="expanding-div" v-if="isShow">
            {{ nowKJInfo.Start }} - {{ nowKJInfo.End }}
          </view>
        </view>
        <view class="optt">
          <view
            class="subColor item"
            style="height: 100%"
            :class="{ flicker: odds1[2].flicker }"
            @click.stop="utils.vibrateShort(() => addNum(odds1[2]))"
          >
            <view class="name">{{ odds1[2].name }}</view>
            <view class="odd">赢{{ odds1[2].odds }}倍</view>
            <view class="mask" v-if="odds1[2].status">
              <!-- <view class="text">{{ odds1[2].markNum }}</view> -->
              <view class="text">{{ odds1[2].numStr }}</view>
            </view>
            <view
              class="close"
              v-if="odds1[2].status"
              @click.stop="utils.vibrateShort(() => clearOneBet(odds1[2]))"
            >
              x
            </view>
          </view>
        </view>
      </view>
      <view class="opt">
        <view
          class="subColor item item1"
          :class="{ flicker: item.flicker }"
          v-for="item in odds2"
          :key="item.id"
          @click.stop="utils.vibrateShort(() => addNum(item))"
        >
          <view class="name">{{ item.name }}</view>
          <view class="odd">赢{{ item.odds }}倍</view>
          <view class="mask" v-if="item.status">
            <!-- <view class="text">{{ item.markNum }}</view> -->
            <view class="text">{{ item.numStr }}</view>
          </view>
          <view
            class="close"
            v-if="item.status"
            @click.stop="utils.vibrateShort(() => clearOneBet(item))"
          >
            x
          </view>
        </view>
      </view>
      <scroll-view style="height: 25%" scroll-y>
        <view
          class="card subColor"
          v-for="(item, index) in kjList"
          :key="index"
        >
          <view>
            <view>
              第{{ item.Periods }}期开奖:
              <text style="color: red">{{ item.Start }} , {{ item.End }}</text>
              <text
                v-for="(num, i) in item.Name"
                :key="i"
                :style="{
                  color: numColor(num),
                }"
              >
                , {{ num }}
              </text>
            </view>
          </view>
        </view>
      </scroll-view>
    </scroll-view>
    <!--  底部操作栏  -->
    <view class="subColor bottomBar">
      <view class="btn1" @click="utils.vibrateShort(() => clearBet(true))"
        >重置
      </view>
      <view class="btn2" @click="utils.vibrateShort(() => changeOdd())"
        >X{{ oddVal }}
      </view>
      <view class="btn3" @click="utils.vibrateShort(() => verifyBet())"
        >投注
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onBeforeUnmount } from "vue";
import Taro from "@tarojs/taro";
import { app } from "@/config";
import { getGameOption, getKaiJiangList, getJfDz } from "@/api";
import utils from "@/utils";

const ws = ref(null);

// 是否显示开奖动画
const isShow = ref(false);

// 是否开启文字放大动画
const isExpanding = ref(false);

const odds = ref([]);

const odds1 = ref([]);

const odds2 = ref([]);

const qzTitle = ref("请投注");

const time = ref(0);

const nowKJInfo = ref({});

const userInfo = ref({});

const zjObj = ref([]);

const iMsgNum = ref(0);

const numColor = (num) => {
  switch (num) {
    case "大":
      return "red";
    case "小":
      return "green";
    // case '单':
    //   return 'orange'
    // case '双':
    //   return 'blue'
    case "和":
      return "purple";
    default:
      return "black";
  }
};

Taro.useDidShow(() => {
  startMusic(
    "https://files.wanzhuanyongcheng.com/file/music/yaotouzi/bg.MP3",
    true
  );
  initWs();
  initData();
});

Taro.useDidHide(() => {
  ws.value?.close();
});

onBeforeUnmount(() => {
  ws.value?.close();
});

const initData = () => {
  qzTitle.value = "请投注";
  getOddList();
  getKJList();
  getUserInfo();
};

const arr = ["2+2", "3+3", "4+4", "5+5", "6+6"];
// const arr1 = ["大", "小", "单", "双"];
// const arr2 = ["和", "3", "4", "5", "6", "8", "9", "10", "11"];
const arr1 = ["大", "小", "和"];
const arr2 = ["3", "4", "5", "6", "8", "9", "10", "11"];

// 投注列表
const getOddList = async () => {
  const res = await getGameOption();
  odds.value = [];
  odds1.value = [];
  odds2.value = [];
  res.data.data.forEach((item) => {
    const { name, ID, odds: odd, max } = item;
    const newItem = {
      id: ID,
      name: name,
      odds: odd,
      max: max,
      markNum: 0,
      numStr: 0,
      status: false,
      flicker: false,
    };
    if (Taro.getStorageSync("odds")) {
      odds.value = Taro.getStorageSync("odds");
      odds1.value = Taro.getStorageSync("odds1");
      odds2.value = Taro.getStorageSync("odds2");
    } else {
      if (arr1.includes(name)) {
        odds1.value.push(newItem);
      } else if (arr.includes(name)) {
        odds.value.push(newItem);
      } else if (arr2.includes(name)) {
        odds2.value.push(newItem);
      }
    }
  });
  // const el = odds2.value.splice(0, 1)[0];
  // odds2.value.splice(4, 0, el);
  // console.log(odds1.value)
};

// 获取个人信息
const getUserInfo = async () => {
  const res = await getJfDz(Taro.getStorageSync("uid"));
  userInfo.value = res.data.data;
};

const kJData = ref([]);
const kjList = ref([]);

// 开奖列表
const getKJList = async () => {
  const res = await getKaiJiangList();
  kJData.value = res.data.data;
  kjList.value = res.data.data.map((item) => {
    return {
      ...item,
      Name: item.Name.split("-"),
    };
  });
};

// 初始化游戏
const initWs = () => {
  ws.value = new WebSocket(`${app.API_WS()}`);
  ws.value.onopen = async () => {
    Taro.showToast({
      title: "连接游戏服务器成功",
      mask: true,
      icon: "none",
    });
  };

  ws.value.onmessage = async (e) => {
    const res = JSON.parse(e.data);
    switch (res.code) {
      case 200:
        let num = Number(res.data);
        time.value = num;
        if (num === 5) {
          openDraw();
        }
        break;
      case 401:
        Taro.showToast({
          title: "未登录",
          mask: true,
          icon: "none",
        });
        break;
      case 403:
        Taro.showToast({
          title: "未能操作",
          mask: true,
          icon: "none",
        });
        break;
      case 400:
        Taro.showToast({
          title: "豆子不足",
          mask: true,
          icon: "none",
        });
        break;
      case 5:
        Taro.showToast({
          title: "投注成功",
          mask: true,
          icon: "none",
        });
        break;
      case 100:
        Taro.showToast({
          title: res.msg,
          icon: "none",
        });
        break;
      case 101:
        Taro.showToast({
          title: res.msg,
          icon: "none",
        });
        break;
      case 301:
        Taro.showToast({
          title: res.msg,
          icon: "none",
        });
        setTimeout(() => {
          Taro.navigateBack({
            delta: 1,
          });
        }, 2000);
      default:
        iMsgNum.value++;
        zjObj.value = res;
        break;
    }
  };
  ws.value.onerror = () => {
    console.log("连接游戏服务器失败");
    Taro.showToast({
      title: "连接游戏服务器失败",
      mask: true,
      icon: "none",
    });
  };
};

const isKj = ref(false);
// 开奖倒计时
const openDraw = () => {
  isExpanding.value = true;
  isKj.value = true;
  startMusic(
    "https://files.wanzhuanyongcheng.com/file/music/yaotouzi/djs.MP3",
    false
  );
  for (let i = 5; i > 0; i--) {
    setTimeout(() => {
      // i <= 3 && (fontColor.value = "red");
      qzTitle.value = i.toString();
    }, 1000 * (5 - i));
  }
  setTimeout(async () => {
    isExpanding.value = false;
    const res = await getKaiJiangList();
    nowKJInfo.value = res.data.data[0];
    qzTitle.value = `${nowKJInfo.value?.Periods || 0}期开奖`;
    playAminExpand();
    setTimeout(() => {
      startFlicker();
    }, 6000);
    isKj.value = false;
  }, 5000);
};

const oddVal = ref(10000);
const changeOdd = () => {
  switch (oddVal.value) {
    case 10:
      oddVal.value = 100;
      break;
    case 100:
      oddVal.value = 10000;
      break;
    case 10000:
      oddVal.value = 100000;
      break;
    case 100000:
      oddVal.value = 10;
      break;
  }
};

const clearBet = (val) => {
  clearItems(odds.value, val);
  clearItems(odds1.value, val);
  clearItems(odds2.value, val);
  savsData();
};

const clearItems = (items, isClear = false) => {
  items.forEach((item) => {
    item.markNum = 0;
    if (isClear) {
      item.numStr = 0;
      item.status = false;
    }
  });
};

const addNum = (item) => {
  if (isKj.value)
    return Taro.showToast({
      title: "正在开奖，不能下注",
      icon: "none",
    });
  if (item.name === "单" || item.name === "双")
    return Taro.showToast({
      title: `${item.name}不能下注`,
      icon: "none",
    });
  item.status = true;
  item.markNum += oddVal.value;
  item.numStr += oddVal.value;
  if (item.markNum >= item.max && item.numStr >= item.max) {
    item.markNum = item.max;
    item.numStr = item.max;
    Taro.showToast({
      title: `单注不能超过${item.max}`,
      icon: "none",
    });
  }
  savsData();
};

// 投注
const verifyBet = () => {
  if (isKj.value)
    return Taro.showToast({
      title: "正在开奖，不能下注",
      icon: "none",
    });

  let numCount = 0;

  odds.value.forEach((item) => {
    if (item.markNum > 0) {
      numCount += item.markNum;
    }
  });

  odds1.value.forEach((item) => {
    if (item.markNum > 0) {
      numCount += item.markNum;
    }
  });

  odds2.value.forEach((item) => {
    if (item.markNum > 0) {
      numCount += item.markNum;
    }
  });

  if (numCount === 0)
    return Taro.showToast({
      title: "请选择选项，再投注",
      icon: "none",
    });

  if (numCount > userInfo.value?.pulse)
    return Taro.showToast({
      title: "投注豆子不足",
      icon: "none",
    });

  const data = [];

  odds.value.forEach((item) => {
    if (item.markNum > 0) {
      data.push({
        bid: item.id,
        number: item.markNum,
        name: item.name,
      });
    }
  });

  odds1.value.forEach((item) => {
    if (item.markNum > 0) {
      data.push({
        bid: item.id,
        number: item.markNum,
        name: item.name,
      });
    }
  });

  odds2.value.forEach((item) => {
    if (item.markNum > 0) {
      data.push({
        bid: item.id,
        number: item.markNum,
        name: item.name,
      });
    }
  });

  ws.value?.send(
    JSON.stringify({
      type: 1,
      data: data,
    })
  );

  setTimeout(() => {
    getUserInfo();
  }, 1000);

  qzTitle.value = "已投注";
  clearBet(false);
  savsData();
};

// 前往开奖和投注记录
const toPage = (type) => {
  Taro.navigateTo({
    url: `/pages/records/index?type=${type}`,
  });
};

// 播放展开动画
const playAminExpand = () => {
  isShow.value = true;
  startMusic(
    "https://files.wanzhuanyongcheng.com/file/music/yaotouzi/kj.MP3",
    false
  );
  setTimeout(() => {
    isShow.value = false;
    initData();
  }, 10000);
};

// 开始闪烁
const startFlicker = () => {
  flickerItems(odds.value);
  flickerItems(odds1.value);
  flickerItems(odds2.value);
  zjObj.value = [];
};

const flickerItems = (items) => {
  delData();
  items.forEach((item) => {
    zjObj.value.forEach((item2) => {
      if (item.name === item2.name) {
        item.flicker = true;
        setTimeout(() => {
          item.flicker = false;
        }, 3000);
      }
    });
  });
  startMusic(
    "https://files.wanzhuanyongcheng.com/file/music/yaotouzi/bg.MP3",
    true
  );
};

const innerAudioContext = Taro.createInnerAudioContext();

const startMusic = (path, loop = false) => {
  // const innerAudioContext = Taro.createInnerAudioContext()
  innerAudioContext.autoplay = true;
  innerAudioContext.src = path;
  innerAudioContext.loop = loop;
  innerAudioContext.onPlay();
  innerAudioContext.onError();
};

const clearOneBet = (item) => {
  item.markNum = 0;
  item.numStr = 0;
  item.status = false;
  savsData();
};

const savsData = () => {
  Taro.setStorageSync("odds", odds.value);
  Taro.setStorageSync("odds1", odds1.value);
  Taro.setStorageSync("odds2", odds2.value);
};

const delData = () => {
  Taro.removeStorageSync("odds");
  Taro.removeStorageSync("odds1");
  Taro.removeStorageSync("odds2");
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>