<>详情页实现思路

点击商品进去详情页,根据点击请求更加详细的信息,要传过来goodsItem的iid,根据id去服务器请求更加详细的信息;配置路由映射关系,点击进行跳转,带参数传递跳转
itemClick(){ this.$router.push('/detail/'+this.goodsItem.iid) /*
this.$router.push({ path:'/detail', query:{ iid:this.goodsItem.iid } }) */ }

但是获取到的iid在更换点击商品时没有改变,并没有发生新的请求,因为发生了路由跳转,router-view由keep-alive包着,不会每次销毁并重新创建,所以不会给iid给新的值,详情页不要使用keep-alive,使用exclude属性
<keep-alive exclude="Detail"> <router-view></router-view> </keep-alive>
<>首页的位置保持不变

指定版本安装better-scroll npm install better-scroll@1.13.2 --save

用keep-alive标签把router-view标签包住,点击其他导航栏,再点击首页,自动回到顶部,不是因为创建了新的Home.vue,获取离开时滚动的位置,再次进入的时候设置保存的位置。【频繁切换还是会自动回到顶部???】

<>导航栏的封装

1.在childComps中创建组件DetailNavBar.vue,在组件中引入公共组件TabBar,替换TabBar组件中的插槽,在详情页Detail中引入封装好的导航栏DetailNavBar,
2.引入一个返回图标,绑定点击事件,点击之后会返回到之前进入的状态
3.将导航栏中的标题定义成数组titles然后遍历,进行flex布局
4.标题点击谁,谁就变成红色
** 定义一个当前索引currentIndex,动态绑定class,动态绑定点击事件 【此处是否可以直接引入tabControl组件??】

<>加入滚动的效果Scroll

1.指定版本安装better-scroll npm install better-scroll@1.13.2 --save
2.详情页的底部导航栏NavBar不用展示,可以给详情页相对布局并设置层级关系,给一个白色的背景色,详情页就可以脱离原来的标准流,把底部导航栏隐藏了
3.顶部的导航栏在DetailNavBar组件中设置相对定位层级关系和背景颜色
4.仍然选择better-scroll,引用之前封装好的Scroll,把要滚动的东西用scroll包裹住,替换Scroll里面的插槽
5.scroll需要有固定的高度,让父元素有100%的视口高度

<>一、滚动的问题

推荐数据使用goodslistitem展示时,用了load监听,图片加载完了会通知首页,但是我们不需要通知首页。我们需要区分。发出事件的时候做一下路由判断。
imageLoad(){ if(this.$router.path.indexOf('/home')){ this.$bus.$emit(
'homeItemImageLoad') } else if(this.$router.path.indexOf('/detail')){ this.$bus.
$emit('detailItemImageLoad') } },
再在详情页监听图片是否加载完成,但是最后离开的时候还是要取消

<>详情数据请求

1.保存从首页商品展示传入的iid
2.根据iid请求详情数据
** 在network的detail.js中封装getDetail,发出网络请求

<>一、轮播图的封装

*
在childComps中创建组件DetailSwiper.vue,在组件中引入公共组件Swiper,SwiperItem,在详情页Detail中引入封装好的DetailSwiper
* 根据请求到的数据topImages轮播展示商品,定义了一个变量,把topImages进行保存,图片太大了,给swiper设置固定的高度
<>二、商品基本信息的封装

* 抽离组件需要的数据,再把抽离的数据传给组件,把杂乱的数据整合成一个对象,导出class类对象Goods保存的一些商品信息
*
在childComps中创建组件DetailBaseInfo.vue,封装一些商品基本信息,在详情页Detail中引入封装好的DetailBaseInfo
* 要先判断是否有商品信息,有再渲染,怎么判断呢?
* v-if="Object.keys(goods).length !== 0" 看goods是不是一个空的对象
<>三、商家基本信息的封装

* 导出class类对象Shop保存的一些商品信息
* 在childComps中创建组件DetailShopInfo.vue,封装一些商家信息,在详情页Detail中引入封装好的DetailShopInfo
* 在显示总销量时,有个过滤器 filters: { sellCountFilter: function (value) { if (value <
10000) return value; return (value/10000).toFixed(1) + '万' } }
<>四、商品详情的封装

*
在childComps中创建组件DetailGoodsInfo.vue,封装一些商品详细信息,在详情页Detail中引入封装好的DetailGoodsInfo
* 在滚动的过程中,可能出现不能滚动的现象,是因为better-scroll在计算滚动区域时,图片还没加载出来,所以需要先监听图片是否加载完成
* 首页要获取图片的个数,然后定义一个计数变量,当两者相等时,就可以发出图片加载完成的事件,
* 在详情页面中,对滚动区域进行刷新 // 监听detailInfo这个对象的变化 watch:{ detailInfo(){ //获取图片的个数 this
.imageLength=this.detailInfo.detailImage[0].list.length } }, methods: {
imageLoad(){ // 先判断一下,只发出一次事件,不然有几张图片就发出几次事件 // 所有的图片都加载完成之后,进行一次回调 if(++this.
counter===this.imageLength){ this.$emit('imageLoad') } } },
<>五、商品参数的封装

* 导出class类对象GoodsParam保存的一些商品参数信息
*
在childComps中创建组件DetailParamInfo.vue,封装一些商品参数信息,在详情页Detail中引入封装好的DetailParamInfo
* 参数用table布局
<>六、商品评论信息的封装

* 评论信息的获取
** 在接口的result->rate里面
** cRate 当前商品一共有多少评论 点击更多按钮跳转到另一个页面 展示更多评论信息
** list[0] 取出一条评论信息在详情页进行展示
** 定义commentInfo对象 保存取出来的评论信息 有可能没有评论信息 先判断
* 评论信息的展示
**
在childComps中创建组件DetailCommentInfo.vue,封装一些评论信息,在详情页Detail中引入封装好的DetailCommentInfo
** 过滤器将时间格式化 formatDate 从utils中引入 filters: { showDate: function (value) { //
将时间戳转成Date对象 let date = new Date(value*1000); // 将date进行格式化 return formatDate(
date, 'yyyy/MM/dd') } }
<>七、商品推荐信息的封装

* 推荐数据的获取
** 在detail.js中弄一个接口,不用传参数 export function getRecommend() { return request({
url: '/recommend', }) }
** 在详情页中将接口函数导入,定义一个recommends数组,在created中请求推荐数据

* 推荐数据的展示
** 不需要创建一个新的子组件,可以直接用之前的GoodsList组件,
** 在详情页中导入GoodsList组件并注册使用
** 弄个计算属性computed,取展示的图片数据
<>首页和详情页监听全局事件的mixin的使用

** mixin 混入

<>底部工具栏

<>一、底部工具栏的封装

<>二、将商品添加到购物车

** 1.给“加入购物车”添加点击事件,发送一个事件,因为是在子组件中监听,
** 2.在详情页中监听点击,先获取商品的信息,这些信息要展示在购物车页面中;
** 3.将商品添加进购物车,在详情页将商品添加到某个位置,在购物车界面将信息进行展示,用到vuex
addToCart(){ // 1.获取购物车需要展示的信息 const product={} product.image=this.topImages[0]
product.title=this.goods.title product.desc=this.goods.desc product.cartPrice=
this.goods.cartPrice product.iid=this.iid // 2.将商品添加到购物车 this.$store.dispatch(
'addCart',product) }
<>三、将商品添加到store中

** 0.安装vuex npm install vuex --save
** 1.在文件夹store中新建一个文件,导入vue,vuex,安装插件,创建store对象,挂载到Vue实例上,在main.js中导入store
**
2.定义一个数组变量cartList在其中存放商品,修改任何state中的状态都要通过mutations,mutations中每一个方法完成的事件尽可能单一
[ADD_COUNTER](state, payload) { payload.count++; }, [ADD_TO_CART](state,
payload) { state.cartList.push(payload); }
** 3.逻辑判断在actions中
addCart(context, payload) { // 1.查找之前的数组中是否有该商品 let oldProduct = context.state.
cartList.find( item => item.iid === payload.iid ); // 2.判断oldProduct if (
oldProduct) { context.commit(ADD_COUNTER, oldProduct); } else { payload.count =
1; context.commit(ADD_TO_CART, payload); } }
<>四、添加购物车弹窗

** 1.在components的common文件夹中新建一个toast文件夹,因为还可以在其他项目中使用,创建一个Toast组件,
** 2.让弹窗垂直水平居中布局,
**
3.控制弹窗的显示和隐藏,v-show定义一个变量isShow,默认不显示,属性值设置为false,还定义个弹窗显示内容的变量message,点击“加入购物车”后显示,过一会儿就隐藏,使用定时器
** 4.在Detail组件中导入,注册并使用
** 5.点击“加入购物车”后显示,过一会儿就隐藏,使用定时器
if (oldProduct) { context.commit(ADD_COUNTER, oldProduct); resolve('当前的商品数量+1')
} else { payload.count = 1; context.commit(ADD_TO_CART, payload); resolve(
'添加购物车成功') } this.$store.dispatch('addCart',product).then(res=>{ this.isShow=
true; this.message=res setTimeout(() => { this.isShow=false; this.message='' },
1500);
另一种封装:
** 0.把这个组件封装在一个插件里面,先创建这个组件,最开始的时候就把这个组件添加进body里面,然后安装这个插件,安装这个插件就预备好了
** 1.在main.js文件里面导入toast,安装插件,执行install函数,
** 2.在toast文件夹里面新建index文件,在index中导入Toast组件,在install函数里面把需要的东西预备好
obj.install=function(Vue){ // 1.创建组件构造器 const toastContrustor = Vue.extend(
Toast) // 2.new的方式,根据组件构造器,可以创建一个组件对象 const toast = new toastContrustor() //
3.将组件对象,手动挂载到某一个元素上 toast.$mount(document.createElement('div')) //
4.toast.$el对应的就是div document.body.appendChild(toast.$el) Vue.prototype.$toast =
toast}
** 3.在Toast组件中写一个show方法
show(message,duration=2000){ // duration=duration || 3000 this.isShow=true;
this.message=message setTimeout(() => { this.isShow=false; this.message='' },
duration); }
** 4.在Detail组件中调用show方法
this.$store.dispatch('addCart',product).then(res=>{ this.$toast.show(res,2000)
})

技术
©2019-2020 Toolsou All rights reserved,
PostgreSQL: 九. 索引继承jpa Repository 写自定义方法查询c语言玫瑰告白代码Golang数组平分,数组拆分,数组分组非父子组件之间的三种传值办法Java Thread之Sleep()使用方法总结element-ui的el-date-picker组件获取值SpringBoot JpaRepository 数据库增删改查(精华2020年6月3日更新) TypeScript中接口详解指定位置输出字符串(详细解析)