当前位置：网站首页>【微信小程序】拍卖商品详情页设计与交互实现（包含倒计时、实时更新出价）

【微信小程序】拍卖商品详情页设计与交互实现（包含倒计时、实时更新出价）

2022-07-25 04:35:00 【nginx】

完整功能和页面

1、goods.wxml代码 
  
 
 
    
   
  
  
  1. <!--商品详情页-->
    2. 
   
  
  
  2. <view class="container">
    3. 
   
  
  
  3.  <scroll-view class="main" scroll-y="true">
    4. 
   
  
  
  4.  <!--顶部轮播图-->
    5. 
   
  
  
  5.  <swiper autoplay="true" indicator-dots="true">
    6. 
   
  
  
  6.  <block wx:for="{{goodsInfo.images}}" wx:key="index">
    7. 
   
  
  
  7.  <swiper-item>
    8. 
   
  
  
  8.  <image src="{{item}}" mode="heightFix"></image>
    9. 
   
  
  
  9.  </swiper-item>
    10. 
   
  
  
  10.  </block>
    11. 
   
  
  
  11.  </swiper>
    12. 
   
  
  
  12.  <!--商品标题价格栏-->
    13. 
   
  
  
  13.  <view class="goodsPrice">
    14. 
   
  
  
  14.  <view>
    15. 
   
  
  
  15.  <image src="/image/goodsPrice.png"></image>
    16. 
   
  
  
  16.  <text>{{goodsInfo.current_price}} </text>
    17. 
   
  
  
  17.  <!--倒计时-->
    18. 
   
  
  
  18.  <text wx:if="{{clock == '已经截止'}}">{{clock}}</text>
    19. 
   
  
  
  19.  <text wx:else="">{{clock}}</text>
    20. 
   
  
  
  20.  </view>
    21. 
   
  
  
  21.  <view>
    22. 
   
  
  
  22.  <text>起拍价 {{goodsInfo.start_price}}</text>
    23. 
   
  
  
  23.  <image src="{{publisher.avatarUrl}}"></image>
    24. 
   
  
  
  24.  <text decode="true">&nbsp; {{publisher.nickName}} </text>
    25. 
   
  
  
  25.  </view>
    26. 
   
  
  
  26.  <view>
    27. 
   
  
  
  27.  <text> {{goodsInfo.name}} </text>
    28. 
   
  
  
  28.  </view>
    29. 
   
  
  
  29.  </view>
    30. 
   
  
  
  30.  <!--商品发布者和竞拍记录-->
    31. 
   
  
  
  31.  <scroll-view class="goodsAuctionRecord">
    32. 
   
  
  
  32.  <view>
    33. 
   
  
  
  33.  <text>出价记录</text>
    34. 
   
  
  
  34.  </view>
    35. 
   
  
  
  35.  <!--出价的用户-->
    36. 
   
  
  
  36.  <block wx:for="{{auctionRecord}}" wx:key="index">
    37. 
   
  
  
  37.  <view>
    38. 
   
  
  
  38.  <text>{{item.auctionTimeFormat}}</text>
    39. 
   
  
  
  39.  <image src="{{item.userInfo.avatarUrl}}"></image>
    40. 
   
  
  
  40.  <text decode="true"> {{item.userInfo.nickName}}&nbsp;出价了</text>
    41. 
   
  
  
  41.  <text>{{item.putPrice}} 元</text>
    42. 
   
  
  
  42.  </view>
    43. 
   
  
  
  43.  </block>
    44. 
   
  
  
  44.  </scroll-view>
    45. 
   
  
  
  45.  <!--商品详情描述-->
    46. 
   
  
  
  46.  <view class="describe">
    47. 
   
  
  
  47.  <rich-text>{{goodsInfo.describe}}</rich-text>
    48. 
   
  
  
  48.  </view>
    49. 
   
  
  
  49.  </scroll-view>
    50. 
   
  
  
  50.  <!--底部-->
    51. 
   
  
  
  51.  <view class="bottomContainer">
    52. 
   
  
  
  52.  <view>
    53. 
   
  
  
  53.  <image src="/image/jianhao.png" class="changePriceIcon" bindtap="downPrice"></image>
    54. 
   
  
  
  54.  <text class="addPrice">{{changePrice}}元</text>
    55. 
   
  
  
  55.  <image src="/image/add.png" class="changePriceIcon" bindtap="addPrice"></image>
    56. 
   
  
  
  56.  <text bindtap="putPrice">出个价</text>
    57. 
   
  
  
  57.  </view>
    58. 
   
  
  
  58.  </view>
    59. 
   
  
  
  59. </view>
    60.
2、goods.wxss代码 
  
 
 
    
   
  
  
  1. .container {
    2. 
   
  
  
  2.  bottom: 0;
    3. 
   
  
  
  3.  top: 0;
    4. 
   
  
  
  4.  left: 0;
    5. 
   
  
  
  5.  right: 0;
    6. 
   
  
  
  6.  position: fixed;
    7. 
   
  
  
  7.  width: 100%;
    8. 
   
  
  
  8.  height: 100%;
    9. 
   
  
  
  9.  background-color: rgba(232, 234, 235, 0.89);
    10. 
   
  
  
  10. }
    11. 
   
  
  
  11. .main {
    12. 
   
  
  
  12.  width: 100%;
    13. 
   
  
  
  13.  height: 93%;
    14. 
   
  
  
  14.  top: 0;
    15. 
   
  
  
  15.  position: absolute;
    16. 
   
  
  
  16.  flex: 1;
    17. 
   
  
  
  17.  background-color: rgb(221, 221, 204);
    18. 
   
  
  
  18. }
    19. 
   
  
  
  19. swiper {
    20. 
   
  
  
  20.  height: 430rpx;
    21. 
   
  
  
  21.  background-color: white;
    22. 
   
  
  
  22. }
    23. 
   
  
  
  23. swiper-item {
    24. 
   
  
  
  24.  text-align: center;
    25. 
   
  
  
  25.  width: 100%;
    26. 
   
  
  
  26.  height: 100%;
    27. 
   
  
  
  27. }
    28. 
   
  
  
  28. swiper-item image {
    29. 
   
  
  
  29.  border-radius: 15rpx;
    30. 
   
  
  
  30.  height: 100%;
    31. 
   
  
  
  31. }
    32. 
   
  
  
  32. .goodsPrice {
    33. 
   
  
  
  33.  margin-top: 15rpx;
    34. 
   
  
  
  34.  width: 96%;
    35. 
   
  
  
  35.  margin-left: 2%;
    36. 
   
  
  
  36.  border-radius: 25rpx;
    37. 
   
  
  
  37.  border: aliceblue solid 1px;
    38. 
   
  
  
  38.  background-color: aliceblue;
    39. 
   
  
  
  39.  box-shadow: 4px 4px 15px rgb(180, 223, 202);
    40. 
   
  
  
  40. }
    41. 
   
  
  
  41. .goodsAuctionRecord {
    42. 
   
  
  
  42.  margin-top: 15rpx;
    43. 
   
  
  
  43.  width: 96%;
    44. 
   
  
  
  44.  height: auto;
    45. 
   
  
  
  45.  margin-left: 2%;
    46. 
   
  
  
  46.  border-radius: 25rpx;
    47. 
   
  
  
  47.  border: rgb(235, 238, 241) solid 1px;
    48. 
   
  
  
  48.  background-color: aliceblue;
    49. 
   
  
  
  49.  box-shadow: 4px 4px 15px rgb(180, 223, 202);
    50. 
   
  
  
  50. }
    51. 
   
  
  
  51. .describe {
    52. 
   
  
  
  52.  margin-top: 15rpx;
    53. 
   
  
  
  53.  width: 96%;
    54. 
   
  
  
  54.  margin-left: 2%;
    55. 
   
  
  
  55.  border-radius: 25rpx;
    56. 
   
  
  
  56.  border: rgb(235, 238, 241) solid 1px;
    57. 
   
  
  
  57.  background-color: aliceblue;
    58. 
   
  
  
  58.  box-shadow: 4px 4px 15px rgb(180, 223, 202);
    59. 
   
  
  
  59. }
    60. 
   
  
  
  60. .bottomContainer {
    61. 
   
  
  
  61.  position: absolute;
    62. 
   
  
  
  62.  top: 93%;
    63. 
   
  
  
  63.  width: 100%;
    64. 
   
  
  
  64.  height: 5%;
    65. 
   
  
  
  65.  white-space: nowrap;
    66. 
   
  
  
  66.  word-break:keep-all;
    67. 
   
  
  
  67. }
    68. 
   
  
  
  68. .addPrice {
    69. 
   
  
  
  69.  position: fixed;
    70. 
   
  
  
  70.  background-color: rgb(8, 8, 8);
    71. 
   
  
  
  71.  color: white;
    72. 
   
  
  
  72.  border-radius: 30px;
    73. 
   
  
  
  73.  margin-left: 4%;
    74. 
   
  
  
  74.  margin-top: 17rpx;
    75. 
   
  
  
  75.  padding: 10rpx 10% 10rpx 10%;
    76. 
   
  
  
  76. }
    77. 
   
  
  
  77. .changePriceIcon{
    78. 
   
  
  
  78.  width: 60rpx;
    79. 
   
  
  
  79.  height: 60rpx;
    80. 
   
  
  
  80.  margin-left: 4%;
    81. 
   
  
  
  81.  padding-top: 12rpx;
    82. 
   
  
  
  82. }
    83.
3、goods.js代码 
  
 
 
    
   
  
  
  1. var goods_id
    2. 
   
  
  
  2. var myTime //计数器
    3. 
   
  
  
  3. Page({
    4. 
   
  
  
  4.  data: {
    5. 
   
  
  
  5.  goodsInfo: null,
    6. 
   
  
  
  6.  publisher: null,
    7. 
   
  
  
  7.  auctionRecord: null,
    8. 
   
  
  
  8.  clock: '',
    9. 
   
  
  
  9.  changePrice: null //出价
    10. 
   
  
  
  10.  },
    11. 
   
  
  
  11.  onLoad(options) {
    12. 
   
  
  
  12.  let goodsId = options.goodsid
    13. 
   
  
  
  13.  //将id存起来给onshow用
    14. 
   
  
  
  14.  goods_id = goodsId
    15. 
   
  
  
  15.  //获取商品信息
    16. 
   
  
  
  16.  this.getGoodsInfo(goodsId)
    17. 
   
  
  
  17.  //倒计时
    18. 
   
  
  
  18.  this.countdown(goodsId)
    19. 
   
  
  
  19.  },
    20. 
   
  
  
  20.  onShow() {
    21. 
   
  
  
  21.  this.getGoodsInfo(goods_id)
    22. 
   
  
  
  22.  this.getAuctionRecord()
    23. 
   
  
  
  23.  },
    24. 
   
  
  
  24.  onUnload() {
    25. 
   
  
  
  25.  //清楚计时器
    26. 
   
  
  
  26.  clearInterval(myTime)
    27. 
   
  
  
  27.  },
    28. 
   
  
  
  28.  onHide() {
    29. 
   
  
  
  29.  //清楚计时器
    30. 
   
  
  
  30.  clearInterval(myTime)
    31. 
   
  
  
  31.  },
    32. 
   
  
  
  32.  //查询所有商品
    33. 
   
  
  
  33.  getGoodsInfo(goodsId) {
    34. 
   
  
  
  34.  wx.cloud.database().collection('goods').doc(goodsId).get({
    35. 
   
  
  
  35.  success: (res) => {
    36. 
   
  
  
  36.  this.setData({
    37. 
   
  
  
  37.  goodsInfo: res.data,
    38. 
   
  
  
  38.  changePrice: res.data.current_price + 1
    39. 
   
  
  
  39.  })
    40. 
   
  
  
  40.  //根据发布者id去用户表中查询商品发布者信息
    41. 
   
  
  
  41.  wx.cloud.database().collection('userInfo').doc(res.data.publisher_id).get({
    42. 
   
  
  
  42.  success: (res) => {
    43. 
   
  
  
  43.  this.setData({
    44. 
   
  
  
  44.  publisher: res.data
    45. 
   
  
  
  45.  })
    46. 
   
  
  
  46.  }
    47. 
   
  
  
  47.  })
    48. 
   
  
  
  48.  }
    49. 
   
  
  
  49.  })
    50. 
   
  
  
  50.  },
    51. 
   
  
  
  51.  //底部加减价格
    52. 
   
  
  
  52.  addPrice() {
    53. 
   
  
  
  53.  var price = this.data.changePrice
    54. 
   
  
  
  54.  price++
    55. 
   
  
  
  55.  this.setData({
    56. 
   
  
  
  56.  changePrice: price
    57. 
   
  
  
  57.  })
    58. 
   
  
  
  58.  },
    59. 
   
  
  
  59.  downPrice() {
    60. 
   
  
  
  60.  var price = this.data.changePrice
    61. 
   
  
  
  61.  if (price > this.data.goodsInfo.current_price + 1) {
    62. 
   
  
  
  62.  price--
    63. 
   
  
  
  63.  this.setData({
    64. 
   
  
  
  64.  changePrice: price
    65. 
   
  
  
  65.  })
    66. 
   
  
  
  66.  } else {
    67. 
   
  
  
  67.  wx.showToast({
    68. 
   
  
  
  68.  title: '出价应当高于当前价！',
    69. 
   
  
  
  69.  icon: 'none'
    70. 
   
  
  
  70.  })
    71. 
   
  
  
  71.  }
    72. 
   
  
  
  72.  },
    73. 
   
  
  
  73.  //竞拍者出价
    74. 
   
  
  
  74.  putPrice() {
    75. 
   
  
  
  75.  //获取出价
    76. 
   
  
  
  76.  let price = this.data.changePrice
    77. 
   
  
  
  77.  //获取出价用户
    78. 
   
  
  
  78.  let userInfo = wx.getStorageSync('userInfo')
    79. 
   
  
  
  79.  //获取出价时间
    80. 
   
  
  
  80.  let nowTime = new Date().getTime()
    81. 
   
  
  
  81.  //转化为时间格式
    82. 
   
  
  
  82.  var util = require("../../util/time_transform.js")
    83. 
   
  
  
  83.  let timeFormat = util.js_date_time(nowTime)
    84. 
   
  
  
  84.  //弹窗确认
    85. 
   
  
  
  85.  wx.showModal({
    86. 
   
  
  
  86.  title: '确认出价',
    87. 
   
  
  
  87.  content: '价高者得，竞拍结束价高者可在竞拍记录中查看卖家联系信息，感谢您的参与！',
    88. 
   
  
  
  88.  success: (res) => {
    89. 
   
  
  
  89.  if (res.confirm) {
    90. 
   
  
  
  90.  wx.showLoading({
    91. 
   
  
  
  91.  title: '正在出价...',
    92. 
   
  
  
  92.  })
    93. 
   
  
  
  93.  //保存竞拍记录到数据库
    94. 
   
  
  
  94.  wx.cloud.database().collection('goodsAuctionRecord').add({
    95. 
   
  
  
  95.  data: {
    96. 
   
  
  
  96.  goodsID: goods_id,
    97. 
   
  
  
  97.  userInfo: userInfo,
    98. 
   
  
  
  98.  putPrice: price,
    99. 
   
  
  
  99.  auctionTime: nowTime,
    100. 
   
  
  
  100.  auctionTimeFormat: timeFormat
    101. 
   
  
  
  101.  },
    102. 
   
  
  
  102.  success: res => {}
    103. 
   
  
  
  103.  }),
    104. 
   
  
  
  104.  //更新当前价
    105. 
   
  
  
  105.  wx.cloud.database().collection('goods').doc(goods_id).update({
    106. 
   
  
  
  106.  data: {
    107. 
   
  
  
  107.  current_price: price
    108. 
   
  
  
  108.  }
    109. 
   
  
  
  109.  })
    110. 
   
  
  
  110.  let _this = this
    111. 
   
  
  
  111.  setTimeout(function () {
    112. 
   
  
  
  112.  wx.hideLoading({
    113. 
   
  
  
  113.  success: (res) => {
    114. 
   
  
  
  114.  //刷新页面数据
    115. 
   
  
  
  115.  _this.onShow()
    116. 
   
  
  
  116.  }
    117. 
   
  
  
  117.  })
    118. 
   
  
  
  118.  }, 1000)
    119. 
   
  
  
  119.  } else {
    120. 
   
  
  
  120.  console.log('取消')
    121. 
   
  
  
  121.  }
    122. 
   
  
  
  122.  }
    123. 
   
  
  
  123.  })
    124. 
   
  
  
  124.  },
    125. 
   
  
  
  125.  //获取商品用户竞拍记录
    126. 
   
  
  
  126.  getAuctionRecord() {
    127. 
   
  
  
  127.  wx.cloud.database().collection('goodsAuctionRecord').where({
    128. 
   
  
  
  128.  goodsID: goods_id
    129. 
   
  
  
  129.  }).get({
    130. 
   
  
  
  130.  success: (res) => {
    131. 
   
  
  
  131.  this.setData({
    132. 
   
  
  
  132.  auctionRecord: res.data
    133. 
   
  
  
  133.  })
    134. 
   
  
  
  134.  }
    135. 
   
  
  
  135.  })
    136. 
   
  
  
  136.  },
    137. 
   
  
  
  137.  //获取竞拍结束时间，并计算倒计时
    138. 
   
  
  
  138.  countdown(goodsId) {
    139. 
   
  
  
  139.  wx.cloud.database().collection('goods').doc(goodsId).get({
    140. 
   
  
  
  140.  success: res => {
    141. 
   
  
  
  141.  //取出竞拍结束时间，精确到秒
    142. 
   
  
  
  142.  let auctionEndtime = res.data.end_time
    143. 
   
  
  
  143.  console.log(res)
    144. 
   
  
  
  144.  //获取当前系统时间,只精确到秒
    145. 
   
  
  
  145.  var nowTime = new Date().getTime() / 1000
    146. 
   
  
  
  146.  //剩余时间总的秒数
    147. 
   
  
  
  147.  var totalSecond = Math.floor(auctionEndtime - nowTime)
    148. 
   
  
  
  148.  console.log('剩余秒数', totalSecond)
    149. 
   
  
  
  149.  //计算倒计时
    150. 
   
  
  
  150.  this.doCountdown(totalSecond)
    151. 
   
  
  
  151.  }
    152. 
   
  
  
  152.  })
    153. 
   
  
  
  153.  },
    154. 
   
  
  
  154.  //计算商品倒计时
    155. 
   
  
  
  155.  doCountdown(totalSecond) {
    156. 
   
  
  
  156.  let _this = this
    157. 
   
  
  
  157.  //每隔一秒执行一次代码
    158. 
   
  
  
  158.  myTime = setInterval(function () {
    159. 
   
  
  
  159.  //如果竞拍已经结束
    160. 
   
  
  
  160.  if (totalSecond < 0) {
    161. 
   
  
  
  161.  _this.setData({
    162. 
   
  
  
  162.  clock: '已经截止'
    163. 
   
  
  
  163.  })
    164. 
   
  
  
  164.  clearInterval(myTime)
    165. 
   
  
  
  165.  return
    166. 
   
  
  
  166.  } else {
    167. 
   
  
  
  167.  //执行计算
    168. 
   
  
  
  168.  var time = _this.formatTime(totalSecond)
    169. 
   
  
  
  169.  _this.setData({
    170. 
   
  
  
  170.  clock: '剩余' + time
    171. 
   
  
  
  171.  })
    172. 
   
  
  
  172.  }
    173. 
   
  
  
  173.  totalSecond--;
    174. 
   
  
  
  174.  }, 1000)
    175. 
   
  
  
  175.  },
    176. 
   
  
  
  176.  //倒计时时间格式化
    177. 
   
  
  
  177.  formatTime(totalSecond) {
    178. 
   
  
  
  178.  //剩余天数
    179. 
   
  
  
  179.  var day = Math.floor(totalSecond / 3600 / 24)
    180. 
   
  
  
  180.  //n天后剩余小时数
    181. 
   
  
  
  181.  var hour = Math.floor(totalSecond / 3600 % 24)
    182. 
   
  
  
  182.  //n天n小时后剩余分钟数
    183. 
   
  
  
  183.  var min = Math.floor(totalSecond / 60 % 60)
    184. 
   
  
  
  184.  //n天n小时n分钟后剩余秒数
    185. 
   
  
  
  185.  var sec = Math.floor(totalSecond % 60)
    186. 
   
  
  
  186.  return day + "天" + hour + "小时" + min + "分" + sec + "秒"
    187. 
   
  
  
  187.  }
    188. 
   
  
  
  188. })
    189.
4、时间转化js代码

在util 下面新建一个time_transform.js文件 
  
 
 
    
   
  
  
  1. //时间戳转换成日期时间，传入时间精确到毫秒
    2. 
   
  
  
  2. function js_date_time(unixtime) {
    3. 
   
  
  
  3.  var date = new Date(unixtime) 
    4. 
   
  
  
  4.  var y = date.getFullYear();
    5. 
   
  
  
  5.  var m = date.getMonth() + 1;
    6. 
   
  
  
  6.  m = m < 10 ? ('0' + m) : m;
    7. 
   
  
  
  7.  var d = date.getDate();
    8. 
   
  
  
  8.  d = d < 10 ? ('0' + d) : d;
    9. 
   
  
  
  9.  var h = date.getHours();
    10. 
   
  
  
  10.  h = h < 10 ? ('0' + h) : h;
    11. 
   
  
  
  11.  var minute = date.getMinutes();
    12. 
   
  
  
  12.  var second = date.getSeconds();
    13. 
   
  
  
  13.  minute = minute < 10 ? ('0' + minute) : minute;
    14. 
   
  
  
  14.  second = second < 10 ? ('0' + second) : second;
    15. 
   
  
  
  15.  return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;//年月日时分秒
    16. 
   
  
  
  16.  // return y + '-' + m + '-' + d + ' ' + h + ':' + minute;
    17. 
   
  
  
  17.  // return y + '-' + m + '-' + d;
    18. 
   
  
  
  18. }
    19. 
   
  
  
  19. module.exports = {
    20. 
   
  
  
  20.  js_date_time: js_date_time
    21. 
   
  
  
  21. }
    22.
注：网络文章抄袭严重，请尊重劳动成果，特别是CSDN的用户，转载请注明本人出处。


   
   
   
                        

原网站

版权声明
本文为[nginx]所创，转载请带上原文链接，感谢
https://www.openjq.com/thread-35199-1-1.html

边栏推荐

猜你喜欢

随机推荐