前台项目-商品详情页

商品详情页

• 🍕🍕🍕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"))	
	}
}