remember-word/pages/index/index.vue

<template>
  <view>
    <tabBar :currentPage="'pages/index/index'"></tabBar>
    <view class="content">
      <image
        src="../../static/image/home/fontree.png"
        mode=""
        class="logo"
      ></image>
    </view>
    <scroll-view
      scroll-y
      @scrolltolower="onreachBottom"
      :refresher-enabled="true"
      :refresher-triggered="isrefresh"
      @refresherpulling="openLoading"
      @refresherrefresh="onRefresh"
      @refresherrestore="onRestore"
      @scroll="onScroll"
      :scroll-anchoring="true"
      refresher-background="#699A70"
      refresher-default-style="none"
      :style="'height:' + listHeight + 'px;'"
      :refresher-threshold="300"
      class="scroll"
    >
      <image
        src="../../static/image/home/new_line.png"
        mode=""
        class="line"
        v-if="showPull"
      ></image>
      <image
        src="../../static/image/home/new_flower.png"
        mode=""
        class="flower-static"
        v-if="showPull"
      ></image>
      <view v-for="(item, index) in listData" :key="index" class="item">
        <view class="box">
          <!-- :style="'background: url(' + item.CoverImg + ');'" -->
          <image
            :src="item.CoverImg"
            mode="scaleToFill"
            class="img"
            @click="goLink(item)"
          ></image>
          <!-- <view class="bt-con">
						<view class="name">{{ item.SeriesName }}</view>
						<view class="des">{{ item.Desc }}</view>
					</view> -->
          <view class="description">
            <view class="text">
              <view class="name">{{ item.SeriesName }}</view>
              <view class="des">{{ item.Desc }}</view>
            </view>
            <view class="line-des"></view>
            <view
              class="detail"
              @click="goLink(item)"
              :style="{
                background:
                  item.SeriesName === '泰丰十周年' ? '#FC4947' : '#699A70',
              }"
              >查看详情</view
            >
          </view>
        </view>
      </view>
    </scroll-view>
    <Dialog
      :detail="detail"
      :collectionsUID="collectionsUID"
      :num="num"
      :isShow="isShow"
    />
  </view>
</template>
haojia
<script>
import Dialog from "./dialog/dialog.vue";
export default {
  components: {
    Dialog,
  },
  data() {
    return {
      title: "Hello",
      fromLogin: true,
      listData: [],
      page: 1,
      pageSize: 10,
      showPull: false,
      isrefresh: false,
      listHeight: uni.getSystemInfoSync().windowHeight - 88 - 61,
      isShow: false,
      collectionsUID: "",
      num: "",
      detail: {},
    };
  },
  onShow() {
    let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
    let curRoute = routes[routes.length - 2];
  },
  onLoad() {
    this.onreachBottom();
    const collectionsUID = uni.getStorageSync("collectionsUID");
    if (collectionsUID) {
      this.collectionsUID = collectionsUID;
    }
    const num = uni.getStorageSync("num");
    if (num) {
      this.num = JSON.parse(num);
    }
    if (this.collectionsUID && this.num) {
      this.collectionsDetail();
    }
  },
  methods: {
    openLoading(e) {
      if (e.detail.deltaY < 0) return;
      this.showPull = true;
      this.isrefresh = true;
    },
    onRefresh(e) {
      if (this._freshing) return;
      this._freshing = true;
      this.isrefresh = true;
      setTimeout(() => {
        this.getData();
      }, 2000);
    },
    onRestore() {
      this.showPull = false;
    },
    onreachBottom() {
      this.getData();
    },
    onScroll() {
      this.page++;
      let params = {
        page: this.page,
        pageSize: this.pageSize,
      };
      uni.$u.debounce(async () => {
        await this.$api.series
          .list(params)
          .then((res) => {
            if (res.status === 0) {
              if (res.data.Data) {
                this.listData = [...this.listData, ...(res.data.Data || [])];
              }
              this.page--;
            } else {
              uni.showToast({
                title: this.$t("load.failed"),
                icon: "none",
              });
            }
          })
          .catch((err) => {
            uni.showToast({
              title: this.$t("load.failed"),
              icon: "none",
            });
          });
      }, 500);
    },
    goLink(item) {
      // uni.navigateTo({
      // 	url: '/pages/index/activity/index?detail=' + encodeURIComponent(JSON.stringify(item))
      // });
      console.log(1111, item);
      if (item.SeriesName === "泰丰十周年") {
        uni.navigateTo({
          url:
            "/pages/index/activeSeries/activeSeries?detail=" +
            encodeURIComponent(JSON.stringify(item)),
        });
      } else {
        uni.navigateTo({
          url: "/pages/index/series/series?SeriesUID=" + item.SeriesUuid,
        });
      }
    },
    async getData() {
      let params = {
        page: 1,
        pageSize: this.pageSize,
      };
      await this.$api.series
        .list(params)
        .then((res) => {
          if (res.status === 0) {
            this.listData = res.data.Data;
            /* } else {
						this.listData = [...this.listData, ...res.data.Data || []];
					} */
          } else {
            uni.showToast({
              title: this.$t("load.failed"),
              icon: "none",
            });
          }
          this.isrefresh = false; //触发onRestore，并关闭刷新图标
          this._freshing = false;
        })
        .catch((err) => {
          console.log(1231312312, err);
          uni.showToast({
            title: this.$t("load.failed"),
            icon: "none",
          });
        });
    },
    async collectionsDetail() {
      if (uni.getStorageSync("collectionsDetail")) {
        await this.$api.series
          .collectionsDetail({
            collectionsUID: this.collectionsUID,
            num: this.num,
          })
          .then((res) => {
            if (res.status === 0) {
              this.detail = res.data;
              this.isShow = true;
              uni.setStorageSync("collectionsDetail", false);
            } else {
              this.$common.msgToast(res.msg, null, "error");
            }
          })
          .catch((err) => {
            uni.showToast({
              title: this.$t("load.failed"),
              icon: "none",
            });
          });
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background: url("@/static/image/home/new_bg.png") no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  height: 100vh;
}

/deep/ .uni-scroll-view-refresher {
  max-height: 250rpx;
}

/deep/ .uni-scroll-view {
  overflow-y: auto !important;
}

.content {
  height: 122rpx;
  background: #ffffff;

  // padding-top: 300rpx;
  // border: 1px solid red;
  .logo {
    width: 188rpx;
    height: 56rpx;
    margin-top: 36rpx;
    margin-left: 48rpx;
  }
}

.line {
  width: 2rpx;
  height: 164rpx;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.flower-static {
  width: 43rpx;
  height: 43rpx;
  position: absolute;
  left: 47%;
  top: 167rpx;
  animation: fadenum 1s infinite;
}

@keyframes fadenum {
  100% {
    transform: rotate(360deg);
  }
}

.item {
  margin-bottom: 40rpx;
}

.box {
  width: 656rpx;
  height: 814rpx;
  margin: 0 48rpx;
  display: flex;
  flex-direction: column;

  .img {
    width: 656rpx;
    height: 656rpx;
  }

  // .bt-con {
  // 	position: absolute;
  // 	bottom: 0;
  // 	width: 656rpx;
  // 	height: 158rpx;
  // 	background: rgba(255, 255, 255, 0.3);

  // 	//
  // 	.name {
  // 		font-size: 32rpx;
  // 		border-bottom: 1rpx solid #fff;
  // 		margin: 28rpx 50rpx 0 50rpx;
  // 		text-align: center;
  // 		padding-bottom: 10rpx;
  // 	}

  // 	.des {
  // 		padding-top: 10rpx;
  // 		font-size: 20rpx;
  // 		text-align: center;
  // 		overflow: hidden;
  // 		text-overflow: ellipsis;
  // 		white-space: nowrap;
  // 	}
  // }
  .description {
    width: 656rpx;
    height: 158rpx;
    // border: 1px solid red;
    box-sizing: border-box;
    padding: 18px 11px 18px 11px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    border-bottom-left-radius: 8rpx;
    border-bottom-right-radius: 8rpx;

    .text {
      flex: 1;

      .name {
        font-size: 32rpx;
        color: #000000;
        font-family: "Songti TC";
        font-weight: 500;
        margin-bottom: 2px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .des {
        margin-right: 28rpx;
        font-size: 20rpx;
        color: #939393;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }

    .line-des {
      width: 1rpx;
      height: 114rpx;
      background-color: #d8d8d8;
    }

    .detail {
      background: #699a70;
      padding: 12rpx 40rpx;
      border-radius: 8rpx;
      text-align: center;
      margin-left: 19px;
      font-size: 28rpx;
    }
  }
}
</style>