先上效果图
wxml
<!-- 确定窗口 -->
<view class="hidden" hidden='{{!ifName}}'>
<view class="toast_bg"></view>
<view class="showToast">
<text>选择课时</text>
<view class="toast_input">
<input placeholder="输入课时" type="idcard" placeholder-style='font-size:28rpx;' value="{{classNumber}}" bindinput="classInfo"></input>
</view>
<view>
<picker mode="date" value='{{valueText}}' bindchange="changeValue" end="{{end}}" start="{{start}}">
<view class="toast_inputdate">
<input placeholder="选择时间" disabled="{{true}}" name="birthDay" value="{{birthDay}}" placeholder-style='font-size:28rpx;'></input>
</view>
</picker>
</view>
<view class="etc_info">
<textarea class="etc_content" fixed="{{true}}" placeholder="备注" bindinput="etcInfo" placeholder-style='font-size:28rpx;' value="{{etcValue}}"></textarea>
</view>
<view class="toast_footer">
<view class="cancel" bind:tap='cancel'>取消</view>
<view class="certain" bind:tap="confirm">确定</view>
</view>
</view>
</view>
wxss
.toast-box {
width : 100%;
height : 100%;
opacity : 1;
position: fixed;
top : 0px;
left : 0px;
}
.toastbg {
opacity : 0.2;
background-color: black;
position : fixed;
width : 100%;
min-height : 100vh;
}
.hidden {
width : 100%;
height : 100vh;
display : flex;
justify-content: center;
}
.showToast {
position : fixed;
z-index : 2;
width : 610rpx;
background : #FFFFFF !important;
border-radius : 14rpx;
top : 25%;
display : flex;
flex-direction: column;
align-items : center;
}
.showToast>text {
height : 30rpx;
font-size : 32rpx;
font-family: PingFang SC;
font-weight: 400;
color : rgba(0, 0, 0, 1);
margin-top : 53rpx;
}
.toast_input {
margin-top : 56rpx;
width : 550rpx;
height : 88rpx;
background : rgba(250, 250, 250, 1);
border-radius: 12rpx;
}
.toast_input>input {
height : 88rpx;
margin-left: 30rpx;
}
.toast_time {
margin-top : 20rpx;
width : 500rpx;
height : 88rpx;
display : flex;
flex : row;
align-items: center;
}
.toast_time>text {
width : 183rpx;
text-align: center;
}
.etc_info {
margin-top : 20rpx;
height : 137rpx;
width : 550rpx;
border-radius: 12rpx;
background : rgba(250, 250, 250, 1);
}
.etc_content {
padding-top: 20rpx;
margin-top : 10rpx;
margin-left: 30rpx;
height : 110rpx;
width : 480rpx;
font-size : 32rpx;
font-family: PingFang SC;
font-weight: 400;
background : rgba(250, 250, 250, 1);
color : rgba(0, 0, 0, 1);
}
.toast_inputdate {
margin-top : 20rpx;
width : 550rpx;
height : 88rpx;
background : rgba(250, 250, 250, 1);
border-radius: 12rpx;
}
.toast_inputdate>input {
height : 88rpx;
margin-left: 30rpx;
}
.toast_footer {
margin-top : 40rpx;
display : flex;
flex-direction: row;
width : 100%;
height : 119rpx;
align-items : center;
}
.cancel {
width : 50%;
text-align : center;
height : 119rpx;
line-height: 119rpx;
font-size : 34rpx;
font-family: PingFang SC;
font-weight: 500;
color : rgba(153, 153, 153, 1);
border: 1rpx solid rgba(221,221,221,1);
}
.certain{
width: 50%;
height : 119rpx;
line-height: 119rpx;
text-align : center;
font-size : 34rpx;
font-family: PingFang SC;
font-weight: 500;
color : rgba(235, 104, 54, 1);
border-top:1rpx solid rgba(221,221,221,1);
}
.toast_bg {
position : fixed;
z-index : 2;
background-color: black;
opacity : 0.2;
width : 100%;
height : 100vh;
}
js
Page({
/**
* 页面的初始数据
*/
data: {
datas:{},
ifName: false,
birthDay: String,
etcValue: String,
classNumber: Number,
currentId: Number,
},
changeValue: function (e) {
var value = e.detail.value;
if (value) {
this.setData({
birthDay: value
});
}
},
bindChange: function (e) {
const val = e.detail.value
this.setData({
year: this.data.years[val[0]],
month: this.data.months[val[1]],
day: this.data.days[val[2]]
})
},
etcInfo(e) {
const etcValue = e.detail.value
this.data.etcValue = etcValue
this.setData({
etcValue: this.data.etcValue
})
},
classInfo(e) {
const classNumber = e.detail.value
this.data.classNumber = classNumber
this.setData({
classNumber: this.data.classNumber
})
},
select(e) {
wx.redirectTo({
url: '/pages/teachers/class_management/index',
})
},
tipWindow(e) {
// 方便之后签到传值
const id = e.currentTarget.dataset.id
this.setData({
ifName: true,
etcValue: '',
birthDay: '',
classNumber: '',
id
})
console.log(id)
},
// 取消签到窗口
cancel() {
this.setData({
ifName: false
})
},
// 确认签到窗口并发送值到后台
confirm() {
this.setData({
ifName: false
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
js根据自己需要去写吧,css应该是有冗余代码 自己测试去改,蒙层需要的自己改透明度。小程序的input和textarea样式设置在电脑预览不生效实际的样式是正常的。