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

<template>
  <view class="item-cmd_bx" @click="showAddModelFn">
			<view class="img_bx" style="background:#eeeeee"> <image :src="info.cover" lazy-load="true" :lazy-load-margin="0"></image> </view>
    <view class="cmd-info_bx">
      <view class="tit">
				<text style="font-size:22upx;border:1upx solid #3385ff;color:white;background-color:#3385ff;margin-right:5upx;padding-left:5upx;padding-right:5upx;" 
				v-if="info.presell == 1">预售</text>
        {{ info.name || "" }} 
      </view>
      <view class="num-open_bx">
        <view class="price" style="position:absolute;top:105upx;">￥{{ parseFloat(info.price) }}</view>
        <view style="position: relative;top:-14upx;">
           <view class="kc">
           <block v-if="info.ratioType == 0">{{info.ratio}}{{ info.smallUnit }}/{{info.bigUnit}}</block>
           <block v-else>若干{{ info.smallUnit }}/{{info.bigUnit}}</block>
           </view>
        </view>
        <view>
          <view class="open-bx">
            <i class="iconfont iconjian" @click.stop="delItemFn" v-if="bigCount > 0 || smallCount > 0" ></i>
            <text class="num" @click.stop="showAddModelFn" >
              <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" @click.stop="showAddModelFn" ></i>
          </view>
          <view class="price">
            <text class="unit">还剩 {{ parseFloat(info.stock) }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: "Commodity",
  components: {},
  mixins: [],
  props: {
    info: {
      required: true,
      type: Object,
      default () {
        return {bigCount:0,smallCount:0,userPrice:0};
      }
    },
    type: {
      type: String,
      default: '01'
    }
  },
  data () {
    return {
			bigCount:0,
			smallCount:0,
			userPrice:0
    };
  },
	watch:{
    info:{
      handler(){
        this.bigCount = this.info.bigCount
        this.smallCount = this.info.smallCount
        this.userPrice = this.info.userPrice
      },
      deep:true
    }
	},
  created () { },
	mounted() {
		this.bigCount = this.info.bigCount
		this.smallCount = this.info.smallCount
		this.userPrice = this.info.userPrice
  },
  methods: {
    delItemFn () {
      this.info.bigCount = 0
      this.info.smallCount = 0
      this.$emit("replaceItemFn", this.info,1)
    },
    showAddModelFn () {
        this.$emit("showAddModelFn", { ...this.info, bigCount: this.bigCount, smallCount: this.smallCount, userPrice: this.userPrice })
    }
  }
};
</script>
<style lang="scss" scoped>
.item-cmd_bx {
  position: relative;
  margin-bottom: 20upx;
  .img_bx {
    height: 140upx;
    width: 140upx;
    position: absolute;
    left: 0upx;
    top: 0upx;
			image{
				width: 100%;
				height: 100%;
			}
  }
  .cmd-info_bx {
    padding-left: 167upx;
    margin-bottom: 40upx;
    & .tit {
      font-size: 32upx;
      font-weight: 700;
      color: #333333;
      padding-top: 10upx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			width:380upx;
    }
    & .kc {
      color: #837f7f;
      font-size: 23upx;
      padding: 10upx 0 0;
      position: absolute;
      width:150upx;
      text-align: left;
      left: 0;
      top:15upx;
      font-size:25upx;
    }
    & .num-open_bx {
      text-align: right;
      display: flex;
      justify-content: space-between;
      & .price {
        font-size: 29upx;
        color: black;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        margin-right:90upx;
        .unit {
          font-size: 22upx;
        }
      }
      & .open-bx {
        align-items: center;
        display: inline-flex;
        & .iconfont {
          color: #4db0e4;
          font-size: 55upx;
        }
        .icondelete {
          margin: 0 10upx 0 30upx;
          color: #ccc;
          &.edit {
            color: #4db0e4;
          }
        }
        & > .num {
          display: inline-block;
					width: 120upx;
					height:50upx;
					line-height:50upx;
          text-align: center;
          margin: 0 8upx;
          color: #868686;
          border-radius: 22upx;
          background-color: #f5f5f5;
          font-size: 33upx;
        }
        .change-input {
          width: 164upx;
          height: 60upx;
          line-height: 60upx;
          text-align: center;
          background: #ffffff;
          border: 1upx solid #dddddd;
          border-radius: 4upx;
          font-size: 28upx;
        }
      }
    }
  }
}
</style>