magazine-web/components/goosList.vue

<template>
  <view class="list">
    <uni-list class="uni-list--waterfall">
      <!-- to 属性携带参数跳转详情页面，当前只为参考 -->
      <uni-list-item
        direction="column"
        :border="false"
        class="uni-list-item--waterfall"
        title="自定义商品列表"
        v-for="item in data"
        :key="item._id"
        :to="'/pages/detail/detail?id=' + item._id + '&title=' + item.name"
      >
        <!-- 通过header插槽定义列表左侧图片 -->
        <template v-slot:header>
          <view class="uni-thumb shop-picture shop-picture-column">
            <image :src="baseurl + item.thumbnail" mode="aspectFill"></image>
          </view>
        </template>
        <!-- 通过body插槽定义商品布局 -->
        <template v-slot:body>
          <view class="shop">
            <view>
              <view class="uni-title">
                <text class="uni-ellipsis-2">{{ item.name }}</text>
              </view>
              <view>
                <text class="uni-tag hot-tag">{{ item.type }}</text>
                <!-- <text v-for="tag in item.tag" :key="tag" class="uni-tag">{{
                  tag
                }}</text> -->
              </view>
            </view>
            <view>
              <view class="shop-price">
                <text>¥</text>
                <text class="shop-price-text">{{ item.money }}</text>
                <text>.00</text>
              </view>
              <!-- <view class="uni-note">{{ item.integral }}</view> -->
              <view class="uni-note ellipsis">
                <text class="uni-ellipsis-1">积分: {{ item.integral }}</text>
                <text class="uni-link">详情 ></text>
              </view>
            </view>
          </view>
        </template>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<script>
export default {
  props: {
    // 数据内容
    data: { type: Array, default: () => [] },
    name: { type: String, default: "默认title" },
  },
  computed: {},
  data() {
    return {
      waterfall: false,
      baseurl: "http://192.168.0.45:9002",
    };
  },
  async mounted() {},
  methods: {
    async onClick(e) {
      console.log(e);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/static/uni-ui.scss";
.uni-list-item--waterfall {
  width: 50%;
  box-sizing: border-box;
}

.shop {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.shop-picture {
  width: 110px;
  height: 110px;
}

.shop-picture-column {
  width: 100%;
  height: 170px;
  margin-bottom: 10px;
}

.shop-price {
  margin-top: 5px;
  font-size: 12px;
  color: #ff5a5f;
}

.shop-price-text {
  font-size: 16px;
}

.hot-tag {
  background: #ff5a5f;
  border: none;
  color: #fff;
}

.button-box {
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  background: #007aff;
  color: #fff;
}

.uni-link {
  flex-shrink: 0;
}

.ellipsis {
  display: flex;
  overflow: hidden;
}

.uni-ellipsis-1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.uni-ellipsis-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>