remember-word/pages/index/series/series.vue

<template>
  <view class="container">
    <navBar
      navTitle=""
      :stickyShow="stickyShow"
      :backBackGroundColor="'#699A70'"
    ></navBar>

    <image :src="seriesItem.CoverImg" mode="" class="cover"></image>
    <view class="designation">
      <view class="left-x">
        <view class="name">{{ seriesItem.SeriesName }}</view>
        <view class="line"></view>
        <view class="des">
          {{ seriesItem.Desc }}
        </view>
      </view>
      <view class="right-x">
        <image :src="seriesItem.BrandImg" mode="" class="img"></image>
        {{ seriesItem.BrandName }}
      </view>
    </view>
    <view class="order-box">
      <view
        class="item"
        v-for="i in collectionsData"
        :key="i.CollectionUID"
        @click="goDetail(i.CollectionUID)"
      >
        <image :src="i.CollectionImg" mode="" class="img"> </image>
        <view class="content">
          <view class="title">{{ i.Name }}</view>
          <view class="price">
            <text v-if="i.CurrencyType === 'normal'">￥</text>
            <image
              src="@/static/image/home/jifen.png"
              mode="scaleToFill"
              style="width: 24rpx; height: 24rpx"
              v-else
            />
            {{ i.Price }}
          </view>
        </view>
      </view>
    </view>
    <view class="bot-text">
      <view class="text-line"></view>
      <image
        src="@/static/image/home/fontree.png"
        mode="aspectFit"
        class="logo"
      ></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      stickyShow: false,
      seriesItem: {},
      collectionsData: [],
    };
  },

  onLoad: function (option) {
    Object.assign(this.seriesItem, { SeriesUuid: option.SeriesUID });
    this.getPageData();
    this.getCollections();
  },
  onPageScroll(e) {
    this.stickyShow = e.scrollTop > 5 ? true : false;
  },
  methods: {
    async getPageData() {
      let params = {
        seriesUuid: this.seriesItem.SeriesUuid,
      };
      let res = await this.$api.series.getSeriesData(params);
      if (res.status === 0) {
        this.seriesItem = res.data;
      } else {
        uni.$u.toast(this.$t("load.failed"));
      }
    },
    navigateBack() {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
    goDetail(CollectionUID) {
      const price = this.collectionsData.find(
        (item) => item.CollectionUID === CollectionUID
      ).Price;
      uni.navigateTo({
        url:
          "/pages/index/detail/detail?CollectionUID=" +
          CollectionUID +
          "&SeriesName=" +
          this.seriesItem.SeriesName +
          "&Price=" +
          price,
      });
    },
    async getCollections() {
      let data = {
        Page: 1,
        PageSize: 99999,
        SeriesUID: this.seriesItem.SeriesUuid,
      };
      let res = await this.$api.series.collectionsList(data);
      if (res.status === 0) {
        this.collectionsData = res.data.Data;
      } else {
        uni.$u.toast(this.$t("load.failed"));
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background: url("@/static/image/home/detail-kind-bg.png?x-oss-process=image/resize,w_750,h_1580")
    no-repeat;
  background-size: 100% 100%;
  background-position: top center;
  background-attachment: fixed;
  height: 100vh;
  // border: 1px solid red;
}

.container {
  padding-bottom: 1upx;
}

.text-box {
  margin: 72upx 45upx;
  background: rgba(11, 0, 0, 0.4);
  border-radius: 8upx;
  padding: 36upx;
  text-align: center;

  .title-img {
    width: 300upx;
    height: 44upx;
    margin-bottom: 24upx;
  }

  .content-img {
    width: 594upx;
    height: 1074upx;
  }

  .from-img {
    width: 356upx;
    height: 44upx;
  }
}

.cover {
  width: 100%;
  height: 772rpx;
  object-fit: cover;
  margin-top: -110rpx;
}

.designation {
  margin: 20rpx;
  background: #ffffff;
  border-radius: 8rpx;
  display: flex;
  justify-content: space-between;
  padding: 28rpx 26rpx;

  .left-x {
    width: 460rpx;

    .name {
      color: #000000;
      font-size: 32rpx;
      width: 100%;
      margin-bottom: 8rpx;
    }

    .line {
      width: 100%;
      background: #878787;
      height: 1px;
    }

    .des {
      padding-top: 30rpx;
      width: 100%;
      font-size: 20rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      color: #878787;
    }
  }

  .right-x {
    color: #878787;
    font-size: 24rpx;
    text-align: center;
    display: flex;
    flex-direction: column;

    .img {
      width: 128rpx;
      height: 128rpx;
      border-radius: 50%;
      margin-bottom: 10rpx;
    }
  }
}

.order-box {
  width: 100%;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 24rpx;
  flex-wrap: wrap;

  .item {
    width: 332rpx;
    height: 418rpx;
    background: #797979;
    border-radius: 8rpx;
    overflow: hidden;
    position: relative;
    margin-top: 20rpx;

    .img {
      width: 332rpx;
      height: 318rpx;
      // object-fit: cover;
    }

    .content {
      width: 100%;
      height: 74rpx;
      position: absolute;
      bottom: 0;
      text-align: center;
      // border-radius: 8rpx;
      padding: 10rpx 0;

      .title {
        font-size: 32rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .price {
        font-size: 24rpx;
      }
    }
  }
}

.bot-text {
  margin-top: 40rpx;
  padding-bottom: 50rpx;
  text-align: center;

  .text-line {
    width: 90%;
    height: 1rpx;
    background: #878787;
    margin: auto;
  }

  .copyright {
    font-size: 24rpx;
    color: #878787;
    margin-top: 10rpx;
  }

  .logo {
    margin-top: 10rpx;
    width: 252rpx;
    height: 76rpx;
  }
}
</style>