123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504 |
- <template>
- <view class="Info">
- <view class="selection">
- <div class="title">
- <!-- Tournament -->
- {{ $t('live.lab2') }}
- </div>
- <view class="list">
- <u-row justify="space-between" @click="$toUrl(`/pages/Match/match-list?id=${matchDetail.tournament_id}&title=${detail_info.tournament_name}&type=${detail_info.type}`)">
- <view class="selection-info">
- <view class="flex-start">
- <text class="size28 c3 Bold">
- {{detail_info.tournament_name}}
- </text>
- </view>
- </view>
- <image src="/static/image/match/next_ico@2x.png" mode="heightFix" class="detail-right"></image>
- </u-row>
- </view>
- </view>
- <view class="selection">
- <text class="title">
- <!-- Teams -->
- {{ $t('live.lab1') }}
- </text>
- <view class="list">
- <u-row justify="space-between" @click="$toUrl(`/pages/Match/teams/teams?id=${detail_info.home_id}&title=${detail_info.home_name}`)">
- <view class="selection-info">
- <image :src="detail_info.home_logo || '/static/image/common/team.png'" mode="aspectFit" class="mg-rt24"></image>
- <view class="flex-start">
- <text class="size28 c3 Bold">
- {{detail_info.home_name}}
- </text>
- <view class="mg-tp8">
- <!-- <text class="c6 size24 bgE5">TOSS</text> -->
- <!-- <text class="size26 c4">
- {{detail_info.home_member}}
- </text> -->
- </view>
- </view>
- </view>
- <image src="/static/image/match/next_ico@2x.png" mode="heightFix" class="detail-right"></image>
- </u-row>
- <u-row justify="space-between" @click="$toUrl(`/pages/Match/teams/teams?id=${detail_info.away_id}&title=${detail_info.away_name}`)">
- <view class="selection-info">
- <image :src="detail_info.away_logo || '/static/image/common/team.png'" mode="aspectFit" class="mg-rt24"></image>
- <view class="flex-start">
- <text class="size28 c3 Bold">
- {{detail_info.away_name}}
- </text>
- <view class="mg-tp8">
- <!-- <text class="c6 size24 bgE5">TOSS</text> -->
- <!-- <text class="size26 c4">
- {{detail_info.away_member}}
- </text> -->
- </view>
- </view>
- </view>
- <image src="/static/image/match/next_ico@2x.png" mode="heightFix" class="detail-right"></image>
- </u-row>
- </view>
- </view>
- <view class="selection">
- <text class="title">
- <!-- Match Details -->
- {{ $t('live.lab3') }}
- </text>
- <view class="list">
- <view class="list-item">
- <text class="label">
- <!-- Match -->
- {{ $t('live.lab4') }}
- </text>
- <view class="content">
- {{detail_info.match}}
- </view>
- </view>
- <view class="list-item">
- <text class="label">
- <!-- Match Start Time -->
- {{ $t('live.lab5') }}
- </text>
- <view class="content">
- {{detail_info.match_start_time}}
- </view>
- </view>
- <view class="list-item" v-if="detail_info.venue_name">
- <text class="label">
- <!-- Stadium/Venue -->
- {{ $t('live.lab6') }}
- </text>
- <view class="content cDE9">
- {{detail_info.venue_name || '-'}}
- </view>
- </view>
- <view class="list-item">
- <text class="label">
- <!-- Toss -->
- {{ $t('live.lab57') }}
- </text>
- <view class="content">
- {{detail_info.toss || '-'}}
- </view>
- </view>
- <!-- <view class="list-item">
- <text class="label">Match Officials</text>
- <view class="content">
- Hassan Adnan (On Field),Richard Kettleborough
- (On Field),Wayne Noon (referee)
- </view>
- </view> -->
- </view>
- </view>
- <view class="selection">
- <text class="title">
- <!-- Playing XI -->
- {{ $t('live.lab7') }}
- </text>
- <view class="list">
- <view class="list-item">
- <text class="label">{{detail_info.home_name}}</text>
- <view class="content1">
- {{detail_info.home_member}}
- </view>
- </view>
- <view class="list-item">
- <text class="label">{{detail_info.away_name}}</text>
- <view class="content1">
- {{detail_info.away_member}}
- </view>
- <view class="full">
- <!-- View Full Squad Info -->
- {{ $t('live.lab8') }}
- </view>
- </view>
- </view>
- </view>
- <view class="flex-end selection-table-title">
- <text class="label">
- <!-- Updated 12 hrs ago -->
- {{ $t('live.lab9') }}
- </text>
- </view>
- <view class="selection-table">
- <view >
- <!-- 表头行 -->
- <u-row class="tr-header">
- <view class="text-center">#</view>
- <view class="text-center">
- <!-- TEAM -->
- {{ $t('live.lab25') }}
- </view>
- <view class="text-center">P</view>
- <view class="text-center">W</view>
- <view class="text-center">L</view>
- <view class="text-center">NR</view>
- <view class="text-center">NRR</view>
- <view class="text-center">PTS</view>
- </u-row>
-
- <!-- 表格数据行 -->
- <view v-for="(item,index) in tournament_list" :key="index" :class="{actives:acIndex == index}">
- <u-line color="#CCCCCC"></u-line>
- <u-row @click="clickItem(index)">
- <view class="trc6">{{index+1}}</view>
- <view class="trc3">{{item.competitor || 0}}</view>
- <view class="trc6">{{item.p || 0}}</view>
- <view class="trc6">{{item.w || 0}}</view>
- <view class="trc6">{{item.l || 0}}</view>
- <view class="trc6">{{item.nr || 0}}</view>
- <view class="trc6">{{item.nrr || 0}}</view>
- <view>
- <view class="flex pts">
- <text class="trc3 size28 mg-rt30 Bold"> {{item.pts}} </text>
- <image src="/static/image/match/expert_down_ico.png" mode="aspectFill"></image>
- </view>
- </view>
- </u-row>
-
- <view class="table-item-content" :class="{'active': acIndex==index}">
- <view class="table-item-content-th">
- <text class="label">
- {{ $t('live.lab10') }}
- </text>
- <text class="label">
- {{ $t('live.lab11') }}
- </text>
- <text class="label">
- {{ $t('live.lab12') }}
- </text>
- <text class="label">
- {{ $t('live.lab13') }}
- </text>
- </view>
- <view class="table-item-content-tr" v-for="(item1,index1) in item.match" :key="index1">
- <text class="td">{{item1.competitor}}</text>
- <text class="td1">{{item1.date}}</text>
- <text class="td1">{{item1.venue_name}}</text>
- <text class="td1 overflow1" :class="classFilter(item1.winner) == 1">{{item1.match_result}}</text>
- </view>
- </view>
- </view>
- </view>
- <u-empty
- v-if="tournament_list.length == 0"
- mode="data"
- width="474"
- height="312"
- textSize="28"
- marginTop="100"
- :text="$t('common.nodata')"
- icon="/static/image/common/nodata.png"
- >
- </u-empty>
- </view>
-
- <view class="selection" style="margin-top: 20rpx;">
- <view class="title">
- {{ $t('live.lab14') }}
- </view>
- <view class="li">
- <text class="D4199">#:</text>
- {{ $t('live.lab15') }}
- </view>
- <view class="li">
- <text class="D4199">
- {{ $t('live.lab16') }}:</text>
- {{ $t('live.lab17') }}
- </view>
- <view class="li">
- <text class="D4199">P:</text>
- {{ $t('live.lab18') }}
- </view>
- <view class="li">
- <text class="D4199">W:</text>
- {{ $t('live.lab19') }}
- </view>
- <view class="li">
- <text class="D4199">D:</text>
- {{ $t('live.lab20') }}
- </view>
- <view class="li">
- <text class="D4199">L:</text>
- {{ $t('live.lab21') }}
- </view>
- <view class="li">
- <text class="D4199">NR:</text>
- {{ $t('live.lab22') }}
- </view>
- <view class="li">
- <text class="D4199">NRR:</text>
- {{ $t('live.lab23') }}
- </view>
- <view class="li">
- <text class="D4199">PTS:</text>
- {{ $t('live.lab24') }}
- </view>
- <!-- <view class="li">
- <text class="cfff qqs">Q</text>:
- {{ $t('live.lab24') }}
- </view> -->
- </view>
- </view>
- </template>
- <script>
- export default {
- props: {
- matchDetail: {
- default: {}
- }
- },
- data() {
- return {
- acIndex:null,
- detail_info:{},
- tournament_list:[]
- }
- },
- created() {
- this.cricket_tournament_standings()
- this.cricket_match_detail_info()
- },
- methods:{
- clickItem(index){
- console.log('index :>> ', index);
- this.acIndex=(this.acIndex==index?null:index)
- console.log(this.acIndex);
- },
- /* 积分 */
- cricket_tournament_standings() {
- uni.$u.http.post('/api/Cricket/cricket_tournament_standings',{
- tournament_id: this.matchDetail.tournament_id
- }).then(res=>{
- this.tournament_list = res;
- }).catch(res=>{})
- },
- /* 详情 */
- cricket_match_detail_info() {
- let time = new Date();
- let timeZone = time.toLocaleTimeString('en-us',{timeZoneName:'short'}); //'1:12:38 PM GMT+8'
- let timeZoneId = Intl.DateTimeFormat().resolvedOptions().timeZone; //'Asia/Shanghai'
- uni.$u.http.post('/api/Cricket/cricket_match_detail_info',{
- match_id: this.matchDetail.match_id,
- timezone: timeZoneId
- }).then(res=>{
- this.detail_info = res;
- }).finally(() => {
- })
- },
- classFilter(key) {
- return key == 1 ? 'c430' : key == 2 ? 'cC23' : 'c666'
- }
- }
- }
- </script>
- <style lang="scss">
- .Info{
- padding: 12px 15rpx;
- .selection{
- background-color: #fff;
- margin-bottom: 10px;
- border-radius: 5px;
- overflow: hidden;
- .title {
- line-height: 33px;
- background-color: rgba(16, 5, 74, .1);
- padding: 0 28rpx;
- font-size: 17px;
- font-weight: 700;
- color: #242424;
- display: block;
- }
- .list{
- padding: 0 28rpx;
- .u-row{
- padding: 36rpx 0;
- border-bottom: 1rpx solid #ccc;
- &:last-child{
- border: none;
- }
- .selection-info{
- display: flex;
- image{
- width: 80rpx;
- height: auto;
- }
- }
- .detail-right{
- width: 48rpx;
- height: 48rpx;
- }
- }
-
- .list-item{
- padding: 24rpx 0;
- &+.list-item {
- border-top: 1rpx solid #d1d1d1;
- }
- }
- }
- .label {
- font-size: 12px;
- color: #939292;
- }
- .content {
- font-size: 17px;
- color: #242424;
- &.cDE9 {
- color: #0C52D2;
- }
- }
- .content1 {
- font-size: 15px;
- color: #242424;
- }
- .full {
- font-size: 15px;
- font-weight: 700;
- color: #ff3300;
- text-align: center;
- padding-top: 25px;
- padding-bottom: 8px;
- }
- }
- .selection-table-title{
- padding: 36rpx 28rpx 36rpx 0;
- }
- .selection-table{
- background-color: #fff;
- border-radius: 5px;
- overflow: hidden;
- .tr-header{
- background-color: rgba(16, 5, 74, .1);
- color: #484A4D;
- font-size: 12px;
- }
- .pts{
- image{
- width: 19rpx;
- height: 19rpx;
- transition: all 0.5s ease;
- }
- }
- .u-row{
- display: grid;
- grid-template-columns: 10% 15% 10% 10% 10% 10% 20% 10%;
- grid-template-rows:74rpx;
- transition: all 0.5s ease;
- font-size: 12px;
- }
- .trc6{
- color: #666;
- text-align: center;
- }
- .trc3{
- color: #333;
- text-align: center;
- }
- .table-item-content{
- height: 0rpx;
- overflow: hidden;
- line-height: 66rpx;
- transition: all 0.5s ease;
- height: 0;
- &.active {
- height: 100%;
- padding: 24rpx 28rpx 0;
- }
- .table-item-content-th{
- height: 27px;
- background: rgba(16, 5, 74, .1);
- border-radius: 10rpx;
- display: grid;
- grid-template-columns: 15% 20% 25% 40%;
- grid-template-rows:27px;
- padding-left: 24rpx;
- color: #505255;
- align-items: center;
- font-size: 12px;
- }
- .table-item-content-tr{
- display: grid;
- grid-template-columns: 15% 20% 25% 40%;
- grid-template-rows:70rpx;
- min-height: 70rpx;
- padding-left: 24rpx;
- }
- .td {
- font-size: 14px;
- color: #282828;
- }
- .td1 {
- font-size: 12px;
- color: #5A5C5F;
- }
- }
- .actives{
- .u-row{
- background-color: #1D2550;
- }
- .trc6{
- color: #999;
- }
- .trc3{
- color: #fff;
- }
- .pts{
- image{
- transform: rotateZ(180deg);
- }
- }
- // .table-item-content{
- // height: max-content;
- // }
- }
- }
- .li {
- font-size: 14px;
- font-weight: 400;
- text-align: left;
- color: #242424;
- line-height: 1;
- display: flex;
- align-items: center;
- height: 39px;
- .D4199 {
- color: #4D4199;
- display: inline-block;
- width: 50px;
- text-align: right;
- padding-right: 19px;
- }
- }
- .qqs{
- font-size: 28rpx;
- background-color: #EEA831;
- display: inline-block;
- padding: 0 8rpx;
- border-radius: 100rpx;
- }
- }
- </style>
|