一、购物车分析
- 其中有许多需要完成的功能:例如:添加收货地址、选择与全选、商品数量的增加与减少、结算按钮
二、获取收货地址
- 收货地址页面结构:没有获取地址时显示按钮,获取地址后显示地址:
<view class="revice_address_row">
<view class="address_btn" wx:if="{{!address.userName}}">
<button bindtap="handleChooseAddress" type="primary" plain>获取收货地址</button>
</view>
<view wx:else class="user_info_row">
<view class="user_info">
<view>
{{address.userName}}
</view>
<view>
{{address.all}}
</view>
</view>
<view class="user_phone">
{{address.telNumber}}
</view>
</view>
</view>
.revice_address_row {
.address_btn {
padding: 20rpx;
button {
width: 60%;
}
}
.user_info_row {
display: flex;
padding: 20rpx;
.user_info {
flex: 5;
}
.user_phone {
flex: 3;
text-align: right;
}
}
}
handleChooseAddress() {
wx.chooseAddress({
success: (result) => {
result.all = result.provinceName + result.cityName + result.countyName + result.detailInfo
wx.setStorageSync("address", result);
}
});
}
三、静态样式
- 商品在购物车中展示的静态结构:当没有商品时,展示一张购物车为空图片。
<view class="cart_content">
<view class="cart_title">购物车</view>
<view class="cart_main">
<block wx:if="{{cart.length !== 0}}">
<view class="cart_item"
wx:for="{{cart}}"
wx:key="goods_id">
<view class="cart_chk_wrap">
<checkbox-group data-id="{{item.goods_id}}" bindchange="handleItemChange">
<checkbox checked="{{item.checked}}"></checkbox>
</checkbox-group>
</view>
<navigator class="cart_img_wrap">
<image src="{{item.goods_small_logo}}" mode="widthFix"/>
</navigator>
<view class="cart_info_wrap">
<view class="goods_name">{{item.goods_name}}</view>
<view class="goods_price_wrap">
<view class="goods_price">¥{{item.goods_price}}</view>
<view class="cart_num_tool">
<view bindtap="handleItemNumEdit" data-id="{{item.goods_id}}" data-operation="{{-1}}" class="num_edit">-</view>
<view class="goods_num">{{item.num}}</view>
<view bindtap="handleItemNumEdit" data-id="{{item.goods_id}}" data-operation="{{1}}" class="num_edit">+</view>
</view>
</view>
</view>
</view>
</block>
<block wx:else>
<image mode="widthFix" src="http://hbimg.b0.upaiyun.com/e1b1467beea0a9c7d6a56b32bac6d7e5dcd914f7c3e6-YTwUd6_fw658" ></image>
</block>
</view>
</view>
.cart_content {
.cart_title {
padding: 20rpx;
font-size: 36rpx;
color: var(--themeColor);
border-top: 1rpx solid currentColor;
border-bottom: 1rpx solid currentColor;
}
.cart_main {
.cart_item {
display: flex;
padding: 10rpx;
border-bottom: 1rpx solid #ccc;
.cart_chk_wrap {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
checkbox-group {
checkbox {
}
}
}
.cart_img_wrap {
flex: 2;
display: flex;
justify-content: center;
align-items: center;
image {
width: 80%;
}
}
.cart_info_wrap {
flex: 4;
display: flex;
flex-direction: column;
justify-content: space-around;
.goods_name {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
color: #666;
}
.goods_price_wrap {
display: flex;
justify-content: space-between;
.goods_price {
color: var(--themeColor);
font-size: 34rpx;
}
.cart_num_tool {
display: flex;
.num_edit {
width: 55rpx;
height: 55rpx;
display: flex;
justify-content: center;
align-items: center;
border: 1rpx solid #ccc;
}
.goods_num {
width: 55rpx;
height: 55rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
}
}
}
四、底部工具栏
<view class="footer_tool">
<view class="all_chk_wrap">
<checkbox-group bindchange="handleItemAllChecked">
<checkbox checked="{{allChecked}}">全选</checkbox>
</checkbox-group>
</view>
<view class="total_price_wrap">
<view class="total_price">
合计: <text class="total_price_text">¥{{totalPrice}}</text>
</view>
<view>包含运费</view>
</view>
<view class="order_pay_wrap" bindtap="handlePay">
结算({{totalNum}})
</view>
</view>
.footer_tool {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 90rpx;
background-color: #fff;
display: flex;
border-top: 1rpx solid #ccc;
.all_chk_wrap {
flex: 2;
display: flex;
justify-content: center;
align-items: center;
checkbox-group {
checkbox {
}
}
}
.total_price_wrap {
flex: 5;
padding-right: 15rpx;
text-align: right;
.total_price {
.total_price_text {
color: var(--themeColor);
font-size: 34rpx;
font-weight: 600;
}
}
}
.order_pay_wrap {
flex: 3;
background-color: var(--themeColor);
color: #fff;
font-weight: 600;
display: flex;
justify-content: center;
align-items: center;
}
}
五、总价格和总数量
handleItemNumEdit(e) {
const { operation, id } = e.currentTarget.dataset;
let { cart } = this.data;
const index = cart.findIndex(v => v.goods_id === id);
if (cart[index].num === 1 && operation === -1) {
wx.showModal({
title: '提示',
content: '您是否要删除该商品?',
success: (res) => {
if (res.confirm) {
cart.splice(index, 1);
this.setCart(cart);
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
} else {
cart[index].num += operation;
this.setCart(cart);
}
}
setCart(cart) {
let allChecked = true;
let totalPrice = 0;
let totalNum = 0;
cart.forEach(v => {
if (v.checked) {
totalPrice += v.num * v.goods_price;
totalNum += v.num;
} else {
allChecked = false;
}
});
allChecked = cart.length != 0 ? allChecked : false;
this.setData({
cart,
totalPrice,
totalNum,
allChecked
});
wx.setStorageSync("cart", cart);
}
六、商品选中
handleItemChange(e) {
const goods_id = e.currentTarget.dataset.id;
let { cart } = this.data;
let index = cart.findIndex(v => v.goods_id === goods_id);
cart[index].checked = !cart[index].checked;
this.setCart(cart);
}
七、全选-反选
handleItemAllChecked() {
let { cart, allChecked } = this.data;
allChecked = !allChecked;
cart.forEach(v => v.checked = allChecked);
this.setCart(cart);
}
八、结算按钮功能
handlePay() {
const { address, totalNum } = this.data;
if (!address.userName) {
wx.showToast({
title: '您还没有选择收货地址',
icon: 'none',
mask: false,
success: (result) => {
},
fail: () => {},
complete: () => {}
});
return;
}
if (totalNum === 0) {
wx.showToast({
title: '您还没有选购商品',
icon: 'none',
image: '',
duration: 1500,
mask: false,
success: (result) => {
},
fail: () => {},
complete: () => {}
});
return;
}
wx.navigateTo({
url: '/pages/pay/index',
});
}