wechat/src/components/orderPopup/index.vue

<template>
  <div class="orderPopup" :class="{'show':show}">
    <div class="centerLabel" v-if="data !== null">
      <div class="top">
        <span>{{data.name}}</span>
        <i class="iconfont icon-guanbi" @click="close"></i>
      </div>
      <div class="content flex-h">
        <div class="flex-item">
          <div>
            <span>规格：</span>
            <ul>
              <li v-for="(item,index) in data.spec" :class="{'active': index === activeIndex, 'grey': item.status !== 1}" :key="index" @click="selectItem(item, index)">{{item.value}}</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="bottom flex-h">
        <div class="flex-item">
          <div>
            <span>￥{{data.spec[activeIndex].price}}</span>
          </div>
        </div>
        <i class="iconfont icon-jian" @click="subtract"></i>
        <input type="tel" v-model="num" readonly style="color:#000;">
        <i class="iconfont icon-jia" @click="add"></i>
        <a @click="sure">确定</a>
      </div>
      <!-- <a class="sure">确定</a> -->
    </div>
  </div>
</template>

<script>

export default {
  name: '',
  props: ['show', 'data'],
  data () {
    return {
      activeIndex: 0,
      // price: 0,
      // num: 0,
      // specId: '',
      // specName: '',
    }
  },
  computed: {
    num: {
      get () {
        return this.data.spec[this.activeIndex].num
      },
      set (val) {
        console.log(this.data)
        this.data.spec[this.activeIndex].num = val
        this.$emit('returnData', {
          id: this.data.id,
          name: this.data.name,
          spec: this.data.spec[this.activeIndex].id,
          specname: this.data.spec[this.activeIndex].value,
          defaultNum: val,
          defaultPrice: this.data.spec[this.activeIndex].price || 0,
        })
      }
    },
  },
  components: {

  },
  created () {

  },
  methods: {
    sure () { // 确定
      // this.$emit('returnData', this.data)
      this.close()
    },
    subtract () { // 减
      if (this.num > 0) {
        this.num -= 1
      }
    },
    add () { // 加
      this.num += 1
    },
    selectItem (item, index) { // 选择规格
      console.log(item)
      if (item.status === 1) {
        // if (this.activeIndex === index) {
        //   this.activeIndex = ''
        //   this.price = 0
        //   this.specId = ''
        //   this.specName = ''
        // } else {
        this.activeIndex = index
          // this.price = item.price
          // this.specId = item.id
          // this.specName = item.value
        // }
      }
    },
    close () { // 关闭弹窗
      this.$emit('closePopup')
      this.resetData()
    },
    resetData () { // 重置状态
      // this.activeIndex = ''
      // this.price = 0
      // this.num = 1
      // this.specName = ''
      // this.specId = ''
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "page.scss";
</style>