first commit

property-uniapp-project/pages/online-repair/personalSelectPoject.vue

@@ -0,0 +1,179 @@
+<template>
+  <view class="project-container">
+    <!-- 搜索框 -->
+    <view class="search-bar">
+      <input type="text" placeholder="请输入关键字搜索" v-model="searchKey" />
+      <uni-icons type="search" size="18"></uni-icons>
+    </view>
+
+    <!-- 分类+项目 -->
+    <view class="category-wrap">
+      <!-- 左侧分类 -->
+      <scroll-view scroll-y class="category-left">
+        <view 
+          class="category-item" 
+          :class="{ active: activeCategory === item.id }"
+          @click="selectCategory(item)"
+          v-for="item in categoryList" 
+          :key="item.id"
+        >
+          {{ item.name }}
+        </view>
+      </scroll-view>
+
+      <!-- 右侧项目 -->
+      <scroll-view scroll-y class="category-right">
+        <view 
+          class="project-item"
+          :class="{ active: selectedProject.id === item.id }"
+          @click="selectProject(item)"
+          v-for="item in currentProjectList" 
+          :key="item.id"
+        >
+          {{ item.name }}
+        </view>
+      </scroll-view>
+    </view>
+
+    <!-- 确认按钮 -->
+    <button class="confirm-btn" @click="confirmSelect">确认</button>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+// import { uniShowToast, uniNavigateBack } from '@dcloudio/uni-app'
+
+// 分类列表（匹配截图：家具/电路/水暖/门频/电器）
+const categoryList = ref([
+  { id: 1, name: '家具' },
+  { id: 2, name: '电路' },
+  { id: 3, name: '水暖' },
+  { id: 4, name: '门频' },
+  { id: 5, name: '电器' }
+])
+
+// 项目列表（匹配截图：床/沙发/柜子/椅子等）
+const projectList = ref([
+  { id: 101, categoryId: 1, name: '床' },
+  { id: 102, categoryId: 1, name: '沙发' },
+  { id: 103, categoryId: 1, name: '柜子' },
+  { id: 104, categoryId: 1, name: '椅子' },
+  { id: 201, categoryId: 2, name: '插座' },
+  { id: 202, categoryId: 2, name: '开关' },
+  { id: 301, categoryId: 3, name: '水龙头' },
+  { id: 302, categoryId: 3, name: '水管' }
+])
+
+// 选中状态
+const activeCategory = ref(1) // 默认选中家具
+const selectedProject = ref({}) // 选中的项目
+const searchKey = ref('')
+
+// 筛选当前分类的项目
+const currentProjectList = computed(() => {
+  let list = projectList.value.filter(item => item.categoryId === activeCategory.value)
+  if (searchKey.value) {
+    list = list.filter(item => item.name.includes(searchKey.value))
+  }
+  return list
+})
+
+// 选择分类
+const selectCategory = (item) => {
+  activeCategory.value = item.id
+  selectedProject.value = {} // 切换分类清空选中项目
+}
+
+// 选择项目
+const selectProject = (item) => {
+  selectedProject.value = item
+}
+
+// 确认选择
+const confirmSelect = () => {
+  if (!selectedProject.value.id) {
+    uni.showToast({ title: '请选择维修项目', icon: 'none' })
+    return
+  }
+  
+  // 获取分类名称
+  const categoryName = categoryList.value.find(c => c.id === activeCategory.value).name
+  // 传递给表单页
+  uni.$emit('selectProject', {
+    name: `${categoryName}-${selectedProject.value.name}`
+  })
+  
+  uni.navigateBack({ delta: 1 })
+}
+</script>
+
+<style scoped>
+.project-container {
+  padding: 15px;
+  height: 100vh;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+}
+.search-bar {
+  display: flex;
+  align-items: center;
+  padding: 8px 10px;
+  background: #f5f5f5;
+  border-radius: 6px;
+  margin-bottom: 10px;
+}
+.search-bar input {
+  flex: 1;
+  font-size: 14px;
+}
+.category-wrap {
+  display: flex;
+  flex: 1;
+  margin-bottom: 20px;
+}
+.category-left {
+  width: 80px;
+  height: 100%;
+  background: #f8f8f8;
+  border-radius: 6px 0 0 6px;
+}
+.category-item {
+  padding: 12px 10px;
+  text-align: center;
+  font-size: 14px;
+  border-bottom: 1px solid #eee;
+}
+.category-item.active {
+  background: #fff;
+  color: #007aff;
+  font-weight: bold;
+}
+.category-right {
+  flex: 1;
+  height: 100%;
+  background: #fff;
+  border-radius: 0 6px 6px 0;
+  padding: 10px;
+}
+.project-item {
+  padding: 12px 10px;
+  font-size: 14px;
+  border-bottom: 1px solid #eee;
+}
+.project-item.active {
+  color: #007aff;
+  font-weight: bold;
+}
+.confirm-btn {
+  width: 100%;
+  height: 44px;
+  line-height: 44px;
+  background: #007aff;
+  color: #fff;
+  border-radius: 8px;
+  font-size: 16px;
+}
+</style>