From ab894752f54d0c1127d4836de30f03a6524b04f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E6=98=A5=E6=A2=85?= <1062144732@qq.com>
Date: Wed, 18 Oct 2023 13:44:32 +0800
Subject: [PATCH] add button component

---
 src/components/comment/Button.vue |  51 +++++++++++++
 src/components/search.vue         |  52 ++++++++++++++
 src/main.ts                       |   5 +-
 src/pages/order.vue               | 115 ++++++++++++++++++++++++++++--
 4 files changed, 218 insertions(+), 5 deletions(-)
 create mode 100644 src/components/comment/Button.vue
 create mode 100644 src/components/search.vue

diff --git a/src/components/comment/Button.vue b/src/components/comment/Button.vue
new file mode 100644
index 0000000..44853a5
--- /dev/null
+++ b/src/components/comment/Button.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+export interface Props {
+  color?: string;
+  borderColor?: string;
+  borderRadius?: string; //可选属性
+  size?: string;
+  backgroundColor?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: "#222525",
+  borderColor: "#e9e9e9",
+  size: "medium",
+});
+</script>
+
+<template>
+  <div
+    class="mt-button"
+    :class="{ [size]: size }"
+    :style="{
+      border: `1px solid ${props.borderColor}`,
+      borderRadius: props.borderRadius,
+      color: props.color,
+      backgroundColor: props.backgroundColor
+    }"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.mt-button {
+  display: inline-block;
+  padding: 8px 10px;
+  font-weight: 600;
+  min-width: 80px;
+  box-sizing: border-box;
+  letter-spacing: 2px;
+  &.medium {
+    font-size: 14px;
+  }
+  &.small {
+    font-size: 12px;
+  }
+  &.mini {
+    padding: 6px 10px;
+    font-size: 12px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/search.vue b/src/components/search.vue
new file mode 100644
index 0000000..d3db58c
--- /dev/null
+++ b/src/components/search.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+const props = defineProps(["fixedNow","placeholder","showButton","backgroundColor","borderColor"])
+
+</script>
+<template>
+     <!-- 搜索框 -->
+     <div class="search" :class="{ 'search-fixed-top': props.fixedNow }" :style="{backgroundColor:props.backgroundColor,borderColor:props.borderColor}">
+          <i class="iconfont icon-sousuo"></i>
+          <div class="placeholder">{{ props.placeholder }}</div>
+          <div class="search-button" v-if="props.showButton">搜索</div>
+     </div>
+</template>
+
+<style lang="scss" scoped>
+ .search {
+      text-align: left;
+      display: flex;
+      border: 2px solid $themeColor;
+      border-radius: 30px;
+      height: 40px;
+      overflow: hidden;
+      align-items: center;
+      margin: 0 16px;
+      transition-property: width;
+      transition-duration: 0.1s;
+      &.search-fixed-top {
+        position: fixed;
+        top: 5px;
+        right: -5px;
+        width: calc(100% - 60px);
+        z-index: 100;
+        background: #fff;
+      }
+      i {
+        margin-left: 18px;
+        margin-right: 10px;
+        color: $placeholderTextColor;
+      }
+      .placeholder {
+        color: $placeholderTextColor;
+        flex: 1;
+      }
+      .search-button {
+        background: $themeColor;
+        font-size: 15px;
+        padding: 16px 22px;
+        border-radius: 60%;
+        font-weight: 500;
+        color: #433b07;
+      }
+    }
+</style>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index f954830..9886e34 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,6 +4,8 @@ import '@/assets/css/main.scss'
 import '@/assets/iconfont/iconfont.css'
 import routes from "@/router/index";
 import { createRouter, createWebHashHistory } from "vue-router";
+import MtButton from './components/comment/Button.vue'
+
 
 import App from './App.vue'
 
@@ -12,6 +14,7 @@ const router = createRouter({
     routes
 })
 const app = createApp(App);
-
+// 全局组件注册
+app.component('MtButton', MtButton)
 app.use(router);
 app.mount('#app');
diff --git a/src/pages/order.vue b/src/pages/order.vue
index ca08cfb..e04115a 100644
--- a/src/pages/order.vue
+++ b/src/pages/order.vue
@@ -1,7 +1,114 @@
-<Script setup lang="ts">
+<script setup lang="ts">
+import { ref } from "vue";
+import Search from "../components/search.vue";
+let showSearch: boolean = ref(false);
+let startY: number = 0;
 
-</Script>
+
+
+function handleTouchScroll(event: Event) {
+    console.log(event.target.scrollTop);
+    if(event.target.scrollTop>=67) {
+        showSearch.value = true;
+    }else{
+        showSearch.value = false;
+    }
+}
+
+</script>
 
 <template>
-    <div>这是一个订单页面</div>
-</template>
\ No newline at end of file
+  <div
+    style="height: calc(100vh - 68px); overflow: auto"
+
+    @scroll="handleTouchScroll"
+  >
+    <div class="search-wrapper">
+      <div class="search-input">
+        <Search
+          v-show="showSearch"
+          showButton
+          placeholder="搜索外卖/跑腿/电商订单"
+          backgroundColor="#fff"
+          borderColor="#fee84f"
+          :style="{ opacity: showSearch ? '1' : '0' }"
+        ></Search>
+        <div :style="{ opacity: showSearch ? '0' : '1' }" class="title">
+          订单
+        </div>
+      </div>
+      <i
+        class="iconfont icon-sousuo"
+        :style="{ display: showSearch ? 'none' : '' }"
+      ></i>
+      <div class="message">
+        <div class="mess-icon">
+          <i class="iconfont icon-xiaoxi-zhihui"></i>
+        </div>
+        <div class="count"></div>
+      </div>
+    </div>
+    <div class="tabs" style="margin-top: 20px; position: sticky; top: 67px">
+      <span>全部订单</span>
+      <span>待评价</span>
+      <span>退款</span>
+    </div>
+    <!-- <MtButton>这是一个默认Button</MtButton>
+  <MtButton backgroundColor="#ffe22a" borderRadius="4px" borderColor="#ffe22a"
+    >评价</MtButton
+  > -->
+    <div v-for="item in 100" :key="item">{{ item }}</div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.search-wrapper {
+  position: sticky;
+  top: 0;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  padding: 14px 0;
+  background: #fee84f;
+  box-sizing: border-box;
+  height: 67px;
+  overflow: hidden;
+  i.icon-sousuo {
+    font-size: 26px;
+  }
+  .search-input {
+    flex: 1;
+    .title {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      font-weight: 600;
+      font-size: 18px;
+    }
+  }
+  .message {
+    position: relative;
+    flex: 0 0 60px;
+    .iconfont {
+      font-size: 26px;
+      font-weight: 600;
+    }
+    .mess-icon {
+      // 不能直接用于i标签
+      transform: rotateY(180deg);
+    }
+    .count {
+      position: absolute;
+      top: 8px;
+      right: 15px;
+      width: 8px;
+      height: 8px;
+      background: red;
+      border-radius: 50%;
+      color: #fff;
+      font-size: 10px;
+    }
+  }
+}
+</style>
\ No newline at end of file
-- 
Gitee