aiot-app/pages/pda/components/bottomOperate.vue

<template>
	<view class="bottom_box">

		<view class="nav_box rx-cc" @click="open">
			<image class="open_icon" :class="{open_icon_reversal : isOperate}" src="~@/static/pda/open.svg"></image>
		</view>

         
		<view class="operate_list" v-show="isOperate">
			<view v-for="(item, index) in btnList[state]" :key="index" class="list rx-bc" @click="operate(item.type)">
				<view class="round">{{index + 1}}</view>
				<view class="name">{{item.name}}</view>
				<image class="arrow_right" src="~@/static/pda/arrow_right.svg"></image>
			</view>
			
			

			<view v-for="(item, idx) in btnsList" :key="idx+ 'btns'" class="list rx-bc" @click="operate(item.type)">
				<view class="round">{{idx + 1}}</view>
				<view class="name">{{item.name}}</view>
				<image class="arrow_right" src="~@/static/pda/arrow_right.svg"></image>
			</view>
		</view>


		<view class="btn_box">
			<view class="btn">暂停</view>
			<view class="btn">终止</view>
			<view class="btn">转派</view>
			<view class="btn">工单交接</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			state: String,

			btns: {
				type: Array,
				default: () => []
			}
		},

	  watch: {
		btns: {
			immediate: true,
			deep: true,
			handler(newVal) {
				this.btnsList = []
			  this.btnsList = newVal
			}
		},  
	  },

		data() {
			return {
				isOperate: false,

                btnsList: [],
				btnList: {
					'1': [{
							name: '领料',
							type: 'picking'
						},
						{
							name: '投料',
							type: 'feeding'
						},
						{
							name: '报工',
							type: 'jobBooking'
						},


					]
				}
			}
		},

		methods: {
			open() {
				this.isOperate = !this.isOperate
			},

			operate(type) {
				this.$emit('operate', type)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bottom_box {
		background: #fff;
	}

	.nav_box {
		width: 750rpx;
		height: 40rpx;
		background: $theme-color;

		.open_icon {
			width: 48rpx;
			height: 48rpx;
		}

		.open_icon_reversal {
			transform: scaleY(-1);
			/* 垂直翻转 */

		}
	}

	.operate_list {
		margin: 0 32rpx;

		.list {
			border-radius: 8rpx;
			border: 1rpx solid $theme-color;
			background: #F0F8F2;
			height: 64rpx;
			padding: 0rpx 16rpx;
			margin-top: 16rpx;

		}

		.round {
			width: 32rpx;
			height: 32rpx;
			line-height: 32rpx;
			text-align: center;
			border-radius: 50%;
			background: $theme-color;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			color: #fff;
		}

		.name {
			font-family: PingFang HK;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 600;
			color: $theme-color;
		}

		.arrow_right {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.btn_box {
		display: flex;
		padding: 16rpx 32rpx;
		align-items: flex-start;
		gap: 16rpx;
		align-self: stretch;

		.btn {
			width: 160rpx;
			height: 64rpx;
			line-height: 64rpx;
			background: $theme-color;
			text-align: center;
			border-radius: 8rpx;
			color: #fff;
			font-family: PingFang HK;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 600;

		}
	}
</style>