front-end/ghsApp/src/components/module/app-commodity.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 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 || "" }}
				<text v-if="info.variety && info.variety ==1" class="show-color"></text>
			</view>
			<view class="kc" style="position:absolute;top:55upx;">		
				<block v-if="info.ratioType == 0">{{info.ratio}}{{info.smallUnit}}/{{info.bigUnit}}</block>
				<block v-else>若干{{info.smallUnit}}/{{info.bigUnit}}</block>
			</view>
			<view class="kc num-open_bx flex-end">
				<view class="price" style="position:absolute;top:55upx;font-weight:bold;">
					￥{{ parseFloat(info.price) }}
					<text v-if="info.reachNum && info.reachNum>0 && info.reachNumDiscount && info.reachNumDiscount>0" style="font-weight:normal;color:#3385FF;margin-left:20upx;">
						满{{info.reachNum}}↓{{info.reachNumDiscount?parseFloat(info.reachNumDiscount):0}}
					</text>
				</view>
				<view style="text-align: right;margin-right:20upx;" >
					<view class="open-bx" >
						<i class="iconfont iconjian" @click.stop="reduceItemFn()" v-if="bigCount > 0 || smallCount > 0"></i>
						<text class="num" >
							<text style="font-weight:bold;color:#3385ff;" v-if="bigCount > 0">{{ `${bigCount}` }}</text>
							<text v-if="smallCount > 0">{{ `${smallCount}` }}</text>
						</text>
						<i class="iconfont iconzeng" @click.stop="addItemFn()"></i>
					</view>
					<text v-if="Number(info.stock) > Number(info.stockWarning)" style="color:#333;margin-right:65upx;">还剩 {{ parseFloat(info.stock) }}</text>
					<text v-else style="color:red;font-weight:bold;margin-right:65upx;">还剩 {{ parseFloat(info.stock) }}</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	name: "Commodity",
	components: {},
	mixins: [],
	props: {
		info: {
			required: true,
			type: Object,
			default() {
				return {};
			}
		},
		scrollTop: {
			type: Number,
			default: 0
		},
		autoPrice: {},
		isActive: {
			type: Boolean,
			default: false
		},
		checkStock: {
			type: Boolean,
			default: false
		},
		isAlterPrice: {
			type: Boolean,
			default: false
		},
		selectJobType:{
			type: String,
			default: ''
		}
	},
	data() {
		return {
			ifFocus:false,
			bigCount:0,
			smallCount:0,
			userPrice:0
		};
	},
	watch:{
		info:{
			handler(newValue){
				this.bigCount = newValue.bigCount
				this.smallCount = newValue.smallCount
				this.userPrice = newValue.userPrice
			},
			deep:true
		}
	},
	created() {},
	computed: {
	},
	mounted() {
		this.bigCount = this.info.bigCount
		this.smallCount = this.info.smallCount
		this.userPrice = this.info.userPrice
	},
	methods: {
		delProduct(info){
			this.$emit("delProduct", info)
		},
		addItemFn () {
			if(this.info && this.info.variety == 1 && this.selectJobType == 'bill'){
				//小菊多颜色选择页
				this.$emit("goToSpecialVariety", this.info);
				return false
			}
			this.$emit("replaceItemFn", this.info,0,'add')
		},
		reduceItemFn() {
			if(this.info && this.info.variety == 1 && this.selectJobType == 'bill'){
				//小菊多颜色选择页
				this.$emit("goToSpecialVariety", this.info);
				return false
			}
			this.$emit("replaceItemFn", this.info,0,'sub')
		},
		showAddModelFn() {
			if(this.info && this.info.variety == 1 && this.selectJobType == 'bill'){
				//小菊多颜色选择页
				this.$emit("goToSpecialVariety", this.info);
				return false
			}
			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: 160upx;
		padding-bottom: 30upx;
		& .tit {
			font-size: 32upx;
			font-weight: 700;
			color: #333333;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			width:380upx;
		}
		.show-color{
			display:inline-block;
			width:25upx;
			height:25upx;
			background-color:rgb(9, 199, 9);
			border-radius:15upx;
			border:none;
			margin-left:16upx;
		}
		& .kc {
			position: relative;
			color: #999999;
			font-size: 24upx;
			.price{
				position: absolute;
				left: 0;
				bottom: 0;
			}
		}
		& .num-open_bx {
			display: flex;
			align-items: center;
			& .price {
				font-size: 28upx;
				color: #ff2842;
				flex: 1;
			}
			& .open-bx {
				display: flex;
				align-items: center;
				& .iconfont {
					color: #3385ff;
					font-size: 55upx;
				}
				.position{
					display: block;
					width: 70upx;
					text-align: center;
				}
				.iconcachu {
					margin: 0 6upx 0 20upx;
					color: #ccc;
					&.edit {
						color: #3385ff;
					}
				}
				& > .num {
					display: inline-block;
					width: 100upx;
					height:50upx;
					line-height:50upx;
					text-align:center;
					margin: 0 20upx;
					color: #868686;
					border-radius: 22upx;
					background-color: #f5f5f5;
					font-size: 28upx;
				}
				.change-input {
					width: 164upx;
					height: 60upx;
					line-height: 60upx;
					text-align: center;
					background: #ffffff;
					border: 1upx solid #dddddd;
					border-radius: 4upx;
					font-size: 25upx;
				}
				.btn-box{
					width: 100upx;
					height: 60upx;
					line-height: 60upx;
					color: #ffffff;
					background: #3385ff;
					text-align: center;
					border-radius: 10upx;
				}
			}
		}
	}
}
</style>