front-end/hdApp/src/pagesPurchase/components/item.vue

<template>
	<view class="item-cmd_bx" @click="customNum(info.variety)">
		<view class="img_bx" style="background:#eeeeee" @click.stop="showBigImg">
			<image :src="info.cover" lazy-load="true" :lazy-load-margin="0"></image>
		</view>
		<view class="cmd-info_bx">
			<view class="tit" >
				<text style="font-size:20upx;border:1upx solid #3385ff;color:white;background-color:#3385ff;margin-right:5upx;padding-left:5upx;padding-right:5upx;" 
				v-if="info.presell == 1">预售</text>

				<text style="font-size:20upx;border:1upx solid red;color:white;background-color:red;margin-right:5upx;padding-left:5upx;padding-right:5upx;" 
				v-if="info.limitBuy > 0">限购{{ info.limitBuy }}份</text>

				{{ info.name||''}}
			</view>
			<view class="kc num-open_bx flex-space">
				<view>
					<view class="flex-space" v-if="Number(info.discountPrice)>0" style="position:absolute;top:14upx;">
						<view style="padding:2upx 10upx 5upx 10upx;text-align: center;color: red;border: 1px solid red;margin-right: 20upx;line-height: 1;font-size: 20upx">
							{{parseFloat(((Number(info.discountPrice)/Number(info.prePrice)).toFixed(2)*10).toFixed(1))+'折'}}
						</view>
						<text style="text-decoration:line-through;color:#A9A9A9">¥{{parseFloat(info.prePrice)}}</text>
					</view>
					<view class="flex-space" style="color:#333333;position:absolute;top:13upx;" v-else>
						<block v-if="info.ratioType == 0">
						{{info.ratio}}{{info.smallUnit}}/{{info.bigUnit}}
						</block>
						<block v-else>
						若干{{info.smallUnit}}/{{info.bigUnit}}
						</block>
					</view>
					<view class="price" v-if="info.myLevel && info.myLevel == 2">
						<!--平潭满天星，不展示原价，比较特殊-->
						<text style="color:#a7a2a2;text-decoration:line-through;font-size:30upx;font-weight:bold;" v-if="Number(shopId)!=38322">￥{{parseFloat(info.defaultGradePrice) }}</text>
						<text style="font-weight:bold;margin-left:10upx;font-size:30upx;">会员￥{{ parseFloat(info.price) }}</text>
					</view>
					<view class="price" style="font-weight:bold;font-size:30upx;" v-else>￥{{ info.price ? parseFloat(info.price) : 0 }}</view>
				</view>
				<view style="text-align: right" >
					<view class="open-bx" >
						<i class="iconfont iconjian" @click.stop="delEvent(info.variety)" v-if="bigCount > 0 || smallCount > 0"></i>
						<text class="num">
							<text v-if="bigCount > 0" style="font-weight:bold;color:#3385ff;">{{ `${bigCount}` }}</text>
							<text v-if="smallCount > 0" >{{ `${smallCount}` }}</text>
						</text>
						<i class="iconfont iconzeng" @click.stop="addEvents(info.variety)"></i>
					</view>
					<stock v-if="showStock && showStock == '1'">
						<text v-if="Number(info.stock) > Number(info.stockWarning)" style="color:#333;margin-right:55upx;">还剩 {{ parseFloat(info.stock) }}</text>
						<text v-else style="color:red;font-weight:bold;margin-right:55upx;">还剩 {{ parseFloat(info.stock) }}</text>
					</stock>
					<stock v-else>
						<stock v-if="showSold && showSold == 1">
							<text style="color:#333;margin-right:55upx;">已售 {{ info.actualSold ? parseInt(info.actualSold):0 }}</text>
						</stock>
					</stock>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "item",
	mixins: [],
	props: {
		info: {
			required: true,
			type: Object,
			default() {
				return {};
			}
		},
		bigCount: {
			type: Number,
			default: 0
		},
		smallCount: {
			type: Number,
			default: 0
		},
		showSold:{
			type: Number,
			default: 0
		},
	shopId:{
		type: [Number, String],
		default: 0
	},
		showStock:{
			type: String,
			default: '0'
		},
		offVerifyRepertory: {
			type: Boolean,
			default: false
		},
	},
	data() {
		return {}
	},
	methods: {
		showBigImg(){
			this.$emit("showBigCover", this.info);
		},
		addEvents(variety) {
			if(variety == 0){
				const ratio = Number(this.info.ratio);
				if(this.offVerifyRepertory){
					if(this.info.stock<=0){
						uni.showToast({title:'没有货了',icon:'none'})
						return
					}
					if (Number(this.bigCount) * ratio + Number(this.smallCount) >Number(this.info.bigNum) * ratio + Number(this.info.smallNum)) {
						this.$msg("库存只剩"+this.info.bigNum);
						return
					}
				}
				this.$emit("add", this.info);
			}else{
				//去特殊品种页
				this.$emit("goToSpecialVariety", this.info);
			}
		},
		delEvent(variety) {
			if(variety == 0){
				this.$emit("del", this.info);
			}else{
				//去特殊品种页
				this.$emit("goToSpecialVariety", this.info);
			}
		},
		customNum(variety) {
			if(variety == 0){
				if(this.info.stock<=0){
					uni.showToast({title:'没有货了',icon:'none'})
					return
				}
				if(!this.bigCount && !this.smallCount){
					let params = {
						...this.info,
						bigCount: this.bigCount,
						smallCount: this.smallCount
					};
					this.$emit("addOneEvent", this.info,params);
				}
				this.$emit("customNum", {
					...this.info,
					bigCount: this.bigCount,
					smallCount: this.smallCount
				});
			}else{
				//去特殊品种页
				this.$emit("goToSpecialVariety", this.info);
			}
		}
	}
};
</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:30upx;
			font-weight:700;
			color: #333333;
			overflow: hidden;
			white-space: nowrap;
			width:390upx;
		}
		& .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;
				top:60upx;
				font-weight:550;
			}
			& .open-bx {
				display: flex;
				align-items: center;
				& .iconfont {
					color: #09C567;
					font-size: 55upx;
				}
				& > .num {
					display: inline-block;
					width: 100upx;
					height:40upx;
					line-height:40upx;
					text-align:center;
					margin: 0 8upx;
					color: #868686;
					border-radius: 22upx;
					background-color: #f5f5f5;
					font-size: 24upx;
				}
			}
		}
	}
}
</style>