Pārlūkot izejas kodu

购物车可拖动

chenrui 4 gadi atpakaļ
vecāks
revīzija
4fe8e01ffe

+ 157 - 0
components/drag-button/drag-button.vue

@@ -0,0 +1,157 @@
+<template>
+	<view>
+		<view
+			id="_drag_button"
+			class="drag"
+			:style="'left: ' + left + 'px; top:' + top + 'px;'"
+			@touchstart="touchstart"
+			@touchmove.stop.prevent="touchmove"
+			@touchend="touchend"
+			@click.stop.prevent="click"
+			:class="{transition: isDock && !isMove }"
+		>
+			<!-- <text>{{ text }}</text> -->
+			<view>
+				<u-badge absolute :offset="[15,10]" type="error" :count="badge"></u-badge>
+				<u-image width="70rpx" height="70rpx" :src="dragPic"></u-image>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'drag-button',
+		props: {
+			isDock:{  //  是否启用自动停靠
+				type: Boolean,
+				default: false
+			},
+			existTabBar:{  //  当前页面是否包含tabbar
+				type: Boolean,
+				default: false
+			},
+			dragPic: {  //  图标显示时,图标链接
+				type: String,
+				default: ''
+			},
+			badge: {  //  图标显示时,角标数字
+				type: [Number, String],
+				default: ''
+			}
+		},
+		data() {
+			return {
+				top:0,
+				left:0,
+				width: 0,
+				height: 0,
+				offsetWidth: 0,
+				offsetHeight: 0,
+				windowWidth: 0,
+				windowHeight: 0,
+				isMove: true,
+				edge: 10,
+				text: '按钮'
+			}
+		},
+		mounted() {
+			const sys = uni.getSystemInfoSync();
+			
+			this.windowWidth = sys.windowWidth;
+			this.windowHeight = sys.windowHeight;
+			
+			// #ifdef APP-PLUS
+				this.existTabBar && (this.windowHeight -= 50);
+			// #endif
+			if (sys.windowTop) {
+				this.windowHeight += sys.windowTop;
+			}
+			console.log(sys)
+			
+			const query = uni.createSelectorQuery().in(this);
+			query.select('#_drag_button').boundingClientRect(data => {
+				// console.log(data,'--------data')
+				this.width = data.width;
+				this.height = data.height;
+				this.offsetWidth = data.width / 2;
+				this.offsetHeight = data.height / 2;
+				this.left = this.windowWidth - this.width - this.edge;
+				// this.top = this.windowHeight - this.height - this.edge;
+				this.top = this.windowHeight * 0.65;
+			}).exec();
+		},
+		methods: {
+			click() {
+				this.$emit('btnClick');
+			},
+			touchstart(e) {
+				this.$emit('btnTouchstart');
+			},
+			touchmove(e) {
+				// 单指触摸
+				if (e.touches.length !== 1) {
+					return false;
+				}
+				
+				this.isMove = true;
+				
+				this.left = e.touches[0].clientX - this.offsetWidth;
+				
+				let clientY = e.touches[0].clientY - this.offsetHeight;
+				// #ifdef H5
+					clientY += this.height;
+				// #endif
+				let edgeBottom = this.windowHeight - this.height - this.edge;
+
+				// 上下触及边界
+				if (clientY < this.edge) {
+					this.top = this.edge;
+				} else if (clientY > edgeBottom) {
+					this.top = edgeBottom;
+				} else {
+					this.top = clientY
+				}
+				
+			},
+			touchend(e) {
+				if (this.isDock) {
+					let edgeRigth = this.windowWidth - this.width - this.edge;
+					
+					if (this.left < this.windowWidth / 2 - this.offsetWidth) {
+						this.left = this.edge;
+					} else {
+						this.left = edgeRigth;
+					}
+					
+				}
+				
+				this.isMove = false;
+				
+				this.$emit('btnTouchend');
+			},
+		}}
+</script>
+
+<style lang="scss">
+	.drag {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		// background-color: rgba(0, 0, 0, 0.5);
+		background-color: #fff;
+		box-shadow: 0 0 6upx rgba(0, 0, 0, 0.4);
+		color: $uni-text-color-inverse;
+		width: 80upx;
+		height: 80upx;
+		border-radius: 50%;
+		font-size: $uni-font-size-sm;
+		position: fixed;
+		z-index: 999999;
+		
+		&.transition {
+			transition: left .3s ease,top .3s ease;
+		}
+	}
+	
+</style>

+ 33 - 7
components/uni-cart-fix/uni-cart-fix.vue

@@ -1,15 +1,32 @@
 <template>
 	 <view class="cart-fix" @click="toCart">
-	 	<u-image width="70rpx" height="70rpx" src="/static/cart.png"></u-image>
-	 	<u-badge absolute :offset="[15,10]" type="error" :count="count"></u-badge>
+	 	<!-- <u-image width="70rpx" height="70rpx" src="/static/cart.png"></u-image>
+	 	<u-badge absolute :offset="[15,10]" type="error" :count="count"></u-badge> -->
+		<drag-button
+			:isDock="true"
+			:existTabBar="true"
+			:dragPic="dragPic"
+			:badge="count"
+			@btnClick="toCart"
+			@btnTouchstart="btnTouchstart"
+			@btnTouchend="btnTouchend"
+		/>
 	 </view>
 </template>
 	<script>
+		import dragButton from "@/components/drag-button/drag-button.vue";
 		export default {
+			components: {
+			    dragButton
+			},
 			props:{
 				closeCurPage:{
 					type: Boolean,
 					default: false
+				},
+				dragPic: {
+					type: String,
+					default: ''
 				}
 			},
 			computed: {
@@ -36,7 +53,16 @@
 							})
 						}
 					})
-				}
+				},
+				btnClick() {
+					console.log('btnClick');
+				},
+				btnTouchstart() {
+					console.log('btnTouchstart');
+				},
+				btnTouchend() {
+					console.log('btnTouchend');
+				},
 			},
 		}
 	</script>
@@ -45,11 +71,11 @@
 	.cart-fix{
 		position: fixed;
 		z-index: 100000;
-		background: rgba($color: #ffffff, $alpha: 0.7);
-		padding: 10upx;
-		border-radius: 100%;
+		// background: rgba($color: #ffffff, $alpha: 0.7);
+		// padding: 10upx;
+		// border-radius: 100%;
 		bottom: 40%;
 		right: 2%;
-		box-shadow: 3upx 3upx 8upx #ccc;
+		// box-shadow: 3upx 3upx 8upx #ccc;
 	}
 </style>

+ 3 - 2
pages/goods/goods.vue

@@ -6,7 +6,7 @@
 			<view class="loadmore"><u-loadmore @loadmore="loadmore" :status="status" /></view>
 		</view>
 		<!-- 购物车 -->
-		<uni-cart-fix></uni-cart-fix>
+		<uni-cart-fix :dragPic="dragPic"></uni-cart-fix>
 	</view>
 </template>
 
@@ -24,7 +24,8 @@
 				pageSize: 10,
 				goodsList:[],
 				status: 'loadmore',
-				count: 0
+				count: 0,
+				dragPic: '/static/cart.png',  //  购物车图标
 			};
 		},
 		onLoad(opts) {

+ 3 - 2
pages/goods/goodsDetail.vue

@@ -52,7 +52,7 @@
 			<view><u-button :custom-style="toOrderButton" type="error" @click="toOrder()">立即下单</u-button></view>
 		</view>
 		<!-- 购物车 -->
-		<uni-cart-fix :closeCurPage="true"></uni-cart-fix>
+		<uni-cart-fix :closeCurPage="true" :dragPic="dragPic"></uni-cart-fix>
 	</view>
 </template>
 
@@ -78,7 +78,8 @@
 				nums:1, // 商品数量
 				id: '',
 				goodContent: null,
-				goldLimit: 0
+				goldLimit: 0,
+				dragPic: '/static/cart.png',  //  购物车图标
 			};
 		},
 		onLoad(opts) {

+ 2 - 1
pages/goods/index.vue

@@ -17,7 +17,7 @@
 			</view>
 		</view>
 		<!-- 购物车 -->
-		<uni-cart-fix></uni-cart-fix>
+		<uni-cart-fix :dragPic="dragPic"></uni-cart-fix>
 	</view>
 </template>
 
@@ -36,6 +36,7 @@
 				imageTopList:[],
 				goodsList:[], // 商品
 				goodsType:[], // 商品分类
+				dragPic: '/static/cart.png',  //  购物车图标
 			}
 		},
 		onLoad() {