wangfukang
7 days ago
2 changed files with 5 additions and 289 deletions
@ -1,284 +0,0 @@ |
|||||
<!-- 弹窗组件小龙开发所有 --> |
|
||||
<template> |
|
||||
<view> |
|
||||
<!-- 模态框 --> |
|
||||
<view @tap="Modal" :class="{ mask: model }"></view> |
|
||||
<!-- 弹窗主体 --> |
|
||||
<view |
|
||||
:style="{ height: barHidth + 'rpx' }" |
|
||||
class="active" |
|
||||
:class="{ add: model }" |
|
||||
> |
|
||||
<view class="title-model">{{ title }} <text @tap="close">x</text></view> |
|
||||
<view class="cont" :style="{ height: barHidth - 80 + 'rpx' }"> |
|
||||
<!-- 天 --> |
|
||||
<scroll-view class="day" :scroll-y="true"> |
|
||||
<view |
|
||||
:class="index === isIndex ? 'active_copy' : ''" |
|
||||
v-for="(item, index) in content" |
|
||||
:key="item.id" |
|
||||
@tap="dataCallback(index, item)" |
|
||||
>{{ item.timezh }}</view |
|
||||
> |
|
||||
</scroll-view> |
|
||||
|
|
||||
<!-- 时 --> |
|
||||
<scroll-view class="content-model" :scroll-y="true" :scroll-top="scrollTop"> |
|
||||
<view |
|
||||
class="appoint" |
|
||||
:class="index === Indexes ? 'longActive' : ''" |
|
||||
@tap="timeCallback(index, item)" |
|
||||
v-for="(item, index) in Days" |
|
||||
:key="index" |
|
||||
>{{ item.timestr |
|
||||
}}<text :class="index === Indexes ? 'cuIcon-check' : ''"></text |
|
||||
></view> |
|
||||
</scroll-view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
props: { |
|
||||
//弹窗组件标题 |
|
||||
title: { |
|
||||
type: String, |
|
||||
default: "请传入title", |
|
||||
}, |
|
||||
//弹窗组件数据 |
|
||||
content: { |
|
||||
type: Array, |
|
||||
// 默认测试数据 |
|
||||
default: () => [ |
|
||||
{ |
|
||||
timezh: "今天 (周三)", |
|
||||
timeformatter: "8-10", |
|
||||
id: 108, |
|
||||
timelist: [ |
|
||||
{ |
|
||||
timestr: "立即送达", |
|
||||
}, |
|
||||
{ |
|
||||
timestr: "15:35", |
|
||||
}, |
|
||||
{ |
|
||||
timestr: "16:05", |
|
||||
}, |
|
||||
], |
|
||||
}, |
|
||||
], |
|
||||
}, |
|
||||
//弹窗 窗口高度 |
|
||||
barHidth: { |
|
||||
type: Number, |
|
||||
default: 400, |
|
||||
}, |
|
||||
//点击模态框是否能关闭弹窗 |
|
||||
dodge: { |
|
||||
type: Boolean, |
|
||||
default: false, |
|
||||
}, |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
scrollTop: 0, |
|
||||
isIndex: 0, |
|
||||
Indexes: 0, |
|
||||
Days: [], |
|
||||
model: false, |
|
||||
}; |
|
||||
}, |
|
||||
|
|
||||
//初始化数据 |
|
||||
watch: { |
|
||||
content: { |
|
||||
immediate: true, |
|
||||
handler(newValue, oldValue) { |
|
||||
this.Days = this.content[0].timelist; |
|
||||
}, |
|
||||
}, |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
// 关闭窗口 |
|
||||
close() { |
|
||||
this.model = false; |
|
||||
}, |
|
||||
|
|
||||
// 打开窗口 |
|
||||
open() { |
|
||||
this.model = true; |
|
||||
}, |
|
||||
|
|
||||
// 点击模态框关闭窗口 |
|
||||
Modal() { |
|
||||
if (this.dodge) { |
|
||||
this.close(); |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
//时间切换回顶 |
|
||||
gotop() { |
|
||||
this.scrollTop = 1; |
|
||||
this.$nextTick(function () { |
|
||||
this.scrollTop = 0; |
|
||||
}); |
|
||||
}, |
|
||||
|
|
||||
//切换日期 |
|
||||
dataCallback(inedx, item) { |
|
||||
this.isIndex = inedx; |
|
||||
this.Days = this.content[inedx].timelist; |
|
||||
this.Indexes = null; |
|
||||
this.gotop(); |
|
||||
this.$emit("dataCallback", item); |
|
||||
}, |
|
||||
|
|
||||
//选择时间 |
|
||||
timeCallback(inedx, item) { |
|
||||
this.Indexes = inedx; |
|
||||
this.modalName = null; |
|
||||
this.$emit("timeCallback", item); |
|
||||
}, |
|
||||
}, |
|
||||
}; |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
.mask { |
|
||||
position: fixed; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
right: 0; |
|
||||
bottom: 0; |
|
||||
background-color: #000; |
|
||||
animation: getInto 0.5s 1; |
|
||||
opacity: 0.5; |
|
||||
z-index: 999; |
|
||||
} |
|
||||
|
|
||||
@keyframes getInto { |
|
||||
0% { |
|
||||
opacity: 0; |
|
||||
} |
|
||||
|
|
||||
100% { |
|
||||
opacity: 0.5; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.active { |
|
||||
position: fixed; |
|
||||
bottom: 0; |
|
||||
left: 0; |
|
||||
z-index: 1000; |
|
||||
width: 100%; |
|
||||
height: 400rpx; |
|
||||
border-top-left-radius: 16rpx; |
|
||||
border-top-right-radius: 16rpx; |
|
||||
overflow: hidden; |
|
||||
transform: translateY(100%); |
|
||||
transition: 0.4s; |
|
||||
} |
|
||||
|
|
||||
.add { |
|
||||
transform: translateY(0); |
|
||||
} |
|
||||
|
|
||||
.title-model { |
|
||||
position: relative; |
|
||||
text-align: center; |
|
||||
background-color: #fff; |
|
||||
padding: 20rpx 0; |
|
||||
border-bottom: 2rpx solid #eee; |
|
||||
} |
|
||||
|
|
||||
.title-model > text { |
|
||||
position: absolute; |
|
||||
right: 14rpx; |
|
||||
width: 46rpx; |
|
||||
height: 46rpx; |
|
||||
line-height: 38rpx; |
|
||||
background-color: #ccc; |
|
||||
color: #fff; |
|
||||
border-radius: 50%; |
|
||||
} |
|
||||
|
|
||||
.cont { |
|
||||
display: flex; |
|
||||
background-color: #fff; |
|
||||
overflow-y: scroll; |
|
||||
} |
|
||||
|
|
||||
.day { |
|
||||
flex: 2; |
|
||||
background-color: #fff; |
|
||||
border-right: 2rpx solid #f8f8f8; |
|
||||
text-align: center; |
|
||||
border-bottom: 20px solid #fff; |
|
||||
} |
|
||||
|
|
||||
.day view { |
|
||||
padding: 30rpx 12rpx; |
|
||||
font-size: 28rpx; |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
|
|
||||
.content-model { |
|
||||
flex: 4; |
|
||||
font-size: 28rpx; |
|
||||
border-bottom: 40rpx solid #fff; |
|
||||
background-color: #fff; |
|
||||
} |
|
||||
|
|
||||
.appoint { |
|
||||
text-align: left; |
|
||||
padding: 30rpx; |
|
||||
border-bottom: 2rpx solid #f8f8f8; |
|
||||
} |
|
||||
|
|
||||
.appoint text { |
|
||||
margin-left: 30rpx; |
|
||||
} |
|
||||
|
|
||||
.active_copy { |
|
||||
position: relative; |
|
||||
background-color: #d7f7e3; |
|
||||
color: #27c866; |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
|
|
||||
.active_copy::after { |
|
||||
content: ""; |
|
||||
width: 5rpx; |
|
||||
height: 94rpx; |
|
||||
background: #27c866; |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
right: 0; |
|
||||
} |
|
||||
|
|
||||
.longActive { |
|
||||
position: relative; |
|
||||
color: #27c866; |
|
||||
} |
|
||||
|
|
||||
.cuIcon-check { |
|
||||
position: absolute; |
|
||||
width: 30rpx; |
|
||||
left: 210rpx; |
|
||||
height: 16rpx; |
|
||||
border-bottom: 4rpx solid #27c866; |
|
||||
border-left: 4rpx solid #27c866; |
|
||||
transform: rotate(-45deg); |
|
||||
} |
|
||||
|
|
||||
scroll-view ::-webkit-scrollbar { |
|
||||
display: none; |
|
||||
width: 0; |
|
||||
height: 0; |
|
||||
color: transparent; |
|
||||
} |
|
||||
</style> |
|
||||
Loading…
Reference in new issue