快应用购物列表组件

淩亂°似流年 2023-07-16 02:32 93阅读 0赞

<template>
      <div class="product-list">
        <div class="list-name" if="{
       { isName }}">
          <image src="/common/images/show.png"></image>
          <text>今日优选</text>
        </div>
        
        <div class="list">
          <div class="cover" for="{
       { list }}">
            <div class="panel" @click="checkDetail($idx, $item.link)">
              <div class="panel-cover">
                <image src="{
       { $item.cover }}"></image>
              </div>
              <div class="panel-name">
                <text>{
       { $item.name }}</text>
              </div>
              <div class="panel-info">
                <div class="panel-info-price">
                  <text class="price">{
       { $item.price }}</text>
                  <text class="original">{
       { $item.original }}</text>
                </div>
                <div class="panel-info-payret"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="list-more" if="{
       { isMore }}" onclick="checkMore">
          <text>查看更多</text>
          <image src="/common/images/right.png"></image>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      props: {
        isName: { type: Boolean, default: false },
        isMore: { type: Boolean, default: false },
        list: { type: Array, default: [] }
      },
      checkMore() {
        this.$emit('more')
      },
      checkDetail(index, link) {
        this.$emit('detail', {index: index, link: link})
      }
    }
    </script>
    
    <style lang="less">
    .product-list {
      padding: 0 15px;
      background-color: #ffffff;
      flex-direction: column;
      width: 100%;
      .list-name {
        justify-content: center;
        padding: 35px;
        image {
          width: 38px;
          height: 39px;
        }
        text {
          margin-left: 12px;
          font-size: 32px;
          color: rgba(51,51,51,1);
        }
      }
      .list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        .cover {
          background-color: rgba(255,255,255,1);
          border-radius: 10px;
          border: 1px solid rgba(0,0,0,0.2);
          width: 330px;
          height: 490px;
          margin-bottom: 30px;
          .panel {
            flex-direction: column;
            .panel-cover {
              image {
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
                width: 330px;
                height: 330px;
              }
            }
            .panel-name {
              padding: 20px 20px 0 20px;
              height: 85px;
              align-items: flex-start;
              text {
                font-size: 26px;
                font-weight: 400;
                color: rgba(0,0,0,0.8);
              }
            }
            .panel-info {
              padding: 10px 20px 20px 20px;
              .panel-info-price {
                .price {
                  /* text-decoration: line-through; */
                  color: #F65100;
                  font-size: 30px;
                  font-weight: bold;
                }
                .original {
                  margin-left: 10px;
                  text-decoration: line-through;
                  color: rgba(0,0,0,0.3);
                  font-size: 28px;
                }
              }
            }
          }
        }
      }
      .list-more {
        justify-content: center;
        margin-bottom: 30px;
        text {
          font-size: 28px;
          color: rgba(0, 0, 0, 0.5);
        }
      }
    }
    </style>