front-end/hdApp/src/components/module/app-commodity.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" 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-top:20rpx" v-if="Number(info.discountPrice)>0">
						<view style="padding:2rpx 10rpx 5rpx 10rpx;text-align: center;color: red;border: 1px solid red;margin-right: 20rpx;line-height: 1;font-size: 20rpx">
							{{((Number(info.discountPrice)/Number(info.prePrice)).toFixed(2)*10).toFixed(1)+'折'}}
						</view>
						<text style="text-decoration:line-through;color:#A9A9A9">¥{{info.prePrice}}</text>
					</view>
					<view 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(info.variety)" v-if="bigCount > 0 || smallCount > 0"></i>
						<text class="num">
							<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(info.variety)"></i>
					</view>
				</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>
					<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 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
		},
		scrollTop: {
			type: Number,
			default: 0
		},
		smallCount: {
			type: Number,
			default: 0
		},
		discount:{
			type: Number,
			default: 1
		},
		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(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.animationFun('add');
				this.$emit("add", this.info);
			}else{
				//去特殊品种页
				this.$emit("goToSpecialVariety", this.info);
			}
		},
		delEvent(variety) {
			if(variety == 0){
				this.animationFun('del');
				console.log(this.info,'this.info')
				this.$emit("del", this.info);
			}else{
				//去特殊品种页
				this.$emit("goToSpecialVariety", this.info);
			}
		},
		changePriceEvent(event) {
			this.isFocus = false;
			this.isAlterMoney = true;

		},
		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: 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: 30px;
			font-weight: 700;
			color: #333333;
			padding-top: 0 0 2rpx 0;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			width:380rpx;
		}
		& .kc {
			position: relative;
			color: #999999;
			font-size: 24px;
			.price{
				position: absolute;
				left: 0;
				bottom: 0;
			}
		}
		& .num-open_bx {
			display: flex;
			align-items: center;
			& .price {
				font-size: 28px;
				color: #ff2842;
				flex: 1;
				top:60rpx;
				font-weight:550;
			}
			& .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>