js:
// page/client/pages/bring-watch/bring-watch.js
const app=getApp();
const date=
new Date();
const hours = [];
const minutes = [];
for (
let i =
0; i <=
23; i++) {
hours.push(i)
}
for (
let i =
0; i <=
59; i++) {
minutes.push(i)
}
Page({
/**
* 页面的初始数据
*/
data: {
isScreening: [
'',
'screening-animation-open',
'screening-animation-closed'],
//筛选动画状态
screeningNo:
0,
//筛选动画的选择项
id:
'',
//项目ID
prohectName:
'***',
//项目名称
clientNmae:
'***',
//客户姓名
clientPhone:
'***',
//客户手机
companyName:
'***',
//公司名称
pleaseChoseTime:
"请选择",
choseIndexYear:
'',
//选中的下标
isShow:
false,
//下面是否显示
isShowBJ:
false,
//背景是否显示
isShowData:
false,
//年月日
isShowTime:
false,
//时分
years: [],
//年集合
year:
'',
months: [],
//月集合
month:
'',
days: [],
//日集合
day:
'',
hours: hours,
hour:
'',
//本时
minutes: minutes,
minute:
'',
//本分
valueYear: [],
//初始选择年
valueMonth: [],
//初始选择月
valueDay: [],
//初始选择日
valueTime: [],
//时分选择
},
//初始化年月日
attached:
function () {
var that=
this;
var years = [];
var months = [];
var days = [];
for (
let i =
2000; i <= date.getFullYear()+
10; i++) {
years.push(i);
if (i == date.getFullYear()){
that.setData({
valueYear: [i-
2000],
year:i
})
// console.log(that.data.valueYear)
}
}
for (
let i =
1; i <=
12; i++) {
months.push(i);
if (i == date.getMonth()+
1) {
that.setData({
valueMonth: [i-
1],
month:i,
})
}
}
days = that.getDays(date.getFullYear(), date.getMonth() +
1);
that.setData({
years: years,
months: months,
days: days
});
},
//日
getDays(year, month) {
var that =
this
var days = [];
month = parseInt(month,
10);
var mydate =
new Date(year, month,
0);
var maxDay = mydate.getDate();
for (
let i =
1; i <= maxDay; i++) {
days.push(i);
if (i == date.getDate()) {
that.setData({
valueDay: [i -
1],
day: i
})
}
}
return days;
},
//改变年
bindChangeYear:
function(e){
var that=
this;
//年改变，月日要滑到一月，天要重新计算该年该月多少天
var days = [];
var curYear = that.data.years[e.detail.value];
days = that.getDays(curYear,
1);
that.setData({
days: days,
valueYear: e.detail.value,
valueMonth: [
0],
valueDay: [
0],
year: that.data.years[e.detail.value]
});
},
//改变月
bindChangeMonth:
function(e){
var that =
this;
var days = [];
var curYear = that.data.years[that.data.valueYear];
var curMonth = that.data.months[e.detail.value];
days = that.getDays(curYear, curMonth);
that.setData({
days: days,
valueMonth: e.detail.value,
valueDay: [
0],
month: that.data.months[e.detail.value]
});
},
//改变日
bindChangeDay:
function (e){
var that =
this;
that.setData({
valueDay: e.detail.value,
day: that.data.days[e.detail.value]
});
},
//时分
bindChangeTime:
function(e){
var that =
this;
that.setData({
hour: e.detail.value[
0],
minute: e.detail.value[
2],
valueTime: [e.detail.value[
0],
'', e.detail.value[
2]]
});
},
//点击请选择 弹出
pleaseChose:
function(){
var that=
this;
that.setData({
screeningNo:
1,
//动画开始
isShow:
true,
isShowBJ:
true,
isShowData:
true,
})
},
//点击确认 弹回
sureTime:
function(){
var that =
this;
var curYear = that.data.years[that.data.valueYear];
var curMonth = that.data.months[that.data.valueMonth];
if (curMonth <
10) {
curMonth =
'0' + curMonth
}
var curDay = that.data.days[that.data.valueDay];
if (curDay <
10) {
curDay =
'0' + curDay
}
var curhour = that.data.hour;
if (curhour <
10) {
curhour =
'0' + curhour
}
var curminute = that.data.minute;
if (curminute <
10) {
curminute =
'0' + curminute
}
that.setData({
pleaseChoseTime: curYear +
'-' + curMonth +
'-' + curDay +
' ' + curhour +
':' + curminute,
screeningNo:
2,
//动画结束
})
setTimeout(
function () {
that.setData({
isShow:
false,
isShowBJ:
false,
isShowData:
false,
isShowTime:
false,
})
},
310)
},
//点击取消 弹回
cancelTime:
function(){
var that =
this;
that.setData({
screeningNo:
2,
//动画结束
})
setTimeout(
function () {
that.setData({
isShow:
false,
isShowBJ:
false,
isShowData:
false,
isShowTime:
false,
})
},
310)
},
//选择 年月日
choseData:
function(){
var that =
this;
that.setData({
isShowData:
true,
isShowTime:
false,
})
},
//选择 时分
choseTime:
function () {
var that =
this;
that.setData({
isShowData:
false,
isShowTime:
true,
})
},
//提交
sure:
function () {
var that=
this;
var timeChose = that.data.pleaseChoseTime
//2018-05-06 11:18
// console.log(timeChose)
// var timeStampChose = new Date(timeChose).getTime() ;
var timeStampChose =
new Date(timeChose.replace(/-/g,
'/')).getTime()
//兼容 苹果机选择的时间戳
// console.log(timeStampChose +' 选择的时间')
var timestampNow = Date.parse(
new Date()) ;
//现在的时间戳
// console.log(timestampNow + ' 现在的时间')
if (timeStampChose && timeStampChose > timestampNow){
wx.request({
url:
`${app.data.requestUrl
}/sale/customer/talkLook`,
method:
'post',
data: {
id: that.data.id,
launchSeeTime: timeStampChose,
},
header: {
'content-type':
'application/json',
'token': app.data.mytoken,
},
success:
function (res) {
// console.log(res.data)
if (res.data.code !==
200) {
app.showToast(app.data.appError,
'none');
return;
}
else{
app.showToast(
'发起带看成功',
'success');
app.isBringSuccess=
1;
setTimeout(
function(){
wx.navigateBack({
delta:
1
})
},
1500)
}
},
fail:
function (err) { app.showToast(app.data.appError,
'none'); console.log(
'fail')},
//请求失败
complete:
function () {
}
})
}
else
if (timeStampChose < timestampNow){
var formNow = app.formatTime(timestampNow,
"Y-MM-dd hh:mm")
app.showToast(
'只能选择'+formNow+
'之后的时间',
'none')
}
else {
app.showToast(
'请选择带看时间',
'none')
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad:
function (options) {
this.attached()
console.log(options)
this.setData({
id: options.id,
//客户项目id
prohectName: options.houseTitle,
//项目名称
clientNmae: options.customerName,
//客户姓名
clientPhone: options.phoneNumber,
//客户手机
companyName: options.customerCompanyName
//公司名称
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady:
function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow:
function () {
var myDate =
new Date();
this.setData({
hour: myDate.getHours(),
//本时
minute: myDate.getMinutes(),
valueTime: [myDate.getHours(),
'', myDate.getMinutes()],
//时分选择
})
//由于date的原因， date取的值为刚开页面的 date
console.log(
this.data.valueTime)
console.log(
this.data.hour)
console.log(
this.data.minute)
console.log(date.getMinutes())
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide:
function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload:
function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh:
function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom:
function () {
},
})
wxml:
<
view
class=
"list-menu">
<
view
class=
"navigator"
wx:if=
"{{prohectName&&prohectName!='undefined'}}">
<
view
class=
"navigator-text">项目名称
</
view
>
<
view
class=
"navigator-content-text">{{prohectName}}
</
view
>
</
view
>
<
view
class=
"navigator"
wx:if=
"{{clientNmae&&clientNmae!='undefined'}}">
<
view
class=
"navigator-text">客户姓名
</
view
>
<
view
class=
"navigator-content-text">{{clientNmae}}
</
view
>
</
view
>
<
view
class=
"navigator"
wx:if=
"{{clientPhone&&clientPhone!='undefined'}}">
<
view
class=
"navigator-text">客户手机
</
view
>
<
view
class=
"navigator-content-text">{{clientPhone}}
</
view
>
</
view
>
<
view
class=
"navigator"
wx:if=
"{{companyName&&companyName!='undefined'}}">
<
view
class=
"navigator-text">公司名称
</
view
>
<
view
class=
"navigator-content-text">{{companyName}}
</
view
>
</
view
>
</
view
>
<
view
class=
"navigator navigator-time">
<
view
class=
"navigator-text navigator-text-time">带看开始时间
</
view
>
<
view
catchtap=
'pleaseChose'
class=
"navigator-content-picker-text navigator-content-picker-text-time {{pleaseChoseTime=='请选择'?'text-gary':'text-black'}}">
{{pleaseChoseTime}}
</
view
>
<
image
src=
'https://img.cdn.zhaoshang800.com/img/2018/04/26/broker/d20d4c25-1f23-4502-a78b-7fcf1ef5a158.png'
class=
'picker-img'></
image
>
</
view
>
<
view
wx:if=
"{{isShowBJ}}"
catchtap=
'cancelTime'
class=
'picker-blackBJ'>
</
view
>
<
view
wx:if=
"{{isShow}} "
class=
'picker-chose {{isScreening[screeningNo]}}'
>
<
view
class=
'picker-chose-top'>
<
view
catchtap=
'choseData'
class=
"chose-data {{isShowData==true?'chose-active':''}} "
>
{{year}}年
<
text
wx:if=
"{{month<10}}">0
</
text
>{{month}}月
<
text
wx:if=
"{{day<10}}">0
</
text
>{{day}}日
</
view
>
<
view
catchtap=
'choseTime'
style=
'margin-left:40rpx;'
class=
"chose-data {{isShowTime==true?'chose-active':''}}">
<
text
wx:if=
"{{hour<10}}">0
</
text
>{{hour}} ：
<
text
wx:if=
"{{minute<10}}">0
</
text
>{{minute}}
</
view
>
</
view
>
<!--选择器 -->
<
view
class=
'selector-data'
style=
"width: 750rpx; height: 430rpx;"
wx:if=
"{{isShowData}}">
<
picker-view
indicator-style=
"height: 40px;"
style=
"width: 250rpx; height: 430rpx;"
value=
"{{valueYear}}"
bindchange=
"bindChangeYear">
<
picker-view-column
>
<
view
wx:for=
"{{years}}"
wx:key=
"*this"
style=
"line-height: 40px">
<
text
class=
"{{valueYear==index?'picker-botRed':''}}"
>{{item}}
</
text
>
</
view
>
</
picker-view-column
>
</
picker-view
>
<
picker-view
indicator-style=
"height: 40px;"
style=
"width: 250rpx; height: 430rpx;"
value=
"{{valueMonth}}"
bindchange=
"bindChangeMonth">
<
picker-view-column
>
<
view
wx:for=
"{{months}}"
wx:key=
"*this"
style=
"line-height: 40px">
<
text
class=
"{{valueMonth==index?'picker-botRed':''}}"
>
<
text
wx:if=
"{{item<10}}">0
</
text
>{{item}}
</
text
>
</
view
>
</
picker-view-column
>
</
picker-view
>
<
picker-view
indicator-style=
"height: 40px;"
style=
"width: 250rpx; height: 430rpx;"
value=
"{{valueDay}}"
bindchange=
"bindChangeDay">
<
picker-view-column
>
<
view
wx:for=
"{{days}}"
wx:key=
"*this"
style=
"line-height: 40px">
<
text
class=
"{{valueDay==index?'picker-botRed':''}} "
>
<
text
wx:if=
"{{item<10}}">0
</
text
>{{item}}
</
text
>
</
view
>
</
picker-view-column
>
</
picker-view
>
</
view
>
<
picker-view
wx:if=
"{{isShowTime}}"
indicator-style=
"height: 40px;"
style=
"width: 750rpx; height: 430rpx;"
value=
"{{valueTime}}"
bindchange=
"bindChangeTime">
<
picker-view-column
>
<
view
wx:for=
"{{hours}}"
wx:key=
"*this"
style=
"line-height: 40px;padding-left:180rpx;">
<
text
class=
"{{valueTime[0]==index?'picker-botRed':''}} ">
<
text
wx:if=
"{{item<10}}">0
</
text
>{{item}}
</
text
>
</
view
>
</
picker-view-column
>
<
picker-view-column
style=
"line-height: 40px">
:
</
picker-view-column
>
<
picker-view-column
>
<
view
wx:for=
"{{minutes}}"
wx:key=
"*this"
style=
"line-height: 40px;padding-right:180rpx;">
<
text
class=
"{{valueTime[2]==index?'picker-botRed':''}} ">
<
text
wx:if=
"{{item<10}}">0
</
text
>{{item}}
</
text
>
</
view
>
</
picker-view-column
>
</
picker-view
>
<
view
class=
'picker-chose-bottom'>
<
view
catchtap=
'cancelTime'
style=
'border-right: 1px solid #E0E3E6;'
class=
'picker-chose-bottom-view'>取消
</
view
>
<
view
catchtap=
'sureTime'
class=
"picker-chose-bottom-view">确定
</
view
>
</
view
>
</
view
>
<
view
class=
"button-area">
<
button
class=
"confirm-button"
bindtap=
"sure"> 提交
</
button
>
</
view
>
wxss:
.list-menu{
margin-top:
20
rpx;
padding:
30
rpx
0;
background-color:
#fff;
}
.navigator {
padding:
10
rpx
20
rpx
10
rpx
20
rpx;
position:
relative;
display:
flex;
align-items:
center;
}
.navigator:first-child:before {
display:
none;
}
.navigator-text {
flex:
1;
font-size:
28
rpx;
color:
#656565;
font-weight:
400;
}
.navigator-content-text,
.navigator-content-picker-text{
font-size:
28
rpx;
color:
#656565;
font-weight:
400;
}
.navigator-text-time{
font-size:
34
rpx;
color:
#323232;
}
.navigator-time{
margin-top:
20
rpx;
border:
1
rpx
solid
#E5E5E5;
padding:
20
rpx
20
rpx
20
rpx
20
rpx;
background-color:
#fff;
}
.navigator-content-picker-text-time{
font-size:
34
rpx;
color:
#989898;
display:
inline-block;
padding-right:
0
rpx;
}
.picker-img{
width:
30
rpx;
height:
30
rpx;
padding-left:
10
rpx;
}
.top{
display:
inline-block;
}
.topRight{
margin-left:
10
rpx;
}
.button-area{
margin-top:
260
rpx;
box-sizing:
border-box;
width:
100%;
padding:
0
40
rpx;
}
.confirm-button{
background-color:
#DD2534;
color:
#fff;
border-radius:
10
rpx;
font-size:
36
rpx;
}
.picker-chose{
position:
fixed;
bottom:
0;
left:
0;
background:
#fff;
z-index:
99;
transform:
translateY(
100%
)
}
.picker-blackBJ{
width:
100%;
position:
absolute;
top:
0;
bottom:
0;
right:
0;
z-index:
98;
background-color:
rgba(
0,
0,
0,
0.5
);
}
.picker-chose-top{
display:
flex;
align-items:
center;
justify-content:
center;
border-bottom:
1px
solid
#E0E3E6;
}
.chose-data{
height:
100%;
border-bottom:
1px
solid
#fff;
padding:
20
rpx
0;
}
.chose-active{
border-bottom:
1px
solid
#DD2534;
}
picker-view-column{
text-align:
center;
}
.picker-chose-bottom{
height:
100
rpx;
width:
100%;
display:
flex;
align-items:
center;
justify-content:
center;
border-top:
1px
solid
#E0E3E6;
}
.picker-chose-bottom-view{
flex:
1;
font-size:
36
rpx;
color:
#3186DA;
height:
100%;
text-align:
center;
line-height:
100
rpx;
}
.text-black{
color:
#323232;
}
.text-gary{
color:
#989898;
}
.picker-botRed{
border-bottom:
red
1px
solid;
}
.picker-invalid{
color:
#989898;
}
/*尝试 */
.selector-data{
display:
flex;
}
.selector-data
picker-view{
flex:
1;
}
.screening-animation-open{
animation:
screening-open
0.3s
1
forwards
ease-in-out;
}
.screening-animation-closed{
animation:
screening-closed
0.3s
1
forwards
ease-in-out;
}
@keyframes
screening-open{
0%{
transform:
translateY(
100%
);
}
100%{
transform:
translateY(
0%
);
}
}
@keyframes
screening-closed{
0%{
transform:
translateY(
0%
);
}
100%{
transform:
translateY(
100%
);
}
}