wechat/src/components/orderItem/index.vue

<template>
  <div class="orderItem flex-h">
    <div class="img">
      <a>
        <img src="" class="centerLabel cover" alt="">
      </a>
    </div>
    <div class="content flex-item flex-v">
      <div class="flex-item">
        <div>
          <span>{{data.name}}</span>
        </div>
      </div>
      <div class="flex-h">
        <div class="flex-item">
          <div>
            <span>￥{{data.price}}</span>
          </div>
        </div>
        <i class="iconfont icon-jian" @click="subtract" v-if="!data.spec.length && data.status === 1"></i>
        <input v-if="!data.spec.length && data.status === 1" type="tel" @input="input" v-model="defaultNum">
        <i class="iconfont icon-jia" :class="{'active': defaultNum > 0}" @click="add" v-if="!data.spec.length && data.status === 1"></i>
        <a v-if="data.spec.length && data.status === 1" @click="selectSpec">选规格</a>
        <span v-if="data.status !== 1">已售罄</span>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: '',
  props: ['data'],
  data () {
    return {
      defaultNum: 0,
    }
  },
  computed: {

  },
  components: {

  },
  created () {

  },
  methods: {
    add () { // 增加
      this.defaultNum += 1
      this.select()
    },
    subtract () { // 减少
      if (this.defaultNum > 0) this.defaultNum -= 1; this.select()
    },
    input () { // 输入
      if (Number(this.defaultNum)) {
        this.select()
      } else {

      }
    },
    select () { // 返回数据
      this.$emit('returnData', {
        name: this.data.name,
        id: this.data.id,
        specId: null,
        specName: null,
        num: null,
        defaultNum: Number(this.defaultNum),
        price: null,
        defaultPrice: this.data.price,
      })
    },
    selectSpec () { // 选规格
      this.$emit('selectSpec', this.data)
    },
  }
}
</script>

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