微信小程序拍賣商品詳情頁設(shè)計與交互實現(xiàn)代碼(含倒計時、實時更新出價)
更新時間：2022年08月05日 09:05:59 作者：小李不背鍋
這篇文章主要介紹了微信小程序拍賣商品詳情頁設(shè)計與交互實現(xiàn)代碼(含倒計時、實時更新出價),本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
完整功能和頁面
1、goods.wxml代碼
<!--商品詳情頁-->
<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>
<!--商品標(biāo)題價格欄-->
<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 == '已經(jīng)截止'}}" 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>
<!--商品發(fā)布者和競拍記錄-->
<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代碼
.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_id
var myTime //計數(shù)器
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
})
//根據(jù)發(fā)布者id去用戶表中查詢商品發(fā)布者信息
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: '出價應(yīng)當(dāng)高于當(dāng)前價！',
icon: 'none'
})
}
},
//競拍者出價
putPrice() {
//獲取出價
let price = this.data.changePrice
//獲取出價用戶
let userInfo = wx.getStorageSync('userInfo')
//獲取出價時間
let nowTime = new Date().getTime()
//轉(zhuǎn)化為時間格式
var util = require("../../util/time_transform.js")
let timeFormat = util.js_date_time(nowTime)
//彈窗確認(rèn)
wx.showModal({
title: '確認(rèn)出價',
content: '價高者得，競拍結(jié)束價高者可在競拍記錄中查看賣家聯(lián)系信息，感謝您的參與！',
success: (res) => {
if (res.confirm) {
wx.showLoading({
title: '正在出價...',
})
//保存競拍記錄到數(shù)據(jù)庫
wx.cloud.database().collection('goodsAuctionRecord').add({
data: {
goodsID: goods_id,
userInfo: userInfo,
putPrice: price,
auctionTime: nowTime,
auctionTimeFormat: timeFormat
},
success: res => {}
}),
//更新當(dāng)前價
wx.cloud.database().collection('goods').doc(goods_id).update({
data: {
current_price: price
}
})
let _this = this
setTimeout(function () {
wx.hideLoading({
success: (res) => {
//刷新頁面數(shù)據(jù)
_this.onShow()
}
})
}, 1000)
} else {
console.log('取消')
}
}
})
},
//獲取商品用戶競拍記錄
getAuctionRecord() {
wx.cloud.database().collection('goodsAuctionRecord').where({
goodsID: goods_id
}).get({
success: (res) => {
this.setData({
auctionRecord: res.data
})
}
})
},
//獲取競拍結(jié)束時間，并計算倒計時
countdown(goodsId) {
wx.cloud.database().collection('goods').doc(goodsId).get({
success: res => {
//取出競拍結(jié)束時間，精確到秒
let auctionEndtime = res.data.end_time
console.log(res)
//獲取當(dāng)前系統(tǒng)時間,只精確到秒
var nowTime = new Date().getTime() / 1000
//剩余時間總的秒數(shù)
var totalSecond = Math.floor(auctionEndtime - nowTime)
console.log('剩余秒數(shù)', totalSecond)
//計算倒計時
this.doCountdown(totalSecond)
}
})
},
//計算商品倒計時
doCountdown(totalSecond) {
let _this = this
//每隔一秒執(zhí)行一次代碼
myTime = setInterval(function () {
//如果競拍已經(jīng)結(jié)束
if (totalSecond < 0) {
_this.setData({
clock: '已經(jīng)截止'
})
clearInterval(myTime)
return
} else {
//執(zhí)行計算
var time = _this.formatTime(totalSecond)
_this.setData({
clock: '剩余' + time
})
}
totalSecond--;
}, 1000)
},
//倒計時時間格式化
formatTime(totalSecond) {
//剩余天數(shù)
var day = Math.floor(totalSecond / 3600 / 24)
//n天后剩余小時數(shù)
var hour = Math.floor(totalSecond / 3600 % 24)
//n天n小時后剩余分鐘數(shù)
var min = Math.floor(totalSecond / 60 % 60)
//n天n小時n分鐘后剩余秒數(shù)
var sec = Math.floor(totalSecond % 60)
return day + "天" + hour + "小時" + min + "分" + sec + "秒"
}
})
4、時間轉(zhuǎn)化js代碼
在util 下面新建一個time_transform.js文件
//時間戳轉(zhuǎn)換成日期時間，傳入時間精確到毫秒
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
}注：網(wǎng)絡(luò)文章抄襲嚴(yán)重，請尊重勞動成果，特別是CSDN的用戶，轉(zhuǎn)載請注明本人出處。
到此這篇關(guān)于微信小程序拍賣商品詳情頁設(shè)計與交互實現(xiàn)代碼(含倒計時、實時更新出價)的文章就介紹到這了,更多相關(guān)小程序拍賣商品詳情頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要是對JS獲取幾種URL地址的方法進(jìn)行了總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
這篇文章主要介紹了詳解Webpack抽離第三方類庫以及common解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
uniapp中table表格設(shè)置寬度無效的原因以及解決方法
項目中遇到table表格單元格不整齊、錯位等情況,下面這篇文章主要給大家介紹了關(guān)于uniapp中table表格設(shè)置寬度無效的原因以及解決方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
JavaScript將當(dāng)前時間轉(zhuǎn)換成UTC標(biāo)準(zhǔn)時間的方法
這篇文章主要介紹了JavaScript將當(dāng)前時間轉(zhuǎn)換成UTC標(biāo)準(zhǔn)時間的方法,涉及javascript中Date及toUTCString方法的使用技巧,需要的朋友可以參考下2015-04-04
這篇文章主要給大家介紹了關(guān)于微信小程序里長按識別二維碼的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
Bootstrap3 input輸入框插入glyphicon圖標(biāo)的方法
這篇文章主要介紹了Bootstrap3 input輸入框插入glyphicon圖標(biāo)的方法的相關(guān)資料,需要的朋友可以參考下2016-05-05
JS/jQuery實現(xiàn)獲取時間的方法及常用類完整示例
這篇文章主要介紹了JS/jQuery實現(xiàn)獲取時間的方法及常用類,結(jié)合完整實例形式分析了javascript針對日期時間的獲取、轉(zhuǎn)換、計算與檢測相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
這篇文章主要介紹了javascript面向?qū)ο罂焖偃腴T實例,以一個簡單實例分析了javascript面向?qū)ο蟮闹袑ο蟮亩x與使用技巧,需要的朋友可以參考下2015-01-01
有時我們可能需要在多個環(huán)境下對同一個接口進(jìn)行測試。比如我們請求的域名,開發(fā)、測試、生產(chǎn)環(huán)境,請求參數(shù)。文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了js實現(xiàn)DOM走馬燈特效的方法,以實例形式較為詳細(xì)的分析了走馬燈效果的實現(xiàn)原理與具體步驟,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01