摄影网站的设计与实现开题报告外贸网站建设平台

        页面中将我们的数据进行了罗列，对于单个数据的展示，还需要进行开发，这里使用了点击商品后，进行弹窗展示。

        同样这里用一个组件来进行实现该弹窗的展示。

        本文介绍了商品详情弹窗的实现方案。主要采用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 --><!--