Este curso es el primer proyecto uniapp escrito en vue3 plus TS en toda la red. Encapsula una gran cantidad de sus propias bibliotecas de componentes. El curso comienza desde los conceptos básicos de uni-app y gradualmente implementa el proceso completo de compra de comercio electrónico de acuerdo con a los 9 principales módulos comerciales de comercio electrónico, que cubren recomendaciones populares, clasificación de productos, detalles del producto, inicio de sesión en WeChat, administración de usuarios, administración de direcciones, administración de carritos de compras, administración de pedidos y otras funciones. Incluyendo inicio de sesión de WeChat, pago de WeChat y otros servicios. Un conjunto de códigos para múltiples terminales cubre de manera integral el terminal subprograma WeChat, el terminal H5 y el terminal APP.
Lo que obtendrás después de completar este curso es: la capacidad de desarrollar proyectos de tamaño mediano utilizando uni-app + Vue3
Conejito Xian'er-Módulo de clasificación-día 04
El usuario hace clic en la categoría de primer nivel en el menú de la izquierda para cambiar a la categoría y al producto de segundo nivel correspondientes a la derecha.
Preparación
Efecto de referencia
El espacio publicitario en la página de categoría de producto puede reutilizar el componente del carrusel previamente definido XtxSwiper.
estructura estática
Estructura estática de la página de categoría de producto:src/pages/category/category.vue
<script setup lang="ts">
//
</script>
<template>
<view class="viewport">
<!-- 搜索框 -->
<view class="search">
<view class="input">
<text class="icon-search">女靴</text>
</view>
</view>
<!-- 分类 -->
<view class="categories">
<!-- 左侧：一级分类 -->
<scroll-view class="primary" scroll-y>
<view
v-for="(item, index) in 10"
:key="item"
class="item"
:class="{ active: index === 0 }"
>
<text class="name"> 居家 </text>
</view>
</scroll-view>
<!-- 右侧：二级分类 -->
<scroll-view class="secondary" scroll-y>
<!-- 焦点图 -->
<XtxSwiper class="banner" :list="[]" />
<!-- 内容区域 -->
<view class="panel" v-for="item in 3" :key="item">
<view class="title">
<text class="name">宠物用品</text>
<navigator class="more" hover-class="none">全部</navigator>
</view>
<view class="section">
<navigator
v-for="goods in 4"
:key="goods"
class="goods"
hover-class="none"
:url="`/pages/goods/goods?id=`"
>
<image
class="image"
src="https://yanxuan-item.nosdn.127.net/674ec7a88de58a026304983dd049ea69.jpg"
></image>
<view class="name ellipsis">木天蓼逗猫棍</view>
<view class="price">
<text class="symbol">¥</text>
<text class="number">16.00</text>
</view>
</navigator>
</view>
</view>
</scroll-view>
</view>
</view>
</template>
<style lang="scss">
page {
height: 100%;
overflow: hidden;
}
.viewport {
height: 100%;
display: flex;
flex-direction: column;
}
.search {
padding: 0 30rpx 20rpx;
background-color: #fff;
.input {
display: flex;
align-items: center;
justify-content: space-between;
height: 64rpx;
padding-left: 26rpx;
color: #8b8b8b;
font-size: 28rpx;
border-radius: 32rpx;
background-color: #f3f4f4;
}
}
.icon-search {
&::before {
margin-right: 10rpx;
}
}
/* 分类 */
.categories {
flex: 1;
min-height: 400rpx;
display: flex;
}
/* 一级分类 */
.primary {
overflow: hidden;
width: 180rpx;
flex: none;
background-color: #f6f6f6;
.item {
display: flex;
justify-content: center;
align-items: center;
height: 96rpx;
font-size: 26rpx;
color: #595c63;
position: relative;
&::after {
content: '';
position: absolute;
left: 42rpx;
bottom: 0;
width: 96rpx;
border-top: 1rpx solid #e3e4e7;
}
}
.active {
background-color: #fff;
&::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 8rpx;
height: 100%;
background-color: #27ba9b;
}
}
}
.primary .item:last-child::after,
.primary .active::after {
display: none;
}
/* 二级分类 */
.secondary {
background-color: #fff;
.carousel {
height: 200rpx;
margin: 0 30rpx 20rpx;
border-radius: 4rpx;
overflow: hidden;
}
.panel {
margin: 0 30rpx 0rpx;
}
.title {
height: 60rpx;
line-height: 60rpx;
color: #333;
font-size: 28rpx;
border-bottom: 1rpx solid #f7f7f8;
.more {
float: right;
padding-left: 20rpx;
font-size: 24rpx;
color: #999;
}
}
.more {
&::after {
font-family: 'erabbit' !important;
content: '\e6c2';
}
}
.section {
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 20rpx 0;
.goods {
width: 150rpx;
margin: 0rpx 30rpx 20rpx 0;
&:nth-child(3n) {
margin-right: 0;
}
image {
width: 150rpx;
height: 150rpx;
}
.name {
padding: 5rpx;
font-size: 22rpx;
color: #333;
}
.price {
padding: 5rpx;
font-size: 18rpx;
color: #cf4444;
}
.number {
font-size: 24rpx;
margin-left: 2rpx;
}
}
}
}
</style>Carrusel de renderizado
llamada de interfaz
La función comercial de representar datos del gráfico de carrusel es relativamente simple para el front-end: solo necesita llamar a la interfaz proporcionada por el back-end para mostrar los datos obtenidos.
Nota: Pase el parámetro 2 para identificar el anuncio de la página de categoría de producto.
Dirección de interfaz:/home/banner
Método de solicitud: OBTENER
Parámetros de solicitud:
Consulta:
| Nombre del campo |
Es necesario |
valor por defecto |
Observación |
| sitio de distribución |
No |
1 |
Posición del banner de actividad, 1 representa la página de inicio, 2 representa la página de categoría de producto, el valor predeterminado es 1 |
Clasificación de primer nivel
recuperar datos
Esta interfaz contiene datos de clasificación de primer nivel y de segundo nivel. Los datos de clasificación de segundo nivel deben procesarse primero y luego representarse.
llamada de interfaz
Dirección de interfaz:/categoría/arriba
Método de solicitud: OBTENER
Parámetros de solicitud: ninguno
Solicitar encapsulación
// src/services/category.ts
/**
* 分类列表-小程序
*/
export const getCategoryTopAPI = () => {
return http<CategoryTopItem[]>({
method: 'GET',
url: '/category/top',
})
}declaración de tipo
// src/types/category.d.ts
import type { GoodsItem } from './global'
/** 一级分类项 */
export type CategoryTopItem = {
/** 二级分类集合[ 二级分类项 ] */
children: CategoryChildItem[]
/** 一级分类id */
id: string
/** 一级分类图片集[ 一级分类图片项 ] */
imageBanners: string[]
/** 一级分类名称 */
name: string
/** 一级分类图片 */
picture: string
}
/** 二级分类项 */
export type CategoryChildItem = {
/** 商品集合[ 商品项 ] */
goods: GoodsItem[]
/** 二级分类id */
id: string
/** 二级分类名称 */
name: string
/** 二级分类图片 */
picture: string
}A continuación, primero represente los datos de clasificación de primer nivel en la página combinados con la sintaxis de la plantilla.
Interacción de pestañas
Cuando el usuario hace clic en la clasificación de primer nivel, debe resaltarla, es decir, .activesimplemente agregarle un nombre de clase.
<script setup lang="ts">
import { getCategoryTopAPI } from '@/services/category'
import type { CategoryTopItem } from '@/types/category'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
// 获取分类列表数据
const categoryList = ref<CategoryTopItem[]>([])
const getCategoryTopData = async () => {
const res = await getCategoryTopAPI()
categoryList.value = res.result
}
// 高亮下标
const activeIndex = ref(0)
// 页面加载
onLoad(() => {
getCategoryTopData()
})
</script>
<template>
<view class="viewport">
<!-- 分类 -->
<view class="categories">
<!-- 左侧：一级分类 -->
<scroll-view class="primary" scroll-y>
<view
class="item"
v-for="(item, index) in categoryList"
:key="item.id"
:class="{ active: index === activeIndex }"
@tap="activeIndex = index"
>
{
{ item.name }}
</view>
</scroll-view>
</view>
</view>
</template>Clasificación secundaria
La clasificación de productos de segundo nivel está subordinada a una determinada clasificación de primer nivel, y los datos actuales de la clasificación de segundo nivel se extraen haciendo computedcoincidir el subíndice resaltado .
Código de referencia
<script setup lang="ts">
import { computed } from 'vue'
// ...省略
// 提取当前二级分类数据
const subCategoryList = computed(() => {
return categoryList.value[activeIndex.value]?.children || []
})
</script>
<template>
<view class="viewport">
<!-- ...省略 -->
<!-- 右侧：二级分类 -->
<scroll-view class="secondary" scroll-y>
<!-- 焦点图 -->
<XtxSwiper class="banner" :list="bannerList" />
<!-- 内容区域 -->
<view class="panel" v-for="item in subCategoryList" :key="item.id">
<view class="title">
<text class="name">{
{ item.name }}</text>
<navigator class="more" hover-class="none">全部</navigator>
</view>
<view class="section">
<navigator
v-for="goods in item.goods"
:key="goods.id"
class="goods"
hover-class="none"
:url="`/pages/goods/goods?id=${goods.id}`"
>
<image class="image" :src="goods.picture"></image>
<view class="name ellipsis">{
{ goods.name }}</view>
<view class="price">
<text class="symbol">¥</text>
<text class="number">{
{ goods.price }}</text>
</view>
</navigator>
</view>
</view>
</scroll-view>
</view>
</view>
</template>Después de extraer los datos de clasificación secundaria actuales, el resto es representación de la lista.
pantalla esqueleto
Efecto de referencia
Para conocer los pasos de implementación, consulte la pantalla básica en la página de inicio.
Referencia de código (total)
Página de categoría de producto
<script setup lang="ts">
import { getCategoryTopAPI } from '@/services/category'
import { getHomeBannerAPI } from '@/services/home'
import type { CategoryTopItem } from '@/types/category'
import type { BannerItem } from '@/types/home'
import { onLoad } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'
import PageSkeleton from './components/PageSkeleton.vue'
// 获取轮播图数据
const bannerList = ref<BannerItem[]>([])
const getBannerData = async () => {
const res = await getHomeBannerAPI(2)
bannerList.value = res.result
}
// 获取分类列表数据
const categoryList = ref<CategoryTopItem[]>([])
const activeIndex = ref(0)
const getCategoryTopData = async () => {
const res = await getCategoryTopAPI()
categoryList.value = res.result
}
// 是否数据加载完毕
const isFinish = ref(false)
// 页面加载
onLoad(async () => {
await Promise.all([getBannerData(), getCategoryTopData()])
isFinish.value = true
})
// 提取当前二级分类数据
const subCategoryList = computed(() => {
return categoryList.value[activeIndex.value]?.children || []
})
</script>
<template>
<view class="viewport" v-if="isFinish">
<!-- 搜索框 -->
<view class="search">
<view class="input">
<text class="icon-search">女靴</text>
</view>
</view>
<!-- 分类 -->
<view class="categories">
<!-- 左侧：一级分类 -->
<scroll-view class="primary" scroll-y>
<view
v-for="(item, index) in categoryList"
:key="item.id"
class="item"
:class="{ active: index === activeIndex }"
@tap="activeIndex = index"
>
<text class="name">
{
{ item.name }}
</text>
</view>
</scroll-view>
<!-- 右侧：二级分类 -->
<scroll-view class="secondary" scroll-y>
<!-- 焦点图 -->
<XtxSwiper class="banner" :list="bannerList" />
<!-- 内容区域 -->
<view class="panel" v-for="item in subCategoryList" :key="item.id">
<view class="title">
<text class="name">{
{ item.name }}</text>
<navigator class="more" hover-class="none">全部</navigator>
</view>
<view class="section">
<navigator
v-for="goods in item.goods"
:key="goods.id"
class="goods"
hover-class="none"
:url="`/pages/goods/goods?id=${goods.id}`"
>
<image class="image" :src="goods.picture"></image>
<view class="name ellipsis">{
{ goods.name }}</view>
<view class="price">
<text class="symbol">¥</text>
<text class="number">{
{ goods.price }}</text>
</view>
</navigator>
</view>
</view>
</scroll-view>
</view>
</view>
<!-- 骨架屏 -->
<PageSkeleton v-else />
</template>