admin/ys-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
chenzhen
2025-07-22 11:21:01 +08:00
commit 09d0e316e1
164 changed files with 7907 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
src/components/customHeader.vue Normal file
View File

@@ -0,0 +1,111 @@
<template>
<view class="custom-navbar">
<view class="navbar-main" :style="{paddingTop:navBarPaddingTop+'px'}">
<!-- 左侧内容 -->
<view class="navbar-left" @click="handleBack" v-if="leftFlag">
<uni-icons type="left" size="24" color="#fff"></uni-icons>
</view>
<!-- 中间标题 -->
<view class="navbar-title">{{ title }}</view>
<!-- 右侧内容 -->
<view class="navbar-right" v-if="rightFlag">
<slot name="right"></slot>
</view>
</view>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { getNavBarPaddingTop,getNavBarHeight,getStatusBarHeight} from '@/utils/system.js'
const props = defineProps({
title: String,
leftFlag:true,//默认左侧显示 false-不显示
rightFlag:false,//默认右侧不显示
})
const emit = defineEmits(['back'])
let navBarPaddingTop = ref(0)
let statusBarHeight = ref(0)
let navbarHeight = ref(0)
let navHeight = ref(0)
onMounted(() => {
navBarPaddingTop.value = getNavBarPaddingTop();console.log(navBarPaddingTop.value)
statusBarHeight.value = getStatusBarHeight();
navbarHeight.value = getNavBarHeight();
navHeight.value = navbarHeight.value - statusBarHeight.value
})
const handleBack = () => {
emit('back')
uni.navigateBack()
}
</script>
<style scoped>
.custom-navbar {
width: 750rpx;
position: fixed;
top: 0;
left: 50%;
margin-left:-375rpx;
z-index: 999;
/* #ifdef APP-PLUS */
background: url('@/static/images/bg-Blue-header.png') no-repeat;
background-size:750rpx 160rpx;
height:160rpx;
/* #endif */
/* #ifndef APP-PLUS */
background: url('@/static/images/bg-Blue-header2.png') no-repeat;
background-size:750rpx 116rpx;
height:116rpx;
/* #endif */
}
.navbar-content {
width: 100%;
}
.navbar-main {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 30rpx;
box-sizing: border-box;
color:#fff;
/* #ifdef APP-PLUS */
height:160rpx;
/* #endif */
/* #ifndef APP-PLUS */
height:116rpx;
/* #endif */
}
.navbar-left{
width: 70rpx;
text-align: left;
}
.navbar-title {
flex: 1;
font-size: 36rpx;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color:#fff;
margin-top:-3rpx;
}
.navbar-right{
margin-left: auto;
}
</style>

84
src/components/customSearch.vue Normal file
View File

@@ -0,0 +1,84 @@
<template>
<view>
<!-- 搜索框 -->
<uni-search-bar v-model="searchText" @confirm="handleSearch" />
<!-- <view v-if="showSuggestions" class="suggestions-list">
<view
v-for="(item, index) in suggestions"
:key="index"
class="suggestion-item"
@click="selectSuggestion(item)"
>
{{ item }}
</view>
</view> -->
<!-- 筛选条件 -->
<view class="filter-container">
<picker mode="selector" :range="categoryOptions" @change="handleCategoryChange">
<view class="filter-item">{{ categoryText }}</view>
</picker>
<picker mode="selector" :range="sortOptions" @change="handleSortChange">
<view class="filter-item">{{ sortText }}</view>
</picker>
</view>
<!-- 搜索结果 -->
<search-results :list="results" />
</view>
</template>
<script setup>
import { ref, computed } from 'vue'
// const suggestions = ref([])
// const showSuggestions = ref(false)
// const handleInput = debounce(async () => {
// if (!searchText.value.trim()) {
// showSuggestions.value = false
// return
// }
// try {
// const res = await getSuggestions(searchText.value)
// suggestions.value = res
// showSuggestions.value = true
// } catch (error) {
// console.error('获取搜索建议失败:', error)
// }
// }, 300)
const searchText = ref('')
const category = ref(0)
const sort = ref(0)
const categoryOptions = ['全部类别', '电子产品', '服装', '食品']
const sortOptions = ['默认排序', '价格从低到高', '价格从高到低', '销量最高']
const categoryText = computed(() => categoryOptions[category.value])
const sortText = computed(() => sortOptions[sort.value])
const handleSearch = async () => {
const params = {
keyword: searchText.value,
category: category.value,
sort: sort.value
}
// 调用搜索API
const res = await searchAPI(params)
results.value = res.data
}
const handleCategoryChange = (e) => {
category.value = e.detail.value
handleSearch()
}
const handleSortChange = (e) => {
sort.value = e.detail.value
handleSearch()
}
</script>

137
src/components/customSteps.vue Normal file
View File

@@ -0,0 +1,137 @@
<template>
<view class="vertical-step-progress">
<view v-for="(step, index) in steps" :key="index" class="step-item">
<view class="step-connector" :style="{ backgroundColor: index < activeStep ? activeColor : inactiveColor2 }"></view>
<view class="step-icon" :style="{ backgroundColor: index < activeStep ? activeColor : inactiveColor }">
<text v-if="index < activeStep">✓</text>
<!-- <text v-else>{{ index + 1 }}</text> -->
</view>
<view class="step-content">
<text class="step-title">
<text class="font-blue">{{ step.beginTime }}</text> — <text class="font-blue">{{ step.endTime }}</text>
</text>
<text class="step-desc">{{ step.desc }}</text>
</view>
<!-- <view class="btn-round-red" @click="handleDelete(index)">
<uni-icons type="trash" size="20" color="#fff"></uni-icons>
</view> -->
</view>
</view>
</template>
<script setup>
// import { ref } from 'vue';
import { showAlert } from '@/utils/message.js';
const props = defineProps({
steps: {
type: Array,
default: () => []
},
activeStep: {
type: Number,
default: -1
},
activeColor: {
type: String,
default: '#4cd964'
},
inactiveColor: {
type: String,
default: '#ffffff'
},
inactiveColor2:{
type: String,
default: '#E6E6E6'
}
})
const emit = defineEmits(['update:modelValue'])
// 删除日程提醒
const handleDelete = (index) => {
showAlert("是否确认删除？","提示",true,()=>{
props.steps.splice(index,1);
emit('update:modelValue', props.steps)
});
}
</script>
<style scoped>
.vertical-step-progress {
margin: 30rpx 0rpx 0;
}
.step-item {
display: flex;
align-items: flex-start;
position: relative;
}
.step-connector {
position: absolute;
left: 4px;
top: 0px;
width: 2px;
height: 160rpx;
transform:translate(0px, -8px) !important;
}
.step-item:last-child .step-connector {
height: 100rpx;
}
.step-icon {
width:1px;
height: 1px;
padding:3px;
border:2px solid #E6E6E6;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 15px;
color: white;
font-size: 14px;
z-index: 1;
}
.step-content {
flex: 1;
display: flex;
flex-direction: column;
}
.step-title {
font-size: 28rpx;
color: #BFBFBF;
margin-bottom: 4px;
margin-top:-5px;
}
.step-title .font-blue{
color:#05A3F4;
font-weight: bold;
font-size:28rpx;
}
.step-desc{
font-size: 32rpx;
color: #333;
height:120rpx;
width: 500rpx;
}
.step-item:last-child .step-desc{
height:70rpx;
}
.btn-round-red{
background-color: #FF687A;
color:#fff;
border-radius: 50%;
width:56rpx;
height: 56rpx;
line-height: 56rpx;
text-align: center;
margin-top:30rpx;
}
</style>

67
src/components/customTabs.vue Normal file
View File

@@ -0,0 +1,67 @@
<!-- components/customTabs.vue -->
<template>
<view class="tabs-container">
<view class="tabs-scorll">
<view class="tabs-header">
<view v-for="(tab, index) in tabs" :key="index"
:class="['tab-item', { 'active': modelValue === index }]"
@click="switchTab(index)"
>
{{ tab }}
</view>
</view>
</view>
<slot></slot>
</view>
</template>
<script setup>
defineProps({
tabs: {
type: Array,
default: () => []
},
modelValue: {
type: Number,
default: 0
}
})
const emit = defineEmits(['update:modelValue'])
const switchTab = (index) => {
emit('update:modelValue', index)
}
</script>
<style scoped>
.tabs-header {
display: flex;
height: 80rpx;
background: #fff;
border-bottom: 1rpx solid #eee;
}
.tab-item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
color: #666;
}
.tab-item.active {
color: #007AFF;
position: relative;
}
.tab-item.active::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60rpx;
height: 4rpx;
background-color: #007AFF;
}
</style>

461
src/components/multipleSelect.vue Normal file
View File

@@ -0,0 +1,461 @@
<template>
<!-- <view class="uni-select-dc" :style="{ 'z-index': zindex }"> :style="{ 'z-index': zindex }"-->
<view class="uni-select-dc">
<view class="uni-select-dc-select" :class="{ active: active }" @click.stop="handleSelect">
<!-- 禁用mask -->
<view class="uni-disabled" v-if="disabled"></view>
<!-- 清空 -->
<view class="close-icon close-postion" v-if="realValue.length && !active && !disabled && showClearIcon">
<text @click.stop="handleRemove(null)"></text>
</view>
<!-- 显示框 -->
<view class="uni-select-multiple" v-show="realValue.length">
<block v-if="multiple" >
<view class="uni-select-multiple-item" v-for="(item, index) in changevalue" :key="index">
{{ item.text }}
<view class="close-icon" v-if="showValueClear">
<text @click.stop="handleRemove(index)"></text>
</view>
</view>
</block>
<!-- 单选时展示内容 -->
<view v-else class="single-text">
{{ changevalue.length ? changevalue[0].text : "" }}
</view>
</view>
<!-- 为空时的显示文案 -->
<view v-if="realValue.length == 0 && showplaceholder">{{ placeholder }}</view>
<!-- 右边的下拉箭头 -->
<view :class="{ disabled: disabled, 'uni-select-dc-icon': !downInner, 'uni-select-dc-inner': downInner }">
<text></text>
</view>
</view>
<!-- 下拉选项 -->
<scroll-view class="uni-select-dc-options" :scroll-y="true" v-show="active">
<view class="uni-select-dc-item" :class="{ active: realValue.includes(item[svalue]) }"
v-for="(item, index) in options" :key="index"
@click.stop="handleChange(index, item)"
>
{{ item[slabel] }}
</view>
</scroll-view>
</view>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
const props = defineProps({
// 是否显示全部清空按钮
showClearIcon: {
type: Boolean,
default: false,
},
// 是否多选
multiple: {
type: Boolean,
default: false,
},
// 下拉箭头是否在框内
downInner: {
type: Boolean,
default: true,
},
// 是否显示单个删除
showValueClear: {
type: Boolean,
default: true,
},
zindex: {
type: Number,
default: 999,
},
// 禁用选择
disabled: {
type: Boolean,
default: false,
},
options: {
type: Array,
default() {
return [];
},
},
value: {
type: Array,
default() {
return [];
},
},
placeholder: {
type: String,
default: "请选择",
},
showplaceholder: {
type: Boolean,
default: true,
},
// 默认取text
slabel: {
type: String,
default: "text",
},
// 默认取value
svalue: {
type: String,
default: "value",
},
});
const emit = defineEmits(["change"]);
const active = ref(false); // 组件是否激活，
let changevalue = reactive([]);
let realValue = reactive([]);
onMounted(() => {
init();
});
// 初始化函数
const init = () => {
if (props.value.length > 0) {
props.options.forEach((item) => {
props.value.forEach((i) => {
if (item[props.svalue] === i) {
changevalue.push(item);
}
})
})
realValue = props.value;
console.log("props---", changevalue);
} else {
changevalue = [];
realValue = [];
}
};
// 点击展示选项
const handleSelect = () => {
if (props.disabled) return;
active.value = !active.value;
};
// 移除数据
const handleRemove = (index) => {
if (index === null) {
realValue = [];
changevalue = [];
} else {
realValue.splice(index, 1);
changevalue.splice(index, 1);
}
emit("change", changevalue, realValue);
};
// 点击组件某一项
const handleChange = (index, item) => {
console.log("选中了某一项", index, item);
// 如果是单选框，选中一项后直接关闭
if (!props.multiple) {
console.log("关闭下拉框");
changevalue.length = 0
realValue.length = 0
changevalue.push(item);
realValue.push(item[props.svalue])
active.value = !active.value;
} else {
// 多选操作
const arrIndex = realValue.indexOf(item[props.svalue]);
if (arrIndex > -1) {
// 如果该选项已经选中，当点击后就不选中
changevalue.splice(arrIndex, 1);
realValue.splice(arrIndex, 1);
} else {
// 否则选中该选项
changevalue.push(item);
realValue.push(item[props.svalue]);
}
}
// 触发回调函数
emit("change", changevalue, realValue);
};
</script>
<style lang="scss" scoped>
.uni-select-dc {
position: relative;
// z-index: 999;
.uni-select-mask {
width: 100%;
height: 100%;
}
/* 删除按钮样式*/
.close-icon {
height: 100%;
width: 20px;
display: flex;
align-items: center;
justify-content: center;
// z-index: 3;
cursor: pointer;
text {
position: relative;
background: #c0c4cc;
width: 13px;
height: 13px;
border-radius: 50%;
border: 1px solid #bbb;
&::before,
&::after {
content: "";
position: absolute;
left: 20%;
top: 48%;
height: 1px;
width: 60%;
transform: rotate(45deg);
background-color: #909399;
}
&::after {
transform: rotate(-45deg);
}
}
}
//所有情空的定位
.close-postion {
position: absolute;
right: 35px;
top: 0;
height: 100%;
width: 15px;
}
/* 多选盒子 */
.uni-select-multiple {
display: flex;
flex-wrap: nowrap;
overflow: scroll;
.single-text {
color: #333;
}
.uni-select-multiple-item {
background: #f4f4f5;
margin-right: 5px;
padding: 2px 4px;
border-radius: 4px;
color: #909399;
display: flex;
flex-shrink: 0;
}
}
// select部分
.uni-select-dc-select {
user-select: none;
position: relative;
z-index: 3;
height: 38px;
padding: 0 30px 0 10px;
box-sizing: border-box;
border-radius: 4px;
border: 1px solid rgb(229, 229, 229);
display: flex;
align-items: center;
font-size: 12px;
color: #999;
min-width: 10px;
.uni-disabled {
position: absolute;
left: 0;
width: 100%;
height: 100%;
z-index: 19;
cursor: no-drop;
background: rgba(255, 255, 255, 0.5);
}
.uni-select-dc-input {
font-size: 14px;
color: #999;
display: block;
width: 96%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 30px;
box-sizing: border-box;
&.active {
color: #333;
}
}
.uni-select-dc-icon {
cursor: pointer;
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 20px;
display: flex;
align-items: center;
justify-content: center;
border-left: 1px solid rgb(229, 229, 229);
text {
display: block;
width: 0;
height: 0;
border-width: 12rpx 12rpx 0;
border-style: solid;
border-color: #bbb transparent transparent;
transition: 0.3s;
}
&.disabled {
cursor: no-drop;
text {
width: 20rpx;
height: 20rpx;
border: 2px solid #ff0000;
border-radius: 50%;
transition: 0.3s;
position: relative;
z-index: 999;
&::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
margin-top: -1px;
background-color: #ff0000;
transform: rotate(45deg);
}
}
}
}
.uni-select-dc-inner {
cursor: pointer;
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 20px;
display: flex;
align-items: center;
justify-content: center;
text {
display: block;
width: 9px;
height: 9px;
position: absolute;
right: 15px;
top: 8px;
border: 1px solid #bbb;
transform: rotate(-45deg);
border-color: transparent transparent#bbb #bbb;
transition: 0.3s;
}
&.disabled {
cursor: no-drop;
text {
width: 20rpx;
height: 20rpx;
border: 2px solid #ff0000;
border-radius: 50%;
transition: 0.3s;
position: relative;
z-index: 999;
&::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
margin-top: -1px;
background-color: #ff0000;
transform: rotate(45deg);
}
}
}
}
// 激活之后，图标旋转180度
&.active .uni-select-dc-icon {
text {
transform: rotate(180deg);
}
}
&.active .uni-select-dc-inner {
text {
position: absolute;
right: 10px;
top: 12px;
transform: rotate(-225deg);
}
}
}
// options部分
.uni-select-dc-options {
user-select: none;
position: absolute;
top: calc(100% + 5px);
left: 0;
width: 100%;
// height: 400rpx;
max-height: 400rpx;
border-radius: 4px;
border: 1px solid rgb(229, 229, 229);
background: #fff;
padding: 5px 0;
box-sizing: border-box;
z-index: 9999;
.uni-select-dc-item {
text-align: left;
padding: 0 10px;
box-sizing: border-box;
cursor: pointer;
line-height: 2.5;
transition: 0.3s;
font-size: 14px;
// 取消长按的背景色
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;
&.active {
color: #409eff;
background-color: #f5f7fa;
&:hover {
color: #409eff;
background-color: #f5f7fa;
}
}
&:hover {
background-color: #f5f5f5;
}
}
}
}
</style>

182
src/components/sliderCaptcha.vue Normal file
View File

@@ -0,0 +1,182 @@
<template>
<view class="container">
<!-- 验证区域 -->
<view class="captcha-area">
<image :src="backgroundImg" class="bg-img" mode="widthFix"></image>
<view class="puzzle-hole" :style="{
left: `${holePosition.x}px`,
top: `${holePosition.y}px`,
width: `${puzzleSize.width}px`,
height: `${puzzleSize.height}px`
}"></view>
</view>
<!-- 滑块区域 -->
<view class="slider-area">
<movable-area class="movable-area">
<movable-view class="movable-view" direction="horizontal" :x="sliderX" @change="onDrag"
@touchend="onDragEnd" :damping="40" :friction="10">
<image :src="puzzleImg" class="puzzle-img"></image>
</movable-view>
</movable-area>
<text class="slider-text">{{ sliderText }}</text>
</view>
<!-- 操作按钮 -->
<button class="refresh-btn" @click="initCaptcha">刷新验证码</button>
</view>
</template>
<script>
export default {
data() {
return {
backgroundImg: './static/images/captcha/1.jpg?v=1', // 替换为你的背景图
puzzleImg: '', // 滑块小图
holePosition: { x: 0, y: 0 }, // 缺口位置
puzzleSize: { width: 50, height: 50 }, // 滑块尺寸
sliderX: 0, // 滑块位置
targetX: 0, // 正确目标位置
isVerified: false,
sliderText: '拖动滑块完成拼图'
};
},
mounted() {
this.initCaptcha();
},
methods: {
// 初始化验证码
initCaptcha() {
this.isVerified = false;
this.sliderX = 0;
this.sliderText = '拖动滑块完成拼图';
// 随机生成缺口位置 (示例)
const maxX = 300 - this.puzzleSize.width;
const maxY = 200 - this.puzzleSize.height;
this.holePosition = {
x: Math.floor(Math.random() * maxX),
y: Math.floor(Math.random() * maxY)
};
// 这里应该从服务器获取裁剪后的小图
// 实际项目中需要通过API获取
this.puzzleImg = this.generatePuzzleImage();
// 设置目标位置 (映射到滑块轨道)
this.targetX = this.mapToSliderPosition(this.holePosition.x);
},
// 模拟生成滑块图片 (实际应从服务端获取)
generatePuzzleImage() {
// 这里应该是从背景图裁剪的图片
return './static/images/captcha/1-1.jpg?v=1';
},
// 映射背景位置到滑块位置
mapToSliderPosition(bgX) {
const bgWidth = 300; // 背景图显示宽度
const sliderWidth = 280; // 滑块轨道宽度
return (bgX / bgWidth) * sliderWidth;
},
// 拖动中
onDrag(e) {
if (this.isVerified) return;
this.sliderX = e.detail.x;
},
// 拖动结束
onDragEnd() {
if (this.isVerified) return;
// 允许的误差范围
const tolerance = 5;
if (Math.abs(this.sliderX - this.targetX) < tolerance) {
this.isVerified = true;
this.sliderText = '验证成功 ✓';
uni.showToast({ title: '验证成功', icon: 'success' });
// 这里可以触发验证通过后的操作
} else {
this.sliderText = '验证失败，请重试';
this.sliderX = 0;
setTimeout(() => {
if (!this.isVerified) this.sliderText = '拖动滑块完成拼图';
}, 1000);
}
}
}
};
</script>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
.captcha-area {
position: relative;
width: 300px;
height: 200px;
border: 1px solid #eee;
border-radius: 8px;
overflow: hidden;
margin-bottom: 30px;
}
.bg-img {
width: 100%;
height: 100%;
}
.puzzle-hole {
position: absolute;
border: 2px dashed #fff;
box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.5);
pointer-events: none;
}
.slider-area {
width: 300px;
position: relative;
}
.movable-area {
width: 100%;
height: 50px;
background-color: #f5f5f5;
border-radius: 25px;
}
.movable-view {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.puzzle-img {
width: 50px;
height: 50px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.slider-text {
display: block;
text-align: center;
margin-top: 10px;
color: #666;
}
.refresh-btn {
margin-top: 20px;
width: 200px;
}
</style>