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

components/my-components/my-header-card.vue

@@ -0,0 +1,98 @@
+<template>
+	<view class="item-doc" :style="{ height: headHeight + 'px' }">
+		<view class="item" :style="{ height: headHeight + 'px' }">
+			<view class="left">
+				<image :src="`/static/applocation/${options.icon}.png`" mode="aspectFit" class="icon"></image>
+				<view class="info">
+					<view class="title">
+						<text class="t">{{ options.name }}</text>
+					</view>
+					<view class="intro">
+						<text class="t">{{ options.intro }}</text>
+					</view>
+				</view>
+			</view>
+			<view class="right" v-if="showSwitch">
+				<u-switch :active-value="1" :inactive-value="0" v-model="isOpen" @change="defineEmits(['update:isOpen'])"></u-switch>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick } from 'vue';
+
+const props = defineProps({
+	options: {
+		type: Object,
+		default: {
+			name: '标题',
+			intro: '说明',
+			icon: 'xszk'
+		}
+	},
+	showSwitch: {
+		type: Boolean,
+		default: false
+	}
+});
+
+const headHeight = ref(70);
+
+const isOpen = defineModel('isOpen', {
+	type: [Boolean, String, Number],
+	default: 0
+});
+
+const emits = defineEmits(['load']);
+
+onMounted(() => {
+	nextTick(() => {
+		emits('load', { height: headHeight.value });
+	});
+});
+</script>
+
+<style scoped lang="scss">
+.item-doc {
+	width: 100%;
+}
+.item {
+	width: 100%;
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 99;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	background-color: #fff;
+	padding: 20upx 28upx;
+	.left {
+		display: flex;
+		.icon {
+			$size: 80upx;
+			width: $size;
+			height: $size;
+			flex-shrink: 0;
+		}
+		.info {
+			display: flex;
+			padding-left: 20upx;
+			flex-direction: column;
+			.title {
+				.t {
+					font-size: 28upx;
+					font-weight: bold;
+				}
+			}
+			.intro {
+				.t {
+					font-size: 28upx;
+					color: #999;
+				}
+			}
+		}
+	}
+}
+</style>