首次提交

jhzh

2025-04-03 db12897dc68c68d40c557aa59ad78022e2b30ac2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<template>
  <view>
    <view class="time-box">
      <table class="w-max color-light fn-sm">
        <tr>
          <td class="p-l-md p-y-xs">{{$t('option.a8')}}：{{current_scene.begin_time_text}}</td>
          <td>{{current_scene.status_text}}</td>
          <td class="p-r-md">
            <view class="d-flex justify-end align-center">
              <van-icon name="clock-o m-r-xs" />
              <van-count-down
                @finish="$emit('change-venue')"
                :time="current_scene.lottery_time*1000"
              />
            </view>
          </td>
        </tr>
        <tr class="bg-panel-3">
          <td class="p-l-md p-y-xs">{{$t('option.a9')}}：{{next_scene.begin_time_text}}</td>
          <td>
            <van-tag plain type="success">{{next_scene.status_text}}</van-tag>
          </td>
          <td class="p-r-md">
            <view class="d-flex justify-end align-center">
              <van-icon name="clock-o m-r-xs" />
              <van-count-down @finish="$emit('change-venue')" :time="next_scene.lottery_time*1000" />
            </view>
          </td>
        </tr>
      </table>
    </view>
    <view class="bg-panel-3 p-b-lg">
      <view class="porgress">
        <view class="m-x-md p-y-xs">
          <view
                  class="h-14 bg-panel-4 rounded-lg overflow-hidden d-flex justify-between fn-10 color-gray-1"
                >
                  <view class="h-max bg-buy rounded-lg p-l-xs transition-default d-flex align-center" :style="{width:socketData.trend_up*100+'%'}">&emsp;{{multiple(socketData.trend_up,100,2)}}%</view>
                  <view class="p-r-xs d-flex align-center">{{multiple(socketData.trend_down,100,2)}}%</view>
                </view>
        </view>
      </view>
      <view class="btn-group d-flex p-x-md p-y-xs">
        <v-button type="green" block class="flex-fill rounded-xs btn" @click="$emit('buy-show',1)">{{$t('option.a2')}}</v-button>
        <!-- <button style="padding: 0 !important;" class="m-x-md flat btn border-original-0" @click="$emit('buy-show',2)">{{$t('option.b0')}}</button> -->
        <v-button type="red" block class="flex-fill rounded-xs btn" @click="$emit('buy-show',3)">{{$t('option.a3')}}</v-button>
      </view>
    </view>
  </view>
</template>
<script>
import math from "@/utils/class/math";
import { mapState } from "vuex";
export default {
  props: ["currentAndNext","query"],
  data() {
    return {
      detail: {},
      isAjax: false,
      socketData: {},
    };
  },
  computed: {
    current_scene() {
      return this.currentAndNext.current_scene || {};
    },
    next_scene() {
      return this.currentAndNext.next_scene || {};
    },
    ...mapState({
      ws: "ws",
    }),
  },
  methods: {
    multiple: math.multiple,
  },
  created() {
    this.ws.on("message", (res) => {
      let { data, sub } = res;
      if (sub == "sceneListNewPrice") {
        if (data.pair_time_name == this.query.pair_time_name) {
          this.socketData = data;
        }
      }
    });
  },
};
</script>
<style lang="scss" scoped>
.flat {
  border-radius: 50%;
  background: rgba($blue, 0.1);
  color: $blue;
  width: 45px;
  height: 45px;
}
</style>