Uniapp笔记（四）uniapp语法3

一、商品详情

1、从商品列表页跳转到商品详情页

在商品列表的项中绑定单击事件，并传递商品id值

javascript 复制代码

<view class="goods-item" v-for="(item,index) in goodsList" :key="index" @click="goGoodsDetail(item.goods_id)">
</view>

在methods选项中定义goGoodsDetail方法实现跳转到商品详情页

javascript 复制代码

goGoodsDetail(goods_id){
    uni.navigateTo({
        url:`/pages/goodsdetail/index?goods_id=${goods_id}`
    })
}

2、获取商品详情数据

在data中定义商品详情的数据

javascript 复制代码

data() {
    return {
        goods_item:{}
    }
}

在 onLoad 中获取商品的 Id，并调用请求商品详情的方法

javascript 复制代码

onLoad(options) {
    let gid=options.goods_id
    this.getGoodsById(gid)
}

在 methods 中声明 getGoodsById 方法：

javascript 复制代码

methods: {
    async getGoodsById(goods_id){
        let result=await uni.$api.get('/goods/detail',{goods_id:goods_id})
        this.goods_item=result.data.message
    }
},

3、渲染商品轮播图区域

渲染轮播图区域

javascript 复制代码

<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper">
    <swiper-item v-for="(item,index) in goods_item.pics" :key="index">
        <image :src="item.pics_big"></image>
    </swiper-item>
</swiper>
<style lang="scss">
    .swiper{
        height: 750rpx;
        image{
            width: 100%;
            height: 100%;
        }
    }
</style>

完成轮播图预览功能

为轮播图中的 image 图片绑定 click 事件处理函数：

javascript 复制代码

<swiper-item v-for="(item,index) in goods_item.pics" :key="index">
    <image :src="item.pics_big" @click="perview(index)"></image>
</swiper-item>

在 methods 中定义 preview 事件处理函数：

javascript 复制代码

perview(index){
	uni.previewImage({
		current:index,
		urls:this.goods_item.pics.map(item=>item.pics_big)
	})
}

4、渲染商品信息区域

javascript 复制代码

<view class="goods-info-box">
	<!-- 商品价格 -->
	<view class="price">￥{{goods_item.goods_price}}</view>
	<!-- 信息主体区域 -->
	<view class="goods-info-body">
         <!-- 商品名称 -->
        <view class="goods-name">{{goods_item.goods_name}}</view>
        <!-- 收藏 -->
         <view class="favi">
            <uni-icons type="star" size="18" color="gray"></uni-icons>
            <text>收藏</text>
        </view>
    </view>
    <!-- 运费 -->
    <view class="yf">快递：免运费</view>
</view>
<rich-text :nodes="goods_item.goods_introduce"></rich-text>
.goods-info-box {
	  padding: 10px;
	  padding-right: 0;
	
	  .price {
	    color: #c00000;
	    font-size: 18px;
	    margin: 10px 0;
	  }
	
	  .goods-info-body {
	    display: flex;
	    justify-content: space-between;
	
	    .goods-name {
	      font-size: 13px;
	      padding-right: 10px;
	    }
	    // 收藏区域
	    .favi {
	      width: 120px;
	      font-size: 12px;
	      display: flex;
	      flex-direction: column;
	      justify-content: center;
	      align-items: center;
	      border-left: 1px solid #efefef;
	      color: gray;
	    }
	  }
	
	  // 运费
	  .yf {
	    margin: 10px 0;
	    font-size: 12px;
	    color: gray;
	  }
	}

5、渲染详情页底部的商品导航区域

在 data 中，通过 options 和 buttonGroup 两个数组，来声明商品导航组件的按钮配置对象

javascript 复制代码

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 商品导航组件：

javascript 复制代码

<view class="goods_nav">
	<uni-goods-nav :fill="true"  :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
</view>

美化商品导航组件，使之固定在页面最底部：

javascript 复制代码

.container{
	padding-bottom: 100rpx;
}
.goods_nav {
    // 为商品导航组件添加固定定位
	position: fixed;
	bottom: 0;
	left: 0;
}

二、加入购物车

1、下载vuex

javascript 复制代码

npm i vuex@3.6.2

2、配置Vuex

在src下创建store文件夹，在store文件夹下创建index.js文件

javascript 复制代码

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store=new Vuex.Store({
	modules:{}
})
export default store

在main.js将store对象挂载到Vue的实例上

javascript 复制代码

import store from '@/store/index.js'
const app = new Vue({
    ...App,
	store
})
app.$mount()

3、创建购物车模块

在store/modules目录下创建shopcart.js文件

javascript 复制代码

export default{
	namespaced:true,
	state:{
		shopcartList:[]
	},
	mutations:{
		
	},
	getters:{
		
	}
}

在 store/index.js 模块中，导入并挂载购物车的 vuex 模块

javascript 复制代码

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 store

4、在商品详情中使用store中的数据

javascript 复制代码

import {createNamespacedHelpers} from 'vuex'
const {mapState:mapShopcartState}=createNamespacedHelpers('shopart')
export default {
    computed:{
		...mapShopcartState(['shopcartList'])
	}
}

5、实现加入购物车的功能

编写一个加入购物车的方法的mutations方法addToShopcart方法

javascript 复制代码

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 方法映射到当前页面：

javascript 复制代码

import {createNamespacedHelpers} from 'vuex'
const {mapState:mapShopcartState,mapMutations:mapShopcartMutations}=createNamespacedHelpers('shopart')
export default{
    methods:{
       ...mapShopcartMutations(['addToShopart']),
    }
}

为商品导航组件 uni-goods-nav 绑定 @buttonClick="buttonClick" 事件处理函数：

javascript 复制代码

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 方法，用来统计购物车中商品的总数量：

javascript 复制代码

getters:{
	total(state){
		return state.shopcartList.reduce((prev,cur)=>prev+cur.goods_count,0)
	}
}

导入 mapGetters 方法并进行使用

javascript 复制代码

import {createNamespacedHelpers} from 'vuex'
const {mapGetters:mapShopcartGetters}=createNamespacedHelpers('shopart')
export default{
    computed:{
		...mapShopcartGetters(['total'])
	},
}

通过 watch 侦听器，监听计算属性 total 值的变化，从而动态为购物车按钮的徽标赋值

javascript 复制代码

watch:{
	total:{
		handler(newval){
			let result=this.options.find(item=>item.text==="购物车")
			if(result){
				result.info=newval
			}
		},
		immediate:true
	}
},

7、持久化购物车中的商品

修改 mutations 节点中的 addToCart 方法，在处理完商品信息后，调用 saveToStorage 方法：

javascript 复制代码

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 数组进行初始化

javascript 复制代码

state:{
	shopcartList:JSON.parse(uni.getStorageSync('cart')||'[]')
}

三、购物车列表

1、购物车列表

javascript 复制代码

<template>
	<view class="container">
		<view v-for="(goods,index) in shopcartList" :key="index" class="goods-item">
			<view class="goods-item-left">
				<radio checked color="#C00000"></radio>
				<image :src="goods.goods_small_logo" class="goods-pic"></image>
			</view>
			<view class="goods-item-right">
				<view class="goods-name">{{goods.goods_name}}</view>
				<!-- 商品价格 -->
				<view class="goods-price">￥{{goods.goods_price}}</view>
				<!-- 商品数量 -->
				<uni-number-box :min="1"></uni-number-box>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from 'vuex'
	const {
		mapState: mapShopcartState,
		mapMutations: mapShopcartMutations,
		mapGetters: mapShopcartGetters
	} = createNamespacedHelpers('shopart')
	export default {
		data() {
			return {

			}
		},
		methods: {

		},
		computed: {
			...mapShopcartState(['shopcartList'])
		}
	}
</script>

<style lang="scss">
	.container {
		.goods-item {
			display: flex;
			margin: 20rpx 10rpx;
			.goods-item-left {
				margin-right: 5px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.goods-pic {
					width: 100px;
					height: 100px;
					display: block;
				}
			}
			.goods-item-right {
				.goods-price{
					color: #C00000;
				}
			}

		}
	}
</style>

2、修改购物车商品的勾选状态

给shopcart.js模块中的mutations选项中添加修改购物车状态的方法

javascript 复制代码

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))
		}
},

在购物车列表页面中进行访问

javascript 复制代码

methods: {
	...mapShopcartMutations(['updateShopcartState']),
	radioChange(goods){
		this.updateShopcartState(goods)
	}
},

3、修改购物车商品数量的方法

给shopcart.js模块中的mutations选项中添加修改s购物车数量的方法的方法

javascript 复制代码

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事件

javascript 复制代码

<uni-number-box :min="1" :value="goods.goods_count" @change="numChange($event,goods)"></uni-number-box>

在购物车列表页面中进行访问

javascript 复制代码

methods: {
	...mapShopcartMutations(['updateShopcartState','updateShopcartNum']),
	radioChange(goods){
		this.updateShopcartState(goods)
	},
	numChange(e,val){
		this.updateShopcartNum({goods_id:val.goods_id,goods_count:e})
	}
},