购物车多种规格选择确定价格的解决方案之一

最新推荐文章于 2022-01-06 11:10:31 发布

易之晓晓

最新推荐文章于 2022-01-06 11:10:31 发布

阅读量1.1k

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_42306443/article/details/95637771

版权

VUE 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

这里我简单的说一下我的思路：

1.将选定的规格放在一个对象中，类作为key，当前类的value作为value

2 后端会返回排列组合后的各种组合对应的价格，具体格式如下：

3 . 由于每次选择的顺序不确定，所以判断两个数组是否相等，这里我给出两个方法

1 ）将两个数组进行相同的排序后转成字符串进行比较

2 ）对两个数组进行循环遍历，这里我更推荐第一种

4.然后就可以将不同组合对应的价格显示出来啦~~附上我当时的代码

<template>
  <div class="detail">
        <div
          class="popup-contant-center"
          v-for="(i,index1) in detail.specificationList"
          :key="index1"
        >
          <div class="popup-contant-center-title">{{i.name}}</div>
          <div class="popup-contant-center-center">
            <div
              class="popup-contant-center-center-guige"
              v-for="(v,index) in i.valueList"
              :class="{'biaoji':specifications[v.specification] ===v.value}"
              :key="index"
              @click="getStyle(v,i)"
            >{{v.value}}</div>
          </div>
        </div>
        <div class="popup-contant-bottom" @click="toGetOrder">立即购买</div>
      </div>
    </van-popup>
  </div>
</template>
export default {
  data () {
    return {
      show: false,
      number: 1,
      detail: {},
      maxPrice: null,
      minPriceL: null,
      price: null,
      specifications: {}
    }
  },
  created () {
    this.getDetail()
  },
  mounted () {
    console.log('mounted', this.$route)
  },
  computed: {
    id () {
      return this.$route.query.id
    },
    biaoji () {
      return 'biaoji'
    }
  },
  watch: {
    specifications: {
      handler (newV, oldV) {
        this.price = null
        let specifications = Object.keys(newV);
        if (specifications.length < this.detail.specificationList.length) {
          return
        }
        let array = this.detail.productList
        let getArray = []
        specifications.map(i => {
          getArray.push(newV[i])
        })
        getArray.sort()
        for (let i in array) {
          let sorta = JSON.parse(array[i].specifications)
          if (sorta.sort().toString() == getArray.toString()) {
            this.price = array[i].price
            break;
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  //
  methods: {
    //获取商品类型,添加到specifications对象中，以键值对的形式存在
    getStyle (type) {
      this.$set(this.specifications, type.specification, type.value)
    },
async getDetail () {
      const detail = await Apis.getGoodsDetail({ id: this.id })
      this.detail = detail.data
    },
}

后端给的数据结构