fix bugs

components/confirm-modal/confirm-modal.vue

@@ -0,0 +1,119 @@
+<template>
+  <view class="modal-mask" v-if="show" @click="handleMaskClick">
+    <view class="modal-container" @click.stop>
+      <view class="modal-title">{{ title }}</view>
+      <view class="modal-content">{{ content }}</view>
+      <view class="modal-footer">
+        <view class="modal-btn cancel-btn" @click="handleCancel">{{ cancelText }}</view>
+        <view class="modal-btn confirm-btn" @click="handleConfirm">{{ confirmText }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'ConfirmModal',
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: '提示'
+    },
+    content: {
+      type: String,
+      default: ''
+    },
+    cancelText: {
+      type: String,
+      default: '取消'
+    },
+    confirmText: {
+      type: String,
+      default: '确定'
+    },
+    maskClose: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    handleMaskClick() {
+      if (this.maskClose) {
+        this.$emit('cancel');
+      }
+    },
+    handleCancel() {
+      this.$emit('cancel');
+    },
+    handleConfirm() {
+      this.$emit('confirm');
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.modal-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+}
+
+.modal-container {
+  width: 600rpx;
+  background-color: #fff;
+  border-radius: 24rpx;
+  overflow: hidden;
+}
+
+.modal-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333333;
+  text-align: center;
+  padding: 50rpx 30rpx 30rpx;
+}
+
+.modal-content {
+  font-size: 28rpx;
+  color: #666666;
+  text-align: center;
+  padding: 0 30rpx 50rpx;
+  line-height: 1.6;
+}
+
+.modal-footer {
+  display: flex;
+  border-top: 1rpx solid #eeeeee;
+}
+
+.modal-btn {
+  flex: 1;
+  height: 100rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32rpx;
+}
+
+.cancel-btn {
+  color: #666666;
+  border-right: 1rpx solid #eeeeee;
+}
+
+.confirm-btn {
+  color: #C93639;
+  font-weight: bold;
+}
+</style>

components/custom-navbar/custom-navbar.vue

@@ -0,0 +1,101 @@
+<template>
+  <view class="custom-navbar" :style="{ height: navHeight + 'px', paddingTop: statusBarHeight + 'px' }">
+    <view class="navbar-content" :style="{ height: contentHeight + 'px' }">
+      <view class="navbar-left" @click="handleBack" v-if="showBack">
+        <text class="back-icon">&#xe601;</text>
+      </view>
+      <view class="navbar-title">{{ title }}</view>
+      <view class="navbar-right">
+        <slot name="right"></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'CustomNavbar',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    showBack: {
+      type: Boolean,
+      default: true
+    },
+    backgroundColor: {
+      type: String,
+      default: '#C93639'
+    }
+  },
+  data() {
+    return {
+      statusBarHeight: 0,
+      contentHeight: 44,
+      navHeight: 0
+    };
+  },
+  mounted() {
+    // 获取状态栏高度
+    const systemInfo = uni.getSystemInfoSync();
+    this.statusBarHeight = systemInfo.statusBarHeight;
+    this.navHeight = this.statusBarHeight + this.contentHeight;
+  },
+  methods: {
+    handleBack() {
+      uni.navigateBack({
+        delta: 1
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.custom-navbar {
+  width: 100%;
+  background-color: #C93639;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+}
+
+.navbar-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 30rpx;
+  position: relative;
+}
+
+.navbar-left {
+  width: 60rpx;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.back-icon {
+  font-size: 44rpx;
+  color: #fff;
+}
+
+.navbar-title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #fff;
+}
+
+.navbar-right {
+  width: 60rpx;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+</style>

components/custom-tabs/custom-tabs.vue

@@ -0,0 +1,89 @@
+<template>
+  <view class="tabs-container">
+    <view class="tabs-wrapper">
+      <view
+        v-for="(tab, index) in tabs"
+        :key="index"
+        class="tab-item"
+        :class="{ active: currentIndex === index }"
+        @click="handleTabClick(index)"
+      >
+        <text class="tab-text">{{ tab }}</text>
+        <view class="tab-line" v-if="currentIndex === index"></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'CustomTabs',
+  props: {
+    tabs: {
+      type: Array,
+      default: () => []
+    },
+    current: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      currentIndex: this.current
+    };
+  },
+  watch: {
+    current(val) {
+      this.currentIndex = val;
+    }
+  },
+  methods: {
+    handleTabClick(index) {
+      this.currentIndex = index;
+      this.$emit('change', index);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.tabs-container {
+  background-color: #fff;
+}
+
+.tabs-wrapper {
+  display: flex;
+  align-items: center;
+  padding: 0 30rpx;
+}
+
+.tab-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 30rpx 0;
+  position: relative;
+}
+
+.tab-text {
+  font-size: 32rpx;
+  color: #666666;
+  transition: all 0.3s;
+}
+
+.tab-item.active .tab-text {
+  color: #333333;
+  font-weight: bold;
+}
+
+.tab-line {
+  width: 60rpx;
+  height: 6rpx;
+  background-color: #C93639;
+  border-radius: 3rpx;
+  position: absolute;
+  bottom: 0;
+}
+</style>