DAY09 微信小程序电商项目业务功能实现

今天为美团外卖页面添加商铺名、实现将商品添加进购物车、添加收货地址等功能，并继续进行了页面的排版及设计。这其中涉及到了自定义遮罩层组件的知识。为了实现页面跳转，首先应该新建相应的页面。

1.将商品添加至购物车

 

1.1实现方法

tab切换：

这个界面最主要的功能就是tab切换，和点菜功能。其中tab切换其实用的还是swiper，因为swiper有一个current属性表示的是swiper当下显示的页面的序号，只需要将tab中被激活的项与swiper的页面互相绑定就可以了。当点击title中的项时获取当前序号，再将它赋值给current，当手指滑动swiper时触发bindchange事件，获取当前页面序号，使相应序号的title处于被选中的状态。有一个值得注意的地方是当点击title中的项时也会触发swiper的bindchange事件，但是我们只想让它在滑动swiper时触发，否则就会出现setData过于频繁的警告，所以我们需要在turnTitle中加一段判断语句，判断页面滑动的原因是否为滑动，如果不是则不执行下面的语句。

1.2程序代码

order.wxml

<!--遮罩层-->
<scroll-view class="cart-detail" hidden="{{!showCartDetail}}" scroll-y="true">
  <view class="mark" bindtap="hiddenCartDetailf"></view>
  <view class="list">
    <view class="list-item" wx:for="{{localList}}">
      <view class="local-item" wx:for="{{item}}" wx:for-item="order">
        <view class="item-img"><image src="{{order.img}}" style="opacity:1;"></image></view>
        <view class="item-info">
          <view class="info-name">{{order.name}}</view>
          <view class="info-price">单价：{{order.price}}</view>
           <view class="info-num">支付金额：{{order.pay}}</view>
          <view class="info-add">
            <view class="add-add" data-price="{{order.price}}" data-name="{{order.name}}" bindtap="tapReduceCart">-</view>
          <view class="info-num">{{order.num}}</view>
          <view class="add-de" data-price="{{order.price}}" data-name="{{order.name}}" bindtap="tapAddCart">+</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</scroll-view>

1.3程序预览

2.管理收货地址

2.1程序代码

location.wxml

<view class="header">
<view class="search-input">
  <input placeholder="请输入收货地址"
   bindinput="input"></input>
   </view>
  <view class="search-btn">搜索</view>
</view>
<view class="result-container" hidden="{{hidden}}">
<scroll-view scroll-y="true"class="search-result-list" hidden="{{hidden}}">
  <block wx:for="{{locationList}}" wx:key="">
    <view class="search-result" bindtap="onTap" data-key="{{item.address}}">{{item.name}}
      <view class="search-result-desc">{{item.address}}</view>
    </view>
  </block>
</scroll-view>
</view>
<view class="getLocation"
bindtap="getLocation">点击定位当前位置</view>
<view class="addLocation">新增收货地址
  <view class="addLocation-icon">+</view>
</view>
<view class="myLocation">我的收货地址</view>
<view class="LocatonInfo"></view>
<view class="userTel"></view>

location.wxss

.header{
  display: flex;
  height: 60rpx;
  font-size: 28rpx;
  padding: 15rpx 20rpx;
  line-height: 60rpx;
  border-bottom: 20rpx solid #F4F4F4;
}
.header .search-input{
  height: 60rpx;
  flex: 1;
  padding-left: 30rpx;
  background: #EFEFF5;
  border-radius: 10rpx;
  color: #6D6D6D;
}
.header .search-btn{
  text-align: center;
  margin-left: 20rpx;
  width: 100rpx;
  background: #AAAAAA;
  border-radius: 10rpx;
  color: #EBEBEB;
}
.getLocation{
  font-size: 30rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-bottom: 20rpx solid #F4F4F4;
}
.addLocation{
  position: relative;
  font-size: 30rpx;
  height: 80rpx;
  line-height: 80rpx;
  padding-left: 15rpx;
}
.addLocation-icon{
  width: 30rpx;
  line-height: 27rpx;
  height: 30rpx;
  text-align: center;
  position: absolute;
  right: 15rpx;
  top: 20rpx;
  border-radius: 30rpx; 
  color: #FFD671;
  border:2px solid #FFD671;
}
.myLocation{
  background: #F4F4F4;
  height: 100rpx;
  padding-left: 15rpx;
  line-height: 130rpx;
  font-size: 25rpx;
  color: #E3E3E3;
}
.result-container{
  position: fixed;
  top: 90rpx;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  background: white;
}
.search-result-list{
  padding: 15rpx;
  height: 100%;
}
.search-result{
  line-height: 50rpx;
  height: 100rpx;
  font-size: 28rpx;
  border-bottom: 1rpx solid #ECECEC;
}
.search-result-desc{
  line-height: 45rpx;
  font-size: 27rpx;
  color: #AAAAAA;
}

location.json

{
  "navigationBarTitleText": "选择收货地址",
  "navigationBarTextStyle": "white",
  "navigationBarBackgroundColor": "#f0145a"
}

location.js

// pages/location/location.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    locationList: [],
    hidden: true
  },
  onTap: function (e) {
    wx.setStorageSync('location', e.currentTarget.dataset.key)
    wx.switchTab({
      url: '/pages/home/home'
    })
  },
  getLocation: function () {
    wx.getLocation({
      type: 'gcj02',
      success: function (res) {
        var latitude = res.latitude
        var longitude = res.longitude
        wx.request({
          url: 'http://api.map.baidu.com/geocoder/v2/?ak=btsVVWf0TM1zUBEbzFz6QqWF&coordtype=gcj02ll&location=' + latitude + ',' + longitude + '&output=json&pois=0',
          method: "get",
          success: function (res) {
            console.log(res.data.result.formatted_address)
            wx.setStorageSync('location', res.data.result.formatted_address.substr(res.data.result.formatted_address.indexOf('市') + 1, 10))
          }
        })
      }
    })
    wx.switchTab({
      url: '/pages/home/home'
    })
  },
  input: function (e) {
    if (e.detail.value) {
      this.setData({
        hidden: false
      })
      this.search(e.detail.value);
    } else {
      this.setData({
        hidden: true
      })
    }
  },
  search: function (text) {
    var that = this;
    wx.request({
      url: 'http://api.map.baidu.com/place/v2/search?query=' + text + '&page_size=20&page_num=0&scope=2&region=南昌&output=json&ak=btsVVWf0TM1zUBEbzFz6QqWF',
      success: function (res) {
        console.log(res);
        that.setData({
          locationList: res.data.results
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

2.2程序预览