底部组件封装

components/bottom-button/bottom-button.vue

@@ -0,0 +1,126 @@
+<template>
+  <view class="bottom-button" :class="buttonClass" @click="handleClick">
+    <text class="button-text">{{ title }}</text>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'BottomButton',
+  props: {
+    // 按钮标题
+    title: {
+      type: String,
+      default: '确认'
+    },
+    // 按钮类型：primary(主要), secondary(次要), danger(危险)
+    type: {
+      type: String,
+      default: 'primary',
+      validator: value => ['primary', 'secondary', 'danger'].includes(value)
+    },
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 自定义样式类
+    customClass: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    buttonClass() {
+      return [
+        'bottom-button',
+        `bottom-button--${this.type}`,
+        {
+          'bottom-button--disabled': this.disabled
+        },
+        this.customClass
+      ]
+    }
+  },
+  methods: {
+    handleClick() {
+      if (this.disabled) {
+        return
+      }
+      this.$emit('click')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bottom-button {
+  position: fixed;
+  bottom: 40rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 600rpx;
+  height: 100rpx;
+  border-radius: 50rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+  transition: all 0.3s ease;
+  
+  .button-text {
+    color: #FFFFFF;
+    font-size: 36rpx;
+    font-weight: bold;
+    text-align: center;
+  }
+  
+  // 主要按钮样式（默认）
+  &--primary {
+    background-color: #8B2E2E;
+    box-shadow: 0 8rpx 20rpx rgba(139, 46, 46, 0.3);
+    
+    &:active {
+      background-color: #7A2A2A;
+      transform: translateX(-50%) scale(0.98);
+    }
+  }
+  
+  // 次要按钮样式
+  &--secondary {
+    background-color: #6C757D;
+    box-shadow: 0 8rpx 20rpx rgba(108, 117, 125, 0.3);
+    
+    &:active {
+      background-color: #5A6268;
+      transform: translateX(-50%) scale(0.98);
+    }
+  }
+  
+  // 危险按钮样式
+  &--danger {
+    background-color: #DC3545;
+    box-shadow: 0 8rpx 20rpx rgba(220, 53, 69, 0.3);
+    
+    &:active {
+      background-color: #C82333;
+      transform: translateX(-50%) scale(0.98);
+    }
+  }
+  
+  // 禁用状态
+  &--disabled {
+    background-color: #CCCCCC !important;
+    box-shadow: none !important;
+    cursor: not-allowed;
+    
+    .button-text {
+      color: #999999;
+    }
+    
+    &:active {
+      transform: translateX(-50%) !important;
+    }
+  }
+}
+</style> 

pages/pray/pray.vue

@@ -72,9 +72,11 @@
         </view>
       </view>
       <!-- 敬香按钮 -->
-      <view class="incense-button" @click="submitPrayer">
-        <text class="button-text">敬香</text>
-      </view>
+      <bottom-button 
+        title="敬香" 
+        type="primary" 
+        @click="submitPrayer"
+      />
     </view>
   </view>
 </template>
@@ -82,11 +84,13 @@
 <script>
 import CommonEnum from "../../enum/common";
 import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
+import BottomButton from "../../components/bottom-button/bottom-button.vue";
 import { submitPrayer } from "@/api/pray/pray";
 
 export default {
   components: {
     CustomNavbar,
+    BottomButton,
   },
   data() {
     return {
@@ -458,26 +462,4 @@ page {
     color: #999;
   }
 }
-
-.incense-button {
-  position: fixed;
-  bottom: 40rpx;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 600rpx;
-  height: 100rpx;
-  background-color: #8B2E2E;
-  border-radius: 50rpx;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 10;
-  
-  .button-text {
-    color: #FFFFFF;
-    font-size: 36rpx;
-    font-weight: bold;
-    text-align: center;
-  }
-}
 </style>