頁面中將我們的數據進行了羅列，對于單個數據的展示，還需要進行開發，這里使用了點擊商品后，進行彈窗展示。

        同樣這里用一個組件來進行實現該彈窗的展示。

        本文介紹了商品詳情彈窗的實現方案。主要采用Vuex進行狀態管理，通過幾個關鍵組件協同工作：

1. 商品列表組件productItem負責觸發點擊事件，通過Vuex傳遞商品數據和彈窗狀態
2. 商品詳情組件pro-detail-popup使用u-popup實現彈窗效果，展示商品圖片、價格、描述等信息
3. Vuex管理彈窗狀態(detailPopState)和商品數據(detailData)，包括對商品描述進行格式處理
4. 通過mapMutations和mapGetters實現組件與Vuex的交互，確保狀態同步
5. 考慮了事件冒泡處理、加載優化等細節問題 該方案實現了點擊商品展示詳情的完整流程，具有良好的可維護性和擴展性。

1、回顧在shop頁面中，存在商品的組件productItem

        					<!-- 下面是滾動欄目 --><!-- :scroll-top="rightScrollValue" 是滾動條位置 后面rightScrollValue是個變量 使用v-bind 就是加：--><!-- scroll-with-animation 滑動動畫，避免太生硬 --><!--  @scroll="rightScrollEnt" 監聽右側的滾動事件 --><scroll-view scroll-y="true" class="Conent" :scroll-top="rightScrollValue" scroll-with-animation@scroll="rightScrollEnt"><view class="productView" v-for="item,index in datalist" :key="item.id"><u-sticky customNavHeight=0 zIndex="2"><!-- 這就是吸頂，但是我們自己取消了導航，需要設置一個值   customNavHeight 導航欄高度，自定義導航欄時，需要傳入此值  --><view class="producttitle"><!-- 這里需要吸頂，分類的吸頂 --><!-- 使用的是uview的sticky  產品類名，分類的 -->{{item.name}}</view></u-sticky><view class="productcontent" v-for="childrenItem,index2 in item.proGroup":key="childrenItem.id"><view class="productitem"><productItem :item="childrenItem"></productItem></view></view></view></scroll-view>

2、productItem組件的基本代碼

在代碼中進行了分析，增加一個對組件的動作 showDetail，然后再給showDetail 寫處理方法

2.1、組件傳值（我們使用vuex）傳遞商品id或者是否顯示商品詳情的信息

<template><view class="pro-item" @click="showDetail"><!-- 給商品添加一個點擊，顯示商品的詳情 --><!-- 但是這里的詳情也是shop頁面，就是商品組件的父級下的另外一個商品詳情組件 pro-detail-popup--><!-- 點擊這里就要把商品的id信息傳給商品詳情組件 pro-detail-popup--><!-- 這樣這里就需要 組件傳值的功能，但也可以用狀態vuex 來管理傳值 ，我們這里就采用了狀態傳值 --><view class="pic"><!-- 組件的image給一個標簽名  不然小程序報錯 --><image class="img" :src="item.thumb[0].url" mode="aspectFill"></image><!-- aspectFill 全部顯示 --></view><view class="text"><view class="title"><!-- 產品標題有很多字母，這個時間就需要進行一行顯示，不完全的就省略號 -->{{item.name}}</view><view class="price"><!-- 沒有原價不顯示 --><view class="big" v-if="item.before_price">￥{{priceFormat(item.before_price)}}</view><view class="small">低至￥{{priceFormat(item.price)}}</view></view><!-- 沒有原價，或者折扣為0的就不用顯示折扣 --><view class="discount" v-if="item.before_price && discount(item.price,item.before_price)">{{discount(item.price,item.before_price)}}折</view><view class="numbox" v-if="btnState"><!-- 數據中沒有產品屬性sku，那屬性長度為0就不顯示選規格，顯示步進器 --><!-- <view class="skuSelect" v-if="item.sku_select.length" @click="selectSpecs">選規格</view> --><view class="skuSelect" v-if="item.sku_select.length" @click.stop="selectSpecs">選規格</view><!--如果這樣寫 @click="selectSpecs" --><!-- 這里有一個點擊事件就是規格這個位置被點擊，被選擇，執行selectSpecs --><!--