Code de développement du mini-centre commercial WeChat pour implémenter la page de gestion des adresses de livraison des utilisateurs

Le contenu de cet article concerne le code d'implémentation de la page de gestion des adresses de livraison des utilisateurs dans le développement du centre commercial d'applets WeChat. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .

Regardez l'effet

Plan de développement

1 , mettre en page la liste d'adresses de livraison et la nouvelle page d'adresse de livraison

2. Réaliser la fonction de liaison à trois niveaux des provinces, des villes et des comtés

3. Utiliser les données de gestion du cache

1. Gestion de la liste d'adresses d'expédition

addressList.wxml

<scroll-view class="scroll" scroll-y="true">
  <view wx:for="{{addressList}}">
    <view class="product-name-wrap">
      <view class="ui-list-item-info">{{item.consignee}}
        <text decode="{{true}}" space="{{true}}">  </text> {{item.mobile}}
      </view>
      <view class="ui-list-item-address">
        {{item.address}}
      </view>
      <view class="ui-list-item-time">
        <p>{{item.transportDay}}</p>
        <p class="ui-list-item-del" data-id="{{index}}" bindtap="delAddress">删除</p>
      </view>
      <view class="separate"></view>
    </view>
  </view>
</scroll-view>
<view class="add-address" bindtap="addAddress">
  <image class="add-img"  src="../../images/add.png"></image>新增地址
</view>

addressList.wxss

page{  
  display: flex;  
  flex-direction: column;  
  height: 100%;  
}  
.product-name-wrap{
  margin: 0px 10px;
  font-size: 14px;
  color: #404040;
}
.ui-list-item-info{
  margin: 5px 0px;
}
.ui-list-item-address{
  color: #585c64;
}
.ui-list-item-time{
  margin: 5px 0px;
}
.ui-list-item-del{
  position: absolute;
  right: 10px;
  color: #585c64;
}
/* 分割线 */
.separate {
  margin: 5px 0px;
  height: 2rpx;
  background-color: #f2f2f2;
}
.add-address{
  margin: 0 auto;
  margin-top: 30px;
  width: 150px;
  height: 35px;
  border: 1px #000 solid;
  line-height: 35px;
  text-align: center;
  color: #000;
  border-radius: 5rpx;
      display: block;
}
.add-img{
  margin-right: 15rpx;
  width: 15px;
  height: 15px;
}

addressList.json

{
  "navigationBarTitleText": "管理地址"
}

addressList.js

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    addressList:[]
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var arr = wx.getStorageSync('addressList') || [];
    console.info("缓存数据：" + arr);
    // 更新数据  
    this.setData({
      addressList: arr
    });
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.onLoad();
  },
  addAddress:function(){
    wx.navigateTo({ url: '../address/address' });
  },
  /* 删除item */
  delAddress: function (e) {
    this.data.addressList.splice(e.target.id.substring(3), 1);
    // 更新data数据对象  
    if (this.data.addressList.length > 0) {
      this.setData({
        addressList: this.data.addressList
      })
      wx.setStorageSync('addressList', this.data.addressList);
    } else {
      this.setData({
        addressList: this.data.addressList
      })
      wx.setStorageSync('addressList', []);
    }
  }
})

2 . Nouvelles informations de réception

address.wxml

<form bindsubmit="saveAddress">
  <view class="weui-cells weui-cells_after-title">
    <view class="weui-cell weui-cell_input">
      <view class="weui-cell__hd">
        <view class="weui-label">收货人</view>
      </view>
      <view class="weui-cell__bd">
        <input class="weui-input" name="consignee" placeholder="请输入收货人真实姓名" />
      </view>
    </view>
    <view class="weui-cell weui-cell_input">
      <view class="weui-cell__hd">
        <view class="weui-label">手机号</view>
      </view>
      <view class="weui-cell__bd">
        <input class="weui-input" name="mobile" placeholder="请输入收货人手机号" />
      </view>
    </view>
    <view class="weui-cell weui-cell_select">
      <view class="weui-cell__hd weui-cell__hd_in-select-after">
        <view class="weui-label">收货时间</view>
      </view>
      <view class="weui-cell__bd">
        <picker bindchange="bindTransportDayChange" value="{{transportIndex}}" range="{{transportValues}}">
          <view class="weui-select weui-select_in-select-after">{{transportValues[transportIndex]}}</view>
          <input name="transportDay" hidden="true" value="{{transportValues[transportIndex]}}" />
        </picker>
      </view>
    </view>
  </view>
  <view class="weui-cells__title"></view>
  <view class="weui-cells weui-cells_after-title">
    <view class="weui-cell weui-cell_select">
      <view class="weui-cell__hd weui-cell__hd_in-select-after">
        <view class="weui-label">省份</view>
      </view>
      <view class="weui-cell__bd">
        <picker bindchange="bindProvinceNameChange" value="{{provinceIndex}}" range="{{provinceNames}}">
          <view class="weui-select weui-select_in-select-after">{{provinceNames[provinceIndex]}}</view>
          <input name="provinceName" hidden="true" value="{{provinceNames[provinceIndex]}}" />
        </picker>
      </view>
    </view>
    <view class="weui-cell weui-cell_select">
      <view class="weui-cell__hd weui-cell__hd_in-select-after">
        <view class="weui-label">城市</view>
      </view>
      <view class="weui-cell__bd">
        <picker bindchange="bindCityNameChange" value="{{cityIndex}}"range="{{cityNames}}">
          <view class="weui-select weui-select_in-select-after"name="city_name">{{cityNames[cityIndex]}}</view>
 
          <input name="cityName" hidden="true" value="{{cityNames[cityIndex]}}" />
        </picker>
      </view>
    </view>
    <view class="weui-cell weui-cell_select">
      <view class="weui-cell__hd weui-cell__hd_in-select-after">
        <view class="weui-label">区县</view>
      </view>
      <view class="weui-cell__bd">
        <picker bindchange="bindCountyNameChange" value="{{countyIndex}}"range="{{countyNames}}">
          <view class="weui-select weui-select_in-select-after">{{countyNames[countyIndex]}}</view>
          <input name="countyName" hidden="true" value="{{countyNames[countyIndex]}}" />
        </picker>
      </view>
    </view>
    <view class="weui-cell weui-cell_input">
      <view class="weui-cell__hd">
        <view class="weui-label">详细地址</view>
      </view>
      <view class="weui-cell__bd">
        <input class="weui-input" name="address" placeholder="请输入收货人详细地址" />
      </view>
    </view>
  </view>
  <button class="weui-btn" type="primary" form-type="submit">保存</button>
</form>

address.wxss

@import '../../utils/weui.wxss';
 
.weui-cells:before{
  top:0;
  border-top:1rpx solid white;
  }
.weui-cell{
  line-height: 3.5rem;
}
.weui-cells:after{
  bottom:0;border-bottom:1rpx solid white
}
 
.weui-btn{
  width: 80%;
}

address .json

{
  "navigationBarTitleText": "添加收货地址"
}

address.js

var area = require('../../utils/area.js');
var areaInfo = []; //所有省市区县数据
var provinces = []; //省
var provinceNames = []; //省名称
var citys = []; //城市
var cityNames = []; //城市名称
var countys = []; //区县
var countyNames = []; //区县名称
var value = [0, 0, 0]; //数据位置下标
var addressList = null;
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    transportValues: ["收货时间不限", "周六日/节假日收货", "周一至周五收货"],
    transportIndex: 0,
    provinceIndex: 0, //省份
    cityIndex: 0, //城市
    countyIndex: 0, //区县
  },
 
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
 
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    var that = this;
    area.getAreaInfo(function(arr) {
      areaInfo = arr;
      //获取省份数据
      that.getProvinceData();
    });
  },
  // 获取省份数据
  getProvinceData: function() {
    var that = this;
    var s;
    provinces = [];
    provinceNames = [];
    var num = 0;
    for (var i = 0; i < areaInfo.length; i++) {
      s = areaInfo[i];
      if (s.di == "00" && s.xian == "00") {
        provinces[num] = s;
        provinceNames[num] = s.name;
        num++;
      }
    }
    that.setData({
      provinceNames: provinceNames
    })
 
    that.getCityArr();
    that.getCountyInfo();
  },
 
  // 获取城市数据
  getCityArr: function(count = 0) {
    var c;
    citys = [];
    cityNames = [];
    var num = 0;
    for (var i = 0; i < areaInfo.length; i++) {
      c = areaInfo[i];
      if (c.xian == "00" && c.sheng == provinces[count].sheng && c.di != "00") {
        citys[num] = c;
        cityNames[num] = c.name;
        num++;
      }
    }
    if (citys.length == 0) {
      citys[0] = {
        name: &#39;&#39;
      };
      cityNames[0] = {
        name: &#39;&#39;
      };
    }
    var that = this;
    that.setData({
      citys: citys,
      cityNames: cityNames
    })
    console.log(&#39;cityNames:&#39; + cityNames);
    that.getCountyInfo(count, 0);
  },
 
  // 获取区县数据
  getCountyInfo: function(column0 = 0, column1 = 0) {
    var c;
    countys = [];
    countyNames = [];
    var num = 0;
    for (var i = 0; i < areaInfo.length; i++) {
      c = areaInfo[i];
      if (c.xian != "00" && c.sheng == provinces[column0].sheng && c.di == citys[column1].di) {
        countys[num] = c;
        countyNames[num] = c.name;
        num++;
      }
    }
    if (countys.length == 0) {
      countys[0] = {
        name: &#39;&#39;
      };
      countyNames[0] = {
        name: &#39;&#39;
      };
    }
    console.log(&#39;countyNames:&#39; + countyNames);
    var that = this;
    // value = [column0, column1, 0];
 
    that.setData({
      countys: countys,
      countyNames: countyNames,
      // value: value,
    })
  },
 
  bindTransportDayChange: function(e) {
    console.log(&#39;picker country 发生选择改变，携带值为&#39;, e.detail.value);
    this.setData({
      transportIndex: e.detail.value
    })
  },
 
  bindProvinceNameChange: function(e) {
    var that = this;
    console.log(&#39;picker province 发生选择改变，携带值为&#39;, e.detail.value);
    var val = e.detail.value
    that.getCityArr(val); //获取地级市数据
    that.getCountyInfo(val, 0); //获取区县数据
 
    value = [val, 0, 0];
    this.setData({
      provinceIndex: e.detail.value,
      cityIndex: 0,
      countyIndex: 0,
      value: value
    })
 
  },
 
  bindCityNameChange: function(e) {
    var that = this;
    console.log(&#39;picker city 发生选择改变，携带值为&#39;, e.detail.value);
 
    var val = e.detail.value
    that.getCountyInfo(value[0], val); //获取区县数据
    value = [value[0], val, 0];
    this.setData({
      cityIndex: e.detail.value,
      countyIndex: 0,
      value: value
    })
  },
 
  bindCountyNameChange: function(e) {
    var that = this;
    console.log(&#39;picker county 发生选择改变，携带值为&#39;, e.detail.value);
    this.setData({
      countyIndex: e.detail.value
    })
  },
 
  saveAddress: function(e) {
    var consignee = e.detail.value.consignee;
    var mobile = e.detail.value.mobile;
    var transportDay = e.detail.value.transportDay;
    var provinceName = e.detail.value.provinceName;
    var cityName = e.detail.value.cityName;
    var countyName = e.detail.value.countyName;
    var address = e.detail.value.address;
 
    console.log(transportDay + "," + provinceName + "," + cityName + "," + countyName + "," + address); //输出该文本 
 
    var arr = wx.getStorageSync(&#39;addressList&#39;) || [];
    console.log("arr,{}", arr);
    addressList = {
      consignee: consignee,
      mobile: mobile,
      address: provinceName + cityName + countyName+address,
      transportDay: transportDay
    }
      arr.push(addressList);
    wx.setStorageSync(&#39;addressList&#39;, arr);
    wx.navigateBack({
      
    })
  }
})

area.js et weui.wxss Vous pouvez voir comment récupérez le code source ci-dessous, ici Plus d'explications.

Recommandations associées :

Le développement du mini centre commercial WeChat utilise l'autorisation WeChat et implémente le code de page du centre personnel

Développement de centre commercial de programme WeChat Mini pour implémenter la fonction d'ajout de produits au panier (code)

Développement de centre commercial de programme WeChat mini pour construire le cadre https et mettre en œuvre la navigation haut et bas

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!