From f4c6b693e00a28a994dc11c3fa0cfefe15d2999e Mon Sep 17 00:00:00 2001
From: zpc <zpc1131@gamil.com>
Date: Mon, 23 Jun 2025 01:52:56 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=9F=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common/server/product.js                      |  31 +
 .../youdas-container/news-list-item.vue       |   3 +-
 pages/mall/mall.vue                           | 680 ++++++++----------
 pages/mall/order-list.vue                     |   6 +-
 pages/news/news.vue                           |  20 +-
 5 files changed, 364 insertions(+), 376 deletions(-)
 create mode 100644 common/server/product.js

diff --git a/common/server/product.js b/common/server/product.js
new file mode 100644
index 0000000..5404345
--- /dev/null
+++ b/common/server/product.js
@@ -0,0 +1,31 @@
+
+import HttpRequest from "../system/request";
+
+/**
+ * 获取banner列表
+ * @returns {Promise} banner列表
+ */
+export const getBannerList = async () => {
+    const res = await HttpRequest.get('/get_banner_list');
+    if (res.status == 1) {
+        return res.data;
+    }
+    return [];
+}
+/**
+ * 获取商品列表
+ * @param {number} pageNo 页码
+ * @param {number} pageSize 每页条数
+ * @param {string} searchKeyword 搜索关键词
+ * @returns {Promise} 商品列表
+ */
+export const getProductList = async (pageNo, pageSize, searchKeyword) => {
+    const res = await HttpRequest.get('/get_product_list', {
+        page: pageNo,
+        limit: pageSize,
+        title: searchKeyword
+    });
+    if (res.status == 1) {
+        return res.data;
+    }
+}
\ No newline at end of file
diff --git a/components/youdas-container/news-list-item.vue b/components/youdas-container/news-list-item.vue
index 8e19e9d..9b638c5 100644
--- a/components/youdas-container/news-list-item.vue
+++ b/components/youdas-container/news-list-item.vue
@@ -1,7 +1,8 @@
 <template>
     <view class="content">
         <z-paging v-if="firstLoaded || isCurrentPage" ref="paging" show-refresher-update-time
-            loading-more-no-more-text="我也是有底线的！" v-model="dataList" @query="queryList" :fixed="false">
+            loading-more-no-more-text="我也是有底线的！" :show-loading-more-when-reload="true" v-model="dataList" @query="queryList" :fixed="false">
+            <slot name="search"></slot>
             <template v-for="(item, index) in dataList">
                 <view v-if="item.cover_image !== ''" class="view-data" :key="index" @click="toDetails(item.id)">
                     <view class="title">
diff --git a/pages/mall/mall.vue b/pages/mall/mall.vue
index 96e3ecc..ed8c0b0 100644
--- a/pages/mall/mall.vue
+++ b/pages/mall/mall.vue
@@ -1,415 +1,369 @@
 <template>
-	<view class="content">
-		<view class="" style="width: 100%; height: 225.19rpx; background-color: white; position: relative;">
-			<view class="title">
-				商城
-			</view>
-		</view>
-
-		<!-- 顶部三个商品 -->
-		<view class="top">
-
-			<view v-for="(item, i) in topDataList" :key="i" class="item" @click="goToDetail(item)">
-
-				<view class="img">
-					<image v-if="item.imgUrl" :src="item.imgUrl" mode="aspectFill" class="product-image"></image>
+	<z-paging-swiper>
+		<template #top>
+			<view class="" style="width: 100%; height: 225.19rpx; background-color: white; position: relative;">
+				<view class="title">
+					商城
 				</view>
+			</view>
 
-				<view class="item-info">
-					<view class="item-name">
-						{{item.name}}
-					</view>
-
-					<view class="item-bottom">
-						<view class="item-price">
-							<text class="price-symbol-small">￥</text>
-							<text class="price-value-small">{{item.price}}</text>
+		</template>
+		<z-paging ref="paging" show-refresher-update-time loading-more-no-more-text="我也是有底线的！" v-model="dataList"
+			@query="queryList" :fixed="false" :show-loading-more-when-reload="true">
+			<!-- 顶部三个商品 -->
+			<swiper :display-multiple-items="3" class="top" :duration="500">
+				<swiper-item v-for="(item, i) in topDataList" :key="i" @click="goToDetail(item)">
+					<view class="item">
+						<view class="img">
+							<image v-if="item.image" :src="item.image" mode="aspectFill" class="product-image">
+							</image>
 						</view>
 
-						<view class="item-count">
-							<text class="count-text-small">{{item.num}}/1</text>
-							<image src="/static/ic_box.png" class="box-icon-small" mode="aspectFit"></image>
+						<view class="item-info">
+							<view class="item-name">
+								{{ item.title }}
+							</view>
+							<view class="item-bottom">
+								<view class="item-price">
+									<text class="price-symbol-small">￥</text>
+									<text class="price-value-small">{{ item.price }}</text>
+								</view>
+
+								<view class="item-count">
+									<text class="count-text-small">{{ item.sales }}/{{ item.stock }}</text>
+									<image src="/static/ic_box.png" class="box-icon-small" mode="aspectFit"></image>
+								</view>
+							</view>
 						</view>
 					</view>
+				</swiper-item>
+			</swiper>
+			<view class="view-list">
+				<view class="product-item" v-for="(item, i) in dataList" :key="i" @click="goToDetail(item)">
+
+					<view class="product-image-container">
+						<image v-if="item.image" :src="item.image" mode="aspectFill" class="product-image">
+						</image>
+					</view>
+
+					<view class="product-name">
+						{{ item.title }}
+					</view>
+
+					<view class="product-count">
+						<text class="count-text">{{ item.sales }}/{{ item.stock }}</text>
+						<image src="/static/ic_box.png" class="box-icon" mode="aspectFit"></image>
+					</view>
+
+					<view class="product-price">
+						<text class="price-symbol">￥</text>
+						<text class="price-value">{{ item.price }}</text>
+					</view>
+
+					<view class="buy-button" @click.stop="buyProduct(item)">
+						<text class="buy-text">购买</text>
+					</view>
+
+
 				</view>
-			</view>
-		</view>
-
-		<scroll-view class="view-list" scroll-y="true">
-			<view class="product-item" v-for="(item, i) in dataList" :key="i" @click="goToDetail(item)">
-
-				<view class="product-image-container">
-					<image v-if="item.imgUrl" :src="item.imgUrl" mode="aspectFill" class="product-image"></image>
-				</view>
-
-				<view class="product-name">
-					{{item.name}}
-				</view>
-
-				<view class="product-count">
-					<text class="count-text">{{item.num}}/1</text>
-					<image src="/static/ic_box.png" class="box-icon" mode="aspectFit"></image>
-				</view>
-
-				<view class="product-price">
-					<text class="price-symbol">￥</text>
-					<text class="price-value">{{item.price}}</text>
-				</view>
-
-				<view class="buy-button" @click.stop="buyProduct(item)">
-					<text class="buy-text">购买</text>
-				</view>
-
 
 			</view>
 
-		</scroll-view>
-
-	</view>
+			<template #empty>
+				<no-data />
+			</template>
+			<template #loading>
+				<loading-data />
+			</template>
+		</z-paging>
+	</z-paging-swiper>
 </template>
 
-<script>
-	export default {
-		data() {
-			return {
-				topDataList: [{
-					id: '1',
-					imgUrl: "/static/product1.png",
-					name: "英雄联盟K/DA系列阿卡丽手办",
-					num: "1",
-					price: "69",
-					stock: 10
-				}, {
-					id: '2',
-					imgUrl: "/static/product2.png",
-					name: "英雄联盟K/DA系列阿狸手办",
-					num: "1",
-					price: "79",
-					stock: 5
-				}, {
-					id: '3',
-					imgUrl: "/static/product3.png",
-					name: "英雄联盟K/DA系列伊芙琳手办",
-					num: "1",
-					price: "89",
-					stock: 8
-				}, ],
-				dataList: [{
-					id: '4',
-					imgUrl: "/static/product4.png",
-					name: "英雄联盟K/DA系列阿卡丽手办豪华版",
-					num: "1",
-					price: "169",
-					stock: 3
-				}, {
-					id: '5',
-					imgUrl: "/static/product5.png",
-					name: "英雄联盟K/DA系列阿狸手办豪华版",
-					num: "1",
-					price: "179",
-					stock: 2
-				}, {
-					id: '6',
-					imgUrl: "/static/product6.png",
-					name: "英雄联盟K/DA系列伊芙琳手办豪华版",
-					num: "1",
-					price: "189",
-					stock: 6
-				}, {
-					id: '7',
-					imgUrl: "/static/product7.png",
-					name: "英雄联盟K/DA系列卡莎手办",
-					num: "1",
-					price: "99",
-					stock: 15
-				}, {
-					id: '8',
-					imgUrl: "/static/product8.png",
-					name: "英雄联盟K/DA系列莎拉手办",
-					num: "1",
-					price: "99",
-					stock: 12
-				}, {
-					id: '9',
-					imgUrl: "/static/product9.png",
-					name: "英雄联盟K/DA系列套装收藏版",
-					num: "1",
-					price: "599",
-					stock: 1
-				}, ]
-			}
-		},
-		methods: {
-			// 跳转到商品详情页
-			goToDetail(item) {
-				uni.navigateTo({
-					url: `/pages/mall/product-detail?id=${item.id}`
-				});
-			},
-			
-			// 购买商品
-			buyProduct(item) {
-				// 阻止事件冒泡
-				event.stopPropagation();
-				
-				// 检查库存
-				if (item.stock <= 0) {
-					uni.showToast({
-						title: '商品已售罄',
-						icon: 'none'
-					});
-					return;
-				}
-				
-				// 添加到购物车或直接购买的逻辑
-				uni.showToast({
-					title: '已添加到购物车',
-					icon: 'success'
-				});
-			}
-		}
+<script setup>
+import { ref } from 'vue';
+const paging = ref(null);
+import { getProductList, getBannerList } from '@/common/server/product';
+
+// 响应式数据
+const topDataList = ref([
+]);
+
+const dataList = ref([]);
+
+// 跳转到商品详情页
+const goToDetail = (item) => {
+	uni.navigateTo({
+		url: `/pages/mall/product-detail?id=${item.id}`
+	});
+};
+
+// 购买商品
+const buyProduct = (item, event) => {
+	// 阻止事件冒泡
+	event.stopPropagation();
+
+	// 检查库存
+	if (item.stock <= 0) {
+		uni.showToast({
+			title: '商品已售罄',
+			icon: 'none'
+		});
+		return;
 	}
+
+	// 添加到购物车或直接购买的逻辑
+	uni.showToast({
+		title: '已添加到购物车',
+		icon: 'success'
+	});
+};
+const queryList = (pageNo, pageSize) => {
+	getProductList(pageNo, pageSize, "").then(res => {
+		dataList.value.concat(res || []);
+		paging.value.complete(res || false);
+	});
+};
+onLoad(async () => {
+	const bannerList = await getBannerList();
+	topDataList.value = bannerList;
+});
 </script>
 
 <style lang="scss">
-	.content {
-		width: 100%;
+.content {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	background-color: #F7F7F7;
+}
+
+.title {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 32.44rpx;
+	font-weight: 600;
+	position: absolute;
+	bottom: 30rpx;
+}
+
+.top {
+	width: 688.94rpx;
+	height: 325.38rpx;
+	margin: 34rpx auto;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+
+	.item {
+		width: 216.31rpx;
 		height: 100%;
+		background-color: #FFFFFF;
+		border-radius: 15.27rpx;
 		display: flex;
 		flex-direction: column;
-		background-color: #F7F7F7;
-	}
-
-	.title {
-		width: 100%;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		font-size: 32.44rpx;
-		font-weight: 600;
-		position: absolute;
-		bottom: 30rpx;
-	}
-
-	.top {
-		width: 688.94rpx;
-		height: 325.38rpx;
-		margin: 34rpx auto;
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-
-		.item {
-			width: 216.31rpx;
-			height: 100%;
-			background-color: #FFFFFF;
-			border-radius: 15.27rpx;
-			display: flex;
-			flex-direction: column;
-			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
-			transition: transform 0.3s;
-			
-			&:active {
-				transform: scale(0.98);
-			}
-		}
-
-		.img {
-			width: 100%;
-			height: 216.31rpx;
-			background-color: #F2F2F2;
-			border-radius: 15.27rpx 15.27rpx 0rpx 0rpx;
-			overflow: hidden;
-			
-			.product-image {
-				width: 100%;
-				height: 100%;
-			}
-		}
-		
-		.item-info {
-			width: 100%;
-			height: 109.07rpx;
-			position: relative;
-			padding: 8rpx;
-			box-sizing: border-box;
-		}
-		
-		.item-name {
-			width: 100%;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-			font-size: 19.08rpx;
-			color: #333333;
-			text-align: center;
-			margin-top: 6rpx;
-		}
-		
-		.item-bottom {
-			position: absolute;
-			width: 100%;
-			bottom: 12rpx;
-			left: 0;
-			padding: 0 13rpx;
-			box-sizing: border-box;
-			display: flex;
-			justify-content: space-between;
-		}
-		
-		.item-price {
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-		}
-		
-		.price-symbol-small {
-			font-size: 15.27rpx;
-			margin-top: 6rpx;
-			color: #FF6A6A;
-		}
-		
-		.price-value-small {
-			font-size: 22.9rpx;
-			font-weight: bold;
-			color: #FF6A6A;
-		}
-		
-		.item-count {
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-		}
-		
-		.count-text-small {
-			font-size: 15.27rpx;
-			color: #6C6C6C;
-		}
-		
-		.box-icon-small {
-			width: 17.39rpx;
-			height: 17.39rpx;
-			margin-left: 7rpx;
-		}
-	}
-
-	.view-list {
-		width: 688.93rpx;
-		height: 850rpx;
-		margin: 0 auto;
-	}
-	
-	.product-item {
-		width: 100%;
-		height: 261.45rpx;
-		background-color: #FFFFFF;
-		margin-bottom: 21rpx;
-		border-radius: 15.27rpx;
-		position: relative;
 		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
 		transition: transform 0.3s;
-		
+
 		&:active {
 			transform: scale(0.98);
 		}
 	}
-	
-	.product-image-container {
-		width: 216.31rpx;
+
+	.img {
+		width: 100%;
 		height: 216.31rpx;
 		background-color: #F2F2F2;
-		border-radius: 15.27rpx;
-		position: absolute;
-		left: 22rpx;
-		top: 22rpx;
+		border-radius: 15.27rpx 15.27rpx 0rpx 0rpx;
 		overflow: hidden;
-		
+
 		.product-image {
 			width: 100%;
 			height: 100%;
 		}
 	}
-	
-	.product-name {
-		width: 350rpx;
+
+	.item-info {
+		width: 100%;
+		height: 109.07rpx;
+		position: relative;
+		padding: 8rpx;
+		box-sizing: border-box;
+	}
+
+	.item-name {
+		width: 100%;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
-		position: absolute;
-		left: 269rpx;
-		top: 44rpx;
-		font-size: 26.72rpx;
-		font-weight: 600;
+		font-size: 19.08rpx;
 		color: #333333;
+		text-align: center;
+		margin-top: 6rpx;
 	}
-	
-	.product-count {
+
+	.item-bottom {
 		position: absolute;
+		width: 100%;
+		bottom: 12rpx;
+		left: 0;
+		padding: 0 13rpx;
+		box-sizing: border-box;
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.item-price {
 		display: flex;
 		flex-direction: row;
-		left: 269rpx;
-		top: 95rpx;
 		align-items: center;
-		
-		.count-text {
-			font-size: 15.27rpx;
-			color: #6C6C6C;
-		}
-		
-		.box-icon {
-			width: 17.39rpx;
-			height: 17.39rpx;
-			margin-left: 7rpx;
-		}
 	}
-	
-	.product-price {
-		position: absolute;
+
+	.price-symbol-small {
+		font-size: 15.27rpx;
+		margin-top: 6rpx;
+		color: #FF6A6A;
+	}
+
+	.price-value-small {
+		font-size: 22.9rpx;
+		font-weight: bold;
+		color: #FF6A6A;
+	}
+
+	.item-count {
 		display: flex;
 		flex-direction: row;
-		left: 269rpx;
-		bottom: 44rpx;
 		align-items: center;
-		
-		.price-symbol {
-			font-size: 19.08rpx;
-			margin-top: 15rpx;
-			color: #FF6A6A;
-		}
-		
-		.price-value {
-			font-size: 34.35rpx;
-			font-weight: bold;
-			color: #FF6A6A;
-		}
 	}
-	
-	.buy-button {
-		width: 89.22rpx;
-		height: 42rpx;
-		border-radius: 20.99rpx;
-		border: 1rpx solid #FF6A6A;
-		background-color: white;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		position: absolute;
-		right: 38rpx;
-		bottom: 38rpx;
-		transition: all 0.3s;
-		
-		&:active {
-			background-color: #FF6A6A;
-			
-			.buy-text {
-				color: white;
-			}
-		}
-		
+
+	.count-text-small {
+		font-size: 15.27rpx;
+		color: #6C6C6C;
+	}
+
+	.box-icon-small {
+		width: 17.39rpx;
+		height: 17.39rpx;
+		margin-left: 7rpx;
+	}
+}
+
+
+
+.product-item {
+	width: 100%;
+	height: 261.45rpx;
+	background-color: #FFFFFF;
+	margin-bottom: 21rpx;
+	border-radius: 15.27rpx;
+	position: relative;
+	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+	transition: transform 0.3s;
+
+	&:active {
+		transform: scale(0.98);
+	}
+}
+
+.product-image-container {
+	width: 216.31rpx;
+	height: 216.31rpx;
+	background-color: #F2F2F2;
+	border-radius: 15.27rpx;
+	position: absolute;
+	left: 22rpx;
+	top: 22rpx;
+	overflow: hidden;
+
+	.product-image {
+		width: 100%;
+		height: 100%;
+	}
+}
+
+.product-name {
+	width: 350rpx;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	position: absolute;
+	left: 269rpx;
+	top: 44rpx;
+	font-size: 26.72rpx;
+	font-weight: 600;
+	color: #333333;
+}
+
+.product-count {
+	position: absolute;
+	display: flex;
+	flex-direction: row;
+	left: 269rpx;
+	top: 95rpx;
+	align-items: center;
+
+	.count-text {
+		font-size: 15.27rpx;
+		color: #6C6C6C;
+	}
+
+	.box-icon {
+		width: 17.39rpx;
+		height: 17.39rpx;
+		margin-left: 7rpx;
+	}
+}
+
+.product-price {
+	position: absolute;
+	display: flex;
+	flex-direction: row;
+	left: 269rpx;
+	bottom: 44rpx;
+	align-items: center;
+
+	.price-symbol {
+		font-size: 19.08rpx;
+		margin-top: 15rpx;
+		color: #FF6A6A;
+	}
+
+	.price-value {
+		font-size: 34.35rpx;
+		font-weight: bold;
+		color: #FF6A6A;
+	}
+}
+
+.buy-button {
+	width: 89.22rpx;
+	height: 42rpx;
+	border-radius: 20.99rpx;
+	border: 1rpx solid #FF6A6A;
+	background-color: white;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: absolute;
+	right: 38rpx;
+	bottom: 38rpx;
+	transition: all 0.3s;
+
+	&:active {
+		background-color: #FF6A6A;
+
 		.buy-text {
-			font-size: 19.08rpx;
-			color: #FF6A6A;
-			font-weight: 500;
+			color: white;
 		}
 	}
+
+	.buy-text {
+		font-size: 19.08rpx;
+		color: #FF6A6A;
+		font-weight: 500;
+	}
+}
 </style>
\ No newline at end of file
diff --git a/pages/mall/order-list.vue b/pages/mall/order-list.vue
index 9dd14d3..90571da 100644
--- a/pages/mall/order-list.vue
+++ b/pages/mall/order-list.vue
@@ -1,6 +1,6 @@
 <!-- 滑动切换选项卡演示(标准写法) -->
 <template>
-    <page-no-container ref="pageContainer" title="我的订单" :showBack="true">
+    <PageNoContainer ref="pageContainer" title="我的订单" :showBack="true">
         <!-- 使用z-paging-swiper为根节点可以免计算高度 -->
         <z-paging-swiper :fixed="false">
             <!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
@@ -19,7 +19,7 @@
             </swiper>
         </z-paging-swiper>
 
-    </page-no-container>
+    </PageNoContainer>
 </template>
 
 <script setup>
@@ -33,7 +33,7 @@ const tabList = ref(['全部', '待发货', '待收货', '评价', '售后']);
 onLoad((options) => {
     console.log(options);
     if (options.type) {
-        current.value = options.type;
+        current.value = Number(options.type);
     }
 });
 // tabs通知swiper切换
diff --git a/pages/news/news.vue b/pages/news/news.vue
index 706c34e..aaf7929 100644
--- a/pages/news/news.vue
+++ b/pages/news/news.vue
@@ -13,17 +13,19 @@
 		</template>
 		<swiper class="swiper" :current="current" @animationfinish="swiperAnimationfinish">
 			<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
-				<view class="search-container">
-					<view class="search">
-						<text class="iconfont icon-search" style="margin-right: 10rpx; color: #999;"></text>
-						<input type="text" v-model="searchKeywords[index]" placeholder="搜索" confirm-type="search"
-							@confirm="() => onSearch(index)" />
-						<text class="iconfont icon-close" v-if="searchKeywords[index]" @click="() => clearSearch(index)"
-							style="margin-left: 10rpx; color: #999;"></text>
-					</view>
-				</view>
 				<news-list-item @clickItem="onClickItem" :responseCallback="queryList" ref="listItem" :tabIndex="index"
 					:currentIndex="current">
+					<template #search>
+						<view class="search-container">
+							<view class="search">
+								<text class="iconfont icon-search" style="margin-right: 10rpx; color: #999;"></text>
+								<input type="text" v-model="searchKeywords[index]" placeholder="搜索"
+									confirm-type="search" @confirm="() => onSearch(index)" />
+								<text class="iconfont icon-close" v-if="searchKeywords[index]"
+									@click="() => clearSearch(index)" style="margin-left: 10rpx; color: #999;"></text>
+							</view>
+						</view>
+					</template>
 				</news-list-item>
 			</swiper-item>
 		</swiper>