dreamland/template/graceUI商城套装新版本/graceMallForWX/pages/index/index.wxml

<!--index.wxml-->
<gracePage headerBG="#FF0000" statusBarBG="#FF0036">
  <!-- 页面头部 -->
  <view slot="gHeader">
    <view class="grace-header-body">
      <text class="grace-header-icons grace-icons icon-scancode grace-white"></text>
      <view class="grace-header-content">
        <view style="width:100%;">
          <graceSearch></graceSearch>
        </view>
      </view>
    </view>
  </view>
  <!-- 页面主体 -->
  <view slot="gBody">
    <!-- 轮播图 start -->
    <swiper class="grace-swiper" autoplay="true" indicator-dots indicator-color="rgba(255, 255, 255, 1)" 
    indicator-active-color="#FF0036" style="height:288rpx" interval="3000">
      <swiper-item class="grace-swiper-item" wx:for="{{swiperItems}}" wx:key="index">
        <navigator url='' class="grace-img-in">
          <image src="{{item}}" mode="widthFix" class="grace-swiper-image"></image>
        </navigator>
      </swiper-item>
    </swiper>
    <view class="grace-common-line"></view>
    <!-- 推荐图标 start -->
    <view class="grace-grids">
      <navigator url="{{item.path}}" class="grace-grids-items" wx:for="{{indexCate}}" wx:key="index">
        <image class="grace-grids-icon-img" src="{{item.img}}" mode="widthFix"></image>
        <text class="grace-grids-text">{{item.title}}</text>
      </navigator>
    </view>
    <view class="grace-common-line"></view>
    <view class="grace-body">
      <!-- 猜你喜欢 start -->
      <view class="grace-title">
        <text class="grace-title-text grace-black">猜你喜欢</text>
        <!-- 换一批调用 youlike 函数，利用后端随机更新喜欢的内容即可 -->
        <text class="grace-icons icon-refresh grace-green grace-text-small icon-right-margin" bindtap="youlike">换一批</text>
      </view>
      <view class="grace-img-card">
        <view class="grace-img-card-item" :data-productid="index" wx:for="{{youlikes}}" wx:key="index" bindtap="openProductInfo">
          <view class="grace-img-card-img">
            <image src="{{item.img}}" mode="widthFix" class="grace-img-card-img"></image>
          </view>
          <text class="grace-img-card-title grace-ellipsis">{{item.name}}</text>
          <view>
            <text class="grace-img-card-price">￥{{item.price}}</text>
            <text class="grace-line-through grace-text-small grace-gray">￥{{item.priceMarket}}</text>
          </view>
        </view>
      </view>
      <!-- 猜你喜欢 end -->
      <!-- 循环首页分类及分类推荐的产品 start -->
      <view wx:for="{{indexCateAndProducts}}" wx:key="index">
        <view class="common-line"></view>
        <view class="grace-title">
          <text class="grace-title-text grace-black">{{item.cateName}}</text>
          <view data-cateid="{{item.cateId}}">
            <text class="grace-text-small grace-gray">更多</text>
            <text class="grace-text-small grace-gray grace-icons icon-arrow-right icon-left-margin"></text>
          </view>
        </view>
        <view class="grace-img-card">
          <view class="grace-img-card-item" data-productid="{{index}}"  bindtap="openProductInfo" 
          wx:for="{{item.products}}" wx:for-index="productIndex" wx:for-item="product" wx:key="productIndex">
            <view class="grace-img-card-img">
              <image src="{{product.img}}" mode="widthFix" class="grace-img-card-img"></image>
            </view>
            <text class="grace-img-card-title grace-ellipsis">{{product.name}}</text>
            <view>
              <text class="grace-img-card-price">￥{{product.price}}</text>
              <text class="grace-line-through grace-text-small grace-gray">￥{{product.priceMarket}}</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 循环首页分类及分类推荐的产品 end -->
    </view>
  </view>
</gracePage>