微信小程序拍賣商品詳情頁(yè)設(shè)計(jì)與交互實(shí)現(xiàn)代碼怎么寫

這篇文章主要介紹“微信小程序拍賣商品詳情頁(yè)設(shè)計(jì)與交互實(shí)現(xiàn)代碼怎么寫”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“微信小程序拍賣商品詳情頁(yè)設(shè)計(jì)與交互實(shí)現(xiàn)代碼怎么寫”文章能幫助大家解決問題。

完整功能和頁(yè)面

1、goods.wxml代碼

<!--商品詳情頁(yè)-->
<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)題價(jià)格欄-->
    <view class="goodsPrice">
      <view >
        <image src="/image/goodsPrice.png" ></image>
        <text >{{goodsInfo.current_price}} </text>
        <!--倒計(jì)時(shí)-->
        <text wx:if="{{clock == '已經(jīng)截止'}}" >{{clock}}</text>
        <text wx:else="" >{{clock}}</text>
      </view>
 
      <view >
        <text >起拍價(jià) {{goodsInfo.start_price}}</text>
        <image src="{{publisher.avatarUrl}}" ></image>
        <text  decode="true">  {{publisher.nickName}} </text>
      </view>
 
      <view>
        <text > {{goodsInfo.name}} </text>
      </view>
    </view>
    <!--商品發(fā)布者和競(jìng)拍記錄-->
    <scroll-view class="goodsAuctionRecord">
      <view >
        <text >出價(jià)記錄</text>
      </view>
      <!--出價(jià)的用戶-->
      <block wx:for="{{auctionRecord}}" wx:key="index">
        <view>
          <text >{{item.auctionTimeFormat}}</text>
          <image src="{{item.userInfo.avatarUrl}}" ></image>
          <text decode="true"> {{item.userInfo.nickName}} 出價(jià)了</text>
          <text >{{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"  bindtap="addPrice"></image>
      <text  bindtap="putPrice">出個(gè)價(jià)</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 //計(jì)數(shù)器
Page({
  data: {
    goodsInfo: null,
    publisher: null,
    auctionRecord: null,
    clock: '',
    changePrice: null //出價(jià)
  },
  onLoad(options) {
    let goodsId = options.goodsid
    //將id存起來給onshow用
    goods_id = goodsId
    //獲取商品信息
    this.getGoodsInfo(goodsId)
    //倒計(jì)時(shí)
    this.countdown(goodsId)
  },
  onShow() {
    this.getGoodsInfo(goods_id)
    this.getAuctionRecord()
  },
  onUnload() {
    //清楚計(jì)時(shí)器
    clearInterval(myTime)
  },
  onHide() {
    //清楚計(jì)時(shí)器
    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
            })
          }
        })
      }
    })
  },
  //底部加減價(jià)格
  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: '出價(jià)應(yīng)當(dāng)高于當(dāng)前價(jià)！',
        icon: 'none'
      })
    }
  },
  //競(jìng)拍者出價(jià)
  putPrice() {
    //獲取出價(jià)
    let price = this.data.changePrice
    //獲取出價(jià)用戶
    let userInfo = wx.getStorageSync('userInfo')
    //獲取出價(jià)時(shí)間
    let nowTime = new Date().getTime()
    //轉(zhuǎn)化為時(shí)間格式
    var util = require("../../util/time_transform.js")
    let timeFormat = util.js_date_time(nowTime)
    //彈窗確認(rèn)
    wx.showModal({
      title: '確認(rèn)出價(jià)',
      content: '價(jià)高者得，競(jìng)拍結(jié)束價(jià)高者可在競(jìng)拍記錄中查看賣家聯(lián)系信息，感謝您的參與！',
      success: (res) => {
        if (res.confirm) {
          wx.showLoading({
            title: '正在出價(jià)...',
          })
          //保存競(jìng)拍記錄到數(shù)據(jù)庫(kù)
          wx.cloud.database().collection('goodsAuctionRecord').add({
              data: {
                goodsID: goods_id,
                userInfo: userInfo,
                putPrice: price,
                auctionTime: nowTime,
                auctionTimeFormat: timeFormat
              },
              success: res => {}
            }),
            //更新當(dāng)前價(jià)
            wx.cloud.database().collection('goods').doc(goods_id).update({
              data: {
                current_price: price
              }
            })
          let _this = this
          setTimeout(function () {
            wx.hideLoading({
              success: (res) => {
                //刷新頁(yè)面數(shù)據(jù)
                _this.onShow()
              }
            })
          }, 1000)
        } else {
          console.log('取消')
        }
      }
    })
  },
  //獲取商品用戶競(jìng)拍記錄
  getAuctionRecord() {
    wx.cloud.database().collection('goodsAuctionRecord').where({
      goodsID: goods_id
    }).get({
      success: (res) => {
        this.setData({
          auctionRecord: res.data
        })
      }
    })
  },
  //獲取競(jìng)拍結(jié)束時(shí)間，并計(jì)算倒計(jì)時(shí)
  countdown(goodsId) {
    wx.cloud.database().collection('goods').doc(goodsId).get({
      success: res => {
        //取出競(jìng)拍結(jié)束時(shí)間，精確到秒
        let auctionEndtime = res.data.end_time
        console.log(res)
        //獲取當(dāng)前系統(tǒng)時(shí)間,只精確到秒
        var nowTime = new Date().getTime() / 1000
        //剩余時(shí)間總的秒數(shù)
        var totalSecond = Math.floor(auctionEndtime - nowTime)
        console.log('剩余秒數(shù)', totalSecond)
        //計(jì)算倒計(jì)時(shí)
        this.doCountdown(totalSecond)
      }
    })
  },
  //計(jì)算商品倒計(jì)時(shí)
  doCountdown(totalSecond) {
    let _this = this
    //每隔一秒執(zhí)行一次代碼
    myTime = setInterval(function () {
      //如果競(jìng)拍已經(jīng)結(jié)束
      if (totalSecond < 0) {
        _this.setData({
          clock: '已經(jīng)截止'
        })
        clearInterval(myTime)
        return
      } else {
        //執(zhí)行計(jì)算
        var time = _this.formatTime(totalSecond)
        _this.setData({
          clock: '剩余' + time
        })
      }
      totalSecond--;
    }, 1000)
  },
  //倒計(jì)時(shí)時(shí)間格式化
  formatTime(totalSecond) {
    //剩余天數(shù)
    var day = Math.floor(totalSecond / 3600 / 24)
    //n天后剩余小時(shí)數(shù)
    var hour = Math.floor(totalSecond / 3600 % 24)
    //n天n小時(shí)后剩余分鐘數(shù)
    var min = Math.floor(totalSecond / 60 % 60)
    //n天n小時(shí)n分鐘后剩余秒數(shù)
    var sec = Math.floor(totalSecond % 60)
    return day + "天" + hour + "小時(shí)" + min + "分" + sec + "秒"
  }
})
　　

4、時(shí)間轉(zhuǎn)化js代碼

在util 下面新建一個(gè)time_transform.js文件

//時(shí)間戳轉(zhuǎn)換成日期時(shí)間，傳入時(shí)間精確到毫秒
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;//年月日時(shí)分秒
  // return y + '-' + m + '-' + d + ' ' + h + ':' + minute;
  // return y + '-' + m + '-' + d;
}
module.exports = {
  js_date_time: js_date_time
}

關(guān)于“微信小程序拍賣商品詳情頁(yè)設(shè)計(jì)與交互實(shí)現(xiàn)代碼怎么寫”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。