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

小程序商品详情页面设计与功能实现（包括倒计时）

作者：2023面试高手 | 2024-03-16 05:24:38

赞

踩

小程序商品详情页面

1、完整功能和页面

 放在前面：除了wxss样式没有注释，其余代码都注释很详细啦，根据命名也能正常阅读~

 2、goods.wxml代码

  1. <!--商品详情页-->
  2. <view class="container">
  3.   <scroll-view class="main" scroll-y="true">
  4.     <!--顶部轮播图-->
  5.     <swiper autoplay="true" indicator-dots="true">
  6.       <block wx:for="{{goodsInfo.images}}" wx:key="index">
  7.         <swiper-item>
  8.           <image src="{{item}}" mode="heightFix"></image>
  9.         </swiper-item>
  10.       </block>
  11.     </swiper>
  12.     <!--商品标题价格栏-->
  13.     <view class="goodsPrice">
  14.       <view style="margin-left: 30rpx;display: flex;align-items: center;">
  15.         <image src="/image/goodsPrice.png" style="width: 30rpx;height: 30rpx;"></image>
  16.         <text style="color: rgb(179, 6, 41);font-size: 50rpx;">{{goodsInfo.current_price}} </text>
  17.         <!--倒计时-->
  18.         <text wx:if="{{clock == '已经截止'}}" style="margin-left: 60%;color: crimson;">{{clock}}</text>
  19.         <text wx:else="" style="margin-left: 12%;font-size: 45rpx;color: crimson;">{{clock}}</text>
  20.       </view>
  21.  
  22.       <view style="display: flex;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; align-items: center;">
  23.         <text style="font-size: 30rpx;margin-left: 30rpx;">起拍价 {{goodsInfo.start_price}}</text>
  24.         <image src="{{publisher.avatarUrl}}" style="width: 50rpx;height: 50rpx;border-radius: 50%;margin-left: 35%;"></image>
  25.         <text style="font-size: 30rpx;margin-left: 10epx;" decode="true">  {{publisher.nickName}} </text>
  26.       </view>
  27.  
  28.       <view>
  29.         <text style="margin-left: 30rpx;"> {{goodsInfo.name}} </text>
  30.       </view>
  31.     </view>
  32.     <!--商品发布者和竞拍记录-->
  33.     <scroll-view class="goodsAuctionRecord">
  34.       <view style="text-align: center;">
  35.         <text style="font-size: 40rpx;color: chocolate;">出价记录</text>
  36.       </view>
  37.       <!--出价的用户-->
  38.       <block wx:for="{{auctionRecord}}" wx:key="index">
  39.         <view>
  40.           <text style="font-size: 24rpx;">{{item.auctionTimeFormat}}</text>
  41.           <image src="{{item.userInfo.avatarUrl}}" style="width: 40rpx;height: 40rpx;border-radius: 50%;margin-left: 5%;"></image>
  42.           <text decode="true"> {{item.userInfo.nickName}} 出价了</text>
  43.           <text style="color: crimson; font-size: 40rpx;">{{item.putPrice}} 元</text>
  44.         </view>
  45.       </block>
  46.  
  47.     </scroll-view>
  48.     <!--商品详情描述-->
  49.     <view class="describe">
  50.       <rich-text>{{goodsInfo.describe}}</rich-text>
  51.     </view>
  52.   </scroll-view>
  53.   <!--底部-->
  54.   <view class="bottomContainer">
  55.     <view>
  56.       <image src="/image/jianhao.png" class="changePriceIcon" bindtap="downPrice"></image>
  57.       <text class="addPrice">{{changePrice}}元</text>
  58.       <image src="/image/add.png" class="changePriceIcon" style="width: 67rpx;height: 67rpx;margin-left: 36%;" bindtap="addPrice"></image>
  59.       <text style="height: 100rpx;float: right;padding: 20rpx 40rpx;color: white;" bindtap="putPrice">出个价</text>
  60.     </view>
  61.   </view>
  62. </view>

　　

3、goods.wxss代码

  1. .container {
  2.   bottom: 0;
  3.   top: 0;
  4.   left: 0;
  5.   right: 0;
  6.   position: fixed;
  7.   width: 100%;
  8.   height: 100%;
  9.   background-color: rgba(232, 234, 235, 0.89);
  10. }
  11.  
  12. .main {
  13.   width: 100%;
  14.   height: 93%;
  15.   top: 0;
  16.   position: absolute;
  17.   flex: 1;
  18.   background-color: rgb(221, 221, 204);
  19. }
  20.  
  21. swiper {
  22.   height: 430rpx;
  23.   background-color: white;
  24. }
  25.  
  26. swiper-item {
  27.   text-align: center;
  28.   width: 100%;
  29.   height: 100%;
  30. }
  31.  
  32. swiper-item image {
  33.   border-radius: 15rpx;
  34.   height: 100%;
  35. }
  36.  
  37. .goodsPrice {
  38.   margin-top: 15rpx;
  39.   width: 96%;
  40.   margin-left: 2%;
  41.   border-radius: 25rpx;
  42.   border: aliceblue solid 1px;
  43.   background-color: aliceblue;
  44.   box-shadow: 4px 4px 15px rgb(180, 223, 202);
  45. }
  46.  
  47. .goodsAuctionRecord {
  48.   margin-top: 15rpx;
  49.   width: 96%;
  50.   height: auto;
  51.   margin-left: 2%;
  52.   border-radius: 25rpx;
  53.   border: rgb(235, 238, 241) solid 1px;
  54.   background-color: aliceblue;
  55.   box-shadow: 4px 4px 15px rgb(180, 223, 202);
  56. }
  57.  
  58. .describe {
  59.   margin-top: 15rpx;
  60.   width: 96%;
  61.   margin-left: 2%;
  62.   border-radius: 25rpx;
  63.   border: rgb(235, 238, 241) solid 1px;
  64.   background-color: aliceblue;
  65.   box-shadow: 4px 4px 15px rgb(180, 223, 202);
  66. }
  67.  
  68. .bottomContainer {
  69.   position: absolute;
  70.   top: 93%;
  71.   width: 100%;
  72.   height: 5%;
  73.   white-space: nowrap;
  74.   word-break:keep-all;
  75. }
  76.  
  77. .addPrice {
  78.   position: fixed;
  79.   background-color: rgb(8, 8, 8);
  80.   color: white;
  81.   border-radius: 30px;
  82.   margin-left: 4%;
  83.   margin-top: 17rpx;
  84.   padding: 10rpx 10% 10rpx 10%;
  85. }
  86. .changePriceIcon{
  87.   width: 60rpx;
  88.   height: 60rpx;
  89.   margin-left: 4%;
  90.   padding-top: 12rpx;
  91. }

　　

4、goods.js代码

  1. var goods_id
  2. var myTime //计数器
  3. Page({
  4.  
  5.   data: {
  6.     goodsInfo: null,
  7.     publisher: null,
  8.     auctionRecord: null,
  9.     clock: '',
  10.     changePrice: null //出价
  11.   },
  12.  
  13.   onLoad(options) {
  14.     let goodsId = options.goodsid
  15.     //将id存起来给onshow用
  16.     goods_id = goodsId
  17.     //获取商品信息
  18.     this.getGoodsInfo(goodsId)
  19.     //倒计时
  20.     this.countdown(goodsId)
  21.   },
  22.   onShow() {
  23.     this.getGoodsInfo(goods_id)
  24.     this.getAuctionRecord()
  25.   },
  26.   onUnload() {
  27.     //清楚计时器
  28.     clearInterval(myTime)
  29.   },
  30.   onHide() {
  31.     //清楚计时器
  32.     clearInterval(myTime)
  33.   },
  34.  
  35.   //查询所有商品
  36.   getGoodsInfo(goodsId) {
  37.     wx.cloud.database().collection('goods').doc(goodsId).get({
  38.       success: (res) => {
  39.         this.setData({
  40.           goodsInfo: res.data,
  41.           changePrice: res.data.current_price + 1
  42.         })
  43.         //根据发布者id去用户表中查询商品发布者信息
  44.         wx.cloud.database().collection('userInfo').doc(res.data.publisher_id).get({
  45.           success: (res) => {
  46.             this.setData({
  47.               publisher: res.data
  48.             })
  49.           }
  50.         })
  51.       }
  52.     })
  53.   },
  54.   //底部加减价格
  55.   addPrice() {
  56.     var price = this.data.changePrice
  57.     price++
  58.     this.setData({
  59.       changePrice: price
  60.     })
  61.   },
  62.   downPrice() {
  63.     var price = this.data.changePrice
  64.     if (price > this.data.goodsInfo.current_price + 1) {
  65.       price--
  66.       this.setData({
  67.         changePrice: price
  68.       })
  69.     } else {
  70.       wx.showToast({
  71.         title: '出价应当高于当前价！',
  72.         icon: 'none'
  73.       })
  74.     }
  75.   },
  76.  
  77.   //竞拍者出价
  78.   putPrice() {
  79.     //获取出价
  80.     let price = this.data.changePrice
  81.     //获取出价用户
  82.     let userInfo = wx.getStorageSync('userInfo')
  83.     //获取出价时间
  84.     let nowTime = new Date().getTime()
  85.     //转化为时间格式
  86.     var util = require("../../util/time_transform.js")
  87.     let timeFormat = util.js_date_time(nowTime)
  88.     //弹窗确认
  89.     wx.showModal({
  90.       title: '确认出价',
  91.       content: '价高者得，竞拍结束价高者可在竞拍记录中查看卖家联系信息，感谢您的参与！',
  92.       success: (res) => {
  93.         if (res.confirm) {
  94.           wx.showLoading({
  95.             title: '正在出价...',
  96.           })
  97.           //保存竞拍记录到数据库
  98.           wx.cloud.database().collection('goodsAuctionRecord').add({
  99.               data: {
  100.                 goodsID: goods_id,
  101.                 userInfo: userInfo,
  102.                 putPrice: price,
  103.                 auctionTime: nowTime,
  104.                 auctionTimeFormat: timeFormat
  105.               },
  106.               success: res => {}
  107.             }),
  108.             //更新当前价
  109.             wx.cloud.database().collection('goods').doc(goods_id).update({
  110.               data: {
  111.                 current_price: price
  112.               }
  113.             })
  114.           let _this = this
  115.           setTimeout(function () {
  116.             wx.hideLoading({
  117.               success: (res) => {
  118.                 //刷新页面数据
  119.                 _this.onShow()
  120.               }
  121.             })
  122.           }, 1000)
  123.         } else {
  124.           console.log('取消')
  125.         }
  126.       }
  127.     })
  128.   },
  129.  
  130.   //获取商品用户竞拍记录
  131.   getAuctionRecord() {
  132.     wx.cloud.database().collection('goodsAuctionRecord').where({
  133.       goodsID: goods_id
  134.     }).get({
  135.       success: (res) => {
  136.         this.setData({
  137.           auctionRecord: res.data
  138.         })
  139.       }
  140.     })
  141.   },
  142.  
  143.   //获取竞拍结束时间，并计算倒计时
  144.   countdown(goodsId) {
  145.     wx.cloud.database().collection('goods').doc(goodsId).get({
  146.       success: res => {
  147.         //取出竞拍结束时间，精确到秒
  148.         let auctionEndtime = res.data.end_time
  149.         console.log(res)
  150.         //获取当前系统时间,只精确到秒
  151.         var nowTime = new Date().getTime() / 1000
  152.         //剩余时间总的秒数
  153.         var totalSecond = Math.floor(auctionEndtime - nowTime)
  154.         console.log('剩余秒数', totalSecond)
  155.         //计算倒计时
  156.         this.doCountdown(totalSecond)
  157.       }
  158.     })
  159.   },
  160.  
  161.   //计算商品倒计时
  162.   doCountdown(totalSecond) {
  163.     let _this = this
  164.     //每隔一秒执行一次代码
  165.     myTime = setInterval(function () {
  166.       //如果竞拍已经结束
  167.       if (totalSecond < 0) {
  168.         _this.setData({
  169.           clock: '已经截止'
  170.         })
  171.         clearInterval(myTime)
  172.         return
  173.       } else {
  174.         //执行计算
  175.         var time = _this.formatTime(totalSecond)
  176.         _this.setData({
  177.           clock: '剩余' + time
  178.         })
  179.       }
  180.       totalSecond--;
  181.     }, 1000)
  182.   },
  183.  
  184.   //倒计时时间格式化
  185.   formatTime(totalSecond) {
  186.     //剩余天数
  187.     var day = Math.floor(totalSecond / 3600 / 24)
  188.     //n天后剩余小时数
  189.     var hour = Math.floor(totalSecond / 3600 % 24)
  190.     //n天n小时后剩余分钟数
  191.     var min = Math.floor(totalSecond / 60 % 60)
  192.     //n天n小时n分钟后剩余秒数
  193.     var sec = Math.floor(totalSecond % 60)
  194.     return day + "天" + hour + "小时" + min + "分" + sec + "秒"
  195.   }
  196. })

5、时间转化js代码

 在util 下面新建一个time_transform.js文件

  1. //时间戳转换成日期时间，传入时间精确到毫秒
  2. function js_date_time(unixtime) {
  3.   var date = new Date(unixtime) 
  4.   var y = date.getFullYear();
  5.   var m = date.getMonth() + 1;
  6.   m = m < 10 ? ('0' + m) : m;
  7.   var d = date.getDate();
  8.   d = d < 10 ? ('0' + d) : d;
  9.   var h = date.getHours();
  10.   h = h < 10 ? ('0' + h) : h;
  11.   var minute = date.getMinutes();
  12.   var second = date.getSeconds();
  13.   minute = minute < 10 ? ('0' + minute) : minute;
  14.   second = second < 10 ? ('0' + second) : second;
  15.   return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;//年月日时分秒
  16.   // return y + '-' + m + '-' + d + ' ' + h + ':' + minute;
  17.   // return y + '-' + m + '-' + d;
  18. }
  19. module.exports = {
  20.   js_date_time: js_date_time
  21. }
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

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

  

闽ICP备14008679号