完善团课相关页面交互，完成团课列表页基础后端交互。（后端连接至服务器，版本为DEV分支版本）

2026-06-13 17:11:36 +08:00
parent b345ceeb42
commit 96b8fd2534
16 changed files with 2760 additions and 384 deletions
@@ -0,0 +1,114 @@
+<template>
+  <view class="tab-page__header">
+    <view v-if="showBack" :class="['tab-page__back-btn', { 'tab-page__back-btn--animate': isAnimating }]" @tap="goBack">
+      <text class="tab-page__back-icon">‹</text>
+    </view>
+    <view class="tab-page__title-wrap">
+      <text class="tab-page__title">{{ title }}</text>
+      <text class="tab-page__subtitle">{{ subtitle }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '课程'
+  },
+  subtitle: {
+    type: String,
+    default: '精品团课 · 私教 · 线上课'
+  },
+  showBack: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const isAnimating = ref(false)
+
+onMounted(() => {
+  if (props.showBack) {
+    isAnimating.value = true
+  }
+})
+
+function goBack() {
+  uni.navigateBack({
+    fail: () => {
+      uni.switchTab({
+        url: '/pages/index/index'
+      })
+    }
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.tab-page__header {
+  padding: 48rpx 32rpx 16rpx;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.tab-page__back-btn {
+  width: 48rpx;
+  height: 64rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 16rpx;
+  background: rgba(0, 0, 0, 0.06);
+  border-radius: 16rpx;
+  opacity: 0;
+  transform: translateX(120rpx);
+  transition: none;
+  z-index: 1;
+}
+
+.tab-page__back-btn--animate {
+  animation: slideInFromRight 0.4s ease-out forwards;
+}
+
+@keyframes slideInFromRight {
+  0% {
+    opacity: 0;
+    transform: translateX(120rpx);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.tab-page__back-icon {
+  font-size: 36rpx;
+  color: $text-dark;
+  font-weight: bold;
+  line-height: 1;
+}
+
+.tab-page__title-wrap {
+  flex: 1;
+  position: relative;
+  z-index: 2;
+}
+
+.tab-page__title {
+  display: block;
+  font-size: 40rpx;
+  font-weight: $font-weight-bold;
+  color: $text-dark;
+}
+
+.tab-page__subtitle {
+  display: block;
+  margin-top: 8rpx;
+  font-size: 24rpx;
+  color: $text-muted;
+}
+</style>