지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 위챗 애플릿 > 미니 프로그램 개발 > 본문

사용자 배송주소 관리 페이지를 구현하기 위한 위챗 미니 프로그램 몰 개발 코드

不言
풀어 주다： 2018-08-16 17:08:46
원래의
24358명이 탐색했습니다.

이번 글은 위챗 애플릿 몰 개발 시 사용자 배송 주소 관리 페이지 구현을 위한 코드에 대한 내용입니다. 도움이 필요한 친구들에게 참고가 되었으면 좋겠습니다. 당신에게.

효과 보기

개발 계획# 🎜 🎜#

1 배송 주소 목록을 배치하고 배송 주소 페이지를 추가합니다

2. counties

3. 캐시 관리 데이터 사용


1. 배송 주소 목록 관리

# 🎜🎜#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(&#39;addressList&#39;) || [];
    console.info("缓存数据：" + arr);
    // 更新数据  
    this.setData({
      addressList: arr
    });
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.onLoad();
  },
  addAddress:function(){
    wx.navigateTo({ url: &#39;../address/address&#39; });
  },
  /* 删除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(&#39;addressList&#39;, this.data.addressList);
    } else {
      this.setData({
        addressList: this.data.addressList
      })
      wx.setStorageSync(&#39;addressList&#39;, []);
    }
  }
})
로그인 후 복사

2. 영수증 정보 추가

#🎜 🎜#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 &#39;../../utils/weui.wxss&#39;;
 
.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(&#39;../../utils/area.js&#39;);
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 및 weui.wxss 소스 코드를 얻는 방법을 확인할 수 있습니다. 아래에는 별로 설명하지 않습니다.

관련 추천:

WeChat 미니 프로그램 몰 개발은 WeChat 인증을 사용하고 개인 센터의 페이지 코드를 구현합니다#🎜 🎜 #

위챗 미니 프로그램 몰 개발 장바구니에 상품을 담는 기능 구현(코드)

위챗 미니 프로그램 몰 개발 https 프레임워크로 상단, 하단 네비게이션 구축 및 구현

위 내용은 사용자 배송주소 관리 페이지를 구현하기 위한 위챗 미니 프로그램 몰 개발 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
微信小程序
원천：php.cn
이전 기사：WeChat 미니 프로그램 몰 개발은 WeChat 인증을 사용하고 개인 센터의 페이지 코드를 구현합니다. 다음 기사：미니 프로그램 예: 경도와 위도를 기준으로 두 지점 사이의 거리를 계산하는 방법(코드)
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 웹 애플리케이션을 개발 중입니다. 웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 저는 semantic versioning을 사용하고 있고 이미 ...
에서 2024-04-06 19:13:16
0
2
476
npx create-react-app 명령에 오류가 있습니다. 어떻게 해결합니까? 'npxcreate-react-app' 명령을 사용하여 새 React 앱을 만들려고 했지만 제대로 작동하지 않는 것 같습니다. 최근에 이 문제를 겪은 사람이 있나...
에서 2024-04-05 14:42:18
0
1
3511
CSS를 사용하여 Next.js의 Tic-Tac-Toe 보드에서 각 줄 아래의 공간을 제거하는 방법은 무엇입니까? 각 줄 아래에 공백이 있는 이유는 무엇입니까? (CSS) 저는 제 실력을 테스트하기 위해 Next.js tic-tac-toe 앱을 만들려고 합니다. 그러나 CSS...
에서 2024-04-05 11:39:02
0
1
1431
테이블 대신 DOM을 통해 데이터를 렌더링하는 방법 만들고 있는 애플리케이션에 대해 질문이 있습니다. Oracle 데이터베이스를 사용하고 있으며 데이터베이스에서 정보를 가져와 테이블을 통해 화면에 표시하고 있는데 ...
에서 2024-04-04 18:17:27
0
1
3567
Google SHOPIFY 사용자 로그인 후 승인 과정 Google에 로그인한 후 사용자의 인증된 계정에 대한 정보를 어디에서도 찾을 수 없습니다. laravel 기반 애플리케이션이 있는데, Google에 로그인하면 ...
에서 2024-04-04 09:40:59
0
1
310
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿