60760fc9b18b77975a6f96906b50208ca9955421.svn-base 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. <template>
  2. <div>
  3. <div class="title" v-if="isShow">
  4. <span style="font-size:.28rem;color:#F76649;">{{titel}}</span>
  5. </div>
  6. <div
  7. v-for="(item,id) in data"
  8. @click="getInfo(id,item.match_id)"
  9. class="macth row allAlignment"
  10. :key="id"
  11. v-if="isShow"
  12. >
  13. <div class="row">
  14. <div class="column allAlignment center">
  15. <div class="score-icon row center">
  16. <span style=" margin:0.07rem; ">{{item.home_score}}</span>
  17. </div>
  18. <div class="score-icon row center">
  19. <span style=" margin:0.07rem; ">{{item.guest_score}}</span>
  20. </div>
  21. </div>
  22. <div class="team-box column allAlignment">
  23. <span class="teamName">{{item.home_team}}</span>
  24. <span style="font-size:0.2rem;padding:0.06rem 0 ;">vs</span>
  25. <span class="teamName">{{item.guest_team}}</span>
  26. </div>
  27. </div>
  28. <div class="row">
  29. <div class="column allAlignment center">
  30. <span class="macth-time">{{item.match_process}}</span>
  31. <img src="../assets/st-imges/stadium.png" alt>
  32. <span class="macth-time">{{item.match_time}}</span>
  33. </div>
  34. </div>
  35. </div>
  36. <div class="rolling" v-if="isShow">
  37. <RollingBall :ballName="ball.name" :name="name" :index="ball.index" :gameCode="gameCode"></RollingBall>
  38. </div>
  39. </div>
  40. </template>
  41. <script>
  42. import "../css/index.css";
  43. import RollingBall from "./StRollingBall";
  44. import Loading from "./StLoading";
  45. export default {
  46. name: "BasketballBlock",
  47. props: ["type"],
  48. data() {
  49. return {
  50. titel: "篮球",
  51. timer: [], //存储时间
  52. idx: "",
  53. isShow : false,
  54. gameCode: "", //球类别名
  55. name: "", //球类名称传值
  56. ball: {
  57. name: "",
  58. index: ""
  59. },
  60. data: ""
  61. };
  62. },
  63. components: {
  64. RollingBall,
  65. Loading
  66. },
  67. methods: {
  68. getInfo: function(val, match_id) {
  69. console.log("id", val);
  70. this.$router.push({
  71. path: "./StRollBallBettingPage",
  72. query: { gameCode: this.gameCode, match_id: match_id,status : 1, number: 0 ,home:true}
  73. });
  74. },
  75. getAjax:function(){
  76. if (this.type == 1) {
  77. let _this = this;
  78. // vuex传值,状态管理
  79. this.$store.dispatch('GETSHOW',true);
  80. this.$http.get(this.$ports.home.trollingBall).then(res => {
  81. console.log("这是足球",res)
  82. // this.sssd();
  83. if (res.data.status == 1 && res.data.data.length > 0 && res.data.data.matchData.length > 0) {
  84. this.isShow = true;
  85. console.log('res', res.data)
  86. this.data = res.data.data.matchData;
  87. this.titel = res.data.data.gameName;
  88. this.name = this.titel;
  89. this.ball.name = "所有" + this.titel + "滚球";
  90. this.ball.index = this.data.length;
  91. this.gameCode = res.data.data.game_code;
  92. let [f, s] = this.data[0].match_time.split(":");
  93. _this.data.forEach(val => {
  94. if (val.match_time != "") {
  95. let [f, s] = val.match_time.split(":");
  96. this.$public.timer(f, s, function(f, s) {
  97. val.match_time = f + ":" + s;
  98. });
  99. }
  100. });
  101. this.$store.dispatch('GETSHOW',false);
  102. }else{
  103. this.$store.dispatch('GETSHOW',false);
  104. }
  105. });
  106. } else if (this.type == 2) {
  107. this.$store.dispatch('GETSHOW',true);
  108. this.$http.get(this.$ports.home.rollingBall).then(res => {
  109. if (res.data.status == 1 && res.data.data.length > 0 && res.data.data.matchData.length > 0) {
  110. this.isShow = true;
  111. this.data = res.data.data.matchData;
  112. this.titel = res.data.data.gameName;
  113. this.name = this.titel;
  114. this.ball.index = this.data.length;
  115. this.ball.name = "所有" + this.titel + "滚球";
  116. this.gameCode = res.data.data.game_code;
  117. this.$store.dispatch('GETSHOW',false);
  118. }else{
  119. this.$store.dispatch('GETSHOW',false);
  120. }
  121. });
  122. } else if (this.type == 3) {
  123. this.$store.dispatch('GETSHOW',true);
  124. this.$http.get(this.$ports.home.bqrollingBall).then(res => {
  125. if (res.data.status == 1 && res.data.data.length > 0 && res.data.data.matchData.length > 0) {
  126. this.isShow = true;
  127. this.data = res.data.data.matchData;
  128. this.titel = res.data.data.gameName;
  129. this.ball.index = this.data.length;
  130. this.name = this.titel;
  131. this.ball.name = "所有" + this.titel + "滚球";
  132. this.gameCode = res.data.data.game_code;
  133. this.$store.dispatch('GETSHOW',false);
  134. }else{
  135. this.$store.dispatch('GETSHOW',false);
  136. }
  137. });
  138. }
  139. },
  140. // sssd:function(){
  141. // let time=setInterval(function (params) {
  142. // console.log('可爱多');
  143. // this.$http.get(this.$ports.home.trollingBall).then(res=>{
  144. // if(res.data.status==="1"&&res.data.msg==="成功"){
  145. // // 代码
  146. // console.log('计时器',res)
  147. // }else{
  148. // console.log("请求失败")
  149. // }
  150. // })
  151. // },5000)
  152. // }
  153. },
  154. mounted() {
  155. this.getAjax();
  156. }
  157. };
  158. </script>
  159. <style scoped>
  160. /* .box{
  161. border-bottom: 1px soild red;
  162. } */
  163. .macth {
  164. height: 1.76rem;
  165. margin-top: 0.2rem;
  166. color: #333333;
  167. background: #dcdcdc;
  168. border-radius: 0.08rem;
  169. /* border:2px solid #CECECE; */
  170. padding: 0.24rem;
  171. font-size: 0.22rem;
  172. }
  173. .score-icon {
  174. min-width: 0.66rem;
  175. background: #f76649;
  176. border-radius: 0.17rem;
  177. color: #f5f5f5;
  178. font-size: 0.2rem;
  179. }
  180. .teamName {
  181. font-size: 0.26rem;
  182. }
  183. .team-box {
  184. margin-left: 0.29rem;
  185. max-width: 3.4rem;
  186. }
  187. .macth-time {
  188. font-size: 0.24rem;
  189. }
  190. .title {
  191. padding-top: 0.1rem;
  192. margin: 0.1rem 0;
  193. font-size: 0.28rem;
  194. color: #000000;
  195. }
  196. .rolling {
  197. padding-top: 0.41rem;
  198. padding-bottom: 0.46rem;
  199. }
  200. </style>