查漏补缺

src/api/category.ts

@@ -11,3 +11,9 @@ export const getGoodsCategory = (data: any) => request('/wx/goods/category', 'GE
 
 // 分类详情数据列表
 export const getGoodsList = (data: any) => request('/wx/goods/list', 'GET', data);
+
+// 专题精选数据列表
+export const getTopicList = (data: any) => request('/wx/topic/list', 'GET', data);
+
+// 专题精选数据列表
+export const getTopicDetail = (id: number) => request('/wx/topic/detail', 'GET', { id });

src/api/index.ts

@@ -26,3 +26,6 @@ export const orderSubmit = (data: any) => request('/wx/order/submit', 'POST', da
 
 // 提交订单详细信息
 export const orderDetail = (data: any) => request('/wx/order/detail', 'POST', data)
+
+// 提交订单详细信息
+export const getOrderData = (data: any) => request('/wx/order/list', 'GET', data)
\ No newline at end of file

src/components/goodsItem.vue

+<template>
+	<view class="item-container">
+		<u-image width="176rpx" height="176rpx" :src="src"></u-image>
+		<view class="content">
+			<view class="title">
+				<text>{{ name }}</text>
+				<text style="color: #646566;">{{ brief }}</text>
+			</view>
+			<view class="price">
+				<text class="new-price">￥{{ retailPrice.toFixed(2) }}</text>
+				<text class="old-price">￥{{ counterPrice.toFixed(2) }}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+let props = defineProps({
+	// 路径
+	src: {
+		type: String,
+		default: 'http://yanxuan.nosdn.127.net/0984c9388a2c3fd2335779da904be393.png',
+	},
+	// 主标题
+	name: {
+		type: String,
+		default: '',
+	},
+	// 副标题
+	brief: {
+		type: String,
+		default: '',
+	},
+	// 原价格
+	counterPrice: {
+		type: Number,
+		default: 0,
+	},
+	// 新价格
+	retailPrice: {
+		type: Number,
+		default: 0,
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.item-container {
+	box-sizing: border-box;
+	width: 100%;
+	height: 208rpx;
+	padding: 16rpx 32rpx;
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	background-color: #fff;
+	.content {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		margin-left: 20rpx;
+		.title {
+			display: flex;
+			flex-direction: column;
+		}
+		.price {
+			.new-price {
+				font-size: 32rpx;
+			}
+			.old-price {
+				margin-left: 10rpx;
+				color: #969799;
+				font-size: 20rpx;
+				text-decoration: line-through;
+			}
+		}
+	}
+}
+</style>

src/pages.json

@@ -83,6 +83,44 @@
 				"navigationBarTitleText": "添加用户地址",
 				"navigationBarBackgroundColor": "#fff"
 			}
+		}, {
+			"path": "pages/category/new",
+			"style": {
+				"navigationBarTitleText": "新品首发",
+				"navigationBarBackgroundColor": "#fff",
+				"onReachBottomDistance": 55
+			}
+		}, {
+			"path": "pages/category/hot",
+			"style": {
+				"navigationBarTitleText": "人气推荐",
+				"navigationBarBackgroundColor": "#fff",
+				"onReachBottomDistance": 55
+			}
+		}, {
+			"path": "pages/category/topicList",
+			"style": {
+				"navigationBarTitleText": "专题精选",
+				"navigationBarBackgroundColor": "#fff",
+				"onReachBottomDistance": 55
+			}
+		}, {
+			"path": "pages/category/topic",
+			"style": {
+				"navigationBarTitleText": "精选详情",
+				"navigationBarBackgroundColor": "#fff"
+			}
+		}, {
+			"path": "pages/index/search",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		}, {
+			"path": "pages/order/orderList",
+			"style": {
+				"navigationBarTitleText": "订单",
+				"navigationBarBackgroundColor": "#fff"
+			}
 		}
 	],
 	"tabBar": {

src/pages/cart/index.vue

@@ -93,6 +93,7 @@
 <script lang="ts" setup>
 import { ref, reactive } from 'vue';
 import { getCartIndex, cartChecked, cartDelete, cartUpdate } from '@/api/cart';
+import { checkoutCart } from '@/api/index';
 import { onShow } from '@dcloudio/uni-app';
 import _ from 'lodash';
 
@@ -160,7 +161,7 @@ const deleteCart = (index: number) => {
 
 // 批量删除
 const tapOptions = () => {
-	if(delCircle.value) {
+	if (delCircle.value) {
 		console.log('删除');
 		delProductIds.value = [];
 		_.each(checkedGoods.value, (id: any) => {
@@ -172,8 +173,28 @@ const tapOptions = () => {
 		});
 		showModel.show = true;
 	} else {
+		let storage: any = {
+			cartId: 0,
+			addressId: 0,
+			couponId: 0,
+			userCouponId: 0,
+			grouponRulesId: 0,
+		};
+		Object.keys(storage).forEach((prop: any) => {
+			const el: any = storage[prop];
+			console.log(prop, el);
+			uni.setStorage({
+				key: prop,
+				data: el,
+				success(res: any) {
+					if (prop == 'grouponRulesId' && el == 0) {
+						uni.navigateTo({ url: `../order/checkout` });
+					}
+					console.log(res);
+				},
+			});
+		});
 	}
-	
 };
 
 // 确认删除

src/pages/category/hot.vue

+<template>
+	<view class="app-container">
+		<goodsItem
+			v-for="item in itemList"
+			:src="item.picUrl"
+			:name="item.name"
+			:brief="item.brief"
+			:counterPrice="item.counterPrice"
+			:retailPrice="item.retailPrice"
+			@tap="hotGoods(item)"
+		/>
+		<view style="padding: 20rpx;"><u-loadmore :status="status" icon-type="flower" /></view>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
+import { onReachBottom } from '@dcloudio/uni-app';
+import { getGoodsList } from '@/api/category';
+import goodsItem from '@/components/goodsItem.vue';
+
+let hotQuery = reactive({
+	isHot: true,
+	page: 1,
+	limit: 10,
+});
+
+let status = ref('loadmore');
+let total = ref(0);
+
+let itemList = ref([] as any);
+
+// 上拉加载数据
+onReachBottom(() => {
+	// 判断是否还有下一页数据
+	if (hotQuery.page * hotQuery.limit >= total.value) return (status.value = 'nomore');
+	// // 判断是否正在请求其它数据，如果是，则不发起额外的请求
+	if (status.value === 'loading') return;
+	hotQuery.page += 1;
+	initList(hotQuery);
+});
+
+const hotGoods = (row: any) => {
+	uni.navigateTo({ url: '/pages/goods/index?id=' + row.id });
+};
+let initList = (data: any) => {
+	status.value = 'loading';
+	getGoodsList(data).then((res: any) => {
+		if (res.data.code == 200) {
+			if (res.data.data.total > 10) status.value = 'loadmore';
+			else status.value = 'nomore';
+			total.value = res.data.data.total;
+			itemList.value = [...itemList.value, ...res.data.data.list];
+		}
+	});
+};
+initList(hotQuery);
+</script>
+
+<style lang="scss" scoped></style>

src/pages/category/new.vue

+<template>
+	<view class="app-container">
+		<goodsItem
+			v-for="item in itemList"
+			:src="item.picUrl"
+			:name="item.name"
+			:brief="item.brief"
+			:counterPrice="item.counterPrice"
+			:retailPrice="item.retailPrice"
+			@tap="newGoods(item)"
+		/>
+		<view style="padding: 20rpx;"><u-loadmore :status="status" icon-type="flower" /></view>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
+import { getGoodsList } from '@/api/category';
+import { onReachBottom } from '@dcloudio/uni-app';
+import goodsItem from '@/components/goodsItem.vue';
+
+let newQuery = reactive({
+	isNew: true,
+	page: 1,
+	limit: 10,
+});
+
+let status = ref('loadmore');
+let total = ref(0);
+let itemList = ref([] as any);
+
+// 上拉加载数据
+onReachBottom(() => {
+	// 判断是否还有下一页数据
+	if (newQuery.page * newQuery.limit >= total.value) return (status.value = 'nomore');
+	// // 判断是否正在请求其它数据，如果是，则不发起额外的请求
+	if (status.value === 'loading') return;
+	newQuery.page += 1;
+	initList(newQuery);
+});
+
+const newGoods = (row: any) => {
+	uni.navigateTo({ url: '/pages/goods/index?id=' + row.id });
+};
+
+let initList = (data: any) => {
+	status.value = 'loading';
+	getGoodsList(data).then((res: any) => {
+		if (res.data.code == 200) {
+			if (res.data.data.total > 10) status.value = 'loadmore';
+			else status.value = 'nomore';
+			total.value = res.data.data.total;
+			itemList.value = [...itemList.value, ...res.data.data.list];
+		}
+	});
+};
+initList(newQuery);
+</script>
+
+<style lang="scss" scoped></style>

src/pages/category/topic.vue

+<template>
+	<view class=""><u-parse :html="detailData?.content"></u-parse></view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { onLoad, onHide } from '@dcloudio/uni-app';
+import { getTopicDetail } from '@/api/category';
+
+let detailData = ref();
+onLoad((options: any) => {
+	console.log(options);
+	getTopicDetail(options.id).then((res: any) => {
+		if (res.data.code === 200) {
+			detailData.value = res.data.data.topic;
+		}
+	});
+});
+
+onHide(() => {
+	detailData.value = [];
+});
+</script>

src/pages/category/topicList.vue

+<template>
+	<view v-for="item in topicList" :key="item.id" @tap="toTopic(item)">
+		<view class="topic">
+			<u-image
+				width="100%"
+				height="360rpx"
+				:src="item.picUrl"
+				mode="scaleToFill"
+				class="img"
+			></u-image>
+			<view class="bg-text">
+				<view class="txt">{{ item.title }}</view>
+				<view class="line"></view>
+				<view class="price">阅读次数：{{ item.readCount }}</view>
+			</view>
+		</view>
+		<view class="desc">{{ item.subtitle }}</view>
+	</view>
+	<view style="padding: 20rpx;"><u-loadmore :status="status" icon-type="flower" /></view>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
+import { getTopicList } from '@/api/category';
+import { onReachBottom } from '@dcloudio/uni-app';
+
+let listQuery = reactive({
+	page: 1,
+	limit: 10,
+});
+
+let status = ref('loadmore');
+let total = ref(0);
+
+let topicList = ref([] as any);
+
+// 上拉加载数据
+onReachBottom(() => {
+	// 判断是否还有下一页数据
+	if (listQuery.page * listQuery.limit >= total.value) return (status.value = 'nomore');
+	// // 判断是否正在请求其它数据，如果是，则不发起额外的请求
+	if (status.value === 'loading') return;
+	listQuery.page += 1;
+	initList();
+});
+
+let toTopic = (row: any) => {
+	uni.navigateTo({
+		url: '/pages/category/topic?id=' + row.id,
+	});
+};
+
+let initList = () => {
+	status.value = 'loading';
+	getTopicList(listQuery).then((res: any) => {
+		if (res.data.data.total > 10) status.value = 'loadmore';
+		else status.value = 'nomore';
+		if (res.data.code === 200) {
+			total.value = res.data.data.total;
+			topicList.value = [...topicList.value, ...res.data.data.list];
+		}
+	});
+};
+initList();
+</script>
+
+<style scoped lang="scss">
+* {
+	box-sizing: border-box;
+}
+.topic {
+	width: 100%;
+	height: 180px;
+	position: relative;
+	.img {
+		position: absolute;
+		top: 0;
+		left: 0;
+	}
+	.bg-text {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 180px;
+		text-align: center;
+		font-size: 50rpx;
+		color: #fff;
+		.txt {
+			margin-top: 60px;
+			height: 25px;
+			font-size: 25px;
+			color: #fff;
+		}
+		.line {
+			margin: 0 auto;
+			margin-top: 16px;
+			display: block;
+			height: 2px;
+			width: 300px;
+			background: #fff;
+		}
+		.price {
+			height: 25px;
+			font-size: 25px;
+			color: #fff;
+		}
+	}
+}
+.desc {
+	background: #fff;
+	width: 100%;
+	height: auto;
+	overflow: hidden;
+	padding: 25px 20px;
+	font-size: 20px;
+	color: #666;
+	line-height: 20px;
+	text-align: center;
+}
+</style>

src/pages/index/index.vue

 <template>
 	<!-- 搜索 -->
-	<view><uni-search-bar placeholder="输入搜索商品" bgColor="#EEEEEE" clearButton="auto" cancelButton="none" @blur="blur" @focus="focus" @confirm="search" /></view>
+	<view>
+		<uni-search-bar
+			placeholder="输入搜索商品"
+			bgColor="#EEEEEE"
+			clearButton="auto"
+			cancelButton="none"
+			@confirm="search"
+		/>
+	</view>
 	<!-- 轮播图 -->
-	<view class="wrap"><u-swiper :list="indexData?.banner" name="url" height="400"></u-swiper></view>
+	<view class="wrap">
+		<u-swiper :list="indexData?.banner" name="url" height="400"></u-swiper>
+	</view>
 	<!-- 宫格布局 -->
-	<u-grid :col="4" class="grid" @tap="clickGrid">
+	<u-grid :col="6" class="grid" @tap="clickGrid">
 		<u-grid-item v-for="(item, index) in indexData?.channel" :key="item.id" :index="item.id">
 			<u-icon :name="item.iconUrl" :size="46"></u-icon>
 			<view class="grid-text">{{ item.name }}</view>
@@ -12,10 +22,39 @@
 	</u-grid>
 
 	<view class="goods">
-		<view style="padding: 20rpx 20rpx;"><u-section title="新品首发" sub-title="查看更多" :show-line="false" /></view>
+		<!-- 人气推荐 -->
+		<view class="Hot">
+			<view style="padding: 20rpx 20rpx;">
+				<u-section
+					title="人气推荐"
+					sub-title="查看更多"
+					:show-line="false"
+					@click="toHot"
+				/>
+			</view>
+			<goodsItem
+				v-for="item in indexData?.hotGoodsList"
+				:src="item.picUrl"
+				:name="item.name"
+				:brief="item.brief"
+				:counterPrice="item.counterPrice"
+				:retailPrice="item.retailPrice"
+				@tap="hotGoods(item)"
+			/>
+		</view>
+		<!-- 新品首发 -->
+		<view class="new" style="margin-top: 20rpx;">
+			<view style="padding: 20rpx 20rpx;">
+				<u-section
+					title="新品首发"
+					sub-title="查看更多"
+					:show-line="false"
+					@click="toNew"
+				/>
+			</view>
 			<uni-row>
 				<uni-col :span="12" v-for="(item, index) in indexData?.newGoodsList" :key="item.id">
-				<view class="goods-item" @tap="viewGoods(item)">
+					<view class="goods-item" @tap="newGoods(item)">
 						<image class="goods-img" :src="item.picUrl"></image>
 						<view class="goods-infos">
 							<uni-row>
@@ -44,22 +83,81 @@
 				</uni-col>
 			</uni-row>
 		</view>
+
+		<!-- 专题精选 -->
+		<view class="topic" style="margin-top: 20rpx;">
+			<view style="padding: 20rpx 20rpx;">
+				<u-section
+					title="专题精选"
+					sub-title="查看更多"
+					:show-line="false"
+					@click="toTopicList"
+				/>
+			</view>
+			<u-row gutter="16" justify="start">
+				<u-col
+					v-for="item in indexData?.topicList"
+					:key="item.id"
+					span="6"
+					style="height: 500rpx; background-color: #fff; border: 1px solid #ebedf0; padding: 32rpx 16rpx;"
+					@click="toTopic(item)"
+				>
+					<view class="topic-item">
+						<u-image width="100%" height="200rpx" :src="item.picUrl"></u-image>
+						<view class="title">
+							<view>{{ item.title }}</view>
+							<view class="text">{{ item.subtitle }}</view>
+						</view>
+					</view>
+				</u-col>
+			</u-row>
+		</view>
+	</view>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
 import { homeIndex } from '@/api/index';
+import goodsItem from '@/components/goodsItem.vue';
 
 const indexData = ref();
 
+const search = (val: any) => {
+	uni.navigateTo({ url: './search?keyword=' + val.value });
+};
+
 const clickGrid = (index: any) => {
 	uni.navigateTo({ url: '/pages/category/items?id=' + index });
 };
 
-const viewGoods = (row: any) => {
+const newGoods = (row: any) => {
 	uni.navigateTo({ url: '/pages/goods/index?id=' + row.id });
 };
 
+const hotGoods = (row: any) => {
+	uni.navigateTo({ url: '/pages/goods/index?id=' + row.id });
+};
+const toNew = () => {
+	uni.navigateTo({ url: '/pages/category/new' });
+};
+
+const toHot = () => {
+	uni.navigateTo({ url: '/pages/category/hot' });
+};
+
+const toTopicList = () => {
+	uni.navigateTo({ url: '/pages/category/topicList' });
+};
+
+const toTopic = (row: any) => {
+	uni.navigateTo({
+		url: `../category/topic?id=${row.id}`,
+		fail(err) {
+			console.log(err);
+		},
+	});
+};
+
 const initIndex = () => {
 	homeIndex().then((res: any) => {
 		// console.log(res);
@@ -131,4 +229,18 @@ initIndex();
 		}
 	}
 }
+
+.topic {
+	width: 100%;
+	.topic-item {
+		.title {
+			margin-top: 20rpx;
+			font-size: 28rpx;
+			color: rgb(171, 149, 109);
+			.text {
+				overflow: hidden;
+			}
+		}
+	}
+}
 </style>

src/pages/index/search.vue

+<template>
+	<view style="padding: 24rpx;">
+		<uni-search-bar
+			v-model="searchQuery.keyword"
+			placeholder="输入搜索商品"
+			bgColor="#EEEEEE"
+			clearButton="auto"
+			cancelButton="none"
+			@confirm="search"
+		/>
+		<view v-if="searchList.length !== 0">
+			<goodsItem
+				v-for="item in searchList"
+				:src="item.picUrl"
+				:name="item.name"
+				:brief="item.brief"
+				:counterPrice="item.counterPrice"
+				:retailPrice="item.retailPrice"
+				@tap="searchGoods(item)"
+			/>
+			<u-loadmore :status="status" icon-type="flower" />
+		</view>
+		<view v-else><u-loadmore status="nomore" icon-type="flower" /></view>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { onLoad } from '@dcloudio/uni-app';
+import { ref, reactive } from 'vue';
+import { getGoodsList } from '@/api/category';
+import { onReachBottom } from '@dcloudio/uni-app';
+import goodsItem from '@/components/goodsItem.vue';
+
+let searchQuery = reactive({
+	keyword: '',
+	page: 1,
+	limit: 10,
+	categoryId: 0,
+});
+
+let status = ref('loadmore');
+let total = ref(0);
+let searchList = ref([] as any);
+
+let search = (val: any) => {
+	searchList.value = [];
+	searchQuery.page = 1
+	searchQuery.keyword = val.value;
+	initList();
+};
+
+// 上拉加载数据
+onReachBottom(() => {
+	// 判断是否还有下一页数据
+	if (searchQuery.page * searchQuery.limit >= total.value) return (status.value = 'nomore');
+	// // 判断是否正在请求其它数据，如果是，则不发起额外的请求
+	if (status.value === 'loading') return;
+	searchQuery.page += 1;
+	initList();
+});
+
+const searchGoods = (row: any) => {
+	uni.navigateTo({ url: '/pages/goods/index?id=' + row.id });
+};
+
+onLoad((options: any) => {
+	searchQuery.keyword = options.keyword;
+	initList();
+});
+
+let initList = () => {
+	status.value = 'loading';
+	getGoodsList(searchQuery).then((res: any) => {
+		if (res.data.data.total > 10) status.value = 'loadmore';
+		else status.value = 'nomore';
+		if (res.data.code === 200) {
+			total.value = res.data.data.total;
+			searchList.value = [...searchList.value, ...res.data.data.list];
+		}
+	});
+};
+</script>
+
+<style lang="scss" scoped>
+page {
+	background-color: #fff;
+}
+</style>

src/pages/login/login.vue

 <template>
 	<view class="login-container">
-		<image src="https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/logo/logo.png" mode="scaleToFill" class="title-iamge"></image>
+		<image
+			src="https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/logo/logo.png"
+			mode="scaleToFill"
+			class="title-iamge"
+		></image>
 		<text class="login-text">欢迎登陆</text>
 
 		<view class="login-form">
@@ -26,7 +30,7 @@ let inputData = reactive({
 	type: 'text',
 	checkType: 'phone',
 	check: false,
-	checkContent: '请输入有效手机号'
+	checkContent: '请输入有效手机号',
 });
 
 let inputData1 = reactive({
@@ -36,7 +40,7 @@ let inputData1 = reactive({
 	type: 'password',
 	checkType: 'passWord',
 	check: false,
-	checkContent: '请输入密码'
+	checkContent: '请输入密码',
 });
 
 let hangleInput = (Value: any, type: string) => {
@@ -64,8 +68,8 @@ let clickNextStep = () => {
 
 // user123
 let initLogin = async (mobile: number, password: string) => {
+	uni.clearStorage();
 	let res: any = await login({ mobile, password });
-	console.log(res);
 	if (res.data.code == 200) {
 		uni.setStorage({
 			key: 'token',
@@ -81,19 +85,19 @@ let initLogin = async (mobile: number, password: string) => {
 								uni.showToast({
 									title: '登陆成功',
 									icon: 'none',
-									duration: 1000
+									duration: 1000,
 								});
-							}
+							},
 						});
-					}
+					},
 				});
-			}
+			},
 		});
 	} else {
 		uni.showToast({
 			title: '手机号或密码错误',
 			icon: 'none',
-			duration: 2000
+			duration: 2000,
 		});
 	}
 };

src/pages/order/checkout.vue

@@ -18,11 +18,18 @@
 		<view v-for="(item, index) in buyNowData?.checkedGoodsList" class="details">
 			<u-image width="140rpx" height="200rpx" :src="item.picUrl" class="img"></u-image>
 			<view class="right">
-				<view class="name">
-					{{ item.goodsName }}
-				</view>
-				<view class="tag" v-for="(item1, index1) in item.specifications.length" :key="index1">
-					<u-tag :text="item.specifications[index1]" type="info" size="mini" style="margin-right: 2rpx;" />
+				<view class="name">{{ item.goodsName }}</view>
+				<view
+					class="tag"
+					v-for="(item1, index1) in item.specifications.length"
+					:key="index1"
+				>
+					<u-tag
+						:text="item.specifications[index1]"
+						type="info"
+						size="mini"
+						style="margin-right: 2rpx;"
+					/>
 				</view>
 				<view class="sum-price">
 					<text>￥{{ item.price.toFixed(2) }}</text>
@@ -56,7 +63,10 @@
 			<view>
 				<text style="font-size: 30rpx;">总计</text>
 				<text
-					style="margin-right: 24rpx; color: #ee0a24; font-size: 30rpx; font-weight: 600;">￥{{ buyNowData?.orderTotalPrice.toFixed(2) }}</text>
+					style="margin-right: 24rpx; color: #ee0a24; font-size: 30rpx; font-weight: 600;"
+				>
+					￥{{ buyNowData?.orderTotalPrice.toFixed(2) }}
+				</text>
 				<u-button type="error" size="medium" shape="circle" @tap="onsubmit">结算</u-button>
 			</view>
 		</view>
@@ -64,37 +74,23 @@
 </template>
 
 <script setup lang="ts">
-	import {
-		onLoad,
-		onShow
-	} from '@dcloudio/uni-app';
-	import {
-		ref
-	} from 'vue'
-	import {
-		checkoutCart,
-		orderDetail,
-		orderSubmit
-	} from '@/api/index'
-
-	const buyNowId = ref(uni.getStorageSync('buyNowId'))
-	const buyNowData = ref()
-	const remarks = ref() // 订单备注
-
+import { onShow, onHide } from '@dcloudio/uni-app';
+import { ref } from 'vue';
+import { checkoutCart, orderDetail, orderSubmit } from '@/api/index';
 
-	// onLoad(() => {
-	// 	initCheckoutCart(buyNowId.value)
-	// })
+const buyNowId = ref(uni.getStorageSync('buyNowId') || 0);
+const buyNowData = ref();
+const remarks = ref(); // 订单备注
 
-	// 设置地址
-	const tapAddresss = () => {
+// 设置地址
+const tapAddresss = () => {
 	uni.navigateTo({
-			url: `../profile/address?cartId=${buyNowId.value}`
-		})
-	}
+		url: `../profile/address?cartId=${buyNowId.value}`,
+	});
+};
 
-	// 结算
-	const onsubmit = () => {
+// 结算
+const onsubmit = () => {
 	let data: object = {
 		addressId: uni.getStorageSync('addressId'),
 		cartId: uni.getStorageSync('cartId'),
@@ -102,62 +98,69 @@
 		grouponLinkId: 0,
 		grouponRulesId: uni.getStorageSync('grouponRulesId'),
 		message: remarks.value,
-			userCouponId: 0
-		}
+		userCouponId: 0,
+	};
 	// 提交订单
 	orderSubmit(data).then((res: any) => {
 		console.log(res);
 		orderDetail({
-				orderId: res.data.data.orderId
+			orderId: res.data.data.orderId,
 		}).then((res1: any) => {
 			console.log(res1, '订单详情信息');
 			uni.switchTab({
-					url: '../profile/index'
-				})
-			})
-		})
-	}
+				url: '../profile/index',
+			});
+		});
+	});
+};
 
-	// 初始化数据
-	const initCheckoutCart = (cartId: number) => {
-		let couponId = uni.getStorageSync('couponId')
-		let userCouponId = uni.getStorageSync('userCouponId')
-		let grouponRulesId = uni.getStorageSync('grouponRulesId')
-		let addressId = uni.getStorageSync('addressId')
+// 初始化数据
+const initCheckoutCart = (cartId: number) => {
+	let couponId = uni.getStorageSync('couponId');
+	let userCouponId = uni.getStorageSync('userCouponId');
+	let grouponRulesId = uni.getStorageSync('grouponRulesId');
+	let addressId = uni.getStorageSync('addressId');
+	console.log(couponId);
 	checkoutCart({
 		cartId,
 		couponId,
 		userCouponId,
 		grouponRulesId,
-			addressId
+		addressId,
 	}).then((res: any) => {
-			buyNowData.value = res.data.data
+		buyNowData.value = res.data.data;
 
 		let storage: any = {
 			addressId: res.data.data.addressId,
 			cartId: res.data.data.cartId,
 			couponId: res.data.data.couponId,
 			userCouponId: res.data.data.userCouponId,
-				grouponRulesId: res.data.data.grouponRulesId
-			}
+			grouponRulesId: res.data.data.grouponRulesId,
+		};
 		Object.keys(storage).forEach((prop: any) => {
 			const el: any = storage[prop];
 			uni.setStorage({
 				key: prop,
-					data: el
-				})
+				data: el,
+			});
 		});
 		console.log(buyNowData.value, '购买数据');
-		})
-	}
+	});
+};
 
-	onShow(() => {
-		initCheckoutCart(buyNowId.value)
-	})
+onShow(() => {
+	initCheckoutCart(buyNowId.value);
+});
+onHide(() => {
+	uni.setStorage({
+		key: 'buyNowId',
+		data: 0,
+	});
+});
 </script>
 
 <style lang="scss" scoped>
-	.container {
+.container {
 	.address {
 		width: 100%;
 		padding: 20rpx 32rpx;
@@ -252,5 +255,5 @@
 		align-items: center;
 		padding: 0 32rpx;
 	}
-	}
+}
 </style>

src/pages/order/index.vue

@@ -6,7 +6,8 @@
 				bgColor="#EEEEEE"
 				clearButton="auto"
 				cancelButton="none"
-          @confirm="search"/>
+				@confirm="search"
+			/>
 		</view>
 		<view class="order-type-tab">
 			<uni-segmented-control
@@ -15,18 +16,21 @@
 				:values="orderTypeTabs"
 				@clickItem="changeOrderType"
 				styleType="text"
-          activeColor="#f3a73f"></uni-segmented-control>
+				activeColor="#f3a73f"
+			></uni-segmented-control>
 			<view class="content">
 				<view class="order-content">
 					<view class="order-item" v-for="(item, index) in orderList" :key="index">
 						<view class="shop-name">
 							<text>{{ item.shopName }}</text>
 						</view>
-            <view class="order-goods-item" v-for="(goodsItem, goodsIndex) in item.goodsList" :key="goodsIndex">
+						<view
+							class="order-goods-item"
+							v-for="(goodsItem, goodsIndex) in item.goodsList"
+							:key="goodsIndex"
+						>
 							<view class="goods-item">
-                <view class="goods-image">
-                  <image :src="goodsItem.img"/>
-                </view>
+								<view class="goods-image"><image :src="goodsItem.img" /></view>
 								<view class="goods-info">
 									<view class="goods-title-box">
 										<text class="goods-title">{{ goodsItem.title }}</text>
@@ -44,12 +48,10 @@
 								<text>实付款：</text>
 								<text class="goods-price">
 									<text class="unit">￥</text>
-                  <text class="price">{{item.orderPrice}}</text>
+									<text class="price">{{ item.orderPrice }}</text>
 								</text>
 							</view>
-              <view class="option-btn">
-
-              </view>
+							<view class="option-btn"></view>
 						</view>
 					</view>
 				</view>
@@ -59,16 +61,16 @@
 </template>
 
 <script lang="ts" setup>
-import {ref} from "vue";
-import {onLoad} from "@dcloudio/uni-app";
+import { ref } from 'vue';
+import { onLoad } from '@dcloudio/uni-app';
 
-let currentType = ref(0)
+let currentType = ref(0);
 
 onLoad((options: any) => {
-  currentType.value = Number.parseInt(options.orderType) + 1
-})
+	currentType.value = Number.parseInt(options.orderType) + 1;
+});
 
-const orderTypeTabs = ref(['全部', '待付款', '待发货', '待收货', '待评价'])
+const orderTypeTabs = ref(['全部', '待付款', '待发货', '待收货', '待评价']);
 
 const orderList = ref([
 	{
@@ -82,17 +84,19 @@ const orderList = ref([
 				spec: '石墨色',
 				price: '6000',
 				num: '1',
-        realPrice: '5500'
-      }, {
+				realPrice: '5500',
+			},
+			{
 				img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_1.jpg',
 				title: 'Iphone 13 Pro Max 256G 全网通 国行正品',
 				spec: '石墨色',
 				price: '6000',
 				num: '1',
-        realPrice: '5500'
-      }
-    ]
-  }, {
+				realPrice: '5500',
+			},
+		],
+	},
+	{
 		shopName: 'Apple官方旗舰店',
 		orderStatus: '待付款',
 		orderPrice: '11000',
@@ -103,34 +107,32 @@ const orderList = ref([
 				spec: '石墨色',
 				price: '6000',
 				num: '1',
-        realPrice: '5500'
-      }, {
+				realPrice: '5500',
+			},
+			{
 				img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_1.jpg',
 				title: 'Iphone 13 Pro Max 256G 全网通 国行正品',
 				spec: '石墨色',
 				price: '6000',
 				num: '1',
-        realPrice: '5500'
-      }
-    ]
-  }
-
-])
-
+				realPrice: '5500',
+			},
+		],
+	},
+]);
 
 const search = (e: any) => {
-  const keyword = e.value
-}
+	const keyword = e.value;
+};
 
 const changeOrderType = (e: any) => {
-  currentType.value = e.currentIndex
-}
+	currentType.value = e.currentIndex;
+};
 </script>
 
 <style lang="scss" scoped>
 .order-container {
 	.order-search-box {
-
 	}
 
 	.order-type-tab {
@@ -142,7 +144,7 @@ const changeOrderType = (e: any) => {
 					margin-top: 20rpx;
 					padding: 20rpx 30rpx;
 					border-radius: 20rpx;
-          background-color: #FFFFFF;
+					background-color: #ffffff;
 
 					.shop-name {
 						//padding: 0 0 0 30rpx;
@@ -196,7 +198,6 @@ const changeOrderType = (e: any) => {
 								right: 0;
 
 								text {
-
 								}
 							}
 						}
@@ -221,7 +222,6 @@ const changeOrderType = (e: any) => {
 							}
 						}
 						.option-btn {
-
 						}
 					}
 				}

src/pages/order/orderList.vue

+<template>
+	<view>
+		<view class="wrap">
+			<view class="u-tabs-box">
+				<u-tabs-swiper
+					activeColor="#f29100"
+					ref="swiperTabs"
+					:list="list"
+					:current="current"
+					@change="change"
+					:is-scroll="false"
+					swiperWidth="750"
+				></u-tabs-swiper>
+			</view>
+			<swiper
+				class="swiper-box"
+				:current="swiperCurrent"
+				@transition="transition"
+				@animationfinish="animationfinish"
+			>
+				<swiper-item v-for="(s, i) in list.length" :key="i" class="swiper-item">
+					<scroll-view
+						v-if="orderData.length !== 0"
+						scroll-y
+						style="height: 100%;width: 100%;"
+						@scrolltolower="reachBottom"
+					>
+						<view class="page-box">
+							<view class="order" v-for="(res, index) in orderData" :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.orderSn }}</view>
+										<u-icon
+											name="arrow-right"
+											color="rgb(203,203,203)"
+											:size="26"
+										></u-icon>
+									</view>
+									<view class="right">{{ res.orderStatusText }}</view>
+								</view>
+								<view
+									class="item"
+									v-for="(item, index) in res.goodsList"
+									:key="index"
+								>
+									<view class="left">
+										<image :src="item.picUrl" mode="aspectFill"></image>
+									</view>
+									<view class="content">
+										<view class="title u-line-2">{{ item.goodsName }}</view>
+										<view class="type">{{ item.type }}</view>
+										<view
+											v-for="(item1, index1) in item.specifications.length"
+											:key="index1"
+											class="delivery-time"
+										>
+											{{ item.specifications[index1] }}
+										</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=""></view>
+									<view class="evaluate btn">删除订单</view>
+								</view>
+							</view>
+							<u-loadmore
+								:status="status"
+								bgColor="#f2f2f2"
+								style="padding: 20rpx 0;"
+							></u-loadmore>
+						</view>
+					</scroll-view>
+
+					<!-- 无订单 -->
+					<scroll-view v-else scroll-y style="height: 100%;width: 100%;">
+						<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 setup lang="ts">
+import { ref, computed } from 'vue'
+import { getOrderData } from '@/api/index'
+
+let listQuery = ref({
+	showType: 0,
+	page: 1,
+	limit: 10
+})
+let swiperTabs = ref()
+let orderData = ref([] as any)
+let total = ref(0)
+let list = ref([
+	{
+		name: '待推送',
+	},
+	{
+		name: '待生成',
+	},
+	{
+		name: '待发货',
+	},
+	{
+	name: '已完成',
+	// count: 12,
+	}
+])
+let current = ref(0)
+let swiperCurrent = ref(0)
+let status = ref('loadmore')
+
+	// 价格小数
+let priceDecimal = computed(() => {
+		return (val: any) => {
+			if (val !== parseInt(val)) return val.slice(-2);
+			else return '00';
+		};
+	})
+	// 价格整数
+let priceInt = computed(() => {
+		return (val: any) => {
+			if (val !== parseInt(val)) return val.split('.')[0];
+			else return val;
+		};
+	})
+
+let reachBottom = () => {
+	// 判断是否还有下一页数据
+	if (listQuery.value.page * listQuery.value.limit >= total.value) return (status.value = 'nomore');
+	// // 判断是否正在请求其它数据，如果是，则不发起额外的请求
+	if (status.value === 'loading') return;
+	listQuery.value.page += 1;
+	getOrderList();
+}
+
+	// 总价
+let totalPrice = (item: any) => {
+		let price = 0;
+		item.map((val: any) => {
+			price += parseFloat(val.price);
+		});
+		return price.toFixed(2);
+	}
+	// 总件数
+let totalNum = (item: any) => {
+		let num = 0;
+		item.map((val: any) => {
+			num += val.number;
+		});
+		return num;
+	}
+	// tab栏切换
+let change = (index: any) => {
+		swiperCurrent.value = index;
+		listQuery.value.showType = index
+		orderData.value = []
+		getOrderList();
+	}
+// swiper-item 的位置发生改变时会触发
+let transition = (data: any) => {
+		let dx = data.detail.dx
+		swiperTabs.value?.setDx(dx);
+	}
+// 动画结束时会触发 animationfinish 事件
+let animationfinish = (data: any) => {
+		let currentNum = data.detail.current
+		console.log(currentNum);
+		swiperTabs.value?.setFinishCurrent(currentNum);
+		swiperCurrent.value = currentNum;
+		current.value = currentNum;
+	}
+
+	// 页面数据
+let getOrderList = () => {
+	status.value = 'loading';
+	getOrderData(listQuery.value).then((res: any) => {
+		if(res.data.code === 200) {
+			if (res.data.data.total > 10) status.value = 'loadmore';
+			else status.value = 'nomore';
+			total.value = res.data.data.total
+			orderData.value = [...orderData.value, ...res.data.data.list];
+		}
+		console.log(res);
+	})
+}
+	getOrderList()
+</script>
+
+<style>
+/* #ifndef H5 */
+page {
+	/* height: 100%; */
+	/* background-color: #f2f2f2; */
+}
+/* #endif */
+</style>
+
+<style lang="scss" scoped>
+.order {
+	width: 710rpx;
+	background-color: #ffffff;
+	margin: 20rpx auto;
+	border-radius: 20rpx;
+	box-sizing: border-box;
+	padding: 20rpx;
+	font-size: 28rpx;
+	.top {
+		display: flex;
+		justify-content: space-between;
+		.left {
+			display: flex;
+			align-items: center;
+			.store {
+				margin: 0 10rpx;
+				font-size: 26rpx;
+				font-weight: bold;
+			}
+		}
+		.right {
+			color: $u-type-warning-dark;
+		}
+	}
+	.item {
+		display: flex;
+		margin: 20rpx 0 0;
+		.left {
+			margin-right: 20rpx;
+			image {
+				width: 200rpx;
+				height: 200rpx;
+				border-radius: 10rpx;
+			}
+		}
+		.content {
+			width: 45%;
+			.title {
+				font-size: 28rpx;
+				line-height: 50rpx;
+			}
+			.type {
+				margin: 10rpx 0;
+				font-size: 24rpx;
+				color: $u-tips-color;
+			}
+			.delivery-time {
+				color: #e5d001;
+				font-size: 24rpx;
+			}
+		}
+		.right {
+			margin-left: 10rpx;
+			padding-top: 20rpx;
+			text-align: right;
+			.decimal {
+				font-size: 24rpx;
+				margin-top: 4rpx;
+			}
+			.number {
+				color: $u-tips-color;
+				font-size: 24rpx;
+			}
+		}
+	}
+	.total {
+		margin-top: 20rpx;
+		text-align: right;
+		font-size: 24rpx;
+		.total-price {
+			font-size: 32rpx;
+		}
+	}
+	.bottom {
+		display: flex;
+		margin-top: 40rpx;
+		padding: 0 10rpx;
+		justify-content: space-between;
+		align-items: center;
+		.btn {
+			line-height: 52rpx;
+			width: 160rpx;
+			border-radius: 26rpx;
+			border: 2rpx solid $u-border-color;
+			font-size: 26rpx;
+			text-align: center;
+			color: $u-type-info-dark;
+		}
+		.evaluate {
+			color: $u-type-warning-dark;
+			border-color: $u-type-warning-dark;
+		}
+	}
+}
+.centre {
+	text-align: center;
+	margin: 200rpx auto;
+	font-size: 32rpx;
+	image {
+		width: 164rpx;
+		height: 164rpx;
+		border-radius: 50%;
+		margin-bottom: 20rpx;
+	}
+	.tips {
+		font-size: 24rpx;
+		color: #999999;
+		margin-top: 20rpx;
+	}
+	.btn {
+		margin: 80rpx auto;
+		width: 200rpx;
+		border-radius: 32rpx;
+		line-height: 64rpx;
+		color: #ffffff;
+		font-size: 26rpx;
+		background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
+	}
+}
+.wrap {
+	display: flex;
+	flex-direction: column;
+	height: calc(100vh - var(--window-top));
+	width: 100%;
+}
+.swiper-box {
+	flex: 1;
+}
+.swiper-item {
+	height: 100%;
+}
+</style>

src/pages/profile/index.vue

 <template>
 	<view class="profile-container">
-		<view class="profile-info" @tap="my">
+		<view class="profile-info" @tap="toLogin">
 			<view class="profile-avatar">
 				<image src="https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/logo/logo.png" />
 			</view>
@@ -13,7 +13,7 @@
 					<view class="order-more" @tap="showAllOrder">全部</view>
 				</template>
 				<uni-grid
-					:column="5"
+					:column="4"
 					:show-border="false"
 					:square="false"
 					@change="handleOrderTypeChange"
@@ -78,7 +78,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-const my = () => {
+const toLogin = () => {
 	uni.navigateTo({
 		url: '../login/login',
 	});
@@ -87,31 +87,25 @@ const my = () => {
 const orderBtnList = ref([
 	{
 		url: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/order/payment.png',
-		text: '待付款',
+		text: '待推送',
 		badge: 1,
 		type: 'error',
 	},
 	{
 		url: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/order/daifahuo.png',
-		text: '待发货',
+		text: '待生成',
 		badge: 1,
 		type: 'error',
 	},
 	{
 		url: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/order/daishouhuo.png',
-		text: '待收货',
+		text: '待发货',
 		badge: 1,
 		type: 'error',
 	},
 	{
 		url: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/order/daipingjia.png',
-		text: '待评价',
-		badge: 1,
-		type: 'error',
-	},
-	{
-		url: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/order/shouhou.png',
-		text: '售后',
+		text: '已完成',
 		badge: 1,
 		type: 'error',
 	},
@@ -146,7 +140,8 @@ const expandBtnList = ref([
 
 const handleOrderTypeChange = (e: any) => {
 	const index = e.detail.index;
-	uni.navigateTo({ url: '/pages/order/index?orderType=' + index });
+	// uni.navigateTo({ url: '/pages/order/index?orderType=' + index });
+	uni.navigateTo({ url: '/pages/order/orderList' });
 	// switch (index) {
 	//   case 0:
 	//     console.log('待付款')

src/pages/shop/index.vue

-<template>
-
-</template>
-
-<script>
-export default {
-  name: "index"
-}
-</script>
-
-<style scoped>
-
-</style>

src/utils/config.ts

 const CONFIG: any = {
 	// 开发环境配置
 	development: {
-		assetsPath: 'http://192.168.2.210:8080', // 静态资源路径
-		baseUrl: 'http://192.168.0.23:80', // 后台接口请求地址
-		hostUrl: 'http://192.168.2.210:8080', // H5地址(前端运行地址)
+		assetsPath: 'http://192.168.0.23', // 静态资源路径
+		baseUrl: 'http://192.168.0.23', // 后台接口请求地址
+		hostUrl: 'http://192.168.0.23', // H5地址(前端运行地址)
 		websocketUrl: '', // websocket服务端地址
 	},
 	// 生产环境配置
 	production: {
-		assetsPath: 'http://192.168.0.23:80', // 静态资源路径
-		baseUrl: 'http://192.168.0.23:80', // 后台接口请求地址
+		assetsPath: '', // 静态资源路径
+		baseUrl: '', // 后台接口请求地址
 		// baseUrl: 'https://api.test.siccat.com/api/graphql',
-		hostUrl: 'http://192.168.0.23:80', // H5地址(前端运行地址)
+		hostUrl: '', // H5地址(前端运行地址)
 		websocketUrl: '', // websocket服务端地址
-	}
- 
+	},
 };
 export default CONFIG[process.env.NODE_ENV];

src/utils/request.ts

@@ -9,7 +9,7 @@ function request(url: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE', data?:
 		if (uni.getStorageSync('token') !== undefined && uni.getStorageSync('token') !== '') {
 			header = {
 				'content-type': 'application/json',
-				'Authorization': uni.getStorageSync('token'),
+				Authorization: uni.getStorageSync('token'),
 			};
 		} else {
 			let pages = getCurrentPages();
@@ -35,12 +35,12 @@ function request(url: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE', data?:
 				uni.hideLoading();
 				if (res.data.code == 200) {
 					resolve(res);
-				} else if (res.data.code == 501) {
-					console.log(res);
+				} else if (res.data.code == 501 || res.data.code == 401) {
 					nextTick(() => {
 						uni.reLaunch({
 							url: '/pages/login/login',
 							success() {
+								// uni.clearStorage();
 								uni.showToast({
 									title: res.data.msg,
 									icon: 'none',
@@ -48,7 +48,7 @@ function request(url: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE', data?:
 							},
 							fail(err) {
 								console.log(err);
-							}
+							},
 						});
 					});
 				} else {