front-end/ghsApp/src/admin/changePrice/components/Item.vue

<template>
<view class="product">
	<view class="item-cmd_bx">
		<view class="img_bx">
			<view v-if="info.status == 2" class="sold-out">
				<view class="sold-out-xj">已下架</view>
			</view>
			<image :src="info.cover" style="width:160upx;height:160upx;" lazy-load="true" :lazy-load-margin="0"></image>
		</view>
		<view class="cmd-info_bx" @click="pageTo({url: '/admin/item/detail',query: {id: info.id}})">
			<view class="tit">{{ info.itemName || "" }}</view>
			<view class="kc">￥{{ parseFloat(info.price) }}</view>
			<view class="num-open_bx">
				<view>
					<view class="open-bx" >
						<text style="color:#333333;">￥{{ parseFloat(info.skPrice) }}</text>
						<view class="hd-price-area">
							<input class="change-input" @click.stop @blur="savePrice" @focus="modifyPrice = ''" placeholder-style="color:#CCCCCC" v-model="modifyPrice" type="digit" placeholder="花店价" />
						</view>
						<view class="sk-price-area">
							<input class="change-input" @click.stop @blur="saveSkPrice" @focus="skModifyPrice = ''" placeholder-style="color:#CCCCCC" v-model="skModifyPrice" type="digit" placeholder="散客价" />
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="level-price">
		<text>剩余 {{showStock}}</text>
	</view>
</view>
</template>
<script>
export default {
	name: "Commodity",
	components: {
	},
	props: {
		isPrice: {
			type: Boolean,
			default: true
		},
		isEdit: {
			type: Boolean,
			default: true
		},
		info: {
			required: true
		}
	},
	data() {
		return {
			modifyPrice:'',
			skModifyPrice:'',
			showStock:''
		};
	},
	watch: {
		modifyPrice: {
			handler(newValue) {
				this.skModifyPrice = Number(newValue)+Number(this.info.skMore)
				this.skModifyPrice = parseFloat(this.skModifyPrice.toFixed(2))
			}
		}
	},
	mounted(){
		let info = this.info
		this.showStock = ''
		if(Number(info.stock)>1){
			this.showStock += Math.trunc(info.stock)+info.bigUnit
		}
		let decimal = Number(info.stock) - Math.trunc(info.stock)
		decimal = decimal.toFixed(2)
		if(decimal > 0){
			this.showStock += parseFloat((decimal*info.ratio).toFixed(2))+info.smallUnit
		}
	},
	methods: {
		savePrice() {
			if(Number(this.modifyPrice)>0 && Number(this.skModifyPrice)){
				this.$emit("savePrice",this.modifyPrice,this.skModifyPrice,this.info.id)
			}
		},
		saveSkPrice(){
			if(Number(this.modifyPrice)>0 && Number(this.skModifyPrice)){
				this.$emit("savePrice",this.modifyPrice,this.skModifyPrice,this.info.id)
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.product{
	height:230upx;
	.level-price{
		display:flex;
		color:#999999;
		text-align: right;
		font-size:24upx;
		justify-content:space-around;
	}
}
.item-cmd_bx {
	height:160upx;
	position: relative;
	margin-bottom: 20upx;
	.img_bx {
		height: 160upx;
		width: 160upx;
		position: absolute;
		left: 0upx;
		top: 0upx;
		.sold-out{
			width:160upx;
			height:160upx;
			background-color:black;
			position:absolute;
			top:0;
			left:0;
			opacity: 0.6;
			color:white;
			text-align:center;
			.sold-out-xj{
				line-height:160upx;
				font-size:28upx;
			}
		}
	}
	.cmd-info_bx {
		position: relative;
		padding-left: 177upx;
		&.active{
			&:before{
				content: ' ';
				height: 22upx;
				width: 22upx;
				border-width: 2upx 2upx 0 0;
				border-color: #b2b2b2;
				border-style: solid;
				-webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
				transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
				position: absolute;
				top: 50%;
				margin-top: -12upx;
				right: 30upx;
			}
		}

		& .tit {
			font-size: 30upx;
			font-weight: bold;
			color: #333333;
			padding-top: 0upx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			width:200upx;
		}
		& .kc {
			color:red;
			font-size: 31upx;
			padding: 17upx 0 24upx;
			font-weight: 700;
		}
		& .num-open_bx {
			display: flex;
			align-items: center;
			& .price {
				font-size: 30upx;
				color: red;
				flex: 1;
			}
			& .open-bx {
				color:#999999;
				width:300upx;
				text{
					font-size: 24upx;
				}
				*.warn {
					color: $redColor;
				}
				.hd-price-area{
					width:190upx;
					position: absolute;
					top:10upx;
					right:0upx;
					.change-input {
						width: 150upx;
						height: 60upx;
						line-height: 60upx;
						text-align: center;
						background: #ffffff;
						border: 1upx solid #b4b4b4;
						border-radius: 4upx;
						font-size: 25upx;
						color:#777777;
						display:inline-block;
					}
					.change-text{
						font-size:22upx;
					}
				}
				.sk-price-area{
					width:190upx;
					position: absolute;
					top:95upx;
					right:0upx;
					.change-input {
						width: 150upx;
						height: 60upx;
						line-height: 60upx;
						text-align: center;
						background: #ffffff;
						border: 1upx solid #b4b4b4;
						border-radius: 4upx;
						font-size: 25upx;
						color:#777777;
						display:inline-block;
					}
					.change-text{
						font-size:22upx;
					}
				}
			}
		}
	}
}
</style>