feat:提交代码，完成商贸专区UI开发

src/apis/quickLink.ts

@@ -0,0 +1,16 @@
+import { defHttp } from '~/utils/http'
+import type {PageModel} from "~/apis/model/pageModel";
+import type {HomeProduct} from "~/apis/model/product.model";
+
+enum API {
+    GET_CATEGORY = 'api/store/merchant/category/lst/',
+}
+/**
+ * 店铺分类
+ */
+export function getCategoryList(id) {
+    return defHttp.get({
+        url: API.GET_CATEGORY
+    })
+}
+

src/pages/home/constants.js

@@ -1,4 +1,4 @@
-import { KINGKONGKEY } from '~/apis/model/common.model'
+import { KINGKONGKEY } from '../../apis/model/common.model.ts'
 export const TOP_LAB_ARR = [{
 		title: "精品",
 		checked: true,

src/pages/quick-fuc/business.vue

@@ -1,13 +1,386 @@
 <template>
-	<view class="">111</view>
+	<view class="business-container">
+		<view class="lab-content">
+			<scroll-view scroll-x="true" class="lab-item">
+				<view class="lab-item-x" v-for="(item,index) in tabList" :key="'lab-item-x-'+index">
+					<view class="lab-item-small" @click="onTabClick(index)">
+						<text :class="currentIndex==index?'lab-title':'lab-default-title'">111</text>
+						<view :class="currentIndex==index?'lab-line':'lab-default-line'"></view>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+		<view class="banner-content">
+			<image class="top-banner" src="/static/img/img_banner_dslm.png" mode="aspectFill"></image>
+		</view>
+
+		<view class="fuc-content">
+			<view class="fuc-item" v-for="(item,index) in MU_TABLE_LIST">
+				<text class="item-title">{{item.title}}</text>
+				<text class="item-des">{{item.des}}</text>
+				<image class="item-img" :src="item.icon" mode=""></image>
+			</view>
+		</view>
+
+		<view v-for="(item,index) in goodsList">
+			<view class="vip-content">
+				<image class="vip-bg" src="/static/img/item_smq_bg.png" mode="aspectFill"></image>
+				<view class="left-lab-content">
+					<image class="lab-icon" src="" mode=""></image>
+					<text class="lab-title">会员专区</text>
+					<view class="small-lab">补充养老</view>
+				</view>
+
+				<view class="right-lab-content">
+					<text class="right-tx">进入店铺</text>
+					<image class="right-icon" src="/static/icon/img_jt_right.png" mode="widthFix"></image>
+				</view>
+			</view>
+
+			<view class="goods-scoll-content">
+				<scroll-view scroll-x="true" class="goods-scoll-item">
+					<view class="goods-scoll-item-x" v-for="(item,index) in goodsList"
+						:key="'goods-scoll-item-x-'+index">
+						<view class="goods-item">
+							<image class="goods-img" src="" mode="aspectFill"></image>
+							<text class="goods-title">11</text>
+							<view class="price-content">
+								<text class="goods-des">20</text>
+								<text class="goods-des">pv:0</text>
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+		</view>
+
+
+
+
+	</view>
 </template>
 
 <script setup>
-	
+	import {
+		MU_TABLE_LIST
+	} from "./constants.js"
+	import {  getCategoryList } from '~/apis/quickLink'
+	const currentIndex = ref(0)
+	const tabList = ref([1, 1, 1, 1])
+	const goodsList = ref([1, 1, 1, 1, 1, 1])
+
+
 	onLoad((option) => {
 		console.log("===onLoad");
 	})
+
+	onReachBottom(() => {
+		console.log('到底了。。。')
+	})
+
+	onPullDownRefresh(() => {
+		uni.stopPullDownRefresh()
+	})
+
+
+	function onTabClick(position) {
+		currentIndex.value = position
+	}
+	function getategoryCList(){
+		getCategoryList().then((res)=>{
+			console.log("===res",res);
+		})
+	}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+	.business-container {
+		display: flex;
+		flex-direction: column;
+		min-height: 100VH;
+		background-color: #f8f8f8;
+		box-sizing: border-box;
+
+		.goods-content {
+			display: flex;
+			flex-direction: row;
+			margin-left: 10rpx;
+			margin-right: 10rpx;
+
+
+		}
+
+		.goods-item {
+			display: flex;
+			margin-left: 10rpx;
+			margin-right: 10rpx;
+			width: 230rpx;
+			align-items: center;
+			justify-content: center;
+			flex-direction: column;
+			background-color: #fff;
+			border-radius: 20rpx;
+
+			.goods-img {
+				width: 230rpx;
+				height: 230rpx;
+				border-top-right-radius: 20rpx;
+				border-top-left-radius: 20rpx;
+				background-color: #333;
+			}
+
+			.goods-title {
+				width: 230rpx;
+				font-size: 28rpx;
+				color: #333;
+				margin-top: 10rpx;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				margin-left: 10rpx;
+				margin-right: 10rpx;
+				word-break: break-all;
+				white-space: nowrap;
+			}
+
+			.price-content {
+				margin-top: 10rpx;
+				display: flex;
+				margin-bottom: 20rpx;
+				flex-direction: row;
+				align-items: center;
+				justify-content: space-between;
+				padding-left: 16rpx;
+				padding-right: 16rpx;
+				box-sizing: border-box;
+				width: 100%;
+
+				.price-left {
+					font-size: 28rpx;
+					color: #333;
+				}
+
+				.price-rifht {
+					font-size: 28rpx;
+					color: #333;
+				}
+			}
+
+
+		}
+
+		.vip-content {
+			margin: 20rpx;
+			position: relative;
+			height: 100rpx;
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			box-sizing: border-box;
+
+			.vip-bg {
+				position: absolute;
+				height: 100rpx;
+				width: 710rpx;
+				border-top-right-radius: 20rpx;
+				border-top-left-radius: 20rpx;
+			}
+
+			.right-lab-content {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				flex: 1;
+				z-index: 22;
+				justify-content: flex-end;
+
+				.right-tx {
+					color: #fff;
+					font-size: 26rpx;
+					margin-right: 10rpx;
+				}
+
+				.right-icon {
+					width: 14rpx;
+					height: 10rpx;
+					margin-right: 20rpx;
+				}
+			}
+
+			.left-lab-content {
+				height: 50rpx;
+				background-color: #fff;
+				border-radius: 20rpx;
+				z-index: 222;
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				margin-left: 20rpx;
+
+				.lab-icon {
+					width: 30rpx;
+					height: 30rpx;
+					background-color: #333;
+					margin-left: 10rpx;
+				}
+
+				.lab-title {
+					font-size: 26rpx;
+					color: #333;
+					margin-left: 10rpx;
+				}
+
+				.small-lab {
+					border-radius: 20rpx;
+					background-color: #000;
+					margin-right: 10rpx;
+					color: #fff;
+					font-size: 24rpx;
+					padding-left: 6rpx;
+					padding-right: 6rpx;
+					margin-left: 20rpx;
+				}
+
+			}
+
+		}
+
+		.fuc-content {
+			display: flex;
+			padding-left: 14rpx;
+			padding-right: 14rpx;
+			margin-top: 20rpx;
+			flex-direction: row;
+
+			.fuc-item {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+				background-color: #fff;
+				border-radius: 10rpx;
+				margin-left: 6rpx;
+				margin-right: 6rpx;
+				padding-top: 30rpx;
+				padding-bottom: 30rpx;
+				align-items: center;
+				justify-content: center;
+
+				.item-img {
+					width: 80rpx;
+					height: 80rpx;
+				}
+
+				.item-title {
+					font-size: 30rpx;
+					font-weight: bolder;
+					color: #333;
+					margin-bottom: 10rpx;
+				}
+
+				.item-des {
+					font-size: 24rpx;
+					color: #999;
+					margin-bottom: 40rpx;
+				}
+
+			}
+		}
+
+		.banner-content {
+			background-color: #fff;
+			padding: 20rpx;
+			height: 360rpx;
+			display: flex;
+			flex-direction: column;
+			margin-top: 90rpx;
+			box-sizing: border-box;
+
+			.top-banner {
+				border-radius: 20rpx;
+				background: #999;
+				height: 360rpx;
+				width: 100%;
+			}
+		}
+
+		.goods-scoll-content {
+			width: 100%;
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+
+			.goods-scoll-item {
+				display: flex;
+				flex-direction: row;
+				white-space: nowrap;
+				width: 100%;
+				margin-left: 10rpx;
+				margin-right: 10rpx;
+			}
+
+			.goods-scoll-item-x {
+				display: inline-block;
+				text-align: center;
+				width: 230rpx;
+				margin-right: 16rpx;
+			}
+		}
+
+		.lab-content {
+			width: 100%;
+			height: 90rpx;
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			position: fixed;
+			top: 0;
+			left: 0;
+			background-color: #fff;
+			z-index: 99999;
+
+			.lab-item {
+				display: flex;
+				flex-direction: row;
+				white-space: nowrap;
+				width: 100%;
+			}
+
+			.lab-item-x {
+				display: inline-block;
+				margin-right: 10px;
+				text-align: center;
+			}
+
+			.lab-item-small {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				width: 124rpx;
+
+				.lab-default-title {
+					font-size: 28rpx;
+					margin-bottom: 10rpx;
+				}
+
+				.lab-title {
+					font-size: 32rpx;
+					margin-bottom: 10rpx;
+					color: #FE0032;
+				}
+
+				.lab-line {
+					width: 50rpx;
+					height: 6rpx;
+					background-color: #FE0032;
+					border-radius: 4rpx;
+				}
+
+				.lab-default-line {
+					width: 50rpx;
+					height: 6rpx;
+					border-radius: 4rpx;
+				}
+
+			}
+		}
+	}
 </style>