30 changed files with 3832 additions and 1065 deletions
@ -0,0 +1,245 @@
|
||||
<template> |
||||
<!-- 弹窗组件 --> |
||||
<view :class="{'popUpMask':true, 'show' : details.showPopUp === true, 'done' : details.showPopUp === false}" |
||||
@touchmove.stop.prevent @click="()=> { |
||||
if (details.cancel) return details.cancel() |
||||
details.close() |
||||
} "> |
||||
<view :class="{'container':true, 'show' : details.showPopUp === true, 'done' : details.showPopUp === false}" |
||||
@click.stop> |
||||
<view class="buttonContainer" v-if="details.isShowButton !== false && details.location === 'top'"> |
||||
<view class="closeButton" v-if="details.isShowClose !== false" @click="details.close"> |
||||
取消 |
||||
</view> |
||||
<view class="confirmButton" @click="details.success"> |
||||
{{confirmText||'确认'}} |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="title"> |
||||
{{details.title}} |
||||
</view> |
||||
|
||||
<!-- 插槽 --> |
||||
<slot name="head"></slot> |
||||
|
||||
<scroll-view :style="{height:details.height}" class="scoolv" scroll-y="true"> |
||||
<!-- 插槽 --> |
||||
<slot name="content"></slot> |
||||
</scroll-view> |
||||
|
||||
<view class="buttonContainer" v-if="details.isShowButton !== false && details.location === 'bottom'"> |
||||
<view class="closeButton" v-if="details.isShowClose !== false" @click="details.close"> |
||||
{{ details.cancelText || '取消'}} |
||||
</view> |
||||
<view class="confirmButton" @click="details.success"> |
||||
{{ details.confirmText||'确认'}} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { |
||||
reactive, |
||||
toRefs, |
||||
defineExpose |
||||
} from 'vue'; |
||||
import { |
||||
onShow, |
||||
} from '@dcloudio/uni-app' |
||||
const details = reactive({ |
||||
/** |
||||
* 确认键内容 |
||||
*/ |
||||
confirmText: '', |
||||
/** |
||||
* 取消键内容 |
||||
*/ |
||||
cancelText: '', |
||||
/** |
||||
* 是否显示弹框 |
||||
*/ |
||||
showPopUp: undefined, |
||||
isShowClose: true, |
||||
isShowButton: true, |
||||
/** |
||||
* 内容高度 |
||||
*/ |
||||
height: 'auto', |
||||
/** |
||||
* 标题 |
||||
*/ |
||||
title: '', |
||||
/** |
||||
* 取消按钮事件 |
||||
*/ |
||||
close() { |
||||
details.showPopUp = false |
||||
}, |
||||
/** |
||||
* 弹窗关闭事件 |
||||
*/ |
||||
cancel() { |
||||
details.showPopUp = false |
||||
}, |
||||
/** |
||||
* 确认按钮事件 |
||||
*/ |
||||
success() { |
||||
details.showPopUp = false |
||||
}, |
||||
/** |
||||
* 确认按钮显示位置 |
||||
* top -- 顶部 |
||||
* bottom -- 底部 |
||||
*/ |
||||
location: 'bottom' |
||||
}) |
||||
|
||||
const setDetails = (detail) => { |
||||
for (let key in detail) { |
||||
details[key] = detail[key] |
||||
} |
||||
} |
||||
|
||||
onShow(() => { |
||||
if (!details.showPopUp) details.showPopUp = undefined |
||||
}) |
||||
|
||||
defineExpose({ |
||||
setDetails, |
||||
details |
||||
}) |
||||
|
||||
const { |
||||
showPopUp |
||||
} = toRefs(details) |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
// 显示动画 |
||||
@keyframes showMask { |
||||
0% { |
||||
left: -100%; |
||||
} |
||||
|
||||
100% { |
||||
left: 0; |
||||
} |
||||
} |
||||
|
||||
@keyframes showContent { |
||||
0% { |
||||
bottom: -100%; |
||||
} |
||||
|
||||
// 50% { |
||||
// bottom: -100%; |
||||
// } |
||||
|
||||
100% { |
||||
bottom: 0; |
||||
} |
||||
} |
||||
|
||||
// 关闭动画 |
||||
@keyframes doneMask { |
||||
0% { |
||||
left: 0; |
||||
} |
||||
|
||||
// 50% { |
||||
// left: -50%; |
||||
// } |
||||
|
||||
100% { |
||||
left: -100%; |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
@keyframes doneContent { |
||||
0% { |
||||
bottom: 0; |
||||
} |
||||
|
||||
100% { |
||||
bottom: -100%; |
||||
} |
||||
} |
||||
|
||||
// 动画时间 |
||||
$animationTime: 0.3s; |
||||
|
||||
// 弹出层 |
||||
.popUpMask { |
||||
position: fixed; |
||||
top: 0; |
||||
left: -100%; |
||||
width: 100vw; |
||||
height: 100vh; |
||||
background-color: rgba(0, 0, 0, 0.5); |
||||
z-index: 9999; |
||||
|
||||
&.show { |
||||
animation: $animationTime forwards showMask; |
||||
} |
||||
|
||||
&.done { |
||||
animation: calc($animationTime * 1.5) forwards doneMask; |
||||
} |
||||
} |
||||
|
||||
.container { |
||||
width: 100%; |
||||
background: #fff; |
||||
position: absolute; |
||||
bottom: -100%; |
||||
left: 0; |
||||
|
||||
&.show { |
||||
animation: calc($animationTime * 1.5) forwards showContent; |
||||
} |
||||
|
||||
&.done { |
||||
animation: $animationTime forwards doneContent; |
||||
} |
||||
|
||||
.title { |
||||
text-align: center; |
||||
margin: 20upx 0; |
||||
} |
||||
|
||||
.scoolv { |
||||
max-height: 70vh; |
||||
padding: 20upx; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.buttonContainer { |
||||
width: 100%; |
||||
padding: 20upx 0 60upx; |
||||
flex: 1; |
||||
display: flex; |
||||
justify-content: space-around; |
||||
align-items: center; |
||||
zoom: 0.9; |
||||
|
||||
>view { |
||||
padding: 25upx 100upx; |
||||
border-radius: 10upx; |
||||
background: var(--subjectColor); |
||||
color: #fff; |
||||
} |
||||
|
||||
.closeButton { |
||||
color: #000; |
||||
background: #F5F5F6; |
||||
} |
||||
} |
||||
|
||||
} |
||||
</style> |
||||
@ -0,0 +1,76 @@
|
||||
<template> |
||||
<view @click="handleClick" :class="{'checkbox':true, 'active':props.isCheck}"> |
||||
|
||||
</view> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { |
||||
defineProps, |
||||
defineEmits, |
||||
} from 'vue'; |
||||
|
||||
// const props = defineProps(['modelValue', 'click']) |
||||
const props = defineProps({ |
||||
// 输入框的值 |
||||
modelValue: { |
||||
default: false, |
||||
}, |
||||
// 最大值 |
||||
click: { |
||||
type: Function, |
||||
default: null |
||||
}, |
||||
isCheck: { |
||||
default: false, |
||||
} |
||||
}) |
||||
|
||||
const emit = defineEmits(['update:modelValue']) |
||||
|
||||
const handleClick = () => { |
||||
const flag = props.isCheck |
||||
console.log('flag :>> ', flag); |
||||
props.click ? props.click() : emit('update:modelValue', !flag) |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.fwb { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.checkbox { |
||||
border: 4upx solid #8d97a3; |
||||
width: 40upx; |
||||
height: 40upx; |
||||
box-sizing: border-box; |
||||
color: #8d97a3; |
||||
border-radius: 50%; |
||||
position: relative; |
||||
transition: all 0.3s; |
||||
|
||||
&::after { |
||||
content: ''; |
||||
left: 50%; |
||||
top: 50%; |
||||
background-color: #fff; |
||||
position: absolute; |
||||
transform: translate(-50%, -50%); |
||||
width: 50%; |
||||
height: 50%; |
||||
border-radius: 50%; |
||||
transition: all 0.3s; |
||||
} |
||||
|
||||
&.active { |
||||
border-color: var(--subjectColor); |
||||
color: var(--subjectColor); |
||||
|
||||
&::after { |
||||
// opacity: 1; |
||||
background-color: var(--subjectColor); |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
.scrollv{width:21.4375rem;height:60vh;background-color:#fff;margin:auto;margin-top:.625rem;padding:.625rem;box-sizing:border-box;border-radius:.3125rem}.scrollv .mabxs{display:flex;flex-direction:column;align-items:center;padding-top:.15625rem}.scrollv .mabxs .ite{width:96%;display:flex;flex-direction:column;align-items:center;padding:.625rem .46875rem .3125rem;box-sizing:border-box;border-radius:.25rem;box-shadow:0 .0625rem .3125rem #e2e2e3;margin-bottom:.625rem;font-size:.8125rem}.scrollv .mabxs .ite:nth-last-child(1){margin-bottom:.15625rem}.scrollv .mabxs .ite>uni-view{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:.625rem}.scrollv .mabxs .ite>uni-view:nth-last-child(1){margin-bottom:none!important}.scrollv .mabxs .ite>uni-view>uni-view{font-size:.8125rem;font-weight:400;color:#092c4d}.butsbx{display:flex;align-items:center;margin-top:.78125rem;padding:0 4%}.butsbx>uni-view{width:6.375rem;height:2rem;background:#FFFFFF;border-radius:.25rem;opacity:1;font-size:.875rem;display:flex;align-items:center;justify-content:center;border:.0625rem solid #D3832A;color:#d3832a;margin-left:.625rem}.head{display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:.625rem;box-sizing:border-box;background-color:#fff}.head>.type1{width:100%;display:flex;align-items:flex-start;justify-content:space-between;font-size:.875rem;font-weight:400;color:#90a0af;margin-bottom:.3125rem}.head>.type1>uni-view{flex:1;display:flex;align-items:flex-start}.head>.type1>uni-view>uni-view:nth-of-type(1){flex:1}.popUpInput{border:.09375rem solid #ccc;margin-top:.3125rem;border-radius:.15625rem;padding:.15625rem .3125rem}.popUp_Edit_text{font-size:.875rem;color:red} |
||||
.scrollv{width:21.4375rem;height:60vh;background-color:#fff;margin:auto;margin-top:.625rem;padding:.625rem;box-sizing:border-box;border-radius:.3125rem}.scrollv .mabxs{display:flex;flex-direction:column;align-items:center;padding-top:.15625rem}.scrollv .mabxs .ite{width:96%;display:flex;flex-direction:column;align-items:center;padding:.625rem .46875rem .3125rem;box-sizing:border-box;border-radius:.25rem;box-shadow:0 .0625rem .3125rem #e2e2e3;margin-bottom:.625rem;font-size:.8125rem}.scrollv .mabxs .ite:nth-last-child(1){margin-bottom:.15625rem}.scrollv .mabxs .ite>uni-view{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:.625rem}.scrollv .mabxs .ite>uni-view:nth-last-child(1){margin-bottom:none!important}.scrollv .mabxs .ite>uni-view>uni-view{font-size:.8125rem;font-weight:400;color:#092c4d}.butsbx{display:flex;align-items:center;margin-top:.78125rem;padding:0 4%}.butsbx>uni-view{width:6.375rem;height:2rem;background:#FFFFFF;border-radius:.25rem;opacity:1;font-size:.875rem;display:flex;align-items:center;justify-content:center;border:.0625rem solid #D3832A;color:#d3832a;margin-left:.625rem}.butsbx>uni-view.active{background-color:var(--subjectColor);color:#fff}.head{display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:.625rem;box-sizing:border-box;background-color:#fff}.head>.type1{width:100%;display:flex;align-items:flex-start;justify-content:space-between;font-size:.875rem;font-weight:400;color:#90a0af;margin-bottom:.3125rem}.head>.type1>uni-view{flex:1;display:flex;align-items:flex-start}.head>.type1>uni-view>uni-view:nth-of-type(1){flex:1}.popUpInput{border:.09375rem solid #ccc;margin-top:.3125rem;border-radius:.15625rem;padding:.15625rem .3125rem}.popUp_Edit_text{font-size:.875rem;color:red} |
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue