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

完整功能和页面

 

 

 1、goods.wxml代码

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

  

2、goods.wxss代码

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

  

3、goods.js代码

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

  

  

4、时间转化js代码

 

 

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//时间戳转换成日期时间,传入时间精确到毫秒
function js_date_time(unixtime) {
  var date = new Date(unixtime)
  var y = date.getFullYear();
  var m = date.getMonth() + 1;
  m = m < 10 ? ('0' + m) : m;
  var d = date.getDate();
  d = d < 10 ? ('0' + d) : d;
  var h = date.getHours();
  h = h < 10 ? ('0' + h) : h;
  var minute = date.getMinutes();
  var second = date.getSeconds();
  minute = minute < 10 ? ('0' + minute) : minute;
  second = second < 10 ? ('0' + second) : second;
  return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;//年月日时分秒
  // return y + '-' + m + '-' + d + ' ' + h + ':' + minute;
  // return y + '-' + m + '-' + d;
}
module.exports = {
  js_date_time: js_date_time
}
posted @   小李不背锅  阅读(546)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示