新增限时折扣并增加头部底部按钮公共组件

pageMarket/components/FooterBtn.vue

@@ -1,16 +1,18 @@
 <template>
-	<view class="fixed-btn" id="fixedBtn">
-		<div class="btn">
-			<u-button type="primary" :shape="shape" size="large">添加</u-button>
-		</div>
-		<div class="btn" v-if="showCancel">
-			<u-button shape="circle" size="large">取消</u-button>
-		</div>
+	<view class="fixed-wrap" :style="{ '--num': showCancel ? '63px' : '0px' }">
+		<view class="fixed-btn" id="targetRef">
+			<div class="btn">
+				<u-button type="primary" :shape="shape" size="large" @click="emits('confirm')">{{ confirmText }}</u-button>
+			</div>
+			<div class="btn" v-if="showCancel">
+				<u-button :shape="shape" size="large" @click="emits('cancel')">取消</u-button>
+			</div>
+		</view>
 	</view>
 </template>
 
 <script setup>
-import { ref, onMounted, nextTick } from 'vue';
+import { ref, onMounted, nextTick, getCurrentInstance } from 'vue';
 
 const props = defineProps({
 	confirmText: {
@@ -27,38 +29,27 @@ const props = defineProps({
 	}
 });
 
-const emits = defineEmits(['load']);
-
-function load() {
-	const query = uni.createSelectorQuery().in(this);
-	query
-		.selectComponent('#fixedBtn') // 若用ref，需注意：ref是字符串时，这里用#ref值；ref是变量时需其他方式
-		.boundingClientRect((data) => {
-			console.log('组件内元素高度：', data?.height);
-		})
-		.exec();
-}
-
-onMounted(() => {
-	nextTick(() => {
-		load();
-	});
-});
+const emits = defineEmits(['confirm', 'cancel']);
 </script>
 
 <style scoped lang="scss">
-.fixed-btn {
+.fixed-wrap {
+	--height: calc(83px + var(--num) + env(safe-area-inset-bottom) / 2);
 	width: 100%;
-	position: fixed;
-	bottom: 0;
-	left: 0;
-	display: flex;
-	gap: 20upx;
-	flex-direction: column;
-	padding: 20upx 28upx calc(40upx + env(safe-area-inset-bottom) / 2) 20upx;
-	background-color: #fff;
-	.btn {
-		flex: 1;
+	height: var(--height);
+	.fixed-btn {
+		width: 100%;
+		height: var(--height);
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		padding: 10px 14px calc(20px + env(safe-area-inset-bottom) / 2) 10px;
+		background-color: #fff;
+		.btn {
+			&:first-child {
+				margin-bottom: 14px;
+			}
+		}
 	}
 }
 </style>