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

<template>
	<view class="item-cmd_bx">
		<view class="img_bx" @click="addEvents">
			<app-img  :src="info.cover" alt="商品图" mode="aspectFit" :height="160" />
		</view>
		<view class="cmd-info_bx">
			<view class="tit" @click="addEvents">{{ info.itemName || "" }}</view>
			<view class="kc" @click="addEvents">库存 {{ info.stock }}</view>
			<view class="num-open_bx">
				<view class="price" v-if="!offPrice">￥{{ showPrice }}</view>
				<view class="price" v-else></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="addEvents"></i>
				</view>
				<view class="open-bx" v-else-if="type == COMMODITY_TYPE.CHANGE">
					<allSelectInput :isActive="isAloneAllActive" :isFocus="isAloneAllFocus" :value="changeAutoPrice" :placeholder="'自动调价'"
						@deleteInputVal="deleteInputVal" @initAllInput="initAloneAllInput" @moveAllInput="moveAllInput">
					</allSelectInput>
					<!--<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";

import allSelectInput from "@/components/module/allSelectInput";
import allSelectInputMins from "@/mixins/allSelectInput";
export default {
	name: "Commodity",
	components: {
		AppImg,allSelectInput
	},
	mixins: [animationMins,allSelectInputMins],
	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: {},
		offPrice: {
			type: Boolean,
			default: false
		},
	},
	data() {
		return {
			COMMODITY_TYPE,
			// isAllActive: false,
			// isAllFocus: false,
			isAlterMoney:false,
			isAloneAllActive: false,
			isAloneAllFocus: false,

			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: {
		//input点击删除按键
		deleteInputVal(){
			this.isAloneAllActive=false;
			this.changeAutoPrice = '';
		},
		//离开input
		moveAllInput(e){
			this.isAloneAllActive=false;
			this.isAloneAllFocus=false;
			// if(e==''){return}
			this.changeAutoPrice = e?e:0;
			if(this.isAlterMoney){
				this.isAlterMoney = false;
				// let self = this
				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{
						this.$msg(res.msg)
					}
				})
			}
		},
		addEvents() {
			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);
		},
		changePriceEvent(event) {
			this.isFocus = false;
			this.isAlterMoney = true;

		},
		customNum() {
			// if(!this.info.bigCount){
			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
			});
		}
	}
};
</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>