web-base-h5/pages/shareArea/hiList.vue

<template>
  <view class="contain">
    <!-- 头部营销区域 -->
    <view class="header-section">
      <view class="hero-content">
        <view class="hero-title">
          <text class="hero-main">新人专享特惠</text>
          <text class="hero-sub">精选好物·品质优选</text>
        </view>
        <!-- <view class="promotion-banner">
          <text class="promo-text">限时优惠·新人福利</text>
        </view> -->
      </view>
    </view>

    <view class="goods-container">
      <scroll-view
        class="goodList"
        scroll-y="true"
        enhanced
        :show-scrollbar="false"
      >
        <view v-for="item in goodList" :key="item.waresCode" class="goodList_i">
          <img :src="item.cover1" class="cover" alt="" />
          <view class="goodList_ir">
            <view class="tit1">
              {{ item.waresName }}
            </view>

            <view class="goodList_ib">
              <view class="price-container">
                <!-- <text class="currency">￥</text> -->
                <text class="price">{{
                  item.waresPrice | numberToCurrency
                }}</text>
              </view>
              <!-- <img @click.stop="addCar(item)"
                       src="@/static/images/cart.png"
                       alt=""> -->
            </view>
            <view class="toBuy" @click.stop="goBuy(item)">立即购买</view>
          </view>
        </view>
        <view class="list-bottom">
          <text class="bottom-text">— 已显示全部商品 —</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import * as api from '@/config/login.js'
import { setToken } from '@/config/auth.js'

export default {
  data() {
    return {
      pkParent: '',
      goodList: [],
      placeParent: '',
    }
  },
  filters: {
    seles(value) {
      if (value > 999) {
        return 999 + '+'
      } else {
        return value
      }
    },
  },
  onLoad(options) {
    this.pkParent = options.pkParent
    this.getToken()
  },
  methods: {
    getToken() {
      api
        .autoLogin({
          pkParent: this.pkParent,
        })
        .then(res => {
          setToken(res.data.access_token, res.data.expires_in)
          this.getList()
          this.getCode()
        })
    },
    getCode() {
      api.fansConvertCode(this.pkParent).then(res => {
        this.placeParent = res.data
        uni.setStorageSync('placeParent', this.placeParent)
      })
    },
    getList() {
      api
        .queryWares({
          shareMemberCode: this.pkParent,
        })
        .then(res => {
          this.goodList = res.data
        })
    },
    goBuy(item) {
      const params = {
        ...item,
        pkParent: this.pkParent,
      }
      uni.navigateTo({
        url: '/pages/shareArea/hiOrder?allData=' + JSON.stringify(item),
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.contain {
  background: linear-gradient(
    135deg,
    #005bac 0%,
    #0066cc 50%,
    #f5f7fa 50%,
    #e8f4f8 100%
  );
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

// 头部营销区域
.header-section {
  background: linear-gradient(135deg, #005bac 0%, #0066cc 100%);
  padding: 50rpx 32rpx 60rpx;
  animation: slideDown 0.6s ease-out;

  .hero-content {
    text-align: center;

    .hero-title {
      margin-bottom: 24rpx;

      .hero-main {
        display: block;
        color: #fff;
        font-size: 40rpx;
        font-weight: 700;
        margin-bottom: 8rpx;
        animation: fadeInUp 0.8s ease-out 0.2s both;
      }

      .hero-sub {
        display: block;
        color: rgba(255, 255, 255, 0.9);
        font-size: 26rpx;
        font-weight: 400;
        animation: fadeInUp 0.8s ease-out 0.4s both;
      }
    }

    .promotion-banner {
      background: linear-gradient(
        135deg,
        #ff6b35 0%,
        #f7931e 50%,
        #ffd700 100%
      );
      border-radius: 30rpx;
      padding: 18rpx 36rpx;
      box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.4);
      animation:
        fadeInUp 0.8s ease-out 0.6s both,
        promoBreathe 3s ease-in-out infinite 1s;
      position: relative;
      overflow: hidden;
      border: 2rpx solid rgba(255, 255, 255, 0.3);

      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.4),
          transparent
        );
        animation: shimmer 2.5s ease-in-out infinite;
      }

      .promo-text {
        color: #fff;
        font-size: 28rpx;
        font-weight: 700;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        position: relative;
        z-index: 2;
      }
    }
  }
}

// 商品容器区域
.goods-container {
  flex: 1;
  background: #f8fafc;
  border-radius: 40rpx 40rpx 0 0;
  margin-top: -40rpx;
  position: relative;
  z-index: 3;
  padding: 32rpx 24rpx 0;
  animation: fadeIn 0.8s ease-out 0.3s both;

  .section-title {
    text-align: center;
    margin-bottom: 24rpx;
    padding: 20rpx 0;

    .title-text {
      display: block;
      color: #1e293b;
      font-size: 32rpx;
      font-weight: 600;
      margin-bottom: 8rpx;
    }

    .title-desc {
      display: block;
      color: #64748b;
      font-size: 24rpx;
    }
  }
}

// 商品列表滚动区域
.goodList {
  height: calc(100vh - 400rpx);
  padding: 0 8rpx;

  .goodList_i {
    display: flex;
    background: #ffffff;
    border-radius: 20rpx;
    margin-bottom: 24rpx;
    padding: 24rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 91, 172, 0.06);
    border: 1rpx solid rgba(0, 91, 172, 0.1);
    transition: all 0.3s ease;
    animation: slideInUp 0.6s ease-out both;
    opacity: 0;

    &:hover {
      transform: translateY(-4rpx);
      box-shadow: 0 12rpx 32rpx rgba(0, 91, 172, 0.15);
    }

    .cover {
      width: 240rpx;
      height: 240rpx;
      background: #f8fafc;
      border: 1rpx solid #e2e8f0;
      border-radius: 16rpx;
      flex-shrink: 0;
      overflow: hidden;
    }

    .goodList_ir {
      margin-left: 24rpx;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .tit1 {
        color: #1e293b;
        font-size: 32rpx;
        font-weight: 600;
        line-height: 1.4;
        margin-bottom: 16rpx;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .sales {
        color: #64748b;
        font-size: 24rpx;
        font-weight: 400;
        margin-bottom: 16rpx;
      }

      .goodList_ib {
        margin-bottom: 24rpx;

        .price-container {
          display: flex;
          align-items: baseline;

          .currency {
            color: #ff6b35;
            font-size: 24rpx;
            font-weight: 600;
            margin-right: 4rpx;
          }

          .price {
            color: #ff6b35;
            font-size: 36rpx;
            font-weight: 700;
          }
        }

        img {
          width: 56rpx;
          height: 56rpx;
        }
      }

      .toBuy {
        background: #005bac;
        color: #ffffff;
        padding: 20rpx 0;
        text-align: center;
        border-radius: 12rpx;
        font-size: 28rpx;
        font-weight: 600;
        border: none;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent
          );
          transition: left 0.5s;
        }

        &:hover {
          background: #0066cc;
          transform: translateY(-2rpx);
          box-shadow: 0 6rpx 16rpx rgba(0, 91, 172, 0.3);

          &::before {
            left: 100%;
          }
        }

        &:active {
          transform: scale(0.98);
        }
      }
    }
  }

  .list-bottom {
    text-align: center;
    padding: 40rpx 0 60rpx;

    .bottom-text {
      color: #64748b;
      font-size: 24rpx;
    }
  }
}

// 动画定义
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-50rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(40rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

@keyframes promoBreathe {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 12rpx 32rpx rgba(255, 107, 53, 0.6);
  }
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  50% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

// 商品卡片延迟动画
.goodList_i:nth-child(1) {
  animation-delay: 0.1s;
}
.goodList_i:nth-child(2) {
  animation-delay: 0.2s;
}
.goodList_i:nth-child(3) {
  animation-delay: 0.3s;
}
.goodList_i:nth-child(4) {
  animation-delay: 0.4s;
}
.goodList_i:nth-child(5) {
  animation-delay: 0.5s;
}
.goodList_i:nth-child(n + 6) {
  animation-delay: 0.6s;
}

// 响应式优化
@media (max-width: 750rpx) {
  .header-section {
    padding: 40rpx 24rpx 50rpx;

    .hero-content {
      .hero-title .hero-main {
        font-size: 36rpx;
      }
    }
  }

  .goodList {
    .goodList_i {
      padding: 20rpx;

      .cover {
        width: 200rpx;
        height: 200rpx;
      }

      .goodList_ir {
        margin-left: 20rpx;

        .tit1 {
          font-size: 28rpx;
        }

        .goodList_ib {
          .price-container {
            .price {
              font-size: 32rpx;
            }
          }
        }

        .toBuy {
          padding: 18rpx 0;
          font-size: 26rpx;
        }
      }
    }
  }
}
</style>