<view class="detail-container">
  <scroll-view scroll-y="{{true}}" class="section">
    <swiper indicator-dots="{{true}}"
    autoplay="{{true}}" interval="{{4000}}" duration="{{300}}" class="imgView">
      <block wx:for="{{lunboImg}}" >
        <swiper-item class="lunbo">
          <image src="{{item}}" class="slide-image" mode="aspectFill" />
        </swiper-item>
      </block>
    </swiper>
    <view class="productInfo">
      <view class="prodeuctLeft">
        <view class="ProductName">{{ProductName}}</view>
        <view class="price">
          <text class="nowPrice">￥{{newPrice}}</text>
          <text class="oldPrice">市场价：<span>￥{{oldPrice}}</span></text>
        </view>
      </view>
      <view class="share">
          <view>
            <image src="/images/detailImages/share.png"></image>
            <text>分享</text>
          </view>
      </view>
    </view>
    <view class="pingfen">
      <text>客户评分：</text>
      <image src="/images/detailImages/star.png"></image>
      <image src="/images/detailImages/star.png"></image>
      <image src="/images/detailImages/star.png"></image>
      <image src="/images/detailImages/star.png"></image>
    </view>
    <view class="shangpin">
      <text class="tip">商品参数</text>
      <ul>
        <li class="shangpin{{index}}" wx:for="{{goodDetail}}" wx:for-item="item">{{item}}</li>
      </ul>
    </view>
    <view class="shadow"></view>
    <view class="imgBox">
      <image wx:for="{{imgBox}}" src="{{item.ImageUrl}}"></image>
    </view>
  </scroll-view>
  <view class="footer">
    <text class="white"></text>
    <text class="addToCar" bindtap="addToCar">加入购物车</text>
    <text class="nowBuy">立即购买</text>
  </view>
  <modal class="noGood" title="加入购物车成功" confirm-text="确定" cancel-text="去结算" hidden="{{modalHidden}}" bindconfirm="hiddenModal"></modal>
</view>

.detail-container .section .imgView {
  width: 100%;
  height: 750rpx; }
  .detail-container .section .imgView .lunbo image {
    width: 100%;
    height: 750rpx; }

.detail-container .section .productInfo {
  width: 100%;
  padding: 30rpx 30rpx 6rpx;
  box-sizing: border-box;
  border-bottom: 1px solid #999;
  display: flex; }
  .detail-container .section .productInfo .prodeuctLeft {
    flex: 3; }
    .detail-container .section .productInfo .prodeuctLeft .ProductName {
      width: 100%;
      height: 80rpx;
      font-size: 11px;
      color: #444; }
    .detail-container .section .productInfo .prodeuctLeft .price {
      display: flex;
      width: 100%; }
      .detail-container .section .productInfo .prodeuctLeft .price .nowPrice {
        flex: 2;
        font-size: 18px;
        color: #FC8A66; }
      .detail-container .section .productInfo .prodeuctLeft .price .oldPrice {
        flex: 3;
        font-size: 11px;
        color: #999; }
  .detail-container .section .productInfo .share {
    flex: 1;
    padding: 30rpx; }
    .detail-container .section .productInfo .share view {
      margin-left: 40rpx;
      border-left: 1px solid #999;
      display: flex;
      flex-direction: column;
      padding-left: 20rpx; }
      .detail-container .section .productInfo .share view image {
        width: 36rpx;
        height: 40rpx; }
      .detail-container .section .productInfo .share view text {
        font-size: 10px;
        color: #444; }

.detail-container .section .pingfen {
  padding: 16rpx 0 8rpx 30rpx;
  border-bottom: 1px solid #999;
  height: 38rpx; }
  .detail-container .section .pingfen text {
    font-size: 10px;
    color: #999; }
  .detail-container .section .pingfen image {
    width: 32rpx;
    height: 32rpx;
    margin-left: 6rpx; }

.detail-container .section .shangpin {
  width: 100%; }
  .detail-container .section .shangpin .tip {
    width: 100%;
    padding: 16rpx 0 30rpx 30rpx;
    font-size: 12px;
    color: #000; }
  .detail-container .section .shangpin ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap; }
    .detail-container .section .shangpin ul li {
      width: 375rpx;
      padding: 10rpx 0 10rpx 60rpx;
      font-size: 10px;
      color: #707070;
      box-sizing: border-box; }
    .detail-container .section .shangpin ul .shangpin6 {
      width: 700rpx; }

.detail-container .section .shadow {
  height: 32rpx; }

.detail-container .section .imgBox image {
  height: 500rpx; }

.detail-container .footer {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 12px;
  color: #fff;
  background-color: #F1F1F1;
  position: fixed;
  bottom: 0;
  display: flex;
  flex-direction: row; }
  .detail-container .footer .white {
    flex: 2; }
  .detail-container .footer .addToCar {
    flex: 1;
    background-color: #f47920; }
  .detail-container .footer .nowBuy {
    flex: 1;
    background-color: #FF2501; }

Page({
  data: {
    goodInfo:[],
    modalHidden:true,
    lunboImg:[],
    imgBox:[],
    ProductName:[],
    newPrice:"",
    oldPrice:"",
    goodDetail:[],
    shoppingCartInfo:{
      goodId:"",
      goodImg:"",
      goodName:"",
      goodPrice:"",
      goodSum:1
    }
  },
  onLoad: function (options) {
    var goodId=options.goodId;
    var that=this;
    wx.request({
      url: 'http://localhost:81/mock/detail.json',
      header: {
          'Content-Type': 'application/json'
      },
      success: function(res) {
        for(var i=0;i<res.data.length;i++){
          if(goodId==res.data[i].ProductId){
            var arrImg=[];
            var arrDetail=[];
            for(var j=5;j<10;j++){
              arrImg.push(res.data[j].ProductImageList[j].ImageUrl)
            }
            for(var k=0;k<res.data[i].ProductParamList.length;k++){
              arrDetail.push(res.data[i].ProductParamList[k].ParamName+":"+res.data[i].ProductParamList[k].ParamValue);
            }
            that.setData({
              goodInfo:res.data[i],
              imgBox:res.data[i].ProductImageList,
              lunboImg:arrImg,
              ProductName:res.data[i].ProductName,
              goodDetail:arrDetail,
              'shoppingCartInfo.goodId':goodId,
              'shoppingCartInfo.goodImg':res.data[i].ProductImageList[0].ImageUrl
            });
          }
        }
      },
      fail: function (error) {
        console.log(error);
      }
    });
    wx.request({
      url: 'http://localhost:81/mock/sort'+goodId.substring(1,2)+'.json',
      header: {
          'Content-Type': 'application/json'
      },
      success: function(res) {
        for(var i=0;i<res.data.length;i++){
          if(goodId==res.data[i].ProductId){
            that.setData({
              newPrice:res.data[i].ProductSalePrice,
              oldPrice:res.data[i].ProductMarketPrice,
              'shoppingCartInfo.goodName':res.data[i].ProductName,
              'shoppingCartInfo.goodPrice':res.data[i].ProductSalePrice
            })
          }
        }
      },
      fail: function (error) {
        console.log(error);
      }
    });
  },
  addToCar:function(){
    this.setData({
      modalHidden:false
    })
    if(wx.getStorageSync('shoppingCartInfo')){
      var arrInfo= wx.getStorageSync('shoppingCartInfo');
      var flag=true;
      for(var i=0;i<arrInfo.length;i++){
        if(this.data.shoppingCartInfo.goodId==arrInfo[i].goodId){
          arrInfo[i].goodSum++;
          flag=false;
        }
      }
      if(flag){
        arrInfo.push(this.data.shoppingCartInfo);
      }
    }else{
      var arrInfo=[];
      arrInfo.push(this.data.shoppingCartInfo);
    }
    wx.setStorageSync('shoppingCartInfo',arrInfo);
    console.log(wx.getStorageSync('shoppingCartInfo'));
  },
  hiddenModal:function(){
    this.setData({
      modalHidden:true
    })
  }
})