本次系统实现主要负责前端前端功能的实现。其中系统前端主要分为三大部分，首页，教练列表页，我的页面。
- 首页
首页的实现效果如图
1.会员卡组件
首页的Vip会员卡部分，团课活动的DataPicker，团课选择都采用了组件化封装的方式，接收方式为父子组件传参模式具体代码如下。
|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| <template> <!-- 卡片横向排列 --> <view class="card-section"> <!-- 动态渲染卡片 --> <view class="card" v-for="card in cardData" :key="card.id" > <view class="card-title">{ { card.name }}</view> <view class="card-price">￥{ { card.price }}</view> <button class="card-button" @click="handlePurchase(card.id)" > 立即抢购 </button> </view> </view> </template> <script setup> import { defineProps } from "vue"; // 接收父组件传递的数据 defineProps({ cardData: { type: Array, required: true, // 必填属性 }, }); // 处理抢购事件 const handlePurchase = (id) => { console.log(`抢购商品ID: ${id}`); }; </script> |
此处可以通过外界的数据传入实现数据的动态生成。
- 日期组件DatePicker
日期组件DatePicker主要实现的效果为能够左右滑动的一个日期组件，并且能够显示一周内的数据。点击选中后能够传给父组件进行以日期为条件的条件查询，查询到该日期下的团课数据，并且能够点击预约进入团课详情页面。通过对dom的操作，能够实现点击滑动的丝滑操作，使用js实现的。
|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| <template> <view class="data-pick scroll-container"> <!-- 日期项 --> <view class="date-item" v-for="(item, index) in weekDates" :key="index" :id="`date-{index}\`" :class="{ active: selectedDate === item.date }" @click="handleDateClick(item.date, index)" \> \