订单

components/SelectUser.vue

@@ -0,0 +1,134 @@
+<template>
+  <view class="select-user-mask" v-if="visible">
+    <view class="select-user-container">
+      <!-- 标题栏 -->
+      <view class="header">
+        <text>{{ title }}</text>
+        <text class="close" @click="close">×</text>
+      </view>
+
+      <!-- 搜索框 -->
+      <view class="search-box">
+        <input v-model="keyword" placeholder="姓名、工号" @input="onSearch" />
+      </view>
+
+      <!-- 列表 -->
+      <scroll-view class="user-list" scroll-y>
+        <view v-for="item in filteredList" :key="item.id" class="user-item" @click="selectUser(item)">
+          <view class="radio" :class="{ checked: isSelected(item) }"></view>
+          <text>{{ item.name }}（{{ item.department }}）</text>
+        </view>
+      </scroll-view>
+
+      <!-- 底部按钮 -->
+      <view class="footer">
+        <button @click="confirm">{{ confirmText }}</button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'SelectUser',
+  props: {
+    visible: { type: Boolean, default: false },
+    list: { type: Array, default: () => [] },
+    title: { type: String, default: '选择' },
+    multiple: { type: Boolean, default: false },
+    confirmText: { type: String, default: '指派' }
+  },
+  data() {
+    return {
+      keyword: '',
+      selected: []
+    }
+  },
+  computed: {
+    filteredList() {
+      if (!this.keyword) return this.list;
+      return this.list.filter(item => item.name.includes(this.keyword) || item.id.includes(this.keyword));
+    }
+  },
+  methods: {
+    close() {
+      this.$emit('update:visible', false);
+    },
+    selectUser(item) {
+      if (this.multiple) {
+        if (this.isSelected(item)) {
+          this.selected = this.selected.filter(i => i.id !== item.id);
+        } else {
+          this.selected.push(item);
+        }
+      } else {
+        this.selected = [item];
+      }
+    },
+    isSelected(item) {
+      return this.selected.some(i => i.id === item.id);
+    },
+    confirm() {
+      this.$emit('confirm', this.selected);
+      this.close();
+    },
+    onSearch() {
+      // 可以加节流优化
+    }
+  }
+}
+</script>
+
+<style scoped>
+.select-user-mask {
+  position: fixed;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  background: rgba(0,0,0,0.3);
+  display: flex; justify-content: center; align-items: center;
+}
+.select-user-container {
+  width: 80%;
+  max-height: 70%;
+  background: #fff;
+  border-radius: 12px;
+  overflow: hidden;
+  display: flex; flex-direction: column;
+}
+.header {
+  padding: 15px;
+  font-size: 18px;
+  font-weight: bold;
+  display: flex; justify-content: space-between;
+  border-bottom: 1px solid #eee;
+}
+.close {
+  font-size: 22px; color: #999;
+}
+.search-box {
+  padding: 10px;
+  border-bottom: 1px solid #eee;
+}
+.search-box input {
+  width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 6px;
+}
+.user-list {
+  flex: 1; overflow-y: auto;
+}
+.user-item {
+  padding: 12px 15px; display: flex; align-items: center; border-bottom: 1px solid #eee;
+}
+.radio {
+  width: 18px; height: 18px; border: 1px solid #ccc; border-radius: 50%; margin-right: 10px;
+}
+.radio.checked {
+  background: #2d8cf0;
+  border-color: #2d8cf0;
+}
+.footer {
+  padding: 12px; border-top: 1px solid #eee;
+}
+.footer button {
+  width: 100%; height: 40px; background: #2d8cf0; color: #fff; border-radius: 6px; border: none;
+}
+</style>