vue前台（七）
一，在detail组件中，向子组件zoom和 imglist传递数据，属性传递，
1.父组件detail
computed: {
...mapGetters(["categoryView", "skuInfo", "spuSaleAttrList",'imgList'])
},
向子组件传递数据
<div class="previewWrap"> <!--放大镜效果--> <Zoom :imgList="skuInfo.skuImageList" /> <!-- 小图列表 --> <ImageList :imgList="skuInfo.skuImageList" /> </div>
子组件接收
props:['imgList'],
2. ，ImageList组件填充数据，底部轮播图
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(img, index) in imgList" :key="img.id"> <img :src="img.imgUrl"> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div>
3.zoom子组件填充数据，默认呈现第一张图，data中初始化一个index
data(){
return {
defaultIndex : 0
}
大图填充数据
<div class="spec-preview"> <img :src="imgList[defaultIndex].imgUrl" /> <div class="event"></div> <div class="big"> <img :src="imgList[defaultIndex].imgUrl" /> </div> <div class="mask"></div> </div>
注；此时控制台会报错， a.b.c假报错问题，
解决方式，此时需要判断imglist
computed:{
//计算它的可能值，不然出现a.b.c
defaultImg(){
if(this.imgList){
return this.imgList[this.defaultIndex]
}else{
return {}
}
}
}
再次填充数据
<div class="spec-preview"> <img :src="defaultImg.imgUrl" /> <div class="event" @mousemove="move"></div> <div class="big"> <img :src="defaultImg.imgUrl" ref="bigImg"/> </div> <div class="mask" ref="mask"></div> </div>
二，小图列表点击，切换类
1.在imageslist组件中定义初始索引，当点击轮播图的图片时，index赋值给currentIndex,类名也跟着动态展示，此时将轮播图的index传递给大图组件，轮播图展示哪张图，大图也跟着
展示哪张图
data() {
return {
currentIndex: 0
};
},
类名
.active {
border: 2px solid #f60;
padding: 1px;
}
2.点击小图，切换类
<div class="swiper-slide" v-for="(img, index) in imgList" :key="img.id"> <img :src="img.imgUrl" @click="changeIndex(index)" :class="{active:currentIndex === index}" /> </div>
回调函数，跟新索引，
methods: {
changeIndex(index) {
this.currentIndex = index;
三，点击小图，切换一样的中图
1.在imagelist中点击小图，回调中传递index，用全局事件总线传递index,传递给兄弟组件zoom
<div class="swiper-slide" v-for="(img, index) in imgList" :key="img.id"> <img :src="img.imgUrl" @click="changeIndex(index)" :class="{active:currentIndex === index}" /> </div>
点击事件回调函数，搞事件总线，$emitc触发，传递index给zoom大图组件
methods: {
changeIndex(index) {
this.currentIndex = index;
this.$bus.$emit("changeDefaultIndex", index);
}
},
在zoom组件中，监听
mounted(){
this.$bus.$on('changeDefaultIndex',this.changeDefaultIndex)
},
回调函数，跟新当前索引
methods:{
changeDefaultIndex(index){
this.defaultIndex = index
},
四，小图片的轮播图处理
1.html模板
<div class="swiper-container" ref="imglist"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(img, index) in imgList" :key="img.id"> <img :src="img.imgUrl" @click="changeIndex(index)" :class="{active:currentIndex === index}" /> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div>
2.引入swiper
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
3. 在实例化swiper
watch: {
imgList: {
handler() {
//Vue.nextTick或者vm.$nextTick是一样的功能
//在最近的一次dom更新之后执行nextTick里面传的回调函数
this.$nextTick(() => {
new Swiper(this.$refs.imglist, {
// direction: "vertical", // 垂直切换选项
// autoplay:true,//等同于以下设置
// loop: true, // 循环模式选项
// // 如果需要分页器
// pagination: {
// el: ".swiper-pagination"
// },
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
slidesPerGroup:5, //点击一下滑动一组有多少张
slidesPerView:5 //一屏显示多少张
// 如果需要滚动条
// scrollbar: {
// el: ".swiper-scrollbar"
// }
});
});
},
immediate: true //立即执行，在最近dom更新之前就会执行
}
}
五，放大镜逻辑
1.在图片中添加移动事件，获取鼠标的坐标，并且确定遮罩mask需要移动的距离,以及对应的大图移动的距离
在zoom组件中， html中
<template> <div class="spec-preview"> <img :src="defaultImg.imgUrl" /> <div class="event" @mousemove="move"></div> <div class="big"> <img :src="defaultImg.imgUrl" ref="bigImg"/> </div> <div class="mask" ref="mask"></div> </div> </template>
js代码
// 图片移动事件 move(event){ let target = event.target //拿的是事件源元素 let mouseX = event.offsetX //鼠标相对事件源本身的x位置 let mouseY = event.offsetY //鼠标相对事件源本身的y位置 let mask = this.$refs.mask let bigImg = this.$refs.bigImg //求mask 要走的位置 let maskX = mouseX - mask.offsetWidth / 2 let maskY = mouseY - mask.offsetHeight / 2 if(maskX < 0){ maskX = 0 }else if(maskX > target.clientWidth - mask.offsetWidth){ maskX = target.clientWidth - mask.offsetWidth } if(maskY < 0){ maskY = 0 }else if(maskY> target.clientHeight- mask.offsetHeight){ maskY = target.clientHeight - mask.offsetHeight } //设置mask的位置 mask.style.left = maskX + 'px' mask.style.top = maskY + 'px' //设置大图的移动位置，mask移动相反的两倍 bigImg.style.left = -2 *maskX + 'px' bigImg.style.top = -2 *maskY + 'px' }
六， 对产品的属性的方框进行选中处理
1. isChecked属性为选中的标识，‘1’为选中， ‘0’为不选中
在detail组件中
html代码
<dl v-for="(item, index) in spuSaleAttrList" :key="index"> <dt class="title">{{item.saleAttrName}}</dt> <dd changepirce="0" :class="{active:attrValue.isChecked === '1'}" v-for="(attrValue, index) in item.spuSaleAttrValueList" :key="attrValue.id" @click="changeIsCheck(item.spuSaleAttrValueList,index)" >{{attrValue.saleAttrValueName}}</dd> </dl>
2.对选中的方框排他处理
js代码
changeIsCheck(attrValueList,index){
//排它
attrValueList.forEach(item => {
item.isChecked = '0'
})
attrValueList[index].isChecked = '1'
},
七， 修改购买的数量的v-model的应用，收集数量，点击加号，减号，增减数量
<div class="controls"> <input autocomplete="off" class="itxt" v-model="skuNum"/> <a href="javascript:" class="plus" @click="skuNum++">+</a> <a href="javascript:" class="mins" @click="skuNum <= 1 ? 1 : skuNum-- ">-</a> </div>
八， 点击添加购物车时发送请求，是否添加成功
1.封装请求添加购物车的请求
//请求添加购物车 /api/cart/addToCart/{ skuId }/{ skuNum } post
export const reqAddOrUpdateShopCart = (skuId,skuNum) => Ajax.post(`/cart/addToCart/${ skuId }/${ skuNum }`)
2.配置shopcart.js的vuex
import {reqAddOrUpdateShopCart} from '@/api'
const state = {
}
const mutations = {
}
const actions = {
async addorUpdateShopCart({commit},{skuId,skuNum}){
const result = await reqAddOrUpdateShopCart(skuId,skuNum)
if(result.code === 200){
return '添加购物车成功'
}else{
// return '添加购物车失败' 返回的还是成功的promise
//返回的是失败的promise
return Promise.reject(new Error('添加购物车失败'))
}
}
}
const getters = {
}
export default {
state,
mutations,
actions,
getters
}
3.在总vuex中注册
4.在添加购物车按钮中，添加点击事件
<div class="add"> <a href="javascript:" @click="toSuccess">加入购物车</a> </div>
5， js代码，添加商品请求成功后，需要把商品存储在本地浏览器sessionStorage， 商品的数量用路由传参，然后路由组件
跳转到产品添加成功页面
async toSuccess(){
//先发请求，判定是否成功
//调用我们actions内部的异步函数（async）,这个调用的返回值一定是一个promise
try {
const result = await this.$store.dispatch('addorUpdateShopCart',{skuId:this.skuInfo.id,skuNum:this.skuNum})
alert(result)
//在添加成功跳转到添加成功页面之前，把相应的商品存储在sessionStorage当中，用来在添加成功页面去使用
//本地存储传参
sessionStorage.setItem('SKUINFO_KEY',JSON.stringify(this.skuInfo))
this.$router.push(`/addcartsuccess?skuNum=${this.skuNum}`) //如果添加购物车成功，那么就跳转到添加购物车成功的页面
//路径传参给路由组件
// this.$router.push({name:'addcartsuccess', query:{skuNum:this.skuNum,skuInfo:this.skuInfo }})
} catch (error) {
alert(error.message)
}
//成功
//失败
}
6，跳转到商品添加成功页面AddCartSuccess，填充传递过来的数据
<div class="right-info"> <p class="title">{{skuInfo.skuName}}</p> <p class="attr">颜色：WFZ5099IH/5L钛金釜内胆 数量：{{$route.query.skuNum}}</p> </div>
data(){
return {
skuInfo: JSON.parse(sessionStorage.getItem('SKUINFO_KEY')) || {}
}
},
7.路由连接到查看商品详情页
<router-link :to="`/detail/${skuInfo.id}`" class="sui-btn btn-xlarge">查看商品详情</router-link>
