baqing-shop/shop-app/components/goods/DetailBottomBar.vue

<template>
	<view class="bottom-bar">
		<view class="bottom-bar__shop" @click="emit('shop')">
			<u-icon name="home" size="22" color="#666" />
			<text class="bottom-bar__shop-text">店铺</text>
		</view>
		<view class="bottom-bar__actions">
			<button class="btn btn-cart" :disabled="disabled || busy" @click="emit('cart')">加入购物车</button>
			<button class="btn btn-buy" :disabled="disabled || busy" @click="emit('buy')">立即购买</button>
		</view>
	</view>
</template>

<script setup>
defineProps({
	disabled: {
		type: Boolean,
		default: false
	},
	/** 提交中：防抖加锁，禁止重复点击 */
	busy: {
		type: Boolean,
		default: false
	}
})
const emit = defineEmits(['cart', 'buy', 'shop'])
</script>

<style lang="scss" scoped>
.bottom-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	padding: 12rpx 24rpx;
	padding-bottom: calc(12rpx + env(safe-area-inset-bottom));
	background: #fff;
	box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
}
.bottom-bar__shop {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100rpx;
	flex-shrink: 0;
}
.bottom-bar__shop-text {
	margin-top: 4rpx;
	font-size: 22rpx;
	color: #666;
}
.bottom-bar__actions {
	flex: 1;
	display: flex;
	margin-left: 16rpx;
	gap: 16rpx;
}
.btn {
	flex: 1;
	height: 80rpx;
	line-height: 80rpx;
	margin: 0;
	padding: 0;
	font-size: 28rpx;
	border-radius: 40rpx;
	border: none;
}
.btn-cart {
	background: #fff5e6;
	color: #ff6f00;
}
.btn-cart[disabled] {
	opacity: 0.5;
}
.btn-buy {
	background: linear-gradient(90deg, #2e7d32, #4caf50);
	color: #fff;
}
.btn-buy[disabled] {
	opacity: 0.5;
}
</style>