baqing-shop/shop-app/components/order/OrderActionBar.vue

<template>
	<view v-if="actions && actions.length" class="order-action-bar">
		<button
			v-for="action in actions"
			:key="action.code"
			class="order-action-bar__btn"
			:class="{ 'order-action-bar__btn--primary': isPrimary(action.code) }"
			:disabled="disabled"
			@click.stop="emit('action', action.code)"
		>
			{{ action.label }}
		</button>
	</view>
</template>

<script setup>
import { ORDER_ACTION } from '@/constants/order'

defineProps({
	actions: {
		type: Array,
		default: () => []
	},
	disabled: {
		type: Boolean,
		default: false
	}
})

const emit = defineEmits(['action'])

function isPrimary(code) {
	return code === ORDER_ACTION.PAY || code === ORDER_ACTION.CONFIRM_RECEIVE
}
</script>

<style lang="scss" scoped>
.order-action-bar {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 16rpx;
	padding: 16rpx 0 0;
}
.order-action-bar__btn {
	margin: 0;
	min-width: 148rpx;
	height: 60rpx;
	line-height: 60rpx;
	padding: 0 24rpx;
	font-size: 26rpx;
	color: #333;
	background: #fff;
	border: 1rpx solid #ddd;
	border-radius: 30rpx;
}
.order-action-bar__btn--primary {
	color: #fff;
	background: linear-gradient(135deg, #43a047 0%, #2e7d32 100%);
	border-color: transparent;
}
.order-action-bar__btn[disabled] {
	opacity: 0.5;
}
</style>