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

<template>
	<view class="item-cmd_bx" @click="customNum">
		<view class="img_bx" style="background:#eeeeee" @click.stop="showBigImg">
			<image :src="info.cover" v-if="isImg"></image>
		</view>
		<view class="cmd-info_bx">
			<view class="tit" >{{ info.itemName || "" }}</view>
			<view class="kc num-open_bx flex-space" v-if="type == COMMODITY_TYPE.COMMON">
				<view v-if="!offPrice">
					<view class="flex-space" style="margin-bottom: 50rpx;margin-top:15rpx" v-if="Number(info.discountPrice)>0 && Number(info.discountPrice)<Number(info.price)">
						<view style="padding:3rpx 10rpx 3rpx 10rpx;text-align: center;color: red;border: 1px solid red;margin-right: 20rpx;line-height: 1;font-size: 20rpx">
							{{((Number(info.discountPrice)/Number(info.price)).toFixed(2)*10).toFixed(1)+'折'}}
						</view>
						<text style="text-decoration:line-through;color:#A9A9A9">¥{{info.price}}</text>
					</view>
					<view v-if="Number(info.discountPrice)>0 && Number(info.discountPrice)<Number(info.price)" class="price" >￥{{ info.discountPrice }}</view>
					<view v-else class="price" >￥{{ info.price }}</view>
				</view>

				<view class="price" v-else></view>
				<view style="text-align: right" >
					<view class="open-bx" >
						<i class="iconfont iconjian" :class="delAnimationData?'animation':''" @click.stop="delEvent" v-if="bigCount > 0 || smallCount > 0"></i>
						<text class="num" @click.stop="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.stop="addEvents"></i>
					</view>
					<text style="padding-right: 55rpx">还剩 {{ info.stock > showMaxStock ? showMaxStock : info.stock }}</text>
				</view>
			</view>
			<view class="num-open_bx flex-space" v-if="type == COMMODITY_TYPE.CHANGE">
				<view class="price" v-if="!offPrice">￥{{ showPrice }}</view>
				<view class="price" v-else></view>

				<view class="open-bx" style="padding-bottom: 40rpx" >
					<allSelectInput :inputType="'digit'" :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";
//报错暂时注释
//import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue'
export default {
	name: "Commodity",
	components: {
		AppImg,allSelectInput
		//easyLoadimage
	},
	mixins: [animationMins,allSelectInputMins],
	props: {
		info: {
			required: true,
			type: Object,
			default() {
				return {};
			}
		},
		type: {
			type: String,
			default: COMMODITY_TYPE.COMMON
		},
		bigCount: {
			type: Number,
			default: 0
		},
		scrollTop: {
			type: Number,
			default: 0
		},
		smallCount: {
			type: Number,
			default: 0
		},
		autoPrice: {},
		offPrice: {
			type: Boolean,
			default: false
		},
		offVerifyRepertory: {
			type: Boolean,
			default: false
		},
	},
	data() {
		return {
			COMMODITY_TYPE,
			isImg:false,
			isAlterMoney:false,
			isAloneAllActive: false,
			isAloneAllFocus: false,
			isShowSucceed:false,
			changeAutoPrice:'',
			showPrice:0.00,
			ifFocus:false,
			showMaxStock:230,//囤货时显示的最大库存
		};
	},
	created() {},
	mounted() {
		setTimeout(()=>{
			this.isImg = true;
		},100)
		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)
					}
				})
			}
		},
		showBigImg(){
			this.$emit("showBigCover", this.info);
		},
		addEvents() {
			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("库存不足");
					return
				}
			}

			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');
			console.log(this.info,'this.info')
			this.$emit("del", this.info);
		},
		changePriceEvent(event) {
			this.isFocus = false;
			this.isAlterMoney = true;

		},
		customNum() {
			if(this.info.stock<=0){uni.showToast({title:'库存不足',icon:'none'});return;}
			// 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: 140px;
		width: 140px;
		position: absolute;
		left: 0px;
		top: 0px;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.cmd-info_bx {
		padding-left: 160px;
		padding-bottom: 30rpx;
		& .tit {
			font-size: 32px;
			font-weight: 700;
			color: #333333;
			padding-top: 2rpx 0 2rpx 0;
		}
		& .kc {
			position: relative;
			color: #999999;
			font-size: 24px;
			.price{
				position: absolute;
				left: 0;
				bottom: 0;
			}
			//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>