Generating commit message...

mini-program/pages/travel/detail.vue

@@ -0,0 +1,167 @@
+<template>
+  <view class="container">
+    <!-- 封面图 -->
+    <image :src="plan.coverImage" mode="widthFix" class="cover-image"></image>
+    
+    <!-- 计划标题和基本信息 -->
+    <view class="plan-header">
+      <text class="title">{{ plan.destination }}</text>
+      <view class="meta">
+        <text class="date">{{ plan.startDate }} - {{ plan.endDate }}</text>
+        <text class="budget">预算: ¥{{ plan.budget }}</text>
+      </view>
+    </view>
+
+    <!-- 行程详情 -->
+    <view class="section">
+      <text class="section-title">行程安排</text>
+      <view class="schedule" v-for="(day, index) in plan.schedule" :key="index">
+        <text class="day">第{{ index + 1 }}天</text>
+        <text class="content">{{ day }}</text>
+      </view>
+    </view>
+
+    <!-- 同行要求 -->
+    <view class="section">
+      <text class="section-title">同行要求</text>
+      <text class="requirements">{{ plan.requirements }}</text>
+    </view>
+
+    <!-- 操作按钮 -->
+    <view class="action-bar">
+      <button class="btn join" @click="handleJoin">加入计划</button>
+      <button class="btn contact" @click="handleContact">联系发起人</button>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      plan: {
+        id: 1,
+        destination: '西藏',
+        startDate: '10月1日',
+        endDate: '10月7日',
+        budget: 5000,
+        coverImage: '/static/travel/tibet.jpg',
+        schedule: [
+          '拉萨市区游览，参观布达拉宫、大昭寺',
+          '前往纳木错，欣赏圣湖美景',
+          '林芝地区游览，参观雅鲁藏布大峡谷',
+          '返回拉萨，自由活动',
+          '日喀则地区游览，参观扎什伦布寺',
+          '珠峰大本营一日游',
+          '返回拉萨，结束行程'
+        ],
+        requirements: '1. 年龄18-35岁\n2. 身体健康，能适应高原环境\n3. 有团队精神，乐于分享'
+      }
+    }
+  },
+  methods: {
+    handleJoin() {
+      uni.showToast({
+        title: '已申请加入',
+        icon: 'success'
+      })
+    },
+    handleContact() {
+      uni.makePhoneCall({
+        phoneNumber: '13800138000'
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  padding-bottom: 100rpx;
+}
+
+.cover-image {
+  width: 100%;
+}
+
+.plan-header {
+  padding: 30rpx;
+}
+
+.title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333;
+}
+
+.meta {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20rpx;
+  color: #666;
+  font-size: 28rpx;
+}
+
+.section {
+  padding: 30rpx;
+  border-top: 1rpx solid #eee;
+}
+
+.section-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 20rpx;
+}
+
+.schedule {
+  margin-bottom: 30rpx;
+}
+
+.day {
+  font-size: 28rpx;
+  color: #007aff;
+  margin-bottom: 10rpx;
+}
+
+.content {
+  font-size: 28rpx;
+  color: #666;
+  line-height: 1.6;
+}
+
+.requirements {
+  font-size: 28rpx;
+  color: #666;
+  white-space: pre-line;
+  line-height: 1.6;
+}
+
+.action-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  padding: 20rpx;
+  background: #fff;
+  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1);
+}
+
+.btn {
+  flex: 1;
+  margin: 0 10rpx;
+  font-size: 28rpx;
+}
+
+.join {
+  background-color: #007aff;
+  color: #fff;
+}
+
+.contact {
+  background-color: #fff;
+  color: #007aff;
+  border: 1rpx solid #007aff;
+}
+</style>