巡检点上传图片修正

wuye-manager-uniapp/components/stops/stops.vue

@@ -0,0 +1,176 @@
+<template>
+  <view class="steps-vertical">
+    <view class="step-item" v-for="(item, index) in steps" :key="index">
+      <!-- 左侧：圆点 + 竖线 -->
+      <view class="step-left">
+        <!-- 圆点 -->
+        <view class="step-circle" :class="getClass(index)">
+          <!-- 插槽：自定义圆点 -->
+          <slot v-if="$slots.circle" name="circle" :index="index" :status="getStatus(index)">
+          </slot>
+          <view v-else-if="getStatus(index) === 'finish'">
+            <uni-icons type="checkmarkempty" size="15" :color="props.color"></uni-icons>
+          </view>
+          <text v-else-if="getStatus(index) === 'process'">{{ index + 1 }}</text>
+          <text v-else-if="getStatus(index) === 'wait'">{{ index + 1 }}</text>
+        </view>
+
+        <!-- 竖线（最后一条不显示） -->
+        <view
+          class="step-line"
+          :class="{ finish: getStatus(index) === 'finish' }"
+          v-if="index < steps.length - 1"
+        ></view>
+      </view>
+
+      <!-- 右侧：内容区域（支持插槽！） -->
+      <view class="step-right">
+        <!-- 默认标题 -->
+        <view
+          class="step-title"
+          :class="{ active: getStatus(index) !== 'wait' }"
+          v-if="!$slots.item"
+        >
+          {{ item.title }}
+        </view>
+
+        <!-- 默认描述 -->
+        <view class="step-desc" v-if="item.desc && !$slots.item">
+          {{ item.desc }}
+        </view>
+
+        <!-- 🔥 核心：自定义内容插槽 -->
+        <slot
+          name="item"
+          v-if="$slots.item"
+          :index="index"
+          :status="getStatus(index)"
+          :data="item"
+        ></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  // 步骤列表
+  steps: {
+    type: Array,
+    default: () => []
+  },
+  // 当前步骤（从 0 开始）
+  current: {
+    type: Number,
+    default: 0
+  },
+  // 主题色
+  color: {
+    type: String,
+    default: '#007aff'
+  }
+})
+
+// 获取状态：finish / process / wait
+const getStatus = index => {
+  if (index < props.current) return 'finish'
+  if (index === props.current) return 'process'
+  return 'wait'
+}
+
+// 样式类
+const getClass = index => {
+  return 'step-circle-' + getStatus(index)
+}
+</script>
+
+<style scoped lang="scss">
+.step-item {
+  display: flex;
+  position: relative;
+}
+
+/* 左侧 */
+.step-left {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 14rpx;
+}
+
+/* 圆点 */
+.step-circle {
+  width: 48rpx;
+  height: 48rpx;
+  border-radius: 50%;
+  font-size: 32rpx;
+  line-height: 48rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  z-index: 10;
+  border: 3rpx solid transparent;
+
+  color: #999999;
+  border-color: #999999;
+}
+
+/* 已完成 */
+.step-circle-finish {
+  background: transparent;
+  color: v-bind('props.color');
+  border-color: v-bind('props.color');
+}
+
+/* 进行中 */
+.step-circle-process {
+  border-color: v-bind('props.color');
+  color: #fff;
+  background: v-bind('props.color');
+}
+
+/* 待完成 */
+.step-circle-wait {
+  color: #999999;
+  border-color: #999999;
+}
+
+/* 竖线 */
+.step-line {
+  width: 4rpx;
+  height: 100%;
+  background: #e5e5e5;
+  margin-top: 8rpx;
+  margin-bottom: 8rpx;
+}
+
+.step-line.finish {
+  background: v-bind('props.color');
+}
+
+/* 右侧内容 */
+.step-right {
+  flex: 1;
+}
+
+.step-title {
+  font-size: 28rpx;
+  color: #666;
+  line-height: 1.4;
+}
+
+.step-title.active {
+  color: #333;
+  font-weight: 500;
+}
+
+.step-desc {
+  font-size: 24rpx;
+  color: #999;
+  margin-top: 8rpx;
+  line-height: 1.5;
+}
+</style>