uniapp 微信小程序 商品组件,商品瀑布流 ThorUI tui-waterfall 瀑布流

<template>
  <view v-if="attrs.item" class="item" @click="nav.navToGoodsDetail({ id: attrs.item.id })">
    <image class="img" width="100%" lazyLoad :src="attrs.item.picUrl ||''"></image>
    <view> <text class="title">{{ attrs.item.showName }}</text> {{ attrs.item.unitStr }}</view>
    <view class="ellipsis">{{ attrs.item.content }}</view>
    <view class="flex-l ">
      <image class="optimalPic" :src="attrs.item.optimalPicUrl" /> {{ attrs.item.shopName }}
      <text class="stallNumber ellipsis">{{ attrs.item.stallNumber }}</text>
    </view>
    <view class="size20">预库存：{{ attrs.item.stock }}</view>
    <view class="flex-l size18 flex-between">
      <view class=" ">
        <view class="price">￥ <text>{{ attrs.item.unitPrice }}</text></view>/{{ attrs.item.unitName }}
        <text>已销售{{ attrs.item.salesVolume }}件</text>
      </view>
      <image @click.stop="addCart(attrs.item)" class="icon" src="@/static/index/add.png" />
    </view>
  </view>
</template>

<script lang="ts" setup>
/**
 * 首页 单个商品组件 有加购车
 * @author lili
 */
import { ref, useAttrs, Ref } from 'vue'
import nav from '@/utils/nav'
import { shoppingCartParam } from '@/types/shopCart'
import { useShopCartStroe } from '@/store/modules/shopCart'
import { useUserStore } from '@/store/modules/user'

const userStore = useUserStore()
const shopCartStroe = useShopCartStroe()
const cartRef: Ref<shoppingCartParam> = ref({});
let attrs = useAttrs() as any;// 加购物车数量
function addCart(item: any) {
  cartRef.value.productMallId = item.id;
  cartRef.value.tenantId = userStore.tenant.tenantId;
  cartRef.value.type = 0;
  shopCartStroe.addShoppingCarts(cartRef.value).then((res) => {
    uni.showToast({ title: '加入购物车成功！' })
  })
}
</script>

<style lang="scss" scoped>
.item {
  box-shadow: 1px 1px 6px #dadee08a;
  text-align: left;
  background: #FFFFFF;
  border-radius: 30rpx;
  margin-bottom: 15rpx;
  padding: 20rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: #7E7E7E;

  view {
    line-height: 45rpx;
  }

  .title {
    font-size: 28rpx;
    font-weight: 500;
    color: #222222;
  }

  .img {
    width: 100%;
    height: 310rpx;
    margin: 0 auto;
    background: #FFFFFF;
  }

  .flex-l {
    position: relative;
    width: 100%;

    .optimalPic {
      width: 27rpx;
      height: 27rpx;
      border-radius: 50%;
      position: relative;
      top: 5rpx;
    }

    .stallNumber {
      //min-width: 86rpx;
      max-width: 150rpx;
      padding: 0 20rpx;
      height: 21rpx;
      line-height: 24rpx;
      background: linear-gradient(180deg, #FFFBF2 0%, #FFE2B1 100%);
      font-size: 16rpx;
      font-family: Arial-Regular, Arial;
      font-weight: 400;
      color: #686868;
      position: absolute;
      right: 0;
      top: 12rpx;
      text-align: center;
      border-radius: 20rpx;
    }

    .icon {
      width: 48rpx;
      height: 48rpx;
    }

    .price {
      font-size: 24rpx;
      font-weight: 400;
      color: #F0504D;
      display: inline-block;

      text {
        font-size: 36rpx;
      }

    }
  }
}
</style>

 

 

tui-waterfall 瀑布流  

<template>
  <tui-waterfall :listData="attrs.listData" :type="1" :pageSize="10" columnGap="11rpx">
    <template v-slot:left="{ entity, index }">
      <Goods :item="entity"></Goods>
    </template>
    <template v-slot:right="{ entity, index }">
      <Goods2 :item="entity"></Goods2>
    </template>
  </tui-waterfall>
</template>

<script lang="ts" setup>
/**
 * 首页 商品流 左右加载
 * @author lili
 */
import Goods from './goods.vue'
import Goods2 from './goods.vue'
import { ref, useAttrs } from 'vue'
let attrs = useAttrs()
</script>