admin_h5/pages/tournament/details.vue

<template>
  <view class="app-content" :class="{ 'pc-fixed-frame': isPc }">
    <view v-show="matchInfo.id">
      <view class="head">
        <view class="title"> {{ matchInfo?.matchName }} </view>
        <view class="time">
          <text class="iconfont">&#xe8b8;</text>
          <text class="text"
            >发布时间 {{ matchInfo?.publishTime || "--" }}</text
          >
        </view>
      </view>
      <view class="content">
        <view class="list-item">
          <InfoHead title="赛事概述" />
          <view> {{ matchInfo?.matchSummary }} </view>
        </view>
        <view class="list-item ql-editor-box">
          <InfoHead title="赛事介绍" />
          <uv-parse
            :content="processedContent(matchInfo.introduction)"
          ></uv-parse>
        </view>
        <view class="list-item ql-editor-box">
          <InfoHead title="报名要求" />
          <uv-parse
            :content="processedContent(matchInfo.registrationRequirement)"
          ></uv-parse>
        </view>
        <view v-if="matchInfo?.awardContent" class="list-item ql-editor-box">
          <InfoHead title="奖励内容" />
          <uv-parse
            :content="processedContent(matchInfo.awardContent)"
          ></uv-parse>
        </view>

        <view
          class="list-item"
          v-if="matchInfo.attachments && matchInfo.attachments.length"
        >
          <InfoHead title="附件资料" />
          <!-- annexList -->
          <view
            class="annex-item"
            v-for="(item, index) in matchInfo?.attachments"
            :key="index"
          >
            <view class="name">{{ index + 1 }}、{{ item.fileName }} </view>
            <!-- <view class="download" @click="downloadFile(item.url)">
            <text class="iconfont">&#xe61a;</text>
            <text class="text">下载</text>
          </view> -->
          </view>
        </view>

        <view class="list-item" v-if="dataList && dataList.length > 0">
          <InfoHead title="参赛项目" />
          <view class="project-list">
            <project-item
              v-for="(item, index) in dataList"
              :key="index"
              :item="item"
              keyId="projectId"
            />
          </view>
          <EmptyState
            v-if="!loading && dataList.length === 0"
            type="noData"
            text="暂无项目"
            sub-text="暂时没有相关项目信息"
          />
          <!-- 加载更多组件 -->
          <LoadMoreView v-if="dataList.length > 0" :noMore="noMore" />
        </view>
      </view>
    </view>
    <view v-if="!matchInfo.id && pagesLoading">
      <EmptyState
        type="noData"
        text="暂无赛事信息"
        sub-text="暂时没有相关赛事信息"
      />
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import {
  onLoad,
  onUnload,
  onReachBottom,
  onShareAppMessage,
} from "@dcloudio/uni-app";
import { navigateTo, downloadFile, processedContent } from "@/utils/utils.js";
import { useListQuery } from "@/mixins/useListQuery.js";
import { matchDetailInfo, projectListByMatchId } from "@/api/tournament.js";

const matchInfo = ref({});
const pagesLoading = ref(false);
const isPc = ref(false);

let originalBodyBackground = "";

const detectIsPcOnH5 = () => {
  if (typeof navigator === "undefined") return false;
  const ua = navigator.userAgent || "";
  const isMobileUa =
    /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua) ||
    /iPad/i.test(ua) ||
    (/Macintosh/i.test(ua) && navigator.maxTouchPoints > 1);
  return !isMobileUa;
};

onLoad(async (options) => {
  // #ifdef H5
  isPc.value = detectIsPcOnH5();
  if (isPc.value && typeof document !== "undefined") {
    originalBodyBackground = document.body.style.background || "";
    document.body.style.background = "#e9e9e9";
  }
  // #endif

  queryForm.matchId = options.id;
  if (!options.id) {
    pagesLoading.value = true;
    return;
  }
  try {
    let res = await getMatchInfo(options.id);
    if (!res || res.hidden) {
      pagesLoading.value = true;
      return;
    }
    matchInfo.value = res;
    getDataList(true);
  } catch (error) {
    console.log(error);
  }
});

var { dataList, loading, noMore, getDataList, loadMore, queryForm } =
  useListQuery(projectListByMatchId);

const getMatchInfo = async (id) => {
  return new Promise((resolve, reject) => {
    matchDetailInfo(id).then((res) => {
      resolve(res.data);
    });
  });
};

// 定义页面的分享内容
onShareAppMessage(() => {
  const imageUrl = matchInfo.value.thumbnail;
  return {
    title: matchInfo.value.matchName,
    path: `/pages/tournament/details?id=${matchInfo.value.id}`,
    imageUrl,
  };
});

// 上拉加载更多
onReachBottom(() => {
  // console.log("onReachBottom");
  if (!matchInfo.value.id) return;
  if (!loading.value && !noMore.value) {
    loadMore();
  }
});

onUnload(() => {
  // #ifdef H5
  if (isPc.value && typeof document !== "undefined") {
    document.body.style.background = originalBodyBackground;
  }
  // #endif
});
</script>
<style lang="scss" scoped>
.app-content {
  position: relative;
  padding-top: 0;
  // padding-bottom: 152rpx;
  .head {
    padding: 20rpx;
    font-size: 30rpx;
    text-align: center;
    border-bottom: 1rpx solid #e6e6e6;
    .title {
      min-height: 48rpx;
      font-size: 34rpx;
      font-weight: 700;
      text-align: center;
      color: #1a1a1a;
      // line-height: 36rpx;
    }
    .time {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      font-weight: 400;
      text-align: center;
      color: #666666;
      margin-top: 10rpx;
      .iconfont {
        margin-right: 5rpx;
      }
    }
  }
  .content {
    padding: 30rpx 20rpx;
    .list-item {
      margin-bottom: 30rpx;
      .annex-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 15rpx;
        .name {
          flex: 1;
          font-size: 26rpx;
          font-weight: 400;
          color: #666666;
          word-break: break-word;
        }
        .download {
          flex-shrink: 0;
          font-size: 24rpx;
          font-weight: 400;
          color: #0077ff;
          line-height: 24rpx;
          margin-left: 20rpx;
        }
      }
    }
    .project-list {
      // display: flex;
      // justify-content: space-between;
      // flex-wrap: wrap;
      // padding-top: 10rpx;
    }
  }
  .float-btn {
    position: fixed;
    width: 750rpx;
    height: 148rpx;
    background: #ffffff;
    left: 0;
    bottom: 0;
    border-top: 1rpx dotted #666666;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30rpx;
    padding: 0 46rpx;
    box-sizing: border-box;
    .btn-item {
      flex: 1;
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      background: #d20b17;
      border-radius: 40rpx;
      font-size: 32rpx;
      font-weight: 400;
      color: #ffffff;
      .iconfont {
        margin-right: 5rpx;
      }
    }
    .btn-item.share {
      background: #1f71b9;
      &::after {
        border: none;
      }
    }
  }
}

.pc-fixed-frame {
  width: 390px;
  height: auto;
  min-height: unset !important;
  margin: 24px auto;
  padding: 0 !important;
  // overflow-y: auto;
  overflow-x: hidden;
  border-radius: 16px;
  background-color: #f5f5f5;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
</style>