init：各页面组件编写

src/views/about/About.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="about">
+    <CustomHeader title="我的" />
+  </div>
+</template>
+
+
+
+<style lang="scss" scoped>
+  .title {
+    display: block;
+    font-size: 36px;
+    text-align: center;
+  }
+  p {
+    padding: 20px 10px;
+    font-size: 16px;
+  }
+  img {
+    display: block;
+    width: 150px;
+    height: 150px;
+    margin: 0 auto;
+  }
+</style>

src/views/category/Category.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="category">
+    <CustomHeader title="分类"/>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .title {
+    display: block;
+    font-size: 36px;
+    text-align: center;
+  }
+  p {
+    padding: 20px 10px;
+    font-size: 16px;
+  }
+  img {
+    display: block;
+    width: 150px;
+    height: 150px;
+    margin: 0 auto;
+  }
+</style>

src/views/home/Detail.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+
+    const route = useRoute()
+    console.log(route,'route');
+    let currentId = ref(0) as any
+    currentId = route.params.id //路由跳转id
+
+
+</script>
+
+<template>
+  <div>
+    <CustomHeader title="详情" leftIcon="arrow-left" leftText="" />
+    详情id为:{{currentId}}
+  </div>
+</template>
+
+
+
+<style lang="scss" scoped>
+
+</style>
+

src/views/home/Home.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+	import { getList } from '@/api/home'
+import { log } from 'console'
+import { computed, ref } from 'vue'
+	import { useRoute, useRouter } from 'vue-router'
+	// import { Form, Field, Button, CellGroup  } from 'vant'
+
+    const phone = ref('')
+
+	const route = useRoute()
+    const router = useRouter()
+
+	const pattern = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
+
+
+	const onSubmit = (value) => {
+		getList(value).then(res=> {
+
+			console.log(res,'res');
+			
+		})
+		router.push('/orders')
+		console.log(value,'valuevaluevalue');
+		
+	}
+
+	const onFailed = (error) => {
+		console.log(error,'Failed');
+	}
+
+    // const store = useStore()
+    // const name = computed(() => store.state.userNmae)
+    // const handleBtn = () =>{
+    //   store.commit('getUserNmae', 'Vue')
+    // }
+
+</script>
+
+<template>
+	<div>
+		<CustomHeader title="首页" />
+		<div class="py-20">
+			<van-form @submit="onSubmit" @failed="onFailed">
+				<van-cell-group  inset>
+					<van-field
+						v-model="phone" 
+						required 
+						name="phone"
+						label="手机号" 
+						placeholder="请输入手机号" 
+						:rules="[{ pattern, message: '请输入正确内容' }]" />
+				</van-cell-group >
+				<div style="margin: 16px;">
+					<van-button round block type="primary" native-type="submit">
+						查询
+					</van-button>
+				</div>
+			</van-form>
+		</div>
+	</div>
+</template>
+
+
+
+<style lang="scss" scoped>
+  h1 {
+    display: block;
+    font-size: 40px;
+    text-align: center;
+    padding: 20px 0;
+  }
+  ul {
+    li {
+      display: block;
+      font-size: 20px;
+      padding: 20px 0;
+      text-align: center;
+    }
+  }
+</style>

src/views/order/Orders.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+    import { reactive, ref } from 'vue'
+
+</script>
+
+<template>
+    <div>
+        我是订单列表
+    </div>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

src/views/orders/Orders.vue

@@ -0,0 +1,29 @@
+
+<script setup lang='ts'>
+
+</script>
+
+<template>
+  <div class="orders">
+    <CustomHeader title="订单"/>
+  </div>
+</template>
+
+
+<style lang="scss" scoped>
+  .title {
+    display: block;
+    font-size: 36px;
+    text-align: center;
+  }
+  p {
+    padding: 20px 10px;
+    font-size: 16px;
+  }
+  img {
+    display: block;
+    width: 150px;
+    height: 150px;
+    margin: 0 auto;
+  }
+</style>

src/views/welfare/Welfare.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="welfare">
+    <CustomHeader title="福利票" />
+  </div>
+</template>
+
+
+
+<style lang="scss" scoped>
+  .title {
+    display: block;
+    font-size: 36px;
+    text-align: center;
+  }
+  p {
+    padding: 20px 10px;
+    font-size: 16px;
+  }
+  img {
+    display: block;
+    width: 150px;
+    height: 150px;
+    margin: 0 auto;
+  }
+</style>