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

<template>
	<view class="item-cmd_bx">
		<view class="img_bx">
			<app-img @click="addEvent" :src="info.cover" alt="商品图" mode="aspectFit" :height="160" />
		</view>
		<view class="cmd-info_bx">
			<view class="tit" @click="addEvent">{{ info.itemName || "" }}</view>
			<view class="kc" @click="addEvent">库存 {{ info.stock }}</view>
			<view class="num-open_bx">
				<view class="price">￥{{ showPrice }}</view>
				<view class="open-bx" v-if="type == COMMODITY_TYPE.COMMON">
					<i class="iconfont iconjian" :class="delAnimationData?'animation':''" @click="delEvent" v-if="bigCount > 0 || smallCount > 0"></i>
					<text class="num" @click="customNum">
						<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" :class="addAnimationData?'animation':''" @click="addEvent"></i>
				</view>
				<view class="open-bx" v-else-if="type == COMMODITY_TYPE.CHANGE">
					<input class="change-input" v-model="changeAutoPrice" type="digit" placeholder="自动调价"  selection-start="0" selection-end="1" />
					<i :class="isShowSucceed?'position iconfont iconjihuo':'position'" ></i>
					<view class="btn-box" @click="changePriceEvent">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { COMMODITY_TYPE } from "@/utils/declare";
import AppImg from "@/components/app-img";
import { autoPriceByIdApi, changePriceByIdApi } from '@/api/product/index'
import productMins from "@/mixins/productContrapose";
import animationMins from "@/mixins/animation";
export default {
	name: "Commodity",
	components: {
		AppImg
	},
	mixins: [productMins,animationMins],
	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: {},
	},
	data() {
		return {
			COMMODITY_TYPE,
			isShowSucceed:false,
			changeAutoPrice:'',
			showPrice:0.00,
			ifFocus:false
		};
	},
	created() {},
	mounted() {
		if(this.info.priceLabel == 2){
			this.changeAutoPrice = this.info.price
		}
		this.showPrice = this.info.price
	},
	methods: {
		addEvent() {
			this.animationFun('add');
			// let params = {
			// 	...this.info,
			// 	bigCount: this.bigCount,
			// 	smallCount: this.smallCount
			// };
			// this.$emit("add", this.info,params);
			this.$emit("add", this.info);
		},
		delEvent() {
			this.animationFun('del');
			this.$emit("del", this.info);
		},
		async changePriceEvent(event) {
			let self = this
			await changePriceByIdApi({
				productId: this.info.id,
				price: this.changeAutoPrice
			}).then(res => {
				if(res.code == 1){
					this.showPrice = res.data.price
					this.isShowSucceed = true
					setTimeout(()=>{
						this.isShowSucceed = false
					},1000)
				}else{
					self.$msg(res.msg)
				}
			})
		},
		customNum() {
			console.log(this.info)
			if(!this.info.bigCount){
				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
			});
		}
	}
};
</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: 8px 0 24px;
		}
		& .num-open_bx {
			display: flex;
			align-items: center;
			& .price {
				font-size: 28px;
				color: #ff2842;
				flex: 1;
			}
			& .open-bx {
				display: flex;
				align-items: center;
				& .iconfont {
					//margin-left: 15rpx;
					color: #3385ff;
					font-size: 42px;
				}

				.position{
					display: block;
					width: 70rpx;
					text-align: center;
				}
				.iconcachu {
					margin: 0 6px 0 20px;
					color: #ccc;
					&.edit {
						color: #3385ff;
					}
				}
				& > .num {
					display: inline-block;
					width: 120rpx;
					height:45rpx;
					text-align:center;
					margin: 0 8px;
					color: #868686;
					border-radius: 22px;
					background-color: #f5f5f5;
					padding: 3px 0;
					font-size: 25rpx;
				}
				.change-input {
					width: 164px;
					height: 60px;
					line-height: 60px;
					text-align: center;
					background: #ffffff;
					border: 1px solid #dddddd;
					border-radius: 4px;
					font-size: 25px;
				}
				.btn-box{
					width: 100rpx;
					height: 60rpx;
					line-height: 60rpx;
					color: #ffffff;
					background: #3385ff;
					text-align: center;
					border-radius: 10rpx;
				}
			}
		}
	}
}

</style>