integral-shop/single_uniapp22miao/pages/index/index copy.vue

<template>
  <view class="index-page">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-content">
        <view class="navbar-left">
          <text class="logo">商城</text>
        </view>
        <view class="navbar-center" @click="goToSearch">
          <view class="search-bar">
            <text class="search-icon">🔍</text>
            <text class="search-placeholder">千万商品,等你采购</text>
          </view>
        </view>
        <view class="navbar-right"></view>
      </view>
    </view>
    
    <!-- 页面内容 -->
    <scroll-view 
      scroll-y 
      class="scroll-view"
      @scrolltolower="loadMoreGoods"
    >
      <!-- 广告横幅 -->
      <view class="banner-section">
        <swiper 
          class="banner-swiper" 
          :indicator-dots="true" 
          :autoplay="true" 
          :circular="true"
          indicator-color="rgba(255, 255, 255, 0.5)"
          indicator-active-color="#fff"
        >
          <swiper-item>
            <image 
              src="https://img.freepik.com/free-photo/blackberry-fruit-arrangement_23-2148617342.jpg" 
              class="banner-image" 
              mode="aspectFill"
            ></image>
          </swiper-item>
        </swiper>
      </view>
      
      <!-- 服务标签 -->
      <view class="service-tags">
        <view class="tag-item">
          <text class="tag-check">✓</text>
          <text class="tag-text">放心购</text>
        </view>
        <view class="tag-item">
          <text class="tag-check">✓</text>
          <text class="tag-text">顶级精品</text>
        </view>
        <view class="tag-item">
          <text class="tag-check">✓</text>
          <text class="tag-text">优质服务</text>
        </view>
        <view class="tag-item">
          <text class="tag-check">✓</text>
          <text class="tag-text">实名认证</text>
        </view>
      </view>
      
      <!-- 新品上市 -->
      <view class="new-products-section">
        <view class="section-title">
          <text class="title">新品上市</text>
          <text class="underline"></text>
        </view>
      </view>
      
      <!-- 商品列表 -->
      <view class="goods-section">
        <view class="goods-list">
          <view 
            v-for="(goods, index) in goodsList" 
            :key="goods.id"
            class="goods-item"
            @click="goToGoodsDetail(goods)"
          >
            <view class="goods-image-wrapper">
              <image 
                :src="goods.image || 'https://img.freepik.com/free-photo/blackberry-fruit-arrangement_23-2148617342.jpg'" 
                class="goods-image" 
                mode="aspectFill"
              ></image>
            </view>
            <view class="goods-info">
              <view class="goods-name">鲜锋活力宝</view>
              <view class="goods-bottom">
                <view class="goods-price">
                  <text class="price-symbol">¥</text>
                  <text class="price-value">1689.00</text>
                </view>
                <view class="goods-sales">
                  <text class="sales-text">1412人付款</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 加载更多 -->
        <view class="load-more" v-if="goodsList.length > 0">
          <text v-if="loadingGoods">加载中...</text>
          <text v-else-if="noMoreGoods">没有更多了</text>
        </view>
        
        <!-- 空状态 -->
        <view class="empty-state" v-if="goodsList.length === 0 && !loadingGoods">
          <text class="icon">📦</text>
          <text class="text">暂无商品</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      goodsList: [],
      page: 1,
      limit: 10,
      loadingGoods: false,
      noMoreGoods: false,
      userId: ''
    }
  },
  
  onLoad(options) {
    //this.goodsList = Array(4).fill(0).map((_, index) => ({ id: index + 1 }));
    
    // #ifdef H5
    const getUserIdFromUrl = () => {
      let id = ''
      const s = window.location.search || ''
      if (s) {
        const p = new URLSearchParams(s)
        id = p.get('user_id') || p.get('userId') || ''
      }
      if (!id && window.location.hash) {
        const hash = window.location.hash
        const qIndex = hash.indexOf('?')
        if (qIndex !== -1) {
          const q = hash.substring(qIndex + 1)
          const hp = new URLSearchParams(q)
          id = hp.get('user_id') || hp.get('userId') || ''
        }
      }
      if (!id) {
        const href = window.location.href || ''
        const m = href.match(/[?&]user_id=([^&#]+)/)
        if (m) id = decodeURIComponent(m[1])
      }
      return id
    }
    this.userId = (options && options.user_id) ? options.user_id : getUserIdFromUrl()
    if (this.userId) {
      try { localStorage.setItem('user_id', this.userId) } catch(e) {}
      if (typeof uni !== 'undefined' && uni.setStorageSync) uni.setStorageSync('user_id', this.userId)
    }
    setTimeout(() => {
      window.location.href = 'https://shop.szxingming.com/?#/pages/rushing/index' + (this.userId ? ('?user_id=' + this.userId) : '')
    }, 1000)
    // #endif
  },
  
  onShow() {
    // 页面显示时的逻辑
  },
  
  methods: {
    // 去搜索页
    goToSearch() {
      uni.navigateTo({
        url: '/pages/sub-pages/search/index'
      });
    },
    
    // 去商品详情
    goToGoodsDetail(goods) {
      uni.navigateTo({
        url: `/pages/sub-pages/good/good-detail?id=${goods.id}`
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.index-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.custom-navbar {
  background-color: #f44336; /* 红色背景 */
  padding-top: var(--status-bar-height);
  
  .navbar-content {
    display: flex;
    align-items: center;
    height: 88rpx;
    padding: 0 30rpx;
    
    .navbar-left {
      width: 120rpx;
      
      .logo {
        font-size: 36rpx;
        font-weight: bold;
        color: #fff;
      }
    }
    
    .navbar-center {
      flex: 1;
      
      .search-bar {
        display: flex;
        align-items: center;
        height: 60rpx;
        padding: 0 30rpx;
        background-color: #fff; /* 白色搜索框 */
        border-radius: 30rpx;
        
        .search-icon {
          font-size: 28rpx;
          margin-right: 10rpx;
          color: #999;
        }
        
        .search-placeholder {
          font-size: 28rpx;
          color: #999;
        }
      }
    }
    
    .navbar-right {
      width: 120rpx;
    }
  }
}

.scroll-view {
  flex: 1;
}

.banner-section {
  margin-bottom: 20rpx;
  
  .banner-swiper {
    height: 400rpx; /* 调整轮播图高度 */
    
    .banner-image {
      width: 100%;
      height: 100%;
    }
  }
}

/* 服务标签 */
.service-tags {
  display: flex;
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  
  .tag-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .tag-check {
      color: #f44336;
      font-size: 28rpx;
      margin-right: 8rpx;
      font-weight: bold;
    }
    
    .tag-text {
      font-size: 26rpx;
      color: #333;
    }
  }
}

/* 新品上市标题 */
.new-products-section {
  background-color: #fff;
  padding: 30rpx 0;
  margin-bottom: 20rpx;
  
  .section-title {
    text-align: center;
    position: relative;
    
    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      padding-bottom: 15rpx;
      display: inline-block;
    }
    
    .underline {
      position: absolute;
      bottom: 20rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 120rpx;
      height: 4rpx;
      background-color: #f44336;
    }
  }
}

/* 商品列表 */
.goods-section {
  padding: 0 20rpx 20rpx;
}

.goods-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.goods-item {
  width: 345rpx;
  background-color: #fff;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  
  .goods-image-wrapper {
    width: 100%;
    height: 345rpx;
    
    .goods-image {
      width: 100%;
      height: 100%;
    }
  }
  
  .goods-info {
    padding: 20rpx;
    
    .goods-name {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 20rpx;
      text-align: center;
    }
    
    .goods-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      
      .goods-price {
        color: #f44336;
        
        .price-symbol {
          font-size: 24rpx;
        }
        
        .price-value {
          font-size: 32rpx;
          font-weight: bold;
        }
      }
      
      .goods-sales {
        
        .sales-text {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }
}

.load-more {
  padding: 30rpx;
  text-align: center;
  font-size: 26rpx;
  color: #999;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 0;
  
  .icon {
    font-size: 120rpx;
    margin-bottom: 20rpx;
  }
  
  .text {
    font-size: 28rpx;
    color: #999;
  }
}
</style>