init
This commit is contained in:
shuhongfan
@@ -0,0 +1,77 @@
|
||||
.getTimePicker {
|
||||
::v-deep .uni-popup__wrapper {
|
||||
height: 680rpx;
|
||||
background-color: white !important;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
height: 56rpx;
|
||||
padding: 30rpx 38rpx;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
|
||||
.header-title {
|
||||
font-size: 32rpx;
|
||||
color: #151515;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url('../../../static/icon21.png');
|
||||
}
|
||||
}
|
||||
.time-select{
|
||||
display: flex;
|
||||
.select-day{
|
||||
width: 296rpx;
|
||||
height: 500rpx;
|
||||
background: #F6F6F6;
|
||||
.select-day-item{
|
||||
height: 108rpx;
|
||||
line-height: 108rpx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.select-day-item.active{
|
||||
background: #fff;
|
||||
color:#E84134 ;
|
||||
}
|
||||
}
|
||||
.select-time{
|
||||
.time-item{
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
padding-left: 80rpx;
|
||||
margin-bottom: 46rpx;
|
||||
.time-value{
|
||||
padding-right: 126rpx;
|
||||
}
|
||||
.time-select{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url('../../../static/gouxuan.png');
|
||||
}
|
||||
}
|
||||
.time-item.active{
|
||||
color:#E84134 ;
|
||||
}
|
||||
::v-deep scroll-view{
|
||||
height:500rpx ;
|
||||
}
|
||||
|
||||
//隐藏滚动条
|
||||
::v-deep ::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
<!-- 期待上门时间弹窗 -->
|
||||
<template>
|
||||
<view class="getTimePicker">
|
||||
<uni-popup ref="popup" type="bottom" :safe-area="false">
|
||||
<view class="header">
|
||||
<view class="header-title">期望上门时间</view>
|
||||
<view class="close" @click="handleCancel"></view>
|
||||
</view>
|
||||
<!-- 时间选择区域 -->
|
||||
<view class="time-select">
|
||||
<view class="select-day">
|
||||
<view :class="selectedDay === index ?'active':''" class="select-day-item"
|
||||
@click="handleSelectDay(index,item)" v-for="(item,index) in selectDay" :key='index'>
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="select-time">
|
||||
<scroll-view scroll-y :scroll-top="scrollTop" @scroll="scroll">
|
||||
<view :class="selectedTime === item.value ?'active':''" class="time-item"
|
||||
v-for="(item,index) in (selectedDay===0?todayList.todos:dateList)" :key="index"
|
||||
@click='handleSelectTime(item.value,item.label)'>
|
||||
<view class="time-value">{{item.label}}</view>
|
||||
<view class="time-select" v-if='selectedTime === item.value'></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
} from 'vue';
|
||||
const emits = defineEmits(["@getTime"]);
|
||||
const popup = ref()
|
||||
let scrollTop = ref(0) //顶部位置
|
||||
let selectedDay = ref(0)
|
||||
let selectedDayLabel = ref('今天')
|
||||
let selectedTime = ref(0)
|
||||
let selectedTimeLabel = ref()
|
||||
const selectDay = reactive(['今天', '明天', '后天'])
|
||||
let todayList = reactive({
|
||||
todos: [{
|
||||
label: '一小时内',
|
||||
value: 1
|
||||
}]
|
||||
})
|
||||
onMounted(() => {
|
||||
todayList.todos = [...todayList.todos.concat(
|
||||
dateList.filter(item => item.value > new Date().getHours())
|
||||
)]
|
||||
})
|
||||
const dateList = reactive(
|
||||
// 弹窗中的时间列表
|
||||
Array.from({
|
||||
length: 11
|
||||
}, (v, k) => ({
|
||||
label: `${k + 9}:00-${k + 10}:00`,
|
||||
value: k + 9
|
||||
}))
|
||||
)
|
||||
const scroll = (e) => {
|
||||
scrollTop.value = e.detail.scrollTop
|
||||
}
|
||||
//选择具体时间段
|
||||
const handleSelectTime = (index, item) => {
|
||||
selectedTime.value = index
|
||||
selectedTimeLabel.value = item
|
||||
popup.value.close('bottom');
|
||||
emits('getTime', {
|
||||
selectedDay: selectedDay.value,
|
||||
selectedDayLabel: selectedDayLabel.value,
|
||||
selectedTime: selectedTime.value,
|
||||
selectedTimeLabel: selectedTimeLabel.value
|
||||
})
|
||||
}
|
||||
//选择哪天
|
||||
const handleSelectDay = (index, item) => {
|
||||
selectedDay.value = index
|
||||
scrollTop.value = 0
|
||||
selectedTime.value = 0
|
||||
selectedDayLabel.value = item
|
||||
}
|
||||
// 打开弹层
|
||||
const handleOpen = () => {
|
||||
popup.value.open('bottom');
|
||||
|
||||
};
|
||||
// 关闭弹层
|
||||
const handleCancel = () => {
|
||||
popup.value.close('bottom');
|
||||
}
|
||||
// 暴漏给父组件
|
||||
defineExpose({
|
||||
handleOpen
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped src='./getTimePicker.scss'></style>
|
||||
@@ -0,0 +1,80 @@
|
||||
.payType{
|
||||
::v-deep .uni-popup__wrapper {
|
||||
height:480rpx;
|
||||
background-color: white !important;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
padding: 29rpx 38rpx 43rpx;
|
||||
}
|
||||
|
||||
.headers {
|
||||
display: flex;
|
||||
height: 56rpx;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
|
||||
.header-title {
|
||||
font-size: 32rpx;
|
||||
color: #151515;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url('../../../static/guanbi.png');
|
||||
}
|
||||
}
|
||||
.contents{
|
||||
margin-top: 64rpx;
|
||||
.content-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.left-content{
|
||||
.title{
|
||||
font-size: 28rpx;
|
||||
color: #151515;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.subTitle{
|
||||
font-size: 24rpx;
|
||||
color: #888888;
|
||||
}
|
||||
}
|
||||
.right-content{
|
||||
.active,.checkbox{
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.checkbox{
|
||||
background-image: url('../../../static/checkbox.png');
|
||||
}
|
||||
.active{
|
||||
|
||||
background-image: url('../../../static/checkboxActive.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-item:last-child{
|
||||
margin-top: 60rpx;
|
||||
}
|
||||
}
|
||||
.footers{
|
||||
.btn{
|
||||
width: 404rpx;
|
||||
height: 88rpx;
|
||||
background-color: #E84134;
|
||||
border-radius: 44rpx;
|
||||
text-align: center;
|
||||
line-height: 88rpx;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
margin-top: 43rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
<!-- 付款方式弹窗 -->
|
||||
<template>
|
||||
<view class="payType">
|
||||
<uni-popup ref="popup" type="bottom" :safe-area="false">
|
||||
<view class="headers">
|
||||
<view class="header-title">付款方式</view>
|
||||
<view class="close" @click="handleCancel"></view>
|
||||
</view>
|
||||
<view class="contents">
|
||||
<view class="content-item" v-for="(item,index) in list" :key="index" @click="handleChangePayType(item)">
|
||||
<view class="left-content">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="subTitle">{{item.subTitle}}</view>
|
||||
</view>
|
||||
<view class="right-content">
|
||||
<view class="checkbox" :class="{active:item.value===payType}"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footers" @click="handleCancel">
|
||||
<view class="btn">确定</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
} from 'vue';
|
||||
const emits = defineEmits(["@getPayType"]);
|
||||
const popup = ref()
|
||||
const payType = ref(1)
|
||||
const list = reactive([
|
||||
{
|
||||
title:'寄付',
|
||||
subTitle:'快递员取件时，寄方可在线支付、扫快递员收款码进行支付',
|
||||
value:1
|
||||
},
|
||||
{
|
||||
title:'到付',
|
||||
subTitle:'快递签收后，收方可通过扫快递员收款码进行支付',
|
||||
value:2
|
||||
}
|
||||
])
|
||||
//选择付款方式
|
||||
const handleChangePayType =(item)=>{
|
||||
payType.value = item.value
|
||||
}
|
||||
// 打开弹层
|
||||
const handleOpen = () => {
|
||||
popup.value.open('bottom');
|
||||
|
||||
};
|
||||
// 关闭弹层
|
||||
const handleCancel = () => {
|
||||
popup.value.close('bottom');
|
||||
emits('getPayType',payType.value)
|
||||
}
|
||||
// 暴漏给父组件
|
||||
defineExpose({
|
||||
handleOpen
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" src='./payType.scss' scoped></style>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user