front-end/ghsApp/src/pagesPurchase/components/CommodityPurchase.vue

<template>
  <view
    class="item-cmd_bx"
    @click="customNum"
  >
    <view class="img_bx">
      <app-img
        :src="info.cover"
        alt="商品图"
        mode="aspectFit"
        :height="160"
      />
    </view>
    <view class="cmd-info_bx">
      <view class="tit">
        {{ info.itemName || "" }}
      </view>

      <view class="num-open_bx">
        <view style="position: relative;">
           <view class="kc">{{ info.rank }}级</view>
        </view>
        <view>
          <view class="open-bx">
            <i
              class="iconfont iconjian"
              :class="delAnimationData?'animation':''"
              @click.stop="delEvent"
              v-if="bigCount > 0 || smallCount > 0"
            ></i>
            <text
              class="num"
              @click.stop="customNum"
            >
              <!--					<text class="num" @click="customNum" v-if="bigCount > 0 || smallCount > 0">-->
              <text v-if="bigCount > 0 || smallCount > 0">{{ `${bigCount}` }}</text>
              <text v-if="smallCount > 0">/</text>
              <text v-if="smallCount > 0">{{ `${smallCount}` }}</text>
            </text>
            <i
              class="iconfont iconzeng"
              :class="addAnimationData?'animation':''"
              @click.stop="customNum"
            ></i>
          </view>
          <view class="price">
            <!--<text class="unit">￥</text><text>{{ info.price }}</text>-->
            <text class="unit">还剩：{{ info.stock }}</text>
          </view>
        </view>

      </view>
    </view>
  </view>
</template>

<script>
import { COMMODITY_TYPE } from "@/utils/declare";
import AppImg from "@/components/app-img";
import animationMins from "@/mixins/animation";
export default {
  name: "Commodity",
  components: {
    AppImg
  },
  mixins: [animationMins],
  props: {
    info: {
      required: true,
      type: Object,
      default () {
        return {};
      }
    },
    type: {
      type: String,
      default: COMMODITY_TYPE.COMMON
    },
    bigCount: {
      type: Number,
      default: 0
    },
    smallCount: {
      type: Number,
      default: 0
    },
    autoPrice: {
      type: Number,
      default: 0
    },
    itemPrice: {
      type: Number,
      default: 0
    },
  },
  data () {
    return {
      COMMODITY_TYPE
    };
  },
  created () { },
  methods: {
    addEvent () {
      this.animationFun('add');
      // let params = {
      // 	...this.info,
      // 	bigCount: this.bigCount,
      // 	smallCount: this.smallCount
      // };
      this.$emit("add", this.info);
    },
    delEvent () {
      this.animationFun('del');
      this.$emit("del", this.info);
    },

    removeEvent () {
      this.$emit("remove", this.info);
    },
    changePriceEvent (event) {
      const {
        detail: { value }
      } = event;
      this.$emit("changePrice", this.info, value);
    },
    customNum () {
      if (!this.bigCount && !this.smallCount) {
        let params = {
          ...this.info,
          bigCount: this.bigCount,
          smallCount: this.smallCount,
          itemPrice: this.itemPrice
        };
        this.$emit("addOneEvent", this.info, params, 'noAdd');
      }
      this.$emit("customNum", {
        ...this.info,
        bigCount: this.bigCount,
        smallCount: this.smallCount,
        itemPrice: this.itemPrice
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.item-cmd_bx {
  position: relative;
  margin-bottom: 20px;
  .img_bx {
    height: 140px;
    width: 140px;
    position: absolute;
    left: 0px;
    top: 0px;
  }
  .cmd-info_bx {
    padding-left: 167px;
    margin-bottom: 40px;
    & .tit {
      font-size: 32px;
      font-weight: 700;
      color: #333333;
      padding-top: 10px;
    }
    & .kc {
      color: #ff2842;
      font-size: 24px;
      padding: 10px 0 0;
      position: absolute;
      width: 50px;
      text-align: left;
      bottom: 0;
      left: 0;
    }
    & .num-open_bx {
      text-align: right;
      display: flex;
      justify-content: space-between;
      // align-items: center;
      & .price {
        font-size: 28rpx;
        color: #999999;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        margin-right: 50px;
        .unit {
          font-size: 22upx;
        }
      }
      & .open-bx {
        // display: flex;
        align-items: center;
        display: inline-flex;
        & .iconfont {
          color: #4db0e4;
          font-size: 42px;
        }
        .icondelete {
          margin: 0 10px 0 30px;
          color: #ccc;
          &.edit {
            color: #4db0e4;
          }
        }
        & > .num {
          display: inline-block;
          width: 120rpx;
          height: 45rpx;
          text-align: center;
          margin: 0 8px;
          color: #868686;
          border-radius: 22px;
          background-color: #f5f5f5;
          padding: 3px 0;
          font-size: 25rpx;
        }
        .change-input {
          width: 164px;
          height: 60px;
          line-height: 60px;
          text-align: center;
          background: #ffffff;
          border: 1px solid #dddddd;
          border-radius: 4px;
          font-size: 28px;
        }
      }
    }
  }
}
</style>