查手表价格的网站,现在的网站怎样做推广,网站开发项目的里程碑,wordpress 前端目录 一、商品列表区域1、渲染购物车商品列表的标题区域2、渲染商品列表区域的基本结构3、为my-goods组件封装radio勾选状态4、为my-goods组件封装radio-change事件5、修改购物车中商品的选择状态6、为my-goods组件封装NumberBox7、为my-goods封装num-change事件8、修改购物车商… 目录 一、商品列表区域1、渲染购物车商品列表的标题区域2、渲染商品列表区域的基本结构3、为my-goods组件封装radio勾选状态4、为my-goods组件封装radio-change事件5、修改购物车中商品的选择状态6、为my-goods组件封装NumberBox7、为my-goods封装num-change事件8、修改购物车商品数量9、渲染滑动删除的UI效果10、实现滑动删除的功能 二、收货地址区域1、渲染收货地址组件2、实现收货地址区域的按需展示3、实现选择收货地址的功能4、将address信息存储到vuex中5、将store中的address持久化存储到本地6、将addstr抽离为getters7、重新选择收货地址 三、结算区域1、渲染结算组件2、动态渲染已勾选商品的总数量3、动态渲染全选按钮的选中状态4、实现商品的全选/反选功能5、动态渲染已勾选商品的总价格6、动态计算购物车徽标的数值7、渲染购物车为空的页面 一、商品列表区域
本章主要完成pages下的cart购物页面编写
1、渲染购物车商品列表的标题区域
定义如下UI结构
templateview!-- 商品列表的标题区域 --view classcart-title!-- 左侧的图标 --uni-icons typeshop size18/uni-icons!-- 右侧的文本 --text classcart-title-text购物车/text/view/view
/template美化样式
style langscss.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;}}
/style2、渲染商品列表区域的基本结构
通过 mapState 辅助函数将Store中的cart数组映射到当前页面中使用 在UI结构中通过v-for渲染自定义组件my-goods 3、为my-goods组件封装radio勾选状态
打开my-goods.vue组件为商品左侧图片区域添加radio足迹 并美化UI 使radio组件和image组件左右布局 使用v-if控制radio组件的按需展示 修改cart.vue中的商品列表区域给showRadio赋值true展示勾选框 动态绑定勾选框的选择值
购物车页面有勾选 而商品列表页面就没有了
4、为my-goods组件封装radio-change事件 5、修改购物车中商品的选择状态 导入mapMutations这个辅助函数从而将需要的mutations方法映射到当前页面中
每次点击勾选状态就能随时跟新并且重新编译保存上次的状态实现持久化 6、为my-goods组件封装NumberBox
修改my-goods.vue组件的源代码在goods-info-box的view组件内部渲染Numberbox组件的基本内容并绑定商品数量 美化样式 .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绑定是否显示 默认为false不显示 在cart页面将shownum值赋值true展示num框 商品列表页面就没有数字选择框
7、为my-goods封装num-change事件 最后在my-goods.vue组件的methods节点中定义numChangeHandler事件处理函数 8、修改购物车商品数量 现在通过numbox修改商品数量刷新页面后同样持久化存储
9、渲染滑动删除的UI效果 10、实现滑动删除的功能 我们把没有图片展示的商品都删除这是之前我自己写的一个小bug在goods-detail页面中加入购物车功能持久化保存商品中的goods_small_logo拼写错了之前写的samll所以添加的商品都没图片 现在展示删除功能
二、收货地址区域
右键components新建我们的收货地址组件 1、渲染收货地址组件
定义基本UI结构
templateview!-- 选择收货地址的盒子 --view classaddress-choose-boxbutton typeprimary sizemini classbtnChooseAddress请选择收货地址/button/view!-- 渲染收货信息的盒子 --view classaddress-info-boxview classrow1view classrow1-leftview classusername收货人 kirito/view/viewview classrow1-rightview classphone电话1586xxxxxx/viewuni-icons typearrowright size16/uni-icons/view/viewview classrow2view classrow2-left收货地址 /viewview classrow2-rightXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/view/view/view!-- 底部的边框线 --image src/static/gouwuchehenjiemian.png classaddress-border/image/view
/template美化
style langscss.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、实现收货地址区域的按需展示 address为空时只展示一个选择收货地址
3、实现选择收货地址的功能 在manifest.json中赋予权限才能调用chooseaddress的api接口
因为新版接口不用解构的问题我们可以把上面的chooseAddress方法改一下 数据在UI结构中回显
页面调试选择收货地址 确定之后成功展示回显数据
4、将address信息存储到vuex中 export default {// 开启命名空间namespaced: true,//数据state: () ({address: {}}),//方法mutation: {// 更新收货地址updateAddress(state, address) {state.address address}},getters: {}
}选择完地址后我们重新编译程序也能看到地址信息。
5、将store中的address持久化存储到本地
修改store/user.js
export default {// 开启命名空间namespaced: true,//数据state: () ({address: JSON.parse(uni.getStorageSync(address) || {})}),//方法mutations: {// 更新收货地址updateAddress(state, address) {state.address addressthis.commit(m_user/saveAddressToStorage)},// 持久化存储addresssaveAddressToStorage(state) {uni.setStorageSync(address, JSON.stringify(state.address))}},getters: {}
}重新编译 一样有效果
6、将addstr抽离为getters
为了提高代码的复用性可以把收货地址的详细地址抽离为getters方便在多个页面和组件之间实现复用 7、重新选择收货地址 三、结算区域
创建结算组件 在cart页面调用结算组件
1、渲染结算组件
结算组件的UI结构
templateview classmy-settle-container!-- 全选 --label classradioradio color#C00000 :checkedtrue /text全选/text/label!-- 合计 --view classamount-box合计text classamount/text/view!-- 结算按钮 --view classbtn-settle结算0/view/view
/template美化样式
style langscss.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;}}
/style2、动态渲染已勾选商品的总数量 3、动态渲染全选按钮的选中状态 为不全选时下面全选按钮没有选中 4、实现商品的全选/反选功能 点灭全选按钮上面全部的选择都取消了点击单个选择下面也会选中
5、动态渲染已勾选商品的总价格 6、动态计算购物车徽标的数值 加两件商品时徽标成功增加 7、渲染购物车为空的页面 美化页面 .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;}}删除所有商品后页面返回
