From c20ff75cd85cd179c17fdf2d41e1f2ca3351698e Mon Sep 17 00:00:00 2001
From: dftre <3066417822@qq.com>
Date: Tue, 24 Dec 2024 17:34:08 +0800
Subject: [PATCH] =?UTF-8?q?refactor(components):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=A4=9A=E4=B8=AA=E7=BB=84=E4=BB=B6=E7=9A=84=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E5=92=8C=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整了多个组件的背景色、高度等样式
- 优化了部分组件的布局结构
- 统一了部分样式，如字体颜色、大小等
- 部分文件改成了vue3组合式写法
---
 .../geek-commodity/geek-commodity.vue         |  12 +-
 .../components/geek-menu/geek-menu.vue        |   8 +-
 .../components/geek-order/geek-order.vue      |   1 -
 .../u-city-select/u-city-select.vue           |  15 +-
 src/pages_geek/pages/index/index.vue          |  85 ++--
 src/pages_template/pages/address/addSite.vue  |  54 ++-
 src/pages_template/pages/address/index.vue    | 124 +++---
 src/pages_template/pages/citySelect/index.vue |  42 +-
 src/pages_template/pages/comment/index.vue    | 199 ++++-----
 src/pages_template/pages/comment/reply.vue    | 237 ++++++-----
 src/pages_template/pages/coupon/index.vue     |  82 +++-
 .../pages/keyboardPay/index.vue               | 118 +++---
 src/pages_template/pages/login/code.vue       | 100 +++--
 src/pages_template/pages/login/index1.vue     |  59 ++-
 src/pages_template/pages/login/index2.vue     | 196 +++++----
 src/pages_template/pages/mallMenu/index1.vue  |  98 ++---
 src/pages_template/pages/mallMenu/index2.vue  | 269 ++++++-------
 src/pages_template/pages/order/index.vue      | 377 +++++++++---------
 src/pages_template/pages/wxCenter/index.vue   |  33 +-
 19 files changed, 1090 insertions(+), 1019 deletions(-)

diff --git a/src/components/geek-xd/components/geek-commodity/geek-commodity.vue b/src/components/geek-xd/components/geek-commodity/geek-commodity.vue
index 4744029..665e543 100644
--- a/src/components/geek-xd/components/geek-commodity/geek-commodity.vue
+++ b/src/components/geek-xd/components/geek-commodity/geek-commodity.vue
@@ -36,8 +36,7 @@ const props = defineProps({
 .card {
     padding: 0;
     border-radius: 10px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    height: 240rpx;
+    background-color: #ffffff;
     width: 700rpx;
     padding: 20rpx;
     margin: 10rpx;
@@ -67,6 +66,12 @@ const props = defineProps({
             margin-top: 10rpx;
             font-size: 20rpx;
             color: rgb(87, 87, 87);
+            line-height: 30rpx;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 3;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
 
         .price {
@@ -80,7 +85,6 @@ const props = defineProps({
 .rect {
     border-radius: 10px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    height: 500rpx;
     width: 350rpx;
     padding: 0;
     margin: 10rpx;
@@ -95,7 +99,6 @@ const props = defineProps({
     .content {
         padding: 0 20rpx;
         margin: 0;
-        height: 140rpx;
         width: 100%;
         display: flex;
         flex-direction: column;
@@ -108,7 +111,6 @@ const props = defineProps({
 
         .subTitle {
             width: 330rpx;
-            height: 60rpx;
             font-size: 20rpx;
             color: rgb(87, 87, 87);
         }
diff --git a/src/components/geek-xd/components/geek-menu/geek-menu.vue b/src/components/geek-xd/components/geek-menu/geek-menu.vue
index 4339db9..55976e9 100644
--- a/src/components/geek-xd/components/geek-menu/geek-menu.vue
+++ b/src/components/geek-xd/components/geek-menu/geek-menu.vue
@@ -37,10 +37,12 @@ const titleStype = computed(() => {
 })
 </script>
 <template>
-    <view class="menu" :class="type" :style="menuStyle" @click="$emit('click')">
-        <image :src="icon" style="width: 100%;height: 100%"></image>
+    <view>
+        <view class="menu" :class="type" :style="menuStyle" @click="$emit('click')">
+            <image :src="icon" style="width: 100%;height: 100%"></image>
+        </view>
+        <view class="title" :style="titleStype">{{ label }}</view>
     </view>
-    <view class="title" :style="titleStype">{{ label }}</view>
 </template>
 <style lang="scss" scoped>
 .menu {
diff --git a/src/components/geek-xd/components/geek-order/geek-order.vue b/src/components/geek-xd/components/geek-order/geek-order.vue
index 38811f1..5eb6aad 100644
--- a/src/components/geek-xd/components/geek-order/geek-order.vue
+++ b/src/components/geek-xd/components/geek-order/geek-order.vue
@@ -86,7 +86,6 @@ function formatNumber(num, place) {
     position: relative;
     padding: 20rpx;
     background-color: white;
-    border: 1rpx solid rgb(183, 183, 183);
     border-radius: 20rpx;
     height: 360rpx;
     width: 700rpx;
diff --git a/src/components/u-city-select/u-city-select.vue b/src/components/u-city-select/u-city-select.vue
index b7babd5..0ef4612 100644
--- a/src/components/u-city-select/u-city-select.vue
+++ b/src/components/u-city-select/u-city-select.vue
@@ -1,6 +1,7 @@
 <template>
-	<u-popup :show="modelValue" mode="bottom" :popup="false" :mask="true" :closeable="true" :safe-area-inset-bottom="true"
-		close-icon-color="#ffffff" :z-index="uZIndex" :maskCloseAble="maskCloseAble" @close="close">
+	<u-popup :show="modelValue" mode="bottom" :popup="false" :mask="true" :closeable="true"
+		:safe-area-inset-bottom="true" close-icon-color="#ffffff" :z-index="uZIndex" :maskCloseAble="maskCloseAble"
+		@close="close">
 		<u-tabs v-if="modelValue" :list="genTabsList" :scrollable="true" :current="tabsIndex" @change="tabsChange"
 			ref="tabs" />
 		<view class="area-box">
@@ -9,8 +10,8 @@
 					<view class="u-padding-10 u-bg-gray" style="height: 100%;">
 						<scroll-view :scroll-y="true" style="height: 100%">
 							<u-cell-group>
-								<u-cell v-for="(item, index) in provinces" :title="item.label" :arrow="false" :index="index"
-									:key="index" @click="provinceChange(index)">
+								<u-cell v-for="(item, index) in provinces" :title="item.label" :arrow="false"
+									:index="index" :key="index" @click="provinceChange(index)">
 									<template v-slot:right-icon>
 										<u-icon v-if="isChooseP && province === index" size="17"
 											name="checkbox-mark"></u-icon>
@@ -27,7 +28,8 @@
 								<u-cell v-for="(item, index) in citys" :title="item.label" :arrow="false" :index="index"
 									:key="index" @click="cityChange(index)">
 									<template v-slot:right-icon>
-										<u-icon v-if="isChooseC && city === index" size="17" name="checkbox-mark"></u-icon>
+										<u-icon v-if="isChooseC && city === index" size="17"
+											name="checkbox-mark"></u-icon>
 									</template>
 								</u-cell>
 							</u-cell-group>
@@ -41,7 +43,8 @@
 								<u-cell v-for="(item, index) in areas" :title="item.label" :arrow="false" :index="index"
 									:key="index" @click="areaChange(index)">
 									<template v-slot:right-icon>
-										<u-icon v-if="isChooseA && area === index" size="17" name="checkbox-mark"></u-icon>
+										<u-icon v-if="isChooseA && area === index" size="17"
+											name="checkbox-mark"></u-icon>
 									</template>
 								</u-cell>
 							</u-cell-group>
diff --git a/src/pages_geek/pages/index/index.vue b/src/pages_geek/pages/index/index.vue
index 8ae3c88..7dfb832 100644
--- a/src/pages_geek/pages/index/index.vue
+++ b/src/pages_geek/pages/index/index.vue
@@ -1,44 +1,55 @@
 <template>
-  <uni-section class="mb-10" title="数值板" sub-title="statistic" type="line"></uni-section>
-  <u-row gutter="0">
-    <u-col span="6">
-      <geek-statistic label="订单数量(个)" labelColor="#1f1f1f" :number="0" numberColor="red" />
-    </u-col>
-    <u-col span="6">
-      <geek-statistic label="交易金额(元)" labelColor="#1f1f1f" :number="0" numberColor="red" />
-    </u-col>
-  </u-row>
+  <view style="background-color: #f6f6f6;">
+    <uni-section class="mb-10" title="数值板" sub-title="statistic" type="line"></uni-section>
+    <u-row gutter="0">
+      <u-col span="6">
+        <geek-statistic label="订单数量(个)" labelColor="#1f1f1f" :number="0" numberColor="red" />
+      </u-col>
+      <u-col span="6">
+        <geek-statistic label="交易金额(元)" labelColor="#1f1f1f" :number="0" numberColor="red" />
+      </u-col>
+    </u-row>
 
-  <uni-section class="mb-10" title="菜单" sub-title="menu" type="line"></uni-section>
-  <u-row>
-    <u-col :span="2.1" :offset="0.3" v-for="menu, index in menus" :key="index">
-      <geek-menu v-bind=menu :size="60" @click="modal.msg(menu.label)" type="circle" />
-    </u-col>
-  </u-row>
-  <u-row>
-    <u-col :span="2.1" :offset="0.3" v-for="menu, index in menus" :key="index">
-      <geek-menu :icon="menu.icon" :label="menu.label" :size="60" @click="modal.msg(menu.label)" type="rect" />
-    </u-col>
-  </u-row>
+    <uni-section class="mb-10" title="菜单" sub-title="menu" type="line"></uni-section>
+    <view style="width: 100%; display: flex;justify-content:space-evenly;align-items: center;">
+      <geek-menu v-for="menu, index in menus" :key="index" v-bind=menu :size="60" @click="modal.msg(menu.label)"
+        type="circle" />
+    </view>
+    <view style="width: 100%; display: flex;justify-content:space-evenly;align-items: center;">
+      <geek-menu v-for="menu, index in menus" :key="index" :icon="menu.icon" :label="menu.label" :size="60"
+        @click="modal.msg(menu.label)" type="rect" />
+    </view>
 
-  <uni-section class="mb-10" title="商品列表" sub-title="commodity" type="line"></uni-section>
-  <geek-commodity v-for="item, index in commodityList" :key="index" v-bind="item" type="line"
-    @click="modal.msg(item.title)" />
-  <geek-commodity v-for="item, index in commodityList" :key="index" v-bind="item" type="rect"
-    @click="modal.msg(item.title)" />
+    <uni-section class="mb-10" title="商品列表" sub-title="commodity" type="line"></uni-section>
+    <view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
+      <geek-commodity v-for="item, index in commodityList" :key="index" v-bind="item" type="line"
+        @click="modal.msg(item.title)" />
+    </view>
+    <view style="display: flex;justify-content: center;">
+      <view>
+        <geek-commodity v-for="item, index in commodityList.slice(0, 2)" :key="index" v-bind="item" type="rect"
+          @click="modal.msg(item.title)" />
+      </view>
+      <view>
+        <geek-commodity v-for="item, index in commodityList.slice(1, 3)" :key="index" v-bind="item" type="rect"
+          @click="modal.msg(item.title)" />
+      </view>
+    </view>
+
+    <uni-section class="mb-10" title="订单列表" sub-title="order" type="line"></uni-section>
+    <geek-order v-for="item, index in orderList" :key="index" v-bind="item" @more="modal.msg('更多')"
+      @again="modal.msg('再次购买')" @return="modal.msg('退换')" @sell="modal.msg('卖了换钱')"></geek-order>
+
+    <uni-section class="mb-10" title="颜色选择器" sub-title="order" type="line"></uni-section>
+    <geek-color-picker ref="gk" @confirm="getcolor"></geek-color-picker>
+    <button @click="open()">打开颜色选择器</button>
 
 
-  <uni-section class="mb-10" title="订单列表" sub-title="order" type="line"></uni-section>
-  <geek-order v-for="item, index in orderList" :key="index" v-bind="item" @more="modal.msg('更多')"
-    @again="modal.msg('再次购买')" @return="modal.msg('退换')" @sell="modal.msg('卖了换钱')"></geek-order>
-
-  <uni-section class="mb-10" title="颜色选择器" sub-title="order" type="line"></uni-section>
-  <geek-color-picker ref="gk" @confirm="getcolor"></geek-color-picker>
-  <button @click="open()">打开颜色选择器</button>
-
-
-  <uni-section class="mb-10" title="二维码" sub-title="order" type="line"></uni-section>
-  <geek-qrcode cid="qrcode2" ref="qrcode2" val="二维码" :loadMake="true" />
+    <uni-section class="mb-10" title="二维码" sub-title="order" type="line"></uni-section>
+    <view style="display: flex;align-items: center;justify-content: center;">
+      <geek-qrcode cid="qrcode2" ref="qrcode2" val="二维码" :loadMake="true" />
+    </view>
+  </view>
 </template>
 
 <script setup lang="ts">
@@ -73,7 +84,7 @@ const commodityList: Array<Commodity> = reactive([
   {
     img: '/static/images/banner/banner02.jpg',
     title: '商品2',
-    subTitle: '商品2简介',
+    subTitle: '商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介',
     price: 300,
   },
   {
diff --git a/src/pages_template/pages/address/addSite.vue b/src/pages_template/pages/address/addSite.vue
index 0d6c653..2962bf9 100644
--- a/src/pages_template/pages/address/addSite.vue
+++ b/src/pages_template/pages/address/addSite.vue
@@ -1,3 +1,13 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const show = ref(false);
+
+const setDefault = () => { };
+
+const showRegionPicker = () => {
+	show.value = true;
+};
+</script>
 <template>
 	<view class="wrap">
 		<view class="top">
@@ -40,56 +50,48 @@
 					<view class="set">设置默认地址</view>
 					<view class="tips">提醒：每次下单会默认推荐该地址</view>
 				</view>
-				<view class="right"><switch color="red" @change="setDefault" /></view>
+				<view class="right">
+					<switch color="red" @change="setDefault" />
+				</view>
 			</view>
 		</view>
 		<u-picker mode="region" ref="uPicker" v-model="show" />
 	</view>
 </template>
 
-<script>
-export default {
-	data() {
-		return {
-			show: false
-		};
-	},
-	methods: {
-		setDefault() {},
-		showRegionPicker() {
-			this.show = true;
-		}
-	}
-};
-</script>
-
 <style lang="scss" scoped>
 :v-deep(.line) {
 	color: $u-light-color;
 	font-size: 28rpx;
 }
+
 .wrap {
 	background-color: #f2f2f2;
+
 	.top {
 		background-color: #ffffff;
 		border-top: solid 2rpx $u-border-color;
 		padding: 22rpx;
+
 		.item {
 			display: flex;
 			font-size: 32rpx;
 			line-height: 100rpx;
 			align-items: center;
 			border-bottom: solid 2rpx $u-border-color;
+
 			.left {
 				width: 180rpx;
 			}
+
 			input {
 				text-align: left;
 			}
 		}
-		
+
 		.address {
 			padding: 20rpx 0;
+
 			textarea {
 				// width: 100%;
 				height: 150rpx;
@@ -99,8 +101,10 @@ export default {
 				padding: 20rpx;
 			}
 		}
+
 		.site-clipboard {
 			padding-right: 40rpx;
+
 			textarea {
 				// width: 100%;
 				height: 150rpx;
@@ -109,6 +113,7 @@ export default {
 				margin: 40rpx auto;
 				padding: 20rpx;
 			}
+
 			.clipboard {
 				display: flex;
 				justify-content: center;
@@ -116,6 +121,7 @@ export default {
 				font-size: 26rpx;
 				color: $u-tips-color;
 				height: 80rpx;
+
 				.icon {
 					margin-top: 6rpx;
 					margin-left: 10rpx;
@@ -123,20 +129,25 @@ export default {
 			}
 		}
 	}
+
 	.bottom {
 		margin-top: 20rpx;
 		padding: 40rpx;
 		padding-right: 0;
 		background-color: #ffffff;
 		font-size: 28rpx;
+
 		.tag {
 			display: flex;
+
 			.left {
 				width: 160rpx;
 			}
+
 			.right {
 				display: flex;
 				flex-wrap: wrap;
+
 				.tags {
 					width: 140rpx;
 					padding: 16rpx 8rpx;
@@ -151,22 +162,25 @@ export default {
 					color: $u-content-color;
 					line-height: 1;
 				}
+
 				.plus {
 					//padding: 10rpx 0;
 				}
 			}
 		}
+
 		.default {
 			margin-top: 50rpx;
 			display: flex;
 			justify-content: space-between;
 			border-bottom: solid 2rpx $u-border-color;
 			line-height: 64rpx;
+
 			.tips {
 				font-size: 24rpx;
 			}
-			.right {
-			}
+
+			.right {}
 		}
 	}
 }
diff --git a/src/pages_template/pages/address/index.vue b/src/pages_template/pages/address/index.vue
index 4d145f5..d73b368 100644
--- a/src/pages_template/pages/address/index.vue
+++ b/src/pages_template/pages/address/index.vue
@@ -1,3 +1,48 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import tab from '@/plugins/tab';
+
+const siteList = ref([]);
+
+onMounted(() => {
+	getData();
+});
+
+function getData() {
+	siteList.value = [
+		{
+			id: 1,
+			name: '游X',
+			phone: '183****5523',
+			tag: [
+				{ tagText: '默认' },
+				{ tagText: '家' }
+			],
+			site: '广东省深圳市宝安区 自由路66号'
+		},
+		{
+			id: 2,
+			name: '李XX',
+			phone: '183****5555',
+			tag: [
+				{ tagText: '公司' }
+			],
+			site: '广东省深圳市宝安区 翻身路xx号'
+		},
+		{
+			id: 3,
+			name: '王YY',
+			phone: '153****5555',
+			tag: [],
+			site: '广东省深圳市宝安区 平安路13号'
+		}
+	];
+}
+
+function toAddSite() {
+	tab.navigateTo('/pages_template/pages/address/addSite');
+}
+</script>
 <template>
 	<view>
 		<view class="item" v-for="(res, index) in siteList" :key="res.id">
@@ -5,7 +50,8 @@
 				<view class="name">{{ res.name }}</view>
 				<view class="phone">{{ res.phone }}</view>
 				<view class="tag">
-					<text v-for="(item, index) in res.tag" :key="index" :class="{red:item.tagText=='默认'}">{{ item.tagText }}</text>
+					<text v-for="(item, index) in res.tag" :key="index" :class="{ red: item.tagText == '默认' }">{{
+						item.tagText }}</text>
 				</view>
 			</view>
 			<view class="bottom">
@@ -20,77 +66,24 @@
 		</view>
 	</view>
 </template>
-
-<script>
-export default {
-	data() {
-		return {
-			siteList: []
-		};
-	},
-	onLoad() {
-		this.getData();
-	},
-	methods: {
-		getData() {
-			this.siteList = [
-				{
-					id: 1,
-					name: '游X',
-					phone: '183****5523',
-					tag: [
-						{
-							tagText: '默认'
-						},
-						{
-							tagText: '家'
-						}
-					],
-					site: '广东省深圳市宝安区 自由路66号'
-				},
-				{
-					id: 2,
-					name: '李XX',
-					phone: '183****5555',
-					tag: [
-						{
-							tagText: '公司'
-						}
-					],
-					site: '广东省深圳市宝安区 翻身路xx号'
-				},
-				{
-					id: 3,
-					name: '王YY',
-					phone: '153****5555',
-					tag: [],
-					site: '广东省深圳市宝安区 平安路13号'
-				}
-			];
-		},
-		toAddSite(){
-			uni.navigateTo({
-			    url: '/pages_template/pages/address/addSite'
-			});
-		}
-	}
-};
-</script>
-
 <style lang="scss" scoped>
 .item {
 	padding: 40rpx 20rpx;
+
 	.top {
 		display: flex;
 		font-weight: bold;
 		font-size: 34rpx;
+
 		.phone {
 			margin-left: 60rpx;
 		}
+
 		.tag {
 			display: flex;
 			font-weight: normal;
 			align-items: center;
+
 			text {
 				display: block;
 				width: 60rpx;
@@ -101,13 +94,15 @@ export default {
 				border-radius: 6rpx;
 				text-align: center;
 				margin-left: 30rpx;
-				background-color:rgb(49, 145, 253);
+				background-color: rgb(49, 145, 253);
 			}
-			.red{
-				background-color:red
+
+			.red {
+				background-color: red
 			}
 		}
 	}
+
 	.bottom {
 		display: flex;
 		margin-top: 20rpx;
@@ -116,6 +111,7 @@ export default {
 		color: #999999;
 	}
 }
+
 .addSite {
 	display: flex;
 	justify-content: space-around;
@@ -127,11 +123,13 @@ export default {
 	background-color: red;
 	border-radius: 60rpx;
 	font-size: 30rpx;
-	.add{
+
+	.add {
 		display: flex;
 		align-items: center;
 		color: #ffffff;
-		.icon{
+
+		.icon {
 			margin-right: 10rpx;
 		}
 	}
diff --git a/src/pages_template/pages/citySelect/index.vue b/src/pages_template/pages/citySelect/index.vue
index c2d4989..8b2a9c2 100644
--- a/src/pages_template/pages/citySelect/index.vue
+++ b/src/pages_template/pages/citySelect/index.vue
@@ -1,3 +1,19 @@
+<script setup>
+import { ref } from 'vue';
+import citySelect from '@/components/u-city-select/u-city-select.vue';
+
+const height = ref(30);
+const bgColor = ref(uni.$u.color.bgColor);
+const marginTop = ref(30);
+const marginBottom = ref(30);
+const value = ref(false);
+const input = ref('');
+
+const cityChange = (e) => {
+	input.value = e.province.label + '-' + e.city.label + '-' + e.area.label;
+	input.value += e.province.value + '-' + e.city.value + '-' + e.area.value;
+};
+</script>
 <template>
 	<view class="u-demo">
 		<view class="u-demo-wrap">
@@ -16,32 +32,6 @@
 		</view>
 	</view>
 </template>
-
-<script>
-import citySelect from '@/components/u-city-select/u-city-select.vue';
-export default {
-	components: {
-		citySelect
-	},
-	data() {
-		return {
-			height: 30,
-			bgColor: this.$u.color.bgColor,
-			marginTop: 30,
-			marginBottom: 30,
-			value: false,
-			input: '',
-		};
-	},
-	methods: {
-		cityChange(e) {
-			this.input = e.province.label + '-' + e.city.label + '-' + e.area.label;
-			this.input += e.province.value + '-' + e.city.value + '-' + e.area.value;
-		}
-	}
-};
-</script>
-
 <style scoped>
 .btn-wrap {
 	margin: 100rpx 30rpx;
diff --git a/src/pages_template/pages/comment/index.vue b/src/pages_template/pages/comment/index.vue
index 55497ce..7559d3a 100644
--- a/src/pages_template/pages/comment/index.vue
+++ b/src/pages_template/pages/comment/index.vue
@@ -1,13 +1,16 @@
 <template>
 	<view>
 		<view class="comment" v-for="(res, index) in commentList" :key="res.id">
-			<view class="left"><image :src="res.url" mode="aspectFill"></image></view>
+			<view class="left">
+				<image :src="res.url" mode="aspectFill"></image>
+			</view>
 			<view class="right">
 				<view class="top">
 					<view class="name">{{ res.name }}</view>
 					<view class="like" :class="{ highlight: res.isLike }">
 						<view class="num">{{ res.likeNum }}</view>
-						<u-icon v-if="!res.isLike" name="thumb-up" :size="30" color="#9a9a9a" @click="getLike(index)"></u-icon>
+						<u-icon v-if="!res.isLike" name="thumb-up" :size="30" color="#9a9a9a"
+							@click="getLike(index)"></u-icon>
 						<u-icon v-if="res.isLike" name="thumb-up-fill" :size="30" @click="getLike(index)"></u-icon>
 					</view>
 				</view>
@@ -31,106 +34,99 @@
 	</view>
 </template>
 
-<script>
-export default {
-	data() {
-		return {
-			commentList: []
-		};
-	},
-	onLoad() {
-		this.getComment();
-	},
-	methods: {
-		// 跳转到全部回复
-		toAllReply() {
-			uni.navigateTo({
-				url: '/pages_template/pages/comment/reply'
-			});
-		},
-		// 点赞
-		getLike(index) {
-			this.commentList[index].isLike = !this.commentList[index].isLike;
-			if (this.commentList[index].isLike == true) {
-				this.commentList[index].likeNum++;
-			} else {
-				this.commentList[index].likeNum--;
-			}
-		},
-		// 评论列表
-		getComment() {
-			this.commentList = [
-				{
-					id: 1,
-					name: '叶轻眉',
-					date: '12-25 18:58',
-					contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
-					url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
-					allReply: 12,
-					likeNum: 33,
-					isLike: false,
-					replyList: [
-						{
-							name: 'uview',
-							contentStr: 'uview是基于uniapp的一个UI框架，代码优美简洁，宇宙超级无敌彩虹旋转好用，用它！'
-						},
-						{
-							name: '粘粘',
-							contentStr: '今天吃什么，明天吃什么，晚上吃什么，我只是一只小猫咪为什么要烦恼这么多'
-						}
-					]
-				},
-				{
-					id: 2,
-					name: '叶轻眉1',
-					date: '01-25 13:58',
-					contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
-					allReply: 0,
-					likeNum: 11,
-					isLike: false,
-					url: 'https://cdn.uviewui.com/uview/template/niannian.jpg',
-				},
-				{
-					id: 3,
-					name: '叶轻眉2',
-					date: '03-25 13:58',
-					contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
-					allReply: 0,
-					likeNum: 21,
-					isLike: false,
-					allReply: 2,
-					url: '../../../static/logo.png',
-					replyList: [
-						{
-							name: 'uview',
-							contentStr: 'uview是基于uniapp的一个UI框架，代码优美简洁，宇宙超级无敌彩虹旋转好用，用它！'
-						},
-						{
-							name: '豆包',
-							contentStr: '想吃冰糖葫芦粘豆包，但没钱5555.........'
-						}
-					]
-				},
-				{
-					id: 4,
-					name: '叶轻眉3',
-					date: '06-20 13:58',
-					contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
-					url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
-					allReply: 0,
-					likeNum: 150,
-					isLike: false
-				}
-			];
-		}
+<script setup>
+import { ref, onMounted } from 'vue';
+import tab from '@/plugins/tab';
+
+const commentList = ref([]);
+
+onMounted(() => {
+	getComment();
+});
+
+const toAllReply = () => tab.navigateTo('/pages_template/pages/comment/reply')
+
+const getLike = (index) => {
+	commentList.value[index].isLike = !commentList.value[index].isLike;
+	if (commentList.value[index].isLike) {
+		commentList.value[index].likeNum++;
+	} else {
+		commentList.value[index].likeNum--;
 	}
 };
+
+const getComment = () => {
+	commentList.value = [
+		{
+			id: 1,
+			name: '叶轻眉',
+			date: '12-25 18:58',
+			contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
+			url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
+			allReply: 12,
+			likeNum: 33,
+			isLike: false,
+			replyList: [
+				{
+					name: 'uview',
+					contentStr: 'uview是基于uniapp的一个UI框架，代码优美简洁，宇宙超级无敌彩虹旋转好用，用它！'
+				},
+				{
+					name: '粘粘',
+					contentStr: '今天吃什么，明天吃什么，晚上吃什么，我只是一只小猫咪为什么要烦恼这么多'
+				}
+			]
+		},
+		{
+			id: 2,
+			name: '叶轻眉1',
+			date: '01-25 13:58',
+			contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
+			allReply: 0,
+			likeNum: 11,
+			isLike: false,
+			url: 'https://cdn.uviewui.com/uview/template/niannian.jpg',
+		},
+		{
+			id: 3,
+			name: '叶轻眉2',
+			date: '03-25 13:58',
+			contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
+			allReply: 0,
+			likeNum: 21,
+			isLike: false,
+			allReply: 2,
+			url: '../../../static/logo.png',
+			replyList: [
+				{
+					name: 'uview',
+					contentStr: 'uview是基于uniapp的一个UI框架，代码优美简洁，宇宙超级无敌彩虹旋转好用，用它！'
+				},
+				{
+					name: '豆包',
+					contentStr: '想吃冰糖葫芦粘豆包，但没钱5555.........'
+				}
+			]
+		},
+		{
+			id: 4,
+			name: '叶轻眉3',
+			date: '06-20 13:58',
+			contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
+			url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
+			allReply: 0,
+			likeNum: 150,
+			isLike: false
+		}
+	];
+};
 </script>
 
 <style lang="scss" scoped>
 .comment {
 	display: flex;
 	padding: 30rpx;
+
 	.left {
 		image {
 			width: 64rpx;
@@ -139,64 +135,79 @@ export default {
 			background-color: #f2f2f2;
 		}
 	}
+
 	.right {
 		flex: 1;
 		padding-left: 20rpx;
 		font-size: 30rpx;
+
 		.top {
 			display: flex;
 			justify-content: space-between;
 			align-items: center;
 			margin-bottom: 10rpx;
+
 			.name {
 				color: #5677fc;
 			}
+
 			.like {
 				display: flex;
 				align-items: center;
 				color: #9a9a9a;
 				font-size: 26rpx;
+
 				.num {
 					margin-right: 4rpx;
 					color: #9a9a9a;
 				}
 			}
+
 			.highlight {
 				color: #5677fc;
+
 				.num {
 					color: #5677fc;
 				}
 			}
 		}
+
 		.content {
 			margin-bottom: 10rpx;
 		}
+
 		.reply-box {
 			background-color: rgb(242, 242, 242);
 			border-radius: 12rpx;
+
 			.item {
 				padding: 20rpx;
 				border-bottom: solid 2rpx $u-border-color;
+
 				.username {
 					font-size: 24rpx;
 					color: #999999;
 				}
 			}
+
 			.all-reply {
 				padding: 20rpx;
 				display: flex;
 				color: #5677fc;
 				align-items: center;
+
 				.more {
 					margin-left: 6rpx;
 				}
 			}
 		}
+
 		.bottom {
 			margin-top: 20rpx;
 			display: flex;
 			font-size: 24rpx;
 			color: #9a9a9a;
+
 			.reply {
 				color: #5677fc;
 				margin-left: 10rpx;
diff --git a/src/pages_template/pages/comment/reply.vue b/src/pages_template/pages/comment/reply.vue
index cb8fd6a..7df6d5f 100644
--- a/src/pages_template/pages/comment/reply.vue
+++ b/src/pages_template/pages/comment/reply.vue
@@ -1,9 +1,106 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+
+const commentList = ref([]);
+const comment = ref({});
+
+onMounted(() => {
+	getReply();
+});
+
+// 点赞
+const getLike = (index) => {
+	if (index === 0 || index > 0) {
+		commentList.value[index].isLike = !commentList.value[index].isLike;
+		if (commentList.value[index].isLike) {
+			commentList.value[index].likeNum++;
+		} else {
+			commentList.value[index].likeNum--;
+		}
+	} else {
+		if (comment.value.isLike) {
+			comment.value.isLike = !comment.value.isLike;
+			comment.value.likeNum--;
+		} else {
+			comment.value.isLike = !comment.value.isLike;
+			comment.value.likeNum++;
+		}
+	}
+};
+
+// 回复列表
+const getReply = () => {
+	comment.value = {
+		id: 1,
+		name: '叶轻眉',
+		date: '12-25 18:58',
+		contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
+		url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
+		allReply: 12,
+		likeNum: 33,
+		isLikes: false
+	};
+	commentList.value = [
+		{
+			name: '新八几',
+			date: '12-25 18:58',
+			contentText: '不要乱打广告啊喂！虽然是真的超好用',
+			url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
+			likeNum: 33,
+			isLike: false,
+			reply: {
+				name: 'uview',
+				contentStr: 'uview是基于uniapp的一个UI框架，代码优美简洁，宇宙超级无敌彩虹旋转好用，用它！'
+			}
+		},
+		{
+			name: '叶轻眉1',
+			date: '01-25 13:58',
+			url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
+			contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
+			allReply: 0,
+			likeNum: 11,
+			isLike: false,
+			reply: {
+				name: '粘粘',
+				contentStr: '今天吃什么，明天吃什么，晚上吃什么，我只是一只小猫咪为什么要烦恼这么多'
+			}
+		},
+		{
+			name: '叶轻眉2',
+			date: '03-25 13:58',
+			contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
+			allReply: 0,
+			likeNum: 21,
+			url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
+			isLike: false,
+			allReply: 2,
+			reply: {
+				name: '豆包',
+				contentStr: '想吃冰糖葫芦粘豆包，但没钱5555.........'
+			}
+		},
+		{
+			name: '叶轻眉3',
+			date: '06-20 13:58',
+			contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
+			allReply: 0,
+			likeNum: 150,
+			url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
+			isLike: false
+		}
+	];
+};
+</script>
+
 <template>
 	<view class="wrap">
 		<view class="comment">
 			<view class="top">
 				<view class="left">
-					<view class="heart-photo"><image :src="comment.url" mode=""></image></view>
+					<view class="heart-photo">
+						<image :src="comment.url" mode=""></image>
+					</view>
 					<view class="user-info">
 						<view class="name">{{ comment.name }}</view>
 						<view class="date">06-25 13:58</view>
@@ -11,8 +108,10 @@
 				</view>
 				<view class="right" :class="{ highlight: comment.isLike }">
 					{{ comment.likeNum }}
-					<u-icon v-if="!comment.isLike" name="thumb-up" class="like" color="#9a9a9a" :size="30" @click="getLike"></u-icon>
-					<u-icon v-if="comment.isLike" name="thumb-up-fill" class="like" :size="30" @click="getLike"></u-icon>
+					<u-icon v-if="!comment.isLike" name="thumb-up" class="like" color="#9a9a9a" :size="30"
+						@click="getLike"></u-icon>
+					<u-icon v-if="comment.isLike" name="thumb-up-fill" class="like" :size="30"
+						@click="getLike"></u-icon>
 				</view>
 			</view>
 			<view class="content">{{ comment.contentText }}</view>
@@ -23,16 +122,20 @@
 				<view class="comment">
 					<view class="top">
 						<view class="left">
-							<view class="heart-photo"><image :src="item.url" mode=""></image></view>
+							<view class="heart-photo">
+								<image :src="item.url" mode=""></image>
+							</view>
 							<view class="user-info">
 								<view class="name">{{ item.name }}</view>
 								<view class="date">{{ item.date }}</view>
 							</view>
 						</view>
-						<view class="right"  :class="{ highlight: item.isLike }">
+						<view class="right" :class="{ highlight: item.isLike }">
 							<view class="num">{{ item.likeNum }}</view>
-							<u-icon v-if="!item.isLike" name="thumb-up" class="like" :size="30" color="#9a9a9a" @click="getLike(index)"></u-icon>
-							<u-icon v-if="item.isLike" name="thumb-up-fill" class="like" :size="30" @click="getLike(index)"></u-icon>
+							<u-icon v-if="!item.isLike" name="thumb-up" class="like" :size="30" color="#9a9a9a"
+								@click="getLike(index)"></u-icon>
+							<u-icon v-if="item.isLike" name="thumb-up-fill" class="like" :size="30"
+								@click="getLike(index)"></u-icon>
 						</view>
 					</view>
 					<view class="reply" v-if="item.reply">
@@ -46,119 +149,24 @@
 	</view>
 </template>
 
-<script>
-export default {
-	data() {
-		return {
-			commentList: [],
-			comment: ''
-		};
-	},
-	onLoad() {
-		this.getReply();
-	},
-	methods: {
-		// 点赞
-		getLike(index) {
-			if (index === 0 || index > 0) {
-				this.commentList[index].isLike = !this.commentList[index].isLike;
-				if (this.commentList[index].isLike == true) {
-					this.commentList[index].likeNum++;
-				} else {
-					this.commentList[index].likeNum--;
-				}
-			} else {
-				if (this.comment.isLike == true) {
-					this.comment.isLike = !this.comment.isLike;
-					this.comment.likeNum--;
-				} else {
-					this.comment.isLike = !this.comment.isLike;
-					this.comment.likeNum++;
-				}
-			}
-		},
-
-		// 回复列表
-		getReply() {
-			this.comment = {
-				id: 1,
-				name: '叶轻眉',
-				date: '12-25 18:58',
-				contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
-				url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
-				allReply: 12,
-				likeNum: 33,
-				isLikes: false
-			};
-			this.commentList = [
-				{
-					name: '新八几',
-					date: '12-25 18:58',
-					contentText: '不要乱打广告啊喂！虽然是真的超好用',
-					url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
-					likeNum: 33,
-					isLike: false,
-					reply: {
-						name: 'uview',
-						contentStr: 'uview是基于uniapp的一个UI框架，代码优美简洁，宇宙超级无敌彩虹旋转好用，用它！'
-					}
-				},
-				{
-					name: '叶轻眉1',
-					date: '01-25 13:58',
-					url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
-					contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
-					allReply: 0,
-					likeNum: 11,
-					isLike: false,
-					reply: {
-						name: '粘粘',
-						contentStr: '今天吃什么，明天吃什么，晚上吃什么，我只是一只小猫咪为什么要烦恼这么多'
-					}
-				},
-				{
-					name: '叶轻眉2',
-					date: '03-25 13:58',
-					contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
-					allReply: 0,
-					likeNum: 21,
-					url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
-					isLike: false,
-					allReply: 2,
-					reply: {
-						name: '豆包',
-						contentStr: '想吃冰糖葫芦粘豆包，但没钱5555.........'
-					}
-				},
-				{
-					name: '叶轻眉3',
-					date: '06-20 13:58',
-					contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
-					allReply: 0,
-					likeNum: 150,
-					url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
-					isLike: false
-				}
-			];
-		}
-	}
-};
-</script>
-
 <style lang="scss" scoped>
 page {
 	background-color: #f2f2f2;
 }
+
 .comment {
 	padding: 30rpx;
 	font-size: 32rpx;
 	background-color: #ffffff;
+
 	.top {
 		display: flex;
 		justify-content: space-between;
 	}
+
 	.left {
 		display: flex;
+
 		.heart-photo {
 			image {
 				width: 64rpx;
@@ -167,43 +175,53 @@ page {
 				background-color: #f2f2f2;
 			}
 		}
+
 		.user-info {
 			margin-left: 10rpx;
+
 			.name {
 				color: #5677fc;
 				font-size: 28rpx;
 				margin-bottom: 4rpx;
 			}
+
 			.date {
 				font-size: 20rpx;
 				color: $u-light-color;
 			}
 		}
 	}
+
 	.right {
 		display: flex;
 		font-size: 20rpx;
 		align-items: center;
 		color: #9a9a9a;
+
 		.like {
 			margin-left: 6rpx;
 		}
-		.num{
+
+		.num {
 			font-size: 26rpx;
 			color: #9a9a9a;
 		}
 	}
+
 	.highlight {
 		color: #5677fc;
-		.num{
+
+		.num {
 			color: #5677fc;
 		}
 	}
 }
+
 .all-reply {
 	margin-top: 10rpx;
 	padding-top: 20rpx;
 	background-color: #ffffff;
+
 	.all-reply-top {
 		margin-left: 20rpx;
 		padding-left: 20rpx;
@@ -211,14 +229,17 @@ page {
 		font-size: 30rpx;
 		font-weight: bold;
 	}
+
 	.item {
 		border-bottom: solid 2rpx $u-border-color;
 	}
+
 	.reply {
 		padding: 20rpx;
 		background-color: rgb(242, 242, 242);
 		border-radius: 12rpx;
 		margin: 10rpx 0;
+
 		.username {
 			font-size: 24rpx;
 			color: #7a7a7a;
diff --git a/src/pages_template/pages/coupon/index.vue b/src/pages_template/pages/coupon/index.vue
index a271629..5807c62 100644
--- a/src/pages_template/pages/coupon/index.vue
+++ b/src/pages_template/pages/coupon/index.vue
@@ -1,3 +1,5 @@
+<script setup>
+</script>
 <template>
 	<view class="u-wrap">
 		<view class="meituan">
@@ -57,18 +59,18 @@
 		<view class="taobao">
 			<view class="title">
 				<view class="left">
-					<image class="buddha" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1975388697,1068670603&fm=26&gp=0.jpg" mode="aspectFill"></image>
+					<image class="buddha"
+						src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1975388697,1068670603&fm=26&gp=0.jpg"
+						mode="aspectFill"></image>
 					<view class="store">袜子精保护协会</view>
 				</view>
 				<view class="entrance">进店</view>
 			</view>
 			<view class="ticket">
 				<view class="left">
-					<image
-						class="picture"
+					<image class="picture"
 						src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578059523488&di=5f592ac19c1b983005d3e85add469756&imgtype=0&src=http%3A%2F%2Fimg010.hc360.cn%2Fg7%2FM00%2F2D%2FB9%2FwKhQs1QfUo6EdeM-AAAAALwk1hM072.jpg"
-						mode="widthFix"
-					></image>
+						mode="widthFix"></image>
 					<view class="introduce">
 						<view class="top">
 							￥
@@ -82,23 +84,18 @@
 				<view class="right">
 					<view class="use immediate-use" :round="true">去使用</view>
 				</view>
-				
+
 			</view>
 		</view>
 	</view>
 </template>
 
-<script>
-export default {
-	
-};
-</script>
-
 <style lang="scss" scoped>
 page {
 	height: 100%;
 	background-color: rgb(244, 244, 244);
 }
+
 .u-wrap {
 	padding: 24rpx;
 }
@@ -110,23 +107,28 @@ page {
 	// border: 10rpx;
 	color: $u-warning;
 	font-size: 28rpx;
+
 	.content {
 		display: flex;
 		align-items: center;
 		padding: 80rpx 20rpx;
 		border: 10rpx;
 		background-color: #fff5f4;
+
 		.left {
 			.sum {
 				font-size: 32rpx;
+
 				.num {
 					font-size: 60rpx;
 					font-weight: bold;
 				}
 			}
 		}
+
 		.centre {
 			margin-left: 40rpx;
+
 			.title {
 				font-size: 32rpx;
 				font-weight: bold;
@@ -134,21 +136,24 @@ page {
 				margin-bottom: 20rpx;
 			}
 		}
+
 		.right {
 			margin-left: 30rpx;
+
 			.immediate-use {
 				padding: 0 20rpx;
 				height: 50rpx;
 				border-radius: 25rpx;
 				line-height: 50rpx;
-				background-color: $u-warning!important;
-				color: #ffffff!important;
+				background-color: $u-warning !important;
+				color: #ffffff !important;
 				font-size: 24rpx;
 				border: none;
 				word-break: keep-all;
 			}
 		}
 	}
+
 	.tips {
 		padding: 0 20rpx;
 		border: 10rpx;
@@ -159,6 +164,7 @@ page {
 		justify-content: space-between;
 		line-height: 60rpx;
 		font-size: 24rpx;
+
 		.circle-left,
 		.circle-right {
 			position: absolute;
@@ -178,10 +184,12 @@ page {
 			left: 0;
 			top: -18rpx;
 		}
+
 		.rule {
 			font-size: 24rpx;
 			display: flex;
 			align-items: center;
+
 			text {
 				margin-right: 10rpx;
 				flex: 1;
@@ -196,33 +204,41 @@ page {
 	height: auto;
 	background-color: #ffffff;
 	display: flex;
+
 	.left {
 		padding: 0 30rpx;
 		background-color: rgb(95, 148, 224); //rgb(94, 152, 225);
 		text-align: center;
 		font-size: 28rpx;
 		color: #ffffff;
+
 		.sum {
 			margin-top: 50rpx;
 			font-weight: bold;
 			font-size: 32rpx;
+
 			.num {
 				font-size: 80rpx;
 			}
 		}
+
 		.type {
 			margin-bottom: 50rpx;
 			font-size: 24rpx;
 		}
 	}
+
 	.right {
 		padding: 20rpx 20rpx 0;
 		font-size: 28rpx;
+
 		.top {
 			border-bottom: 2rpx dashed $u-border-color;
+
 			.title {
 				margin-right: 60rpx;
 				line-height: 40rpx;
+
 				.tag {
 					padding: 4rpx 20rpx;
 					background-color: rgb(73, 154, 201);
@@ -233,16 +249,19 @@ page {
 					margin-right: 10rpx;
 				}
 			}
+
 			.bottom {
 				display: flex;
 				margin-top: 20rpx;
 				align-items: center;
 				justify-content: space-between;
 				margin-bottom: 10rpx;
+
 				.date {
 					font-size: 20rpx;
 					flex: 1;
 				}
+
 				.immediate-use {
 					height: auto;
 					padding: 0 20rpx;
@@ -254,6 +273,7 @@ page {
 				}
 			}
 		}
+
 		.tips {
 			width: 100%;
 			line-height: 50rpx;
@@ -261,13 +281,16 @@ page {
 			align-items: center;
 			justify-content: space-between;
 			font-size: 24rpx;
+
 			.transpond {
 				margin-right: 10rpx;
 			}
+
 			.explain {
 				display: flex;
 				align-items: center;
 			}
+
 			.particulars {
 				width: 30rpx;
 				height: 30rpx;
@@ -287,25 +310,30 @@ page {
 	background-color: white;
 	padding: 30rpx 20rpx 20rpx;
 	border-radius: 20rpx;
+
 	.title {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 		margin-bottom: 20rpx;
 		font-size: 30rpx;
+
 		.left {
 			display: flex;
 			align-items: center;
 		}
+
 		.store {
 			font-weight: 500;
 		}
+
 		.buddha {
 			width: 70rpx;
 			height: 70rpx;
 			border-radius: 10rpx;
 			margin-right: 10rpx;
 		}
+
 		.entrance {
 			color: $u-info;
 			border: solid 2rpx $u-info;
@@ -315,8 +343,10 @@ page {
 			border-radius: 15px;
 		}
 	}
+
 	.ticket {
 		display: flex;
+
 		.left {
 			width: 70%;
 			padding: 30rpx 20rpx;
@@ -324,33 +354,40 @@ page {
 			border-radius: 20rpx;
 			border-right: dashed 2rpx rgb(224, 215, 211);
 			display: flex;
+
 			.picture {
 				width: 172rpx;
 				height: 172rpx;
 				border-radius: 20rpx;
 			}
+
 			.introduce {
 				margin-left: 10rpx;
-				.top{
-					color:$u-warning;
+
+				.top {
+					color: $u-warning;
 					font-size: 28rpx;
-					.big{
+
+					.big {
 						font-size: 60rpx;
 						font-weight: bold;
 						margin-right: 10rpx;
 					}
 				}
-				.type{
+
+				.type {
 					font-size: 28rpx;
 					color: $u-info-dark;
 				}
-				.date{
+
+				.date {
 					margin-top: 10rpx;
 					font-size: 20rpx;
 					color: $u-info-dark;
 				}
 			}
 		}
+
 		.right {
 			width: 30%;
 			padding: 40rpx 20rpx;
@@ -358,13 +395,14 @@ page {
 			border-radius: 20rpx;
 			display: flex;
 			align-items: center;
-			.use{
+
+			.use {
 				height: auto;
 				padding: 0 20rpx;
 				font-size: 24rpx;
 				border-radius: 40rpx;
-				color: #ffffff!important;
-				background-color: $u-warning!important;
+				color: #ffffff !important;
+				background-color: $u-warning !important;
 				line-height: 40rpx;
 				color: rgb(117, 142, 165);
 				margin-left: 20rpx;
diff --git a/src/pages_template/pages/keyboardPay/index.vue b/src/pages_template/pages/keyboardPay/index.vue
index cfc72ad..1637ec6 100644
--- a/src/pages_template/pages/keyboardPay/index.vue
+++ b/src/pages_template/pages/keyboardPay/index.vue
@@ -1,3 +1,62 @@
+<script setup>
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+
+const show = ref(false)
+const password = ref('')
+
+onLoad(() => {
+})
+
+const onChange = (val) => {
+	if (password.value.length < 6) {
+		password.value += val
+	}
+
+	if (password.value.length >= 6) {
+		pay()
+	}
+}
+
+const onBackspace = () => {
+	if (password.value.length > 0) {
+		password.value = password.value.substring(0, password.value.length - 1)
+	}
+}
+
+const pay = () => {
+	uni.showLoading({
+		title: '支付中'
+	})
+
+	setTimeout(() => {
+		uni.hideLoading()
+		show.value = false
+		uni.showToast({
+			icon: 'success',
+			title: '支付成功'
+		})
+	}, 2000)
+}
+
+const showPop = (flag = true) => {
+	password.value = ''
+	show.value = flag
+	// #ifdef H5 || WEB
+	setTimeout(() => {
+		const btn = document.querySelector('.u-keyboard__button-wrapper__button.u-keyboard__button-wrapper__button--gray')
+		if (btn) {
+			console.log(btn)
+			btn.onclick = onBackspace
+		}
+	}, 500)
+	// #endif
+}
+
+const finish = () => {
+	console.log(11111)
+}
+</script>
 <template>
 	<view>
 		<view class="u-padding-40">
@@ -26,65 +85,6 @@
 	</view>
 </template>
 
-<script>
-export default {
-	data() {
-		return {
-			show: false,
-			password: ''
-		}
-	},
-	onLoad() {
-	},
-	methods: {
-		onChange(val) {
-			if (this.password.length < 6) {
-				this.password += val;
-			}
-
-			if (this.password.length >= 6) {
-				this.pay();
-			}
-		},
-		onBackspace(e) {
-			if (this.password.length > 0) {
-				this.password = this.password.substring(0, this.password.length - 1);
-			}
-		},
-		pay() {
-			uni.showLoading({
-				title: '支付中'
-			})
-
-			setTimeout(() => {
-				uni.hideLoading();
-				this.show = false;
-				uni.showToast({
-					icon: 'success',
-					title: '支付成功'
-				})
-			}, 2000);
-		},
-		showPop(flag = true) {
-			this.password = '';
-			this.show = flag;
-			// #ifdef H5 || WEB
-			setTimeout(() => {
-				const btn = document.querySelector('.u-keyboard__button-wrapper__button.u-keyboard__button-wrapper__button--gray');
-				if (!!btn) {
-					console.log(btn);
-					btn.onclick = this.onBackspace
-				}
-			}, 500)
-			// #endif
-		},
-		finish() {
-			console.log(11111)
-		}
-	}
-}
-</script>
-
 <style lang="scss">
 .money {
 	font-size: 80rpx;
diff --git a/src/pages_template/pages/login/code.vue b/src/pages_template/pages/login/code.vue
index f94d9e5..03dcf73 100644
--- a/src/pages_template/pages/login/code.vue
+++ b/src/pages_template/pages/login/code.vue
@@ -1,9 +1,52 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+
+const maxlength = ref(4);
+const value = ref('');
+const second = ref(3);
+const show = ref(false);
+const error = ref(false);
+
+onMounted(() => {
+	let interval = setInterval(() => {
+		second.value--;
+		if (second.value <= 0) {
+			show.value = true;
+			if (value.value.length !== 4) {
+				error.value = true;
+			}
+			clearInterval(interval);
+		}
+	}, 1000);
+});
+
+const noCaptcha = () => {
+	uni.showActionSheet({
+		itemList: ['重新获取验证码', '接听语音验证码'],
+		success: function (res) {
+			// 处理成功逻辑
+		},
+		fail: function (res) {
+			// 处理失败逻辑
+		}
+	});
+};
+
+const change = (value) => {
+	// console.log('change', value);
+};
+
+const finish = (value) => {
+	// console.log('finish', value);
+};
+</script>
 <template>
 	<view class="wrap">
 		<view class="key-input">
 			<view class="title">输入验证码</view>
 			<view class="tips">验证码已发送至 +150****9320</view>
-			<u-message-input :focus="true" :value="value" @change="change" @finish="finish" mode="bottomLine" :maxlength="maxlength"></u-message-input>
+			<u-message-input :focus="true" :value="value" @change="change" @finish="finish" mode="bottomLine"
+				:maxlength="maxlength"></u-message-input>
 			<text :class="{ error: error }">验证码错误，请重新输入</text>
 			<view class="captcha">
 				<text :class="{ noCaptcha: show }" @tap="noCaptcha">收不到验证码点这里</text>
@@ -13,56 +56,6 @@
 	</view>
 </template>
 
-<script>
-export default {
-	data() {
-		return {
-			maxlength: 4,
-			value: '',
-			second: 3,
-			show: false,
-			error: false
-		};
-	},
-	computed: {},
-	onLoad() {
-		// this.getCaptcha()
-		let interval = setInterval(() => {
-			this.second--;
-			if (this.second <= 0) {
-				this.show = true;
-				if (this.value.lenth != 4) {
-					this.error = true;
-				}
-				clearInterval(interval);
-			}
-		}, 1000);
-	},
-	methods: {
-		// 收不到验证码选择时的选择
-		noCaptcha() {
-			uni.showActionSheet({
-				itemList: ['重新获取验证码', '接听语音验证码'],
-				success: function(res) {
-					
-				},
-				fail: function(res) {
-					
-				}
-			});
-		},
-		// change事件侦听
-		change(value) {
-			// console.log('change', value);
-		},
-		// 输入完验证码最后一位执行
-		finish(value) {
-			// console.log('finish', value);
-		}
-	}
-};
-</script>
-
 <style lang="scss" scoped>
 .wrap {
 	padding: 80rpx;
@@ -76,9 +69,11 @@ export default {
 
 .key-input {
 	padding: 30rpx 0;
+
 	text {
 		display: none;
 	}
+
 	.error {
 		display: block;
 		color: red;
@@ -98,13 +93,16 @@ export default {
 	margin-top: 20rpx;
 	margin-bottom: 60rpx;
 }
+
 .captcha {
 	color: $u-warning;
 	font-size: 30rpx;
 	margin-top: 40rpx;
+
 	.noCaptcha {
 		display: block;
 	}
+
 	.regain {
 		display: block;
 	}
diff --git a/src/pages_template/pages/login/index1.vue b/src/pages_template/pages/login/index1.vue
index 8a34e93..f44078f 100644
--- a/src/pages_template/pages/login/index1.vue
+++ b/src/pages_template/pages/login/index1.vue
@@ -31,31 +31,24 @@
 	</view>
 </template>
 
-<script>
-export default {
-	data() {
-		return {
-			tel: ''
-		}
-	},
-	computed: {
-		inputStyle() {
-			let style = {};
-			if(this.tel) {
-				style.color = "#fff";
-				style.backgroundColor = this.$u.color['warning'];
-			}
-			return style;
-		}
-	},
-	methods: {
-		submit() {
-			if(this.$u.test.mobile(this.tel)) {
-				this.$u.route({
-					url: 'pages/template/login/code'
-				})
-			}
-		}
+<script setup>
+import tab from '@/plugins/tab';
+import { ref, computed } from 'vue';
+
+const tel = ref('');
+
+const inputStyle = computed(() => {
+	let style = {};
+	if (tel.value) {
+		style.color = "#fff";
+		style.backgroundColor = '#f9c00c'; // 假设 $u.color['warning'] 对应的颜色值
+	}
+	return style;
+});
+
+const submit = () => {
+	if (/\d{11}/.test(tel.value)) { // 假设 $u.test.mobile 是简单的手机号验证
+		tab.navigateTo('/pages_template/pages/login/code');
 	}
 };
 </script>
@@ -63,6 +56,7 @@ export default {
 <style lang="scss" scoped>
 .wrap {
 	font-size: 28rpx;
+
 	.content {
 		width: 600rpx;
 		margin: 80rpx auto 0;
@@ -73,28 +67,32 @@ export default {
 			font-weight: 500;
 			margin-bottom: 100rpx;
 		}
+
 		input {
 			text-align: left;
 			margin-bottom: 10rpx;
 			padding-bottom: 6rpx;
 		}
+
 		.tips {
 			color: $u-info;
 			margin-bottom: 60rpx;
 			margin-top: 8rpx;
 			font-size: 12px;
 		}
+
 		.getCaptcha {
 			background-color: rgb(253, 243, 208);
 			color: $u-tips-color;
 			border: none;
 			font-size: 30rpx;
 			padding: 12rpx 0;
-			
+
 			&::after {
 				border: none;
 			}
 		}
+
 		.alternative {
 			color: $u-tips-color;
 			display: flex;
@@ -102,12 +100,13 @@ export default {
 			margin-top: 30rpx;
 		}
 	}
+
 	.buttom {
 		.loginType {
 			display: flex;
 			padding: 350rpx 150rpx 150rpx 150rpx;
-			justify-content:space-between;
-			
+			justify-content: space-between;
+
 			.item {
 				display: flex;
 				flex-direction: column;
@@ -116,12 +115,12 @@ export default {
 				font-size: 28rpx;
 			}
 		}
-		
+
 		.hint {
 			padding: 20rpx 40rpx;
 			font-size: 20rpx;
 			color: $u-tips-color;
-			
+
 			.link {
 				color: $u-warning;
 			}
diff --git a/src/pages_template/pages/login/index2.vue b/src/pages_template/pages/login/index2.vue
index 489caa8..17922c7 100644
--- a/src/pages_template/pages/login/index2.vue
+++ b/src/pages_template/pages/login/index2.vue
@@ -11,7 +11,8 @@
 				<view class="login-form-content">
 					<view class="input-item flex align-center">
 						<view class="iconfont icon-user icon"></view>
-						<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
+						<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号"
+							maxlength="30" />
 					</view>
 					<view class="input-item flex align-center">
 						<view class="iconfont icon-password icon"></view>
@@ -20,7 +21,8 @@
 					</view>
 					<view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
 						<view class="iconfont icon-code icon"></view>
-						<input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
+						<input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码"
+							maxlength="4" />
 						<view class="login-code">
 							<image :src="codeUrl" @click="getCode" class="login-code-img"></image>
 						</view>
@@ -37,8 +39,8 @@
 		<view v-else>
 			<view class="container">
 				<view class="cover slide-top1" :style="'animation-play-state:' + play[2]">
-					<view class="masking slide-top" :class="[collapsedClass, { animating: isAnimating }]" ref="fixedView"
-						:style="'animation-play-state:' + play[0]">
+					<view class="masking slide-top" :class="[collapsedClass, { animating: isAnimating }]"
+						ref="fixedViewRef" :style="'animation-play-state:' + play[0]">
 						<uni-row>
 							<text class="text-first">欢迎使用</text>
 							<text class="text-second">校园访客</text>
@@ -69,111 +71,104 @@
 		</view>
 	</view>
 </template>
-  
-<script>
+
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue'
 import useUserStore from '@/store/modules/user'
-export default {
-	data() {
-		return {
-			src: "staticimagessoutheast.jpg",
-			isActive: false,
-			isFixedViewVisible: true,
-			animationType: "up", // 可选值：right 或 up
-			isAnimating: false, // 控制动画执行状态
-			play: ["paused", "paused", "paused"],
-			page: "index",
+import tab from '@/plugins/tab'
+import modal from '@/plugins/modal'
 
-			codeUrl: "",
-			captchaEnabled: true,
-			loginForm: {
-				username: "admin",
-				password: "admin123",
-				code: "",
-				uuid: ''
-			}
-		}
-	},
-	computed: {
-		collapsedClass() {
-			return this.isFixedViewVisible ? "" : `collapsed-${this.animationType}`;
-		},
-	},
-	created() {
-		this.getCode()
-	},
-	methods: {
-		login() {
-			this.play[2] = "running"
-			setTimeout(() => { this.page = 'login' }, 1000)
+const src = ref("staticimagessoutheast.jpg")
+const isActive = ref(false)
+const isFixedViewVisible = ref(true)
+const animationType = ref("up") // 可选值：right 或 up
+const isAnimating = ref(false) // 控制动画执行状态
+const play = ref(["paused", "paused", "paused"])
+const page = ref("index")
 
-		},
-		back() {
-			this.page = 'index'
-			this.play[0] = "paused"
-			this.play[1] = "paused"
-			this.play[2] = "paused"
-		},
-		startplay() {
-			this.play[1] = "running"
-			this.isActive = true;
-			setTimeout(() => { this.isActive = false; }, 300);
-			if (this.isAnimating) { return; }
-			this.isAnimating = false; // 开始动画执行
-			this.play[0] = "running"
-			this.isFixedViewVisible = !this.isFixedViewVisible;
-			let fixedView = this.$refs.fixedView;
-			if (fixedView)
-				fixedView.addEventListener('transitionend', () => { this.isAnimating = false; }, { once: true });
+const codeUrl = ref("")
+const captchaEnabled = ref(true)
+const loginForm = reactive({
+	username: "admin",
+	password: "admin123",
+	code: "",
+	uuid: ''
+})
 
-			setTimeout(() => { uni.navigateBack({ delta: 1 }); }, 1000)
-		},
+const collapsedClass = computed(() => {
+	return isFixedViewVisible.value ? "" : `collapsed-${animationType.value}`;
+})
 
+onMounted(() => {
+	getCode()
+})
 
+const login = () => {
+	play.value[2] = "running"
+	setTimeout(() => { page.value = 'login' }, 1000)
+}
 
-		// 获取图形验证码
-		getCode() {
-			let res = {}
-			this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
-			if (this.captchaEnabled) {
-				this.codeUrl = 'data:image/gif;base64,' + res.img
-				this.loginForm.uuid = res.uuid
-			}
-		},
-		// 登录方法
-		async handleLogin() {
-			if (this.loginForm.username === "") {
-				this.$modal.msgError("请输入您的账号")
-			} else if (this.loginForm.password === "") {
-				this.$modal.msgError("请输入您的密码")
-			} else if (this.loginForm.code === "" && this.captchaEnabled) {
-				this.$modal.msgError("请输入验证码")
-			} else {
-				this.$modal.loading("登录中，请耐心等待...")
-				this.pwdLogin()
-			}
-		},
-		// 密码登录
-		async pwdLogin() {
-			useUserStore().login(this.loginForm).then(() => {
-				this.$modal.closeLoading()
-				this.loginSuccess()
-			}).catch(() => {
-				if (this.captchaEnabled) {
-					this.getCode()
-				}
-			})
-		},
-		// 登录成功后，处理函数
-		loginSuccess(result) {
-			// 设置用户信息
-			useUserStore().getInfo().then(res => {
-				this.$tab.reLaunch('/pages/index')
-			})
-		}
+const back = () => {
+	page.value = 'index'
+	play.value[0] = "paused"
+	play.value[1] = "paused"
+	play.value[2] = "paused"
+}
+const startplay = () => {
+	play.value[1] = "running"
+	isActive.value = true;
+	setTimeout(() => { isActive.value = false; }, 300);
+	if (isAnimating.value) { return; }
+	isAnimating.value = false; // 开始动画执行
+	play.value[0] = "running"
+	isFixedViewVisible.value = !isFixedViewVisible.value;
+	setTimeout(() => { uni.navigateBack({ delta: 1 }); }, 1000)
+}
+
+// 获取图形验证码
+const getCode = () => {
+	let res = {}
+	captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
+	if (captchaEnabled.value) {
+		codeUrl.value = 'data:image/gif;base64,' + res.img
+		loginForm.uuid = res.uuid
 	}
 }
+
+// 登录方法
+const handleLogin = async () => {
+	if (loginForm.username === "") {
+		modal.msgError("请输入您的账号")
+	} else if (loginForm.password === "") {
+		modal.msgError("请输入您的密码")
+	} else if (loginForm.code === "" && captchaEnabled.value) {
+		modal.msgError("请输入验证码")
+	} else {
+		modal.loading("登录中，请耐心等待...")
+		pwdLogin()
+	}
+}
+
+// 密码登录
+const pwdLogin = async () => {
+	useUserStore().login(loginForm).then(() => {
+		modal.closeLoading()
+		loginSuccess()
+	}).catch(() => {
+		if (captchaEnabled.value) {
+			getCode()
+		}
+	})
+}
+
+// 登录成功后，处理函数
+const loginSuccess = (result) => {
+	// 设置用户信息
+	useUserStore().getInfo().then(res => {
+		tab.reLaunch('/pages/index')
+	})
+}
 </script>
-  
 <style lang="scss">
 page {
 	background-color: #ffffff;
@@ -664,5 +659,4 @@ page {
 		opacity: 1;
 	}
 }
-</style>
-  
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/src/pages_template/pages/mallMenu/index1.vue b/src/pages_template/pages/mallMenu/index1.vue
index b6d677e..2c5cf7a 100644
--- a/src/pages_template/pages/mallMenu/index1.vue
+++ b/src/pages_template/pages/mallMenu/index1.vue
@@ -1,3 +1,53 @@
+<script setup>
+import { ref, reactive } from 'vue';
+import classifyData from "@/pages_template/common/classify.data.js";
+
+const tabbar = reactive(classifyData);
+const scrollTop = ref(0); // tab标题的滚动条位置
+const current = ref(0); // 预设当前项的值
+const menuHeight = ref(0); // 左边菜单的高度
+const menuItemHeight = ref(0); // 左边菜单item的高度
+
+// 点击左边的栏目切换
+const swichMenu = async (index) => {
+	if (index === current.value) return;
+	current.value = index;
+	// 如果为0，意味着尚未初始化
+	if (menuHeight.value === 0 || menuItemHeight.value === 0) {
+		await getElRect('menu-scroll-view', 'menuHeight');
+		await getElRect('u-tab-item', 'menuItemHeight');
+	}
+	// 将菜单菜单活动item垂直居中
+	scrollTop.value = index * menuItemHeight.value + menuItemHeight.value / 2 - menuHeight.value / 2;
+};
+
+// 获取一个目标元素的高度
+const getElRect = (elClass, dataVal) => {
+	return new Promise((resolve, reject) => {
+		const query = uni.createSelectorQuery().in(this);
+		query.select('.' + elClass).fields({ size: true }, res => {
+			// 如果节点尚未生成，res值为null，循环调用执行
+			if (!res) {
+				setTimeout(() => {
+					getElRect(elClass, dataVal);
+				}, 10);
+				return;
+			}
+			if (dataVal === 'menuHeight') {
+				menuHeight.value = res.height;
+			} else if (dataVal === 'menuItemHeight') {
+				menuItemHeight.value = res.height;
+			}
+			resolve();
+		}).exec();
+	});
+};
+
+const clickMenu = (menu) => {
+	console.log(menu);
+};
+</script>
+
 <template>
 	<view class="u-wrap">
 		<view class="u-search-box">
@@ -36,54 +86,6 @@
 	</view>
 </template>
 
-<script>
-import classifyData from "@/pages_template/common/classify.data.js";
-export default {
-	data() {
-		return {
-			tabbar: classifyData,
-			scrollTop: 0, //tab标题的滚动条位置
-			current: 0, // 预设当前项的值
-			menuHeight: 0, // 左边菜单的高度
-			menuItemHeight: 0, // 左边菜单item的高度
-		}
-	},
-	methods: {
-		// 点击左边的栏目切换
-		async swichMenu(index) {
-			if (index == this.current) return;
-			this.current = index;
-			// 如果为0，意味着尚未初始化
-			if (this.menuHeight == 0 || this.menuItemHeight == 0) {
-				await this.getElRect('menu-scroll-view', 'menuHeight');
-				await this.getElRect('u-tab-item', 'menuItemHeight');
-			}
-			// 将菜单菜单活动item垂直居中
-			this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
-		},
-		// 获取一个目标元素的高度
-		getElRect(elClass, dataVal) {
-			new Promise((resolve, reject) => {
-				const query = uni.createSelectorQuery().in(this);
-				query.select('.' + elClass).fields({ size: true }, res => {
-					// 如果节点尚未生成，res值为null，循环调用执行
-					if (!res) {
-						setTimeout(() => {
-							this.getElRect(elClass);
-						}, 10);
-						return;
-					}
-					this[dataVal] = res.height;
-				}).exec();
-			})
-		},
-		clickMenu(menu) {
-			console.log(menu);
-		}
-	}
-}
-</script>
-
 <style lang="scss" scoped>
 .u-wrap {
 	height: calc(100vh);
diff --git a/src/pages_template/pages/mallMenu/index2.vue b/src/pages_template/pages/mallMenu/index2.vue
index 0cc28a5..5b99bde 100644
--- a/src/pages_template/pages/mallMenu/index2.vue
+++ b/src/pages_template/pages/mallMenu/index2.vue
@@ -1,3 +1,138 @@
+<script setup>
+import { ref, onMounted, nextTick } from 'vue';
+import classifyData from '@/pages_template/common/classify.data.js';
+
+const scrollTop = ref(0); // tab标题的滚动条位置
+const oldScrollTop = ref(0);
+const current = ref(0); // 预设当前项的值
+const menuHeight = ref(0); // 左边菜单的高度
+const menuItemHeight = ref(0); // 左边菜单item的高度
+const itemId = ref(''); // 栏目右边scroll-view用于滚动的id
+const tabbar = classifyData;
+
+const arr = ref([]);
+const scrollRightTop = ref(0); // 右边栏目scroll-view的滚动条高度
+const timer = ref(null); // 定时器
+
+onMounted(() => {
+	getMenuItemTop();
+});
+
+// 点击左边的栏目切换
+const swichMenu = async (index) => {
+	if (arr.value.length === 0) {
+		await getMenuItemTop();
+	}
+	if (index === current.value) return;
+	scrollRightTop.value = oldScrollTop.value;
+	await nextTick(() => {
+		scrollRightTop.value = arr.value[index];
+		current.value = index;
+		leftMenuStatus(index);
+	});
+};
+
+// 获取一个目标元素的高度
+const getElRect = (elClass, dataVal) => {
+	return new Promise((resolve, reject) => {
+		const query = uni.createSelectorQuery().in(this);
+		query.select('.' + elClass).fields({
+			size: true
+		}, (res) => {
+			// 如果节点尚未生成，res值为null，循环调用执行
+			if (!res) {
+				setTimeout(() => {
+					getElRect(elClass, dataVal);
+				}, 10);
+				return;
+			}
+			dataVal.value = res.height;
+			resolve();
+		}).exec();
+	});
+};
+
+// 观测元素相交状态
+const observer = () => {
+	tabbar.map((val, index) => {
+		let observer = uni.createIntersectionObserver(this);
+		// 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
+		// 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
+		observer.relativeTo('.right-box', {
+			top: 0
+		}).observe('#item' + index, (res) => {
+			if (res.intersectionRatio > 0) {
+				let id = res.id.substring(4);
+				leftMenuStatus(id);
+			}
+		});
+	});
+};
+
+// 设置左边菜单的滚动状态
+const leftMenuStatus = async (index) => {
+	current.value = index;
+	// 如果为0，意味着尚未初始化
+	if (menuHeight.value === 0 || menuItemHeight.value === 0) {
+		await getElRect('menu-scroll-view', menuHeight);
+		await getElRect('u-tab-item', menuItemHeight);
+	}
+	// 将菜单活动item垂直居中
+	scrollTop.value = index * menuItemHeight.value + menuItemHeight.value / 2 - menuHeight.value / 2;
+};
+
+// 获取右边菜单每个item到顶部的距离
+const getMenuItemTop = () => {
+	return new Promise((resolve) => {
+		let selectorQuery = uni.createSelectorQuery();
+		selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
+			// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
+			if (!rects.length) {
+				setTimeout(() => {
+					getMenuItemTop();
+				}, 10);
+				return;
+			}
+			rects.forEach((rect) => {
+				// 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
+				arr.value.push(rect.top - rects[0].top);
+				resolve();
+			});
+		}).exec();
+	});
+};
+
+// 右边菜单滚动
+const rightScroll = async (e) => {
+	oldScrollTop.value = e.detail.scrollTop;
+	if (arr.value.length === 0) {
+		await getMenuItemTop();
+	}
+	if (timer.value) return;
+	if (!menuHeight.value) {
+		await getElRect('menu-scroll-view', menuHeight);
+	}
+	setTimeout(() => { // 节流
+		timer.value = null;
+		// scrollHeight为右边菜单垂直中点位置
+		let scrollHeight = e.detail.scrollTop + menuHeight.value / 2;
+		for (let i = 0; i < arr.value.length; i++) {
+			let height1 = arr.value[i];
+			let height2 = arr.value[i + 1];
+			// 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
+			if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
+				leftMenuStatus(i);
+				return;
+			}
+		}
+	}, 10);
+};
+
+const clickMenu = (menu) => {
+	console.log(menu);
+};
+</script>
+
 <template>
 	<view class="u-wrap">
 		<view class="u-search-box">
@@ -34,140 +169,6 @@
 		</view>
 	</view>
 </template>
-<script>
-import classifyData from '@/pages_template/common/classify.data.js';
-export default {
-	data() {
-		return {
-			scrollTop: 0, //tab标题的滚动条位置
-			oldScrollTop: 0,
-			current: 0, // 预设当前项的值
-			menuHeight: 0, // 左边菜单的高度
-			menuItemHeight: 0, // 左边菜单item的高度
-			itemId: '', // 栏目右边scroll-view用于滚动的id
-			tabbar: classifyData,
-
-			arr: [],
-			scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
-			timer: null, // 定时器
-
-		}
-	},
-	onReady() {
-		this.getMenuItemTop()
-	},
-	methods: {
-		// 点击左边的栏目切换
-		async swichMenu(index) {
-			if (this.arr.length == 0) {
-				await this.getMenuItemTop();
-			}
-			if (index == this.current) return;
-			this.scrollRightTop = this.oldScrollTop;
-			this.$nextTick(() => {
-				this.scrollRightTop = this.arr[index];
-				this.current = index;
-				this.leftMenuStatus(index);
-			})
-		},
-		// 获取一个目标元素的高度
-		getElRect(elClass, dataVal) {
-			new Promise((resolve, reject) => {
-				const query = uni.createSelectorQuery().in(this);
-				query.select('.' + elClass).fields({
-					size: true
-				}, res => {
-					// 如果节点尚未生成，res值为null，循环调用执行
-					if (!res) {
-						setTimeout(() => {
-							this.getElRect(elClass);
-						}, 10);
-						return;
-					}
-					this[dataVal] = res.height;
-					resolve();
-				}).exec();
-			})
-		},
-		// 观测元素相交状态
-		async observer() {
-			this.tabbar.map((val, index) => {
-				let observer = uni.createIntersectionObserver(this);
-				// 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
-				// 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
-				observer.relativeTo('.right-box', {
-					top: 0
-				}).observe('#item' + index, res => {
-					if (res.intersectionRatio > 0) {
-						let id = res.id.substring(4);
-						this.leftMenuStatus(id);
-					}
-				})
-			})
-		},
-		// 设置左边菜单的滚动状态
-		async leftMenuStatus(index) {
-			this.current = index;
-			// 如果为0，意味着尚未初始化
-			if (this.menuHeight == 0 || this.menuItemHeight == 0) {
-				await this.getElRect('menu-scroll-view', 'menuHeight');
-				await this.getElRect('u-tab-item', 'menuItemHeight');
-			}
-			// 将菜单活动item垂直居中
-			this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
-		},
-		// 获取右边菜单每个item到顶部的距离
-		getMenuItemTop() {
-			new Promise(resolve => {
-				let selectorQuery = uni.createSelectorQuery();
-				selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
-					// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
-					if (!rects.length) {
-						setTimeout(() => {
-							this.getMenuItemTop();
-						}, 10);
-						return;
-					}
-					rects.forEach((rect) => {
-						// 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
-						this.arr.push(rect.top - rects[0].top);
-						resolve();
-					})
-				}).exec()
-			})
-		},
-		// 右边菜单滚动
-		async rightScroll(e) {
-			this.oldScrollTop = e.detail.scrollTop;
-			if (this.arr.length == 0) {
-				await this.getMenuItemTop();
-			}
-			if (this.timer) return;
-			if (!this.menuHeight) {
-				await this.getElRect('menu-scroll-view', 'menuHeight');
-			}
-			setTimeout(() => { // 节流
-				this.timer = null;
-				// scrollHeight为右边菜单垂直中点位置
-				let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
-				for (let i = 0; i < this.arr.length; i++) {
-					let height1 = this.arr[i];
-					let height2 = this.arr[i + 1];
-					// 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
-					if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
-						this.leftMenuStatus(i);
-						return;
-					}
-				}
-			}, 10)
-		},
-		clickMenu(menu) {
-			console.log(menu);
-		}
-	}
-}
-</script>
-
 <style lang="scss" scoped>
 .u-wrap {
 	height: calc(100vh);
diff --git a/src/pages_template/pages/order/index.vue b/src/pages_template/pages/order/index.vue
index edf15f5..a011ba3 100644
--- a/src/pages_template/pages/order/index.vue
+++ b/src/pages_template/pages/order/index.vue
@@ -1,9 +1,192 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+
+const orderList = ref([[], [], [], []]);
+const dataList = reactive([
+	{
+		id: 1,
+		store: '夏日流星限定贩卖',
+		deal: '交易成功',
+		goodsList: [
+			{
+				goodsUrl: '//img13.360buyimg.com/n7/jfs/t1/103005/7/17719/314825/5e8c19faEb7eed50d/5b81ae4b2f7f3bb7.jpg',
+				title: '【冬日限定】现货 原创jk制服女2020冬装新款小清新宽松软糯毛衣外套女开衫短款百搭日系甜美风',
+				type: '灰色;M',
+				deliveryTime: '付款后30天内发货',
+				price: '348.58',
+				number: 2
+			},
+			{
+				goodsUrl: '//img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg',
+				title: '【葡萄藤】现货 小清新学院风制服格裙百褶裙女短款百搭日系甜美风原创jk制服女2020新款',
+				type: '45cm;S',
+				deliveryTime: '付款后30天内发货',
+				price: '135.00',
+				number: 1
+			}
+		]
+	},
+	{
+		id: 2,
+		store: '江南皮革厂',
+		deal: '交易失败',
+		goodsList: [
+			{
+				goodsUrl: '//img14.360buyimg.com/n7/jfs/t1/60319/15/6105/406802/5d43f68aE9f00db8c/0affb7ac46c345e2.jpg',
+				title: '【冬日限定】现货 原创jk制服女2020冬装新款小清新宽松软糯毛衣外套女开衫短款百搭日系甜美风',
+				type: '粉色;M',
+				deliveryTime: '付款后7天内发货',
+				price: '128.05',
+				number: 1
+			}
+		]
+	},
+	{
+		id: 3,
+		store: '三星旗舰店',
+		deal: '交易失败',
+		goodsList: [
+			{
+				goodsUrl: '//img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg',
+				title: '三星（SAMSUNG）京品家电 UA65RUF70AJXXZ 65英寸4K超高清 HDR 京东微联 智能语音 教育资源液晶电视机',
+				type: '4K，广色域',
+				deliveryTime: '保质5年',
+				price: '1998',
+				number: 3
+			},
+			{
+				goodsUrl: '//img14.360buyimg.com/n7/jfs/t6007/205/4099529191/294869/ae4e6d4f/595dcf19Ndce3227d.jpg!q90.jpg',
+				title: '美的(Midea)639升 对开门冰箱 19分钟急速净味 一级能效冷藏双开门杀菌智能家用双变频节能 BCD-639WKPZM(E)',
+				type: '容量大，速冻',
+				deliveryTime: '保质5年',
+				price: '2354',
+				number: 1
+			}
+		]
+	},
+	{
+		id: 4,
+		store: '三星旗舰店',
+		deal: '交易失败',
+		goodsList: [
+			{
+				goodsUrl: '//img10.360buyimg.com/n7/jfs/t22300/31/1505958241/171936/9e201a89/5b2b12ffNe6dbb594.jpg!q90.jpg',
+				title: '法国进口红酒 拉菲（LAFITE）传奇波尔多干红葡萄酒750ml*6整箱装',
+				type: '4K，广色域',
+				deliveryTime: '珍藏10年好酒',
+				price: '1543',
+				number: 3
+			},
+			{
+				goodsUrl: '//img10.360buyimg.com/n7/jfs/t1/107598/17/3766/525060/5e143aacE9a94d43c/03573ae60b8bf0ee.jpg',
+				title: '蓝妹（BLUE GIRL）酷爽啤酒 清啤 原装进口啤酒 罐装 500ml*9听 整箱装',
+				type: '一打',
+				deliveryTime: '口感好',
+				price: '120',
+				number: 1
+			}
+		]
+	},
+	{
+		id: 5,
+		store: '三星旗舰店',
+		deal: '交易成功',
+		goodsList: [
+			{
+				goodsUrl: '//img12.360buyimg.com/n7/jfs/t1/52408/35/3554/78293/5d12e9cfEfd118ba1/ba5995e62cbd747f.jpg!q90.jpg',
+				title: '企业微信 中控人脸指纹识别考勤机刷脸机 无线签到异地多店打卡机WX108',
+				type: '识别效率高',
+				deliveryTime: '使用方便',
+				price: '451',
+				number: 9
+			}
+		]
+	}
+]);
+const list = reactive([
+	{ name: '待付款' },
+	{ name: '待发货' },
+	{ name: '待收货' },
+	{ name: '待评价', count: 12 }
+]);
+const current = ref(0);
+const swiperCurrent = ref(0);
+const loadStatus = ref(['loadmore', 'loadmore', 'loadmore', 'loadmore']);
+
+onMounted(() => {
+	getOrderList(0);
+	getOrderList(1);
+	getOrderList(3);
+});
+
+// 价格小数
+const priceDecimal = (val) => {
+	if (val !== parseInt(val)) return val.slice(-2);
+	else return '00';
+};
+
+// 价格整数
+const priceInt = (val) => {
+	if (val !== parseInt(val)) return val.split('.')[0];
+	else return val;
+};
+
+// 触底懒加载
+const reachBottom = () => {
+	loadStatus.value.splice(current.value, 1, "loading");
+	setTimeout(() => {
+		getOrderList(current.value);
+	}, 1200);
+};
+
+// 页面数据
+const getOrderList = (idx) => {
+	// 模拟第n个页面获取数据
+	for (let i = 0; i < 5; i++) {
+		let index = Math.floor(Math.random() * dataList.length);
+		let data = JSON.parse(JSON.stringify(dataList[index]));
+		data.id = Math.random().toString(36).substr(2, 9);
+		orderList.value[idx].push(data);
+	}
+	loadStatus.value.splice(current.value, 1, "loadmore");
+};
+
+// 总价
+const totalPrice = (item) => {
+	let price = 0;
+	item.forEach(val => {
+		price += parseFloat(val.price);
+	});
+	return price.toFixed(2);
+};
+
+// 总件数
+const totalNum = (item) => {
+	let num = 0;
+	item.forEach(val => {
+		num += val.number;
+	});
+	return num;
+};
+
+// tab栏切换
+const change = ({ index }) => {
+	swiperCurrent.value = index;
+	getOrderList(index);
+};
+
+const animationfinish = ({ detail: { current } }) => {
+	swiperCurrent.value = current;
+	current.value = current;
+};
+</script>
+
 <template>
 	<view>
 		<view class="wrap">
 			<view class="u-tabs-box">
-				<u-tabs activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false"
-					swiperWidth="750"></u-tabs>
+				<u-tabs activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change"
+					:is-scroll="false" swiperWidth="750"></u-tabs>
 			</view>
 			<swiper class="swiper-box" :current="swiperCurrent" @animationfinish="animationfinish">
 				<swiper-item class="swiper-item" v-for="(orderlist, index) in orderList" :key="index">
@@ -58,7 +241,8 @@
 						<view class="page-box">
 							<view>
 								<view class="centre">
-									<image src="https://cdn.uviewui.com/uview/template/taobao-order.png" mode=""></image>
+									<image src="https://cdn.uviewui.com/uview/template/taobao-order.png" mode="">
+									</image>
 									<view class="explain">
 										您还没有相关的订单
 										<view class="tips">可以去看看有那些想买的</view>
@@ -73,193 +257,6 @@
 		</view>
 	</view>
 </template>
-
-<script>
-export default {
-	data() {
-		return {
-			orderList: [[], [], [], []],
-			dataList: [
-				{
-					id: 1,
-					store: '夏日流星限定贩卖',
-					deal: '交易成功',
-					goodsList: [
-						{
-							goodsUrl: '//img13.360buyimg.com/n7/jfs/t1/103005/7/17719/314825/5e8c19faEb7eed50d/5b81ae4b2f7f3bb7.jpg',
-							title: '【冬日限定】现货 原创jk制服女2020冬装新款小清新宽松软糯毛衣外套女开衫短款百搭日系甜美风',
-							type: '灰色;M',
-							deliveryTime: '付款后30天内发货',
-							price: '348.58',
-							number: 2
-						},
-						{
-							goodsUrl: '//img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg',
-							title: '【葡萄藤】现货 小清新学院风制服格裙百褶裙女短款百搭日系甜美风原创jk制服女2020新款',
-							type: '45cm;S',
-							deliveryTime: '付款后30天内发货',
-							price: '135.00',
-							number: 1
-						}
-					]
-				},
-				{
-					id: 2,
-					store: '江南皮革厂',
-					deal: '交易失败',
-					goodsList: [
-						{
-							goodsUrl: '//img14.360buyimg.com/n7/jfs/t1/60319/15/6105/406802/5d43f68aE9f00db8c/0affb7ac46c345e2.jpg',
-							title: '【冬日限定】现货 原创jk制服女2020冬装新款小清新宽松软糯毛衣外套女开衫短款百搭日系甜美风',
-							type: '粉色;M',
-							deliveryTime: '付款后7天内发货',
-							price: '128.05',
-							number: 1
-						}
-					]
-				},
-				{
-					id: 3,
-					store: '三星旗舰店',
-					deal: '交易失败',
-					goodsList: [
-						{
-							goodsUrl: '//img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg',
-							title: '三星（SAMSUNG）京品家电 UA65RUF70AJXXZ 65英寸4K超高清 HDR 京东微联 智能语音 教育资源液晶电视机',
-							type: '4K，广色域',
-							deliveryTime: '保质5年',
-							price: '1998',
-							number: 3
-						},
-						{
-							goodsUrl: '//img14.360buyimg.com/n7/jfs/t6007/205/4099529191/294869/ae4e6d4f/595dcf19Ndce3227d.jpg!q90.jpg',
-							title: '美的(Midea)639升 对开门冰箱 19分钟急速净味 一级能效冷藏双开门杀菌智能家用双变频节能 BCD-639WKPZM(E)',
-							type: '容量大，速冻',
-							deliveryTime: '保质5年',
-							price: '2354',
-							number: 1
-						}
-					]
-				},
-				{
-					id: 4,
-					store: '三星旗舰店',
-					deal: '交易失败',
-					goodsList: [
-						{
-							goodsUrl: '//img10.360buyimg.com/n7/jfs/t22300/31/1505958241/171936/9e201a89/5b2b12ffNe6dbb594.jpg!q90.jpg',
-							title: '法国进口红酒 拉菲（LAFITE）传奇波尔多干红葡萄酒750ml*6整箱装',
-							type: '4K，广色域',
-							deliveryTime: '珍藏10年好酒',
-							price: '1543',
-							number: 3
-						},
-						{
-							goodsUrl: '//img10.360buyimg.com/n7/jfs/t1/107598/17/3766/525060/5e143aacE9a94d43c/03573ae60b8bf0ee.jpg',
-							title: '蓝妹（BLUE GIRL）酷爽啤酒 清啤 原装进口啤酒 罐装 500ml*9听 整箱装',
-							type: '一打',
-							deliveryTime: '口感好',
-							price: '120',
-							number: 1
-						}
-					]
-				},
-				{
-					id: 5,
-					store: '三星旗舰店',
-					deal: '交易成功',
-					goodsList: [
-						{
-							goodsUrl: '//img12.360buyimg.com/n7/jfs/t1/52408/35/3554/78293/5d12e9cfEfd118ba1/ba5995e62cbd747f.jpg!q90.jpg',
-							title: '企业微信 中控人脸指纹识别考勤机刷脸机 无线签到异地多店打卡机WX108',
-							type: '识别效率高',
-							deliveryTime: '使用方便',
-							price: '451',
-							number: 9
-						}
-					]
-				}
-			],
-			list: [
-				{name: '待付款'},
-				{name: '待发货'},
-				{name: '待收货'},
-				{name: '待评价',count: 12}
-			],
-			current: 0,
-			swiperCurrent: 0,
-			loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
-		};
-	},
-	onLoad() {
-		this.getOrderList(0);
-		this.getOrderList(1);
-		this.getOrderList(3);
-	},
-	computed: {
-		// 价格小数
-		priceDecimal() {
-			return val => {
-				if (val !== parseInt(val)) return val.slice(-2);
-				else return '00';
-			};
-		},
-		// 价格整数
-		priceInt() {
-			return val => {
-				if (val !== parseInt(val)) return val.split('.')[0];
-				else return val;
-			};
-		}
-	},
-	methods: {
-		// 触底懒加载
-		reachBottom() {
-			this.loadStatus.splice(this.current, 1, "loading")
-			setTimeout(() => {
-				this.getOrderList(this.current);
-			}, 1200);
-		},
-		// 页面数据
-		getOrderList(idx) {
-			// 模拟第n个页面获取数据
-			for (let i = 0; i < 5; i++) {
-				let index = this.$u.random(0, this.dataList.length - 1);
-				let data = JSON.parse(JSON.stringify(this.dataList[index]));
-				data.id = this.$u.guid();
-				this.orderList[idx].push(data);
-			}
-			this.loadStatus.splice(this.current, 1, "loadmore")
-		},
-		// 总价
-		totalPrice(item) {
-			let price = 0;
-			item.map(val => {
-				price += parseFloat(val.price);
-			});
-			return price.toFixed(2);
-		},
-		// 总件数
-		totalNum(item) {
-			let num = 0;
-			item.map(val => {
-				num += val.number;
-			});
-			return num;
-		},
-		// tab栏切换
-		change({ index }) {
-			this.swiperCurrent = index;
-			this.getOrderList(index);
-		},
-		animationfinish({ detail: { current } }) {
-			this.swiperCurrent = current;
-			this.current = current;
-		}
-	}
-};
-</script>
-
 <style>
 /* #ifndef H5 */
 page {
diff --git a/src/pages_template/pages/wxCenter/index.vue b/src/pages_template/pages/wxCenter/index.vue
index a9255a5..43284c2 100644
--- a/src/pages_template/pages/wxCenter/index.vue
+++ b/src/pages_template/pages/wxCenter/index.vue
@@ -1,6 +1,16 @@
+<script setup>
+import tab from '@/plugins/tab';
+import { ref } from 'vue';
+
+const pic = ref('https://uviewui.com/common/logo.png');
+const show = ref(true);
+
+const navigateBackHandler = () => { tab.navigateBack(); }
+</script>
+
 <template>
 	<view>
-		<u-navbar :fixed="false"  title="　"  @leftClick="navigateBack">
+		<u-navbar :fixed="false" title="　" @leftClick="navigateBackHandler">
 			<view class="u-flex u-row-right" style="width: 100%;">
 				<view class="camera u-flex u-row-center">
 					<u-icon name="camera-fill" color="#000000" size="48"></u-icon>
@@ -46,27 +56,8 @@
 	</view>
 </template>
 
-<script>
 
-export default {
-	data() {
-		return {
-			pic: 'https://uviewui.com/common/logo.png',
-			show: true
-		}
-	},
-	onLoad() {
-
-	},
-	methods: {
-		navigateBack() {
-			uni.navigateBack({delta: 1 });
-		}
-	}
-}
-</script>
-
-<style lang="scss">
+<style lang="scss" scoped>
 page {
 	background-color: #ededed;
 }