mpvue小程序商品规格选择

最新推荐文章于 2022-07-18 17:29:57 发布

原创

最新推荐文章于 2022-07-18 17:29:57 发布 · 置顶 · 2.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#mpvue #小程序 #商品规格选择

本文介绍了如何在mpvue框架下开发小程序商品详情页中的商品规格选择功能。面对后台返回的复杂数据结构，作者通过分析并借鉴vue的多规格选择实例，实现了基于mpvue的商品规格选择组件。在开发过程中遇到的页面状态保留问题，通过调整matchingSpec()函数的调用位置，确保其在异步获取商品信息后执行，成功解决了问题。

最近由于项目的需求，需要开发出一个基于mpvue框架的小程序商城。之前写过原生的小程序，所以还需要学习mpvue，由于需求很急，所以只有边学边开发了。商城自然离不开商品详情页，这个算是商城里面比较复杂的页面了，做到商品规格选择的时候看到后台返回的一系列数据简直头大了。

商品规格都在goodsSpecObj字段里面，然后里面各种键值对的字段；其中allOpenSpces表示所有可以组合起来的规格，里面的键表示多个规格的spSortValueId组合，以分号分割，这个allOpenSpces字段刚好就是需要我们去匹配所选规格的价格和库存的。

而specname代表规格的名称，也是键值对；specvalue代表规格的值，还是键值对；

根据上一篇转载的使用vue实现多规格选择实例，仿照其中的代码逻辑，自己改造了一个基于mpvue的商品规格选择，话不多说，以下是goodDetail.vue的template代码：

<template>
  <div class="counter-warp">
    <!-- 顶部轮播图 -->
    <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
      <swiper-item v-for="(item, index) in goodsImageMore" :key="index">
          <img :src="imgUrl + item" class="slide-image" mode="aspectFill"/>
      </swiper-item>
    </swiper>
    <!-- 商品信息 -->
    <div class="goodsInfo" v-if="isShow==true">
      <div class="goodsName">{
  
  {goodsName}}</div>
      <div class="goodsPrice red"><span class="yen">¥</span>{
  
  {goodsPrice}}</div>
    </div>
    <!-- 商品规格 -->
    <div class="goodsSpecBox clearfix" @click="chooseGoodSpecs" v-if="isShow==true">
      <span>选择：</span>
      <span class="chosenGoodsSpec">{
  
  {chosenGoodsSpec}}</span>
      <span class="iconfont icon-liebiao_gengduo"></span>
    </div>
    <!-- 商品规格弹出框 -->
    <div class="specPop" v-if="specPopShow==true">
      <div class="specPopMask" @click="closeSpecPop"></div>
      <div class="specPopContent">
        <div class="specGoodHeader clearfix">
          <img class="goodImage" :src="imgUrl + goodsImage" />
          <ul class="specGoodInfo">
            <li class="goodsName">{
  
  {goodsName}}</li>
            <li class="goodsPrice red"><span class="yen">¥</span>{
  
  {chooseTotalPrice}}</li>
          </ul>
        </div>
        <div class="specChoose" v-for = "(specvalue_item,specvalue_index) in specvalue" :key="specvalue_index">
          <div class="specTitle">{
  
  {specvalue_item.specname}}</div>
          <ul class="specItemUl clearfix">
            <li v-for = "(oItem,index) in specvalue_item.item" :key="index">
              <input type="radio" class="specItemInput" 
                :value="oItem.spValueId"