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

<template>
  <view class="product">
    <view class="item-cmd_bx" @click="showAddModelFn">
      <text style="position: absolute;left:245upx;font-weight:bold;color:red;font-size:24upx;top:118upx;" v-if="info.needCgNum && Number(info.needCgNum)>0">待采 {{ info.needCgNum }}</text>
      <view class="img_bx" style="background:#eeeeee">
        <block v-if="info.status == 2">
          <view class="sold-out">
            <view class="sold-out-xj">已下架</view>
          </view>
			  </block>
        <block v-else>
          <view class="sold-out" v-if="info.frontHide == 1">
            <view class="hide">隐</view>
          </view>
			  </block>
        <image :src="info.cover" lazy-load="true" :lazy-load-margin="0"></image>
        <view style="width:30upx;height:30upx;top:0upx;left:0upx;position: absolute;" @click.stop="delProduct(info)"> </view>
      </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.frontHide && info.frontHide == 1">隐</text>
          <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 }}</block>
            <block v-else>若干{{ info.smallUnit }}</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" style="color:#3385FF;">{{ `${bigCount}` }}</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>

    <text class="bottom-button" @click.stop="copyCreate(info)">复制新建</text>
    <text class="bottom-button" @click.stop="goToStockDetail(info)">库存明细</text>
    <text class="bottom-button" @click.stop="goDetail(info)">修改花材</text>

</view>
</template>
<script>
export default {
  name: "Commodity",
  components: {},
  mixins: [],
  props: {
    info: {
      required: true,
      type: Object,
      default () {
        return {bigCount:0,smallCount:0,userPrice:0,totalPrice:0,aboutPrice:0};
      }
    },
    type: {
      type: String,
      default: '01'
    }
  },
  data () {
    return {
			bigCount:0,
			smallCount:0,
			userPrice:0,
      totalPrice:0,
      aboutPrice:0
    };
  },
	watch:{
    info:{
      handler(){
        this.bigCount = this.info.bigCount
        this.smallCount = this.info.smallCount
        this.userPrice = this.info.userPrice
        this.totalPrice = this.info.totalPrice,
        this.aboutPrice = this.info.aboutPrice
      },
      deep:true
    }
	},
  created () { },
	mounted() {
		this.bigCount = this.info.bigCount
		this.smallCount = this.info.smallCount
		this.userPrice = this.info.userPrice
    this.totalPrice = this.info.totalPrice,
    this.aboutPrice = this.info.aboutPrice
  },
  methods: {
    delProduct(info){
      this.$emit("delProduct", info)
    },
		doPrintLabel(item,type){
			this.$msg('开发中')
		},
		copyCreate(item){
			this.pageTo({url: '/admin/item/copy?id='+item.id})
		},
    goDetail(item){
      this.$util.pageTo({url: "/admin/item/detail?id="+item.id})
    },
		goToStockDetail(item){
			this.$util.pageTo({url: "/pagesStorehouse/stockWarn/detailed?id="+item.id+'&name='+item.name})
		},
    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,totalPrice:this.totalPrice,aboutPrice:this.aboutPrice })
    }
  }
};
</script>
<style lang="scss" scoped>
.product{
	height:230upx;
}
.bottom-button{
	font-weight:normal;
	border:2upx solid #cccccc;
	font-size:24upx;
	border-radius: 20upx;
	padding:9upx 20upx 9upx 20upx;
	margin:0 25upx 0 0;
	float:right;
	color:#aaa9a9;
}
.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%;
    }
		.sold-out{
			z-index:10;
			width:140upx;
			height:140upx;
			background-color:black;
			position:absolute;
			top:0;
			left:0;
			opacity: 0.6;
			color:white;
			text-align:center;
			.sold-out-xj{
				line-height:140upx;
				font-size:28upx;
			}
			.hide{
				line-height:140upx;
				font-size:30upx;
			}
		}
  }
  .cmd-info_bx {
    padding-left: 167upx;
    & .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>