zc_saas_h5/pages/information/index.vue

<template>
  <view>
    <nav-logo title="资料"></nav-logo>
    <view class="goods-warp">
      <view class="search-box fl">
        <u-search
          bg-color="#ffffff"
          placeholder="搜索"
          v-model="goodsName"
          @custom="comfirmSearch"
          @search="comfirmSearch"
        ></u-search>
      </view>
      <view class="goods-list">
        <template v-if="goodsList.length">
          <!-- hover-class="none" -->
          <view
            class="list_item"
            v-for="(item, index) in goodsList"
            :key="index"
            @click="tobuy(item)"
          >
            <view class="list_item_content">
              <view class="c_title">{{ item.goodsName }}</view>
              <view class="c_downs">
                <view class="img">
                  <image
                    :src="$method.splitImgHost(item.coverUrl, true)"
                  ></image>
                  <view class="time" v-if="item.year">{{
                    item.year ? item.year : ""
                  }}</view>
                </view>
                <view class="text">
                  <view class="desc">
                    <view class="left">
                      <view
                        class="mon_t"
                        :class="item.standPrice === 0 ? 'free' : ''"
                        v-if="
                          !item.specTemplateId ||
                          (!item.maxPrice && !item.minPrice)
                        "
                      >
                        {{
                          item.standPrice === 0
                            ? "免费"
                            : `￥${item.standPrice}`
                        }}
                      </view>
                      <!-- 范围价格 -->
                      <view v-else class="mon_t">
                        <view>{{ item.minPrice }}</view>
                        <template v-if="item.minPrice != item.maxPrice">
                          <text>-</text>
                          <view>{{ item.maxPrice }}</view>
                        </template>
                      </view>
                      <text v-if="item.linePrice" class="sale"> ¥ </text>
                      <text v-if="item.linePrice" class="price_line"
                        >&nbsp;{{ item.linePrice }}</text
                      >
                    </view>
                    <view class="right">
                      <view v-if="!hideBuyState" class="regiser_row"
                        >立即购买</view
                      >
                    </view>
                  </view>
                  <view v-if="item.buyUserNum" class="joins">
                    <!-- <image class="people" src="/static/index/people.png"></image> -->
                    <!-- 为0时，不显示 -->
                    <view class="people">{{ item.buyUserNum }}人参与</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </template>
        <template v-else>
          <u-empty text="暂无资料" mode="list" margin-top="100"></u-empty>
        </template>
      </view>
    </view>
    <!-- tabbar -->
    <myTabbar></myTabbar>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "SaasMiniprogramIndex",

  data() {
    return {
      goodsName: "",
      goodsList: [],
      param: {},
      total: 0,
    };
  },
  onLoad(option) {
    uni.hideTabBar();
    this.init();
  },
  onPullDownRefresh() {
    this.init();
  },
  onReachBottom() {
    if (this.goodsList.length < this.total) {
      this.param.pageNum++;
      this.getGoodsList();
    }
  },
  methods: {
    init(goodsName = "") {
      this.param = {
        pageNum: 1,
        pageSize: 10,
        goodsType: 8,
        goodsName,
      };
      this.goodsList = [];
      this.getGoodsList();
    },
    comfirmSearch() {
      this.param.goodsName = this.goodsName;
      this.init(this.goodsName);
    },
    getGoodsList() {
      this.$api.goodsList(this.param).then((res) => {
        this.goodsList.push(...res.data.rows);
        this.total = res.data.total;
      });
    },
    tobuy(item) {
      uni.navigateTo({
        url:
          "/pages3/course/detail?id=" +
          item.goodsId +
          "&goodsType=" +
          item.goodsType,
      });
    },
  },
  computed: {
    ...mapGetters(["userInfo", "hideBuyState"]),
  },
};
</script>
<style>
page {
  background: #eaeef1;
}
</style>
<style lang="scss" scoped>
.goods-warp {
  padding: 16rpx;
  position: relative;
  .search-box {
    height: 106rpx;
    width: calc(100% - 32rpx);
    position: fixed;
    background: #eaeef1;
    z-index: 10;
    margin-top: -16rpx;
  }
}
.goods-list {
  margin-top: 46px;
  .list_item {
    padding: 24rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 20rpx 1rpx rgba(1, 99, 235, 0.1);
    border-radius: 24rpx;
    background: #fff;
    margin-bottom: 32rpx;
    display: flex;
    align-items: center;
    .list_item_content {
      width: 100%;
    }
    .c_title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 24rpx;
      font-weight: bold;
      color: #222222;
    }
    .c_downs {
      display: flex;
    }
    .img {
      position: relative;
      margin-right: 24rpx;
      border-radius: 16rpx;
      overflow: hidden;
      width: 204rpx;
      height: 120rpx;
      image {
        width: 100%;
        height: 100%;
      }

      .time {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 80rpx;
        height: 32rpx;
        background: rgba(1, 25, 45, 0.4);
        color: #fff;
        text-align: center;
        line-height: 32rpx;
        font-size: 24rpx;
        border-radius: 10rpx 0px 10rpx 0px;
      }
    }

    .text {
      flex: 1;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 120rpx;
      .joins {
        .people {
          width: 160rpx;
          font-size: 20rpx;
          color: #999999;
          padding: 0rpx 8rpx;
          text-align: center;
          height: 36rpx;
          line-height: 36rpx;
          background: #f6f7fb;
          border-radius: 4px;
        }
      }
      .desc {
        margin-top: 10rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        .left {
          flex: 1;
          color: #333;
          font-size: 26rpx;
          .mon_t {
            display: flex;
            font-weight: bold;
            color: #fc3f3f;
            font-size: 36rpx;
            view::before {
              content: "￥";
              font-size: 24rpx;
              font-weight: bold;
            }
          }
          .free {
            font-size: 24rpx;
          }
          .sale {
            color: #999999;
            font-size: 24rpx;
            margin-left: 8rpx;
          }
          .price_line {
            color: #999999;
            font-size: 24rpx;
            text-decoration: line-through;
            font-weight: 400;
          }
        }

        .right {
          font-size: 24rpx;
          font-weight: bold;
          .regiser_row {
            width: 144rpx;
            height: 52rpx;
            line-height: 52rpx;
            text-align: center;
            border-radius: 16rpx;
            background-color: #fc3f3f;
            color: #fff;
            font-weight: 500;
            font-size: 26rpx;
          }
        }
      }
    }
  }
}
</style>