Generating commit message...

mini-program/pages/animal/detail.vue

@@ -0,0 +1,178 @@
+<template>
+  <view class="container">
+    <!-- 动物图片轮播 -->
+    <swiper class="animal-swiper" :indicator-dots="true">
+      <swiper-item v-for="(img, index) in animal.images" :key="index">
+        <image :src="img" mode="aspectFill" class="swiper-image"></image>
+      </swiper-item>
+    </swiper>
+
+    <!-- 动物基本信息 -->
+    <view class="animal-info">
+      <text class="name">{{ animal.name }}</text>
+      <view class="meta">
+        <text class="species">{{ animal.species }}</text>
+        <text class="price">¥{{ animal.price }}</text>
+      </view>
+      <text class="location">{{ animal.location }}</text>
+    </view>
+
+    <!-- 动物详情 -->
+    <view class="section">
+      <text class="section-title">动物介绍</text>
+      <text class="description">{{ animal.description }}</text>
+    </view>
+
+    <!-- 认养信息 -->
+    <view class="section">
+      <text class="section-title">认养说明</text>
+      <text class="adoption-info">{{ animal.adoptionInfo }}</text>
+    </view>
+
+    <!-- 操作按钮 -->
+    <view class="action-bar">
+      <button class="btn adopt" @click="handleAdopt">立即认养</button>
+      <button class="btn contact" @click="handleContact">联系管理员</button>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      animal: {
+        id: 1,
+        name: '小羊驼',
+        species: '羊驼',
+        price: 1000,
+        location: '西藏牧场',
+        images: [
+          '/static/animals/alpaca1.jpg',
+          '/static/animals/alpaca2.jpg'
+        ],
+        description: '这是一只可爱的羊驼，性格温顺，喜欢与人互动。',
+        adoptionInfo: '认养后您将获得：\n1. 专属认养证书\n2. 定期照片和视频\n3. 牧场参观机会'
+      }
+    }
+  },
+  methods: {
+    handleAdopt() {
+      uni.showModal({
+        title: '确认认养',
+        content: '确定要认养这只可爱的' + this.animal.name + '吗？',
+        success: (res) => {
+          if (res.confirm) {
+            uni.showToast({
+              title: '认养成功',
+              icon: 'success'
+            })
+          }
+        }
+      })
+    },
+    handleContact() {
+      uni.makePhoneCall({
+        phoneNumber: '13800138000'
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  padding-bottom: 120rpx;
+}
+
+.animal-swiper {
+  height: 400rpx;
+}
+
+.swiper-image {
+  width: 100%;
+  height: 100%;
+}
+
+.animal-info {
+  padding: 30rpx;
+}
+
+.name {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333;
+}
+
+.meta {
+  display: flex;
+  justify-content: space-between;
+  margin: 20rpx 0;
+}
+
+.species {
+  font-size: 28rpx;
+  color: #666;
+}
+
+.price {
+  font-size: 28rpx;
+  color: #ff9500;
+  font-weight: bold;
+}
+
+.location {
+  font-size: 26rpx;
+  color: #999;
+}
+
+.section {
+  padding: 30rpx;
+  border-top: 1rpx solid #eee;
+}
+
+.section-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 20rpx;
+}
+
+.description, .adoption-info {
+  font-size: 28rpx;
+  color: #666;
+  line-height: 1.6;
+}
+
+.adoption-info {
+  white-space: pre-line;
+}
+
+.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;
+}
+
+.adopt {
+  background-color: #ff2d55;
+  color: #fff;
+}
+
+.contact {
+  background-color: #fff;
+  color: #ff2d55;
+  border: 1rpx solid #ff2d55;
+}
+</style>