新增购物车数量变化动画

components/OrderQrCode/index.vue

 <template>
 	<div>
-		<u-popup :show="show"  :round="10"  mode="bottom" @close="close"   :safeAreaInsetBottom="false" zIndex="10078" >
-			<view class="bigBox" :style="{'height':'94vh'}" @touchstart="start" @touchend="end" ref="op">
+		<u-popup :show="show"  :round="10"  mode="bottom" @close="close"   :safeAreaInsetBottom="false" zIndex="10078" :customStyle="popupStyle">
+			<view class="bigBox" :style="{'height':'94vh'}" @touchstart="start" @touchmove="move" @touchend="end" ref="op">
 				<div class="order_flow" >
 					<div class="code">取单码 {{ orderInfo.orderNum }}</div>
 					<!-- <image mode="scaleToFill" :src="qrCode" class="qr_code"></image> -->
@@ -42,7 +42,11 @@ export default {
 			show: false,
 			clientYStart:0,
 			clientYEnd:0,
-			bigBox:{}
+			bigBox:{},
+			popupStyle:{
+				'top':'0rpx',
+				'transform':'translate(0rpx, 0rpx)'
+			}
 		}
 	},
 	computed: {
@@ -84,17 +88,34 @@ export default {
 		start(e) {
 				this.clientYStart = e.changedTouches[0].clientY
 			},
+		move(e) {
+			// this.clientYEnd = e.changedTouches[0].clientY;
+			// const val = parseInt((this.clientYStart-this.clientYEnd))
+			// if(val<0){
+			// 	this.popupStyle.transform = `translateY(${-val}px)`
+			// }
+		},
 		end(e) {
 			this.clientYEnd = e.changedTouches[0].clientY;
 			const val = parseInt((this.clientYStart-this.clientYEnd))
+			console.log(val)
 			if(val<-300){
+				console.log('滑动了：'+val + ',关闭')
 				this.close()
+			}else{
+				console.log('滑动了：'+val + ',回到顶部')
+				this.popupStyle.transform = 'translate(0rpx, 0rpx)'
 			}
+			// this.popupStyle.top = val+'rpx'
+			// if(val<-300){
+			// 	this.close()
+			// }
 		},
 		close() {
 			this.show = false;
 		},
 		open(data, path) {
+			// this.popupStyle.transform = 'translate(0rpx, 0rpx)'
 			this.show = true;
 			this.orderInfo = data;
 			// console.log("order:"+JSON.stringify(this.orderInfo));

components/shopCar/shopCar.vue

@@ -67,7 +67,7 @@
 			<view @click.stop="openShopCar" class="end-left">
 				<view style="display:flex">
 					<view class="car-img">
-						<text class="badge" v-if="totalNum">{{ totalNum }}</text>
+						<text class="badge" :animation="animationData" v-if="totalNum" >{{ totalNum }}</text>
 					</view>
 					<text class="shopClassStyle">￥{{ Utils.isInteger(totalPrice.toFixed(2)) }}</text>
 				</view>
@@ -105,14 +105,17 @@ export default {
 			shopCar:0,
 			BottomSafeHeight:0,
 			bottomPadding:0,
+			animation:'',
+            animationData: {},
+			timer:0
 		}
 	},
 	created() {
 		$EventBus.$off('updateCar');
 	},
 	mounted() {
+		this.animation = uni.createAnimation()
 		this.BottomSafeHeight = uni.getStorageSync('BottomSafeHeight')||10
-		console.log(this.BottomSafeHeight+132+100)
 		this.bottomPadding = this.BottomSafeHeight+132+92
 		this.shopCar = uni.getStorageSync('shopCar')
 		console.log(this.shopCar)
@@ -134,6 +137,23 @@ export default {
 				this.showShopCar = !this.showShopCar;
 			})
 		},
+
+		// 翻转动画
+		turnAnimation(val) {
+			if(this.goods.length>0){
+				this.$nextTick(()=>{
+					this.animation.opacity(0.5).step({duration:100}).rotateY(90).opacity(1).step({duration:200}).rotateY(30).step({duration:50}).rotateY(-60).step({duration:100}).rotateY(0).step({duration:50})
+					this.animationData = this.animation.export()
+					this.timer =  setTimeout(() => {
+						this.animation.rotateY(0).step({duration:100})
+						this.animationData = this.animation.export()
+						clearTimeout(this.timer)
+					}, 550);
+				})
+			}
+
+		},
+
 		closeT(e) {
 			this.showShopCar = false;
 		},
@@ -232,6 +252,11 @@ export default {
 			$EventBus.$emit('updateCar');
 		}
 	},
+	watch: {
+		totalNum(val){
+			this.turnAnimation(val)
+		}
+	},
 	computed: {
 		userms() {
 			return this.$store.getters.Authorization;

pages/menu/menu.vue

 <template>
 	<view class="menu-box">
 		<view class="menu-banner" :style="{'height':buied?'360rpx':'450rpx'}">
-			<image :src="'https://s3.bmp.ovh/imgs/2022/07/01/6afb82b8b0b7145e.gif'"/>
+			<image :src="'https://s3.bmp.ovh/imgs/2022/07/02/2cfab823b35322e3.gif'"/>
 			<!-- <video autoplay muted loop :controls="false" :enable-progress-gesture="false" objectFit='cover' src="http://songclound.oss-cn-hongkong.aliyuncs.com/2022/06/27/71d36be0ed966.mp4" /> -->
 			<view class="shop-info" :style="'top:100rpx'">
 				<view class="shop-box">