商品详情页

• 🍕🍕🍕1.当点击商品图片时，在路由跳转到详情的时候，需要带上对应产品的唯一id，发请求告诉服务器，找到对应的产品信息进行展示，监听滚动行为默认顶部开始。
• 2.API —请求接口
• 3.vuex三连环
• 4.动态展示

---

一、当点击商品图片时，在路由跳转到详情的时候，需要带上对应产品的唯一id，发请求告诉服务器，找到对应的产品信息进行展示，监听滚动行为默认顶部开始

🥞🥞🥞src\pages\Search\index.vue

 <div class="p-img">//<router-link :to="`/detail/${good.id}`"  ><img :src="good.defaultImg" /></router-link></div>

监听滚动行为默认顶部开始
🐱‍🏍🐱‍🏍🐱‍🏍src\router\index.js

scrollBehavior(to,from,sendPosition){return {x:0,y:0}}

新增详情页接口
🍕🍕🍕src\api\index.js

// 获取详情商品信息的接口 /api/item/{ skuId } 携带skuId参数
export const reqGoodsInfo=(skuId)=>{return requests({methods:"get",url:`/item/${skuId}`})
}

新增detail仓库
🍳🍳🍳src\store\detail

//
import { reqGoodsInfo } from "@/api"
const state = {goodInfo:{}
}
const mutations = {GETGOODINFO(state,goodInfo){state.goodInfo = goodInfo;}
}
const actions = {async getGoodInfo({commit},skuId){let result = await reqGoodsInfo(skuId);if(result.code == 200){commit("GETGOODINFO",result.data)}	}
}
const getters = {// 可以简化数据复杂度// 商品信息路径导航简化categoryView(state){return state.goodInfo.categoryView||{}},//产品信息简化skuInfo(state){return state.goodInfo.skuInfo ||{}},//商品轮播图简化spuSaleAttrList(state){return state.goodInfo.spuSaleAttrList || []}}
export default{state,mutations,actions,getters
}

组件中派发
🍔🍔🍔src\pages\Detail\index.vue

import { mapGetters }from "vuex"
mounted(){this.$store.dispatch("getGoodInfo",this.$route.params.skuId)
}
computed:{...mapGetters(["categoryView","skuInfo","spuSaleAttrList"]);skuImageList(){// 进一步简化复杂度 如果返回的数据没有回来 skuImageList初始置为空数组return this.skuInfo.skuImageList||[]},
}

展示
🍔🍔🍔src\pages\Detail\index.vue

  <!--放大镜效果--><Zoom :skuImageList="skuImageList" /><!-- 小图列表 --><ImageList :skuImageList="skuImageList"  /><!-- 右侧商品属性区域 --><dl  v-for="(spuSaleAttr) in spuSaleAttrList" :key="spuSaleAttr.id"><dt class="title">{{spuSaleAttr.saleAttrName}}</dt><dd changepirce="0" class="active" v-for="(spuValueList) in spuSaleAttr.spuSaleAttrValueList" :key="spuValueList.index">{{spuValueList.saleAttrValueName}}</dd></dl><dl v-for="(spuSaleAttr) in spuSaleAttrList" :key="spuSaleAttr.id"><dt class="title">{{spuSaleAttr.saleAttrName}}</dt><dt changepirce="0" class="active" v-for="(spuValueList) in spuSaleAttr.spuSaleAttrValueList" :key=""></dt></dl>

🍔🍔🍔商品属性值选择切换

  // 商品属性切换事件activeChange(saleAttrValue,arr){arr.forEach(item => {item.isChecked = 0});saleAttrValue.isChecked = 1},

🍔🍔🍔 表单元素修改产品个数

 <input autocomplete="off" class="itxt" v-model="skuNum" @change="changeSkuNum">

changeSkuNum(event){// console.log(event.target.value);// 用户输入进来的文本 先乘以 1 进行判断let value = event.target.value *1;// 不合规则的情况 if(isNaN(value) || value < 1 ){this.skuNum = 1;}else{this.skuNum = parseInt(value)}}

🍳🍳🍳 将产品添加到购物车
src\api\index.js
接口地址: 两个参数

export const reqAddOrUpdateShopCart = (skuId,skuNum)=> requests({url:``,method:'post'
})

详情仓库
src\store\detail\index.js

async addOrUpdateShopCart({commit},{skuId,skuNum}){//加入购物车返回的解构 前台将参数带给服务器/写入数据成功即可let result = await reqAddOrUpdateShopCart(skuId,skuNum);// 此时 服务器返回状态成功即可 仓库不需要存储 仓库要返回一个非空字符串供组件使用 利用try{}catch(){} 成功与失败 if(result.code == 200){return '200'	}else{return Promise.reject(new Error('faile'))	}
}

详情组件派发

async addShopCar(){// 1.发请求 将产品加入到数据库// 2.服务器存储 状态从仓库promise返回  成功 进行路由跳转// 3.失败 进行提示用户
try{await this.$store.dispatch("addOrUpdateShopCart",{skuId:this.$route.params.skuId,skuNum:this.skuNum })// 成功之后进行路由跳转 携带参数 商品信息和数量// 路由参数一般是一些简单的数据 较复杂的数据不推荐路由传递// 展示商品信息 每次选择完商品属性和数量之后只要不关闭浏览器标签 信息一直存在 会话存储较合适// 会话存储和本地存储 都不可存储对象sessionStorage.setItem("SKUINFO",JSON.stringify(this.skuInfo))this.$router.push({name:'addcartsuccess',query:{skuNum:this.skuNum}})
}
}catch(error){alert('服务器有点忙！ ')
}

接收 展示
src\pages\AddCartSuccess\index.vue

computed:{skuInfo(){return JSON.parse(sessionStorage.getItem("SKUINFO"))	}
}