微信小程序商城15天从零实战视频课程-商品详情页面

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

js代码

var app = getApp()  


Page({

  /**
   * 页面的初始数据
   */
  data: {
    cpid:"",
    /**  * 页面配置  */
    winWidth: 0,
    winHeight: 0,
    // tab切换  
    currentTab: 0, 
    
    ads: [
      '/img/cp01.jpg',
      '/img/cp02.jpg',
      '/img/cp03.jpg',
    ],
    indicatorDots: true,
    vertical: false,
    autoplay: true,
    interval: 3000,
    duration: 1200,

    /* 五星评分数据 */
    stars: [0, 1, 2, 3, 4],
    normalSrc: '/images/normal.png',
    selectedSrc: '/images/selected.png',
    halfSrc: '/images/half.png',
    key: 0,//评分
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    console.log(options.id);
    that.setData({ cpid: options.id})
    /** 
     * 获取系统信息 
     */
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          winWidth: res.windowWidth,
          winHeight: res.windowHeight
        });
      }
    });  
  },
  /**  * 滑动切换tab   */
  bindChange: function (e) {

    var that = this;
    that.setData({ currentTab: e.detail.current });

  },
  /**  * 点击tab切换  */
  swichNav: function (e) {

    var that = this;

    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  },
  ShouCang:function(){
    wx.showToast({
      title:  this.data.cpid + ' 成功收藏',
    })
  },
  JiaGouWuChe: function () {
    wx.showToast({
      title: '成功加入购物车',
    })
  },
  toShouYe:function(){
    wx.reLaunch({
      url: '/pages/index/index',
    })
  },  
  toGouWuChe:function()
  {
    wx.reLaunch({
      url: '/pages/tmp/gouwuche/01-jianjie',
    })
  },

  //点击右边,半颗星
  selectLeft: function (e) {
    var key = e.currentTarget.dataset.key
    if (this.data.key == 0.5 && e.currentTarget.dataset.key == 0.5) {
      //只有一颗星的时候,再次点击,变为0颗
      key = 0;
    }
    console.log("得" + key + "分")
    this.setData({
      key: key
    })

  },
  //点击左边,整颗星
  selectRight: function (e) {
    var key = e.currentTarget.dataset.key
    console.log("得" + key + "分")
    this.setData({
      key: key
    })
  },

  
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

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;
}

欢迎大家收看我的****：微信小程序商城15天从零实战视频课程
https://edu.csdn.net/course/detail/19437