2019年12月28日
一.首页
1.动态显示数据
image.png
同步方式获取 和存取数据
var app = getApp()
Page({
data: {
goods: []
},
onLoad: function() {
this.loadGoods();
},
loadGoods: function() {
var goods = wx.getStorageSync('goods');
var result = [];
for (var i = 0; i < goods.length; i++) {
var good = goods[i];
var type = good.type;
if (type.indexOf('milk') > -1)
{
result.push(good);
}
}
this.setData({
goods: result
});
},
addGoods: function(e) {
var goods = wx.getStorageSync('goods');
var id = e.currentTarget.id;
var good = {};
for (var i = 0; i < goods.length; i++) {
var oldGood = goods[i];
if (oldGood.id == id) {
good = oldGood;
break;
}
}
var orders = wx.getStorageSync('orders');
var addOrders = new Array();
var add = true;
for (var i = 0; i < orders.length; i++) {
var order = orders[i];
if (order.id == good.id) {
var count = order.count;
order.count = count + 1;
add = false;
}
addOrders[i] = order;
}
var len = orders.length;
if (add) {
good.count = 1;
addOrders[len] = good;
}
wx.setStorageSync('orders', addOrders);
wx.showToast({
title: '添加成功',
icon: 'success',
duration: 1000
});
}
})
二.超市
1.通用纵向导航实现
image.png
.left {
width: 25%;
font-size: 15px;
}
.left view {
text-align: center;
height: 45px;
line-height: 45px;
}
.select {
background-color: #fff;
border-left: 5px solid #ffd600;
font-weight: bold;
}
.normal {
background-color: #f8f8f8;
border-bottom: 1px solid #f2f2f2;
}
右边区域通过currentTab实现动态替换
image.png
switchNav: function(e) {
var page = this;
var id = e.target.id;
if (this.data.currentTab == id) {
return false;
} else {
page.setData({
currentTab: id
});
}
page.setData({
flag: id
});
},
三.购物车页面
image.png
主要思路，定义变量，每次点击按钮对变量重新赋值（可以在model里定义一个选中属性select，有时间修改）
Page({
data: {
orders: [],
selectedAll: true,
totalPrice: 0
},
onShow: function() {
this.loadOrders();
},
loadOrders: function() { //加载购物车商品订单信息
var orders = wx.getStorageSync('orders');
this.setData({
orders: orders
});
var totalPrice = 0;
for (var i = 0; i < orders.length; i++) {
var order = orders[i];
totalPrice += order.price * order.count;
}
this.setData({
totalPrice: totalPrice
});
},
checkboxChange: function(e) { //商品行内复选框
console.log(e);
var ids = e.detail.value;
var orders = wx.getStorageSync('orders');
if (ids.length != orders.length) {
this.setData({
selectedAll: false
});
} else {
this.setData({
selectedAll: true
});
}
var totalPrice = 0;
for (var i = 0; i < orders.length; i++) {
var order = orders[i];
for (var j = 0; j < ids.length; j++) {
if (order.id == ids[j]) {
totalPrice += order.price * order.count
}
}
}
this.setData({
totalPrice: totalPrice
});
},
checkAll: function(e) { //全选复选框
var selected = this.data.selected;
var result = selected == true ? false : true;
this.setData({
selected: result
});
if (result == false) {
this.setData({
totalPrice: 0
});
this.setData({
selectedAll: false
});
} else {
this.loadOrders();
this.setData({
selectedAll: true
});
}
},
addGoods: function(e) { //添加商品
var goods = wx.getStorageSync('goods');
var id = e.currentTarget.id;
var good = {};
for (var i = 0; i < goods.length; i++) {
var oldGood = goods[i];
if (id == oldGood.id) {
good = oldGood;
break;
}
}
console.log(good);
var orders = wx.getStorageSync('orders');
var addOrders = new Array();
var add = true;
for (var i = 0; i < orders.length; i++) {
var order = orders[i];
if (order.id == good.id) {
var count = order.count;
order.count = count + 1;
add = false;
}
addOrders[i] = order;
}
var len = orders.length;
if (add) {
good.count = 1;
addOrders[len] = good;
}
wx.setStorageSync('orders', addOrders);
this.loadOrders();
},
minusGoods: function(e) { //减少商品
var goods = wx.getStorageSync('goods');
var id = e.currentTarget.id;
var good = {};
for (var i = 0; i < goods.length; i++) {
var oldGood = goods[i];
if (id == oldGood.id) {
good = oldGood;
break;
}
}
console.log(good);
var orders = wx.getStorageSync('orders');
var addOrders = new Array();
var add = true;
for (var i = 0; i < orders.length; i++) {
var order = orders[i];
if (order.id == good.id) {
var count = order.count;
if (count >= 2) {
order.count = count - 1;
}
}
addOrders[i] = order;
}
wx.setStorageSync('orders', addOrders);
this.loadOrders();
}
})
四.新增地址界面
1.form表单提交
image.png
2.添加成功后，返回指定页面，当前页面销毁
formSubmit: function(e) {
var address = e.detail.value;
var cityNum = address.city;
var cities = this.data.cities;
address.city = cities[cityNum];
var addresses = wx.getStorageSync('addresses');
if (!addresses) {
addresses = new Array();
}
addresses.push(address);
wx.setStorageSync('addresses', addresses);
wx.redirectTo({
url: '../address/address'
})
}
3.picker实现一般类型选择功能
image.png
.item {
display: flex;
flex-direction: row;
height: 60px;
line-height: 60px;
align-items: center;
}
.name {
width: 20%;
margin-left: 10px;
font-size: 16px;
font-weight: bold;
}
.value {
width: 80%;
line-height: 60px;
margin-left: 10px;
font-size: 16px;
}
data: {
cities: [
'北京市',
'上海市',
'天津市',
'成都市',
'重庆市'
],
index: 0
},
bindPickerChange: function(e) {
this.setData({
index: e.detail.value
});
},
4.地址查询页面 这个点击要把相关参数传入下一个页面（有时间在优化）
image.png