refactor(components): 优化多个组件的样式和布局

- 调整了多个组件的背景色、高度等样式
- 优化了部分组件的布局结构
- 统一了部分样式，如字体颜色、大小等
- 部分文件改成了vue3组合式写法

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);
+    background-color: #ffffff;
-    height: 240rpx;
     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);
         }

src/components/geek-xd/components/geek-menu/geek-menu.vue

@@ -37,10 +37,12 @@ const titleStype = computed(() => {
 })
 </script>
 <template>
+    <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>
 </template>
 <style lang="scss" scoped>
 .menu {

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;

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"
+	<u-popup :show="modelValue" mode="bottom" :popup="false" :mask="true" :closeable="true"
-		close-icon-color="#ffffff" :z-index="uZIndex" :maskCloseAble="maskCloseAble" @close="close">
+		: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"
+								<u-cell v-for="(item, index) in provinces" :title="item.label" :arrow="false"
-									:key="index" @click="provinceChange(index)">
+									: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>

src/pages_geek/pages/index/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <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">
@@ -10,23 +11,30 @@
     </u-row>
 
     <uni-section class="mb-10" title="菜单" sub-title="menu" type="line"></uni-section>
-  <u-row>
+    <view style="width: 100%; display: flex;justify-content:space-evenly;align-items: center;">
-    <u-col :span="2.1" :offset="0.3" v-for="menu, index in menus" :key="index">
+      <geek-menu v-for="menu, index in menus" :key="index" v-bind=menu :size="60" @click="modal.msg(menu.label)"
-      <geek-menu v-bind=menu :size="60" @click="modal.msg(menu.label)" type="circle" />
+        type="circle" />
-    </u-col>
+    </view>
-  </u-row>
+    <view style="width: 100%; display: flex;justify-content:space-evenly;align-items: center;">
-  <u-row>
+      <geek-menu v-for="menu, index in menus" :key="index" :icon="menu.icon" :label="menu.label" :size="60"
-    <u-col :span="2.1" :offset="0.3" v-for="menu, index in menus" :key="index">
+        @click="modal.msg(menu.label)" type="rect" />
-      <geek-menu :icon="menu.icon" :label="menu.label" :size="60" @click="modal.msg(menu.label)" type="rect" />
+    </view>
-    </u-col>
-  </u-row>
 
     <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)" />
-  <geek-commodity v-for="item, index in commodityList" :key="index" v-bind="item" type="rect"
+    </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('更多')"
@@ -38,7 +46,10 @@
 
 
     <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,
   },
   {

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,49 +50,40 @@
 					<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;
 			}
@@ -90,6 +91,7 @@ export default {
 
 		.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 {}
 		}
 	}
 }

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;
 		}
 	}

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;

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,35 +34,29 @@
 	</view>
 </template>
 
-<script>
+<script setup>
-export default {
+import { ref, onMounted } from 'vue';
-	data() {
+import tab from '@/plugins/tab';
-		return {
+
-			commentList: []
+const commentList = ref([]);
-		};
+
-	},
+onMounted(() => {
-	onLoad() {
+	getComment();
-		this.getComment();
+});
-	},
+
-	methods: {
+const toAllReply = () => tab.navigateTo('/pages_template/pages/comment/reply')
-		// 跳转到全部回复
+
-		toAllReply() {
+const getLike = (index) => {
-			uni.navigateTo({
+	commentList.value[index].isLike = !commentList.value[index].isLike;
-				url: '/pages_template/pages/comment/reply'
+	if (commentList.value[index].isLike) {
-			});
+		commentList.value[index].likeNum++;
-		},
-		// 点赞
-		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--;
+		commentList.value[index].likeNum--;
 	}
-		},
+};
-		// 评论列表
+
-		getComment() {
+const getComment = () => {
-			this.commentList = [
+	commentList.value = [
 		{
 			id: 1,
 			name: '叶轻眉',
@@ -122,8 +119,6 @@ export default {
 			isLike: false
 		}
 	];
-		}
-	}
 };
 </script>
 
@@ -131,6 +126,7 @@ export default {
 .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;

src/pages_template/pages/comment/reply.vue

@@ -1,86 +1,36 @@
-<template>
+<script setup>
-	<view class="wrap">
+import { ref, onMounted } from 'vue';
-		<view class="comment">
-			<view class="top">
-				<view class="left">
-					<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>
-					</view>
-				</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>
-				</view>
-			</view>
-			<view class="content">{{ comment.contentText }}</view>
-		</view>
-		<view class="all-reply">
-			<view class="all-reply-top">全部回复（{{ comment.allReply }}）</view>
-			<view class="item" v-for="(item, index) in commentList" :key="index">
-				<view class="comment">
-					<view class="top">
-						<view class="left">
-							<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="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>
-						</view>
-					</view>
-					<view class="reply" v-if="item.reply">
-						<view class="username">{{ item.reply.name }}</view>
-						<view class="text">{{ item.reply.contentStr }}</view>
-					</view>
-					<view class="content">{{ item.contentText }}</view>
-				</view>
-			</view>
-		</view>
-	</view>
-</template>
 
-<script>
+const commentList = ref([]);
-export default {
+const comment = ref({});
-	data() {
+
-		return {
+onMounted(() => {
-			commentList: [],
+	getReply();
-			comment: ''
+});
-		};
+
-	},
+// 点赞
-	onLoad() {
+const getLike = (index) => {
-		this.getReply();
-	},
-	methods: {
-		// 点赞
-		getLike(index) {
 	if (index === 0 || index > 0) {
-				this.commentList[index].isLike = !this.commentList[index].isLike;
+		commentList.value[index].isLike = !commentList.value[index].isLike;
-				if (this.commentList[index].isLike == true) {
+		if (commentList.value[index].isLike) {
-					this.commentList[index].likeNum++;
+			commentList.value[index].likeNum++;
 		} else {
-					this.commentList[index].likeNum--;
+			commentList.value[index].likeNum--;
 		}
 	} else {
-				if (this.comment.isLike == true) {
+		if (comment.value.isLike) {
-					this.comment.isLike = !this.comment.isLike;
+			comment.value.isLike = !comment.value.isLike;
-					this.comment.likeNum--;
+			comment.value.likeNum--;
 		} else {
-					this.comment.isLike = !this.comment.isLike;
+			comment.value.isLike = !comment.value.isLike;
-					this.comment.likeNum++;
+			comment.value.likeNum++;
 		}
 	}
-		},
+};
 
-		// 回复列表
+// 回复列表
-		getReply() {
+const getReply = () => {
-			this.comment = {
+	comment.value = {
 		id: 1,
 		name: '叶轻眉',
 		date: '12-25 18:58',
@@ -90,7 +40,7 @@ export default {
 		likeNum: 33,
 		isLikes: false
 	};
-			this.commentList = [
+	commentList.value = [
 		{
 			name: '新八几',
 			date: '12-25 18:58',
@@ -140,25 +90,83 @@ export default {
 			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="user-info">
+						<view class="name">{{ comment.name }}</view>
+						<view class="date">06-25 13:58</view>
+					</view>
+				</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>
+				</view>
+			</view>
+			<view class="content">{{ comment.contentText }}</view>
+		</view>
+		<view class="all-reply">
+			<view class="all-reply-top">全部回复（{{ comment.allReply }}）</view>
+			<view class="item" v-for="(item, index) in commentList" :key="index">
+				<view class="comment">
+					<view class="top">
+						<view class="left">
+							<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="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>
+						</view>
+					</view>
+					<view class="reply" v-if="item.reply">
+						<view class="username">{{ item.reply.name }}</view>
+						<view class="text">{{ item.reply.contentStr }}</view>
+					</view>
+					<view class="content">{{ item.contentText }}</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
 <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;

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
+					<image class="picture"
-						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"
+						mode="widthFix"></image>
-					></image>
 					<view class="introduce">
 						<view class="top">
 							￥
@@ -88,17 +90,12 @@
 	</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;
+				background-color: $u-warning !important;
-				color: #ffffff!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;
+				color: #ffffff !important;
-				background-color: $u-warning!important;
+				background-color: $u-warning !important;
 				line-height: 40rpx;
 				color: rgb(117, 142, 165);
 				margin-left: 20rpx;

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;

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;
 	}

src/pages_template/pages/login/index1.vue

@@ -31,31 +31,24 @@
 	</view>
 </template>
 
-<script>
+<script setup>
-export default {
+import tab from '@/plugins/tab';
-	data() {
+import { ref, computed } from 'vue';
-		return {
+
-			tel: ''
+const tel = ref('');
-		}
+
-	},
+const inputStyle = computed(() => {
-	computed: {
-		inputStyle() {
 	let style = {};
-			if(this.tel) {
+	if (tel.value) {
 		style.color = "#fff";
-				style.backgroundColor = this.$u.color['warning'];
+		style.backgroundColor = '#f9c00c'; // 假设 $u.color['warning'] 对应的颜色值
 	}
 	return style;
-		}
+});
-	},
+
-	methods: {
+const submit = () => {
-		submit() {
+	if (/\d{11}/.test(tel.value)) { // 假设 $u.test.mobile 是简单的手机号验证
-			if(this.$u.test.mobile(this.tel)) {
+		tab.navigateTo('/pages_template/pages/login/code');
-				this.$u.route({
-					url: 'pages/template/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,17 +67,20 @@ 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;
@@ -95,6 +92,7 @@ export default {
 				border: none;
 			}
 		}
+
 		.alternative {
 			color: $u-tips-color;
 			display: flex;
@@ -102,11 +100,12 @@ 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;

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"
+					<view class="masking slide-top" :class="[collapsedClass, { animating: isAnimating }]"
-						:style="'animation-play-state:' + play[0]">
+						ref="fixedViewRef" :style="'animation-play-state:' + play[0]">
 						<uni-row>
 							<text class="text-first">欢迎使用</text>
 							<text class="text-second">校园访客</text>
@@ -70,110 +72,103 @@
 	</view>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue'
 import useUserStore from '@/store/modules/user'
-export default {
+import tab from '@/plugins/tab'
-	data() {
+import modal from '@/plugins/modal'
-		return {
-			src: "staticimagessoutheast.jpg",
-			isActive: false,
-			isFixedViewVisible: true,
-			animationType: "up", // 可选值：right 或 up
-			isAnimating: false, // 控制动画执行状态
-			play: ["paused", "paused", "paused"],
-			page: "index",
 
-			codeUrl: "",
+const src = ref("staticimagessoutheast.jpg")
-			captchaEnabled: true,
+const isActive = ref(false)
-			loginForm: {
+const isFixedViewVisible = ref(true)
+const animationType = ref("up") // 可选值：right 或 up
+const isAnimating = ref(false) // 控制动画执行状态
+const play = ref(["paused", "paused", "paused"])
+const page = ref("index")
+
+const codeUrl = ref("")
+const captchaEnabled = ref(true)
+const loginForm = reactive({
 	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 collapsedClass = computed(() => {
-		back() {
+	return isFixedViewVisible.value ? "" : `collapsed-${animationType.value}`;
-			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 });
 
+onMounted(() => {
+	getCode()
+})
+
+const login = () => {
+	play.value[2] = "running"
+	setTimeout(() => { page.value = 'login' }, 1000)
+}
+
+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 = () => {
-		// 获取图形验证码
-		getCode() {
 	let res = {}
-			this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
+	captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
-			if (this.captchaEnabled) {
+	if (captchaEnabled.value) {
-				this.codeUrl = 'data:image/gif;base64,' + res.img
+		codeUrl.value = 'data:image/gif;base64,' + res.img
-				this.loginForm.uuid = res.uuid
+		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')
-			})
-		}
 	}
 }
-</script>
 
+// 登录方法
+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;
@@ -665,4 +660,3 @@ page {
 	}
 }
 </style>
-  

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);

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);

src/pages_template/pages/order/index.vue

@@ -1,85 +1,8 @@
-<template>
+<script setup>
-	<view>
+import { ref, reactive, onMounted } from 'vue';
-		<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>
-			</view>
-			<swiper class="swiper-box" :current="swiperCurrent" @animationfinish="animationfinish">
-				<swiper-item class="swiper-item" v-for="(orderlist, index) in orderList" :key="index">
-					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom"
-						v-if="orderlist.length !== 0">
-						<view class="page-box">
-							<view class="order" v-for="(res, index) in orderlist" :key="res.id">
-								<view class="top">
-									<view class="left">
-										<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
-										<view class="store">{{ res.store }}</view>
-										<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
-									</view>
-									<view class="right">{{ res.deal }}</view>
-								</view>
-								<view class="item" v-for="(item, index) in res.goodsList" :key="index">
-									<view class="left">
-										<image :src="item.goodsUrl" mode="aspectFill"></image>
-									</view>
-									<view class="content">
-										<view class="title u-line-2">{{ item.title }}</view>
-										<view class="type">{{ item.type }}</view>
-										<view class="delivery-time">发货时间 {{ item.deliveryTime }}</view>
-									</view>
-									<view class="right">
-										<view class="price">
-											￥{{ priceInt(item.price) }}
-											<text class="decimal">.{{ priceDecimal(item.price) }}</text>
-										</view>
-										<view class="number">x{{ item.number }}</view>
-									</view>
-								</view>
-								<view class="total">
-									共{{ totalNum(res.goodsList) }}件商品 合计:
-									<text class="total-price">
-										￥{{ priceInt(totalPrice(res.goodsList)) }}.
-										<text class="decimal">{{ priceDecimal(totalPrice(res.goodsList)) }}</text>
-									</text>
-								</view>
-								<view class="bottom">
-									<view class="more"><u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon>
-									</view>
-									<view class="logistics btn">查看物流</view>
-									<view class="exchange btn">卖了换钱</view>
-									<view class="evaluate btn">评价</view>
-								</view>
-							</view>
-							<u-loadmore :status="loadStatus[0]" bgColor="#f2f2f2"></u-loadmore>
-						</view>
-					</scroll-view>
-					<scroll-view scroll-y style="height: 100%;width: 100%;" v-else>
-						<view class="page-box">
-							<view>
-								<view class="centre">
-									<image src="https://cdn.uviewui.com/uview/template/taobao-order.png" mode=""></image>
-									<view class="explain">
-										您还没有相关的订单
-										<view class="tips">可以去看看有那些想买的</view>
-									</view>
-									<view class="btn">随便逛逛</view>
-								</view>
-							</view>
-						</view>
-					</scroll-view>
-				</swiper-item>
-			</swiper>
-		</view>
-	</view>
-</template>
 
-<script>
+const orderList = ref([[], [], [], []]);
-export default {
+const dataList = reactive([
-	data() {
-		return {
-			orderList: [[], [], [], []],
-			dataList: [
 	{
 		id: 1,
 		store: '夏日流星限定贩卖',
@@ -179,87 +102,161 @@ export default {
 			}
 		]
 	}
-			],
+]);
-			list: [
+const list = reactive([
-				{name: '待付款'},
+	{ name: '待付款' },
-				{name: '待发货'},
+	{ name: '待发货' },
-				{name: '待收货'},
+	{ name: '待收货' },
-				{name: '待评价',count: 12}
+	{ name: '待评价', count: 12 }
-			],
+]);
-			current: 0,
+const current = ref(0);
-			swiperCurrent: 0,
+const swiperCurrent = ref(0);
-			loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
+const loadStatus = ref(['loadmore', 'loadmore', 'loadmore', 'loadmore']);
-		};
+
-	},
+onMounted(() => {
-	onLoad() {
+	getOrderList(0);
-		this.getOrderList(0);
+	getOrderList(1);
-		this.getOrderList(1);
+	getOrderList(3);
-		this.getOrderList(3);
+});
-	},
+
-	computed: {
+// 价格小数
-		// 价格小数
+const priceDecimal = (val) => {
-		priceDecimal() {
-			return val => {
 	if (val !== parseInt(val)) return val.slice(-2);
 	else return '00';
-			};
+};
-		},
+
-		// 价格整数
+// 价格整数
-		priceInt() {
+const priceInt = (val) => {
-			return val => {
 	if (val !== parseInt(val)) return val.split('.')[0];
 	else return val;
-			};
+};
-		}
+
-	},
+// 触底懒加载
-	methods: {
+const reachBottom = () => {
-		// 触底懒加载
+	loadStatus.value.splice(current.value, 1, "loading");
-		reachBottom() {
-			this.loadStatus.splice(this.current, 1, "loading")
 	setTimeout(() => {
-				this.getOrderList(this.current);
+		getOrderList(current.value);
 	}, 1200);
-		},
+};
-		// 页面数据
+
-		getOrderList(idx) {
+// 页面数据
+const getOrderList = (idx) => {
 	// 模拟第n个页面获取数据
 	for (let i = 0; i < 5; i++) {
-				let index = this.$u.random(0, this.dataList.length - 1);
+		let index = Math.floor(Math.random() * dataList.length);
-				let data = JSON.parse(JSON.stringify(this.dataList[index]));
+		let data = JSON.parse(JSON.stringify(dataList[index]));
-				data.id = this.$u.guid();
+		data.id = Math.random().toString(36).substr(2, 9);
-				this.orderList[idx].push(data);
+		orderList.value[idx].push(data);
 	}
-			this.loadStatus.splice(this.current, 1, "loadmore")
+	loadStatus.value.splice(current.value, 1, "loadmore");
-		},
+};
-		// 总价
+
-		totalPrice(item) {
+// 总价
+const totalPrice = (item) => {
 	let price = 0;
-			item.map(val => {
+	item.forEach(val => {
 		price += parseFloat(val.price);
 	});
 	return price.toFixed(2);
-		},
+};
-		// 总件数
+
-		totalNum(item) {
+// 总件数
+const totalNum = (item) => {
 	let num = 0;
-			item.map(val => {
+	item.forEach(val => {
 		num += val.number;
 	});
 	return num;
-		},
+};
-		// tab栏切换
+
-		change({ index }) {
+// tab栏切换
-			this.swiperCurrent = index;
+const change = ({ index }) => {
-			this.getOrderList(index);
+	swiperCurrent.value = index;
-		},
+	getOrderList(index);
-		animationfinish({ detail: { current } }) {
+};
-			this.swiperCurrent = current;
+
-			this.current = current;
+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>
+			</view>
+			<swiper class="swiper-box" :current="swiperCurrent" @animationfinish="animationfinish">
+				<swiper-item class="swiper-item" v-for="(orderlist, index) in orderList" :key="index">
+					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom"
+						v-if="orderlist.length !== 0">
+						<view class="page-box">
+							<view class="order" v-for="(res, index) in orderlist" :key="res.id">
+								<view class="top">
+									<view class="left">
+										<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
+										<view class="store">{{ res.store }}</view>
+										<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
+									</view>
+									<view class="right">{{ res.deal }}</view>
+								</view>
+								<view class="item" v-for="(item, index) in res.goodsList" :key="index">
+									<view class="left">
+										<image :src="item.goodsUrl" mode="aspectFill"></image>
+									</view>
+									<view class="content">
+										<view class="title u-line-2">{{ item.title }}</view>
+										<view class="type">{{ item.type }}</view>
+										<view class="delivery-time">发货时间 {{ item.deliveryTime }}</view>
+									</view>
+									<view class="right">
+										<view class="price">
+											￥{{ priceInt(item.price) }}
+											<text class="decimal">.{{ priceDecimal(item.price) }}</text>
+										</view>
+										<view class="number">x{{ item.number }}</view>
+									</view>
+								</view>
+								<view class="total">
+									共{{ totalNum(res.goodsList) }}件商品 合计:
+									<text class="total-price">
+										￥{{ priceInt(totalPrice(res.goodsList)) }}.
+										<text class="decimal">{{ priceDecimal(totalPrice(res.goodsList)) }}</text>
+									</text>
+								</view>
+								<view class="bottom">
+									<view class="more"><u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon>
+									</view>
+									<view class="logistics btn">查看物流</view>
+									<view class="exchange btn">卖了换钱</view>
+									<view class="evaluate btn">评价</view>
+								</view>
+							</view>
+							<u-loadmore :status="loadStatus[0]" bgColor="#f2f2f2"></u-loadmore>
+						</view>
+					</scroll-view>
+					<scroll-view scroll-y style="height: 100%;width: 100%;" v-else>
+						<view class="page-box">
+							<view>
+								<view class="centre">
+									<image src="https://cdn.uviewui.com/uview/template/taobao-order.png" mode="">
+									</image>
+									<view class="explain">
+										您还没有相关的订单
+										<view class="tips">可以去看看有那些想买的</view>
+									</view>
+									<view class="btn">随便逛逛</view>
+								</view>
+							</view>
+						</view>
+					</scroll-view>
+				</swiper-item>
+			</swiper>
+		</view>
+	</view>
+</template>
 <style>
 /* #ifndef H5 */
 page {

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 {
+<style lang="scss" scoped>
-	data() {
-		return {
-			pic: 'https://uviewui.com/common/logo.png',
-			show: true
-		}
-	},
-	onLoad() {
-
-	},
-	methods: {
-		navigateBack() {
-			uni.navigateBack({delta: 1 });
-		}
-	}
-}
-</script>
-
-<style lang="scss">
 page {
 	background-color: #ededed;
 }