（结束时间大于开始时间）
<template>
<view class="ditchIndex">
<view class="search-box" :style="{'height':totalHeight +'px'}">
<view :style="{'margin-top':menuTop +'px','height':menuHeight +'px','line-height':menuHeight +'px'}"
class="title">
<image src="../../static/img/btn_lxwm.png" mode="" class="img" @click="contactUsClick()"></image>我的推荐
</view>
</view>
<view :style="{'padding-top':menuTop +'px','height':menuHeight +'px'}"></view>
<!-- 中间内容开始 -->
<view class="tabBox" :style="{'margin-top':menuTop +'px','top':menuHeight +'px'}">
<view class="tab" @click="tabClick(0)">
<view class="txt" :class="{'addTab':indexTab==0}">荐客列表</view>
<view class="border" v-if="indexTab == 0"></view>
</view>
<view class="tab" @click="tabClick(1)">
<view class="txt" :class="{'addTab':indexTab==1}">推荐记录</view>
<view class="border" v-if="indexTab == 1"></view>
</view>
</view>
<view :style="{'padding-top':menuTop +'px','height':menuHeight +'px'}"></view>
<view class="ditchMain">
<view class="clientBox">
<view class="clientTime">
<view class="leave_cont">
<view class="ul">
<view class="li">
<text>开始时间</text>
<view class="flex1">
<picker mode="date" :value="start_date" :start="start_date" :end="other"
@change="bindDateChange">
<view class="date">{{start_date}}</view>
</picker>
</view>
</view>
<view class="li">
<text>结束时间</text>
<view class="flex1">
<picker mode="date" :value="start_date" :start="start_date"
@change="bindDateChange2">
<view class="date">{{other}}</view>
</picker>
</view>
</view>
</view>
</view>
</view>
<view class="clientsList"></view>
</view>
</view>
<!-- 中间内容结束 -->
<view class="height140"></view>
<view class="bottomBtn">
<view class="home btnTxt" @click="indexClick()">
<image src="../../static/img/btn_home_n.png" mode="widthFix" class="icon"></image>
<view>首页</view>
</view>
<view class="nominate btnTxt">
<image src="../../static/img/btn_tuijian_s.png" mode="widthFix" class="icon"></image>
<view>推荐</view>
</view>
<view class="my btnTxt" @click="myClick()">
<image src="../../static/img/btn_me_n.png" mode="widthFix" class="icon"></image>
<view>我的</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
const currentDate = this.getDate({
format: true
})
return {
indexTab: '0',
// 计算头部距离开始
statusBarHeight: 0, //状态栏的高度
navigatorHeight: 0, //导航栏高度
menuHeight: 0, //胶囊高度
menuTop: 0, //胶囊与顶部的距离
totalHeight: 0, //总高度
theMoreTop: 0, //更多那个组件距离屏幕顶部的距离
system: [],
menu: [],
// 计算头部距离结束
start_date: currentDate,
end_date: currentDate,
other: '请输入',
}
},
onLoad() {
uni.hideTabBar(); //不让底部显示tab选项
// 计算头部距离开始
//获取系统信息
uni.getSystemInfo({
success: res => {
this.system = res
}
})
//获取胶囊信息
this.menu = uni.getMenuButtonBoundingClientRect()
//计算组件高度
this.statusBarHeight = this.system.statusBarHeight //状态栏高度
this.navigatorHeight = (this.menu.top - this.system.statusBarHeight) * 2 + this.menu.height //导航栏高度
this.totalHeight = this.statusBarHeight + this.navigatorHeight //总高度
this.menuHeight = this.menu.height //胶囊高度
this.menuTop = this.menu.top //胶囊与顶部的距离
//监听【更多】组件距离顶部的距离
const query = wx.createSelectorQuery()
query.select('#more').boundingClientRect()
query.exec((res) => {
//console.log(res)
let top = res[0].bottom //id节点的下边界坐标
this.theMoreTop = top + this.totalHeight
})
// 计算头部距离结束
},
methods: {
// 选择时间开始
// 选择日期
bindDateChange: function(e) {
this.start_date = e.target.value
},
bindDateChange2: function(e) {
this.end_date = e.target.value;
this.other = this.end_date;
},
// 获取当前时间
getDate(type) {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
if (type === 'start') {
year = year - 60;
} else if (type === 'end') {
year = year + 2;
}
month = month > 9 ? month : '0' + month;;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
},
// 选择时间结束
// 点击切换选项
tabClick(index) {
if (index == 0) {
this.indexTab = 0
} else {
this.indexTab = 1
}
},
// 点击我的
myClick() {
// uni.redirectTo({ //这个是公司路由
// url: '/pages/clientDitch/firmMy'
// })
uni.redirectTo({ //这个是个人路由
url: '/pages/clientDitch/personMy'
})
},
// 点击首页
indexClick() {
uni.redirectTo({
url: '/pages/clientDitch/ditchIndex'
})
},
// showMore() {
// this.isShow = !this.isShow
// // 先展开500毫秒后再显示文字,收缩100毫秒后再隐藏文字
// if (this.isShowText) {
// setTimeout(() => {
// this.isShowText = !this.isShowText
// }, 200)
// } else {
// setTimeout(() => {
// this.isShowText = !this.isShowText
// }, 500)
// }
// }
}
}
</script>
<style lang="scss" scoped>
.ditchIndex {
.search-box {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background: #fff;
position: fixed;
z-index: 99;
.title {
width: 100%;
background: #fff;
text-align: center;
overflow: hidden;
position: relative;
.img {
position: absolute;
width: 44rpx !important;
height: 44rpx !important;
float: left;
margin-left: 30rpx;
margin-top: 5rpx;
}
}
}
.bottomBtn {
display: flex;
align-items: center;
width: 100%;
height: 100rpx;
background: #FFFFFF;
position: fixed;
bottom: 0;
.btnTxt {
display: flex;
flex-direction: column;
align-items: center;
font-size: 20rpx;
color: #999999;
width: 33.3%;
.icon {
width: 44rpx !important;
height: 44rpx !important;
margin-bottom: 4rpx;
margin-top: 8rpx;
}
}
}
.tabBox {
width: 100%;
height: 100rpx;
background: red;
position: fixed;
top: 0;
display: flex;
.tab {
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
height: 100%;
background: #FFFFFF;
.txt {
font-size: 32rpx;
color: #222222;
margin-top: 28rpx;
}
.border {
width: 60rpx;
height: 6rpx;
background: #4281EA;
border-radius: 3rpx;
margin-top: 21rpx;
}
.addTab {
font-weight: bold !important;
color: #222222 !important;
}
}
}
.ditchMain {
margin-right: 30rpx;
margin-left: 30rpx;
background: #FFFFFF;
border-radius: 20rpx;
padding-top: 30rpx;
padding-bottom: 30rpx;
.clientBox {
margin-right: 30rpx;
margin-left: 30rpx;
.clientTime {
.leave_cont .ul {
padding-left: 30rpx;
}
.leave_cont .ul .li {
display: flex;
align-items: center;
border-bottom: 1px solid #efefef;
}
.leave_cont .ul .li text {
padding: 40rpx 0;
font-size: 34rpx;
font-family: '黑体';
}
.leave_cont .ul .li .flex1 {
flex: 1;
text-align: right;
padding-right: 25rpx;
color: #999999;
font-size: 32rpx;
}
.date {
height: 42rpx;
}
}
.clientsList {}
}
}
}
</style>
二、
<template>
<view class="ditchIndex">
<view class="search-box" :style="{'height':totalHeight +'px'}">
<view :style="{'margin-top':menuTop +'px','height':menuHeight +'px','line-height':menuHeight +'px'}"
class="title">
<image src="../../static/img/btn_lxwm.png" mode="" class="img" @click="contactUsClick()"></image>我的推荐
</view>
</view>
<view :style="{'padding-top':menuTop +'px','height':menuHeight +'px'}"></view>
<!-- 中间内容开始 -->
<view class="tabBox" :style="{'margin-top':menuTop +'px','top':menuHeight +'px'}">
<view class="tab" @click="tabClick(0)">
<view class="txt" :class="{'addTab':indexTab==0}">荐客列表</view>
<view class="border" v-if="indexTab == 0"></view>
</view>
<view class="tab" @click="tabClick(1)">
<view class="txt" :class="{'addTab':indexTab==1}">推荐记录</view>
<view class="border" v-if="indexTab == 1"></view>
</view>
</view>
<view :style="{'padding-top':menuTop +'px','height':menuHeight +'px'}"></view>
<view class="ditchMain">
<view class="clientBox">
<view class="clientTime">
<view class="timeBox">
<image src="../../static/img/icon_time.png" mode="widthFix" class="timeImg"></image>
<view class="time1">
<picker mode="date" :value="start_date" @change="bindDateChange">
<view class="date">{{otherEnd}}</view>
</picker>
</view>
<view class="txt">至</view>
<view class="time2">
<picker mode="date" :value="start_date" @change="bindDateChange2">
<view class="date">{{other}}</view>
</picker>
</view>
</view>
<view class="leave_cont">
<view class="ul">
<view class="li">
<text>开始时间</text>
<view class="flex1">
<picker mode="date" :value="start_date" @change="bindDateChange">
<view class="date">{{start_date}}</view>
</picker>
</view>
</view>
<view class="li">
<text>结束时间</text>
<view class="flex1">
<picker mode="date" :value="start_date" @change="bindDateChange2">
<view class="date">{{other}}</view>
</picker>
</view>
</view>
</view>
</view>
</view>
<view class="clientsList"></view>
</view>
</view>
<!-- 中间内容结束 -->
<view class="height140"></view>
<view class="bottomBtn">
<view class="home btnTxt" @click="indexClick()">
<image src="../../static/img/btn_home_n.png" mode="widthFix" class="icon"></image>
<view>首页</view>
</view>
<view class="nominate btnTxt">
<image src="../../static/img/btn_tuijian_s.png" mode="widthFix" class="icon"></image>
<view>推荐</view>
</view>
<view class="my btnTxt" @click="myClick()">
<image src="../../static/img/btn_me_n.png" mode="widthFix" class="icon"></image>
<view>我的</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
const currentDate = this.getDate({
format: true
})
return {
indexTab: '0',
// 计算头部距离开始
statusBarHeight: 0, //状态栏的高度
navigatorHeight: 0, //导航栏高度
menuHeight: 0, //胶囊高度
menuTop: 0, //胶囊与顶部的距离
totalHeight: 0, //总高度
theMoreTop: 0, //更多那个组件距离屏幕顶部的距离
system: [],
menu: [],
// 计算头部距离结束
start_date: currentDate,
end_date: currentDate,
other: '请输入',
otherEnd: '请输入',
}
},
onLoad() {
uni.hideTabBar(); //不让底部显示tab选项
// 计算头部距离开始
//获取系统信息
uni.getSystemInfo({
success: res => {
this.system = res
}
})
//获取胶囊信息
this.menu = uni.getMenuButtonBoundingClientRect()
//计算组件高度
this.statusBarHeight = this.system.statusBarHeight //状态栏高度
this.navigatorHeight = (this.menu.top - this.system.statusBarHeight) * 2 + this.menu.height //导航栏高度
this.totalHeight = this.statusBarHeight + this.navigatorHeight //总高度
this.menuHeight = this.menu.height //胶囊高度
this.menuTop = this.menu.top //胶囊与顶部的距离
//监听【更多】组件距离顶部的距离
const query = wx.createSelectorQuery()
query.select('#more').boundingClientRect()
query.exec((res) => {
//console.log(res)
let top = res[0].bottom //id节点的下边界坐标
this.theMoreTop = top + this.totalHeight
})
// 计算头部距离结束
},
methods: {
// 选择时间开始
// 选择日期
bindDateChange: function(e) {
this.start_date = e.target.value
this.otherEnd = this.start_date;
},
bindDateChange2: function(e) {
this.end_date = e.target.value;
this.other = this.end_date;
},
// 获取当前时间
getDate(type) {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
if (type === 'start') {
year = year - 60;
} else if (type === 'end') {
year = year + 2;
}
month = month > 9 ? month : '0' + month;;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
},
// 选择时间结束
// 点击切换选项
tabClick(index) {
if (index == 0) {
this.indexTab = 0
} else {
this.indexTab = 1
}
},
// 点击我的
myClick() {
// uni.redirectTo({ //这个是公司路由
// url: '/pages/clientDitch/firmMy'
// })
uni.redirectTo({ //这个是个人路由
url: '/pages/clientDitch/personMy'
})
},
// 点击首页
indexClick() {
uni.redirectTo({
url: '/pages/clientDitch/ditchIndex'
})
},
// showMore() {
// this.isShow = !this.isShow
// // 先展开500毫秒后再显示文字,收缩100毫秒后再隐藏文字
// if (this.isShowText) {
// setTimeout(() => {
// this.isShowText = !this.isShowText
// }, 200)
// } else {
// setTimeout(() => {
// this.isShowText = !this.isShowText
// }, 500)
// }
// }
}
}
</script>
<style lang="scss" scoped>
.ditchIndex {
.search-box {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background: #fff;
position: fixed;
z-index: 99;
.title {
width: 100%;
background: #fff;
text-align: center;
overflow: hidden;
position: relative;
.img {
position: absolute;
width: 44rpx !important;
height: 44rpx !important;
float: left;
margin-left: 30rpx;
margin-top: 5rpx;
}
}
}
.bottomBtn {
display: flex;
align-items: center;
width: 100%;
height: 100rpx;
background: #FFFFFF;
position: fixed;
bottom: 0;
.btnTxt {
display: flex;
flex-direction: column;
align-items: center;
font-size: 20rpx;
color: #999999;
width: 33.3%;
.icon {
width: 44rpx !important;
height: 44rpx !important;
margin-bottom: 4rpx;
margin-top: 8rpx;
}
}
}
.tabBox {
width: 100%;
height: 100rpx;
background: red;
position: fixed;
top: 0;
display: flex;
.tab {
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
height: 100%;
background: #FFFFFF;
.txt {
font-size: 32rpx;
color: #222222;
margin-top: 28rpx;
}
.border {
width: 60rpx;
height: 6rpx;
background: #4281EA;
border-radius: 3rpx;
margin-top: 21rpx;
}
.addTab {
font-weight: bold !important;
color: #222222 !important;
}
}
}
.ditchMain {
margin-right: 30rpx;
margin-left: 30rpx;
background: #FFFFFF;
border-radius: 20rpx;
padding-top: 30rpx;
padding-bottom: 30rpx;
.clientBox {
margin-right: 30rpx;
margin-left: 30rpx;
.clientTime {
.timeBox{
display: flex;
align-items: center;
height: 60rpx;
border: 1rpx solid #ECECEC;
opacity: 1;
border-radius: 10rpx;
.timeImg{
width: 30rpx !important;
height: 30rpx !important;
margin-left: 20rpx;
}
}
// ===
.leave_cont .ul {
padding-left: 30rpx;
}
.leave_cont .ul .li {
display: flex;
align-items: center;
border-bottom: 1px solid #efefef;
}
.leave_cont .ul .li text {
padding: 40rpx 0;
font-size: 34rpx;
font-family: '黑体';
}
.leave_cont .ul .li .flex1 {
flex: 1;
text-align: right;
padding-right: 25rpx;
color: #999999;
font-size: 32rpx;
}
.date {
height: 42rpx;
}
}
.clientsList {}
}
}
}
</style>
