SFH5/pagesb/latestEvents/index.vue

<template>
  <view class="container" :class="[`${themeInfo.theme}-theme`]">
    <navBar class="navBar"></navBar>
    <view class="wrapbox">
      <view class="box" v-for="(item,index) in state.dataList" :key="index">
        <view class="imageBox">
          <image class="topImage" :src="baseImageUrl + item.imgUrl" mode="widthFix"></image>
        </view>
        <view class="title">
          <view class="title1">{{ item.title }}</view>
          <view class="title2">{{ item.viceTitle }}</view>
        </view>
        <view class="content">
          <my-uv-collapse :ref="(e)=>setRefs(e,index)" :border="false" :clickable="false">
            <my-uv-collapse-item :clickable="false" value="详情" name="Docs guide">
              <view class="htmlbox">
                <rich-text :nodes="item.content"></rich-text>
              </view>
            </my-uv-collapse-item>
        </my-uv-collapse>
        </view>
      </view>
      <view>
         <view class="NoDataTips" v-if="state.dataList.length === 0">
          <text>抱歉，暂无活动，敬请关注。</text>
          <text class="en">SORRY,THERE ARE NO EVENTS,STAY TUNED PLEASE.</text>
         </view>
      </view>
    </view>
	<!-- 邀请详情 -->
  </view>
</template>
<script setup>
import navBar from "@/components/navBar.vue";
// import { makePhoneCall } from "/utils/common.js";
import { ref,nextTick } from "vue";
import { useLoginApi } from "/Apis/home.js";
import { onLoad, onShareAppMessage,onShow,} from "@dcloudio/uni-app";
import myUvCollapse from "@/pagesb/components/my-uv-collapse/components/uv-collapse/uv-collapse.vue";
import myUvCollapseItem from "@/pagesb/components/my-uv-collapse/components/uv-collapse-item/uv-collapse-item.vue";
// 主题色配置
import { useMainStore } from "@/store/index.js";
import { baseImageUrl } from "@/config/index.js";
const { themeInfo } = useMainStore();
const getApi = useLoginApi();
const state = ref({
  dataList: [],
});
const collapseRefs = ref([]);
const setRefs = (ref,index) => {
  collapseRefs.value[index] = ref;
};
onLoad((params) => {
  getData();
});
onShow(() => {

  // $nextTick(() => {
	// 				// 再次调用 init 重新初始化内部高度
	// 			collapseRefs?.value.init();
	// 				uni.hideLoading();
	// 		})

 
});
const getData = async () => {
   // 轮播图
   const params = {
    platformType: 1, // 小程序
    forPage: 4, // 首頁
    contentType: 5, // 1轮播图 9视频 5活动
  };
  uni.showLoading();
  getApi.GetPageContent(params).then((res) => {
    uni.hideLoading();
   if(res.code === 200){
     state.value.dataList = res.data;
     nextTick(() => {
	  collapseRefs.value.forEach((item) => {
      item.init();
   });
  });
   }
  });
};
onShareAppMessage((res) => {
  if (res.from === "button") {
  }
  return shareParam;
});
</script>

<style lang="scss" scoped>
@import "@/static/style/theme.scss";
uni-page-body {
  height: 100%;
  background: linear-gradient(0deg, rgb(1, 169, 188), rgb(10, 132, 184));
  overflow: auto;
}
.navBar {
  position: relative;
}
.NoDataTips{
  width: 100%;
  padding: 20rpx;
  margin-bottom: 40rpx;
  border-radius: 20rpx;
  background-color: var(--right-linear);
  font-size: 22rpx;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  line-height: 30rpx;
}
.container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: start;
  width: 100%;
  overflow-x: hidden;
  min-height: 100vh;
  background: linear-gradient(0deg, var(--left-linear), var(--right-linear));
  .wrapbox {
    width: 100%;
    padding: 20rpx 20rpx;
    min-height: 100vh;
    background-color: #FFF;
    .box{
      background-color: var(--right-linear);
      border-radius: 20rpx;
      margin: 20rpx 0;
      margin-bottom: 30px;
      overflow: hidden;
      .topImage{
        width: 100%;
        border-radius: 20rpx 20rpx 0 0;
      }
      .title{
        padding: 20px;
        padding-bottom: 0;
        padding-top: 10px;
        view{
          display: flex;
          align-items: center;
          font-size: 22rpx;
          font-weight: bold;
        
          &::before{
            display: block;
            content: ' ';
            width: 18rpx;
            height: 18rpx;
            background-color: black;
            margin-right: 20rpx;
            border-radius: 999px;
          }
        }
      }
      .content{
        ::v-deep(.uv-collapse){
          .uv-cell__value{
            font-size: 20rpx;
            color: black;
            font-weight: bold;
          }
            
          }
        .htmlbox{
          width: 100%;
          background-color: rgb(250, 252, 243);
          margin-right: 20rpx;
          padding: 20rpx;
          border-radius: 20rpx;
          rich-text{
            font-size: 22rpx;
          }
        }
      }
    }
  }
}

.tips {
  margin-top: 30rpx;
  font-size: 20rpx;
  font-weight: bold;
}
</style>