小程序无人点单效果实现

小程序无人点单效果实现

废话不多说，直接上源码: https://github.com/Unscientific-net-a-porter/-

以下皆为参考博客，可以了解一下。
微信小程序Tab切换,滑动切换： https://blog.csdn.net/fatong3/article/details/89950933
微信小程序实现商品数量加减案例： https://blog.csdn.net/zhenghhgz/article/details/89432330
小程序毫秒级倒计时（适用于拼团秒杀功能）：https://blog.csdn.net/qq_41473887/article/details/81287786
小程序锚点跳转：https://www.diybloghome.com/othercode/1673.html

有基础的基本上看了代码就能做了。

简单讲解一下

打开菜单页面，滑动菜单分为三个：热门菜单，限时秒杀和我要优惠。
参考一个链接。
代码如下。

wxml


  
    全部
    找人
    找车
  
  
    
      全部
    
    
      找人
    
    
      找车
    
  

wxss：

.swiper-tab {
    width: 100%;
    display: flex;
    flex-flow: row;
    justify-content: space-between;

    border-bottom: 2rpx solid #AFEEEE;
    text-align: center;
    height: 88rpx;
    line-height: 88rpx;
}
 
.swiper-tab-item {
    width: 30%;
    color: #434343;
    font-size: 30rpx;
}
 
.active-tab {
    color: #00FF7F;
    border-bottom: 3rpx solid #00FF7F;
}
 
swiper {
    background-color: #F5F5F5
}

 

js：
Page({
  /**
   * 页面的初始数据
   */
  data: {
    currentTab: 0
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },
  //滑动切换
  swiperTabView: function (e) {
    this.setData({
      currentTab: e.detail.current
    });
  },
 
  //点击切换
  clickTab: function (e) {
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      this.setData({
        currentTab: e.target.dataset.current
      })
    }
  }
  
})

这个是别人博主的码，直接可以套用。

简单分析一下，那我自己写的为例，用的是swiper这个组件。

{ {currentTab==0?‘active-tab’:’’}}这个是判断是否被选中时，给view也就是顶部标签添加一个class ( on )，而 data-current=“0” 则是自定义的一个数据，根据this.data.currentTab === e.target.dataset.current 来判定是否已经显示了该 swiper-item 页面，以及给 currentTab 赋值 达到要显示哪个 swiper-item 页面。

看不懂自己直接上代码，玩玩就懂了。

好了，主要页面的大体框架好了，下面先来做 热门菜单这个页面

这是我的部分代码

wxml

  
    
    
    
      

        
          
            {
    {item.title}}
          
        

      
      

        
          

            {
    {item.title}}
            
              
              
              {
    {items.title}}
              月售{
    {}}
              ￥{
    {items.price}}
              
              
            
          
        

      
    
  

js

  data: {
    list:[],
    localhost: "http://a.itying.com/",
    classifySeleted:"",
  },


/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.requestData();
    this.countTime();
  },
  /*请求数据*/
  requestData(){
    var that=this;
    wx.request({
      url: 'http://a.itying.com/api/productlist', //仅为示例，并非真实的接口地址
      data: {

      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success:function(res) {
        console.log(res.data);

        //替换反斜杠
        var arr = res.data.result;
        for(var i=0; i 10 && !this.data.scrollDown) {
      this.setData({
        scrollDown: true
      });
    } else if (e.detail.scrollTop < 10 && this.data.scrollDown) {
      this.setData({
        scrollDown: false
      });
    }

    var scale = e.detail.scrollWidth / 570,
      scrollTop = e.detail.scrollTop / scale,
      h = 0,
      classifySeleted,
      len = this.data.list.length;
    //console.log(this.data);
    //console.log(scale)
    //console.log(scrollTop)

    this.data.list.forEach(function (list, i) {

      /* 这里的接口是list下面还有个list */
      var _h = 70 + list.list.length * (46 * 3 + 20 * 2);
     // console.log("h"+h)
      if (scrollTop >= h - 100 / scale) {
        classifySeleted = 'to'+list._id;
      }
      h += _h;
    });
    this.setData({
      classifySeleted: classifySeleted
    });
  },

  // 点击按钮，传递data-id数据
  tapClassify: function (e) {
    var classifyViewed
    var classifySeleted
    console.log(e)
    var id = e.currentTarget.dataset.id;
    console.log(id);
    this.setData({
      classifyViewed: id
    });
    console.log(this.data.classifyViewed);

    var that = this;
    setTimeout(function () {
      that.setData({
        classifySeleted: id
      });
    }, 500);

    console.log(this.data.classifySeleted);
  },

  //自定义点击，跳转至菜单详情页
  goDishCentent:function(event){
    console.log(event)
    var c_id = event.currentTarget.dataset.id;
    console.log(c_id)
    wx.navigateTo({
      url: '../dishcentent/dishcentent?c_id='+c_id,
    })
  },

wxss

page {
  width: 100%;
  position: relative;
  float: left;
  height: 100%;
}

.swiper-tab {
  width: 100%;
  box-shadow: 0 2px 3px 2px #d3d3d3;
  text-align: center;
  line-height: 80rpx;
  position: fixed;
  z-index: 777;
  background: #fff;
  height: 90rpx;
}

.swiper-tab-list {
  font-size: 30rpx;
  display: inline-block;
  width: 25%;
  color: #777;
}

.on {
  color: #000;
  font-weight: bold;
  border-bottom: 5rpx solid #fed529;
}

.swiper-box {
  display: block;
  /* height: 100%; */
  width: 100%;
  overflow: hidden;
  position: relative;
  padding-top: 90rpx;
  z-index: 7;
  height: 1020rpx;
}

.swiper-box view {
  text-align: center;
}

/*标题*/

.label_title {
  font-size: 30rpx;
  color: rgb(146, 146, 146);
}

.content {
  width: 100%;
  position: relative;
  float: left;
  background: #fff;
}

.left_list {
  width: 24.5%;
  position: absolute;
  left: 0;
  padding-top: 40rpx;
  padding-bottom: 40rpx;
  background: #f1f1f1;
  /* min-height: 100%; */
  box-sizing: border-box;
  height: 1020rpx;
}

.leftList {
  padding: 30rpx 10rpx;
  float: left;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.leftList .name {
  font-size: 24rpx;
  line-height: 30rpx;
}

.leftList.active {
  background: #fff;
}

/* 定义一个伪类元素，添加下划线效果 */

.leftList.leftList.active:after {
  content: "";
  width: 10rpx;
  height: 100%;
  background: #feb70f;
  position: absolute;
  top: 0;
  left: 0;
}

.right_content {
  width: 74.5%;
  float: right;
  position: relative;
  height: 1020rpx;
}

.scroll_bg {
  position: relative;
  width: 100%;
  float: left;
  white-space: nowrap;
}

.main_scroll {
  height: 1096rpx;
}

/* 隐藏滚动条 */

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

.right_content .title {
  padding: 20rpx 20rpx 50rpx 20rpx;
  position: relative;
  float: left;
  width: 100%;
  box-sizing: border-box;
}

.rightList {
  padding: 20rpx 10rpx;
  float: left;
  position: relative;
  width: 90%;
  box-sizing: border-box;
  margin-left: 5%;
  margin-right: 5%;
  border-bottom: 1px #eee solid;
}

.rightList .pic {
  width: 40%;
  height: 198rpx;
  float: left;
  position: relative;
  border-radius: 5px;
}

.rightList view {
  width: 60%;
  float: left;
  position: relative;
  padding: 10rpx 10rpx 0 30rpx;
  box-sizing: border-box;
  text-align: left;
}

.rightList .addCart {
  font-size: 50rpx;
  background: #feb70f;
  width: 50rpx;
  height: 50rpx;
  text-align: center;
  border-radius: 50%;
  padding: 0 !important;
  float: right;
}

代码很长，别全复制，尤其是wxss的。

简单分析一下：
content 下面分为了，left_list 和 right_content 左右两部分。

请认真看看代码，没错这个原理和上面的一样，也是通过 swiper 来实现的。

不同的是，这里是调用了接口，
列表：http://a.itying.com/api/productlist
详情：http://a.itying.com/api/productcontent?id=5ac1a22011f48140d0002955

调用的方法嘛，就是小程序的网络请求 ： requestData()
是小程序的一个apihttps://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
url 是 接口地址。
data是用来给后端传值的，其规则：
data 参数说明

最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String 。转换规则如下：

对于 GET 方法的数据，会将数据转换成
 query string（encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...）
对于 POST 方法且 header['content-type'] 为 application/json 的数据，会对数据进行 JSON 序列化
对于 POST 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据，会将数据转换成 query string （encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...）

因为我们的请求是默认的post请求，拿的数据是json，所以header 这里用的是默认值。

success ，并不是已经获取成功了，他只是说明代码跑到接口那了，能否拿到数据得看 res.data.msg（有些接口不一定是msg）返回的状态。因为我们这里不用给后端传值，而且接口能用，所以跑到接口反馈数据了，也就基本拿到数据了。

利用 setData({})
将数据赋给 list:[],
在wxml 页面里一个个循环打印出来

提一下值得注意的地方。
由于接口是别人的，可能没有安全证书，
请在右上角详情那里勾选上。

接口文件调用的图片是 xxxxxxx\\ xxxxxxxxx\\xxxxxx.jpg格式的。
所以要 把 \\ 改成/。
而且，图片没有端口号。
所以

wxml

没有后台获取端口号，只能先写死了。

js

localhost: "http://a.itying.com/

限时秒杀页面

原理同上，不过我没有写完整。说说思路。
1.获取时间，当时间的值等于某值时，调用x方法，x方法就是调用某个接口，setData 最后显示菜单。并开始调用计时器方法。

2.可以查看已过时的和即将开始的。也就是 点击 左边的三个view，分别调用 自己的 x 方法，显示菜单。

3.菜单里 添加{ { time某值？‘方法1’:‘方法2’}}的判定形式。方法1无疑是可以点击里面的数据，方法2则调用wx.showToast 弹出消息框“时间已过” 。同时class里也添加方法，{ { time某值？‘类名1’:‘类名2’}}，类名2无疑是让菜单变灰色提示用户不能点击。

4.当然，完善逻辑来说，当库存没了也就是抢完了，也要执行方法2和类名2。这时候你要这样字=子写:
{ { num<0?‘方法3’:time某值？ ‘方法1’ :'方法2’ }}，那么方法3就是 弹出消息框“已抢完”，同理class也应如此:
{ { num<0?‘类名2’: time某值？ ‘类名1’:‘类名2’}}，因为这里只需把菜单的颜色变成灰色和彩色所以只需两个方法。

详情页没写。见谅。
估计也只用 加个计时器和上面的一些判断方法。
我是不是太懒了23333。

优惠券页面

我写了，偷了点懒。

代码不多，反正就是点击领取，执行方法，给zige赋值0表示你已经把资格用了，然后在页面上加判断，当zige不大于0时，执行方法弹出提示消息，改变class，从而改变按钮颜色。至于券我是做了两张图片，原理一样。

js

    //优惠卷
    quan:'../images/quan1.png',
    // 资格  仅供测试
    zige:1,

//优惠页面
  getQuan:function(){
    this.setData({
      quan:'../images/quan0.png',
      zige:0
    })
  },

  tishi:function(){
    wx.showToast({
      title: "你已经领取过了!",
      icon: 'loading'
    })
  },

wxml

 
  
    
      
        
          
          满30减10
          
          仅适用于非促销类商品
        
        
        
          {
    {zige>0?'领取':'已领取'}}
        
      
    
  

wxss

/* 优惠券 */

.quan_content {
  margin-left: 45rpx;
  width: 660rpx;
  position: relative;
  margin-top: 30rpx;
  box-sizing: border-box;
  height: 210rpx;
  border-bottom: #eee 1px solid;
}

.quan_list {
  position: relative;
  float: left;
  width: 450rpx;
  height: 180rpx;
}

.quan_list image {
  position: absolute;
  z-index: 7;
  width: 450rpx;
  height: 180rpx;
  left: 0;
  top: 0;
}

.quan_list .quan_text1{
  position: absolute;
  font-size: 40rpx;
  font-weight: bold;
  z-index: 777;
  color: #fff;
  top: 80rpx;
  left: 120rpx;
}

.quan_list .quan_text2{
  position: absolute;
  font-size: 24rpx;
  font-weight: bold;
  z-index: 777;
  top: 135rpx;
  left: 120rpx;
}

.quan_button {
  position: relative;
  float: left;
  width: 160rpx;
  height: 180rpx;
  margin-left: 45rpx;
}

.quan_button text {
  position: relative;
  float: left;
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  margin-top: 45rpx;
  text-align: center;

  border-radius: 10px;
  color: #fff;
}
.get_button{
    background: #fed529;
}
.get_no{
  background: #c1c1c1;
}

再说说 详情页面

首先通过菜单列表页面的button 获取到 该产品的id
我们通过 在点击控件view里面 利用 data-id 进行赋值，

data-id="{ {id}}" 里面的id就是 接口里该产品的id

然后在js文件里面 通过 跳转页面传值的方式将id传给详情页。

然后 详情页js里获取 并赋值到获取数据的方法里

这样我们就拿到了数据

由于接口的问题我们拿到的数据是html 格式的

我们可以 用 WxParse.wxParse(‘article’, ‘html’, article, that, 5); 来转换。

然后同上面一样 赋值 并在wxml页面打印出来。

至此 前端页面基本完成。 支付留到下一篇再讲。

由于分开了两次编写这个文章，所以嘛。。。。。

下一篇详讲开发，从零开始。