devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序商品详情页面开发案例_微信小程序购物详情页面

作者：AllinToyou | 2024-03-16 05:25:42

赞

踩

微信小程序购物详情页面

页面详细设计

详细设计步骤： 

  1. <!--pages/goods1/goods1.wxml-->
  2. <text>这是一个测试</text>
  3. <!--商品幻灯片-->
  4. <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" class="banner"
  5.   duration="{{duration}}" circular="{{duration}}">
  6.   <block wx:for="{{goods_img}}" wx:key="goods_info">
  7.     <swiper-item>
  8.       <image src="{{imghref}}{{item.img}}" class="slide-image" mode="aspectFill" data-src='{{imghref}}{{item.img}}'
  9.         bindtap="previewImage" />
  10.     </swiper-item>
  11.   </block>
  12. </swiper>
  13. <!--商品幻灯片 end-->
  14. <view class="info-price clear">
  15.   <view class='price'>￥{{goods_info.goods_price}} </view>
  16.   <view class='fenxiang'>
  17.     <button class='fxbtn' open-type="share">
  18.       <view style='height:20px;margin-top:8px;'>
  19.         <image src='/img/mryhtx.jpg' mode="aspectFill"></image>
  20.       </view>
  21.       <view>分享</view>
  22.     </button>
  23.   </view>
  24. </view>
  25. <view class="info-title">
  26.   <text>{{goods_info.goods_title}}</text>
  27. </view>
  28.  
  29. <view style="border-top:1px solid #F6F6F6;background: #fff; padding:5px 15px;">
  30.   <view class="clearfix flex grey gridXt">
  31.     <text class="sub">
  32.       <block wx:if='{{goods_info.goods_yunfei==0.00}}'>运费：包邮</block>
  33.       <block wx:else>运费：{{goods_info.goods_yunfei}}</block>
  34.     </text>
  35.     <text class="sub">库存：{{goods_info.goods_kucun}}</text>
  36.     <text class="sub">销量：{{goods_info.goods_xiaoliang}}</text>
  37.   </view>
  38. </view>
  39. <block wx:if="{{pjDataList!=''}}">
  40.   <!--评价-->
  41.   <view class='pj_box'>
  42.     <view style="height:40px;line-height: 40px;border-bottom:1px solid #f5f5f5;">
  43.       <view style='float:left;'>商品评价</view>
  44.       <view style='float:right;margin-left:2px;margin-top:-1px;'>
  45.         <image src="/img/mryhtx.jpg" class="ico_img_jt"></image>
  46.       </view>
  47.       <view style='float:right;font-size:12px;color:#A2A2A2;'>
  48.         <navigator url="pjList?id={{goods_id}}">查看全部</navigator>
  49.       </view>
  50.       <view class='clear'></view>
  51.     </view>
  52.     <block wx:for="{{pjDataList}}" wx:for-item="item" wx:key="pj">
  53.       <view class="list_item">
  54.         <view class='pj_u_info clear'>
  55.           <view class='header_img'>
  56.             <image src="{{item.headpic}}" mode="aspectFit"></image>
  57.           </view>
  58.           <view class='name'>{{item.author}}</view>
  59.           <view class='time'>{{item.add_time}}</view>
  60.         </view>
  61.         <view class='pj_cont'>
  62.           {{item.content}}
  63.         </view>
  64.       </view>
  65.     </block>
  66.   </view>
  67. </block>
  68. <!--商品详情-->
  69. <view class='details_box'>
  70.   <view style="height:40px;line-height: 40px;border-bottom:1px solid #f5f5f5;">
  71.     <view>商品详情</view>
  72.   </view>
  73.   <view style='padding:10px 0px;'>
  74.     <view class="wxParse">
  75.       {{goods_info.content}}
  76.     </view>
  77.   </view>
  78. </view>
  79.  
  80. <!--底部浮动 start-->
  81. <view class="foot-nav mt15">
  82.   <view class="flex con gridXt tc">
  83.     <view class="fast-links mr15 flex f12">
  84.       <view class="sub gridYr" bindtap='shoucang'>
  85.         <text class="iconfont {{is_shoucang==0?'icon-shoucang1':'icon-shoucang2'}}">收藏</text>
  86.       </view>
  87.       <view class="sub kefu">
  88.         <button open-type="contact">
  89.           <text class="iconfont icon-lianxikefu">客服</text>
  90.         </button>
  91.       </view>
  92.       <view class="sub gridYr">
  93.         <text class="iconfont icon-gouwuche">购物车</text>
  94.       </view>
  95.     </view>
  96.     <view class="add-cart sub f16">
  97.       <button class="add-cart-btn" bindtap='buy'>立即购买</button>
  98.     </view>
  99.   </view>
  100. </view>

 

  1. // pages/goods1/goods1.js
  2. // index/details.js
  3. Page({
  4.  
  5.   /**
  6.    * 页面的初始数据
  7.    */
  8.   data: {
  9.     is_shoucang: 0,
  10.     goods_info: {
  11.       goods_id: 1,
  12.       goods_title: "商品标题1",
  13.       goods_price: '100',
  14.       goods_yunfei: 0,
  15.       goods_kucun: 100,
  16.       goods_xiaoliang: 1,
  17.       content: '商品介绍详情商品介绍详情商品介绍详情商品介绍详情商品介绍详情商品介绍详情商品介绍详情'
  18.     },
  19.     goods_img: [{
  20.         'img': '26&gp=0.jpg'
  21.       },
  22.       {
  23.         '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'
  24.       },
  25.       {
  26.         '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'
  27.       },
  28.       {
  29.         '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'
  30.       },
  31.     ],
  32.     indicatorDots: true,
  33.     autoplay: true,
  34.     interval: 5000,
  35.     duration: 1000,
  36.     pjDataList: [{
  37.         headpic: '/img/mryhtx.jpg',
  38.         author: '张三',
  39.         add_time: '2018-06-01',
  40.         content: '好评好评，真实太好了!'
  41.       },
  42.       {
  43.         headpic: '/img/mryhtx.jpg',
  44.         author: '张三',
  45.         add_time: '2018-06-01',
  46.         content: '好评好评，真实太好了!'
  47.       }
  48.     ], //评价数据
  49.   },
  50.  
  51.  
  52.   previewImage: function (e) {
  53.     var current = e.target.dataset.src;
  54.     var href = this.data.imghref;
  55.     var goodsimg = this.data.goods_img;
  56.     var imglist = [];
  57.     for (var i = 0; i < goodsimg.length; i++) {
  58.       imglist[i] = href + goodsimg[i].img
  59.     }
  60.     wx.previewImage({
  61.       current: current, // 当前显示图片的http链接  
  62.       urls: imglist // 需要预览的图片http链接列表  
  63.     })
  64.   },
  65.  
  66.   /**
  67.    * 生命周期函数--监听页面加载
  68.    */
  69.   onLoad: function (options) {
  70.  
  71.   },
  72.   /**
  73.    * 生命周期函数--监听页面初次渲染完成
  74.    */
  75.   onReady: function () {
  76.  
  77.   },
  78.  
  79.   /**
  80.    * 生命周期函数--监听页面显示
  81.    */
  82.   onShow: function () {
  83.  
  84.   },
  85.  
  86.   /**
  87.    * 生命周期函数--监听页面隐藏
  88.    */
  89.   onHide: function () {
  90.  
  91.   },
  92.  
  93.   /**
  94.    * 生命周期函数--监听页面卸载
  95.    */
  96.   onUnload: function () {
  97.  
  98.   },
  99.  
  100.   /**
  101.    * 页面相关事件处理函数--监听用户下拉动作
  102.    */
  103.   onPullDownRefresh: function () {
  104.  
  105.   },
  106.  
  107.   /**
  108.    * 页面上拉触底事件的处理函数
  109.    */
  110.   onReachBottom: function () {
  111.  
  112.   },
  113.  
  114.   /**
  115.    * 用户点击右上角分享
  116.    */
  117.   onShareAppMessage: function () {
  118.  
  119.   }
  120. })
  1. .clear {
  2.   clear: both;
  3.   overflow: hidden;
  4. }
  5.  
  6. .banner {
  7.   height: 300px;
  8. }
  9.  
  10. .slide-image {
  11.   width: 100%;
  12.   height: 100%;
  13. }
  14.  
  15. /*分享按钮*/
  16. .fenxiang button::after {
  17.   border: none;
  18. }
  19.  
  20. .fxbtn {
  21.   background: none;
  22.   border: 0px;
  23.   margin: 0px;
  24.   padding: 0px;
  25.   border-radius: 0px;
  26.   font-size: 12px;
  27. }
  28.  
  29. .flex {
  30.   display: -webkit-box;
  31.   display: -webkit-flex;
  32.   display: -ms-flexbox;
  33.   display: flex;
  34.   width: 100%;
  35. }
  36.  
  37. .flex>.sub {
  38.   -webkit-box-flex: 1;
  39.   -webkit-flex: 1;
  40.   -ms-flex: 1;
  41.   flex: 1;
  42.   overflow: hidden;
  43. }
  44.  
  45. .info-title {
  46.   background: #fff;
  47.   padding: 10px 15px;
  48.   font-size: 15px;
  49. }
  50.  
  51. .info-price {
  52.   border-bottom: 1px solid #F6F6F6;
  53.   background: #fff;
  54.   padding: 0px 15px;
  55. }
  56.  
  57. .price {
  58.   float: left;
  59.   height: 50px;
  60.   line-height: 50px;
  61.   color: #FF6666;
  62.   font-size: 25px;
  63. }
  64.  
  65. .fenxiang {
  66.   text-align: center;
  67.   font-size: 12px;
  68.   color: #999;
  69.   width: 50px;
  70.   line-height: 20px;
  71.   overflow: hidden;
  72.   float: right;
  73. }
  74.  
  75. .fenxiang image {
  76.   width: 20px;
  77.   height: 20px;
  78. }
  79.  
  80. .price em {
  81.   font-size: 12px;
  82.   margin-left: 20px;
  83. }
  84.  
  85. .flex {
  86.   position: relative;
  87.   width: auto;
  88.   margin: 0 -15px;
  89.   padding: 3px 15px 0;
  90. }
  91.  
  92. .store-info {
  93.   background: #fff;
  94. }
  95.  
  96. .store-info .store,
  97. .store-info .rz-item {
  98.   padding: 10px 15px;
  99. }
  100.  
  101. .store-info .rz-item view {
  102.   margin-right: 10px;
  103. }
  104.  
  105. .list_item {
  106.   position: relative;
  107.   padding: 15px 10px;
  108.   background: #fff;
  109.   border-bottom: 1px solid #f5f5f5;
  110. }
  111.  
  112. .details_box {
  113.   margin-top: 10px;
  114.   padding: 0 15px;
  115.   font-size: 13px;
  116.   background: #fff;
  117. }
  118.  
  119. .pj_box {
  120.   margin-top: 10px;
  121.   padding: 0 15px;
  122.   font-size: 13px;
  123.   background: #fff;
  124. }
  125.  
  126. .ico_img_jt {
  127.   vertical-align: middle;
  128.   width: 16px;
  129.   height: 16px;
  130. }
  131.  
  132. .pj_u_info .header_img {
  133.   float: left;
  134. }
  135.  
  136. .pj_u_info .header_img image {
  137.   width: 20px;
  138.   height: 20px;
  139.   border-radius: 50%;
  140.   overflow: hidden;
  141. }
  142.  
  143. .pj_u_info .name {
  144.   float: left;
  145.   margin-left: 10px;
  146.   font-size: 15px;
  147.   color: #333;
  148. }
  149.  
  150. .pj_u_info .time {
  151.   float: right;
  152.   font-size: 12px;
  153.   color: #999;
  154. }
  155.  
  156. .pj_cont {
  157.   font-size: 13px;
  158. }
  159.  
  160. .pj_img {
  161.   margin: 10px 10px 0px 10px;
  162.   width: 120px;
  163.   height: 100px;
  164. }
  165.  
  166.  
  167. .foot-nav {
  168.   height: 46px;
  169. }
  170.  
  171. .foot-nav .con {
  172.   position: fixed;
  173.   height: 46px;
  174.   left: 0;
  175.   bottom: 0;
  176.   right: 0;
  177.   background: #fff;
  178.   z-index: 999;
  179. }
  180.  
  181. .fast-links {
  182.   width: 160px;
  183.   line-height: 18px;
  184.   text-align: center;
  185. }
  186.  
  187. .fast-links .iconfont {
  188.   padding: 5px 0;
  189. }
  190.  
  191. .fast-links .iconfont::before {
  192.   display: block;
  193.   margin-top: 5px;
  194.   font-size: 18px;
  195. }
  196.  
  197. .notempty {
  198.   position: relative;
  199. }
  200.  
  201. .notempty::after {
  202.   content: "";
  203.   display: block;
  204.   width: 9px;
  205.   height: 9px;
  206.   border: 1px solid #fff;
  207.   border-radius: 50%;
  208.   background: #e64340;
  209.   position: absolute;
  210.   top: 5px;
  211.   right: 50%;
  212.   margin-right: -16px;
  213. }
  214.  
  215. .add-cart .add-cart-btn {
  216.   background: linear-gradient(to right, #FF7A34, #EE32FF);
  217.   color: #fff;
  218.   border-radius: 50px;
  219.   padding: 0px;
  220.   width: 150px;
  221.   height: 35px;
  222.   line-height: 35px;
  223.   margin-top: 5px;
  224.   margin-right: 15px;
  225. }
  226.  
  227. .kefu button {
  228.   border: none;
  229.   background: none;
  230.   display: block;
  231.   padding: 0px;
  232.   margin: 0px;
  233.   line-height: 1.5em;
  234.   font-size: inherit;
  235. }
  236.  
  237. .kefu button::after {
  238.   border: none;
  239. }
  240.  
  241. .kefu .button-hover {
  242.   color: #333;
  243.   background: none;
  244. }
  245.  
  246. .kefu button .iconfont {
  247.   padding: 0px;
  248. }
  249.  
  250. .icon-shoucang2 {
  251.   color: red;
  252. }

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/247364
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号