555 lines
13 KiB
Vue
555 lines
13 KiB
Vue
<template>
|
||
<view class="schedule">
|
||
<view class="sche_calendar">
|
||
<view class="sche_month">
|
||
<view class="iconfont icon-arrows_left" @click="prev"></view>
|
||
<view>{{time}}</view>
|
||
<view class="iconfont icon-arrows_right" @click="next"></view>
|
||
</view>
|
||
<view class="calendar">
|
||
<view class='header'>
|
||
<view v-for="(item,index) in date" :key="item" :class='[(index == todayIndex) && isTodayWeek ? "weekMark" : ""]'>{{item}}
|
||
</view>
|
||
</view>
|
||
<!-- 每一天你的日期 -->
|
||
<view class='date-box'>
|
||
<view
|
||
v-for="(item,index) in dateArr"
|
||
:key="item.isToday" :class='[nowDate == item.nowdate ? "nowDay" : "",todayData == item.isToday ? "nowdate" : ""]'
|
||
@click="everyDay(item.isToday,item.dateNum)">
|
||
<view></view>
|
||
<view class='date-head' >
|
||
<view>{{item.dateNum}}</view>
|
||
<view :class='item.isEvent ? "circle_dot":""'></view>
|
||
<view v-if="item.dateNum >=start && item.dateNum <= end > 0">{{item.dateNum ==start?'开始':''}}</view>
|
||
<view v-if="item.dateNum >=start && item.dateNum <= end > 0">{{item.dateNum ==end?'结束':''}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="sche_con">
|
||
<view class="sche_con_item" v-for="(item,index) in list[nowDate]" :key="index">
|
||
<view class="item_left">
|
||
<view class="start-time" >
|
||
<image :src="BASE_IMG_URL+'/start_time.png'" class="timeimg" mode=""></image>
|
||
:{{item.start_time}}
|
||
</view>
|
||
<view class="content-time" >
|
||
<view class="title">{{item.title}}</view>
|
||
<view>备注：{{item.remark}}</view>
|
||
<view>关联业务：</view>
|
||
<view class="yewu" v-if="item.relation_type == 3" @click="toContractDetail(item.relation_id)">
|
||
<image :src="BASE_IMG_URL+'/file.png'" class="fileimg" mode=""></image>
|
||
合同
|
||
</view>
|
||
<view class="yewu" v-if="item.relation_type == 1" @click="toMore(item.relation_id)">
|
||
<image :src="BASE_IMG_URL+'/file.png'" class="fileimg" mode=""></image>
|
||
客户
|
||
</view>
|
||
<view class="yewu" v-if="item.relation_type == 2" @click="jumpDetail(item.relation_id)">
|
||
<image :src="BASE_IMG_URL+'/file.png'" class="fileimg" mode=""></image>
|
||
联系人
|
||
</view>
|
||
<view class="yewu" v-if="item.relation_type == 4" @click="moreClick(item.relation_id)">
|
||
<image :src="BASE_IMG_URL+'/file.png'" class="fileimg" mode=""></image>
|
||
线索
|
||
</view>
|
||
</view>
|
||
<view class="end-time">
|
||
<image :src="BASE_IMG_URL+'/end_time.png'" class="timeimg" mode=""></image>
|
||
:{{item.end_time}}
|
||
</view>
|
||
</view>
|
||
<view @click="toEditstatuss(item)">
|
||
<view class="item_right" v-if="item.status == 0">
|
||
<image :src="BASE_IMG_URL+'/time.png'"></image>
|
||
<view>未开始</view>
|
||
</view>
|
||
<view class="item_right" v-if="item.status == 1">
|
||
<image :src="BASE_IMG_URL+'/time_ing.png'"></image>
|
||
<view>进行中</view>
|
||
</view>
|
||
<view class="item_right" v-if="item.status == 2">
|
||
<image :src="BASE_IMG_URL+'/time_end.png'"></image>
|
||
<view>已结束</view>
|
||
</view>
|
||
<view class="item_right" v-if="item.status == 3">
|
||
<image :src="BASE_IMG_URL+'/time_over.png'"></image>
|
||
<view>已取消</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="noList" v-if="!list[nowDate] || list[nowDate].length == 0">没有更多日程</view>
|
||
</view>
|
||
<view class="btn_fix" @click="addSchedule">
|
||
<image :src="BASE_IMG_URL+'1.png'"></image>
|
||
</view>
|
||
|
||
<!-- 日程修改状态 -->
|
||
<pop-status
|
||
:id="scheid"
|
||
:schestatus="schestatus"
|
||
v-if="statusPop"
|
||
@closeStatus="closeStatus"
|
||
@changeStatus="changeStatus"
|
||
@changeSuccess="changeStatusSuccess"
|
||
></pop-status>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getNowData } from '@/util/weekTime.js'
|
||
import { netScheduleList, netEditScheculeStatus } from '@/api/index.js'
|
||
import {pageJumps} from "../index_page_jumps.js";
|
||
import popStatus from '../components/popStatus.vue'
|
||
import { BASE_IMG_URL } from '@/util/api.js'
|
||
|
||
export default {
|
||
mixins: [pageJumps],
|
||
components:{
|
||
popStatus
|
||
},
|
||
data() {
|
||
return {
|
||
BASE_IMG_URL:BASE_IMG_URL,
|
||
date: ['日', '一', '二', '三', '四', '五', '六'],
|
||
todayIndex: 0, //表示星期几
|
||
dateArr: [], //储存每个月日期的数组
|
||
todayData: 0, //今天是几号
|
||
year: 0, //年
|
||
month: 0, //月
|
||
day: 0, //日
|
||
isToday: 0, //今天是几号
|
||
isTodayWeek: false, //
|
||
start: 0, //开始
|
||
end: 0, //结束
|
||
dataquan: false, //是否自定义选择区间
|
||
time: '', //当前月份
|
||
nowDate:'', //今天 日期 2021-04-20
|
||
|
||
list:[],
|
||
statusPop:false, //修改 日程 状态 弹窗
|
||
scheid:'', //日程id
|
||
schestatus:'', //日程 状态
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
onShow() {
|
||
this.getDataInfo()
|
||
//获取 当月 数据
|
||
this.getList()
|
||
this.nowDate = getNowData()
|
||
},
|
||
mounted() {
|
||
|
||
},
|
||
methods: {
|
||
addSchedule(){
|
||
uni.navigateTo({
|
||
url:'/pages/index/newSche/newSche'
|
||
})
|
||
},
|
||
//获取数据
|
||
getList() {
|
||
let firstDay = ''
|
||
this.dateArr.forEach(ele=>{
|
||
if(ele.dateNum == 1){
|
||
firstDay = ele.nowdate
|
||
}
|
||
})
|
||
let lastDay = this.dateArr[this.dateArr.length - 1].nowdate
|
||
let params = {
|
||
start_day: firstDay,
|
||
end_day: lastDay
|
||
}
|
||
netScheduleList(params).then(res=>{
|
||
this.list = res.data
|
||
// 判断 当天是否有 日程
|
||
this.handleIsEvent()
|
||
|
||
})
|
||
},
|
||
handleIsEvent() {
|
||
let dateArr = this.dateArr
|
||
let list = this.list
|
||
dateArr.forEach(ele=>{
|
||
if(ele.dateNum){
|
||
if(list[ele.isToday].length != 0) {
|
||
ele.isEvent = true
|
||
}else{
|
||
ele.isEvent = false
|
||
}
|
||
}
|
||
})
|
||
this.dateArr = dateArr
|
||
},
|
||
getDataInfo() {
|
||
let now = new Date();
|
||
let year = now.getFullYear();
|
||
let month = (now.getMonth() + 1 + '').padStart(2, 0);
|
||
let day = (now.getDate() + '').padStart(2, 0);
|
||
this.dateInit();
|
||
this.year = year;
|
||
this.month = month;
|
||
this.day = now.getDate()
|
||
this.isToday = '' + year + "/" + month + "/" + day
|
||
this.todayData = '' + year + "/" + month + "/" + day
|
||
this.time = `${year}年${month}月`
|
||
|
||
},
|
||
// 点击切换日期
|
||
everyDay(date, dateNum) {
|
||
// start 和 end 全不是0
|
||
if (this.dataquan === true) {
|
||
if (this.start != 0 && this.end != 0) {
|
||
this.start = 0 //暂时定义为开始时间
|
||
this.end = 0
|
||
}
|
||
// start 和 end 全部是0
|
||
if (this.start == 0 && this.end == 0) {
|
||
this.start = dateNum //暂时定义为开始时间
|
||
} else if (dateNum < this.start) {
|
||
this.end = this.start
|
||
this.start = dateNum
|
||
} else if (dateNum > this.start) {
|
||
this.end = dateNum
|
||
}
|
||
}
|
||
this.nowDate = date
|
||
},
|
||
// 初始化当前日期格式 yyyy-mm-dd
|
||
dateInit: function(setYear, setMonth) {
|
||
let dateArr = []; //需要遍历的日历数组数据
|
||
let arrLen = 0; //dateArr的数组长度
|
||
let now = setYear ? new Date(setYear, setMonth) : new Date();
|
||
let year = setYear || now.getFullYear();
|
||
let nextYear = 0;
|
||
let month = setMonth || now.getMonth(); //没有+1方便后面计算当月总天数
|
||
let nextMonth = (month + 1) > 11 ? 1 : (month + 1);
|
||
let startWeek = new Date(year + '/' + (month + 1) + '/' + 1).getDay(); //目标月1号对应的星期
|
||
let dayNums = new Date(year, nextMonth, 0).getDate(); //获取目标月有多少天
|
||
let obj = {};
|
||
let num = 0;
|
||
//
|
||
if (month + 1 > 11) {
|
||
nextYear = year + 1;
|
||
dayNums = new Date(nextYear, nextMonth, 0).getDate();
|
||
}
|
||
arrLen = startWeek + dayNums;
|
||
for (let i = 0; i < arrLen; i++) {
|
||
if (i >= startWeek) {
|
||
num = i - startWeek + 1;
|
||
obj = {
|
||
isToday: '' + year + "-" + ((month + 1) + '').padStart(2, 0) + "-" + (num + '').padStart(2, 0),
|
||
nowdate: '' + year + "-" + ((month + 1) + '').padStart(2, 0) + "-" + (num + '').padStart(2, 0),
|
||
dateNum: num,
|
||
}
|
||
} else {
|
||
obj = {};
|
||
}
|
||
dateArr[i] = obj;
|
||
}
|
||
this.dateArr = dateArr
|
||
let nowDate = new Date();
|
||
let nowYear = nowDate.getFullYear();
|
||
let nowMonth = nowDate.getMonth() + 1;
|
||
let nowWeek = nowDate.getDay();
|
||
let getYear = setYear || nowYear;
|
||
let getMonth = setMonth >= 0 ? (setMonth + 1) : nowMonth;
|
||
if (nowYear == getYear && nowMonth == getMonth) {
|
||
this.isTodayWeek = true,
|
||
this.todayIndex = nowWeek
|
||
} else {
|
||
this.isTodayWeek = false,
|
||
this.todayIndex = -1
|
||
}
|
||
},
|
||
prev() {
|
||
this.year = parseInt(this.month) - 1 == 0 ? this.year - 1 : this.year
|
||
this.month = parseInt(this.month) - 1 == 0 ? 12 : parseInt(this.month) - 1;
|
||
let setYear = this.year;
|
||
let setMonth = this.month - 1
|
||
this.time = `${setYear}年${(this.month+'').padStart(2,0)}月`
|
||
this.dateInit(setYear, setMonth);
|
||
let nowDate = ''
|
||
this.dateArr.forEach(ele=>{
|
||
if(ele.dateNum == 1){
|
||
nowDate = ele.nowdate
|
||
}
|
||
})
|
||
this.nowDate = nowDate
|
||
this.getList()
|
||
},
|
||
next() {
|
||
this.year = parseInt(this.month) + 1 > 12 ? this.year + 1 : this.year
|
||
this.month = parseInt(this.month) + 1 > 12 ? 1 : parseInt(this.month) + 1;
|
||
let setYear = this.year;
|
||
let setMonth = this.month - 1
|
||
this.time = `${setYear}年${(this.month+'').padStart(2,0)}月`
|
||
this.dateInit(setYear, setMonth);
|
||
let nowDate = ''
|
||
this.dateArr.forEach(ele=>{
|
||
if(ele.dateNum == 1){
|
||
nowDate = ele.nowdate
|
||
}
|
||
})
|
||
this.nowDate = nowDate
|
||
this.getList()
|
||
},
|
||
//修改日程状态
|
||
toEditstatuss(item) {
|
||
this.scheid = item.id
|
||
this.schestatus = item.status
|
||
this.statusPop = true
|
||
uni.hideTabBar({
|
||
animation:true
|
||
})
|
||
},
|
||
//关闭 修改日程 状态
|
||
closeStatus() {
|
||
this.statusPop = false
|
||
this.schestatus = ''
|
||
this.scheid = ''
|
||
uni.showTabBar({
|
||
animation:true
|
||
})
|
||
},
|
||
changeStatus(status) {
|
||
this.schestatus = status
|
||
},
|
||
//日程 状态 修改成功
|
||
changeStatusSuccess() {
|
||
let params = {
|
||
id: this.scheid,
|
||
status: this.schestatus
|
||
}
|
||
netEditScheculeStatus(params).then(res=>{
|
||
this.statusPop = false
|
||
this.schestatus = ''
|
||
this.scheid = ''
|
||
uni.showToast({
|
||
title:'日程状态修改成功',
|
||
icon:'none'
|
||
})
|
||
uni.showTabBar({
|
||
animation:true
|
||
})
|
||
setTimeout(()=>{
|
||
this.getList()
|
||
},1000)
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.start-time{
|
||
color: #0081FF;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
.timeimg{
|
||
width:41rpx;
|
||
height:33rpx;
|
||
}
|
||
}
|
||
.end-time{
|
||
color: #ff7800;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
.timeimg{
|
||
width:41rpx;
|
||
height:33rpx;
|
||
}
|
||
}
|
||
.sche_calendar {
|
||
background-color: #fff;
|
||
margin-bottom: 20rpx;
|
||
|
||
.sche_month {
|
||
display: flex;
|
||
height: 120rpx;
|
||
line-height: 120rpx;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
justify-content: space-between;
|
||
padding: 0 50rpx;
|
||
|
||
.icon-arrows_left,
|
||
.icon-arrows_right {
|
||
font-size: 50rpx;
|
||
}
|
||
}
|
||
|
||
.calendar {
|
||
padding: 0 20rpx;
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
background-color: #fff;
|
||
|
||
.header {
|
||
view {
|
||
display: inline-block;
|
||
width: 14.285%;
|
||
text-align: center;
|
||
padding: 20rpx 0;
|
||
}
|
||
|
||
.weekMark {
|
||
position: relative;
|
||
|
||
view {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
border-bottom: 1px solid #22A7F6;
|
||
}
|
||
}
|
||
}
|
||
|
||
.date-box>view {
|
||
position: relative;
|
||
display: inline-block;
|
||
width: 14.285%;
|
||
color: #020202;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
margin: 10rpx 0;
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.sche_con {
|
||
background-color: #fff;
|
||
padding: 24rpx 24rpx 5rpx 24rpx;
|
||
|
||
.sche_con_item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background-color: #fcfcfc;
|
||
padding:20rpx 10rpx;
|
||
margin-bottom: 24rpx;
|
||
|
||
.item_left {
|
||
flex: 1;
|
||
color: #999;
|
||
view{
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.title{
|
||
color: #333;
|
||
}
|
||
.yewu{
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
background:#f5f7fa;
|
||
padding:10rpx;
|
||
.fileimg{
|
||
width:20rpx;
|
||
height:20rpx;
|
||
margin-right:15rpx;
|
||
}
|
||
}
|
||
:last-child {
|
||
margin-bottom:0;
|
||
}
|
||
}
|
||
|
||
.item_right {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #999;
|
||
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.circle_dot {
|
||
margin-left: 45rpx;
|
||
margin-top: 12rpx;
|
||
width: 12rpx;
|
||
height: 15rpx;
|
||
background-color: $uni-text-color;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.red {
|
||
background: red !important;
|
||
border-radius: 0 !important;
|
||
width: auto !important;
|
||
color: #333 !important;
|
||
}
|
||
|
||
|
||
|
||
.date-box {
|
||
font-size: 0;
|
||
padding: 10rpx 0;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.btn_fix {
|
||
position: fixed;
|
||
bottom: 100rpx;
|
||
right: 80rpx;
|
||
|
||
image {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
|
||
background-color: #fff;
|
||
border-radius: 40rpx;
|
||
}
|
||
}
|
||
|
||
.date-head {
|
||
height: 60rpx;
|
||
/* line-height: 60rpx; */
|
||
font-size: 26rpx;
|
||
display: flex;
|
||
flex-flow: column;
|
||
justify-content: flex-start;
|
||
color: #999;
|
||
}
|
||
|
||
.nowDay .date-head {
|
||
width: 60rpx;
|
||
border-radius: 50%;
|
||
text-align: center;
|
||
color: #fff !important;
|
||
background-color: $uni-text-color;
|
||
margin: -30rpx auto 0;
|
||
font-weight: normal !important;
|
||
line-height: 61rpx;
|
||
}
|
||
|
||
.nowdate .date-head {
|
||
color: #52c1f5;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.van-hairline--top-bottom {
|
||
position: fixed;
|
||
}
|
||
.noList{
|
||
font-size:24rpx;
|
||
text-align: center;
|
||
padding:80rpx 0;
|
||
color:#666;
|
||
}
|
||
</style>
|