一、商品列表區(qū)域
本章主要完成pages下的cart購物頁面編寫
1、渲染購物車商品列表的標(biāo)題區(qū)域
定義如下UI結(jié)構(gòu)
<template>
<view>
<!-- 商品列表的標(biāo)題區(qū)域 -->
<view class="cart-title">
<!-- 左側(cè)的圖標(biāo) -->
<uni-icons type="shop" size="18"></uni-icons>
<!-- 右側(cè)的文本 -->
<text class="cart-title-text">購物車</text>
</view>
</view>
</template>
美化樣式
<style lang="scss">
.cart-title {
height: 40px;
display: flex;
align-items: center;
padding-left: 5px;
border-bottom: 1px solid #EFEFEF;
.cart-title-text {
font-size: 14px;
margin-left: 10px;
}
}
</style>
2、渲染商品列表區(qū)域的基本結(jié)構(gòu)
通過 mapState 輔助函數(shù)，將Store中的cart數(shù)組映射到當(dāng)前頁面中使用：
在UI結(jié)構(gòu)中，通過v-for渲染自定義組件my-goods
3、為my-goods組件封裝radio勾選狀態(tài)
打開my-goods.vue組件，為商品左側(cè)圖片區(qū)域添加radio足跡
并美化UI ，使radio組件和image組件左右布局
使用v-if控制radio組件的按需展示
修改cart.vue中的商品列表區(qū)域，給showRadio賦值true展示勾選框
動態(tài)綁定勾選框的選擇值
購物車頁面有勾選
而商品列表頁面就沒有了
4、為my-goods組件封裝radio-change事件
5、修改購物車中商品的選擇狀態(tài)
導(dǎo)入mapMutations這個輔助函數(shù)，從而將需要的mutations方法映射到當(dāng)前頁面中
每次點擊勾選狀態(tài)就能隨時跟新，并且重新編譯，保存上次的狀態(tài)實現(xiàn)持久化
6、為my-goods組件封裝NumberBox
修改my-goods.vue組件的源代碼，在goods-info-box的view組件內(nèi)部渲染Numberbox組件的基本內(nèi)容，并綁定商品數(shù)量
美化樣式
.goods-item-right{
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
.goods-name{
font-size: 13px;
}
.goods-info-box{
display: flex;
justify-content: space-between;
align-items: center;
.goods-price{
color: #C00000;
font-size: 16px;
}
}
}
控制numberbox的按需展示
my-goods頁面用v-if綁定是否顯示 默認(rèn)為false不顯示
在cart頁面將shownum值賦值true展示num框
商品列表頁面就沒有數(shù)字選擇框
7、為my-goods封裝num-change事件
最后在my-goods.vue組件的methods節(jié)點中，定義numChangeHandler事件處理函數(shù)：
8、修改購物車商品數(shù)量
現(xiàn)在通過numbox修改商品數(shù)量，刷新頁面后同樣持久化存儲
9、渲染滑動刪除的UI效果
10、實現(xiàn)滑動刪除的功能
我們把沒有圖片展示的商品都刪除（這是之前我自己寫的一個小bug，在goods-detail頁面中，加入購物車功能持久化保存商品中的goods_small_logo拼寫錯了，之前寫的samll所以添加的商品都沒圖片）
現(xiàn)在展示刪除功能
二、收貨地址區(qū)域
右鍵components，新建我們的收貨地址組件
1、渲染收貨地址組件
定義基本UI結(jié)構(gòu)
<template>
<view>
<!-- 選擇收貨地址的盒子 -->
<view class="address-choose-box">
<button type="primary" size="mini" class="btnChooseAddress">請選擇收貨地址</button>
</view>
<!-- 渲染收貨信息的盒子 -->
<view class="address-info-box">
<view class="row1">
<view class="row1-left">
<view class="username">收貨人： kirito</view>
</view>
<view class="row1-right">
<view class="phone">電話：1586xxxxxx</view>
<uni-icons type="arrowright" size="16"></uni-icons>
</view>
</view>
<view class="row2">
<view class="row2-left">收貨地址： </view>
<view class="row2-right">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</view>
</view>
</view>
<!-- 底部的邊框線 -->
<image src="/static/gouwuchehenjiemian.png" class="address-border"></image>
</view>
</template>
美化
<style lang="scss">
.address-border {
display: block;
width: 100%;
height: 5px;
}
.address-choose-box {
height: 90px;
display: flex;
justify-content: center;
align-items: center;
}
.address-info-box {
font-size: 12px;
height: 90px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 5px;
.row1 {
display: flex;
justify-content: space-between;
.row1-left {
.username {
}
}
.row1-right {
display: flex;
justify-content: space-between;
.phone {
}
}
}
.row2 {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
.row2-left {
white-space: nowrap;
}
.row2-right {
}
}
}
</style>
在cart購物車頁面，引用收貨地址組件
2、實現(xiàn)收貨地址區(qū)域的按需展示
address為空時，只展示一個選擇收貨地址
3、實現(xiàn)選擇收貨地址的功能
在manifest.json中賦予權(quán)限，才能調(diào)用chooseaddress的api接口
因為新版接口不用解構(gòu)的問題，我們可以把上面的chooseAddress方法改一下
數(shù)據(jù)在UI結(jié)構(gòu)中回顯
頁面調(diào)試：選擇收貨地址
確定之后成功展示回顯數(shù)據(jù)
4、將address信息存儲到vuex中
export default {
// 開啟命名空間
namespaced: true,
//數(shù)據(jù)
state: () => ({
address: {}
}),
//方法
mutation: {
// 更新收貨地址
updateAddress(state, address) {
state.address = address
}
},
getters: {
}
}
選擇完地址后，我們重新編譯程序，也能看到地址信息。
5、將store中的address持久化存儲到本地
修改store/user.js：
export default {
// 開啟命名空間
namespaced: true,
//數(shù)據(jù)
state: () => ({
address: JSON.parse(uni.getStorageSync('address') || '{}')
}),
//方法
mutations: {
// 更新收貨地址
updateAddress(state, address) {
state.address = address
this.commit('m_user/saveAddressToStorage')
},
// 持久化存儲address
saveAddressToStorage(state) {
uni.setStorageSync('address', JSON.stringify(state.address))
}
},
getters: {
}
}
重新編譯 一樣有效果
6、將addstr抽離為getters
為了提高代碼的復(fù)用性，可以把收貨地址的詳細(xì)地址抽離為getters，方便在多個頁面和組件之間實現(xiàn)復(fù)用
7、重新選擇收貨地址
三、結(jié)算區(qū)域
創(chuàng)建結(jié)算組件
在cart頁面調(diào)用結(jié)算組件
1、渲染結(jié)算組件
結(jié)算組件的UI結(jié)構(gòu)：
<template>
<view class="my-settle-container">
<!-- 全選 -->
<label class="radio">
<radio color="#C00000" :checked="true" /><text>全選</text>
</label>
<!-- 合計 -->
<view class="amount-box">
合計：<text class="amount"></text>
</view>
<!-- 結(jié)算按鈕 -->
<view class="btn-settle">結(jié)算（0）</view>
</view>
</template>
美化樣式：
<style lang="scss">
.my-settle-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background-color: white;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
padding-left: 5px;
.radio {
display: flex;
align-items: center;
}
.amount-box {
.amount {
color: #C00000;
font-weight: bold;
}
}
.btn-settle {
background-color: #C00000;
height: 50px;
color: white;
line-height: 50px;
padding:0 10px;
text-align: center;
}
}
</style>
2、動態(tài)渲染已勾選商品的總數(shù)量
3、動態(tài)渲染全選按鈕的選中狀態(tài)
為不全選時，下面全選按鈕沒有選中
4、實現(xiàn)商品的全選/反選功能
點滅全選按鈕，上面全部的選擇都取消了，點擊單個選擇，下面也會選中
5、動態(tài)渲染已勾選商品的總價格
6、動態(tài)計算購物車徽標(biāo)的數(shù)值
加兩件商品時，徽標(biāo)成功增加
7、渲染購物車為空的頁面
美化頁面文章來源：http://www.zghlxwxcb.cn/news/detail-816614.html
.cart-container {
padding-bottom: 50px;
}
.cart-title {
height: 40px;
display: flex;
align-items: center;
padding-left: 5px;
border-bottom: 1px solid #EFEFEF;
.cart-title-text {
font-size: 14px;
margin-left: 10px;
}
}
.empty-cart {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 150px;
.empty-img {
width: 90px;
height: 90px;
}
.tip-text {
font-size: 12px;
color: gray;
margin-top: 15px;
}
}
刪除所有商品后，頁面返回
文章來源地址http://www.zghlxwxcb.cn/news/detail-816614.html
到了這里，關(guān)于商城小程序（8.購物車頁面）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
