front-end/ghsApp/src/components/module/app-commodity.vue

<template>
	<view class="item-cmd_bx" @click="changeItemNum(info.variety)">
		<view class="img_bx" style="background:#eeeeee">
			<image :src="info.cover"></image>
		</view>
		<view class="cmd-info_bx">
			<view class="tit" >{{ info.itemName || "" }}</view>
			<view class="kc num-open_bx flex-end">
				<view class="price csss">￥{{ parseFloat(info.price) }}</view>
				<view style="text-align: right" >
					<view class="open-bx" >
						<i class="iconfont iconjian" @click.stop="delEvent()" v-if="bigCount > 0 || smallCount > 0"></i>
						<text class="num" >
							<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="addEvents()"></i>
					</view>
					<text v-if="Number(info.stock) > Number(info.stockWarning)" style="padding-right: 55upx">还剩 {{ parseFloat(info.stock) }}</text>
					<text v-else style="padding-right: 55upx;color:red;font-weight:450;">还剩 {{ 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
		},
		pageType:{
			type: String,
			default: ''
		}
	},
	data() {
		return {
			isAlterMoney:false,
			isAloneAllActive: false,
			isAloneAllFocus: false,
			changeAutoPrice:'',
			showPrice:0.00,
			oldPrice:0.00,
			ifFocus:false,
			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() {},
	computed: {
	},
	mounted() {

		if(this.info.priceLabel == 2){
			this.changeAutoPrice = this.info.price
		}
		this.showPrice = this.info.priceLabel==1?null:this.info.price
		this.oldPrice = (Number(this.info.cost) + Number(this.info.addPrice)).toFixed(2)

		this.bigCount = this.info.bigCount
		this.smallCount = this.info.smallCount
		this.userPrice = this.info.userPrice

	},
	methods: {
		addEvents() {
			const ratio = Number(this.info.ratio);
			if(this.checkStock){
				if(this.info.stock<=0){
					this.$msg("库存不足")
					this.$util.noStockRemind()
					return
				}
				if (Number(this.bigCount) * ratio + Number(this.smallCount) >= Number(this.info.bigNum) * ratio + Number(this.info.smallNum)) {
					this.$msg("库存不足")
					this.$util.noStockRemind()
					return
				}
			}
			this.$emit("add", this.info);			
		},
		delEvent() {
			this.$emit("del", this.info)
		},
		//通过弹框来修改花材数据（区别于点+-号修改花材）
		changeItemNum() {
			if(this.checkStock){
				if(this.info.stock<=0){
					this.$util.noStockRemind()
					uni.showToast({title:'库存不足',icon:'none'})
					return;
				}
			}
			if(!this.bigCount && !this.smallCount){
				//首次选花材
				let params = { ...this.info, bigCount: this.bigCount, smallCount: this.smallCount, userPrice: this.userPrice, };
				this.$emit("groupDataBeforeShowModel", this.info,params);
			}else{
				this.$emit("showAddModel", { ...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;
		}
		& .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: 42upx;
				}
				.position{
					display: block;
					width: 70upx;
					text-align: center;
				}
				.iconcachu {
					margin: 0 6upx 0 20upx;
					color: #ccc;
					&.edit {
						color: #3385ff;
					}
				}
				& > .num {
					display: inline-block;
					width: 120upx;
					height:45upx;
					text-align:center;
					margin: 0 8upx;
					color: #868686;
					border-radius: 22upx;
					background-color: #f5f5f5;
					padding: 3upx 0;
					font-size: 25upx;
				}
				.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>