dyf/APP
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

6155部分功能

Browse Source
This commit is contained in:
liub
2025-07-11 16:11:40 +08:00
parent 413c495880
commit cc0ad19e2d
39 changed files with 3823 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

258
components/BottomSlideMenuPlus/BottomSlideMenuPlus.vue Normal file
View File

@ -0,0 +1,258 @@
<template>
<view class="message-popup" :class="{ 'show': config.show }">
<view class="mask" @click="closeMenu" :class="{ 'show': config.show }"
:style="{backgroundColor:config.maskBgColor,display:(config.showMask?'':'none')}"
>
</view>
<view class="bottom-slide-menu" :style="{ backgroundColor: config.bgColor }" :class="{ 'show': config.show }"
@touchmove.stop.prevent>
<view class="menu-header" :class="config.showHeader?'':'displayNone'">
<view class="title" :style="{ color: config.textColor}">{{ config.title }}</view>
<view class="close-icon" @click="closeMenu"
:style="{display:(config.showClose?'':'none')}"
>
<image src="/static/Images/public/close.png" mode="aspectFit"></image>
</view>
</view>
<view class="menu-items" v-if="config.menuItems && config.menuItems.length>0">
<view class="menu-item" v-for="(item, index) in config.menuItems" :key="index" :style="{
color: config.textColor,
textAlign: config.textAlign,
height:config.itemHeight,
lineHeight:config.itemHeight,
paddingLeft: config.dividerMargin,
paddingRight: config.dividerMargin
}" @click="handleItemClick(item, index)">
<view class="p100" :style="{backgroundColor:config.activeIndex==index?config.itemBgColor:'',
justifyContent:config.textAlign
}">
<image v-if="item.icon" :src="item.icon" mode="aspectFit"></image>
<text>{{ item.text }}</text>
</view>
<view v-if="index<config.menuItems.length-1" class="menu-line"
:style="{paddingLeft: config.dividerMargin,paddingRight: config.dividerMargin}">
<view class="menu-divider"
:style="{borderTopWidth: config.dividerThickness,borderTopColor: config.dividerColor}">
</view>
</view>
</view>
</view>
<slot v-else></slot>
<view @click="btnClick" class="bottom-btn" :class="config.showBtn?'':'displayNone'"
:style="{ backgroundColor: config.btnBgColor ,color:config.btnTextColor}">
{{config.btnText}}
</view>
</view>
</view>
</template>
<script>
export default {
name: 'BottomSlideMenuPlus',
props: {
config: {
type: Object,
default: () => ({
show: false,//是否显示
showHeader: false,//是否显示标头
showMask:true,//是否显示mask
showDivider: false,//是否在两个项之间显示分隔线
showBtn: false,//是否显示底部按钮
showClose:false,//是否显示右上角关闭按钮
maskBgColor:'',//mask的颜色
menuItems: [],//菜单项 包含icon text
activeIndex: -1,//当前已选中的项编号
bgColor: '#2a2a2a',//主体背景
itemBgColor: '#3a3a3a',//各项被选中后的背景
textColor: '#ffffffde',//各项的文字颜色
textAlign: 'flex-start',//各项的文字居中方式
title: '',//header的文字
dividerColor: '#00000000',//分隔线颜色
dividerThickness: '0rpx',//分隔线宽度
dividerMargin: '10rpx',//分隔线距离两边的宽度
itemHeight: '80rpx',//各项的调试
btnBgColor: "#bbe600",//按钮颜色
btnText: "确定",//按钮文字
btnTextColor: "#000000",//按钮文字颜色
})
},
},
methods: {
closeMenu() {
this.$emit('close');
},
handleItemClick(item, index) {
this.$emit('itemClick', item, index);
},
btnClick() {
let item = null;
let index = null;
if (this.config.activeIndex > -1) {
item = this.config.menuItems[this.config.activeIndex];
}
index = this.config.activeIndex;
this.$emit('btnClick', item, index);
}
}
}
</script>
<style>
.message-popup {
position: relative;
display: none;
}
.message-popup.show {
display: block;
}
.p100 {
width: 100%;
height: 100%;
border-radius: 8rpx;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
padding: 0rpx 20rpx;
}
.displayNone {
display: none !important;
}
.bottom-slide-menu {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
transition: transform 0.3s ease-out;
transform: translateY(100%);
border-radius: 16rpx 16rpx 0 0;
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}
.mask {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9998;
width: 100%;
height: 100%;
}
.bottom-slide-menu.show {
transform: translateY(0);
}
.menu-header {
display: flex;
justify-content: center;
align-items: center;
padding-top: 30rpx;
/* border-bottom: 0.03125rem solid #eeeeee; */
flex-direction: row;
flex-wrap: nowrap;
width: 100%;
height: auto;
position: relative;
}
.title {
font-size: 32rpx;
font-weight: 600;
}
.close-icon {
width: 28rpx;
height: 28rpx;
position: absolute;
top: 30rpx;
right: 30rpx;
}
.close-icon image {
width: 100%;
height: 100%;
}
.menu-items {
padding: 20rpx 0;
}
.menu-item {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-wrap: nowrap;
box-sizing: border-box;
font-size: 28rpx;
width: 100%;
box-sizing: border-box;
position: relative;
}
.menu-item image {
width: 40rpx;
height: 40rpx;
margin-right: 20rpx;
}
/* 分隔线样式 */
.menu-line {
width: 100%;
box-sizing: border-box;
position: absolute;
bottom: 0px;
height: auto;
}
.menu-divider {
border-top-style: solid;
width: 100%;
height: 0px;
}
.bottom-btn {
width: 100%;
height: 90rpx;
text-align: center;
color: rgba(35, 35, 35, 0.87);
font-family: PingFang SC;
font-size: 30rpx;
font-weight: 600;
line-height: 90rpx;
letter-spacing: 12rpx;
text-align: center;
}
</style>

381
components/MessagePopup/MessagePopup.vue Normal file
View File

@ -0,0 +1,381 @@
<template>
<view class="message-popup" v-if="visible">
<view class="popup-mask" @click="handleMaskClick"></view>
<view
class="popup-content"
:style="{
backgroundColor: bgColor || getTypeStyle('bgColor'),
borderColor: borderColor || getTypeStyle('borderColor'),
color: textColor || getTypeStyle('textColor')
}"
>
<view v-if="showHeader&&headerTxt" class="header"
>{{headerTxt}}</view>
<view v-if="visibleClose" class="rightClose"
:style="{color:textColor || getTypeStyle('textColor')}"
@click="closeClick"
>x</view>
<view v-if="!visiblePrompt">
<image
v-if="iconUrl"
:src="iconUrl"
mode="aspectFit"
class="popup-icon"
:style="{ tintColor: textColor || getTypeStyle('textColor') }"
></image>
<view class="popup-message">{{ message }}</view>
</view>
<view v-else class="popup-prompt">
<text class="popup-prompt-title">{{ promptTitle || '请输入信息' }}</text>
<input
class="popup-prompt-input"
:placeholder="promptPlaceholder"
:value="modelValue"
@input="handleInput"
@confirm="handleButtonClick"
/>
</view>
<view class="popBtnContent">
<view
class="popup-button-cancel"
:style="{display:showCancel?'block':'none'}"
@click="handleCancelClick"
>{{ buttonCancelText?buttonCancelText:'取消' }}</view>
<view
class="popup-button"
:style="{
backgroundColor: buttonBgColor || getTypeStyle('buttonBgColor'),
color: buttonTextColor || getTypeStyle('buttonTextColor')
}"
@click="handleButtonClick"
>{{ buttonText }}</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'MessagePopup',
props: {
visible: {
type: Boolean,
default: false
},
visibleClose:{
type:Boolean,
default:true
},
visiblePrompt: {
type: Boolean,
default: false
},
promptTitle: String,
promptPlaceholder: {
type: String,
default: "请输入"
},
modelValue: {
type: String,
default: ''
},
type: {
type: String,
default: 'info',
validator: value => ['success', 'error', 'info','custom'].includes(value)
},
bgColor: String,
borderColor: String,
textColor: String,
buttonBgColor: String,
buttonTextColor: String,
iconUrl: String,
message: {
type: String,
default: ''
},
buttonText: {
type: String,
default: '确定'
},
buttonCancelText:{
type:String,
default:'取消'
},
showCancel:{
type:Boolean,
default:false
},
showHeader:{
type:Boolean,
default:false
},
headerTxt:{
type:String,
default:""
}
},
data() {
return {
inputValue: this.modelValue
}
},
watch: {
// 监听外部值变化
modelValue(newVal) {
this.inputValue = newVal
},
// 监听模式切换
visiblePrompt(newVal) {
console.log('[MessagePopup] visiblePrompt changed to:', newVal)
// 重置输入值
if (newVal) {
this.inputValue = this.modelValue
}
}
},
mounted() {
},
methods: {
getTypeStyle(styleType) {
const styles = {
success: {
bgColor: '#f0fff0',
borderColor: '#52c41a',
textColor: '#389e0d',
buttonBgColor: '#52c41a',
buttonTextColor: '#FFFFFF'
},
error: {
bgColor: '#fff0f0',
borderColor: '#ff4d4f',
textColor: '#cf1322',
buttonBgColor: '#ff4d4f',
buttonTextColor: '#FFFFFF'
},
info: {
bgColor: '#e6f7ff',
borderColor: '#1890ff',
textColor: '#0050b3',
buttonBgColor: '#1890ff',
buttonTextColor: '#FFFFFF'
}
}
return styles[this.type][styleType]
},
handleButtonClick() {
console.log('[MessagePopup] Button clicked with value:', this.inputValue)
this.$emit('buttonClick', this.inputValue)
},
handleMaskClick() {
console.log('[MessagePopup] Mask clicked')
this.$emit('maskClick')
},
closeClick(){
this.$emit('closePop')
},
handleCancelClick(){
this.$emit('cancelPop');
},
handleInput(e) {
this.inputValue = e.detail.value
this.$emit('update:modelValue', this.inputValue)
}
}
}
</script>
<style>
.message-popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.popup-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.popup-content {
position: relative;
width: 80%;
max-width: 400px;
border-radius: 12px;
padding: 30rpx;
background-color: white;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
border-width: 2rpx;
border-style: solid;
box-sizing: border-box;
z-index: 10;
}
.header{
width:100%;
color: rgba(255, 255, 255, 0.87);
font-family: PingFang SC;
font-size: 32rpx;
font-weight: 600;
height: 80rpx;
line-height: 80rpx;
letter-spacing: 0.07px;
text-align: center;
}
.rightClose{
position: absolute;
right: 20rpx;
top: 20rpx;
color: #FFFFFF;
font-size: 36rpx;
width: 24rpx;
height: 24rpx;
line-height: 24rpx;
}
.popup-icon {
width: 60rpx;
height: 60rpx;
margin: 20rpx auto;
display: block;
}
.popup-message {
font-size: 28rpx;
text-align: center;
padding: 20rpx 0rpx 30rpx 0rpx;
font-weight: 400;
letter-spacing: 0.07px;
}
.popup-prompt {
width: 100%;
}
.popup-prompt-title {
display: block;
font-size: 32rpx;
text-align: center;
margin-bottom: 20rpx;
font-weight: 500;
}
.popup-prompt-input {
width: 100%;
height: 80rpx;
line-height: 80rpx;
border: 1rpx solid #ddd;
border-radius: 8rpx;
padding: 0 20rpx;
margin-bottom: 30rpx;
font-size: 28rpx;
box-sizing: border-box;
}
.popBtnContent{
width:100%;
height: 60rpx;
margin-top: 20rpx;
display: flex
;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-evenly;
align-items: center;
}
.popup-button {
width: 30%;
height: 60rpx;
line-height: 60rpx;
border-radius: 44rpx;
text-align: center;
font-size: 24rpx;
font-weight: 500;
letter-spacing: 4rpx;
border: none;
outline: none;
cursor: pointer;
}
.popup-button-cancel{
width: 30%;
height: 60rpx;
line-height: 60rpx;
border-radius: 44rpx;
text-align: center;
font-size: 24rpx;
font-weight: 500;
letter-spacing: 4rpx;
border: none;
outline: none;
cursor: pointer;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 0.5);
background-color: #00000000;
color: #FFFFFFde;
}
.popup-prompt{
width: 100%;
height: 60rpx;
line-height: 60rpx;
padding-top: 40rpx;
}
.popup-prompt-title{
color: rgba(255, 255, 255, 0.6);
text-align: right;
width: 30%;
float: left;
box-sizing: border-box;
white-space:nowrap;
padding-right: 10rpx;
}
.popup-prompt-input{
float: left;
width: 70%;
height: 60rpx;
line-height: 60rpx;
color: rgba(255, 255, 255, 0.87) ;
box-sizing: border-box;
border: 2rpx solid rgba(255, 255, 255, 0.4);
border-radius: 8rpx;
}
</style>

129
components/Progress/Progress.vue Normal file
View File

@ -0,0 +1,129 @@
<template>
<view class="message-popup" :class="{ 'show': config.show }">
<view class="mask" @click="closeProgress" :class="{ 'show': config.show }"
:style="{backgroundColor:config.maskBgColor,display:(config.showMask?'':'none')}">
</view>
<view class="progress-content" :style="{backgroundColor:config.contentBgColor}">
<text
:style="{color:config.txtColor,display:(config.showText?'':'none')}">{{config.curr}}/{{config.total}}</text>
<view class="jdWai"
:style="{borderRadius:config.borderRadius, backgroundColor:config.proBgColor,border:config.proBorder,height:config.height}">
<view class="jdNei"
:style="{borderRadius:config.borderRadius,height:config.height,backgroundColor:config.currBgColor,border:config.currBorder,width:(config.curr/config.total*100)+'%'}">
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "Progress",
data() {
return {
};
},
props: {
config: {
type: Object,
default: () => ({
show: false, //是否显示
showMask: true, //是否显示mask
height:'20px',
maskBgColor: '#00000000', //mask背景颜色
contentBgColor: '#121212', //总背景颜色
showText: true, //是否显示当前进度的文字
txtColor: '#ffffffde', //文字的颜色
curr: 0, //当前进度
total: 100, //总进度
proBgColor: '#2a2a2a', //进度条底色,
proBorder: '', //进度条border
currBgColor: '#bbe600', //当前进度底色
currBorder: '', //当前进度border
borderRadius:'10px'
})
}
},methods: {
closeProgress() {
this.$emit('closeProgress');
}
}
}
</script>
<style>
.message-popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
display: none;
justify-content: center;
align-items: center;
}
.message-popup.show {
display: block;
}
.p100 {
width: 100%;
height: 100%;
border-radius: 8rpx;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
padding: 0rpx 20rpx;
}
.displayNone {
display: none !important;
}
.mask {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9;
width: 100%;
height: 100%;
}
.progress-content {
position: relative;
width: 100%;
padding: 30rpx;
box-sizing: border-box;
z-index: 10;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
align-items: center;
height: 100%;
justify-content: center;
}
.jdWai {
width: 100%;
}
.jdNei {
height: 100%;
}
</style>