剩余模块：生产入库，销售出库

components/tools/tools.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="float-container">
+	<!-- <view class="float-container">
 		<view v-for="(item,index) of props.type" :key="index">
 			<view class="sub-btn" :style="getPosition(index)" v-if="item === 'defaultPopup'"
 				:class="{active: isOpen}" @click.stop="handleClick('defaultPopup')">
@@ -11,91 +11,86 @@
 			</view>
 		</view>
 		<view class="main-btn" :class="{active: isOpen}" @click.stop="toggleMenu()">＋</view>
-	</view>
+	</view> -->
+
+	<uni-fab :show="state.show" ref="fab" :pattern="state.pattern" :content="state.content"
+		:horizontal="state.horizontal" :vertical="state.vertical" :direction="state.direction" @trigger="trigger"
+		@fabClick="fabClick" />
 </template>
 
 <script lang="ts" setup>
-	import { reactive, ref, defineEmits,defineProps } from 'vue';
+	import { reactive, ref, defineEmits, defineProps, computed, watch } from 'vue';
 	import i18n from '../../locale/index'
 	import { useI18n } from 'vue-i18n'
 	const getI18n = useI18n()
 	const { t, locale } = getI18n
 	const emit = defineEmits(['scanRecord', 'defaultPopup']);
 	const props = defineProps({
-		type:{
-			type:Array,
+		type: {
+			type: Array,
 			default: () => {
-				return ['scanRecord','defaultPopup']
+				return ['scanRecord', 'defaultPopup']
 			}
 		}
 	})
-	const isOpen = ref(false);	
-	const showPopup = ref(false);
-	const toggleMenu = () => { isOpen.value = !isOpen.value; }
-	const getPosition = (index:any) => {
-		if (!isOpen.value) return {}
-		return {
-			transform: `translate(${5}rpx, ${-((160*index)+160)}rpx)`
-		}
+	const state = reactive({
+		show: false,
+		horizontal: 'right',
+		vertical: 'bottom',
+		direction: 'horizontal',
+		pattern: {
+			color: '#7A7E83',
+			backgroundColor: '#fff',
+			selectedColor: '#007AFF',
+			buttonColor: '#007AFF',
+			iconColor: '#fff'
+		},
+		content: [
+			{
+				iconPath: '../../static/icons/mr.png',
+				selectedIconPath: '../../static/icons/mr-ac.png',
+				text: computed(() => t('public.mrz')),
+				emitText: 'defaultPopup',
+				active: false
+			},
+			{
+				iconPath: '../../static/icons/jl.png',
+				selectedIconPath: '../../static/icons/jl-ac.png',
+				text: computed(() => t('public.smjl')),
+				emitText: 'scanRecord',
+				active: false
+			},
+		]
+	})
+	watch(() => props.type, () => {
+		state.content.forEach((item:any,index:any) => {
+			if(props.type.indexOf(item.emitText) === -1){
+				state.content.splice(index,1)
+			}
+		})
+	}, { immediate: true, deep: true })
+	const trigger = (e : any) => {
+		state.show = false
+		console.log(e)
+		console.log(e.item.emitText);
+		emit(e.item.emitText)
+		
 	}
-	const handleClick = (action:any) => {
-		emit(action);
-		isOpen.value = !isOpen.value;
+	const fabClick = (e : any) => {
+		console.log(e)
 	}
-	const open = () => { showPopup.value = true; }
-	const close = () => { showPopup.value = false; }
 </script>
 
 <style scoped lang="scss">
-	.float-container {
-		position: fixed;
-		right: 30rpx;
-		bottom: 30rpx;
-		z-index: 9;
-	
-		.main-btn {
-			position: relative;
-			width: 130rpx;
-			height: 130rpx;
-			border-radius: 50%;
-			background: #3370FF;
-			color: white;
-			font-size: 50rpx;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.2);
-			transition: transform 0.3s;
-			z-index: 10000;
-		}
-	
-		.main-btn.active {
-			transform: rotate(135deg);
-			// transform: translate(-50%, -50%);
-		}
-	
-	
-		.sub-btn {
-			position: absolute;
-			width: 130rpx;
-			height: 130rpx;
-			border-radius: 50%;
-			background: white;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			font-size: 40rpx;
-			opacity: 0;
-			transform: translate(0, 0);
-			transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
-			box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.1);
-	
-			font-size: 25rpx;
-		}
-	
-		.sub-btn.active {
-			opacity: 1;
-		}
-	
+	:deep(.uni-fab) {
+		box-shadow: 0 1px 5px 2px #efeaea !important;
+	}
+
+	:deep(.uni-fab__content--other-platform) {
+		box-shadow: 0 1px 5px 2px #e3e3e3 !important;
+	}
+
+	:deep(.uni-fab__item) {
+		margin: 0 8rpx;
 	}
 </style>