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

<gracePage headerBG="#FFFFFF" footerBg="#FFFFFF" customHeader="{{false}}">
  <view slot="gBody" style="padding-bottom:120rpx;">
    <!-- 轮播图 -->
    <swiper class="grace-swiper"  autoplay="true" indicator-dots 
    indicator-color="rgba(255, 255, 255, 1)" indicator-active-color="#3688FF" 
    style="height:399rpx" interval="5000">
      <swiper-item class="grace-swiper-item" wx:for="{{swiperItems}}" wx:key="index">
        <image class="grace-swiper-image" src="{{item}}" mode="widthFix"></image>
      </swiper-item>
    </swiper>
    <!-- 商品标题 分享按钮 -->
    <view class="grace-product-padding grace-space-between grace-flex-vcenter">
      <text class="grace-product-title grace-bold">{{product.name}}</text>
      <view class="grace-product-share" bindtap="share"><text class="grace-icons icon-share3"></text></view>
    </view>
    <view class="grace-common-line"></view>
    <!-- 价格 -->
    <view class="grace-product-padding">
      <view class="grace-nowrap grace-flex-vcenter">
        <text class="grace-product-price">￥{{product.price}}</text>
        <text class="grace-text grace-gray grace-line-through" style="margin-left:30rpx;">￥{{product.priceMarket}}</text>
      </view>
      <view class="grace-space-between grace-flex-vcenter">
        <text class="grace-text-small grace-gray">运费 ￥0.00</text>
        <text class="grace-text-small grace-gray">已售 21008 件</text>
        <text class="grace-text-small grace-gray">浏览 36万次</text>
      </view>
    </view>
    <view class="grace-common-line"></view>
    <!-- 底部信息切换导航 -->
    <view class="grace-product-padding">
      <graceNavBar items="{{navItems}}" lineHeight="80rpx" isCenter="{{true}}" 
      currentIndex="{{active}}" size="{{200}}" activeLineBg="#FF7900" textAlign="center"
      activeColor="#FF7900" activeLineWidth="200rpx" activeLineHeight="2rpx" 
      margin="{{10}}" bind:change="navChange"></graceNavBar>
    </view>
    <!-- 详情 请根据项目情况自行改进 可以使用 富文本-->
    <view class="grace-product-padding" hidden="{{active == 1}}">
      <image class="grace-product-info-img" src="{{item}}" mode="widthFix" wx:for="{{product.imgs}}" wx:key="index"></image>
    </view>
    <!-- 评论区 -->
    <view class="grace-comments grace-product-padding" hidden="{{active == 0}}">
      <view class="grace-comments-items" wx:for="{{commentContents}}" wx:key="index">
        <image src="{{item.face}}" class="grace-comments-face"></image>
        <view class="grace-comments-body">
          <view class="grace-comments-header">
            <text class="grace-comments-header-text">{{item.name}}</text>
            <text class="grace-comments-info-text">{{item.date}}</text>
          </view>
          <text class="grace-comments-content">{{item.content}}</text>
          <view class="grace-comments-imgs" wx:if="{{item.imgs}}">
            <view class="grace-comments-image" wx:for="{{item.imgs}}" wx:for-index="indexImg" wx:for-item="img" wx:key="indexImg">
              <image src="{{img}}" data-index1="{{index}}" data-index2="{{indexImg}}" mode="widthFix" class="grace-comments-img" catchtap="showImgs"></image>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 属性选择 -->
    <graceBottomDialog show="{{attrIsShow}}" bind:closeDialog="closeAttr">
      <form bindsubmit="attrSubmit" style="box-sizing:border-box; padding:10rpx 25rpx;" class="grace-form" slot="content">
        <!-- 关闭按钮 -->
        <view class="grace-nowrap grace-flex-end">
          <text class="grace-icons icon-close" catchtap="closeAttr"></text>
        </view>
        <!-- 头部商品信息 -->
        <view class="grace-product-attr-info">
          <image class= "grace-product-attr-info-image"  mode="widthFix" 
          src="https://img13.360buyimg.com/n7/jfs/t1/9085/2/12381/146200/5c371c5bE08328383/4f4ba51aed682207.jpg"></image>
          <view class="grace-product-attr-info-body">
            <text class="grace-product-attr-info-title">{{product.name}}</text>
            <text class="grace-product-attr-info-stone">库存 : 1999件</text>
          </view>
        </view>
        <!-- 属性列表区 -->
        <scroll-view style="height:700rpx;" scroll-y>
          <view class="grace-title grace-margin-top">选择颜色</view>
          <view><graceSelectTags selectedColor="#FF0036" items="{{colorTips}}" type="radio" bind:change="change1"></graceSelectTags></view>
          <view class="grace-title grace-margin-top">选择类型</view>
          <view><graceSelectTags selectedColor="#FF0036" items="{{typeTips}}" type="radio" bind:change="change2"></graceSelectTags></view>
          <view class="grace-margin-top"><text class="grace-title">购买数量</text></view>
          <view>
            <graceNumberBox value="{{buyNum}}" bind:change="buyNumChange"></graceNumberBox>
          </view>
        </scroll-view>
        <view class="grace-product-attr-btn">
          <button type="warn" class="grace-button grace-border-radius grace-bg-red" formType="submit">立即购买</button>
        </view>
      </form>
    </graceBottomDialog>
  </view>
  <!-- 底部 -->
  <view class="grace-space-between grace-flex-vcenter grace-bg-white" slot="gFooter">
    <view class="grace-grids grace-nowrap" style="width:250rpx;">
      <view class="grace-grids-items grace-relative">
        <text class="grace-grids-icon grace-icons icon-home"></text>
        <text class="grace-grids-text grace-grids-text">首页</text>
      </view>
      <view class="grace-grids-items grace-relative">
        <text class="grace-grids-icon grace-grids-icon grace-icons icon-shoucang grace-footer-active"></text>
        <text class="grace-grids-text grace-grids-text grace-footer-active">收藏</text>
      </view>
    </view>
    <view class="grace-flex-end" style="width:460rpx;">
      <button type="warn" class="grace-footer-button" style="background:#E55D52;" bindtap="buyNow">立即购买</button>
      <button type="warn" class="grace-footer-button" style="background:#F37B1D;" bindtap="buyNow">加入购物车</button>
    </view>
  </view>
</gracePage>