Selaa lähdekoodia

开单加减商品新增动画效果,实现点击图片文字加数量,默认显示input

jiangfeng 5 vuotta sitten
vanhempi
commit
d1ff816d0b

+ 6 - 0
ghsApp/src/App.vue

@@ -117,4 +117,10 @@ import store from '@/store'
 	page {
 		height: 100%;
 	}
+	.animation{animation:imgmove 0.3s infinite;}
+	@-webkit-keyframes imgmove{
+		0%{transform: scale(1);}
+		50%{transform: scale(1.1);}
+		100%{transform: scale(1);}
+	}
 </style>

+ 3 - 4
ghsApp/src/admin/billing/index.vue

@@ -44,8 +44,9 @@
 										getSelectItemById(productItem.id, classItem.classId).smallCount
 									"
 									@customNum="customNum"
-									@add="addCustomNumEvent"
-									@del="delAllEvent"
+									@add="addEvent"
+									@addOneEvent="addCustomNumEvent"
+									@del="delEvent"
 								></Commondity>
 							</view>
 							<!-- <Commondity
@@ -164,8 +165,6 @@ export default {
 			this.customData = {};
 		}, // 取消 确认
 		affirm(val) {
-			if(this.customData.bigCount==0 && this.customData.smallCount==0){
-				this.delAllEvent(this.customData)}
 			if (val.index === 0) {
 				this.modalCancel();
 			} else {

+ 2 - 2
ghsApp/src/admin/ghs/shop.vue

@@ -3,7 +3,7 @@
 		<view class="list-box">
 			<view v-if="!$util.isEmpty(list.data)">
 				<view class="flex list" v-for="(item, index) in list.data" :key="index">
-						<image :src="item.img"></image>
+						<image :src="item.avatar"></image>
 					<view class="list-msg">
 							<view>{{item.name}}</view>
 							<text>累积消费 {{item.expendAmount}}</text>
@@ -95,4 +95,4 @@
 			}
 		}
 	}
-</style>
+</style>

+ 29 - 15
ghsApp/src/components/module/app-commodity.vue

@@ -1,21 +1,21 @@
 <template>
 	<view class="item-cmd_bx">
 		<view class="img_bx">
-			<app-img :src="info.cover" alt="商品图" mode="aspectFit" :height="160" />
+			<app-img @click="addEvent" :src="info.cover" alt="商品图" mode="aspectFit" :height="160" />
 		</view>
 		<view class="cmd-info_bx">
-			<view class="tit">{{ info.itemName || "" }}</view>
-			<view class="kc">库存 {{ info.stock }}</view>
+			<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" @click="delEvent" v-if="bigCount > 0 || smallCount > 0"></i>
-					<text class="num" @click="customNum" v-if="bigCount > 0 || smallCount > 0">
+					<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" @click="addEvent"></i>
+					<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" />
@@ -32,12 +32,13 @@ 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],
+	mixins: [productMins,animationMins],
 	props: {
 		info: {
 			required: true,
@@ -58,7 +59,7 @@ export default {
 			type: Number,
 			default: 0
 		},
-		autoPrice: {}
+		autoPrice: {},
 	},
 	data() {
 		return {
@@ -78,15 +79,17 @@ export default {
 	},
 	methods: {
 		addEvent() {
-			let params = {
-				...this.info,
-				bigCount: this.bigCount,
-				smallCount: this.smallCount
-			};
-			this.$emit("add", this.info,params);
-			// this.$emit("add", this.info);
+			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) {
@@ -107,6 +110,15 @@ export default {
 			})
 		},
 		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,
@@ -157,6 +169,7 @@ export default {
 					color: #3385ff;
 					font-size: 42px;
 				}
+
 				.position{
 					display: block;
 					width: 70rpx;
@@ -204,4 +217,5 @@ export default {
 		}
 	}
 }
+
 </style>

+ 23 - 0
ghsApp/src/mixins/animation.js

@@ -0,0 +1,23 @@
+export default {
+	data() {
+		return {
+			addAnimationData: false,
+			delAnimationData: false,
+		};
+	},
+	methods: {
+		/**
+		* 加减商品动画效果
+		* */
+		animationFun(type){
+			if(type=='add'){
+				this.addAnimationData = true;
+				setTimeout(()=>{this.addAnimationData = false;},300)
+			}else{
+				this.delAnimationData = true;
+				setTimeout(()=>{this.delAnimationData = false;},300)
+			}
+
+		},
+	}
+};

+ 3 - 3
ghsApp/src/pagesStorehouse/allot/allotPut.vue

@@ -50,9 +50,9 @@
 				<AppWrapperEmpty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
 			</block>
 		</scroll-view>
-		<view class="app-footer open_btn">
-			<view @click="addEvent" class="admin-button-com middle blue">新增入库</view>
-		</view>
+		<!--<view class="app-footer open_btn">-->
+			<!--<view @click="addEvent" class="admin-button-com middle blue">新增入库</view>-->
+		<!--</view>-->
 	</view>
 </template>
 <script>