wallet/src/pages/trade/index.vue

<template>
  <view class="home">
    <view class="content">
      <Header @update:address="handleAddressUpdate"></Header>
      <view class="home-img">
        <image src="@/static/image/trade/jinsai-icon.png" mode="widthFix" />
      </view>
      <view class="home-btn-box">
        <view class="trade-num">奖池数量</view>
        <view class="image-num">
          <image src="@/static/image/trade/title-bg.png" mode="scaleToFill" />
        </view>
      </view>
      <view class="home-code">
        <view class="trade-border-box"> STT {{ (Number(gameList[2]?.prev_bonus) || 0).toFixed(6) }}</view>
        <view class="trade-border-num"
          >≈￥{{ ((Number(gameList[2]?.prev_bonus) || 0) * 7.2).toFixed(2) }}</view
        >
      </view>
      <view class="trade-img-box">
        <image src="@/static/image/trade/money-box.png" mode="aspectFit" />
      </view>
      <view class="card-item">
        <view class="trade-process" :class="bgClass">
          <view
            :class="
              gameCheck == index
                ? 'trde-process-item-active'
                : 'trde-process-item'
            "
            v-for="(item, index) in gameList"
            :key="index"
            @click="selectGame(index, item)"
          >
            <view class="trade-game-name">{{ item?.title || '暂无活跃'}}</view>
            <view class="trade-game-time" v-if="item"
              >{{ dayjs(item?.date).format("MM/DD") }}-{{
                dayjs(item?.end_date).format("MM/DD")
              }}</view
            >
          </view>
        </view>
        <view class="trade-time-box" v-if="gameDetail">
          <view class="time-title">
            距离 <text>{{ gameDetail.title }} AT榜{{gameCheck == '2'?'开始':'结束'}} </text>还有
          </view>
          <up-count-down
            :time="
              dayjs(gameDetail.end_date).valueOf() - dayjs(new Date()).valueOf()
            "
            format="DD:HH:mm:ss"
            autoStart
            millisecond
            @change="onChange"
          >
            <view class="time-box-index">
              <view class="time__item"
                ><view class="time-box">{{ timeData.days }}</view> 天</view
              >
              <view class="time__item">
                <view class="time-box">{{
                  timeData.hours > 10 ? timeData.hours : "0" + timeData.hours
                }}</view>
                时</view
              >
              <view class="time__item"
                ><view class="time-box">
                  {{ timeData.minutes }}
                </view>
                分</view
              >
              <view class="time__item"
                ><view class="time-box">{{ timeData.seconds }}</view
                >秒</view
              >
            </view>
          </up-count-down>
          <view
            class="start-btn" v-if="!received"
            @click="changeSign"
            :style="{ color: gameCheck == 2 || gameDetail.is_enroll? '#fff' : '' }">{{ gameCheck == 2 && !gameDetail.is_enroll ? "报名" : (gameDetail.is_enroll ? "已报名" : "未报名") }}</view
          >
          <view class="received-box" v-else>
            <view style="margin-right: 5px;">{{ (Number(receivedItem.prize) || 0).toFixed(7) }}</view>
            <view class="game-item-btn" @click="awardFun(receivedItem)">
              {{receivedItem.is_receive?'已领取':'领取'}}
            </view>
          </view>
         
          <view class="num-txt" v-if="gameCheck != 2"
            >奖池数量：<text>STT{{ (Number(gameDetail.bonus) || 0).toFixed(6) }}</text>
          </view>
          <view class="num-txt-small" v-if="gameCheck != 2"
            >≈￥{{ ((Number(gameDetail.bonus) || 0) * 7.2).toFixed(2) }}</view
          >
        </view>
      </view>
      <view class="game-play-name">活跃名次</view>
      <scroll-view style="height: 600px;" :scroll-y="true" refresher-enabled="true" refresher-background="#rgba(0,0,0,0)"
				:refresher-triggered="triggered" @refresherrefresh="onRefresh">
        <view class="game-list">
          <view class="game-list-item" v-for="(item, index) in gameRankList" :key="index">
            <view class="game-item-left">
              <view class="game-order-index">
                <image
                  src="@/static/image/trade/one.png"
                  v-if="index == 0"
                  mode="scaleToFill"
                />
                <image
                  src="@/static/image/trade/two.png"
                  v-if="index == 1"
                  mode="scaleToFill"
                />
                <image
                  src="@/static/image/trade/three.png"
                  v-if="index == 2"
                  mode="scaleToFill"
                />
                <text v-if="index != 0 && index != 1 && index != 2">{{
                  index + 1
                }}</text>
              </view>
              <view class="game-order-num">
                <view class="game-num-txt">
                  <view>{{`${item.address.slice(0, 4)}...${item.address.slice(-4)}` }}</view>
                  <view class="game-num-num">{{ gameDetail?.title }}</view>
                </view>
                <view class="game-num-txt" v-if="item.is_self && item.is_prize && gameCheck == 0">
                  <view class="game-item-btn" @click="awardFun(item)">{{item.is_receive?'已领取':'领取'}}</view>
                </view>
                <view class="game-num-txt" v-else>
                  <view>排名奖励</view>
                  <view class="game-num-num">{{ (Number(item.prize) || 0).toFixed(7) }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="fix-box">
      <view class="fix-item" @click="openGamePopup(1)">活跃规则</view>
      <!-- <view class="fix-item"  @click="openGamePopup(2)">活跃名次</view> -->
    </view>
    <!-- 规则和名次 -->
    <up-popup
      :show="showGameMsg"
      :round="10"
      mode="center"
      :closeOnClickOverlay="true"
      @close="showGameMsg = false"
    >
      <view class="show-game-msg">
        <image
          class="close-img"
          src="@/static/image/home/alert-pay-close.png"
          mode="scaleToFill"
          @click="showGameMsg = false"
        />
        <!-- <view class="show-game-title" v-if="showType==2">
          <text>{{ gameDetail.title }}活跃</text>AT榜消息
        </view> -->
        <view class="show-game-title" v-if="showType==1">
          AT榜规则
        </view>
        <!-- 名次 -->
        <!-- <view class="show-game-content" v-if="showType==2">
          <view class="game-msg">1:活跃开始时间：{{ gameDetail.date }} 00:00:00</view>
          <view class="game-msg"
            >2:活跃结束时间：{{ gameDetail.end_date }} 23:59:59</view
          >
          <view class="game-msg"
            >3:参与场次：<text>0场；</text>输：<text>0局；</text>赢：<text
              >0局；</text
            ></view
          >
          <view class="game-msg">4:排名奖励：<text>0局</text></view>
          <view class="desc-title">注意：</view>
          <view class="dest-item">①: 当期活跃信息可能存在延迟,仅供参考;</view>
          <view class="dest-item"
            >②：如当期活跃奖励未在有效期内领取,将视为放弃；</view
          >
          <view class="dest-item"
            >③：赢局次数小于等于0的地址参与排名，但没有奖励分配；</view
          >
          <view class="dest-item" style="color: red"
            >④：每场活跃中相同地址频繁对战,场次将不作为有效局数；
          </view>
          <view class="dest-item" style="color: red"
            >⑤：对于恶意刷单地址,平台将永久封禁账号；</view
          >
        </view> -->
        <!-- 规则 -->
        <view class="show-game-content" v-if="showType==1">
          <view class="game-msg">1: 活跃报名截止时间:每期活跃开始前</view>
          <view class="game-msg"
            >2: 活跃奖励结算时间:每期活跃结束后(约需要1-30分钟)</view
          >
          <view class="game-msg"
            >3: 活跃奖励领取时间:每期活跃结束结算完成后</view
          >
          <view class="game-msg"
            >4:活跃奖励失效时间:当期活跃结束后,下期活跃结束前</view
          >
          <view class="game-msg"
            >5:活跃奖励规则: 当期奖池金额</view
          >
          <view class="dest-item" style="color: red;font-size: 24rpx;" v-for="(item,i) in gameDetail?.rules" :key="i">
            <text>{{ i == 0?'①':i == 1?'②':'③' }}</text>:{{item.rule}}
          </view>
          <!-- <view class="desc-title">注意：</view>
          <view class="dest-item">①: 如当期活跃奖励未在有效期内领取，将视为放弃；</view>
          <view class="dest-item" 
            >②：赢局次数小于等于0的地址参与排名，但没有奖励分配；</view
          >
          <view class="dest-item" style="color:red;"
            >③：每场活跃中相同地址频繁对战,场次将不作为有效局数;</view
          >
          <view class="dest-item" style="color:red;"
            >④：对于恶意刷单地址,平台将永久封禁账号；</view
          > -->
        </view>
        <view class="show-game-bottom">
          <view class="show-game-btn" @click="showGameMsg = false">关闭</view>
        </view>
      </view>
    </up-popup>
    <!-- 报名 -->
    <up-popup
      :show="showGameBm"
      :round="10"
      mode="center"
      :closeOnClickOverlay="true"
      @close="showGameBm = false"
    >
      <view class="show-game-msg" style="height: 40vh">
        <image
          class="close-img"
          src="@/static/image/home/alert-pay-close.png"
          mode="scaleToFill"
          @click="showGameBm = false"
        />
        <view class="show-game-title"> <text>活跃</text>报名 </view>
        <view class="show-game-content">
          <view class="desc-title" style="color: red">报名方式①：</view>
          <view class="game-msg" style="font-weight: 400"
            >消耗 <text style="color: #d4ac27">{{entry_fee}} STT</text> 等值 WGT：</view
          >
          <view class="game-msg"
            >≈<text>{{wgt_price}}</text>WGT<text
              style="color: #d4ac27; font-size: 20rpx"
              >(钱包扣除)</text
            ></view
          >
          <view class="dest-item" style="color: #aaa">(WGT钱包余额{{ (Number(WGTbalance) || 0).toFixed(6) }})</view>
          <view class="desc-title" style="color: red">报名方式②：</view>
          <view class="game-msg"
            >消耗{{entry_fee}} STT
            <text style="color: #d4ac27; font-size: 20rpx"
              >(钱包扣除)</text
            ></view
          >
          <view class="dest-item" style="color: #aaa">(STT钱包余额{{ (Number(STTbalance) || 0).toFixed(6) }})</view>
        </view>
        <view class="show-game-bottom">
          <view class="show-game-btn-wgt" @click="changeWGT">WGT报名</view>
          <view class="show-game-btn-stt" @click="changeSTT">STT报名</view>
        </view>
      </view>
    </up-popup>
  </view>
</template>
  
  <script setup>
import { ref, onMounted,computed, reactive } from "vue";
import Header from "@/components/Header";
import { sendSingleReward,WGTForToken,STTForToken,getBalance } from "@/utils/web.js";
import { matchList, matchRank, matchInfo,verifyEnroll,matchEnroll,userPrize,claimPrize,sysSetting,enrollGameMatch,receiveGamePrize } from "@/api/game";
import { getWalletInfo,AES_CBC_ENCRYPT,cryptoDecode } from "@/utils/utils.js";
import dayjs from "dayjs";
const timeData = ref({});
const onChange = (e) => {
  timeData.value = e;
};
const walletAddress = ref('');
const gameList = ref([]);
const gameRankList = ref([]);
const gameDetail = ref({});
const gameCheck = ref(1);//选中tab
const showGameBm = ref(false);
const WGTbalance = ref(0);
const STTbalance = ref(0);
const entry_fee = ref(0);
const wgt_price = ref(0);
const triggered = ref(false);
const received = ref(false);
const receivedItem = ref({});
const GasRate = ref(1);
const privateKey = ref('');
// const privateKey = ref("4d8d38c6433c9552a11181b64a234814cd83f5b0d2c7306545ee097da9c0e4b2");//H5

const bgClass = computed(() => {
  if (gameCheck.value === 0) return 'bg1';
  if (gameCheck.value === 1) return 'bg2';
  return 'bg3';
});
const handleAddressUpdate = async (addr) => {
  const {privateKey} = await getWalletInfo();
  privateKey.value = privateKey;
  walletAddress.value = addr;
  getSysSetting();
  getGameMatchList();
  getnum(privateKey.value);
};
// 获取gas倍数
const getSysSetting = async() => {
  let res = await sysSetting({category:'GasRate'});
  if(res.data){
    GasRate.value = res.data.GasRate
  }
}
sysSetting
// 获取游戏赛事列表(三个tab)
const getGameMatchList = async (type = true) => {
  let params = {
    dapp_id: 15,
    address:walletAddress.value
  };
  let res = await matchList(params);
  if (res.status == 200) {
    gameList.value = res.data;
    if(type){
      gameDetail.value = res.data[1];
      getGameRank(res.data[1].id);
    }else{
      gameDetail.value = res.data[2];
    }
  }
};
// 查询游戏赛事排名
const getGameRank = async (id) => {
  received.value = false;
  let params = {
    dapp_id: 15,
    match_id:id,
    address:walletAddress.value
  };
  let res = await matchRank(params);
  if (res.status == 200) {
    gameRankList.value = res.data;
    gameRankList.value.forEach(item => {
      if(item.is_self && item.is_prize && gameCheck.value == 0){
        received.value = true;
        receivedItem.value = item;
      }
    });
  }
};
// 切换tab
const selectGame = (value, item) => {
  gameCheck.value = value;
  gameDetail.value = item;
  getGameRank(item.id);
};
// 游戏规则弹出框
const showGameMsg = ref(false);
const showType=ref(0);
const openGamePopup = (value) => {
  showGameMsg.value = true;
  showType.value=value;
};
// 获取余额
const getnum = async (privateKey) =>{
  try {
    WGTbalance.value = await getBalance(privateKey,'wgt');
    STTbalance.value = await getBalance(privateKey,'stt');
  }catch(error){
    console.log(error)
  }
}
//校验报名
const changeSign = async () =>{
  if (gameCheck.value != 2 || gameDetail.value?.is_enroll) return;
  let res = await verifyEnroll({dapp_id:15,match_id:gameDetail.value?.id,address:walletAddress.value});
  if (res.status == 200) {
    entry_fee.value = Number(res.data.entry_fee).toFixed(2);
    wgt_price.value = Number(res.data.format?.wgt_price).toFixed(4);
    showGameBm.value = true;
  }
}
// 报名
// const getMatchEnroll = async (hash) =>{
//   let res = await matchEnroll({
//     dapp_id:15,
//     match_id:gameList.value[gameCheck.value]?.id,
//     address:walletAddress.value,
//     entry_hash:hash
//   });
//   if (res.status == 200) {
//     uni.hideLoading()
//     uni.showToast({
//       title: '报名成功',
//       icon: 'none',
//       duration: 1000
//     })
//     setTimeout(() => {
//       getGameMatchList(false);
//     }, 1500);
//   }else{
//     uni.hideLoading()
//   }
// }

const changeWGT = async () => {
  if(WGTbalance.value < wgt_price.value){
    uni.showToast({
      title: '余额不足',
      icon: 'none',
      duration: 5000
    });
    return;
  }
  // await handleTokenSignUp(WGTForToken, wgt_price.value);
  await handleTokenSignUp('wgt', wgt_price.value);
};

const changeSTT = async () => {
  if(STTbalance.value < entry_fee.value){
    uni.showToast({
      title: '余额不足',
      icon: 'none',
      duration: 5000
    });
    return;
  }
  // await handleTokenSignUp(STTForToken, entry_fee.value);
  await handleTokenSignUp('stt', entry_fee.value);
};

const handleTokenSignUp = async (signUpFn, price) => {
  showGameBm.value = false;
  uni.showLoading({
    title: '报名中...',
    mask: true
  });
  try {
    // 加密
    let {ciphertext, iv} = await AES_CBC_ENCRYPT(privateKey.value) || {};
    if(!ciphertext || !iv){
      return;
    }
    // console.log(signUpFn, ciphertext, iv);
    let res = await enrollGameMatch({
      dapp_id:15,match_id:gameDetail.value?.id,address:walletAddress.value,
      key: ciphertext, _m: iv, type: signUpFn
    });
    // console.log(res);
    if (res.status == 200) {
      uni.hideLoading()
      uni.showToast({
        title: '报名成功',
        icon: 'none',
        duration: 1000
      })
      setTimeout(() => {
        getGameMatchList(false);
      }, 1000);
    }else{
      uni.hideLoading()
      uni.showToast({
        title: res.message || "领取失败",
        icon: 'none',
        duration: 5000
      });
    }
    // const result = await signUpFn(privateKey.value, price,GasRate.value);
    // if (result.status === "success") {
    //   await getMatchEnroll(result.hash);
    // } else {
    //   uni.hideLoading();
    //   uni.showToast({
    //     title: result.message || "报名失败",
    //     icon: 'none',
    //     duration: 5000
    //   });
    // }
  } catch (error) {
    console.log(error)
    uni.hideLoading();
    uni.showToast({
      title: error.message || "报名失败",
      icon: 'none',
      duration: 5000
    });
  }
};

//查询用户奖金信息
const awardFun = async (item) => {
  if(item.is_receive) return;
  let res = await userPrize({dapp_id:15,match_id:gameDetail.value?.id,address:walletAddress.value});
  if (res.status == 200) {
    if(!res.data.prize_money || res.data.prize_money == 0){
      uni.showToast({
        title: '正在结算中！',
        icon: 'none',
        duration: 1000
      })
      return;
    };
    // getreportlogger({params:res.data,name:'AT榜',type:'领取奖金'});
    getsendSingleReward(res.data.prize_money)
  }
};
// 领取用户奖金
// const getClaimPrize = async (hash) =>{
//   let res = await claimPrize({
//     dapp_id:15,
//     match_id:gameDetail.value?.id,
//     address:walletAddress.value,
//     receive_hash:hash
//   });
//   if (res.status == 200) {
//     uni.showToast({
//       title: '领取成功',
//       icon: 'none',
//       duration: 1000
//     })
//     setTimeout(() => {
//       getGameRank(gameDetail.value?.id)
//     }, 500);
//   }
// }

const getsendSingleReward = async (prize_money) =>{
  uni.showLoading({
    title: '领取中...',
    mask: true
  });
  try {
    // 加密
    let {ciphertext, iv} = await AES_CBC_ENCRYPT(privateKey.value) || {};
    if(!ciphertext || !iv){
      return;
    }
    // console.log(ciphertext, iv);
    let res = await receiveGamePrize({
      dapp_id:15,match_id:gameDetail.value?.id,address:walletAddress.value,
      key: ciphertext, _m: iv,
    });
    console.log(res);
    if (res.status == 200) {
      uni.hideLoading()
      uni.showToast({
        title: '领取成功',
        icon: 'none',
        duration: 1000
      })
      setTimeout(() => {
        getGameRank(gameDetail.value?.id)
      }, 1000);
    } else {
      uni.hideLoading()
      uni.showToast({
        title: res.message || "领取失败",
        icon: 'none',
        duration: 5000
      });
    }
    // const result = await sendSingleReward(privateKey.value,prize_money,GasRate.value);
    // if (result.status === "success") {
    //   await getClaimPrize(result.hash);
    // }else{
    //   uni.showToast({
    //     title: result.message || "领取失败",
    //     icon: 'none',
    //     duration: 5000
    //   });
    // }
  } catch (error) {
    uni.showToast({
      title: error.message || "领取失败",
      icon: 'none',
      duration: 5000
    });
  }
}
// 下拉刷新
const onRefresh = () => {
  if (triggered.value) {
    return
  }
  triggered.value = true;
  setTimeout(() => {
    getGameRank(gameDetail.value?.id);
    triggered.value = false;
  }, 1000)
}
</script>
  
  <style lang="scss" scoped>
  ::v-deep .uni-scroll-view-refresh-inner{
    background-color: transparent !important;
  }
  .card-item{
    width: 100%;
  }
.home {
  height: 1100px;
  // position: absolute;
  // top: 0;
  // bottom: 0;
  // right: 0;
  // left: 0;
  // overflow-y: auto;
  .fix-box {
    position: fixed;
    right: 0;
    z-index: 99;
    top: 258rpx;
    .fix-item {
      border-radius: 40rpx 0 0 40rpx;
      background-color: #734210;
      color: #fff;
      text-align: center;
      padding: 6rpx 24rpx;
      box-sizing: border-box;
      font-size: 26rpx;
      margin-bottom: 12rpx;
    }
  }
}
.content {
  height: 1100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  // min-height: 100%;
  padding: 32rpx;
  padding-top: 168rpx;
  box-sizing: border-box;
  background-image: url("@/static/image/home/page-bg.jpg");
  background-size: 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  .home-img {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 154rpx;
      height: 154rpx;
    }
  }
  .home-btn-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
    .trade-num {
      font-size: 32rpx;
      text-align: center;
      color: #d4ac27;
      background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#fffbe1),
        to(#d4ac27)
      );
      background: linear-gradient(180deg, #fffbe1 0, #d4ac27);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-weight: 700;
    }
    .image-num {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      image {
        width: 208rpx;
        height: 40rpx;
      }
    }
  }
  .home-code {
    margin: 24rpx 0;
    width: 100%;
    .trade-border-box {
      width: 520rpx;
      height: 100rpx;
      margin: auto;
      background-image: url("@/static/image/trade/border-jinsai.png");
      background-size: 100% 100%;
      background-position: center center;
      background-repeat: no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 36rpx;
      color: #fff;
    }
    .trade-border-num {
      text-align: center;
      color: #fff;
      font-size: 32rpx;
    }
  }
  .trade-img-box {
    width: 100%;
    height: 384rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .bg1{
    background-image: url("@/static/image/trade/bg1.png");
  }
  .bg2{
    background-image: url("@/static/image/trade/bg2.png");
  }
  .bg3{
    background-image: url("@/static/image/trade/bg3.png");
  }
  .trade-process {
    height: 131rpx;
    width: 100%;
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    justify-content: space-between;
    align-items: center;

    // .trde-process-item {
    //   width: 100%;
    //   height: 100%;
    //   color: #4C3F2E;
    //   display: flex;
    //   flex-direction: column;
    //   justify-content: center;
    //   align-items: center;
    //   text-align: center;
    //   .trade-game-name {
    //     font-size: 28rpx;
    //     font-weight: 600;
    //   }
    //   .trade-game-time {
    //     font-size: 24rpx;
    //     margin-top: 12rpx;
    //   }
    // }
    .trde-process-item {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      text-align: center;
      justify-content: center;
      align-items: center;
      color: #9c9c9c;
      overflow: hidden;
      padding-left: 36rpx;
      box-sizing: border-box;
      .trade-game-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
        font-size: 28rpx;
        font-weight: 600;
      }
      .trade-game-time {
        font-size: 24rpx;
        margin-top: 12rpx;
      }
    }
    .trde-process-item-active {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      align-items: center;
      color: #493D2A;
      overflow: hidden;
      padding-left: 36rpx;
      box-sizing: border-box;
      .trade-game-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
        font-size: 28rpx;
        font-weight: 600;
      }
      .trade-game-time {
        font-size: 24rpx;
        margin-top: 12rpx;
      }
    }
  }
  .trade-time-box {
    margin: 24rpx 0;
    font-size: 28rpx;
    color: #a29481;
    background: #53473a;
    // background: #6E573A;
    border-radius: 30rpx;
    width: 100%;
    padding: 24rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    .time-title {
      text {
        color: rgb(255, 214, 0);
        font-weight: 600;
      }
    }
    .time-box-index {
      margin-top: 13rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      .time__item {
        display: flex;
        justify-content: center;
        align-items: center;
        .time-box {
          width: 70rpx;
          border-radius: 4rpx;
          height: 56rpx;
          background-color: #6b5d4b;
          color: #f3cf9b;
          margin: 0 10rpx;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
    .start-btn {
      height: 84rpx;
      width: 190rpx;
      background-image: url("@/static/image/trade/weibaoming-bg.png");
      background-position: center center;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 12rpx 0;
    }
    .num-txt {
      text {
        color: rgb(255, 214, 0);
        font-weight: 600;
      }
    }
    .num-txt-small {
      color: #fff;
      font-size: 22rpx;
    }
  }
  .game-play-name {
    width: 342rpx;
    height: 64rpx;
    margin-top: 24rpx;
    background-image: url("@/static/image/trade/trade-title-bg.png");
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #f5b65f;
    font-size: 26rpx;
    font-weight: 700;
  }
  .game-list {
    width: 100%;
    // height: 600px;
    // overflow: auto;
    padding-bottom: 50px;
    .game-list-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24rpx 0;
      box-sizing: border-box;
      border-bottom: 2rpx solid #3b3630;
      .game-item-left {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        .game-order-index {
          flex-shrink: 0;
          width: 64rpx;
          height: 64rpx;
          margin-right: 24rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 36rpx;
          color: #f2ce9a;
          font-weight: 700;
          image {
            width: 100%;
            height: 100%;
          }
        }
        .game-order-num {
          flex: 1;
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .game-num-txt {
            font-size: 28rpx;
            color: #f2ce9a;
            font-weight: 700;
          }
          .game-num-num {
            margin-top: 10rpx;
            font-size: 28rpx;
            color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
      }
    }
  }
}
.game-item-btn {
    width: 178rpx;
    height: 54rpx;
    background: url("@/static/image/trade/lingqu-btn-bg.png") 50% no-repeat;
    background-size: 100% 100%;
    display: block;
    color: #f7dbb1;
    font-size: 28rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 12rpx 0;
  }
  .received-box{
    display: flex;
    align-items: center;
  }
.show-game-msg {
  background: #000;
  border-radius: 25rpx;
  padding: 30rpx;
  box-sizing: border-box;
  width: 80vw;
  height: 45vh;
  display: flex;
  flex-direction: column;
  position: relative;
  .close-img {
    width: 50rpx;
    height: 50rpx;
    position: absolute;
    right: 0;
    top: 0;
  }
  .show-game-title {
    flex-shrink: 0;
    font-size: 32rpx;
    font-weight: 700;
    margin-bottom: 35rpx;
    text-align: center;
    color: #fff;
    text {
      color: rgb(255, 214, 0);
      margin-right: 10rpx;
    }
  }
  .show-game-content {
    padding-bottom: 24rpx;
    box-sizing: border-box;
    overflow-y: auto;
    flex: 1;
    font-size: 28rpx;
    font-weight: 700;
    color: #fff;
    .game-msg {
      color: #f1dc00;
      font-size: 26rpx;
      margin-bottom: 6rpx;
      text {
        color: #fff;
        font-weight: 600;
      }
    }
    .desc-title {
      padding: 12rpx 0;
      box-sizing: border-box;
    }
    .dest-item {
      font-weight: 400;
      margin-bottom: 6rpx;
    }
  }
  .show-game-bottom {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24rpx;
    .show-game-btn {
      width: 100%;
      background: linear-gradient(90deg, rgba(0, 179, 170, 0.7) 0, #00b3aa);
      color: #fff;
      height: 80rpx;
      border-radius: 8rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .show-game-btn-wgt {
      width: 100%;
      background: linear-gradient(90deg, #ef602c83 0, #ef612c);
      color: #fff;
      height: 80rpx;
      border-radius: 8rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .show-game-btn-stt {
      width: 100%;
      background: linear-gradient(90deg, #0190c470 0, #0191c4);
      color: #fff;
      height: 80rpx;
      border-radius: 8rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      // EF612C
    }
  }
}
::v-deep .u-popup__content {
  background: none !important;
}
</style>