商品详情页交互流程

6. 商品详情页交互流程（买家端）

买家在详情页查看图文与规格、校验库存与优惠，并可领券、进店、看评价与咨询，最终加购、立即购买或收藏分享。

参与角色：买家/消费者、系统

flowchart TD
    Start([进入商品详情页]) --> LoadDetail[加载商品信息]
    LoadDetail --> ShowDetail[展示商品详情页]

    ShowDetail --> DetailSections[页面主要区域]

    DetailSections --> ImageArea[商品图片/视频轮播区]
    DetailSections --> InfoArea[商品基本信息区]
    DetailSections --> SkuArea[规格选择区]
    DetailSections --> PromoArea[优惠信息区]
    DetailSections --> ShopArea[店铺信息区]
    DetailSections --> TabArea[详情/评价/咨询Tab区]

    ImageArea --> ZoomImage[点击查看大图/放大镜]
    ImageArea --> PlayVideo[播放商品视频]

    InfoArea --> ViewPrice[查看价格/划线价/会员价]
    InfoArea --> ViewDelivery[查看配送信息与运费]
    InfoArea --> ViewService[查看售后服务保障]

    SkuArea --> SelectSku[选择商品规格]
    SelectSku --> SkuChange[规格变化更新价格/库存/图片]
    SkuChange --> SetQuantity[设置购买数量]
    SetQuantity --> CheckStock{库存是否充足}
    CheckStock -->|否| StockTip[提示库存不足]
    StockTip --> SelectSku
    CheckStock -->|是| ActionButtons{选择操作}

    PromoArea --> ViewCoupon[查看可领优惠券]
    ViewCoupon --> ClaimCoupon[领取优惠券]
    PromoArea --> ViewPromo[查看促销活动信息]
    PromoArea --> ViewCombo[查看满减/满赠/组合优惠]

    ShopArea --> ViewShopInfo[查看店铺评分/商品数]
    ShopArea --> CollectShop[收藏店铺]
    ShopArea --> EnterShop[进入店铺首页]

    TabArea --> TabDetail[商品详情图文]
    TabArea --> TabComment[用户评价列表]
    TabArea --> TabConsult[商品咨询/问答]

    TabComment --> ViewComment[查看评价内容与晒图]
    TabComment --> FilterComment{筛选评价}
    FilterComment -->|好评/中评/差评| FilterByRate[按评分筛选]
    FilterComment -->|有图/有视频| FilterByMedia[按晒图筛选]

    TabConsult --> AskQuestion[发起商品咨询]
    AskQuestion --> SubmitQuestion[提交问题]

    ActionButtons -->|加入购物车| AddCart[加入购物车]
    ActionButtons -->|立即购买| BuyNow[立即购买]
    ActionButtons -->|收藏商品| CollectProduct[收藏商品]
    ActionButtons -->|分享商品| ShareProduct[生成分享链接/海报]

    AddCart --> CartSuccess[加入成功提示]
    CartSuccess --> ContinueBuy{继续操作}
    ContinueBuy -->|继续购物| Start
    ContinueBuy -->|去购物车| GoCart[进入购物车]

    BuyNow --> GoCheck[进入结算页面]
    CollectProduct --> CollectSuccess[收藏成功提示]

    GoCart --> End1([购物车页面])
    GoCheck --> End2([结算页面])

步骤说明

进入商品详情页，系统加载并展示页面；可在图片/视频区查看大图、放大镜或播放视频。
在基本信息区查看价格、配送与售后保障；在规格区选择 SKU，规格变化会更新价格、库存与展示图。
设置购买数量并校验库存：不足则提示后重新选择规格或数量；充足则进入主操作选择。
在优惠区查看可领优惠券、促销活动与满减/组合优惠，可领券；在店铺区查看店铺信息，可收藏店铺或进入店铺首页。
在 Tab 区查看详情图文、评价（可按好评/中评/差评或有图/有视频筛选）或发起咨询并提交问题。
选择主操作：加入购物车（成功后提示，可继续购物返回详情页或去购物车）、立即购买进入结算、收藏商品或生成分享链接/海报。
根据选择进入购物车页、结算页，或留在详情页继续浏览。
流程结束。