business_tms_program 0.0.0

package/src/components/DrawerSelect.vue

@@ -0,0 +1,105 @@
+<template>
+  <Drawer v-model="showDrawer" :height="70" drawType="select">
+    <view>
+      <view class="header">
+        <view class="cancel" @click="handleCancel">取消</view>
+        <view class="title">{{ title }}</view>
+        <view class="confirm" @click="handleConfirm">确认</view> 
+      </view>
+      <view class="select-box">
+      <checkbox-group @change="handleChange">
+        <label 
+          v-for="item in options" 
+          :key="item[valueKey]"
+          class="flex items-center select-item"
+        >
+          <checkbox 
+            :value="item[valueKey]"
+            color="#1D6FE9"
+            :checked="selected.includes(item[valueKey])"
+          />
+          <view class="flex-1 select-label">{{ item[labelKey] }}</view>
+        </label>
+      </checkbox-group>
+      </view>
+    </view>
+  </Drawer>
+</template>
+
+<script setup lang="ts">
+import Drawer from './Drawer.vue'
+import { ref } from 'vue'
+
+const props = defineProps({
+  visible: Boolean,
+  title: String,
+  valueKey: {
+    type: String,
+    default: 'value'
+  },
+  labelKey: {
+    type: String,
+    default: 'label'
+  },
+  options: {
+    type: Array,
+    default: () => ([])
+  }
+})
+
+const emit = defineEmits(['update:visible', 'change'])
+const selected = ref<(string|number)[]>([])
+const showDrawer = ref(false) // 控制抽屉显示
+watch(() => props.visible, (val) => {
+  if (val) {
+    showDrawer.value = true
+  } else {
+    showDrawer.value = false
+  }
+})
+const handleChange = (e: CustomEvent) => {
+  selected.value = e.detail.value
+}
+const handleConfirm = () => {
+  emit('change', selected.value)
+}
+const handleCancel = () => {
+  emit('update:visible', false)
+}
+</script>
+<style lang="scss" scoped>
+.header{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .title{
+    padding: 36rpx 0;
+    font-weight: 500;
+    font-size: 40rpx;
+    color: rgba(0,0,0,0.85);
+    line-height: 56rpx;
+  }
+  .cancel{
+    padding: 0 32rpx;
+    font-size: 32rpx;
+    color: rgba(0,0,0,0.6);
+    line-height: 56rpx;
+  }
+  .confirm{
+    padding: 0 32rpx;
+    font-size: 32rpx;
+    color: #1D6FE9;
+    line-height: 56rpx;
+  }
+}
+.select-box{
+  padding: 0 32rpx;
+  .select-item {
+    padding: 32rpx 0;
+    border-bottom: 1rpx solid #E8E8E8;
+    .select-label{
+      margin-left: 24rpx;
+    }
+  }
+}
+</style>

package/src/components/DropMenu.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const props = defineProps({
+  options: {
+    type: Array as () => Array<{ value: string; name: string }>,
+    required: true
+  },
+  modelValue: {
+    type: String,
+    required: true
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+const showDropdown = ref(false)
+const dropdownRef = ref<any>(null)
+
+// 切换下拉菜单
+const toggleDropdown = (e: any) => {
+  e.stopPropagation()
+  showDropdown.value = !showDropdown.value
+}
+
+// 选择选项
+const selectOption = (value: string) => {
+  emit('update:modelValue', value)
+  emit('change', value)
+  showDropdown.value = false
+}
+
+// 小程序点击外部关闭
+const handleTapOutside = () => {
+  showDropdown.value = false
+}
+
+onMounted(() => {
+  // 小程序环境下添加全局点击监听
+  uni.$on('clickOutside', handleTapOutside)
+})
+
+onUnmounted(() => {
+  uni.$off('clickOutside', handleTapOutside)
+})
+</script>
+
+<template>
+  <view class="dropdown-container" @tap.stop="toggleDropdown" ref="dropdownRef">
+    <view class="dropdown-trigger">
+      <text>{{ options.find(opt => opt.value === modelValue)?.name }}</text>
+      <view class="arrow" :class="{ 'rotate': showDropdown }">▼</view>
+    </view>
+    
+    <!-- 添加遮罩层用于点击外部关闭 -->
+    <view 
+      v-if="showDropdown" 
+      class="dropdown-mask" 
+      @tap.stop="handleTapOutside"
+      @touchmove.stop.prevent
+    ></view>
+    
+    <transition name="fade">
+      <view v-if="showDropdown" class="dropdown-menu" @tap.stop>
+        <view
+          v-for="option in options"
+          :key="option.value"
+          class="dropdown-item"
+          :class="{ 'active': option.value === modelValue }"
+          @tap.stop="selectOption(option.value)"
+        >
+          {{ option.name }}
+        </view>
+      </view>
+    </transition>
+  </view>
+</template>
+
+<style scoped lang="less">
+.dropdown-container {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-trigger {
+  display: flex;
+  align-items: center;
+  padding: 12rpx 8rpx;
+  background-color: white;
+  font-size: 24rpx;
+  
+  .arrow {
+    margin-left: 12rpx;
+    font-size: 18rpx;
+    transition: transform 0.3s ease;
+    &.rotate {
+      transform: rotate(180deg);
+    }
+  }
+}
+
+.dropdown-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+  background: transparent;
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  min-width: 134rpx;
+  background-color: white;
+  border: 1rpx solid #dadada;
+  border-radius: 4rpx;
+  box-shadow: 0 2rpx 12rpx 0 rgba(0,0,0,0.1);
+  margin-top: 4rpx;
+  overflow: hidden;
+}
+
+.dropdown-item {
+  padding: 16rpx;
+  font-size: 24rpx;
+  
+  &.active {
+    color: #409eff;
+    background-color: #ecf5ff;
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

package/src/components/Empty.vue

@@ -0,0 +1,49 @@
+<template>
+    <view :style="otherStyle" :class="['empty']">
+      <view class="empty-content">
+        <image
+          class="empty-icon"
+          :src="image"
+          mode="scaleToFill"
+        />
+        <view class="empty-text">{{ desc }}</view>
+      </view>
+    </view>
+  </template>
+  
+  <script setup lang="ts" name="Empty">
+  import emptyImage from '@/static/img/empty.png'
+  defineProps({
+    image: {
+      type: String,
+      default: emptyImage
+    },
+    desc: {
+      type: String,
+      default: '暂无数据'
+    },
+    otherStyle: {
+      type: String,
+      default: ''
+    }
+  })
+  
+  </script>
+  
+  <style lang="scss">
+
+  .empty-content {
+    text-align: center;
+  }
+  .empty-icon {
+    margin: 0 auto;
+    width: 440rpx;
+    height: 400rpx;
+  }
+  .empty-text {
+    text-align: center;
+    font-size: 28rpx;
+    color: #c9c7c7;
+  }
+  </style>
+  

package/src/components/Loading.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const props = defineProps({
+  size: {
+    type: Number,
+    default: 20
+  },
+  color: {
+    type: String,
+    default: '#fff'
+  },
+  borderWidth: {
+    type: Number,
+    default: null
+  }
+})
+const computedBorderWidth = computed(() => props.borderWidth || props.size / 10)
+</script>
+<template>
+  <view class="loading-spinner" :style="{
+    width: `${props.size}rpx`,
+    height: `${props.size}rpx`,
+    borderWidth: `${computedBorderWidth}rpx`,
+    borderColor: `rgba(255, 255, 255, 0.3)`,
+    borderTopColor: props.color
+  }"></view>
+</template>
+
+<style scoped>
+.loading-spinner {
+  border-style: solid;
+  border-radius: 50%;
+  animation: spin 1s ease-in-out infinite;
+  margin: 0 auto;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/components/RippleBtn.vue

@@ -0,0 +1,159 @@
+<template>
+    <button 
+      class="ripple-button"
+      :class="{
+        'loading': loading,
+        'disabled': disabled,
+      }"
+      :disabled="disabled || loading"
+      @click="handleClick"
+      :style="customStyle"
+    >
+      <view v-if="loading" class="loading-spinner"></view>
+      <view class="button-content">
+        <slot></slot>
+      </view>
+      <view 
+        v-for="(ripple, index) in ripples" 
+        :key="index"
+        class="ripple"
+        :style="{
+          width: ripple.width,
+          height: ripple.height,
+          left: ripple.left,
+          top: ripple.top
+        }"
+      ></view>
+      </button>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref } from 'vue'
+  
+  interface RippleInfo {
+    width: string
+    height: string
+    left: string
+    top: string
+  }
+  
+  const props = defineProps({
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    plain: {
+      type: Boolean,
+      default: false
+    },
+    round: {
+      type: Boolean,
+      default: false
+    },
+    customStyle: {
+      type: String,
+      default: ''
+    }
+  })
+  
+  const emit = defineEmits(['click'])
+  
+  const ripples = ref<RippleInfo[]>([])
+  
+  const handleClick = (event: any) => {
+    if (props.loading || props.disabled) return
+  const target = event.currentTarget || event.target
+  if (target) {
+    const size = 40
+    const x = event.detail.x - target.offsetLeft - size / 2
+    const y = event.detail.y - target.offsetTop - size / 2
+    
+    ripples.value.push({
+      width: `${size}px`,
+      height: `${size}px`,
+      left: `${x}px`,
+      top: `${y}px`
+    })
+    
+    setTimeout(() => {
+      ripples.value.shift()
+    }, 600)
+  }
+  
+  emit('click', event)
+  }
+  </script>
+  
+  <style scoped>
+
+	.ripple-button {
+		position: relative;
+		transition: all 0.3s;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		box-sizing: border-box;
+    /* 覆盖unibtn的样式 */
+    padding: 0; 
+    margin: 0;
+    background: none;
+	}
+
+  .ripple-button::after {
+    display: none;
+  }
+	/* 圆角按钮 */
+	.ripple-button.round {
+		border-radius: 22rpx;
+	}
+
+	/* 禁用状态 */
+	.ripple-button.disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+
+	/* 波纹效果 */
+	.ripple {
+		position: absolute;
+		border-radius: 50%;
+		background-color: rgba(255, 255, 255, 0.4);
+		transform: scale(0);
+		animation: ripple 0.6s linear;
+		pointer-events: none;
+	}
+
+	@keyframes ripple {
+		to {
+			transform: scale(4);
+			opacity: 0;
+		}
+	}
+
+	/* 加载动画 */
+	.loading-spinner {
+		width: 28rpx;
+		height: 28rpx;
+		border: 4rpx solid rgba(255, 255, 255, 0.767);
+		border-radius: 50%;
+		border-top-color: currentColor;
+		animation: spin 1s linear infinite;
+		margin-right: 16rpx;
+	}
+
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	.button-content {
+		display: inline-flex;
+		align-items: center;
+	}
+
+</style>

package/src/components/SinglePick.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface DictItem {
+  [key: string]: any;
+  value: string | number;
+  label: string;
+}
+
+const props = defineProps({
+  value: [String, Number, Object],
+  range: {
+    type: Array as () => DictItem[],
+    default: () => []
+  },
+  valueKey: {
+    type: String,
+    default: 'value'
+  },
+  labelKey: {
+    type: String,
+    default: 'label'
+  },
+  placeholder: {
+    type: String,
+    default: '请选择'
+  },
+  type: {
+    type: String,
+    default: 'dict'
+  },
+  showRightIcon: {
+    type: Boolean,
+    default: false 
+  },
+  selectColor: {
+    type: String,
+    default: '#7e7d7d'
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['change', 'update:value']);
+
+const currentIndex = computed(() => {
+  return props.range.findIndex(item => item[props.valueKey] === props.value);
+});
+
+const currentLabel = computed(() => {
+  const item = props.range.find(item => item[props.valueKey] === props.value);
+  return item ? item[props.labelKey] : '';
+});
+
+const handleChange = (e: any) => {
+  const index = parseInt(e.detail.value);
+  const selectedItem = props.range[index];
+  if (selectedItem) {
+    emit('change', selectedItem[props.valueKey]);
+  }
+};
+</script>
+
+<template>
+  <view>
+    <view v-if="!disabled" class="select-box">
+      <image class="right-icon" src="/static/img/turn_right.png" />
+      <picker 
+        class="common-picker"
+        mode="selector"
+        :range="range"
+        :value="currentIndex"
+        :range-key="labelKey"
+        @change="handleChange"
+      >
+      <view v-if="currentLabel" class="picker-content" :style="{color: selectColor}">
+        {{ currentLabel }}
+      </view>
+      <view v-else class="picker-placeholder">
+        {{ props.placeholder }}
+      </view>
+    </picker>
+    </view>
+    <view v-else="disabled" class="label-content" :style="{color: selectColor}">
+      {{ currentLabel }}
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.select-box {
+  display: flex;
+  align-items: center;
+  flex-direction: row-reverse;
+}
+.common-picker {
+  flex: 1;
+  text-align: right;
+}
+.label-content {
+  text-align: right;
+}
+.picker-content {
+  width: 100%;
+  line-height: 48rpx;
+}
+.picker-placeholder {
+  font-size: 32rpx;
+  color: #7e7d7d;
+  line-height: 48rpx;
+}
+.right-icon {
+  margin-left: 16rpx;
+  width: 32rpx;
+  height: 32rpx;
+  text-align: right;
+}
+</style>

package/src/components/Skeleton.vue

@@ -0,0 +1,43 @@
+<template>
+    <view class="skeleton-container">
+
+      <view class="skeleton-line"></view>
+      <view class="skeleton-line short"></view>
+      <view class="skeleton-line medium"></view>
+    </view>
+  </template>
+  
+  <style scoped>
+  .skeleton-container {
+    margin-bottom: 32rpx;
+    padding: 20rpx 20rpx 30rpx 20rpx;
+    background-color: #fff;
+  }
+  .skeleton-line {
+    height: 24rpx;
+    margin-bottom: 12rpx;
+    background: linear-gradient(
+      90deg,
+      #eeeeee 25%,
+      #e0e0e0 37%,
+      #eeeeee 63%
+    );
+    background-size: 400% 100%;
+    animation: skeleton-loading 1.4s ease infinite;
+    border-radius: 4rpx;
+  }
+  .skeleton-line.short {
+    width: 60%;
+  }
+  .skeleton-line.medium {
+    width: 80%;
+  }
+  @keyframes skeleton-loading {
+    0% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0 50%;
+    }
+  }
+  </style>