【微信小程序】拍卖商品详情页设计与交互实现(包含倒计时、实时更新出价)
完整功能和页面
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 : 430 rpx; background-color : white ; } swiper-item { text-align : center ; width : 100% ; height : 100% ; } swiper-item image { border-radius: 15 rpx; height : 100% ; } .goodsPrice { margin-top : 15 rpx; width : 96% ; margin-left : 2% ; border-radius: 25 rpx; border : aliceblue solid 1px ; background-color : aliceblue; box-shadow: 4px 4px 15px rgb ( 180 , 223 , 202 ); } .goodsAuctionRecord { margin-top : 15 rpx; width : 96% ; height : auto ; margin-left : 2% ; border-radius: 25 rpx; border : rgb ( 235 , 238 , 241 ) solid 1px ; background-color : aliceblue; box-shadow: 4px 4px 15px rgb ( 180 , 223 , 202 ); } .describe { margin-top : 15 rpx; width : 96% ; margin-left : 2% ; border-radius: 25 rpx; 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 : 17 rpx; padding : 10 rpx 10% 10 rpx 10% ; } .changePriceIcon{ width : 60 rpx; height : 60 rpx; margin-left : 4% ; padding-top : 12 rpx; } |
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 } |
本文来自博客园,作者:小李不背锅,转载请注明原文链接:https://www.cnblogs.com/lishilin-glut/p/16513643.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了