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

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

完整功能和页面

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>
    <!--商品标题价格栏-->
    <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代码

.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 //计数器
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文件

//时间戳转换成日期时间,传入时间精确到毫秒
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的用户,转载请注明本人出处。

到此这篇关于微信小程序拍卖商品详情页设计与交互实现代码(含倒计时、实时更新出价)的文章就介绍到这了,更多相关小程序拍卖商品详情页内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue 实现小程序或商品秒杀倒计时

    下面先给大家介绍下vue 设计一个倒计时秒杀的组件 ,具体内容如下所述: 简介: 倒计时秒杀组件在电商网站中层出不穷  不过思路万变不离其踪,我自己根据其他资料设计了一个vue版的 核心思路:1.时间不能是本地客户端的时间  必须是服务器的时间这里用一个settimeout代替 以为时间必须统一 2.开始时间,结束时间通过父组件传入,当服务器时间在这个开始时间和结束时间的范围内  参加活动按钮可以点击,并且参加过活动以后不能再参加, 3.在组件创建的时候 同步得到现在时间服务时间差,并且在这里边

  • 微信小程序实现跳转详情页面

    本文实例为大家分享了微信小程序实现跳转详情页面的具体代码,供大家参考,具体内容如下 我们要实现如下的效果,进入详情页,获取产品的具体数据.本文请求的数据是本地的,实际开发是要通过ajax请求服务器中的产品数据,为了避免业务代码扰乱视听,只截取了关键代码 1.首先我们需要两个页面,一个首页(就是产品列表页),一个详情页(产品的具体数据页) 首页wxml代码: 这里举例的是传id到详情页,这样详情页才知道我们需要加载的是哪个产品,也可以传index下标,不过感觉id更靠谱些.(id是你产品列表里面的

  • 微信小程序如何实现商品列表跳转商品详情页功能

    目录 引言 1.1实现首页页面 2.1实现调跳转到手机详情页 总结 引言 模仿京东小程序,实现下列功能 首页包含了手机图片,手机的描述,手机的价格,购物车图标 首页显示两行文字,多余的文字隐藏,以3个点代替 点击页面不同的地方,能够跳转到不同的手机详情页面 手机详情页包含手机图片,上架日期,价格,手机描述等图文信息** 1.1实现首页页面 效果如下图 代码如下:其中js页面代码包含了跳转 <!--index.wxml--> <view class="container"

  • 微信小程序基于数据库时间实现商品倒计时功能(可重用代码)

    最近做拍卖小程序,里面有一个需求是监控拍卖时间,需要对时间进行动态的倒计时显示 从构思开始,做这个倒计时也花了我4个小时多,也遇到了很多问题,现在我把完整的功能给实现了,可以拿来套用,只需要传入你自己数据库的时间即可. 1.第一个函数 //传入数据库结束时间参数并计算倒计时 countdown(endTime){//取出竞拍结束时间,精确到秒,如果数据库设置的是精确到毫秒,这里需要再除以1000 let auctionEndtime = res.data.end_time console.log

  • 微信小程序新闻网站详情页实例代码

    准备工作: 1.在微信公众号平台,申请小程序账号,获取appid 2.下载并安装微信开发者工具 3.做不同分辨率设备的自适应:单位使用rpx IPhone6下 1px=1rpx=0.5pt 使用rpx,小程序会自动在不同分辨率下进行转换 首先是项目的入口页面 welcome.wxml <view class="container"> <image class="avatar" src="/images/avatar/1.png"

  • 微信小程序商品详情页底部弹出框

    电商项目中商品详情页,加入购物车或者下单时可以选择商品属性的弹出框,通过设置view的平移动画,达到从底部弹出的样式 1.js代码(一般情况下只调用显示对话框的函数,当点击对话框外部的时候,对话框可以消失) //显示对话框 showModal: function () { // 显示遮罩层 var animation = wx.createAnimation({ duration: 200, timingFunction: "linear", delay: 0 }) this.anim

  • 微信小程序商品详情页规格属性选择示例代码

    detail.wxml展示页面 <!--轮播图--> <swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}"> &

  • 微信小程序返回上一页传参并刷新过程解析

    这篇文章主要介绍了微信小程序返回上一页传参并刷新过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 问题 微信小程序onLoad(options)方法在整个生命周期中只加载一次,也就是你进入下个页面,再返回时,是不会再次触发的,所以你返回是url传参是行不通了. 需求 现在有这么一个需求:一个商品支付页面,点击优惠卷进入优惠券列表页,选中优惠券后带着数据再返回到支付页面. 方法 一.使用到的方法是小程序的页面栈,感兴趣可以打印一下pages

  • 微信小程序实现商品属性联动选择

    本文实例为大家分享了微信小程序实现商品属性联动选择的具体代码,供大家参考,具体内容如下 效果演示: 代码示例 1.commodity.xml <!-- <view class="title">属性值联动选择</view> --> <!--options--> <view class="commodity_attr_list"> <!--每组属性--> <view class="a

  • 微信小程序实现滑动翻页效果(完整代码)

    微信小程序实现滑动翻页效果,效果图如下所示: 源码: <view class="mainFrame"> <swiper class="container" indicator-dots="{{indicatorDots}}" indicator-dots="{{indicatordots}}" autoplay="{{autoplay}}" interval="{{interva

  • 微信小程序功能之全屏滚动效果的实现代码

    想做一个全屏滚动的效果,于是在网上找了一个差不多的例子,但是觉得有些地方不是很好,于是改进了一下: 先给大家展示下效果图,感觉不错,请参考实例代码. 代码: wxml: <!-- 第一页 -- > <view id='hook1' class="section section01 {{scrollindex==0?'active':''}}" style='background:red' bindtouchstart="scrollTouchStart&qu

  • 微信小程序车牌号码模拟键盘输入功能的实现代码

    先来一波预览图. 预览图片一: 预览图二: 预览图三: 预览图四: 预览图五: 大概的效果就和原来图差不多. 思路解析:车牌号码由31位汉字,26位字母,10位数字组成的,开头第一位由省份简称的汉字,第二位字母根据省份下的城市或地区区分,最后的五位或者六位,是有字母和数字组成的,共有七位的车牌号码和八位的车牌号码,(注:其中的八位数的车牌号码为能源车的车牌号码.) 大概的逻辑思维,不包含代码获取值什么的或者验证其他的说明,详细看代码片段. 第一,原型的设计思路:先设计好模拟键盘的大概架构,样式.

  • 微信小程序movable view移动图片和双指缩放实例代码

    movable-area是微信小程序的新组件,可以用来移动视图区域movable-view.移动方向可选择任何.垂直和平行.可移动区域里包含其他文本.图片.按钮等组件.可移动区域可绑定touchend等事件.movable-view的参数可调整动画效果. 先从movable-view开始说起吧. movable-view是小程序自定义的组件.其描述为:"可移动的视图容器,在页面中可以拖拽滑动". 官方文档地址: https://mp.weixin.qq.com/debug/wxadoc

  • 微信小程序wx.uploadfile 本地文件转base64的实现代码

    微信小程序wx.uploadfile, 利用PHP接口把本地图片转化为base64位. 网上到处都是粘贴复制的wx.uploadfile的解决方案, 但目前还没有具体的代码: 特意呈现出来给需要的伙伴们: 代码: case 'imgBufferToBase64': <span style="white-space: pre;"> </span>$data=''; <span style="white-space: pre;"> &

  • 微信小程序开发之左右分栏效果的实例代码

    本文以一个简单的小例子,简述在微信小程序开发中左右分栏功能的实现方式,主要涉及scroll-view ,列表数据绑定,及简单样式等内容,属于初级入门内容,仅供学习分享使用. 概述 在微信小程序开发中,左右分栏(左边显示分类,右边显示明细,然后进行联动)是一种常见的布局方式,多应用于点餐,冷饮店,外卖,以及其他类似的商城. 布局分析 布局分析图示如下: 涉及知识点 •scroll-view 可滚动视图区域.使用竖向滚动时,需要给<scroll-view>一个固定高度,通过 WXSS 设置 hei

  • 详解微信小程序自定义组件的实现及数据交互

    简单的自定义组件 本文的使用场景是:多个页面都需要用到拨打电话功能,为减少代码量.便于维护,所以自定义了一个组件,每个页面直接调用即可.基本实现下图样式: 下面我们来一步步的实现它: step1:创建文件夹以及文件 首先创建一个components(名字可自取)文件夹,用于放置所有自定义的组件, 里面可以用右键自动创建的方式,新建一个Component组件,例如: 创建之后的目录结构为: 其中callphone是我们本次要实现的拨打电话组件. step2:组件的基本搭建 在callphone.w

随机推荐

其他