[wechat applet] design and interactive implementation of auction product details page (including countdown and real-time update of bids)

Complete functions and pages

DSC0000.png(182.66 KB, amount of downloads : 0)

Download the attachment

yesterday  10:00 Upload

1、goods.wxml Code

  
 
 

   
  
  
<!-- Product details page -->
   
  
  
<view class="container">
   
  
  
 <scroll-view class="main" scroll-y="true">
   
  
  
 <!-- Top rotation chart -->
   
  
  
 <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>
   
  
  
 <!-- Commodity Title Price column -->
   
  
  
 <view class="goodsPrice">
   
  
  
 <view>
   
  
  
 <image src="/image/goodsPrice.png"></image>
   
  
  
 <text>{{goodsInfo.current_price}} </text>
   
  
  
 <!-- count down -->
   
  
  
 <text wx:if="{{clock == ' The deadline has expired '}}">{{clock}}</text>
   
  
  
 <text wx:else="">{{clock}}</text>
   
  
  
 </view>
   
  
  
 <view>
   
  
  
 <text> Opening bid  {{goodsInfo.start_price}}</text>
   
  
  
 <image src="{{publisher.avatarUrl}}"></image>
   
  
  
 <text decode="true">&nbsp; {{publisher.nickName}} </text>
   
  
  
 </view>
   
  
  
 <view>
   
  
  
 <text> {{goodsInfo.name}} </text>
   
  
  
 </view>
   
  
  
 </view>
   
  
  
 <!-- Product publishers and auction records -->
   
  
  
 <scroll-view class="goodsAuctionRecord">
   
  
  
 <view>
   
  
  
 <text> Record of bids </text>
   
  
  
 </view>
   
  
  
 <!-- Bidding users -->
   
  
  
 <block wx:for="{{auctionRecord}}" wx:key="index">
   
  
  
 <view>
   
  
  
 <text>{{item.auctionTimeFormat}}</text>
   
  
  
 <image src="{{item.userInfo.avatarUrl}}"></image>
   
  
  
 <text decode="true"> {{item.userInfo.nickName}}&nbsp; Bid </text>
   
  
  
 <text>{{item.putPrice}}  element </text>
   
  
  
 </view>
   
  
  
 </block>
   
  
  
 </scroll-view>
   
  
  
 <!-- Product details -->
   
  
  
 <view class="describe">
   
  
  
 <rich-text>{{goodsInfo.describe}}</rich-text>
   
  
  
 </view>
   
  
  
 </scroll-view>
   
  
  
 <!-- Bottom -->
   
  
  
 <view class="bottomContainer">
   
  
  
 <view>
   
  
  
 <image src="/image/jianhao.png" class="changePriceIcon" bindtap="downPrice"></image>
   
  
  
 <text class="addPrice">{{changePrice}} element </text>
   
  
  
 <image src="/image/add.png" class="changePriceIcon" bindtap="addPrice"></image>
   
  
  
 <text bindtap="putPrice"> Make an offer </text>
   
  
  
 </view>
   
  
  
 </view>
   
  
  
</view>
  
 
 

2、goods.wxss Code

  
 
 

   
  
  
.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 Code

  
 
 

   
  
  
var goods_id
   
  
  
var myTime // Counter 
   
  
  
Page({
   
  
  
 data: {
   
  
  
 goodsInfo: null,
   
  
  
 publisher: null,
   
  
  
 auctionRecord: null,
   
  
  
 clock: '',
   
  
  
 changePrice: null // offer 
   
  
  
 },
   
  
  
 onLoad(options) {
   
  
  
 let goodsId = options.goodsid
   
  
  
 // take id Save it for onshow use 
   
  
  
 goods_id = goodsId
   
  
  
 // Access to product information 
   
  
  
 this.getGoodsInfo(goodsId)
   
  
  
 // count down 
   
  
  
 this.countdown(goodsId)
   
  
  
 },
   
  
  
 onShow() {
   
  
  
 this.getGoodsInfo(goods_id)
   
  
  
 this.getAuctionRecord()
   
  
  
 },
   
  
  
 onUnload() {
   
  
  
 // Clear the timer 
   
  
  
 clearInterval(myTime)
   
  
  
 },
   
  
  
 onHide() {
   
  
  
 // Clear the timer 
   
  
  
 clearInterval(myTime)
   
  
  
 },
   
  
  
 // Check all products 
   
  
  
 getGoodsInfo(goodsId) {
   
  
  
 wx.cloud.database().collection('goods').doc(goodsId).get({
   
  
  
 success: (res) => {
   
  
  
 this.setData({
   
  
  
 goodsInfo: res.data,
   
  
  
 changePrice: res.data.current_price + 1
   
  
  
 })
   
  
  
 // According to the publisher id Go to the user table to query the product publisher information 
   
  
  
 wx.cloud.database().collection('userInfo').doc(res.data.publisher_id).get({
   
  
  
 success: (res) => {
   
  
  
 this.setData({
   
  
  
 publisher: res.data
   
  
  
 })
   
  
  
 }
   
  
  
 })
   
  
  
 }
   
  
  
 })
   
  
  
 },
   
  
  
 // Bottom plus or minus price 
   
  
  
 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: ' The bid should be higher than the current price ！',
   
  
  
 icon: 'none'
   
  
  
 })
   
  
  
 }
   
  
  
 },
   
  
  
 // Bidders bid 
   
  
  
 putPrice() {
   
  
  
 // Get a bid 
   
  
  
 let price = this.data.changePrice
   
  
  
 // Get bidding users 
   
  
  
 let userInfo = wx.getStorageSync('userInfo')
   
  
  
 // Get bid time 
   
  
  
 let nowTime = new Date().getTime()
   
  
  
 // Convert to time format 
   
  
  
 var util = require("../../util/time_transform.js")
   
  
  
 let timeFormat = util.js_date_time(nowTime)
   
  
  
 // Pop up to confirm 
   
  
  
 wx.showModal({
   
  
  
 title: ' Confirm the bid ',
   
  
  
 content: ' The higher the price, the better , At the end of the auction, the high bidder can check the seller's contact information in the auction record , Thank you for your participation ！',
   
  
  
 success: (res) => {
   
  
  
 if (res.confirm) {
   
  
  
 wx.showLoading({
   
  
  
 title: ' Bidding ...',
   
  
  
 })
   
  
  
 // Save auction records to the database 
   
  
  
 wx.cloud.database().collection('goodsAuctionRecord').add({
   
  
  
 data: {
   
  
  
 goodsID: goods_id,
   
  
  
 userInfo: userInfo,
   
  
  
 putPrice: price,
   
  
  
 auctionTime: nowTime,
   
  
  
 auctionTimeFormat: timeFormat
   
  
  
 },
   
  
  
 success: res => {}
   
  
  
 }),
   
  
  
 // Update current price 
   
  
  
 wx.cloud.database().collection('goods').doc(goods_id).update({
   
  
  
 data: {
   
  
  
 current_price: price
   
  
  
 }
   
  
  
 })
   
  
  
 let _this = this
   
  
  
 setTimeout(function () {
   
  
  
 wx.hideLoading({
   
  
  
 success: (res) => {
   
  
  
 // Refresh page data 
   
  
  
 _this.onShow()
   
  
  
 }
   
  
  
 })
   
  
  
 }, 1000)
   
  
  
 } else {
   
  
  
 console.log(' Cancel ')
   
  
  
 }
   
  
  
 }
   
  
  
 })
   
  
  
 },
   
  
  
 // Get the auction records of commodity users 
   
  
  
 getAuctionRecord() {
   
  
  
 wx.cloud.database().collection('goodsAuctionRecord').where({
   
  
  
 goodsID: goods_id
   
  
  
 }).get({
   
  
  
 success: (res) => {
   
  
  
 this.setData({
   
  
  
 auctionRecord: res.data
   
  
  
 })
   
  
  
 }
   
  
  
 })
   
  
  
 },
   
  
  
 // Get the auction end time , And count down 
   
  
  
 countdown(goodsId) {
   
  
  
 wx.cloud.database().collection('goods').doc(goodsId).get({
   
  
  
 success: res => {
   
  
  
 // Take out the auction end time , Accurate to seconds 
   
  
  
 let auctionEndtime = res.data.end_time
   
  
  
 console.log(res)
   
  
  
 // Get current system time , Only to the second 
   
  
  
 var nowTime = new Date().getTime() / 1000
   
  
  
 // Total seconds remaining 
   
  
  
 var totalSecond = Math.floor(auctionEndtime - nowTime)
   
  
  
 console.log(' Seconds left ', totalSecond)
   
  
  
 // Count down 
   
  
  
 this.doCountdown(totalSecond)
   
  
  
 }
   
  
  
 })
   
  
  
 },
   
  
  
 // Count down the goods 
   
  
  
 doCountdown(totalSecond) {
   
  
  
 let _this = this
   
  
  
 // Execute the code every second 
   
  
  
 myTime = setInterval(function () {
   
  
  
 // If the auction is over 
   
  
  
 if (totalSecond < 0) {
   
  
  
 _this.setData({
   
  
  
 clock: ' The deadline has expired '
   
  
  
 })
   
  
  
 clearInterval(myTime)
   
  
  
 return
   
  
  
 } else {
   
  
  
 // Perform calculations 
   
  
  
 var time = _this.formatTime(totalSecond)
   
  
  
 _this.setData({
   
  
  
 clock: ' The remaining ' + time
   
  
  
 })
   
  
  
 }
   
  
  
 totalSecond--;
   
  
  
 }, 1000)
   
  
  
 },
   
  
  
 // Countdown time format 
   
  
  
 formatTime(totalSecond) {
   
  
  
 // Days left 
   
  
  
 var day = Math.floor(totalSecond / 3600 / 24)
   
  
  
 //n Hours remaining after days 
   
  
  
 var hour = Math.floor(totalSecond / 3600 % 24)
   
  
  
 //n God n Minutes remaining after hours 
   
  
  
 var min = Math.floor(totalSecond / 60 % 60)
   
  
  
 //n God n Hours n Seconds remaining after minutes 
   
  
  
 var sec = Math.floor(totalSecond % 60)
   
  
  
 return day + " God " + hour + " Hours " + min + " branch " + sec + " second "
   
  
  
 }
   
  
  
})
  
 
 

4、 Time conversion js Code

DSC0001.png(84.16 KB, amount of downloads : 0)

Download the attachment

yesterday  10:00 Upload

stay util So let's make a new one time_transform.js file

  
 
 

   
  
  
// Time stamp is converted to date time , The incoming time is accurate to milliseconds 
   
  
  
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;// Mm / DD / yyyy HHM / S 
   
  
  
 // return y + '-' + m + '-' + d + ' ' + h + ':' + minute;
   
  
  
 // return y + '-' + m + '-' + d;
   
  
  
}
   
  
  
module.exports = {
   
  
  
 js_date_time: js_date_time
   
  
  
}
  
 
 

notes ： Plagiarism of online articles is serious , Please respect the achievements of labor , especially CSDN Users of , Please indicate the source of reprint .