Uniapp笔记（四）uniapp语法3
一、商品详情
1、从商品列表页跳转到商品详情页
-
在商品列表的项中绑定单击事件，并传递商品id值
-
在methods选项中定义goGoodsDetail方法实现跳转到商品详情页
goGoodsDetail(goods_id){
uni.navigateTo({
url:`/pages/goodsdetail/index?goods_id=${goods_id}`
})
}2、获取商品详情数据
-
在data中定义商品详情的数据
data() {
return {
goods_item:{}
}
}-
在
onLoad中获取商品的 Id，并调用请求商品详情的方法
onLoad(options) {
let gid=options.goods_id
this.getGoodsById(gid)
}-
在
methods中声明getGoodsById方法：
methods: {
async getGoodsById(goods_id){
let result=await uni.$api.get('/goods/detail',{goods_id:goods_id})
this.goods_item=result.data.message
}
},3、渲染商品轮播图区域
-
渲染轮播图区域
-
完成轮播图预览功能
为轮播图中的 image 图片绑定 click 事件处理函数：
在 methods 中定义 preview 事件处理函数：
perview(index){
uni.previewImage({
current:index,
urls:this.goods_item.pics.map(item=>item.pics_big)
})
}4、渲染商品信息区域
￥{{goods_item.goods_price}}
{{goods_item.goods_name}}
收藏
快递：免运费
5、渲染详情页底部的商品导航区域
在 data 中，通过 options 和 buttonGroup 两个数组，来声明商品导航组件的按钮配置对象
data(){
return{
options: [{
icon: 'shop',
text: '店铺'
}, {
icon: 'cart',
text: '购物车',
info: 2
}],
// 右侧按钮组的配置对象
buttonGroup: [{
text: '加入购物车',
backgroundColor: '#ff0000',
color: '#fff'
},
{
text: '立即购买',
backgroundColor: '#ffa200',
color: '#fff'
}
]
}
}在页面中使用 uni-goods-nav 商品导航组件：
美化商品导航组件，使之固定在页面最底部：
.container{
padding-bottom: 100rpx;
}
.goods_nav {
// 为商品导航组件添加固定定位
position: fixed;
bottom: 0;
left: 0;
}二、加入购物车
1、下载vuex
npm i [email protected]2、配置Vuex
-
在src下创建store文件夹，在store文件夹下创建index.js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store=new Vuex.Store({
modules:{}
})
export default store-
在main.js将store对象挂载到Vue的实例上
import store from '@/store/index.js'
const app = new Vue({
...App,
store
})
app.$mount()3、创建购物车模块
-
在store/modules目录下创建shopcart.js文件
export default{
namespaced:true,
state:{
shopcartList:[]
},
mutations:{
},
getters:{
}
}-
在
store/index.js模块中，导入并挂载购物车的 vuex 模块
import Vue from 'vue'
import Vuex from 'vuex'
import shopart from '@/store/modules/shopcart.js'
Vue.use(Vuex)
const store=new Vuex.Store({
modules:{
shopart
}
})
export default store4、在商品详情中使用store中的数据
import {createNamespacedHelpers} from 'vuex'
const {mapState:mapShopcartState}=createNamespacedHelpers('shopart')
export default {
computed:{
...mapShopcartState(['shopcartList'])
}
}5、实现加入购物车的功能
-
编写一个加入购物车的方法的mutations方法addToShopcart方法
export default{
namespaced:true,
state:{
shopcartList:[]
},
mutations:{
addToShopart(state,goods){
const result=state.shopcartList.find(item=>item.goods_id==goods.goods_id)
if(!result){
state.shopcartList.push(goods)
}else{
goods.goods_count++
}
}
},
getters:{
}
}-
在商品详情页面中，通过
mapMutations这个辅助方法，把 vuex 中shopcart模块下的addToShopart方法映射到当前页面：
import {createNamespacedHelpers} from 'vuex'
const {mapState:mapShopcartState,mapMutations:mapShopcartMutations}=createNamespacedHelpers('shopart')
export default{
methods:{
...mapShopcartMutations(['addToShopart']),
}
}-
为商品导航组件
uni-goods-nav绑定@buttonClick="buttonClick"事件处理函数：
buttonClick(e){
if(e.content.text=='加入购物车'){
const goods = {
goods_id: this.goods_item.goods_id,
goods_name: this.goods_item.goods_name,
goods_price: this.goods_item.goods_price,
goods_count: 1,
goods_small_logo: this.goods_item.goods_small_logo,
goods_state: true
}
this.addToShopart(goods)
}
}6、动态统计购物车中商品的总数量
在 getters 节点下定义一个 total 方法，用来统计购物车中商品的总数量：
getters:{
total(state){
return state.shopcartList.reduce((prev,cur)=>prev+cur.goods_count,0)
}
}-
导入
mapGetters方法并进行使用
import {createNamespacedHelpers} from 'vuex'
const {mapGetters:mapShopcartGetters}=createNamespacedHelpers('shopart')
export default{
computed:{
...mapShopcartGetters(['total'])
},
}-
通过
watch侦听器，监听计算属性total值的变化，从而动态为购物车按钮的徽标赋值
watch:{
total:{
handler(newval){
let result=this.options.find(item=>item.text==="购物车")
if(result){
result.info=newval
}
},
immediate:true
}
},7、持久化购物车中的商品
修改 mutations 节点中的 addToCart 方法，在处理完商品信息后，调用 saveToStorage 方法：
mutations:{
addToShopart(state,goods){
const result=state.shopcartList.find(item=>item.goods_id==goods.goods_id)
if(!result){
state.shopcartList.push(goods)
}else{
goods.goods_count++
}
uni.setStorageSync('cart',JSON.stringify(state.shopcartList))
},
},修改 shopcart.js 模块中的 state 函数，读取本地存储的购物车数据，对 shopcartList 数组进行初始化
state:{
shopcartList:JSON.parse(uni.getStorageSync('cart')||'[]')
}三、购物车列表
1、购物车列表
{{goods.goods_name}}
￥{{goods.goods_price}}
2、修改购物车商品的勾选状态
-
给shopcart.js模块中的mutations选项中添加修改购物车状态的方法
mutations:{
updateShopcartState(state,goods){
const result=state.shopcartList.find(item=>item.goods_id==goods.goods_id)
if(result){
result.goods_state=!goods.goods_state
}
uni.setStorageSync('cart',JSON.stringify(state.shopcartList))
}
},-
在购物车列表页面中进行访问
methods: {
...mapShopcartMutations(['updateShopcartState']),
radioChange(goods){
this.updateShopcartState(goods)
}
},3、修改购物车商品数量的方法
给shopcart.js模块中的mutations选项中添加修改s购物车数量的方法的方法
mutations:{
updateShopcartNum(state,goods){
const result=state.shopcartList.find(item=>item.goods_id==goods.goods_id)
if(result){
result.goods_count=goods.goods_count
}
uni.setStorageSync('cart',JSON.stringify(state.shopcartList))
}
},
-
在uni-number-box绑定change事件
-
在购物车列表页面中进行访问
methods: {
...mapShopcartMutations(['updateShopcartState','updateShopcartNum']),
radioChange(goods){
this.updateShopcartState(goods)
},
numChange(e,val){
this.updateShopcartNum({goods_id:val.goods_id,goods_count:e})
}
},