discounts-minapp/study/community/goods.vue

<template>
  <view class="community">

    <zs-list class="store-box" mt="0" @load="loadMore" :status="status">
      <view class="left">
        <view class="store-item" v-for="(item, index) in list" :key="index" @click="goGoodsDetail(item.goodsId)">
          <zs-img :src="item.goodsPath" width="344rpx" height="344rpx" mode=""></zs-img>
          <view class="info">
            <view class="title">
              {{ item.goodsName }}
            </view>
            <view class="user-info">
              <!-- <image class="head" :src="item.goodsPath"></image> -->
              <view class="user-name">
                {{ item.goodsDescribe }}
              </view>
            </view>
            <view class="price-box">
              <view class="left">
                <view class="unit">
                  ￥
                </view>
                <view class="price">
                  {{ item.realPrice }}
                </view>
                <view class="old-price">
                  ￥{{ item.marketPrice }}
                </view>
              </view>

              <view class="right">
                {{ item.saleNum }}人已购
              </view>
            </view>
          </view>

        </view>
      </view>
      <view class="right">

        <view class="store-item" v-for="(item, index) in list1" :key="index" @click="goGoodsDetail(item.goodsId)">
          <zs-img :src="item.goodsPath" width="344rpx" height="344rpx" mode=""></zs-img>
          <view class="info">
            <view class="title">
              {{ item.goodsName }}
            </view>
            <view class="user-info">
              <!-- <image class="head" :src="item.goodsPath" mode=""></image> -->
              <view class="user-name">
                {{ item.goodsDescribe }}
              </view>
            </view>
            <view class="price-box">
              <view class="left">
                <view class="unit">
                  ￥
                </view>
                <view class="price">
                  {{ item.realPrice }}
                </view>
                <view class="old-price">
                  ￥{{ item.marketPrice }}
                </view>
              </view>
              <view class="right">
                {{ item.saleNum }}人已购
              </view>
            </view>
          </view>

        </view>
      </view>

    </zs-list>

  </view>
</template>

<script>
import { studyGoodsByUser } from '@/api/study.js';
export default {
  data() {
    return {
      status: 'more',
      id: 0,
      list: [

      ],
      list1: [

      ],
      query: {
        columnId: 0,
      }
    }
  },
  methods: {
    loadMore() {
      this.studyGoodsByUser()
    },
    // 去商品详情
    goGoodsDetail(id) {
      uni.navigateTo({
        url: '/study/studyGoodsDetail?id=' + id
      })
    },
    studyGoodsByUser() {
      this.status = 'loading'
      studyGoodsByUser(this.query).then(res => {
        if (res.state == 'Success') {
          let list = []
          let list1 = []
          res.content.records.map((item, index) => {
            if (index % 2) {
              list1.push(item)
            } else {
              list.push(item)
            }
          })
          this.list = this.list.concat(list)
          this.list1 = this.list1.concat(list1)
          let total = this.list.length + this.list1.length
          if (total >= res.content.total) {
            this.status = 'noMore'
          } else {
            this.status = 'more'
            this.query.currentPage++
          }
        }
      })
    },
  },
  onLoad(options) {
    this.query.columnId = options.columnId
    // console.log(options.id);
    // this.id = options.id
    // this.getItem()
  }
}
</script>

<style lang="scss">
.community {
  background: #FFFFFF;
  padding: 20rpx;

  .zs-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .left {}

    .right {}

    .store-item {
      box-shadow: 0rpx 0rpx 24rpx 2rpx rgba(0, 0, 0, 0.08);
      border-radius: 16rpx;
      width: 344rpx;
      height: 566rpx;
      margin-top: 20rpx;
      display: flex;
      flex-direction: column;

      .info {
        padding: 20rpx;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .title {
          color: #222222;
          font-size: 28rpx;
          height: 76rpx;
          width: 100%;
          font-weight: bold;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          /* 显示的最大行数 */
          overflow: hidden;
        }

        .user-info {
          display: flex;
          align-items: center;
          margin-top: 20rpx;

          .head {
            width: 40rpx;
            height: 40rpx;
            border-radius: 50%;
          }

          .user-name {
            color: #AAAAAA;
            font-size: 24rpx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            // margin-left: 12rpx;
          }
        }

        .price-box {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 12rpx;

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

            .unit {
              font-size: 24rpx;
              color: $uni-color-primary;
              font-weight: bold;
            }

            .price {
              font-size: 32rpx;
              color: $uni-color-primary;
              font-weight: bold;
            }

            .old-price {
              font-size: 20rpx;
              color: #AAAAAA;
              text-decoration: line-through;
              margin-left: 10rpx;
            }
          }

          .right {
            font-size: 20rpx;
            color: #AAAAAA;
          }
        }
      }

    }
  }
}
</style>