• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

微信小程序商品详情页面开发案例(欢迎关注大白菜程序猿)

互联网 diligentman 2周前 (04-07) 12次浏览

商品详情页面开发案例

页面详细设计

微信小程序商品详情页面开发案例(欢迎关注大白菜程序猿)

详细设计步骤:
<!--pages/goods1/goods1.wxml-->
<text>这是一个测试</text>
<!--商品幻灯片-->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" class="banner"
  duration="{{duration}}" circular="{{duration}}">
  <block wx:for="{{goods_img}}" wx:key="goods_info">
    <swiper-item>
      <image src="{{imghref}}{{item.img}}" class="slide-image" mode="aspectFill" data-src='{{imghref}}{{item.img}}'
        bindtap="previewImage" />
    </swiper-item>
  </block>
</swiper>
<!--商品幻灯片 end-->
<view class="info-price clear">
  <view class='price'>¥{{goods_info.goods_price}} </view>
  <view class='fenxiang'>
    <button class='fxbtn' open-type="share">
      <view style='height:20px;margin-top:8px;'>
        <image src='/img/mryhtx.jpg' mode="aspectFill"></image>
      </view>
      <view>分享</view>
    </button>
  </view>
</view>
<view class="info-title">
  <text>{{goods_info.goods_title}}</text>
</view>

<view style="border-top:1px solid #F6F6F6;background: #fff; padding:5px 15px;">
  <view class="clearfix flex grey gridXt">
    <text class="sub">
      <block wx:if='{{goods_info.goods_yunfei==0.00}}'>运费:包邮</block>
      <block wx:else>运费:{{goods_info.goods_yunfei}}</block>
    </text>
    <text class="sub">库存:{{goods_info.goods_kucun}}</text>
    <text class="sub">销量:{{goods_info.goods_xiaoliang}}</text>
  </view>
</view>
<block wx:if="{{pjDataList!=''}}">
  <!--评价-->
  <view class='pj_box'>
    <view style="height:40px;line-height: 40px;border-bottom:1px solid #f5f5f5;">
      <view style='float:left;'>商品评价</view>
      <view style='float:right;margin-left:2px;margin-top:-1px;'>
        <image src="/img/mryhtx.jpg" class="ico_img_jt"></image>
      </view>
      <view style='float:right;font-size:12px;color:#A2A2A2;'>
        <navigator url="pjList?id={{goods_id}}">查看全部</navigator>
      </view>
      <view class='clear'></view>
    </view>
    <block wx:for="{{pjDataList}}" wx:for-item="item" wx:key="pj">
      <view class="list_item">
        <view class='pj_u_info clear'>
          <view class='header_img'>
            <image src="{{item.headpic}}" mode="aspectFit"></image>
          </view>
          <view class='name'>{{item.author}}</view>
          <view class='time'>{{item.add_time}}</view>
        </view>
        <view class='pj_cont'>
          {{item.content}}
        </view>
      </view>
    </block>
  </view>
</block>
<!--商品详情-->
<view class='details_box'>
  <view style="height:40px;line-height: 40px;border-bottom:1px solid #f5f5f5;">
    <view>商品详情</view>
  </view>
  <view style='padding:10px 0px;'>
    <view class="wxParse">
      {{goods_info.content}}
    </view>
  </view>
</view>

<!--底部浮动 start-->
<view class="foot-nav mt15">
  <view class="flex con gridXt tc">
    <view class="fast-links mr15 flex f12">
      <view class="sub gridYr" bindtap='shoucang'>
        <text class="iconfont {{is_shoucang==0?'icon-shoucang1':'icon-shoucang2'}}">收藏</text>
      </view>
      <view class="sub kefu">
        <button open-type="contact">
          <text class="iconfont icon-lianxikefu">客服</text>
        </button>
      </view>
      <view class="sub gridYr">
        <text class="iconfont icon-gouwuche">购物车</text>
      </view>
    </view>
    <view class="add-cart sub f16">
      <button class="add-cart-btn" bindtap='buy'>立即购买</button>
    </view>
  </view>
</view>
// pages/goods1/goods1.js
// index/details.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    is_shoucang: 0,
    goods_info: {
      goods_id: 1,
      goods_title: "商品标题1",
      goods_price: '100',
      goods_yunfei: 0,
      goods_kucun: 100,
      goods_xiaoliang: 1,
      content: '商品介绍详情商品介绍详情商品介绍详情商品介绍详情商品介绍详情商品介绍详情商品介绍详情'
    },
    goods_img: [{
        'img': '26&gp=0.jpg'
      },
      {
        'img': 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.sooshong.com%2Fpicture%2Fuserpic2%2F2013-8-8%2F574973201388164942.jpg&refer=http%3A%2F%2Fpic.sooshong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620199902&t=37e1728bfdcf7cd60b653084960e1cfe'
      },
      {
        'img': 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.616pic.com%2Fys_bnew_img%2F00%2F20%2F37%2FQpKhSYBpcK.jpg&refer=http%3A%2F%2Fpic.616pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620199902&t=5c96e332bfee553001bcc4b7807bd90c'
      },
      {
        'img': 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2F4763a03d-ff3e-485b-a4ba-1278ad50223a%40r_750w_750h_ss1.jpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620199902&t=578694ae6a3194f8285c64277d5dc34c'
      },
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    pjDataList: [{
        headpic: '/img/mryhtx.jpg',
        author: '张三',
        add_time: '2018-06-01',
        content: '好评好评,真实太好了!'
      },
      {
        headpic: '/img/mryhtx.jpg',
        author: '张三',
        add_time: '2018-06-01',
        content: '好评好评,真实太好了!'
      }
    ], //评价数据
  },


  previewImage: function (e) {
    var current = e.target.dataset.src;
    var href = this.data.imghref;
    var goodsimg = this.data.goods_img;
    var imglist = [];
    for (var i = 0; i < goodsimg.length; i++) {
      imglist[i] = href + goodsimg[i].img
    }
    wx.previewImage({
      current: current, // 当前显示图片的http链接  
      urls: imglist // 需要预览的图片http链接列表  
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})
.clear {
  clear: both;
  overflow: hidden;
}

.banner {
  height: 300px;
}

.slide-image {
  width: 100%;
  height: 100%;
}

/*分享按钮*/
.fenxiang button::after {
  border: none;
}

.fxbtn {
  background: none;
  border: 0px;
  margin: 0px;
  padding: 0px;
  border-radius: 0px;
  font-size: 12px;
}

.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.flex>.sub {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: hidden;
}

.info-title {
  background: #fff;
  padding: 10px 15px;
  font-size: 15px;
}

.info-price {
  border-bottom: 1px solid #F6F6F6;
  background: #fff;
  padding: 0px 15px;
}

.price {
  float: left;
  height: 50px;
  line-height: 50px;
  color: #FF6666;
  font-size: 25px;
}

.fenxiang {
  text-align: center;
  font-size: 12px;
  color: #999;
  width: 50px;
  line-height: 20px;
  overflow: hidden;
  float: right;
}

.fenxiang image {
  width: 20px;
  height: 20px;
}

.price em {
  font-size: 12px;
  margin-left: 20px;
}

.flex {
  position: relative;
  width: auto;
  margin: 0 -15px;
  padding: 3px 15px 0;
}

.store-info {
  background: #fff;
}

.store-info .store,
.store-info .rz-item {
  padding: 10px 15px;
}

.store-info .rz-item view {
  margin-right: 10px;
}

.list_item {
  position: relative;
  padding: 15px 10px;
  background: #fff;
  border-bottom: 1px solid #f5f5f5;
}

.details_box {
  margin-top: 10px;
  padding: 0 15px;
  font-size: 13px;
  background: #fff;
}

.pj_box {
  margin-top: 10px;
  padding: 0 15px;
  font-size: 13px;
  background: #fff;
}

.ico_img_jt {
  vertical-align: middle;
  width: 16px;
  height: 16px;
}

.pj_u_info .header_img {
  float: left;
}

.pj_u_info .header_img image {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
}

.pj_u_info .name {
  float: left;
  margin-left: 10px;
  font-size: 15px;
  color: #333;
}

.pj_u_info .time {
  float: right;
  font-size: 12px;
  color: #999;
}

.pj_cont {
  font-size: 13px;
}

.pj_img {
  margin: 10px 10px 0px 10px;
  width: 120px;
  height: 100px;
}


.foot-nav {
  height: 46px;
}

.foot-nav .con {
  position: fixed;
  height: 46px;
  left: 0;
  bottom: 0;
  right: 0;
  background: #fff;
  z-index: 999;
}

.fast-links {
  width: 160px;
  line-height: 18px;
  text-align: center;
}

.fast-links .iconfont {
  padding: 5px 0;
}

.fast-links .iconfont::before {
  display: block;
  margin-top: 5px;
  font-size: 18px;
}

.notempty {
  position: relative;
}

.notempty::after {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #e64340;
  position: absolute;
  top: 5px;
  right: 50%;
  margin-right: -16px;
}

.add-cart .add-cart-btn {
  background: linear-gradient(to right, #FF7A34, #EE32FF);
  color: #fff;
  border-radius: 50px;
  padding: 0px;
  width: 150px;
  height: 35px;
  line-height: 35px;
  margin-top: 5px;
  margin-right: 15px;
}

.kefu button {
  border: none;
  background: none;
  display: block;
  padding: 0px;
  margin: 0px;
  line-height: 1.5em;
  font-size: inherit;
}

.kefu button::after {
  border: none;
}

.kefu .button-hover {
  color: #333;
  background: none;
}

.kefu button .iconfont {
  padding: 0px;
}

.icon-shoucang2 {
  color: red;
}


喜欢 (0)