|
導(dǎo)讀微信小程序，簡(jiǎn)稱(chēng)小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想，用戶掃一掃或搜一下即可打開(kāi)應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用，也是一... 微信小程序，簡(jiǎn)稱(chēng)小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想，用戶掃一掃或搜一下即可打開(kāi)應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用，也是一項(xiàng)門(mén)檻非常高的創(chuàng)新，經(jīng)過(guò)將近兩年的發(fā)展，已經(jīng)構(gòu)造了新的小程序開(kāi)發(fā)環(huán)境和開(kāi)發(fā)者生態(tài)。 本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于微信小程序商城開(kāi)發(fā)之實(shí)現(xiàn)用戶收貨地址管理頁(yè)面的代碼 ，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。看效果
開(kāi)發(fā)計(jì)劃 1、布局收貨地址列表和新增收貨地址頁(yè)面 2、實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)功能 3、使用緩存管理數(shù)據(jù) 一、收貨地址列表管理 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({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
addressList:[]
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
*/
onLoad: function (options) {
var arr = wx.getStorageSync('addressList') || [];
console.info("緩存數(shù)據(jù)：" + arr);
// 更新數(shù)據(jù)
this.setData({
addressList: arr
});
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
*/
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數(shù)據(jù)對(duì)象
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', []);
}
}
})二、新增收貨信息 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="請(qǐng)輸入收貨人真實(shí)姓名" />
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">手機(jī)號(hào)</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" name="mobile" placeholder="請(qǐng)輸入收貨人手機(jī)號(hào)" />
</view>
</view>
<view class="weui-cell weui-cell_select">
<view class="weui-cell__hd weui-cell__hd_in-select-after">
<view class="weui-label">收貨時(shí)間</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">區(qū)縣</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">詳細(xì)地址</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" name="address" placeholder="請(qǐng)輸入收貨人詳細(xì)地址" />
</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 = []; //所有省市區(qū)縣數(shù)據(jù)
var provinces = []; //省
var provinceNames = []; //省名稱(chēng)
var citys = []; //城市
var cityNames = []; //城市名稱(chēng)
var countys = []; //區(qū)縣
var countyNames = []; //區(qū)縣名稱(chēng)
var value = [0, 0, 0]; //數(shù)據(jù)位置下標(biāo)
var addressList = null;
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
transportValues: ["收貨時(shí)間不限", "周六日/節(jié)假日收貨", "周一至周五收貨"],
transportIndex: 0,
provinceIndex: 0, //省份
cityIndex: 0, //城市
countyIndex: 0, //區(qū)縣
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
*/
onLoad: function(options) {
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
*/
onShow: function() {
var that = this;
area.getAreaInfo(function(arr) {
areaInfo = arr;
//獲取省份數(shù)據(jù)
that.getProvinceData();
});
},
// 獲取省份數(shù)據(jù)
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();
},
// 獲取城市數(shù)據(jù)
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: ''
};
cityNames[0] = {
name: ''
};
}
var that = this;
that.setData({
citys: citys,
cityNames: cityNames
})
console.log('cityNames:' + cityNames);
that.getCountyInfo(count, 0);
},
// 獲取區(qū)縣數(shù)據(jù)
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: ''
};
countyNames[0] = {
name: ''
};
}
console.log('countyNames:' + countyNames);
var that = this;
// value = [column0, column1, 0];
that.setData({
countys: countys,
countyNames: countyNames,
// value: value,
})
},
bindTransportDayChange: function(e) {
console.log('picker country 發(fā)生選擇改變，攜帶值為', e.detail.value);
this.setData({
transportIndex: e.detail.value
})
},
bindProvinceNameChange: function(e) {
var that = this;
console.log('picker province 發(fā)生選擇改變，攜帶值為', e.detail.value);
var val = e.detail.value
that.getCityArr(val); //獲取地級(jí)市數(shù)據(jù)
that.getCountyInfo(val, 0); //獲取區(qū)縣數(shù)據(jù)
value = [val, 0, 0];
this.setData({
provinceIndex: e.detail.value,
cityIndex: 0,
countyIndex: 0,
value: value
})
},
bindCityNameChange: function(e) {
var that = this;
console.log('picker city 發(fā)生選擇改變，攜帶值為', e.detail.value);
var val = e.detail.value
that.getCountyInfo(value[0], val); //獲取區(qū)縣數(shù)據(jù)
value = [value[0], val, 0];
this.setData({
cityIndex: e.detail.value,
countyIndex: 0,
value: value
})
},
bindCountyNameChange: function(e) {
var that = this;
console.log('picker county 發(fā)生選擇改變，攜帶值為', 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('addressList') || [];
console.log("arr,{}", arr);
addressList = {
consignee: consignee,
mobile: mobile,
address: provinceName + cityName + countyName+address,
transportDay: transportDay
}
arr.push(addressList);
wx.setStorageSync('addressList', arr);
wx.navigateBack({
})
}
})area.js和weui.wxss 可以看下方源碼獲取方式，這里就不多做解釋。 相關(guān)推薦： 微信小程序商城開(kāi)發(fā)之用微信授權(quán)并實(shí)現(xiàn)個(gè)人中心的頁(yè)面代碼 微信小程序商城開(kāi)發(fā)之實(shí)現(xiàn)商品加入購(gòu)物車(chē)的功能（代碼） 微信小程序商城開(kāi)發(fā)之https框架的搭建以及頂部和底部導(dǎo)航的實(shí)現(xiàn) 以上就是微信小程序商城開(kāi)發(fā)之實(shí)現(xiàn)用戶收貨地址管理頁(yè)面的代碼的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！ 小程序是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想，用戶掃一掃或者搜一下即可打開(kāi)應(yīng)用。 |
溫馨提示：喜歡本站的話，請(qǐng)收藏一下本站！
本站發(fā)布的Win7純凈版系統(tǒng)、Win10純凈版和XP純凈版系統(tǒng)僅為個(gè)人學(xué)習(xí)測(cè)試使用，請(qǐng)?jiān)谙螺d后24小時(shí)內(nèi)刪除，不得用于任何商業(yè)用途，否則后果自負(fù)，請(qǐng)支持購(gòu)買(mǎi)微軟正版軟件！
本站所有資源全部來(lái)自于網(wǎng)絡(luò)資源,如侵犯到您的權(quán)益,請(qǐng)及時(shí)通知我們(peng896066052@126.com),我們會(huì)及時(shí)處理.
Copyright © 2018-2020 雨林木風(fēng)下載站
