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

       {{goodsInfo.current_price}} {{clock}}{{clock}} 起拍价 {{goodsInfo.start_price}}  {{publisher.nickName}}   {{goodsInfo.name}}   出价记录  {{item.auctionTimeFormat}} {{item.userInfo.nickName}} 出价了{{item.putPrice}} 元 {{goodsInfo.describe}}  {{changePrice}}元出个价

.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; }

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 + "秒" } }) 　　

//时间戳转换成日期时间，传入时间精确到毫秒 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 < 10 d) d; h h) h; minute second minute) minute; second) second; return y '-' m ' ':'>