case-data/pages/specialList/specialList.vue

<template>
  <view class="upage">
    <z-paging
      ref="paging"
      inside-more
      loading-more-no-more-text="咱也是有底线的！"
      :auto-show-back-to-top="true"
      v-model="dataList"
      @query="queryList"
    >
	 <template #top>
	  <navBarSearch :navName="'肝胆相照精选病例交流'"></navBarSearch>
	 <view class="bar"></view>
	 </template>
	 <view class="box">
      <view class="bar"></view>
      <view class="record">
        <view class="list">
          <view class="cell">
            <view class="title">肝胆相照临床病例库肝胆相照临床病例库肝胆</view>
            <view class="doctor">
              <up--image
                :src="headImg"
                width="46rpx"
                height="46rpx"
                radius="50%"
              ></up--image>
              <view class="name">陈XX（首都医科大学附属北京**医院）</view>
            </view>
            <view class="content"> 嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎XXXXX </view>
            <view class="imgbox">
              <view class="imgcell">
                <up--image
                  src="https://cdn.uviewui.com/uview/album/1.jpg"
                  radius="10"
                  width="220rpx"
                  height="220rpx"
                >
                  <view slot="error" style="font-size: 24rpx">加载失败</view>
                </up--image>
              </view>
              <view class="imgcell">
                <up--image
                  src="https://cdn.uviewui.com/uview/album/1.jpg"
                  radius="10"
                  width="220rpx"
                  height="220rpx"
                >
                  <view slot="error" style="font-size: 24rpx">加载失败</view>
                </up--image>
              </view>
              <view class="imgcell">
                <up--image
                  src="https://cdn.uviewui.com/uview/album/1.jpg"
                  radius="10"
                  width="220rpx"
                  height="220rpx"
                >
                  <view slot="error" style="font-size: 24rpx">加载失败</view>
                </up--image>
              </view>
            </view>
            <view class="imgbox">
              <video
                class="myVideo"
                src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
                @error="videoErrorCallback"
                controls
              ></video>
            </view>
            <view class="tagbox">
              <view class="tag">标签</view>
            </view>
            <view class="deal">
              <view class="left">
                <view class="eyebox item">
                  <up-icon name="eye" color="#4B5563" size="28rpx"></up-icon>
                  <view class="num">11</view>
                </view>
                <view class="collect item">
                  <up-icon name="heart" color="#4B5563" size="28rpx"></up-icon>
                  <view class="num">22</view>
                </view>
                <view class="chat item">
                  <up-icon name="chat" color="#4B5563" size="28rpx"></up-icon>
                  <view class="num">22</view>
                </view>
              </view>
              <view class="time">
                <up-icon name="clock" color="#4B5563" size="28rpx"></up-icon>
                <view class="num">{{ formatdate("2022-10-23") }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
     </view>
    </z-paging>
   
    
  </view>

  <!-- <tabBar :value="2"></tabBar> -->
</template>

<script setup>
import { ref } from "vue";
import navBar from "@/components/navBar/navBar.vue";
import tabBar from "@/components/tabBar/tabBar.vue";
import headImg from "@/static/headImg.png";
import dayjs from "dayjs";
import api from "@/api/api";
import list from "@/uni_modules/z-paging/components/z-paging/z-paging";
const paging = ref(null);
const dataList = ref([]);
const formatdate = (date) => {
  return dayjs(date).format("YYYY-MM-DD");
};
const videoErrorCallback = (e) => {
  uni.showModal({
    content: e.target.errMsg,
    showCancel: false,
  });
};

const queryList = (pageNo, pageSize) => {
  console.log(666666);
  const params = {
    page: pageNo,
    page_size: pageSize,
  };
  api.queryList(params).then((res) => {
	 paging.value.complete(res.data.data);
    })
};

</script>

<style lang='scss' scoped>
.upage {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 100rpx);
}

.box {
  flex: 1;
  padding-bottom: 30rpx;
  overflow-y: scroll;
}

.myVideo {
  width: 100%;
  border-radius: 15rpx;
}

.deal {
  margin-top: 20rpx;
  display: flex;
  color: #4b5563;
  font-size: 24rpx;
  justify-content: space-between;

  .left {
    display: flex;
    align-items: center;

    .item {
      width: 100rpx;
    }
  }

  .collect {
    display: flex;
    align-items: center;
  }

  .eyebox,
  .chat {
    display: flex;
    align-items: center;
  }

  .time {
    display: flex;
    align-items: center;
  }

  .num {
    margin-left: 8rpx;
  }
}

.tagbox {
  margin-top: 24rpx;
  display: flex;

  .tag {
    height: 54rpx;
    padding: 0 28rpx;
    background: #ecfaf9;
    border-radius: 30rpx;
    font-size: 27rpx;
    color: #3cc7c0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.doctor {
  display: flex;
  align-items: center;
}

.record {
  padding-top: 30rpx;

  .list {
    margin: 30rpx 30rpx;

    .name {
      margin: 20rpx 0 20rpx 15rpx;
      font-size: 27rpx;
      color: #333333;
    }

    .content {
      font-size: 27rpx;
      color: #666666;
      line-height: 38rpx;
    }

    .imgbox {
      display: flex;
      margin-top: 24rpx;

      .imgcell {
        width: 220rpx;
        height: 220rpx;
        margin-right: 20rpx;
      }

      .imgcell:last-child {
        margin-right: 0;
      }
    }
  }
}

.special {
  padding-top: 30rpx;

  .list {
    margin: 8rpx 30rpx 0;

    .cell {
      padding: 22rpx 0;
      display: flex;
      border-bottom: 2rpx solid #f3f4f6;

      .circle {
        margin-top: 15rpx;
        width: 15rpx;
        height: 15rpx;
        background: #3cc7c0;
        border-radius: 50%;
      }

      .title {
        margin-left: 10rpx;
        font-size: 32rpx;
        color: #000000;
        line-height: 46rpx;
      }
    }

    .cell:last-child {
      border-bottom: none;
    }
  }
}

.titlebox {
  margin: 0 30rpx;
  display: flex;
  justify-content: space-between;

  .more {
    display: flex;
    align-items: center;

    .morename {
      margin-right: 10rpx;
      font-size: 28rpx;
      color: #3cc7c0;
    }
  }
}

.bar {
  height: 16rpx;
  background: #f3f4f6;
}

.databox {
  height: 162rpx;
  background: #ffffff;
  display: flex;
  padding: 0 30rpx;
  justify-content: space-between;

  .cell {
    flex: 1;
    padding: 35rpx 0;

    text-align: center;

    .num {
      font-size: 38rpx;
      color: #3cc7c0;
    }

    .name {
      margin-top: 18rpx;
      font-size: 28rpx;
      color: #4b5563;
    }
  }
}
</style>