onecric_h5/pages/Match/search.vue

<template>
  <div>
    <div class="top-box">
      <div class="header">
        <u-icon name="arrow-left" @click="back" color="#fff" size="40"></u-icon>
        <u--input
          color="#fff"
          v-model="tournamentName"
          :placeholder="$t('match.lab86')"
          prefixIcon="search"
          prefixIconStyle="font-size: 28px;color: #909399"
        >
          <template slot="suffix">
            <img
              class="close"
              @click="tournamentName = ''"
              src="/static/image/match/close.png"
              alt=""
            />
          </template>
        </u--input>
      </div>
      <div
        class="tab"
        v-if="
          tournamentName.length >= 3 && (matchList.length || tourList.length)
        "
      >
        <div
          class="item"
          :class="{ active: type == '' }"
          @click="changeType('')"
        >
          <!-- All -->
          {{ $t('match.labe58') }}
        </div>
        <div
          class="item"
          v-if="matchList.length"
          :class="{ active: type == 'match' }"
          @click="changeType('match')"
        >
          <!-- Matches -->
          {{ $t('match.lab83') }}
        </div>
        <div
          class="item"
          v-if="tourList.length"
          :class="{ active: type == 'tour' }"
          @click="changeType('tour')"
        >
          <!-- Tours -->
          {{ $t('match.lab88') }}
        </div>
      </div>
    </div>
    <div class="no-input" v-if="tournamentName.length < 3">
      <u-icon name="error-circle" color="#DC3C23" size="30"></u-icon>
      <!-- Enter at
      least 3 characters to auto search... -->
      {{ $t('match.lab59') }}
    </div>
    <div v-else>
      <div
        v-if="
          matchList.length == 0 && tourList.length == 0 && !loading && !timer
        "
        class="no-data"
      >
        <img class="no" src="/static/image/match/no_tag.png" alt="" />
        <div class="result">{{ $t('match.lab60') }}‘{{ tournamentName }}’</div>
        <div class="text">{{ $t('match.lab61') }}</div>
      </div>
      <template v-if="(matchList.length || tourList.length)">
        <div class="box1" v-if="type == ''">
          <div class="match-list" v-if="matchList.length">
            <div class="lab-title" @click="type = 'match'">
              <!-- Matches -->
              {{ $t('match.lab83') }}
              <u-icon name="arrow-right" color="#333" size="32"></u-icon>
            </div>
            <div
              class="item"
              v-for="item in matchList.slice(0, 9)"
              :key="item.id"
              @click="toDetail(item)"
            >
              <img
                class="icon"
                src="/static/image/match/search_list_icon.png"
                alt=""
              />
              <div class="title">{{ item.title }}</div>
              <div class="text">{{ item.content }}</div>
              <div class="tag">
                {{ statusText[item.status] }}
              </div>
            </div>
          </div>
          <div class="tour-list" v-if="tourList.length">
            <div class="lab-title" @click="type = 'tour'">
              <!-- Tours -->
             {{ $t('match.lab88') }}
              <u-icon name="arrow-right" color="#333" size="32"></u-icon>
            </div>
            <div
              class="item"
              v-for="item in tourList.slice(0, 9)"
              :key="item.id"
              @click="toMatchList(item)"
            >
              <div class="icon-box">
                <img
                  class="icon"
                  src="/static/image/match/search_list_icon1.png"
                  alt=""
                />
              </div>
              <div class="text">{{ item.content }}</div>
              <div class="title">{{ item.name }}</div>
            </div>
          </div>
        </div>
        <div class="box1" v-if="type == 'match'">
          <div class="match-list">
            <div class="lab-title">
              <!-- Matches -->
             {{ $t('match.lab83') }}
            </div>
            <scroll-view
              class="scroll"
              :scroll-y="true"
              @scrolltolower="scrolltolower"
            >
              <div
                class="item"
                v-for="item in matchList"
                :key="item.id"
                @click="toDetail(item)"
              >
                <img
                  class="icon"
                  src="/static/image/match/search_list_icon.png"
                  alt=""
                />
                <div class="title">{{ item.title }}</div>
                <div class="text">{{ item.content }}</div>
                <div class="tag">
                  {{ statusText[item.status] }}
                </div>
              </div>
              <u-loadmore
                :status="status"
                fontSize="28"
                :line="true"
                :loading-text="statusType.loadingText"
                :loadmore-text="statusType.loadmoreText"
                :nomore-text="statusType.nomoreText"
              />
            </scroll-view>
          </div>
        </div>
        <div class="box1" v-if="type == 'tour'">
          <div class="tour-list">
            <div class="lab-title">
              <!-- Tours -->
             {{ $t('match.lab88') }}
            </div>
            <scroll-view
              class="scroll"
              :scroll-y="true"
              @scrolltolower="scrolltolower1"
            >
              <div
                class="item"
                v-for="item in tourList"
                :key="item.id"
                @click="toMatchList(item)"
              >
                <div class="icon-box">
                  <img
                    class="icon"
                    src="/static/image/match/search_list_icon1.png"
                    alt=""
                  />
                </div>
                <div class="text">{{ item.content }}</div>
                <div class="title">{{ item.name }}</div>
              </div>
              <u-loadmore
                :status="status1"
                fontSize="28"
                :line="true"
                :loading-text="statusType.loadingText"
                :loadmore-text="statusType.loadmoreText"
                :nomore-text="statusType.nomoreText"
              />
            </scroll-view>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tournamentName: "",
      type: "",
      status: "loadmore",
      status1: "loadmore",
      matchList: [],
      tourList: [],
      matchPage: 1,
      tourPage: 1,
      matchTotal: 1,
      tourTotal: 1,
      timer: null,
      loading: true,
      statusType: {
        loadingText: this.$t('common.lab'),
        loadmoreText: this.$t('common.lab1'),
        nomoreText: this.$t('common.lab2')
      },
    };
  },
  computed: {
    statusText() {
      return [this.$t('match.labe62'), this.$t('match.labe63'), this.$t('match.labe64')];
    },
  },
  watch: {
    tournamentName(val) {
      if (this.timer) {
        clearTimeout(this.timer);
        this.timer = null;
      }
      this.matchList = []
      this.tourList = []
      if (val.length > 2) {
        this.timer = setTimeout(() => {
          this.matchPage = 1;
          this.tourPage = 1;
          this.type = "";
          this.getMacthList(true);
          this.getTourList(true);
        }, 1000);
      }
    },
  },
  created() {
  },
  methods: {
    changeType(type) {
      this.type = type;
    },
    // 获取公开赛列表
    getMacthList(reset) {
      if (reset) {
        uni.showLoading();
      } else {
        this.status = "loading";
      }
      this.loading = true;
      let timeZoneId = Intl.DateTimeFormat().resolvedOptions().timeZone; //'Asia/Shanghai'
      uni.$u.http
        .post("/api/Cricketnew/get_search", {
          timezone: timeZoneId,
          content: this.tournamentName,
          type: "match",
          page: this.matchPage,
        })
        .then((res) => {
          if (reset) {
            this.matchList = res.data || [];
          } else {
            this.matchList = this.matchList.concat(res.data || [])
          }
          this.matchTotal = res.total;
          if (this.matchList.length == this.matchTotal) {
            this.status = "nomore";
          } else {
            this.status = "loadmore";
          }
        })
        .finally(() => {
          this.timer = null;
          if (reset) {
            uni.hideLoading();
          }
          this.loading = false;
        });
    },
    getTourList(reset) {
      if (reset) {
        uni.showLoading();
      } else {
        this.status1 = "loading";
      }
      this.loading = true;
      let timeZoneId = Intl.DateTimeFormat().resolvedOptions().timeZone; //'Asia/Shanghai'
      uni.$u.http
        .post("/api/Cricketnew/get_search", {
          timezone: timeZoneId,
          content: this.tournamentName,
          type: "tour",
          page: this.tourPage,
        })
        .then((res) => {
          if (reset) {
            this.tourList = res.data || [];
          } else {
            this.tourList = this.tourList.concat(res.data || [])
          }
          this.tourTotal = res.total;
          if (this.tourList.length == this.tourTotal) {
            this.status1 = "nomore";
          } else {
            this.status1 = "loadmore";
          }
        })
        .finally(() => {
          if (reset) {
            uni.hideLoading();
          }
          this.timer = null;
          this.loading = false;
        });
    },
    scrolltolower() {
      if (this.status == "loadmore") {
        this.matchPage += 1
        this.getMacthList()
      }
    },
    scrolltolower1() {
      if (this.status1 == "loadmore") {
        this.tourPage += 1
        this.getTourList()
      }
    },
    back() {
      uni.switchTab({
        url: "/pages/Match/Match",
      });
    },
    toDetail(item) {
      this.$toUrl("./match-detail?id=" + item.id);
    },
    toMatchList(item) {
      uni.navigateTo({
        url: `./match-list?title=${item.name}&id=${item.id}&type=${item.type}}`,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
page {
  background-color: rgb(251, 251, 252);
}
.top-box {
  position: sticky;
  top: 0;
  background-color: #1d2550;
  z-index: 5;
  .header {
    padding: 22rpx 24rpx 22rpx 36rpx;
    display: flex;
    align-items: center;
    .close {
      width: 36rpx;
    }
    .u-input {
      flex: 1;
      margin-left: 25rpx;
      height: 60rpx;
      color: #fff;
      font-size: 28rpx;
      border: none;
      box-sizing: border-box;
      background-color: rgba(245, 245, 245, 0.3);
      border-radius: 30rpx;
    }
  }
  .tab {
    padding-top: 8rpx;
    padding-bottom: 12rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .item {
      height: 60rpx;
      display: flex;
      align-items: center;
      padding: 0 24rpx;
      border-radius: 30rpx;
      line-height: 42rpx;
      font-size: 30rpx;
      font-weight: 400;
      color: #ffffff;
      &.active {
        background-color: #2a3260;
      }
    }
  }
}

.no-input {
  height: 66rpx;
  background: #f3f3f7;
  display: flex;
  align-items: center;
  padding-left: 29rpx;
  line-height: 33rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: #333333;
  .u-icon {
    margin-right: 12rpx;
  }
}
.no-data {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-top: 273rpx;
  .no {
    display: block;
    width: 294rpx;
    margin-bottom: 37rpx;
  }
  .result {
    line-height: 45rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 12rpx;
    text-align: center;
  }
  .text {
    line-height: 33rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;
  }
}
.match-list {
  background-color: #fff;
  & + .tour-list {
    margin-top: 20rpx;
  }
  .lab-title {
    height: 88rpx;
    display: flex;
    align-items: center;
    line-height: 1;
    font-size: 30rpx;
    font-weight: bold;
    color: #333333;
    padding: 0 24rpx;
  }
  .item {
    position: relative;
    padding: 31rpx 170rpx 27rpx 109rpx;
    .title {
      line-height: 42rpx;
      font-size: 30rpx;
      font-weight: bold;
      color: #333333;
      margin-bottom: 10rpx;
    }
    .text {
      line-height: 30rpx;
      font-size: 22rpx;
      font-weight: 400;
      color: #333333;
    }
    .icon {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 24rpx;
      width: 70rpx;
    }
    .tag {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 24rpx;
      min-width: 128rpx;
      height: 32rpx;
      background: #f3f3f7;
      border-radius: 6rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18rpx;
      line-height: 1;
      font-weight: 400;
      color: #999999;
    }
  }
}
.tour-list {
  background-color: #fff;
  .lab-title {
    height: 88rpx;
    display: flex;
    align-items: center;
    line-height: 1;
    font-size: 30rpx;
    font-weight: bold;
    color: #333333;
    padding: 0 24rpx;
  }
  .item {
    position: relative;
    padding: 31rpx 24rpx 27rpx 109rpx;
    .title {
      line-height: 40rpx;
      font-size: 28rpx;
      font-weight: bold;
      color: #333333;
      margin-top: 7rpx;
    }
    .text {
      line-height: 30rpx;
      font-size: 22rpx;
      font-weight: 400;
      color: #333333;
    }
    .icon-box {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 24rpx;
      width: 70rpx;
      height: 70rpx;
      border-radius: 10rpx;
      border: 1px solid #cccccc;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .icon {
      width: 43rpx;
    }
  }
}
.scroll {
  height: calc(100vh - 272rpx);
}
</style>