onecric_h5/pages/Live/compontent/detail-live.vue

<template>
  <view class="live">
    <scroll-view
      class="scroll-view"
      :scroll-y="true"
      :refresher-enabled="true"
      :refresher-triggered="triggered"
      :refresher-threshold="100"
      @refresherpulling="onPulling"
      @refresherrefresh="onRefresh"
      @scrolltolower="scrolltolower"
      @refresherabort="onAbort"
    >
      <view
        class="size28 c3 mg-bt24"
        v-for="(item, index) in info"
        :key="index"
      >
        <!-- 				<view class="size28 c3 mg-bt24">
					<text class="size32 Bold mg-rt20">2.36am </text>
					{{item.commentaries}}
				</view> -->

        <!-- <u-divider class="mg-bt24" lineColor="#E5E5E5"></u-divider> -->

        <view>
          <view class="li" style="display: flex" v-if="item.type === 1">
            <view class="size32 c3 Bold live-item">
              <text class="indexNumber">{{ item.display_overs }}</text>
              <text
                class="live-item-text"
                :class="
                  item.runs_scored == 'w'
                    ? 'live-item-text-red'
                    : item.runs_scored == '4'
                    ? 'live-item-text-green'
                    : item.runs_scored == '6'
                    ? 'live-item-text-green'
                    : item.runs_scored == '8'
                    ? 'live-item-text-green'
                    : 'live-item-text-block'
                "
                >{{ item.runs_scored }}</text
              >
            </view>
            <view class="size28 c3 live-item">
              <text>{{ item.commentaries }}</text>
            </view>
          </view>
        </view>
        <view class="green-card" v-if="item.type === 2">
          <u-row>
            <u-col span="8" class="flex">
              <view class="flex-start">
                <view class="over17 size28 c6">
                  OVER <br />
                  <text class="size32">{{ item.serial_number }}</text>
                </view>
                <view class="size24 c6">
                  {{ item.head.sessions_number }} <br />
                  <text class="size28 mg-tp16 c3 Bold">
                    {{ item.head.sum }}Runs</text
                  >
                </view>
              </view>
            </u-col>
            <u-col span="4">
              <view
                class="size24 c6 pd-lt21"
                style="border-left: 1rpx solid #b1d9ff"
              >
                {{ item.head.country_code }}<br />
                <text class="size28 mg-tp16 c3 Bold">{{
                  item.head.display_score
                }}</text>
              </view>
            </u-col>
          </u-row>
          <u-line color="#b1d9ff"></u-line>
          <u-row>
            <u-col span="6">
              <view class="size24 c6">
                {{ item.head.striker.name }}<br />
                <text class="size28 mg-tp16 c3 Bold">{{
                  item.head.striker.runs_scored_so_far
                }}</text
                >({{ item.head.striker.balls_faced_so_far }})
              </view>
            </u-col>
            <u-col span="6">
              <view class="size24 c6">
                {{ item.head.non_striker.name }}<br />
                <text class="size28 mg-tp16 c3 Bold">{{
                  item.head.non_striker.runs_scored_so_far
                }}</text
                >({{ item.head.non_striker.balls_faced_so_far }})
              </view>
            </u-col>
            <u-line direction="col" color="#219430"></u-line>
          </u-row>
        </view>
      </view>

      <u-empty
        v-if="info.length == 0"
        :show="loadingData"
        mode="data"
        width="474"
        height="312"
        textSize="28"
        marginTop="100"
        :text="$t('common.nodata')"
        icon="/static/image/common/nodata.png"
      >
      </u-empty>
      <u-loadmore
        v-if="info.length != 0"
        :status="status"
        fontSize="28"
        :line="true"
        :loading-text="statusType.loadingText"
        :loadmore-text="statusType.loadmoreText"
        :nomore-text="statusType.nomoreText"
      />
    </scroll-view>
  </view>
</template>

<script>
export default {
  props: {
    matchDetail: {
      default: {}
    }
  },
  data() {
    return {
      info: [],
      loadingData: false,
      page: 1,
      triggered: false,
      _freshing: false,
      statusType: {
        loadingText: this.$t('common.lab'),
        loadmoreText: this.$t('common.lab1'),
        nomoreText: this.$t('common.lab2')
      },
      id: "",
    };
  },
  created() {
    uni.showLoading({
      title: this.$t('common.lab'),
    });
    this.cricket_match_detail_live()
    this._freshing = false;
  },
  methods: {
    onPulling(e) {
    },
    onRefresh() {
        if (this._freshing) return;
        this.triggered = true
        this._freshing = true;
        this.page = 1
        this.cricket_match_detail_live()
    },
    scrolltolower() {
      console.log('scrolltolower')
    },
    onAbort() {
    },
    cricket_match_detail_live(id) {
      this.status = "loading";
      if (this.page == 1) {
        this.triggered = true
      }
      this.loadingData = false
      uni.$u.http
        .post("/api/Cricket/cricket_match_detail_live_new", {
          match_id: this.matchDetail.match_id,
          page: this.page,
        })
        .then((res) => {
          if (this.page == 1) {
            this.info = res;
          } else {
            this.info = this.info.concat(res);
          }
          if (res.total > this.info.length) {
            this.status = "loadmore";
            this.page++;
          } else {
            this.status = "nomore";
          }
        })
        .finally((res) => {
          uni.hideLoading();
          this.loadingData = true;
          this.triggered = false;
          this._freshing = false;
        });
    },
  },
};
</script>

<style lang="scss">
.live {
	padding: 12px 15rpx;
  .scroll-view {
    height: calc(100vh - 320px)
  }
  .li {
    background-color: #fff;
    padding: 16rpx;
    border-radius: 5px;
  }
  .live-item {
    display: flex;
    flex-direction: column;
    .live-item-text {
      display: block;
      border-radius: 100rpx;
      color: #fff;
      width: 36rpx;
      height: 36rpx;
      background-color: #219430;
      text-align: center;
      line-height: 36rpx;
    }

    .live-item-text-green {
      background-color: green !important;
    }

    .live-item-text-red {
      background-color: red !important;
    }

    .live-item-text-block {
      background-color: #999999 !important;
      opacity: 0.7;
    }

    text {
      // flex: 1;
    }

    .indexNumber {
      width: 76rpx;

      text {
        display: block;
        border-radius: 100rpx;
        color: #fff;
        width: 36rpx;
        height: 36rpx;
        background-color: #219430;
        text-align: center;
        line-height: 36rpx;
      }
    }

    .indexRed {
      width: 76rpx;

      text {
        display: block;
        border-radius: 100rpx;
        color: #fff;
        width: 36rpx;
        height: 36rpx;
        background-color: red;
        text-align: center;
        line-height: 36rpx;
      }
    }
  }

  .green-card {
    background-color: #f3f8fe;
    margin-bottom: 8px;
    .u-row {
      padding: 24rpx;

      .over17 {
        background: #d8ecff;
        border-radius: 10rpx;
        border: 1rpx solid #b1d9ff;
        text-align: center;
        width: 101rpx;
        margin-right: 24rpx;
      }

      .u-col {
        text {
          display: inline-block;
        }

        &:last-child {
          border-left: 1rpx solid #b1d9ff;
        }
      }
    }
  }
}
@media screen and (orientation: landscape) {
  .live {
    .scroll-view {
      height: 50vh;
    }
  }
}
</style>