仿中国婚博会微信小程序

2019年12月26日

一.开发前准备

1.设计稿准备

2.各个页面的图片转变

二.首页实现

1.底部menuBar设置

image.png

2.首页轮播图设计

image.png

3.首页九宫格设计

image.png

.item {
  margin-top: 15px;
  text-align: center;
  font-family: "Microsoft YaHei";
  font-size: 13px;
  width: 60px;
  display: inline-block;
  margin-right: 10px;
}

image.png

4.全部分类设计

image.png

image.png

.item {
  border: 1px solid #ccc;
  width: 90%;
  margin: 0 auto;
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
}
.navs {
  display: flex;
  flex-direction: row;
  text-align: center;
  font-size: 13px;
  margin-bottom: 10px;
  padding-top: 10px;
}

.nav {
  margin: 0 auto;
  width: 70px;
}

三.现金券模块实现

1.顶部下来筛选功能实现

image.png

.menu {
  display: block;
  height: 38px;
}

.menu dt {
  font-size: 13px;
  float: left;
  width: 49.7%;
  height: 38px;
  border-right: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  text-align: center;
  line-height: 38px;
  background-color: #fff;
}

.menu dd {
  position: absolute;
  width: 100%;
  top: 40px;
  left: 0;
  z-index: 999;
}

.menu li {
  font-size: 14px;
  background-color: #f3f1ef;
  line-height: 40px;
  display: block;
  padding-left: 8px;
  border-bottom: 1px solid #fff;
}

.select {
  color: red;
}

.show {
  display: block;
}

.hidden {
  display: none;
}

Page({
  data: {
    subMenuDispaly: initSubMenuDisplay(),
    currentTab: -1
  },
  tapMainMenu: function(e) {
    console.log(e);
    var index = parseInt(e.currentTarget.dataset.index);
    console.log(index);
    var newSubMenuDisplay = initSubMenuDisplay();
    if (this.data.subMenuDispaly[index] == 'hidden') {
      newSubMenuDisplay[index] = 'show';
      this.setData({
        currentTab: index
      });
    } else {
      newSubMenuDisplay[index] = 'hidden';
      this.setData({
        currentTab: -1
      });
    }
    this.setData({
      subMenuDispaly: newSubMenuDisplay
    });
  }
})

2.现金券列表

image.png

四.婚博会模块实现

1.提交表单实现

image.png

不能提交button的值，所以要重新复制

  formSubmit: function(e) {
    console.log(e);
    var ticket = e.detail.value;
    ticket.way = this.data.way;
    wx.setStorageSync('ticket', ticket);
  }

2.弹框选择分类模块实现

image.png

image.png