bn-q-icon/pages/text/index.vue

<template>
	<view>
		<Nav title="列表组件演示"></Nav>
		<pagingList ref="likeGoodsList" @getList="getGoodsList">
      <template v-slot:listInfo="{pagingData}">
        <view class="goods-list">
          <view class="goods-item" v-for="item in pagingData">
            <view class="goods-item-left">
              <image class="goods-item-img" :src="item.cover_img" mode="aspectFill"></image>
            </view>
            <view class="goods-item-right">
              <view class="goods-item-name">{{item.good_name}}</view>
              <view class="goods-item-price goods-item-zh" v-if="item.p_type===1">
                <view class="item-price">
                  <enPrice :currentPrice="item.price" :originalPrice="item.original_price"></enPrice>
                </view>
                <view class="item-market">
                  <text class="iconfont">&#xe61a;</text>
                  <text>5.0评分</text>
                  <text>2W+人付款</text>
                </view>
              </view>
              <view class="goods-item-price goods-item-tp" v-else>
                <view class="goods-item-platform">
                  <text class="goods-item-tp"  v-if="item.p_type===2">天猫好物</text>
                  <text class="goods-item-jd"  v-else>京东优选</text>
                </view>
                <view class="item-price">
                  <enPrice :currentPrice="item.price" :originalPrice="item.original_price"></enPrice>
                </view>
              </view>

            </view>
          </view>
        </view>
      </template>
    </pagingList>
	</view>
</template>

<script>
	import Black from '@/components/en-utils/en-blank/en-blank'
	import pagingList from '@/components/en-list/en-list'
  import enPrice from '@/components/en-utils/en-price/en-price'
  import {likeGoods} from "@/api/goods";

	export default {
		components:{
			Black,
      pagingList,
      enPrice,
		},
    methods:{
      getGoodsList(page){
          likeGoods({'page':page}).then((res)=>{
            if(res.code===1){
              this.$refs.likeGoodsList.setList(res.data.list,res.data.total)
            }
          })
      }
    }
	}
</script>

<style scoped lang="scss">
    @font-face {
      font-family: 'iconfont';
      src:  url('/components/static/icon/iconfont.ttf') format('truetype');
    }
    .iconfont {
      font-family: "iconfont" !important;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    .goods-list{
      background-color: #F5F5F5;
      margin: 0 24rpx;
      .goods-item{
        width: 100%;
        height: 364rpx;
        background-color: #FFFFFF;
        border-radius: 20rpx;
        margin: 20rpx 0;
        display: flex;
        .goods-item-left{
          padding: 24rpx;
          .goods-item-img{
            width:316rpx;
            height:316rpx;
            border-radius: 16rpx;
          }
        }
        .goods-item-right{
          width:100%;
          height:300rpx;
          padding:32rpx 30rpx 32rpx 0;
          position:relative;
          //display: flex;
          //align-content: space-between;
          .goods-item-name{
            color: #333333;
            font-size: 30rpx;
            font-weight: 600;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
          .goods-item-price{
            position:absolute;
            bottom: 32rpx;
            .item-price{

            }
            .item-market{
                text{
                  color: #999999;
                  font-size: 24rpx;
                  line-height: 34rpx;
                  padding: 0 20rpx 0 0;
                }
              .iconfont{
                padding: 0;
              }
            }
          }
          .goods-item-platform{
            height: 32rpx;
            margin-bottom: 10rpx;
            .goods-item-tp{
              padding: 4rpx 8rpx;
              color: #975BFE;
              width: 90rpx;
              height: 30rpx;
              font-size: 24rpx;
              line-height: 28rpx;
              border: 2rpx solid #985DFF;
              border-radius: 4rpx;
            }
            .goods-item-jd{
              padding: 4rpx 8rpx;
              border-radius: 6rpx;
              color: #FFFFFF;
              font-size: 24rpx;
              line-height: 28rpx;
              background: linear-gradient(90deg, #FD3229 0%, #FC7A28 100%);
            }
          }
          .goods-item-zh{

          }
        }
      }
    }
</style>