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

<template>
	<view class="item-cmd_bx">
		<view class="img_bx">
			<app-img :src="info.cover" alt="商品图" mode="aspectFit" :height="160" />
		</view>
		<view class="cmd-info_bx">
			<view class="tit">
				{{ info.itemName || "" }}
			</view>

			<view class="kc">{{ info.rank }}级</view>
			<view class="num-open_bx">
				<view class="price">
					<text class="unit">￥</text><text>{{ info.price }}</text>
				</view>
				<view class="open-bx">
					<i class="iconfont iconjian" @click="delEvent" v-if="bigCount > 0 || smallCount > 0"></i>
					<text class="num" @click="customNum" v-if="bigCount > 0 || smallCount > 0">
						<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="addEvent"></i>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { COMMODITY_TYPE } from "@/utils/declare";
import AppImg from "@/components/app-img";
export default {
	name: "Commodity",
	components: {
		AppImg
	},
	props: {
		info: {
			required: true,
			type: Object,
			default() {
				return {};
			}
		},
		type: {
			type: String,
			default: COMMODITY_TYPE.COMMON
		},
		bigCount: {
			type: Number,
			default: 0
		},
		smallCount: {
			type: Number,
			default: 0
		},
		autoPrice: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			COMMODITY_TYPE
		};
	},
	created() {},
	methods: {
		addEvent() {
			this.$emit("add", this.info);
		},
		delEvent() {
			this.$emit("del", this.info);
		},

		removeEvent() {
			this.$emit("remove", this.info);
		},
		changePriceEvent(event) {
			const {
				detail: { value }
			} = event;
			this.$emit("changePrice", this.info, value);
		},
		customNum() {
			this.$emit("customNum", {
				...this.info,
				bigCount: this.bigCount,
				smallCount: this.smallCount
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.item-cmd_bx {
	position: relative;
	margin-bottom: 20px;
	.img_bx {
		height: 160px;
		width: 160px;
		position: absolute;
		left: 0px;
		top: 0px;
	}
	.cmd-info_bx {
		padding-left: 177px;
		& .tit {
			font-size: 28px;
			font-weight: 400;
			color: #333333;
			padding-top: 10px;
		}
		& .kc {
			color: #999999;
			font-size: 24px;
			padding: 10px 0 24px;
		}
		& .num-open_bx {
			display: flex;
			align-items: center;
			& .price {
				flex: 1;

				font-size: 32upx;
				color: #333;
				.unit {
					font-size: 22upx;
				}
			}
			& .open-bx {
				display: flex;
				align-items: center;
				& .iconfont {
					color: #4db0e4;
					font-size: 42px;
				}
				.icondelete {
					margin: 0 10px 0 30px;
					color: #ccc;
					&.edit {
						color: #4db0e4;
					}
				}
				& > .num {
					display: inline-block;
					width: 120rpx;
					text-align:center;
					margin: 0 8px;
					color: #868686;
					border-radius: 22px;
					background-color: #f5f5f5;
					padding: 3px 0;
					font-size: 30rpx;
				}
				.change-input {
					width: 164px;
					height: 60px;
					line-height: 60px;
					text-align: center;
					background: #ffffff;
					border: 1px solid #dddddd;
					border-radius: 4px;
					font-size: 28px;
				}
			}
		}
	}
}
</style>