微信小程序商城 毕业设计（4）商品简介、详情、评论

配套的后台有jsp版本、php版本、asp版本

wxml代码

<view class="swiper-tab">
    <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">商品</view>
    <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">详情</view>
    <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">评价</view>
</view>

<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px"  >

  <!-- 商品 -->
  <swiper-item >

    <swiper style='height: 600rpx'  indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
          autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"  >
      <block wx:for="{{ads}}" wx:key="item.id">
        <swiper-item>
        <image src="{{item}}" class="slide-image"/>
        </swiper-item>
      </block>
    </swiper>  

    <view class="kongbai">
        <view>
           御泥坊 亮颜补水面膜贴21片
        </view>
        <view class='jiage'>¥ 150.00 </view>    
        <view class='fubiaoti'>
           补水保湿面膜 亮肤淡斑 晒后修护 男女护肤化妆品套装
        </view>                 
    </view>
    <view class='graySpace15'></view>

 
    <view class="huiyuans">
        <view class="huiyuan" >
           普通会员
        </view>
        <view class="huiyuan-jiage" >
           价格： ¥ 150.00
        </view>       
    </view>               
    <view class='graySpace15'></view>

    
    <view  class="kongbai">
      <view >
      库存：4件 （限购：2件/人）
      </view>
      <view >
       已销：555 件
      </view>       
    </view>

 
  </swiper-item>

  <!-- 详情 -->
  <swiper-item  style="height:2111px" >


  <scroll-view class='box2'  scroll-y='true'>
  <view  class='box2-item' style="height:{{winHeight - 31}}px">
      <image src="/cp/01.jpg" class='box2-item' mode="widthFix"></image>
      <image src="/cp/02.jpg" class='box2-item' mode="widthFix"></image>
      <image src="/cp/03.jpg" class='box2-item' mode="widthFix"></image>
      <image src="/cp/04.jpg" class='box2-item' mode="widthFix"></image>
      <image src="/cp/05.jpg" class='box2-item' mode="widthFix"></image>
  </view>
  </scroll-view>

 
  </swiper-item>

  <!-- 评价 -->
  <swiper-item >

  


      <view class="group">

        <view class="group-header">评价内容</view>
        <view class="group-body">
            <textarea placeholder="请输入产品的评价内容，可输入1000字" maxlength="1000"></textarea>
        </view>
        
        <view class="group-body" style='height:50px;'>
        <block wx:for="{{stars}}" wx:key="xxid">
          <image class="star-image" style="left: {{item*150}}rpx" src="{{key > item ?(key-item == 0.5?halfSrc:selectedSrc) : normalSrc}}">
            <view class="item" style="left:0rpx" data-key="{{item+0.5}}" bindtap="selectLeft"></view>
            <view class="item" style="left:75rpx" data-key="{{item+1}}" bindtap="selectRight"></view>
          </image>
        </block>
        </view>

        <view class="btn-submit">
          <button class="btn-block btn-orange" bindtap="questionSubmit">确认提交</button>
        </view>

      </view>



  </swiper-item>


</swiper>


<view class="graySpace"></view> 

<view class="footer">
  <view class="navs">

    <view class="nav-item" style='width:12%' bindtap='toShouYe'>
      <navigator url='/pages/index/index'>
        <image src='/images/sp01.png' class="nav-image"/>
        <text >首页</text>
      </navigator>
    </view>

    <view class="nav-item" style='width:13%' bindtap='ShouCang'>
      <image src='/images/sp02.png' class="nav-image"/>
      <text >收藏</text>
    </view>  

    <view class="nav-item" style='width:15%' bindtap='toGouWuChe' >
        <image src='/images/sp03.png' class="nav-image"/>
        <text >购物车</text>
    </view>  
     
    <view class="nav-item"  style='width:33%' bindtap='JiaGouWuChe'>
      <button class='bt01'>加入购物车</button>
    </view>  

    <view class="nav-item"  style='width:27%'  bindtap='toGouWuChe'>
      <button class='bt02'>立即购买</button>
    </view>    
         
  </view>
</view>

wxss代码

page {
  background-color: #f2f2f2;
}
navigator{margin: 0; padding: 0;}
.swiper-tab{  
    width: 100%;  
    border-bottom: 2rpx solid #777777;  
    text-align: center;  
    line-height: 80rpx;}  
.swiper-tab-list{  font-size: 30rpx;  
    display: inline-block;  
    width: 33%;  
    color: #777777;  
}  
.on{ color: #da7c0c;  
    border-bottom: 5rpx solid #da7c0c;}  
  
.swiper-box{ 
  display: block; height: 100%; width: 100%; overflow:scroll;
  }  
.swiper-box view{  
    text-align: left;  
}

/*标题和价格样式*/
.kongbai{ padding: 10px; background-color: white;}
.kongbai view{ padding: 2px;}
.jiage{ font-size: 16px;color:red; }
.fubiaoti{ font-size: 12px;color: gray; }
/*灰色的空白横线*/
.graySpace15{ background: #eee;min-height: 20rpx;}

/*会员和价格*/
.huiyuans{
   padding: 10px; background-color: white;display: flex;
}
.huiyuan{  width: 30%;
  font-size: 14px; background-color:orangered; color: white; border-radius: 5px;
  display: flex;  justify-content: center;
}
.huiyuan-jiage { 
  width: 70%;
  display: flex;
  justify-content: flex-end;
  padding: 0px;
}

/*产品详情*/
.box2{ 
  width: 100vw; 
  box-sizing: border-box;
  white-space: nowrap; /*这个不能少*/
}
.box2-item{
   display: block;
   width: 100%; height: 100%; box-sizing:  border-box;
}


/*swiper{ height: 600rpx}*/
.slide-image {
  height: 100%;
  width: 100%;
}

/*灰色的空白横线*/
.graySpace{ 
  padding-left: 40rpx;
  background: #eee;
  font-size: 12px;
  min-height: 90rpx;
}


/*底部菜单样式*/
.footer {
  position: fixed;
  bottom: 0;
  height: 44px;
  width: 100%;
  line-height: 44px;
  color: #666;
  border-top: 1px solid #eee;
  background: #fff;
  font-size: 16px;
  text-align: center;
}
.navs {
  display: flex;
}
.nav-item {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 0px;
}
.nav-item navigator{ display: flex;flex-direction: column;}
.nav-image {
  width: 22px;
  height: 22px;
  align-self: center;
}

.nav-item text { 
  color: #666;
  font-size: 12px; margin-top: -10px; text-align: center;
}
.bt01{ 
  width: 100%; 
  background-color: darkorange;
  color:white; 
  border-radius: 0; font-size: 16px; padding: 0; margin: 0; height: 44px;
}
.bt02{ 
  width: 100%; 
  background-color: tomato;
  color:white; 
  border-radius: 0; font-size: 14px; padding: 0; margin: 0; height: 44px;
}







/*评价*/
.group{
  	flex: 1;
  	display: flex;
  	flex-direction: column;
 	  box-sizing: border-box;
   	background: #f9f9f9; font-size: 14px;
}
.group-header{
	line-height: 70rpx;
	display: flex;
	padding: 0 20rpx;
	background: #f9f9f9;
}
.group-body{
	background: #fff;
	border-top: 1rpx solid #ddd;
	border-bottom: 1rpx solid #ddd; padding: 5rpx 20rpx;
}

.btn-submit{
	padding: 20rpx;
  width: 93%;
}
.btn-block{
	width: 100%;
	line-height: 88rpx;
}
.btn-orange{
	background: #f7982a;
	color: #fff;
}

/* 五星评分样式 */
.star-image{
  position: absolute;
 
  width: 100rpx;
  height: 100rpx;
  src: "/images/normal.png";
}
.item{
  width: 75rpx;
  height: 150rpx;
}