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

1、goods.wxml代码
2、goods.wxss代码
3、goods.js代码
4、时间转化js代码

完整功能和页面

文章图片

文章图片

1、goods.wxml代码

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

2、goods.wxss代码

.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代码

var goods_idvar 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.changePriceprice++this.setData({changePrice: price})},downPrice() {var price = this.data.changePriceif (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 = thissetTimeout(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_timeconsole.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文件

//时间戳转换成日期时间，传入时间精确到毫秒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}

注：网络文章抄袭严重，请尊重劳动成果，特别是CSDN的用户，转载请注明本人出处。
【微信小程序拍卖商品详情页设计与交互实现代码(含倒计时、实时更新出价)】到此这篇关于微信小程序拍卖商品详情页设计与交互实现代码(含倒计时、实时更新出价)的文章就介绍到这了,更多相关小程序拍卖商品详情页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！