最近由于项目的需求,需要开发出一个基于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&#