@@ -0,0 +1,536 @@ | |||
<template> | |||
<view name='KXDateTime'> | |||
<text @click="open">{{date?date:placeholder?placeholder:'请选择'}}</text> | |||
<uni-popup ref="popup" type="bottom"> | |||
<view class="but"> | |||
<text @click="close">取消</text> | |||
<text @click="ok">确定</text> | |||
</view> | |||
<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange"> | |||
<picker-view-column> | |||
<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view> | |||
</picker-view-column> | |||
<picker-view-column> | |||
<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view> | |||
</picker-view-column> | |||
<picker-view-column> | |||
<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view> | |||
</picker-view-column> | |||
<picker-view-column> | |||
<view class="item" v-for="(item,index) in hours" :key="index">{{item}}时</view> | |||
</picker-view-column> | |||
<picker-view-column> | |||
<view class="item" v-for="(item,index) in mins" :key="index">{{item}}分</view> | |||
</picker-view-column> | |||
</picker-view> | |||
</uni-popup> | |||
</view> | |||
</template> | |||
<script> | |||
import uniPopup from '../uni-popup/uni-popup.vue' | |||
export default { | |||
name: 'KXDateTime', | |||
components: { | |||
uniPopup | |||
}, | |||
props: { | |||
date: '', | |||
start: '', | |||
end: '', | |||
default: '', | |||
placeholder:'' | |||
}, | |||
data() { | |||
// const date = new Date() | |||
// const years = [] | |||
// const year = date.getFullYear() | |||
// const months = [] | |||
// const month = date.getMonth() + 1 | |||
// const days = [] | |||
// const day = date.getDate() | |||
// const hours = [] | |||
// const hour = date.getHours() | |||
// const mins = [] | |||
// const min = date.getMinutes() | |||
// let start; | |||
// if (this.start) { | |||
// start = this.start.replace(/-/g, "/") | |||
// start = new Date(start); | |||
// } else { | |||
// start = new Date(0); | |||
// } | |||
// let starty = start.getFullYear(); //开始年份 | |||
// let end; | |||
// if (this.end) { | |||
// end = this.end.replace(/-/g, "/") | |||
// end = new Date(end); | |||
// } else { | |||
// end = new Date(); | |||
// } | |||
// let endy = end.getFullYear(); //终止年份 | |||
// for (let i = starty; i <= endy; i++) { | |||
// years.push(i) | |||
// } | |||
let defaultvalue = this.default; | |||
let value = [9999, 99, 99, 99, 99]; | |||
if (defaultvalue == 'end') { | |||
value = [9999, 99, 99, 99, 99] | |||
} else if (defaultvalue == 'start') { | |||
value = [0, 0, 0, 0, 0] | |||
} | |||
return { | |||
title: 'picker-view', | |||
years: [], | |||
year: '', | |||
months: [], | |||
month: '', | |||
days: [], | |||
day: '', | |||
hours: [], | |||
hour: '', | |||
mins: [], | |||
min: '', | |||
value, | |||
valueStr: '', | |||
visible: true, | |||
strYMDHM: '', | |||
indicatorStyle: `height: 80rpx;` | |||
} | |||
}, | |||
methods: { | |||
open() { | |||
let start; | |||
if (this.start) { | |||
start = this.start.replace(/-/g, "/") | |||
start = new Date(start); | |||
} else { | |||
start = new Date(0); | |||
} | |||
let starty = start.getFullYear(); //开始年份 | |||
let end; | |||
if (this.end) { | |||
end = this.end.replace(/-/g, "/") | |||
end = new Date(end); | |||
} else { | |||
end = new Date(); | |||
} | |||
if (start > end) { | |||
uni.showToast({ | |||
title: '时间范围错误!', | |||
icon: 'none', | |||
duration: 2000 | |||
}); | |||
return false | |||
} | |||
this.$forceUpdate(); | |||
if (this.valueStr) { | |||
this.value = JSON.parse(this.valueStr); | |||
setTimeout(this.amend, 100) | |||
this.$refs.popup.open() | |||
} else { | |||
setTimeout(this.amend, 100) | |||
this.$refs.popup.open() | |||
} | |||
}, | |||
close() { | |||
this.$refs.popup.close() | |||
}, | |||
ok() { | |||
let day = this.day < 10 ? '0' + this.day : this.day, | |||
month = this.month < 10 ? '0' + this.month : this.month, | |||
hour = this.hour < 10 ? '0' + this.hour : this.hour, | |||
min = this.min < 10 ? '0' + this.min : this.min | |||
let data = this.year + '-' + month + '-' + day + ' ' + hour + ':' + min; | |||
this.$emit("rundata", data) | |||
this.$refs.popup.close() | |||
}, | |||
bindChange: function(e) { | |||
let val = e.detail.value | |||
this.valueStr = JSON.stringify(val); | |||
this.year = this.years[val[0]] | |||
this.month = this.months[val[1]] | |||
this.day = this.days[val[2]] | |||
this.hour = this.hours[val[3]] | |||
this.min = this.mins[val[4]] | |||
}, | |||
//数据校正 | |||
amend() { | |||
if (this.valueStr) { | |||
let val = JSON.parse(this.valueStr); | |||
this.year = this.years[val[0]] | |||
this.month = this.months[val[1]] | |||
this.day = this.days[val[2]] | |||
this.hour = this.hours[val[3]] | |||
this.min = this.mins[val[4]] | |||
} | |||
let start; | |||
if (this.start) { | |||
start = this.start.replace(/-/g, "/") | |||
start = new Date(start); | |||
} else { | |||
start = new Date(0); | |||
} | |||
let starty = start.getFullYear(); //开始年份 | |||
let startm = start.getMonth() + 1; //开始月份 | |||
let startd = start.getDate(); //开始天 | |||
let starth = start.getHours(); //开始小时 | |||
let startmin = start.getMinutes(); //开始分钟 | |||
let end; | |||
if (this.end) { | |||
end = this.end.replace(/-/g, "/") | |||
end = new Date(end); | |||
} else { | |||
end = new Date(); | |||
} | |||
let endy = end.getFullYear(); //终止年份 | |||
let endm = end.getMonth() + 1; //终止月份 | |||
let endd = end.getDate(); //终止天 | |||
let endh = end.getHours(); //终止小时 | |||
let endmin = end.getMinutes(); //终止分钟 | |||
//如果选择起始年份 | |||
let years = [], | |||
months = [], | |||
days = [], | |||
hours = [], | |||
mins = []; | |||
let month31 = [1, 3, 5, 7, 8, 10, 12], | |||
month30 = [4, 6, 9, 11]; | |||
let daysNum; | |||
for (let i = starty; i <= endy; i++) { | |||
years.push(i) | |||
} | |||
if (month31.indexOf(this.month) > -1) { | |||
daysNum = 31 | |||
} else if (month30.indexOf(this.month) > -1) { | |||
daysNum = 30 | |||
} else { | |||
if (this.year % 4 == 0) { | |||
daysNum = 29 | |||
} else { | |||
daysNum = 28 | |||
} | |||
} | |||
let defaultvalue = this.default; | |||
let defaulty = endy, | |||
defaultm = endm, | |||
defaultd = endd, | |||
defaulth = endh, | |||
defaultmin = endmin; | |||
if (defaultvalue == 'end') { | |||
defaulty = endy; | |||
defaultm = endm; | |||
defaultd = endd; | |||
defaulth = endh; | |||
defaultmin = endmin; | |||
} else if (defaultvalue == 'start') { | |||
defaulty = starty; | |||
defaultm = startm; | |||
defaultd = startd; | |||
defaulth = starth; | |||
defaultmin = startmin; | |||
} | |||
//当数值异常是设施默认 | |||
if (!this.year) { | |||
this.year = defaulty | |||
} | |||
if (!this.month) { | |||
this.month = defaultm | |||
} | |||
if (!this.day) { | |||
this.day = defaultd | |||
} | |||
if (!this.hour && this.hour !== 0) { | |||
this.hour = defaulth | |||
} | |||
if (!this.min && this.min !== 0) { | |||
this.min = defaultmin | |||
} | |||
//判断年份是在起始年 | |||
if (this.year == starty) { | |||
//判断起始年份和终止年份是否相等 | |||
if (starty == endy) { | |||
//如果等,那么月份取两者中间 | |||
for (let i = startm; i <= endm; i++) { | |||
months.push(i) | |||
} | |||
//判断月份是在起始月 | |||
if (this.month == startm) { | |||
//判断起始月和终止月是否相等 | |||
if (startm == endm) { | |||
//如果等,那么天数取两者中间 | |||
for (let i = startd; i <= endd; i++) { | |||
days.push(i) | |||
} | |||
//判断日是在起始日 | |||
if (this.day == startd) { | |||
//判断起始ri和终止日是否相等 | |||
if (startd == endd) { | |||
//如果等,那么小时取两者中间 | |||
for (let i = starth; i <= endh; i++) { | |||
hours.push(i) | |||
} | |||
//判断小时是在起始小时 | |||
if (this.hour == starth) { | |||
//判断起始和终止是否相等 | |||
if (starth == endh) { | |||
//如果等,那么分钟取两者中间 | |||
for (let i = startmin; i <= endmin; i++) { | |||
mins.push(i) | |||
} | |||
} else { | |||
//如果不等,到59 | |||
for (let i = startmin; i <= 59; i++) { | |||
mins.push(i) | |||
} | |||
} | |||
} else { | |||
//判断小时是否在截止小时 | |||
if (this.hour == endh) { | |||
//终止小时取到截止分钟 | |||
for (let i = 0; i <= endmin; i++) { | |||
mins.push(i) | |||
} | |||
} | |||
} | |||
} else { | |||
//如果不等,到23小时 | |||
for (let i = starth; i <= 23; i++) { | |||
hours.push(i) | |||
} | |||
//判断小时是在起始小时 | |||
if (this.hour == starth) { | |||
for (let i = startmin; i <= 59; i++) { | |||
mins.push(i) | |||
} | |||
} | |||
} | |||
} else { | |||
//判断日是否在截止日 | |||
if (this.day == endd) { | |||
//终止日取到截止小时 | |||
for (let i = 0; i <= endh; i++) { | |||
hours.push(i) | |||
} | |||
//判断小时是否在截止小时 | |||
if (this.hour == endh) { | |||
//终止小时取到截止分钟 | |||
for (let i = 0; i <= endmin; i++) { | |||
mins.push(i) | |||
} | |||
} | |||
} | |||
} | |||
} else { | |||
//如果不等, | |||
for (let i = startd; i <= daysNum; i++) { | |||
days.push(i) | |||
} | |||
if (this.day == startd) { | |||
for (let i = starth; i <= 23; i++) { | |||
hours.push(i) | |||
} | |||
//判断小时是在起始小时 | |||
if (this.hour == starth) { | |||
for (let i = startmin; i <= 59; i++) { | |||
mins.push(i) | |||
} | |||
} | |||
} | |||
} | |||
} else { | |||
//判断月份是在终止月 | |||
if (this.month == endm) { | |||
//终止月取到截止天 | |||
for (let i = 1; i <= endd; i++) { | |||
days.push(i) | |||
} | |||
//判断日是否在截止日 | |||
if (this.day == endd) { | |||
//终止日取到截止小时 | |||
for (let i = 0; i <= endh; i++) { | |||
hours.push(i) | |||
} | |||
//判断小时是否在截止小时 | |||
if (this.hour == endh) { | |||
//终止小时取到截止分钟 | |||
for (let i = 0; i <= endmin; i++) { | |||
mins.push(i) | |||
} | |||
} | |||
} | |||
} | |||
} | |||
} else { | |||
//如果不等,去开始到12月份 | |||
for (let i = startm; i <= 12; i++) { | |||
months.push(i) | |||
} | |||
//判断月份是在起始月 | |||
if (this.month == startm) { | |||
//是,取天数之后 | |||
for (let i = startd; i <= daysNum; i++) { | |||
days.push(i) | |||
} | |||
//判断日是在起始日 | |||
if (this.day == startd) { | |||
//是,qu起始小时之后 | |||
for (let i = starth; i <= 23; i++) { | |||
hours.push(i) | |||
} | |||
//判断小时是在起始小时 | |||
if (this.hour == starth) { | |||
//是,qu起始分钟之后 | |||
for (let i = startmin; i <= 59; i++) { | |||
mins.push(i) | |||
} | |||
} | |||
} | |||
} | |||
} | |||
} else if (this.year == endy) { | |||
//年份中终止年 | |||
//月份取到终止月 | |||
for (let i = 1; i <= endm; i++) { | |||
months.push(i) | |||
} | |||
//判断月份是在终止月 | |||
if (this.month == endm) { | |||
//终止月取到截止天 | |||
for (let i = 1; i <= endd; i++) { | |||
days.push(i) | |||
} | |||
//判断日是否在截止日 | |||
if (this.day == endd) { | |||
//终止日取到截止小时 | |||
for (let i = 0; i <= endh; i++) { | |||
hours.push(i) | |||
} | |||
//判断小时是否在截止小时 | |||
if (this.hour == endh) { | |||
//终止小时取到截止分钟 | |||
for (let i = 0; i <= endmin; i++) { | |||
mins.push(i) | |||
} | |||
} | |||
} | |||
} | |||
} else { | |||
for (let i = 1; i <= 12; i++) { | |||
months.push(i) | |||
} | |||
for (let i = 1; i <= daysNum; i++) { | |||
days.push(i) | |||
} | |||
for (let i = 0; i <= 23; i++) { | |||
hours.push(i) | |||
} | |||
for (let i = 0; i <= 59; i++) { | |||
mins.push(i) | |||
} | |||
} | |||
if (months.length == 0) { | |||
for (let i = 1; i <= 12; i++) { | |||
months.push(i) | |||
} | |||
} | |||
if (days.length == 0) { | |||
for (let i = 1; i <= daysNum; i++) { | |||
days.push(i) | |||
} | |||
} | |||
if (hours.length == 0) { | |||
for (let i = 0; i <= 23; i++) { | |||
hours.push(i) | |||
} | |||
} | |||
if (mins.length == 0) { | |||
for (let i = 0; i <= 59; i++) { | |||
mins.push(i) | |||
} | |||
} | |||
this.years = years; | |||
this.months = months; | |||
this.days = days; | |||
this.hours = hours; | |||
this.mins = mins; | |||
this.$forceUpdate(); | |||
} | |||
}, | |||
watch: { | |||
year() { | |||
this.amend(); | |||
}, | |||
month() { | |||
this.amend(); | |||
}, | |||
day() { | |||
this.amend(); | |||
}, | |||
hour() { | |||
this.amend(); | |||
}, | |||
min() { | |||
this.amend(); | |||
}, | |||
years(n, m) { | |||
if (n.toString() != m.toString()) { | |||
this.amend(); | |||
} | |||
}, | |||
months(n, m) { | |||
if (n.toString() != m.toString()) { | |||
this.amend(); | |||
} | |||
}, | |||
days(n, m) { | |||
if (n.toString() != m.toString()) { | |||
this.amend(); | |||
} | |||
}, | |||
hours(n, m) { | |||
if (n.toString() != m.toString()) { | |||
this.amend(); | |||
} | |||
}, | |||
mins(n, m) { | |||
if (n.toString() != m.toString()) { | |||
this.amend(); | |||
} | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
text { | |||
display: inline-block; | |||
color: $uni-text-color-grey; | |||
} | |||
.but { | |||
background: #fff; | |||
height: 80rpx; | |||
line-height: 80rpx; | |||
padding: 0 30rpx; | |||
border-bottom: 1px solid #f0f0f0; | |||
text-align: left; | |||
text { | |||
display: inline-block; | |||
} | |||
text:last-child { | |||
float: right; | |||
color: $uni-color-primary; | |||
} | |||
} | |||
picker-view { | |||
width: 100%; | |||
background: #fff; | |||
height: 600rpx; | |||
text-align: center; | |||
} | |||
</style> |
@@ -0,0 +1,263 @@ | |||
<template> | |||
<view v-if="showPopup" class="uni-popup" @touchmove.stop.prevent="clear"> | |||
<uni-transition :mode-class="['fade']" :styles="maskClass" :duration="duration" :show="showTrans" @click="onTap" /> | |||
<uni-transition :mode-class="ani" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap"> | |||
<view class="uni-popup__wrapper-box" @click.stop="clear"> | |||
<slot /> | |||
</view> | |||
</uni-transition> | |||
</view> | |||
</template> | |||
<script> | |||
import uniTransition from '../uni-transition/uni-transition.vue' | |||
/** | |||
* PopUp 弹出层 | |||
* @description 弹出层组件,为了解决遮罩弹层的问题 | |||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329 | |||
* @property {String} type = [top|center|bottom] 弹出方式 | |||
* @value top 顶部弹出 | |||
* @value center 中间弹出 | |||
* @value bottom 底部弹出 | |||
* @property {Boolean} animation = [ture|false] 是否开启动画 | |||
* @property {Boolean} maskClick = [ture|false] 蒙版点击是否关闭弹窗 | |||
* @event {Function} change 打开关闭弹窗触发,e={show: false} | |||
*/ | |||
export default { | |||
name: 'UniPopup', | |||
components: { | |||
uniTransition | |||
}, | |||
props: { | |||
// 开启动画 | |||
animation: { | |||
type: Boolean, | |||
default: true | |||
}, | |||
// 弹出层类型,可选值,top: 顶部弹出层;bottom:底部弹出层;center:全屏弹出层 | |||
type: { | |||
type: String, | |||
default: 'center' | |||
}, | |||
// maskClick | |||
maskClick: { | |||
type: Boolean, | |||
default: true | |||
} | |||
}, | |||
data() { | |||
return { | |||
duration: 300, | |||
ani: [], | |||
showPopup: false, | |||
showTrans: false, | |||
maskClass: { | |||
'position': 'fixed', | |||
'bottom': 0, | |||
'top': 0, | |||
'left': 0, | |||
'right': 0, | |||
'backgroundColor': 'rgba(0, 0, 0, 0.4)' | |||
}, | |||
transClass: { | |||
'position': 'fixed', | |||
'left': 0, | |||
'right': 0, | |||
} | |||
} | |||
}, | |||
watch: { | |||
type: { | |||
handler: function(newVal) { | |||
switch (this.type) { | |||
case 'top': | |||
this.ani = ['slide-top'] | |||
this.transClass = { | |||
'position': 'fixed', | |||
'left': 0, | |||
'right': 0, | |||
} | |||
break | |||
case 'bottom': | |||
this.ani = ['slide-bottom'] | |||
this.transClass = { | |||
'position': 'fixed', | |||
'left': 0, | |||
'right': 0, | |||
'bottom': 0 | |||
} | |||
break | |||
case 'center': | |||
this.ani = ['zoom-out', 'fade'] | |||
this.transClass = { | |||
'position': 'fixed', | |||
/* #ifndef APP-NVUE */ | |||
'display': 'flex', | |||
'flexDirection': 'column', | |||
/* #endif */ | |||
'bottom': 0, | |||
'left': 0, | |||
'right': 0, | |||
'top': 0, | |||
'justifyContent': 'center', | |||
'alignItems': 'center' | |||
} | |||
break | |||
} | |||
}, | |||
immediate: true | |||
} | |||
}, | |||
created() { | |||
if (this.animation) { | |||
this.duration = 300 | |||
} else { | |||
this.duration = 0 | |||
} | |||
}, | |||
methods: { | |||
clear(e) { | |||
// TODO nvue 取消冒泡 | |||
e.stopPropagation() | |||
}, | |||
open() { | |||
this.showPopup = true | |||
this.$nextTick(() => { | |||
clearTimeout(this.timer) | |||
this.timer = setTimeout(() => { | |||
this.showTrans = true | |||
}, 50); | |||
}) | |||
this.$emit('change', { | |||
show: true | |||
}) | |||
}, | |||
close(type) { | |||
this.showTrans = false | |||
this.$nextTick(() => { | |||
clearTimeout(this.timer) | |||
this.timer = setTimeout(() => { | |||
this.$emit('change', { | |||
show: false | |||
}) | |||
this.showPopup = false | |||
}, 300) | |||
}) | |||
}, | |||
onTap() { | |||
if (!this.maskClick) return | |||
this.close() | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.uni-popup { | |||
position: fixed; | |||
/* #ifdef H5 */ | |||
top: var(--window-top); | |||
/* #endif */ | |||
/* #ifndef H5 */ | |||
top: 0; | |||
/* #endif */ | |||
bottom: 0; | |||
left: 0; | |||
right: 0; | |||
/* #ifndef APP-NVUE */ | |||
z-index: 99; | |||
/* #endif */ | |||
} | |||
.uni-popup__mask { | |||
position: absolute; | |||
top: 0; | |||
bottom: 0; | |||
left: 0; | |||
right: 0; | |||
background-color: $uni-bg-color-mask; | |||
opacity: 0; | |||
} | |||
.mask-ani { | |||
transition-property: opacity; | |||
transition-duration: 0.2s; | |||
} | |||
.uni-top-mask { | |||
opacity: 1; | |||
} | |||
.uni-bottom-mask { | |||
opacity: 1; | |||
} | |||
.uni-center-mask { | |||
opacity: 1; | |||
} | |||
.uni-popup__wrapper { | |||
/* #ifndef APP-NVUE */ | |||
display: block; | |||
/* #endif */ | |||
position: absolute; | |||
} | |||
.top { | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
transform: translateY(-500px); | |||
} | |||
.bottom { | |||
bottom: 0; | |||
left: 0; | |||
right: 0; | |||
transform: translateY(500px); | |||
} | |||
.center { | |||
/* #ifndef APP-NVUE */ | |||
display: flex; | |||
flex-direction: column; | |||
/* #endif */ | |||
bottom: 0; | |||
left: 0; | |||
right: 0; | |||
top: 0; | |||
justify-content: center; | |||
align-items: center; | |||
transform: scale(1.2); | |||
opacity: 0; | |||
} | |||
.uni-popup__wrapper-box { | |||
/* #ifndef APP-NVUE */ | |||
display: block; | |||
/* #endif */ | |||
position: relative; | |||
} | |||
.content-ani { | |||
// transition: transform 0.3s; | |||
transition-property: transform, opacity; | |||
transition-duration: 0.2s; | |||
} | |||
.uni-top-content { | |||
transform: translateY(0); | |||
} | |||
.uni-bottom-content { | |||
transform: translateY(0); | |||
} | |||
.uni-center-content { | |||
transform: scale(1); | |||
opacity: 1; | |||
} | |||
</style> |
@@ -0,0 +1,279 @@ | |||
<template> | |||
<view v-if="isShow" ref="ani" class="uni-transition" :class="[ani.in]" :style="'transform:' +transform+';'+stylesObject" | |||
@click="change"> | |||
<slot></slot> | |||
</view> | |||
</template> | |||
<script> | |||
// #ifdef APP-NVUE | |||
const animation = uni.requireNativePlugin('animation'); | |||
// #endif | |||
/** | |||
* Transition 过渡动画 | |||
* @description 简单过渡动画组件 | |||
* @tutorial https://ext.dcloud.net.cn/plugin?id=985 | |||
* @property {Boolean} show = [false|true] 控制组件显示或隐藏 | |||
* @property {Array} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型 | |||
* @value fade 渐隐渐出过渡 | |||
* @value slide-top 由上至下过渡 | |||
* @value slide-right 由右至左过渡 | |||
* @value slide-bottom 由下至上过渡 | |||
* @value slide-left 由左至右过渡 | |||
* @value zoom-in 由小到大过渡 | |||
* @value zoom-out 由大到小过渡 | |||
* @property {Number} duration 过渡动画持续时间 | |||
* @property {Object} styles 组件样式,同 css 样式,注意带’-‘连接符的属性需要使用小驼峰写法如:`backgroundColor:red` | |||
*/ | |||
export default { | |||
name: 'uniTransition', | |||
props: { | |||
show: { | |||
type: Boolean, | |||
default: false | |||
}, | |||
modeClass: { | |||
type: Array, | |||
default () { | |||
return [] | |||
} | |||
}, | |||
duration: { | |||
type: Number, | |||
default: 300 | |||
}, | |||
styles: { | |||
type: Object, | |||
default () { | |||
return {} | |||
} | |||
} | |||
}, | |||
data() { | |||
return { | |||
isShow: false, | |||
transform: '', | |||
ani: { in: '', | |||
active: '' | |||
} | |||
}; | |||
}, | |||
watch: { | |||
show: { | |||
handler(newVal) { | |||
if (newVal) { | |||
this.open() | |||
} else { | |||
this.close() | |||
} | |||
}, | |||
immediate: true | |||
} | |||
}, | |||
computed: { | |||
stylesObject() { | |||
let styles = { | |||
...this.styles, | |||
'transition-duration': this.duration / 1000 + 's' | |||
} | |||
let transfrom = '' | |||
for (let i in styles) { | |||
let line = this.toLine(i) | |||
transfrom += line + ':' + styles[i] + ';' | |||
} | |||
return transfrom | |||
} | |||
}, | |||
created() { | |||
// this.timer = null | |||
// this.nextTick = (time = 50) => new Promise(resolve => { | |||
// clearTimeout(this.timer) | |||
// this.timer = setTimeout(resolve, time) | |||
// return this.timer | |||
// }); | |||
}, | |||
methods: { | |||
change() { | |||
this.$emit('click', { | |||
detail: this.isShow | |||
}) | |||
}, | |||
open() { | |||
clearTimeout(this.timer) | |||
this.isShow = true | |||
this.transform = '' | |||
this.ani.in = '' | |||
for (let i in this.getTranfrom(false)) { | |||
if (i === 'opacity') { | |||
this.ani.in = 'fade-in' | |||
} else { | |||
this.transform += `${this.getTranfrom(false)[i]} ` | |||
} | |||
} | |||
this.$nextTick(() => { | |||
setTimeout(() => { | |||
this._animation(true) | |||
}, 50) | |||
}) | |||
}, | |||
close(type) { | |||
clearTimeout(this.timer) | |||
this._animation(false) | |||
}, | |||
_animation(type) { | |||
let styles = this.getTranfrom(type) | |||
// #ifdef APP-NVUE | |||
if(!this.$refs['ani']) return | |||
animation.transition(this.$refs['ani'].ref, { | |||
styles, | |||
duration: this.duration, //ms | |||
timingFunction: 'ease', | |||
needLayout: false, | |||
delay: 0 //ms | |||
}, () => { | |||
if (!type) { | |||
this.isShow = false | |||
} | |||
this.$emit('change', { | |||
detail: this.isShow | |||
}) | |||
}) | |||
// #endif | |||
// #ifndef APP-NVUE | |||
this.transform = '' | |||
for (let i in styles) { | |||
if (i === 'opacity') { | |||
this.ani.in = `fade-${type?'out':'in'}` | |||
} else { | |||
this.transform += `${styles[i]} ` | |||
} | |||
} | |||
this.timer = setTimeout(() => { | |||
if (!type) { | |||
this.isShow = false | |||
} | |||
this.$emit('change', { | |||
detail: this.isShow | |||
}) | |||
}, this.duration) | |||
// #endif | |||
}, | |||
getTranfrom(type) { | |||
let styles = { | |||
transform: '' | |||
} | |||
this.modeClass.forEach((mode) => { | |||
switch (mode) { | |||
case 'fade': | |||
styles.opacity = type ? 1 : 0 | |||
break; | |||
case 'slide-top': | |||
styles.transform += `translateY(${type?'0':'-100%'}) ` | |||
break; | |||
case 'slide-right': | |||
styles.transform += `translateX(${type?'0':'100%'}) ` | |||
break; | |||
case 'slide-bottom': | |||
styles.transform += `translateY(${type?'0':'100%'}) ` | |||
break; | |||
case 'slide-left': | |||
styles.transform += `translateX(${type?'0':'-100%'}) ` | |||
break; | |||
case 'zoom-in': | |||
styles.transform += `scale(${type?1:0.8}) ` | |||
break; | |||
case 'zoom-out': | |||
styles.transform += `scale(${type?1:1.2}) ` | |||
break; | |||
} | |||
}) | |||
return styles | |||
}, | |||
_modeClassArr(type) { | |||
let mode = this.modeClass | |||
if (typeof(mode) !== "string") { | |||
let modestr = '' | |||
mode.forEach((item) => { | |||
modestr += (item + '-' + type + ',') | |||
}) | |||
return modestr.substr(0, modestr.length - 1) | |||
} else { | |||
return mode + '-' + type | |||
} | |||
}, | |||
// getEl(el) { | |||
// console.log(el || el.ref || null); | |||
// return el || el.ref || null | |||
// }, | |||
toLine(name) { | |||
return name.replace(/([A-Z])/g, "-$1").toLowerCase(); | |||
} | |||
} | |||
} | |||
</script> | |||
<style> | |||
.uni-transition { | |||
transition-timing-function: ease; | |||
transition-duration: 0.3s; | |||
transition-property: transform, opacity; | |||
} | |||
.fade-in { | |||
opacity: 0; | |||
} | |||
.fade-active { | |||
opacity: 1; | |||
} | |||
.slide-top-in { | |||
/* transition-property: transform, opacity; */ | |||
transform: translateY(-100%); | |||
} | |||
.slide-top-active { | |||
transform: translateY(0); | |||
/* opacity: 1; */ | |||
} | |||
.slide-right-in { | |||
transform: translateX(100%); | |||
} | |||
.slide-right-active { | |||
transform: translateX(0); | |||
} | |||
.slide-bottom-in { | |||
transform: translateY(100%); | |||
} | |||
.slide-bottom-active { | |||
transform: translateY(0); | |||
} | |||
.slide-left-in { | |||
transform: translateX(-100%); | |||
} | |||
.slide-left-active { | |||
transform: translateX(0); | |||
opacity: 1; | |||
} | |||
.zoom-in-in { | |||
transform: scale(0.8); | |||
} | |||
.zoom-out-active { | |||
transform: scale(1); | |||
} | |||
.zoom-out-in { | |||
transform: scale(1.2); | |||
} | |||
</style> |
@@ -112,10 +112,10 @@ | |||
</view> --> | |||
</view> | |||
<view class="hejibox"> | |||
<!-- <view class="hejibox"> | |||
<view class="heji">楼盘:{{newTeam4||0}}</view> | |||
<view class="heji">均值:{{newAvg4||0}}</view> | |||
</view> | |||
</view> --> | |||
<view class="jindu"> | |||
<scroll-view style="height: 300rpx;" scroll-y="true" > | |||
<view class="jindu-box" v-for="(item,index) in newlisttabinfo4" :key="index"> | |||
@@ -135,11 +135,16 @@ | |||
<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view> | |||
<view class="single"> | |||
<view class="title" style="padding-right: 30rpx;"> | |||
<view class="title1" style="flex: 1;">销讲能力(TOP10)</view> | |||
<view class="title2" style="flex: 1;justify-content: flex-end;" @click="Groupcontrast"> | |||
<view class="title1" style="flex: 1;">销讲能力</view> | |||
<!-- <view class="title2" style="flex: 1;justify-content: flex-end;" @click="Groupcontrast"> | |||
<view class="title2-che">楼盘 | |||
<image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image> | |||
</view> | |||
</view> --> | |||
<view class="title2" style="flex: 1;justify-content: flex-end;" @click="staffShow=true"> | |||
<view class="title2-che" style="width: auto;"><text style="margin-right: 40rpx;">{{staff.label}}</text> | |||
<image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image> | |||
</view> | |||
</view> | |||
</view> | |||
<!-- <view class="hejibox"> | |||
@@ -208,6 +213,8 @@ | |||
</view> --> | |||
<u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar> | |||
<!-- 选择楼盘 --> | |||
<u-select v-model="staffShow" :list="staffList" @confirm="staffSelectCallback" :default-value='selindex'></u-select> | |||
</view> | |||
</template> | |||
@@ -218,12 +225,14 @@ | |||
export default { | |||
data() { | |||
return { | |||
activeTotal: 2, | |||
activeTotal: 4, | |||
activeTotal2: 0, | |||
bocindex:0, | |||
totalTimeShow: false, | |||
// 楼盘id | |||
houseId:'', | |||
staffShow:false, | |||
staffList:[], | |||
lastStartDate:'', | |||
lastEndDate :'', | |||
newTeam1:'', | |||
@@ -234,6 +243,10 @@ | |||
newAvg3:'', | |||
newTeam4:'', | |||
newAvg4:'', | |||
staff:{ | |||
value:'', | |||
label:'' | |||
}, | |||
newlisttabinfo1:[ | |||
{name:'接待量',zxl:'10'}, | |||
{name:'平均执行率',zxl:'50'}, | |||
@@ -274,14 +287,39 @@ | |||
// 获取销奖能力 | |||
that.getPowerList() | |||
}) | |||
this.getdata() | |||
this.getSectionList() | |||
}, | |||
methods: { | |||
// 获取部门列表 | |||
getSectionList(){ | |||
this.$u.post('/user/getHouseByToken',) | |||
.then(res=>{ | |||
// console.log(res) | |||
this.staffList=[] | |||
res.map((item,index)=>{ | |||
let obj={} | |||
obj.value=item.id | |||
obj.label=item.propertyName | |||
this.staffList.push(obj) | |||
}) | |||
this.houseId=this.staffList[0].value | |||
this.staff=this.staffList[0] | |||
this.getdata() | |||
// console.log(this.staffList,this.staffList,this.houseId) | |||
}) | |||
}, | |||
//指标执行率分析tab | |||
tapspagek2(index) { | |||
this.bocindex = index; | |||
}, | |||
staffSelectCallback(e){ | |||
this.staff=e[0] | |||
this.houseId=e[0].value | |||
this.getPowerList() | |||
}, | |||
getdata(){ | |||
// 请求接口获取接待量 | |||
this.receptionCountList('1','/cusLvStatistics/groupComparisonReception') | |||
@@ -172,10 +172,10 @@ | |||
</view> | |||
</view> | |||
<view class="table" v-if="guwenFlag" style="width: 100%;"> | |||
<scroll-view style="width:750rpx;" scroll-x="true"> | |||
<view v-for="(item,index) in tableDate" :key="index"> | |||
<view class="tr"> | |||
<view v-for="(item1,index1) in item" :key="index1" class="trd"> | |||
<scroll-view scroll-x="true" style="white-space: nowrap;"> | |||
<view v-for="(item,index) in tableDate" :key="index" :style="{display:index==0?'inline-block':'block'}"> | |||
<view class="tr" style="display: inline-block;"> | |||
<view v-for="(item1,index1) in item" :key="index1" class="trd" style="display: inline-block;"> | |||
<view v-if="index==1&&index1>0" class="td" :style="{color:item1*1>0?'red':'green'}" | |||
style="border-right:1px solid #E0E0E0;">{{item1==0?'--':item1+'%'}}</view> | |||
<view v-else-if="index>1&&index1>0" class="td" style="border-right:1px solid #E0E0E0;"> | |||
@@ -692,9 +692,9 @@ | |||
arr[3] = ['时段二'] | |||
// console.log(arr) | |||
data.firstList.map((item, index) => { | |||
arr[1].push(item.total) | |||
arr[2].push(data.secondList[index].total) | |||
arr[3].push(data.thirdList[index].total) | |||
arr[2].push(item.total) | |||
arr[3].push(data.secondList[index].total) | |||
arr[1].push(data.thirdList[index].total) | |||
}) | |||
that.tableDate = arr | |||
} | |||
@@ -1134,9 +1134,9 @@ | |||
// flex-shrink: 0; | |||
} | |||
.trd{ | |||
flex-shrink: 0; | |||
width: 200rpx; | |||
flex-shrink: 0; | |||
min-width: 300rpx; | |||
// border-bottom: 1px solid #ccc; | |||
} | |||
.th { | |||
height: 64rpx; | |||
@@ -1323,4 +1323,8 @@ | |||
color: #666666; | |||
margin-top: 10rpx; | |||
} | |||
.grid:nth-child(1){ | |||
border-right:none ; | |||
border-bottom:none ; | |||
} | |||
</style> |
@@ -50,7 +50,7 @@ | |||
</view> | |||
<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view> | |||
<view class="boxzonglan"> | |||
<view class="boxzonglan" style="min-height: 400rpx;"> | |||
<view class="zonglantit">简报</view> | |||
<view class="zonglanbox"> | |||
<view class="grid" v-for="(item,index) in numlist" :key="index"> | |||
@@ -103,11 +103,11 @@ | |||
</view> --> | |||
</view> | |||
</view> | |||
<view class="hejibox"> | |||
<!-- <view class="hejibox"> | |||
<view class="heji">合计:{{allnum||0}}</view> | |||
<view class="heji">均值:{{allavg||0}}</view> | |||
</view> | |||
<view class="danwei">来访(人)</view> | |||
</view> --> | |||
<!-- <view class="danwei">来访(人)</view> --> | |||
<view class="uchaserbox"> | |||
<qiun-data-charts | |||
type="line" | |||
@@ -135,11 +135,11 @@ | |||
</view> --> | |||
</view> | |||
</view> | |||
<view class="hejibox"> | |||
<!-- <view class="hejibox"> | |||
<view class="heji">合计:{{allnum1||0}}</view> | |||
<view class="heji">均值:{{allavg1||0}}</view> | |||
</view> | |||
<view class="danwei">来访(人)</view> | |||
</view> --> | |||
<!-- <view class="danwei">来访(人)</view> --> | |||
<view class="uchaserbox"> | |||
<qiun-data-charts | |||
type="line" | |||
@@ -696,4 +696,14 @@ | |||
} | |||
} | |||
} | |||
.grid:nth-child(1){ | |||
border-right:none ; | |||
border-bottom:none ; | |||
} | |||
.grid:nth-child(2){ | |||
border-bottom:none ; | |||
} | |||
.grid:nth-child(3){ | |||
border-right:none ; | |||
} | |||
</style> |
@@ -335,7 +335,7 @@ | |||
// 去添加提醒 | |||
goRemind(){ | |||
uni.navigateTo({ | |||
url:'/pages/center/consumer/remind' | |||
url:`/pages/center/consumer/remind?str=${this.customerInfo.name+'/'+this.customerInfo.phone}&customerId=${this.customerId}` | |||
}) | |||
}, | |||
//评分点击 | |||
@@ -6,7 +6,8 @@ | |||
客户信息 | |||
</view> | |||
<view class="conmsg-lab-2"> | |||
李先生/12385945986 | |||
<!-- 李先生/12385945986 --> | |||
{{str}} | |||
</view> | |||
</view> | |||
<view class="conmsg-lab" style="border: none;"> | |||
@@ -14,7 +15,8 @@ | |||
提醒时间 | |||
</view> | |||
<view class="conmsg-lab-3"> | |||
请选择提醒时间(必填) | |||
<!-- 请选择提醒时间(必填) --> | |||
<KXDateTime :date='date' :end='enddate' :start='startdate' @rundata='kxdatetime' default='start' placeholder='请选择时间'></KXDateTime> | |||
</view> | |||
<view class="conmsg-lab-4"> | |||
<image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image> | |||
@@ -24,18 +26,140 @@ | |||
<view class="conent"> | |||
<u-input v-model="value" type="textarea" height="148" :auto-height="true" /> | |||
</view> | |||
<view class="btn" @click="add"> | |||
添加提醒 | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
var util = require("../../../utils/util.js"); | |||
import KXDateTime from "@/components/kx-datetime/kx-datetime.vue" | |||
export default{ | |||
data(){ | |||
return{ | |||
str:'', | |||
date: '', | |||
// startdate:new Date().toLocaleDateString()+'00:00', | |||
startdate:'2021-01-01 00:00', | |||
enddate: '2025-12-30 23:59', | |||
code:'', | |||
customerId:'', | |||
value:'', | |||
} | |||
}, | |||
components:{ | |||
KXDateTime | |||
}, | |||
methods:{ | |||
kxdatetime(e) { | |||
console.log(e) | |||
this.date = e | |||
}, | |||
add(){ | |||
// console.log(new Date().toLocaleDateString()) | |||
// return | |||
if(!this.date){ | |||
uni.showToast({ | |||
title:'请选择时间', | |||
icon:'none' | |||
}) | |||
return | |||
} | |||
if(!this.value){ | |||
uni.showToast({ | |||
title:'请填写备注', | |||
icon:'none' | |||
}) | |||
return | |||
} | |||
const that = this; // 检测是否已经授权,有授权直接弹窗,没授权弹出授权 | |||
uni.getSetting({ | |||
withSubscriptions: true, | |||
success(res) { | |||
console.log(res); | |||
if (res && res.subscriptionsSetting && res.subscriptionsSetting.itemSettings && res | |||
.subscriptionsSetting | |||
.itemSettings['cBnJvhkMPHp0ReUiSdpM_Pd2usGeEEW6wx-5s6X4hEI'] == 'accept') { | |||
that.addFlag() | |||
} else { | |||
uni.requestSubscribeMessage({ | |||
tmplIds: ['cBnJvhkMPHp0ReUiSdpM_Pd2usGeEEW6wx-5s6X4hEI'], | |||
success(res) { | |||
that.addFlag() | |||
}, | |||
fail(res) { | |||
console.log(res); | |||
util.showNone("请授权"); | |||
} | |||
}); | |||
} | |||
}, | |||
fail(res) { | |||
console.log(res); | |||
} | |||
}); | |||
}, | |||
addFlag(){ | |||
var that = this; | |||
var params = { | |||
customerId: that.customerId, | |||
orderRemindTime: that.date + ':00', | |||
code: that.code, | |||
remarks:this.value, | |||
OrderRemindDesc:this.value | |||
}; | |||
this.$u.post("/customer/settingTime", params).then(data => { | |||
uni.showToast({ | |||
title: '操作成功' | |||
}); | |||
uni.navigateBack() | |||
// var data = that.orderRemindDate + ':00'; | |||
// var setData = new Date(data).getTime(); | |||
// var newData = new Date().getTime(); | |||
// console.log(setData, newData); | |||
// if (setData < newData) { | |||
// this.setData({ | |||
// overdue: true | |||
// }); | |||
// } else { | |||
// this.setData({ | |||
// overdue: false | |||
// }); | |||
// } | |||
// this.setData({ | |||
// show: false, | |||
// value: [this.year, Number(this.month) - 1, Number(this.day) - 1, this.hour, this | |||
// .minute | |||
// ], | |||
// orderRemindDate1: that.orderRemindDate + ':00' | |||
// }); | |||
}); | |||
}, | |||
}, | |||
onLoad(e) { | |||
// console.log(e) | |||
this.str=e.str | |||
this.customerId=e.customerId||'' | |||
const that = this; | |||
let num=new Date().toLocaleDateString().split('/').join('-')+' '+new Date().getHours()+':'+ new Date().getMinutes() | |||
this.startdate=num | |||
console.log(num) | |||
uni.login({ | |||
success(res) { | |||
if (res.code) { | |||
that.code=res.code | |||
} else { | |||
console.log('登录失败!' + res.errMsg); | |||
} | |||
} | |||
}); | |||
} | |||
} | |||
</script> | |||
@@ -85,4 +209,17 @@ | |||
padding: 30rpx; | |||
margin-bottom: 20rpx; | |||
} | |||
.btn{ | |||
position: fixed; | |||
width: 690rpx; | |||
height: 88rpx; | |||
background: #2671E2; | |||
border-radius: 8px; | |||
line-height: 88rpx; | |||
text-align: center; | |||
color: #FFFFFF; | |||
bottom: 108rpx; | |||
left: 30rpx; | |||
} | |||
</style> |