e40cbddbb0295b1a9221cb082734bfc6741a0771.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. <div class="box">
  274. <div id="NavSlide">
  275. <nav>
  276. <p v-for="(item,$index) in key" @click="toggleNav($index)" :key="$index">
  277. <span :class="{active:$index==active}">{{item}}</span>
  278. </p>
  279. </nav>
  280. </div>
  281. </div>
  282. <!-- 模态框 -->
  283. <yd-popup v-if="satatus" v-model="show" position="center" width="90%">
  284. <div class="modality">
  285. <div
  286. class="list"
  287. v-for="(item,index) in list.league"
  288. :key="index"
  289. @click="check(index,item.match_id)"
  290. >
  291. <span :class="match_id == item.match_id?'col':''">{{item.home_team}}</span>
  292. <span :class="match_id == item.match_id?'col':''">v</span>
  293. <span :class="match_id == item.match_id?'col':''">{{item.guest_team}}</span>
  294. </div>
  295. </div>
  296. </yd-popup>
  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. if(res.data.data.result_mark){
  484. this.scoreDetails(res.data.data.result_mark);
  485. }
  486. // console.log(res.data.data.result_mark,'比赛得分详细');
  487. this.key = [];
  488. if ( res.data.data.oddsData == [] ||res.data.data.oddsData.length == 0 ||res.data.data.oddsData == null) {
  489. this.$store.dispatch("GETSHOW", false);
  490. this.isShow = false;
  491. return false;
  492. }
  493. this.list = res.data.data;
  494. this.satatus = this.list.league.length > 1 ? true :false;
  495. let arrayData = [];
  496. let key =res.data.data.p_code_array ;//Object.keys(res.data.data.p_code_array);
  497. let values = this.$store.getters.getPlayAlias;
  498. //this.$store.getters.getPlayAlias;
  499. this.isShow = true;
  500. this.key = ["所有盘口"];
  501. key.forEach((e, index) => {
  502. // console.log('e',e);
  503. values.forEach(val=>{
  504. if(e == val.odds_code && this.$store.getters.getBallId == val.game_code){
  505. if((this.name == '篮球' && val.odds_name =='入球数单双') || (this.name == '棒球' && val.odds_name =='入球数单双')){
  506. val.odds_name ='总分:单双'
  507. }
  508. this.key.push(val.odds_name);
  509. }
  510. })
  511. let stripData = [];
  512. this.list.oddsData.forEach(data => {
  513. if (data.p_code == e) {
  514. stripData.push(data);
  515. }
  516. arrayData[index] = stripData;
  517. });
  518. });
  519. //更新数据和上一次的数据匹配
  520. let storage =this.previousStorage;
  521. //console.log('storage',arrayData)
  522. if(storage && storage.match_id == this.list.match_id && storage.oddsData.length > 0){
  523. arrayData.forEach(e=>{
  524. storage.oddsData.forEach((res,index)=>{
  525. if(e[0].p_code == res[0].p_code){
  526. e.forEach(dat=>{
  527. res.forEach((val,i)=>{
  528. if(dat.id == val.id){
  529. if(dat.odds > val.odds){
  530. dat.change ='add';
  531. }else if(dat.odds < val.odds){
  532. dat.change = 'red';
  533. }else{
  534. dat.change ='';
  535. }
  536. res.splice(i,1)
  537. }
  538. })
  539. })
  540. storage.oddsData.splice(index,1)
  541. }
  542. })
  543. })
  544. }
  545. // console.log(this.previousStorage);
  546. this.list.oddsData = arrayData;
  547. this.previousStorage =this.list;
  548. this.$store.dispatch("GETGAMERATIO", this.list);
  549. //console.log("数据源", arrayData);
  550. }
  551. let _this=this;
  552. setTimeout(()=>{
  553. this.$store.dispatch("GETSHOW", false);
  554. },1000)
  555. });
  556. },
  557. /**
  558. * 切换赛事
  559. */
  560. check(index, match_id) {
  561. let oddsType = localStorage.getItem('activity');
  562. this.show = false;
  563. if (this.list.match_id == match_id) return false;
  564. this.match_id = match_id;
  565. this.$store.dispatch("MACTH_ID", match_id);
  566. this.$store.dispatch("GETSHOW", true);
  567. this.getAjax(this.gameCode, match_id,oddsType);
  568. },
  569. /**
  570. * 切换玩法类型
  571. */
  572. toggleNav: function(index) {
  573. this.active = index;
  574. if (this.key[index] == "所有盘口") {
  575. this.isAll = true;
  576. } else {
  577. this.isAll = false;
  578. this.Single = this.key[index];
  579. }
  580. }
  581. },
  582. /**
  583. * 计算属性
  584. */
  585. computed: {
  586. getIsBettingType() {
  587. return this.$store.getters.getIsBetting;
  588. },
  589. // 获取投注框展示状态
  590. getBettingCase(){
  591. //console.log(this.$store.getters.getNoRoll,'aaaaa')
  592. return this.$store.getters.getNoRoll
  593. },
  594. },
  595. /**
  596. * 监听器
  597. */
  598. watch: {
  599. // 监听投注框开关
  600. getIsBettingType(val) {
  601. if(val=='-1'){
  602. this.$store.dispatch('SET_NOROLL',false)
  603. }
  604. this.isBettingWindow = val;
  605. },
  606. getBettingCase(val){
  607. this.getBettingIsShow=val
  608. },
  609. },
  610. /**
  611. *
  612. */
  613. mounted() {
  614. let ballId = this.$store.getters.getBallId;
  615. let acty = this.$store.getters.getActivity;
  616. if(acty == 'StRollBall'){
  617. if(ballId == 'zq'){
  618. this.headStatus = 1;
  619. }else if(ballId == 'lq'){
  620. this.headStatus = 2;
  621. }else if(ballId == 'bq'){
  622. this.headStatus = 3;
  623. }else if(ballId == 'wq'){
  624. this.headStatus = 4
  625. }
  626. }else{
  627. this.headStatus = 0;
  628. }
  629. let _this = this;
  630. this.match_id = this.$store.getters.getMatchId;
  631. let oddsType = localStorage.getItem('activity');
  632. this.$store.dispatch("GETSHOW", true);
  633. this.getAjax(this.gameCode, this.match_id,oddsType);
  634. //this.timers =true;
  635. this.$public.ajaxTimerFun(function(timing) {
  636. if (_this.timers) {
  637. _this.getAjax(_this.gameCode, _this.match_id,oddsType);
  638. // _this.updateAjax(_this.gameCode, _this.match_id);
  639. }else{
  640. clearInterval(timing);
  641. }
  642. },(1000*15));
  643. if (this.$store.getters.getIsBetting == '100') {
  644. this.isBettingWindow = 100;
  645. }
  646. },
  647. /**
  648. * 关闭当前页面钩子函数
  649. */
  650. beforeDestroy() {
  651. this.timers = false;
  652. },
  653. components: {
  654. Corner,
  655. LetBall,
  656. Goal,
  657. WaveBladder,
  658. StLinkFooter,
  659. SportsHead,
  660. OnlyWin,
  661. StartEnd,
  662. GoalSize,
  663. FullHalf,
  664. GoalSingleAndDouble,
  665. TeamGoalSize,
  666. Loading,
  667. NotOpend,
  668. BettingWindow,
  669. TotalScoreSize,
  670. TotalScoreSizeFive,
  671. TotalScoreHalfSize,
  672. TotalScoreSectionSize,
  673. TeamScoreLast,
  674. TotalScoreSingleDouble,
  675. MatchChampion,
  676. InningsSingleDouble,
  677. InningsSize,
  678. LetPlate,
  679. LetBureau,
  680. TennisWaveBravery
  681. }
  682. };
  683. </script>
  684. <style scoped>
  685. /* 禁止滚动 */
  686. .noscoll{
  687. position: fixed;
  688. width: 100%;
  689. top: 0;
  690. left: 0;
  691. }
  692. /* 头部 */
  693. .Serch {
  694. height: 0.88rem;
  695. display: flex;
  696. justify-content: space-between;
  697. align-items: center;
  698. background: linear-gradient(to bottom, #6a6a6a, #565656);
  699. color: #f76649;
  700. font-family: "PingFang-SC-Regular";
  701. padding: 0 0.33rem;
  702. }
  703. .returnimg {
  704. width: 0.37rem;
  705. height: 0.3rem;
  706. margin-right: 0.1rem;
  707. }
  708. .Soccer-game-title {
  709. height: 0.88rem;
  710. font-size: 0.3rem;
  711. }
  712. .Soccer-game-box {
  713. height: 0.88rem;
  714. /* padding: 0 0.32rem; */
  715. background-color: #626262;
  716. }
  717. .gambling {
  718. background: #f8f8f8;
  719. }
  720. .leagueMatch {
  721. position: relative;
  722. padding: 0.3rem 0.32rem;
  723. display: flex;
  724. justify-content: space-between;
  725. align-items: center;
  726. flex-wrap: nowrap;
  727. border-bottom: 1px solid #e4e4e4;
  728. background: linear-gradient(to top, #ffe9c9, #fff3e2);
  729. }
  730. .leagueMatch div {
  731. font-size: 0.28rem;
  732. text-align: left;
  733. color: #333333;
  734. }
  735. .leagueName {
  736. width: 2.26rem;
  737. }
  738. .leagueMatch .teamName {
  739. text-align: center;
  740. }
  741. .teamName .vs {
  742. text-align: center;
  743. font-size: 0.24rem;
  744. color: #fd8f26;
  745. }
  746. .leagueMatch .time {
  747. width: 1.3rem;
  748. color: #333333;
  749. font-size: 0.24rem;
  750. text-align: center;
  751. }
  752. .leagueMatch .icon i {
  753. display: inline-block;
  754. width: 0.4rem;
  755. height: 0.4rem;
  756. background: url("../../../assets/st-imges/xiangxia.png") no-repeat;
  757. background-size: 100% 100%;
  758. transform: rotate(180deg);
  759. }
  760. .leagueMatch .rotate {
  761. transform: rotate(180deg);
  762. transition: 0.2s;
  763. }
  764. .leagueMatch .backRotate {
  765. transform: rotate(0deg);
  766. transition: 0.2s;
  767. }
  768. .box {
  769. padding: 0 0.14rem;
  770. background: #f8f8f8;
  771. }
  772. #NavSlide {
  773. width: 100%;
  774. overflow: hidden;
  775. height: 0.88rem;
  776. }
  777. #NavSlide nav {
  778. display: -webkit-box;
  779. display: -ms-flexbox;
  780. display: flex;
  781. -webkit-box-align: middle;
  782. -ms-flex-align: middle;
  783. align-items: middle;
  784. overflow: auto;
  785. }
  786. #NavSlide p {
  787. text-align: center;
  788. font-size: 0.28rem;
  789. -ms-flex-negative: 0;
  790. flex-shrink: 0;
  791. padding: 0 0.2rem 0 0;
  792. margin: 0 0.1rem 0 0;
  793. color: #b8b8b8;
  794. height: 0.88rem;
  795. line-height: 0.88rem;
  796. }
  797. /* #NavSlide p a{
  798. color: #E5E5E5;
  799. text-decoration: none;
  800. } */
  801. #NavSlide p span.active {
  802. color: #363636;
  803. }
  804. #NavSlide .fixadd {
  805. position: absolute;
  806. right: -4px;
  807. background-color: #31c17b;
  808. }
  809. button.yd-btn-block {
  810. background: #f8f8f8;
  811. position: absolute;
  812. left: 0;
  813. top: 0;
  814. width: 100%;
  815. height: 100%;
  816. /* z-index: -1; */
  817. margin: 0;
  818. opacity: 0;
  819. }
  820. .modality {
  821. text-align: center;
  822. background: #fbfbfb;
  823. padding: 0.2rem 0;
  824. height: 5rem;
  825. /* overflow: hidden; */
  826. }
  827. .modality span {
  828. color: #000000;
  829. font-size: 0.28rem;
  830. }
  831. .modality div {
  832. /* margin: 0.06rem 0; */
  833. padding: 0.2rem 0;
  834. background: #fbfbfb;
  835. border-bottom: 1px solid #e4e4e4;
  836. }
  837. .modality div .col {
  838. color: #fd8f26;
  839. }
  840. .lod{
  841. z-index: 999;
  842. position: fixed;
  843. width: 100%;
  844. }
  845. /* 滚球足球头部 */
  846. /* 棒球头部 */
  847. .bqHead {
  848. background: url("../../../assets/st-imges/1baseball.png") no-repeat;
  849. background-size: 100% 100%;
  850. font-size: 0.18rem;
  851. }
  852. .zqHead {
  853. color: #fff;
  854. background: url("../../../assets/st-imges/1football.png") no-repeat;
  855. background-size: 100% 100%;
  856. font-size: 0.18rem;
  857. }
  858. .eliminate span {
  859. display: block;
  860. width: 0.1rem;
  861. height: 0.1rem;
  862. background: #ccc;
  863. transform: rotate(45deg);
  864. }
  865. .spanBox {
  866. background: orange !important;
  867. }
  868. .ballhold{
  869. /* color:#fff; */
  870. font-size: 0.2rem;
  871. margin-right: 4px;
  872. }
  873. .current{
  874. color: orange;
  875. }
  876. .session{
  877. width:0.3rem;
  878. }
  879. .mark{
  880. background: hsla(0, 0%, 100%, 0.25);
  881. }
  882. .scoreInfo{
  883. line-height: 0.5rem;
  884. padding: 0 0.1rem ;
  885. }
  886. .mg-session{
  887. width:0.7rem;
  888. }
  889. .bqHead .pd-10 {
  890. padding: 0.1rem;
  891. }
  892. .bqHead .tit {
  893. display: flex;
  894. align-items: center;
  895. justify-content: space-between;
  896. }
  897. .match .info {
  898. background: rgba(0, 0, 0, 0.5);
  899. height: 0.52rem;
  900. line-height: 0.52rem;
  901. font-size: 15px;
  902. text-align: center;
  903. font-size: 0.28rem;
  904. }
  905. .match .info .pk,
  906. .match .tit .scene {
  907. font-weight: bold;
  908. color: rgb(254, 146, 0);
  909. }
  910. .tit .time {
  911. color: #bd4700;
  912. }
  913. .tit span{
  914. font-size: 0.26rem;
  915. }
  916. .welcome {
  917. height: 0.36rem;
  918. line-height: 0.36rem;
  919. font-size: 0.16rem;
  920. padding: 0 0.1rem;
  921. background: #4e4e4e;
  922. color: black;
  923. }
  924. /* 篮球头部 */
  925. .header .match{
  926. background: #c28d47;
  927. background-image: url("../../../assets/st-imges/1basketball.png") no-repeat;
  928. background-size: 100% 100%;
  929. color: #fff;
  930. }
  931. .flex{
  932. display: flex;
  933. justify-content: space-between;
  934. align-items: center;
  935. }
  936. .header .match .live{
  937. padding: 0.06rem;
  938. }
  939. /* .live .tit{
  940. height: 30px;
  941. line-height: 30px;
  942. font-size: 0.14rem;
  943. } */
  944. .match .info{
  945. margin-top: 0.1rem;
  946. position: relative;
  947. height: auto;
  948. background: rgba(0,0,0,.5);
  949. line-height: 52px;
  950. font-size: 15px;
  951. text-align: center;
  952. }
  953. .infoBody{
  954. background: #000;
  955. opacity: .85;
  956. height: 0.52rem;
  957. padding-left: 0.1rem;
  958. font-size: 0.14rem;
  959. }
  960. .matchTime span{
  961. display: inline-block;
  962. }
  963. .matchTime .scene{
  964. color: #ff9200;
  965. margin-right: 0.06rem;
  966. }
  967. .matchTime .time{
  968. color: #b4b4b4;
  969. }
  970. .right_info_row_qt{
  971. width: 0.85rem;
  972. font-size: 0.12rem;
  973. text-align: center;
  974. /* padding: 0.04rem; */
  975. color: #787878;
  976. /* box-sizing: border-box; */
  977. /* font-weight: 700;
  978. font-family: serif; */
  979. }
  980. .infoRow{
  981. padding-left: 0.1rem;
  982. }
  983. .scence{
  984. width: 0.75rem;
  985. padding: 0;
  986. /* padding-top: 0.19rem; */
  987. }
  988. .infoItem{
  989. height: 0.5rem;
  990. line-height: 0.24rem;
  991. width: auto
  992. }
  993. .infoBox{
  994. width: 2.73rem;
  995. height:0.5rem;
  996. display: flex;
  997. align-items: center;
  998. justify-content: space-between;
  999. /* right: 0; */
  1000. /* position: absolute; */
  1001. }
  1002. .infoBox > div{
  1003. width: .75rem;
  1004. }
  1005. .infoNum{
  1006. width: 0.25rem;
  1007. font-size: 0.13rem;
  1008. line-height: 0.28rem;
  1009. padding: 0;
  1010. height: 100%;
  1011. line-height: 0.5rem;
  1012. color: #fff;
  1013. font-weight: 400;
  1014. text-align: center;
  1015. font-family: sans-serif;
  1016. }
  1017. .scenceNum{
  1018. background: hsla(0,0%,100%,.16);
  1019. width: 0.52rem;
  1020. margin-left: 1px;
  1021. }
  1022. .infoItem .team{
  1023. font-size: 0.16rem;
  1024. }
  1025. .col{
  1026. color: #ff9200;
  1027. }
  1028. .ycol{
  1029. color:#dcbc4c;
  1030. }
  1031. /* 网球头部 */
  1032. .tennisHead {
  1033. background: url("../../../assets/st-imges/tennisball.png") no-repeat;
  1034. background-size: 100% 100%;
  1035. width: 100%;
  1036. height: auto;
  1037. }
  1038. .ordinaryHead .match .info{
  1039. display: flex;
  1040. }
  1041. .match {
  1042. color: #fff;
  1043. height: auto;
  1044. }
  1045. .match .tit {
  1046. height: 0.32rem;
  1047. line-height: 0.32rem;
  1048. /* margin-top: -4px; */
  1049. }
  1050. .ballTable{
  1051. background: rgba(0, 0, 0, 0.2);
  1052. }
  1053. .listHead {
  1054. padding: 0 0.1rem;
  1055. line-height: 0.5rem;
  1056. background: rgba(0, 0, 0, 0.15);
  1057. color: #fff;
  1058. }
  1059. .listHead .txt-c-0 {
  1060. color: orange;
  1061. }
  1062. .listHead .spanCol{
  1063. color: orange;
  1064. }
  1065. .headerTop {
  1066. width: 50%;
  1067. }
  1068. .score {
  1069. width: 50%;
  1070. }
  1071. .score span {
  1072. display: inline-block;
  1073. width: 0.3rem;
  1074. text-align: center;
  1075. }
  1076. .score span.mg-5 {
  1077. width: 0.7rem;
  1078. }
  1079. .headerTop span {
  1080. display: inline-block;
  1081. width: 0.3rem;
  1082. text-align: center;
  1083. }
  1084. .headerTop span.mg-5 {
  1085. width: 0.7rem;
  1086. }
  1087. .mark {
  1088. background: hsla(0, 0%, 100%, 0.25);
  1089. }
  1090. .list {
  1091. background: hsla(0, 0%, 100%, 0.2);
  1092. line-height: 0.4rem;
  1093. padding: 0 0.1rem;
  1094. color: #fff;
  1095. }
  1096. .cl {
  1097. color: orange;
  1098. }
  1099. .sumCl {
  1100. color: #ff0;
  1101. }
  1102. .welcome{
  1103. height: .5rem;
  1104. line-height: 0.5rem;
  1105. font-size: 0.16rem;
  1106. padding: 0 0.1rem;
  1107. background: #898989;
  1108. color: #fff;
  1109. }
  1110. .ordinaryHead {
  1111. background: url("../../../assets/st-imges/1football.png") no-repeat;
  1112. background-size: 100% 100%;
  1113. /* padding: 0.04rem; */
  1114. /* height: 1.2rem; */
  1115. /* line-height: 1.2rem; */
  1116. }
  1117. .ordinaryHead .match {
  1118. color: #fff;
  1119. }
  1120. .ordinaryHead .match .info {
  1121. padding: 0 0.2rem;
  1122. display: flex;
  1123. justify-content: space-between;
  1124. align-items: center;
  1125. }
  1126. .ordinaryHead .match .info div span{
  1127. font-size: 0.22rem;
  1128. }
  1129. .match .time {
  1130. font-weight: 400;
  1131. color: #bd4700;
  1132. margin-left: 0.05rem;
  1133. }
  1134. .live-score {
  1135. padding: 0 8%;
  1136. }
  1137. .attack{
  1138. color: rgb(197, 210, 60);
  1139. }
  1140. </style>