219a756da159241c471b3365482e7abe33da29c8.svn-base 35 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161
  1. <!--
  2. * @Description: In User Settings Edit
  3. * @Author: your name
  4. * @Date: 2019-08-26 10:58:23
  5. * @LastEditTime: 2019-08-26 11:34:56
  6. * @LastEditors: Please set LastEditors
  7. -->
  8. <template>
  9. <div :class="getBettingIsShow?'noscoll':''">
  10. <div class="lod">
  11. <Loading></Loading>
  12. </div>
  13. <div>
  14. <SportsHead></SportsHead>
  15. <div class="Serch">
  16. <div class="Soccer-game row center">
  17. <div class="Soccer-game-title row center" @click="isreturn()">
  18. <img class="returnimg" :src="searchreturn">
  19. {{name}}
  20. </div>
  21. </div>
  22. </div>
  23. <!-- 足球头部 -->
  24. <div class="bqHead zqHead" v-if="headStatus == 1">
  25. <div class="pd-10">
  26. <div class="match">
  27. <div class="tit">
  28. <span>{{list.leagueName}}</span>
  29. <div>
  30. <!-- <span v-if="list.match_time" class="scene">{{list.match_time.split(' ')[0]}} </span>
  31. &nbsp; -->
  32. <span v-if="list.match_time" class="time">{{list.match_ptime ? list.match_ptime : list.match_time.split(' ')[0]}}</span>
  33. </div>
  34. </div>
  35. <div class="info">
  36. <span>{{list.home_team}}</span>
  37. <span class="live-score">{{list.match_score ? list.match_score :'0-0'}}</span>
  38. <span>{{list.guest_team}}</span>
  39. </div>
  40. </div>
  41. </div>
  42. </div>
  43. <!-- 篮球头部 -->
  44. <!-- 篮球头部 -->
  45. <div class="header" v-if="headStatus == 2">
  46. <div class=" match">
  47. <div class="live">
  48. <div class="tit">{{list.leagueName}}</div>
  49. <div class="info">
  50. <div class="infoBody flex">
  51. <div class="matchTime" style="width:25%;">
  52. <span class="scene">第四节</span>
  53. <span class="time">00:00</span>
  54. </div>
  55. <div class="flex" style="width:75%;">
  56. <div class="right_info_row_qt">第一节</div>
  57. <div class="right_info_row_qt">第二节</div>
  58. <div class="right_info_row_qt">第三节</div>
  59. <div class="right_info_row_qt">第四节</div>
  60. <div class="right_info_row_qt">加时</div>
  61. <!-- <div class="right_info_row_qt scence">上半场</div>
  62. <div class="right_info_row_qt scence">下半场</div> -->
  63. <div class="right_info_row_qt scence">总计</div>
  64. </div>
  65. </div>
  66. <div class="infoRow">
  67. <div class="infoItem flex">
  68. <div style="width:25%;">
  69. <span class="team">{{list.home_team}}</span>
  70. </div>
  71. <div class="infoBox" style="width:75%">
  72. <div class="infoNum">22</div>
  73. <div class="infoNum">8</div>
  74. <div class="infoNum">13</div>
  75. <div class="infoNum col">13</div>
  76. <div class="infoNum"></div>
  77. <!-- <div class="infoNum scenceNum">30</div>
  78. <div class="infoNum col scenceNum">26</div> -->
  79. <div class="infoNum ycol scenceNum">54</div>
  80. </div>
  81. </div>
  82. <div class="infoItem flex">
  83. <div style="width:25%;">
  84. <span class="team">{{list.guest_team}}</span>
  85. </div>
  86. <div class="infoBox" style="width:75%">
  87. <div class="infoNum">22</div>
  88. <div class="infoNum">8</div>
  89. <div class="infoNum">13</div>
  90. <div class="infoNum col">13</div>
  91. <div class="infoNum"></div>
  92. <!-- <div class="infoNum scenceNum">30</div>
  93. <div class="infoNum col scenceNum">26</div> -->
  94. <div class="infoNum ycol scenceNum">54</div>
  95. </div>
  96. </div>
  97. </div>
  98. </div>
  99. </div>
  100. </div>
  101. </div>
  102. <!-- 棒球头部 -->
  103. <div class="tennisHead" v-if="headStatus == 3">
  104. <div style="padding:0.1rem;">
  105. <div class="match">
  106. <div class="tit">
  107. <span>{{list.leagueName}}</span>
  108. </div>
  109. <div class="ballTable">
  110. <div class="listHead row allAlignment">
  111. <div class="txt-c-0">
  112. <div class="section">{{matchScoreDetails.schedule}}
  113. <span v-if="matchScoreDetails.type == 'h'">▲</span>
  114. <span v-else>▼</span>
  115. <!-- <span>▲</span> -->
  116. </div>
  117. </div>
  118. <div class="row ">
  119. <span class="session row center" v-for="(tiem,i) in 9" :key="tiem.id">
  120. {{i+1}}
  121. </span>
  122. <!-- <span class="mg-5">盘</span> -->
  123. <span class="mg-session row center">加时</span>
  124. <!-- <span class="mg-session row center">当前</span> -->
  125. <span class="mg-session row center" style="width:0.85rem;">总局数</span>
  126. </div>
  127. </div>
  128. <div class="row allAlignment scoreInfo">
  129. <div class="row">
  130. <div class="ballhold " :class="{attack:matchScoreDetails.type == 'h'}">•</div>
  131. <div class="team" style="text-align:left;">{{ list.home_team}}</div>
  132. </div>
  133. <div class="row">
  134. <span :class="{current:matchScoreDetails.schedule ==1}"
  135. class="session row center">{{matchScoreDetails.sc_1th_H}}</span>
  136. <span :class="{current:matchScoreDetails.schedule ==2}"
  137. class="session row center">{{matchScoreDetails.sc_2th_H}}</span>
  138. <span :class="{current:matchScoreDetails.schedule ==3}"
  139. class="session row center ">{{matchScoreDetails.sc_3th_H}}</span>
  140. <span :class="{current:matchScoreDetails.schedule ==4}"
  141. class="session row center">{{matchScoreDetails.sc_4th_H}}</span>
  142. <span :class="{current:matchScoreDetails.schedule ==5}"
  143. class="session row center">{{matchScoreDetails.sc_5th_H}}</span>
  144. <span :class="{current:matchScoreDetails.schedule ==6}"
  145. class="session row center">{{matchScoreDetails.sc_6th_H}}</span>
  146. <span :class="{current:matchScoreDetails.schedule ==7}"
  147. class="session row center">{{matchScoreDetails.sc_7th_H}}</span>
  148. <span :class="{current:matchScoreDetails.schedule ==8}"
  149. class="session row center">{{matchScoreDetails.sc_8th_H}}</span>
  150. <span :class="{current:matchScoreDetails.schedule ==9}"
  151. class="session row center">{{matchScoreDetails.sc_9th_H}}</span>
  152. <span class=" mg-session row center " style="background: rgba(255, 165, 0, 0.49);">{{matchScoreDetails.OT_H}}</span>
  153. <!-- <span class=" mg-session row center mark">{{matchScoreDetails.sc_ov_H}}</span> -->
  154. <span class="mg-session row center mark " style="width:0.85rem">{{matchScoreDetails.game_num_H}}</span>
  155. </div>
  156. </div>
  157. <div class="row allAlignment scoreInfo">
  158. <div class="row">
  159. <div class="ballhold" :class="{attack:matchScoreDetails.type == 'g'}">•</div>
  160. <div class="team" style="text-align:left;">{{list.guest_team}}</div>
  161. </div>
  162. <div class="row">
  163. <span :class="{current:matchScoreDetails.schedule ==1}" class="session row center">{{matchScoreDetails.sc_1th_C}}</span>
  164. <span :class="{current:matchScoreDetails.schedule ==2}" class="session row center">{{matchScoreDetails.sc_2th_C}}</span>
  165. <span :class="{current:matchScoreDetails.schedule ==3}" class="session row center">{{matchScoreDetails.sc_3th_C}}</span>
  166. <span :class="{current:matchScoreDetails.schedule ==4}" class="session row center">{{matchScoreDetails.sc_4th_C}}</span>
  167. <span :class="{current:matchScoreDetails.schedule ==5}" class="session row center">{{matchScoreDetails.sc_5th_C}}</span>
  168. <span :class="{current:matchScoreDetails.schedule ==6}" class="session row center">{{matchScoreDetails.sc_6th_C}}</span>
  169. <span :class="{current:matchScoreDetails.schedule ==7}" class="session row center">{{matchScoreDetails.sc_7th_C}}</span>
  170. <span :class="{current:matchScoreDetails.schedule ==8}" class="session row center">{{matchScoreDetails.sc_8th_C}}</span>
  171. <span :class="{current:matchScoreDetails.schedule ==9}" class="session row center">{{matchScoreDetails.sc_9th_C}}</span>
  172. <span class=" mg-session row center " style="background: rgba(255, 165, 0, 0.49);">{{matchScoreDetails.OT_C}}</span>
  173. <!-- <span class=" mg-session row center mark">{{matchScoreDetails.sc_ov_A}}</span> -->
  174. <span class="mg-session row center mark " style="width:0.85rem">{{matchScoreDetails.game_num_C}}</span>
  175. </div>
  176. </div>
  177. <div class="listHead row allAlignment">
  178. <div class="row center">
  179. <div class="eliminate ">
  180. <span :class="{spanBox:matchScoreDetails.baseman_2 !='N'}" style="margin-left:.11rem;"></span>
  181. <div style="width:.31rem;" class="row allAlignment">
  182. <span :class="{spanBox:matchScoreDetails.baseman_3 !='N'}"></span>
  183. <span :class="{spanBox:matchScoreDetails.baseman_1 !='N'}"></span>
  184. </div>
  185. </div>
  186. </div>
  187. <div>
  188. <span>出局:</span>
  189. <span>{{matchScoreDetails.out_game_num}}</span>
  190. </div>
  191. </div>
  192. </div>
  193. </div>
  194. </div>
  195. </div>
  196. <!-- 网球头部 -->
  197. <div class="tennisHead" style="padding:0.1rem;" v-if="headStatus == 4">
  198. <div class="ballTable">
  199. <div class="txt" style=" color:#fff">
  200. <span>{{list.leagueName}}</span>
  201. </div>
  202. <div class="listHead row allAlignment">
  203. <div class="txt">
  204. <!-- <div class="spanCol">第{{scoreDetails.cp == 1?'一' : scoreDetails.cp ==2 ? "二": scoreDetails.cp ==3 ? "三":scoreDetails.cp== 4 ? "四":"五" }}节</div> -->
  205. <div class="spanCol">第一节</div>
  206. <!-- <div class="delay">天气原因延期</div> -->
  207. </div>
  208. <div class="headerTop row rightAlignment">
  209. <span v-for="(item,i) in 5" :key="item.id">{{i+1}}</span>
  210. <span class="mg-5">分数</span>
  211. <span class="mg-5">盘</span>
  212. <span class="mg-5" style="width:0.8rem;">总局</span>
  213. </div>
  214. </div>
  215. <!-- 主队 -->
  216. <div class="row allAlignment list">
  217. <div class="row">
  218. <!-- <div class="ballhold" style="color: rgb(197, 210, 60);">•</div> -->
  219. <div class="team" style="text-align:left;">{{list.home_team}}</div>
  220. </div>
  221. <div class="score row rightAlignment">
  222. <span class="spanCol">6</span>
  223. <span class="spanCol">3</span>
  224. <span class="spanCol">0</span>
  225. <span class="spanCol">0</span>
  226. <span class="spanCol">0</span>
  227. <span class="mg-5 mark cl" style="background: rgba(255, 165, 0, 0.49);">40</span>
  228. <span class="mg-5 mark">0</span>
  229. <span class="mg-5 mark sumCl" style="width:0.8rem">4</span>
  230. </div>
  231. </div>
  232. <!-- 客队 -->
  233. <div class="row allAlignment list">
  234. <div class="row">
  235. <!-- <span class="ballhold" style="color:#fff;">•</span> -->
  236. <span class="team" style="text-align:left;">{{list.guest_team}}</span>
  237. </div>
  238. <div class="score row rightAlignment">
  239. <span class="spanCol">2</span>
  240. <span class="spanCol">2</span>
  241. <span class="spanCol">0</span>
  242. <span class="spanCol">0</span>
  243. <span class="spanCol">0</span>
  244. <span class="mg-5 mark cl" style="background: rgba(255, 165, 0, 0.49);">40</span>
  245. <span class="mg-5 mark">0</span>
  246. <span class="mg-5 mark sumCl" style="width:0.8rem;">2</span>
  247. </div>
  248. </div>
  249. <div></div>
  250. </div>
  251. <!-- </div>
  252. </div>-->
  253. </div>
  254. <!-- 原始头部 -->
  255. <div class="gambling" v-show="this.list" v-if="headStatus == 0">
  256. <div class="leagueMatch row average">
  257. <yd-button size="large" @click.native="show = true"></yd-button>
  258. <div class="leagueName">
  259. <span>{{list.leagueName}}</span>
  260. </div>
  261. <div class="teamName">
  262. <span>{{list.home_team}}</span>
  263. <div class="vs">vs</div>
  264. <span>{{list.guest_team}}</span>
  265. </div>
  266. <div class="time" :style="status == true?'':'width:2rem;'">
  267. <span>{{list.match_ptime? list.match_ptime :list.match_time }}</span>
  268. </div>
  269. <div v-if="satatus" class="icon" :class="status == true ? 'rotate':'backRotate'">
  270. <i></i>
  271. </div>
  272. </div>
  273. <!-- 模态框 -->
  274. <yd-popup v-if="satatus" v-model="show" position="center" width="90%">
  275. <div class="modality">
  276. <div
  277. class="list"
  278. v-for="(item,index) in list.league"
  279. :key="index"
  280. @click="check(index,item.match_id)"
  281. >
  282. <span :class="match_id == item.match_id?'col':''">{{item.home_team}}</span>
  283. <span :class="match_id == item.match_id?'col':''">v</span>
  284. <span :class="match_id == item.match_id?'col':''">{{item.guest_team}}</span>
  285. </div>
  286. </div>
  287. </yd-popup>
  288. </div>
  289. <div class="box">
  290. <div id="NavSlide">
  291. <nav>
  292. <p v-for="(item,$index) in key" @click="toggleNav($index)" :key="$index">
  293. <span :class="{active:$index==active}">{{item}}</span>
  294. </p>
  295. </nav>
  296. </div>
  297. </div>
  298. <div v-show="isShow">
  299. <!--让球大小-->
  300. <div v-show="Single =='进球:大/小' || isAll ">
  301. <goal></goal>
  302. </div>
  303. <!--让球-->
  304. <div v-show="Single =='让球' || isAll ">
  305. <LetBall></LetBall>
  306. </div>
  307. <!--最先/最后进球-->
  308. <div v-show="Single =='首粒入球/最后一粒入球' || isAll ">
  309. <StartEnd></StartEnd>
  310. </div>
  311. <!-- 总进球数 -->
  312. <div v-show="Single =='总进球数' || isAll ">
  313. <GoalSize></GoalSize>
  314. </div>
  315. <!--独赢-->
  316. <div v-show="Single =='独赢'|| Single =='独赢盘'|| isAll ">
  317. <OnlyWin></OnlyWin>
  318. </div>
  319. <!-- 波胆 -->
  320. <div v-show="Single =='波胆' || isAll ">
  321. <div v-if="name == '网球'">
  322. <TennisWaveBravery/>
  323. </div>
  324. <div v-else>
  325. <WaveBladder></WaveBladder>
  326. </div>
  327. </div>
  328. <!--入球数单双-->
  329. <div v-show="Single =='进球:单/双'|| Single =='总分:单/双' || isAll ">
  330. <div v-if="name =='篮球' || name =='棒球'">
  331. <TotalScoreSingleDouble/>
  332. </div>
  333. <div v-else>
  334. <GoalSingleAndDouble></GoalSingleAndDouble>
  335. </div>
  336. </div>
  337. <!--半场/全场-->
  338. <div v-show="Single =='半场/全场'|| isAll ">
  339. <FullHalf></FullHalf>
  340. </div>
  341. <!-- 角球
  342. <div v-show="Single =='角球' || isAll ">
  343. <Corner></Corner>
  344. </div> -->
  345. <!-- 球队进球大小 -->
  346. <div v-show="Single =='球队进球数:大/小' || isAll ">
  347. <TeamGoalSize></TeamGoalSize>
  348. </div>
  349. <!-- 总得分:大/小 -->
  350. <div v-show="Single =='总得分:大/小' || isAll ">
  351. <TotalScoreSize></TotalScoreSize>
  352. </div>
  353. <!-- 总得分:大/小 前五 -->
  354. <div v-show="Single =='总得分:大/小' || isAll ">
  355. <TotalScoreSizeFive></TotalScoreSizeFive>
  356. </div>
  357. <!-- 总得分:大/小 上半场 -->
  358. <div v-show="Single =='总得分:大/小' || isAll ">
  359. <TotalScoreHalfSize></TotalScoreHalfSize>
  360. </div>
  361. <!-- 总得分:大/小 节数-->
  362. <div v-show="Single =='总得分:大/小' || isAll ">
  363. <TotalScoreSectionSize></TotalScoreSectionSize>
  364. </div>
  365. <!-- 球队得分最后一位数 -->
  366. <div v-show="Single =='球队得分最后一位数' || isAll ">
  367. <TeamScoreLast></TeamScoreLast>
  368. </div>
  369. <!-- 总局数:大/小 -->
  370. <div v-show="Single =='总局数:大/小' || isAll ">
  371. <InningsSize></InningsSize>
  372. </div>
  373. <!-- 总局数:单/双 -->
  374. <div v-show="Single =='总局数单双' || isAll ">
  375. <InningsSingleDouble></InningsSingleDouble>
  376. </div>
  377. <!-- 冠军 -->
  378. <div v-show="Single =='冠军' || isAll ">
  379. <MatchChampion></MatchChampion>
  380. </div>
  381. <!-- 让盘 -->
  382. <div v-show="Single =='让盘' || isAll ">
  383. <LetPlate></LetPlate>
  384. </div>
  385. <!-- 让局 -->
  386. <div v-show="Single =='让局' || isAll ">
  387. <LetBureau></LetBureau>
  388. </div>
  389. </div>
  390. <div v-if="!isShow">
  391. <NotOpend :title="tipsTitle"></NotOpend>
  392. </div>
  393. <!-- <StLinkFooter></StLinkFooter> -->
  394. <BettingWindow v-if="isBettingWindow== '100'"/>
  395. </div>
  396. </div>
  397. </template>
  398. <script>
  399. import Goal from "@/components/StGoal";
  400. import LetBall from "@/components/StLetBall";
  401. import NotOpend from "@/components/StNotOpend";
  402. import Loading from "@/components/StLoading";
  403. import WaveBladder from "@/components/StWaveBladder";
  404. import StLinkFooter from "@/components/StLinkFooter";
  405. import SportsHead from "@/components/StSportsHead";
  406. import OnlyWin from "@/components/StOnlyWin";
  407. import GoalSize from "@/components/StGoalSize";
  408. import StartEnd from "@/components/StStartEnd";
  409. import FullHalf from "@/components/StFullHalf";
  410. import TeamGoalSize from "@/components/StTeamGoalSize";
  411. import TotalScoreSize from "@/components/StTotalScoreSize";
  412. import TotalScoreSizeFive from "@/components/StTotalScoreSizeFive";
  413. import TotalScoreHalfSize from "@/components/StTotalScoreHalfSize";
  414. import TotalScoreSectionSize from "@/components/StTotalScoreSectionSize";
  415. import TeamScoreLast from "@/components/StTeamScoreLast";
  416. import GoalSingleAndDouble from "@/components/StGoalSingleAndDouble";
  417. import Corner from "@/components/StCorner";
  418. import TotalScoreSingleDouble from "@/components/StTotalScoreSingleDouble";
  419. import BettingWindow from "@/components/StBettingWindow";
  420. import MatchChampion from "@/components/StMatchChampion";
  421. import InningsSingleDouble from "@/components/StInningsSingleDouble";
  422. import InningsSize from "@/components/StInningsSize";
  423. import LetPlate from "@/components/StLetPlate";
  424. import LetBureau from "@/components/StLetBureau";
  425. import TennisWaveBravery from "@/components/StTennisWaveBravery";
  426. export default {
  427. data() {
  428. return {
  429. name:this.$route.query.name, // 球名
  430. searchreturn: require("@/assets/st-imges/returnbox.png"),
  431. gameCode: this.$route.query.gameCode, //别名
  432. match_id: "",
  433. list:'', //数据
  434. previousStorage:'',//前一次list储存数据
  435. key: [], //存储key值进行判定
  436. isShow: "", //更具数据是否显示
  437. getBettingIsShow:false,// 判断投注框背景可否滚动
  438. status: false,
  439. tipsTitle: "暂无相关数据信息",
  440. active: 0,// 投注页是否打开
  441. isBettingWindow: '-1',
  442. // isIphone: false,//是否ios
  443. // isAndroid: false,//是否Android
  444. show: false, //是否显示模态框
  445. satatus: true,
  446. isAll: true,
  447. Single: "",
  448. timers : true,//是否开启轮询
  449. headStatus : 0 ,// 头部显示滚球(1为足球,2为篮球,3为棒球,4为网球),0为普通
  450. matchScoreDetails:'',//比赛得分详情
  451. };
  452. },
  453. methods: {
  454. // 返回上一页
  455. isreturn() {
  456. history.go(-1);
  457. },
  458. //滚球比赛比分详情
  459. scoreDetails(data){
  460. //比赛得分详细
  461. let matchScoreDetails = JSON.parse(data);
  462. if(matchScoreDetails.schedule){
  463. if(matchScoreDetails.schedule.startsWith('Topof')){
  464. matchScoreDetails.type = 'h'
  465. }else if(matchScoreDetails.schedule.startsWith('Bottomof')){
  466. matchScoreDetails.type = 'g'
  467. }
  468. matchScoreDetails.schedule = matchScoreDetails.schedule.match(/\d+/g)[0]
  469. this.matchScoreDetails = matchScoreDetails;
  470. }
  471. },
  472. //页面初始化接口请求
  473. getAjax: function(game_code, matchID,oddsType) {
  474. this.$http.get(this.$ports.gambling.matchOdds, {
  475. oddsType,
  476. game_code,
  477. matchID
  478. }).then(res => {
  479. if (res.data.status == 1 && res.data.data) {
  480. // console.log(res.data.data,'1');//
  481. //result_mark
  482. //滚球头部数据处理
  483. // console.log(res.data.data)
  484. if(res.data.data.result_mark){
  485. this.scoreDetails(res.data.data.result_mark);
  486. }
  487. // console.log(res.data.data.result_mark,'比赛得分详细');
  488. this.key = [];
  489. if ( res.data.data.oddsData == [] ||res.data.data.oddsData.length == 0 ||res.data.data.oddsData == null) {
  490. this.$store.dispatch("GETSHOW", false);
  491. this.isShow = false;
  492. return false;
  493. }
  494. this.list = res.data.data;
  495. this.satatus = this.list.league.length > 1 ? true :false;
  496. let arrayData = [];
  497. let key =res.data.data.p_code_array ;//Object.keys(res.data.data.p_code_array);
  498. let values = this.$store.getters.getPlayAlias;
  499. //this.$store.getters.getPlayAlias;
  500. this.isShow = true;
  501. this.key = ["所有盘口"];
  502. key.forEach((e, index) => {
  503. // console.log('e',e);
  504. values.forEach(val=>{
  505. if(e == val.odds_code && this.$store.getters.getBallId == val.game_code){
  506. if((this.name == '篮球' && val.odds_name =='入球数单双') || (this.name == '棒球' && val.odds_name =='入球数单双')){
  507. val.odds_name ='总分:单双'
  508. }
  509. this.key.push(val.odds_name);
  510. }
  511. })
  512. let stripData = [];
  513. this.list.oddsData.forEach(data => {
  514. if (data.p_code == e) {
  515. stripData.push(data);
  516. }
  517. arrayData[index] = stripData;
  518. });
  519. });
  520. //更新数据和上一次的数据匹配
  521. let storage =this.previousStorage;
  522. //console.log('storage',arrayData)
  523. if(storage && storage.match_id == this.list.match_id && storage.oddsData.length > 0){
  524. arrayData.forEach(e=>{
  525. storage.oddsData.forEach((res,index)=>{
  526. if(e[0].p_code == res[0].p_code){
  527. e.forEach(dat=>{
  528. res.forEach((val,i)=>{
  529. if(dat.id == val.id){
  530. if(dat.odds > val.odds){
  531. dat.change ='add';
  532. }else if(dat.odds < val.odds){
  533. dat.change = 'red';
  534. }else{
  535. dat.change ='';
  536. }
  537. res.splice(i,1)
  538. }
  539. })
  540. })
  541. storage.oddsData.splice(index,1)
  542. }
  543. })
  544. })
  545. }
  546. // console.log(this.previousStorage);
  547. this.list.oddsData = arrayData;
  548. this.previousStorage =this.list;
  549. this.$store.dispatch("GETGAMERATIO", this.list);
  550. //console.log("数据源", arrayData);
  551. }
  552. let _this=this;
  553. setTimeout(()=>{
  554. this.$store.dispatch("GETSHOW", false);
  555. },1000)
  556. });
  557. },
  558. /**
  559. * 切换赛事
  560. */
  561. check(index, match_id) {
  562. let oddsType = localStorage.getItem('activity');
  563. this.show = false;
  564. if (this.list.match_id == match_id) return false;
  565. this.match_id = match_id;
  566. this.$store.dispatch("MACTH_ID", match_id);
  567. this.$store.dispatch("GETSHOW", true);
  568. this.getAjax(this.gameCode, match_id,oddsType);
  569. },
  570. /**
  571. * 切换玩法类型
  572. */
  573. toggleNav: function(index) {
  574. this.active = index;
  575. if (this.key[index] == "所有盘口") {
  576. this.isAll = true;
  577. } else {
  578. this.isAll = false;
  579. this.Single = this.key[index];
  580. }
  581. }
  582. },
  583. /**
  584. * 计算属性
  585. */
  586. computed: {
  587. getIsBettingType() {
  588. return this.$store.getters.getIsBetting;
  589. },
  590. // 获取投注框展示状态
  591. getBettingCase(){
  592. //console.log(this.$store.getters.getNoRoll,'aaaaa')
  593. return this.$store.getters.getNoRoll
  594. },
  595. },
  596. /**
  597. * 监听器
  598. */
  599. watch: {
  600. // 监听投注框开关
  601. getIsBettingType(val) {
  602. if(val=='-1'){
  603. this.$store.dispatch('SET_NOROLL',false)
  604. }
  605. this.isBettingWindow = val;
  606. },
  607. getBettingCase(val){
  608. this.getBettingIsShow=val
  609. },
  610. },
  611. /**
  612. *
  613. */
  614. mounted() {
  615. let ballId = this.$store.getters.getBallId;
  616. let acty = this.$store.getters.getActivity;
  617. if(acty == 'StRollBall'){
  618. if(ballId == 'zq'){
  619. this.headStatus = 1;
  620. }else if(ballId == 'lq'){
  621. this.headStatus = 2;
  622. }else if(ballId == 'bq'){
  623. this.headStatus = 3;
  624. }else if(ballId == 'wq'){
  625. this.headStatus = 4
  626. }
  627. }else{
  628. this.headStatus = 0;
  629. }
  630. let _this = this;
  631. this.match_id = this.$store.getters.getMatchId;
  632. let oddsType = localStorage.getItem('activity');
  633. this.$store.dispatch("GETSHOW", true);
  634. this.getAjax(this.gameCode, this.match_id,oddsType);
  635. //this.timers =true;
  636. this.$public.ajaxTimerFun(function(timing) {
  637. if (_this.timers) {
  638. _this.getAjax(_this.gameCode, _this.match_id,oddsType);
  639. // _this.updateAjax(_this.gameCode, _this.match_id);
  640. }else{
  641. clearInterval(timing);
  642. }
  643. },(1000*15));
  644. if (this.$store.getters.getIsBetting == '100') {
  645. this.isBettingWindow = 100;
  646. }
  647. },
  648. /**
  649. * 关闭当前页面钩子函数
  650. */
  651. beforeDestroy() {
  652. this.timers = false;
  653. },
  654. components: {
  655. Corner,
  656. LetBall,
  657. Goal,
  658. WaveBladder,
  659. StLinkFooter,
  660. SportsHead,
  661. OnlyWin,
  662. StartEnd,
  663. GoalSize,
  664. FullHalf,
  665. GoalSingleAndDouble,
  666. TeamGoalSize,
  667. Loading,
  668. NotOpend,
  669. BettingWindow,
  670. TotalScoreSize,
  671. TotalScoreSizeFive,
  672. TotalScoreHalfSize,
  673. TotalScoreSectionSize,
  674. TeamScoreLast,
  675. TotalScoreSingleDouble,
  676. MatchChampion,
  677. InningsSingleDouble,
  678. InningsSize,
  679. LetPlate,
  680. LetBureau,
  681. TennisWaveBravery
  682. }
  683. };
  684. </script>
  685. <style scoped>
  686. /* 禁止滚动 */
  687. .noscoll{
  688. position: fixed;
  689. width: 100%;
  690. top: 0;
  691. left: 0;
  692. }
  693. /* 头部 */
  694. .Serch {
  695. height: 0.88rem;
  696. display: flex;
  697. justify-content: space-between;
  698. align-items: center;
  699. background: linear-gradient(to bottom, #6a6a6a, #565656);
  700. color: #f76649;
  701. font-family: "PingFang-SC-Regular";
  702. padding: 0 0.33rem;
  703. }
  704. .returnimg {
  705. width: 0.37rem;
  706. height: 0.3rem;
  707. margin-right: 0.1rem;
  708. }
  709. .Soccer-game-title {
  710. height: 0.88rem;
  711. font-size: 0.3rem;
  712. }
  713. .Soccer-game-box {
  714. height: 0.88rem;
  715. /* padding: 0 0.32rem; */
  716. background-color: #626262;
  717. }
  718. .gambling {
  719. background: #f8f8f8;
  720. }
  721. .leagueMatch {
  722. position: relative;
  723. padding: 0.3rem 0.32rem;
  724. display: flex;
  725. justify-content: space-between;
  726. align-items: center;
  727. flex-wrap: nowrap;
  728. border-bottom: 1px solid #e4e4e4;
  729. background: linear-gradient(to top, #ffe9c9, #fff3e2);
  730. }
  731. .leagueMatch div {
  732. font-size: 0.28rem;
  733. text-align: left;
  734. color: #333333;
  735. }
  736. .leagueName {
  737. width: 2.26rem;
  738. }
  739. .leagueMatch .teamName {
  740. text-align: center;
  741. }
  742. .teamName .vs {
  743. text-align: center;
  744. font-size: 0.24rem;
  745. color: #fd8f26;
  746. }
  747. .leagueMatch .time {
  748. width: 1.3rem;
  749. color: #333333;
  750. font-size: 0.24rem;
  751. text-align: center;
  752. }
  753. .leagueMatch .icon i {
  754. display: inline-block;
  755. width: 0.4rem;
  756. height: 0.4rem;
  757. background: url("../../../assets/st-imges/xiangxia.png") no-repeat;
  758. background-size: 100% 100%;
  759. transform: rotate(180deg);
  760. }
  761. .leagueMatch .rotate {
  762. transform: rotate(180deg);
  763. transition: 0.2s;
  764. }
  765. .leagueMatch .backRotate {
  766. transform: rotate(0deg);
  767. transition: 0.2s;
  768. }
  769. .box {
  770. padding: 0 0.14rem;
  771. background: #f8f8f8;
  772. }
  773. #NavSlide {
  774. width: 100%;
  775. overflow: hidden;
  776. height: 0.88rem;
  777. }
  778. #NavSlide nav {
  779. display: -webkit-box;
  780. display: -ms-flexbox;
  781. display: flex;
  782. -webkit-box-align: middle;
  783. -ms-flex-align: middle;
  784. align-items: middle;
  785. overflow: auto;
  786. }
  787. #NavSlide p {
  788. text-align: center;
  789. font-size: 0.28rem;
  790. -ms-flex-negative: 0;
  791. flex-shrink: 0;
  792. padding: 0 0.2rem 0 0;
  793. margin: 0 0.1rem 0 0;
  794. color: #b8b8b8;
  795. height: 0.88rem;
  796. line-height: 0.88rem;
  797. }
  798. /* #NavSlide p a{
  799. color: #E5E5E5;
  800. text-decoration: none;
  801. } */
  802. #NavSlide p span.active {
  803. color: #363636;
  804. }
  805. #NavSlide .fixadd {
  806. position: absolute;
  807. right: -4px;
  808. background-color: #31c17b;
  809. }
  810. button.yd-btn-block {
  811. background: #f8f8f8;
  812. position: absolute;
  813. left: 0;
  814. top: 0;
  815. width: 100%;
  816. height: 100%;
  817. /* z-index: -1; */
  818. margin: 0;
  819. opacity: 0;
  820. }
  821. .modality {
  822. text-align: center;
  823. background: #fbfbfb;
  824. padding: 0.2rem 0;
  825. height: 5rem;
  826. /* overflow: hidden; */
  827. }
  828. .modality span {
  829. color: #000000;
  830. font-size: 0.28rem;
  831. }
  832. .modality div {
  833. /* margin: 0.06rem 0; */
  834. padding: 0.2rem 0;
  835. background: #fbfbfb;
  836. border-bottom: 1px solid #e4e4e4;
  837. }
  838. .modality div .col {
  839. color: #fd8f26;
  840. }
  841. .lod{
  842. z-index: 999;
  843. position: fixed;
  844. width: 100%;
  845. }
  846. /* 滚球足球头部 */
  847. /* 棒球头部 */
  848. .bqHead {
  849. background: url("../../../assets/st-imges/1baseball.png") no-repeat;
  850. background-size: 100% 100%;
  851. font-size: 0.18rem;
  852. }
  853. .zqHead {
  854. color: #fff;
  855. background: url("../../../assets/st-imges/1football.png") no-repeat;
  856. background-size: 100% 100%;
  857. font-size: 0.18rem;
  858. }
  859. .eliminate span {
  860. display: block;
  861. width: 0.1rem;
  862. height: 0.1rem;
  863. background: #ccc;
  864. transform: rotate(45deg);
  865. }
  866. .spanBox {
  867. background: orange !important;
  868. }
  869. .ballhold{
  870. /* color:#fff; */
  871. font-size: 0.2rem;
  872. margin-right: 4px;
  873. }
  874. .current{
  875. color: orange;
  876. }
  877. .session{
  878. width:0.3rem;
  879. }
  880. .mark{
  881. background: hsla(0, 0%, 100%, 0.25);
  882. }
  883. .scoreInfo{
  884. line-height: 0.5rem;
  885. padding: 0 0.1rem ;
  886. }
  887. .mg-session{
  888. width:0.7rem;
  889. }
  890. .bqHead .pd-10 {
  891. padding: 0.1rem;
  892. }
  893. .bqHead .tit {
  894. display: flex;
  895. align-items: center;
  896. justify-content: space-between;
  897. }
  898. .match .info {
  899. background: rgba(0, 0, 0, 0.5);
  900. height: 0.52rem;
  901. line-height: 0.52rem;
  902. font-size: 15px;
  903. text-align: center;
  904. font-size: 0.28rem;
  905. }
  906. .match .info .pk,
  907. .match .tit .scene {
  908. font-weight: bold;
  909. color: rgb(254, 146, 0);
  910. }
  911. .tit .time {
  912. color: #bd4700;
  913. }
  914. .tit span{
  915. font-size: 0.26rem;
  916. }
  917. .welcome {
  918. height: 0.36rem;
  919. line-height: 0.36rem;
  920. font-size: 0.16rem;
  921. padding: 0 0.1rem;
  922. background: #4e4e4e;
  923. color: black;
  924. }
  925. /* 篮球头部 */
  926. .header .match{
  927. background: #c28d47;
  928. background-image: url("../../../assets/st-imges/1basketball.png") no-repeat;
  929. background-size: 100% 100%;
  930. color: #fff;
  931. }
  932. .flex{
  933. display: flex;
  934. justify-content: space-between;
  935. align-items: center;
  936. }
  937. .header .match .live{
  938. padding: 0.06rem;
  939. }
  940. /* .live .tit{
  941. height: 30px;
  942. line-height: 30px;
  943. font-size: 0.14rem;
  944. } */
  945. .match .info{
  946. margin-top: 0.1rem;
  947. position: relative;
  948. height: auto;
  949. background: rgba(0,0,0,.5);
  950. line-height: 52px;
  951. font-size: 15px;
  952. text-align: center;
  953. }
  954. .infoBody{
  955. background: #000;
  956. opacity: .85;
  957. height: 0.52rem;
  958. padding-left: 0.1rem;
  959. font-size: 0.14rem;
  960. }
  961. .matchTime span{
  962. display: inline-block;
  963. }
  964. .matchTime .scene{
  965. color: #ff9200;
  966. margin-right: 0.06rem;
  967. }
  968. .matchTime .time{
  969. color: #b4b4b4;
  970. }
  971. .right_info_row_qt{
  972. width: 0.85rem;
  973. font-size: 0.12rem;
  974. text-align: center;
  975. /* padding: 0.04rem; */
  976. color: #787878;
  977. /* box-sizing: border-box; */
  978. /* font-weight: 700;
  979. font-family: serif; */
  980. }
  981. .infoRow{
  982. padding-left: 0.1rem;
  983. }
  984. .scence{
  985. width: 0.75rem;
  986. padding: 0;
  987. /* padding-top: 0.19rem; */
  988. }
  989. .infoItem{
  990. height: 0.5rem;
  991. line-height: 0.24rem;
  992. width: auto
  993. }
  994. .infoBox{
  995. width: 2.73rem;
  996. height:0.5rem;
  997. display: flex;
  998. align-items: center;
  999. justify-content: space-between;
  1000. /* right: 0; */
  1001. /* position: absolute; */
  1002. }
  1003. .infoBox > div{
  1004. width: .75rem;
  1005. }
  1006. .infoNum{
  1007. width: 0.25rem;
  1008. font-size: 0.13rem;
  1009. line-height: 0.28rem;
  1010. padding: 0;
  1011. height: 100%;
  1012. line-height: 0.5rem;
  1013. color: #fff;
  1014. font-weight: 400;
  1015. text-align: center;
  1016. font-family: sans-serif;
  1017. }
  1018. .scenceNum{
  1019. background: hsla(0,0%,100%,.16);
  1020. width: 0.52rem;
  1021. margin-left: 1px;
  1022. }
  1023. .infoItem .team{
  1024. font-size: 0.16rem;
  1025. }
  1026. .col{
  1027. color: #ff9200;
  1028. }
  1029. .ycol{
  1030. color:#dcbc4c;
  1031. }
  1032. /* 网球头部 */
  1033. .tennisHead {
  1034. background: url("../../../assets/st-imges/tennisball.png") no-repeat;
  1035. background-size: 100% 100%;
  1036. width: 100%;
  1037. height: auto;
  1038. }
  1039. .ordinaryHead .match .info{
  1040. display: flex;
  1041. }
  1042. .match {
  1043. color: #fff;
  1044. height: auto;
  1045. }
  1046. .match .tit {
  1047. height: 0.32rem;
  1048. line-height: 0.32rem;
  1049. /* margin-top: -4px; */
  1050. }
  1051. .ballTable{
  1052. background: rgba(0, 0, 0, 0.2);
  1053. }
  1054. .listHead {
  1055. padding: 0 0.1rem;
  1056. line-height: 0.5rem;
  1057. background: rgba(0, 0, 0, 0.15);
  1058. color: #fff;
  1059. }
  1060. .listHead .txt-c-0 {
  1061. color: orange;
  1062. }
  1063. .listHead .spanCol{
  1064. color: orange;
  1065. }
  1066. .headerTop {
  1067. width: 50%;
  1068. }
  1069. .score {
  1070. width: 50%;
  1071. }
  1072. .score span {
  1073. display: inline-block;
  1074. width: 0.3rem;
  1075. text-align: center;
  1076. }
  1077. .score span.mg-5 {
  1078. width: 0.7rem;
  1079. }
  1080. .headerTop span {
  1081. display: inline-block;
  1082. width: 0.3rem;
  1083. text-align: center;
  1084. }
  1085. .headerTop span.mg-5 {
  1086. width: 0.7rem;
  1087. }
  1088. .mark {
  1089. background: hsla(0, 0%, 100%, 0.25);
  1090. }
  1091. .list {
  1092. background: hsla(0, 0%, 100%, 0.2);
  1093. line-height: 0.4rem;
  1094. padding: 0 0.1rem;
  1095. color: #fff;
  1096. }
  1097. .cl {
  1098. color: orange;
  1099. }
  1100. .sumCl {
  1101. color: #ff0;
  1102. }
  1103. .welcome{
  1104. height: .5rem;
  1105. line-height: 0.5rem;
  1106. font-size: 0.16rem;
  1107. padding: 0 0.1rem;
  1108. background: #898989;
  1109. color: #fff;
  1110. }
  1111. .ordinaryHead {
  1112. background: url("../../../assets/st-imges/1football.png") no-repeat;
  1113. background-size: 100% 100%;
  1114. /* padding: 0.04rem; */
  1115. /* height: 1.2rem; */
  1116. /* line-height: 1.2rem; */
  1117. }
  1118. .ordinaryHead .match {
  1119. color: #fff;
  1120. }
  1121. .ordinaryHead .match .info {
  1122. padding: 0 0.2rem;
  1123. display: flex;
  1124. justify-content: space-between;
  1125. align-items: center;
  1126. }
  1127. .ordinaryHead .match .info div span{
  1128. font-size: 0.22rem;
  1129. }
  1130. .match .time {
  1131. font-weight: 400;
  1132. color: #bd4700;
  1133. margin-left: 0.05rem;
  1134. }
  1135. .live-score {
  1136. padding: 0 8%;
  1137. }
  1138. .attack{
  1139. color: rgb(197, 210, 60);
  1140. }
  1141. </style>