179crm_user_app/pages_user/user/schedule.vue

<template>
	<view class="content">
		<ren-calendar ref='ren' :markDays='markDays' :headerBar='false'  @onDayClick='onDayClick'></ren-calendar>
		<view class="inner">
			<view class="title-box align-center">
				<text>我的行程</text>
				<view class="num">{{num}}</view>
			</view>
			<view class="form-box">
				<u-swipe-action>
					<view class="form-swipe mb20" v-for="(item,index) in dataList" :key="index">
				        <u-swipe-action-item :options="options"  @click="action($event, item.id, index)" :name="index" :ref="'swipeAction' + index"> 
				         <view class="form-item" @click.stop="showDetail(item)">
				         	<view class="left">
				         		<text class="label">{{item.mark}}</text>
				         		<text class="time">{{item.itineraryTime}}</text>
				         	</view>
				         	<view class="right">
				         		<view>{{item.itinerary}}</view>
				         	</view>
				         </view>
				        </u-swipe-action-item>
						</view>
				      </u-swipe-action>
				
			</view>
			<view class="btn-box">
				<view class="sub-btn" @click="addSchedule()">
					<image class="w32 h32" src="@/static/images/company/add_icon.png"></image>
					<text>添加日程</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import RenCalendar from '@/components/ren-calendar/ren-calendar.vue'
	import {
		getItinerary,deleteItinerary
	} from '@/api/companyUser.js'
import parse from '../../uni_modules/uview-ui/libs/config/props/parse';
	export default {
		components:{
		            RenCalendar
		        },
		data() {
			return {
				 options: [{
				                    text: '修改',
				                    style: {
				                        backgroundColor: '#008FD3'
				                    }
				                }, {
				                    text: '删除',
				                    style: {
				                        backgroundColor: '#FF5030'
				                    }
				                }],
				curDate:this.utils.timeFormat(new Date(), 'yyyy-mm-dd'),
				markDays:[],
				type: null,
				patientId: null,
				famaleurl:"/static/images/health/female_profile.png",
				maleurl:"/static/images/health/my_heads.png",
				checked:1,
				dataList:[
				// 	{id:1,time:'09:00',content:'酒店登记入驻，记得检查马桶卫生和柏子是否干净'},
				// {id:2,time:'09:00',content:'收拾好行李，准备去医院'},
				// {id:3,time:'16:30',content:'酒店登记入驻，记得检查马桶卫生和柏子是否干净'},
				],
				form: {
					userName: null,
					idCard: null,
					sex: null,
					birthday: null,
					remark: null,
				},
				user:null,
				num:0
			};
		},
		onLoad(option) {
			// this.user=JSON.parse( uni.getStorageSync('userInfo'))
			this.userId=option.userId
			this.getItinerary()
			uni.$on('refreshSchedule', () => {
				this.getItinerary()
			})
		},
		methods: {
			//日历
			onDayClick(data){
				console.log(data,'00')
			                this.curDate = data.date;
							this.getItinerary()
			            },
			action(event, id, index){
				var that=this;
				let test = 'swipeAction' + index
				if(event.index==0){
					uni.navigateTo({
						url: '/pages_user/user/addSchedule?type=edit&userId='+this.userId+'&id='+id
					})
				}else{
					uni.showModal({
					    title: '提示',
					    content: '确定删除记录吗',
					    success: function (res) {
					        if (res.confirm) {
								var data = {
									id:id
								};
								deleteItinerary(data).then(res => {
									if(res.code==200){
										uni.showToast({
											icon:'success',
											title: '删除成功！',
										});
										 that.$refs[test][0].closeHandler() 
										 that.getItinerary()
										 
									}else{
										uni.showToast({
											icon:'none',
											title: res.msg,
										});
									}
								});
					        } 
							else if (res.cancel) {
								that.$refs[test][0].closeHandler() 
					        }
					    }
					});
				}
				
			},
			addSchedule(){
				uni.navigateTo({
					url: '/pages_user/user/addSchedule?type=add&userId='+this.userId
				})
			},
			showDetail(item){
				uni.navigateTo({
					url: '/pages_user/user/addSchedule?type=edit&userId='+this.userId+'&id='+item.id
				})
			},
			getItinerary() {
				var data = {
					userId: this.userId,
					itineraryDate:this.curDate
				};
				getItinerary(data).then(
					res => {
						if (res.code == 200) {
							this.dataList = res.data.list;
							this.num=res.data.total;
						} else {
							uni.showToast({
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			submit() {
				if (this.form.userName == null) {
					uni.showToast({
						icon: 'none',
						title: "姓名不能为空",
					});
					return;
				}
				if (this.form.idCard == null) {
					uni.showToast({
						icon: 'none',
						title: "身份证号不能为空",
					});
					return;
				}
				if (this.form.sex == null) {
					uni.showToast({
						icon: 'none',
						title: "性别不能为空",
					});
					return;
				}
				if (this.form.birthday == null) {
					uni.showToast({
						icon: 'none',
						title: "出生年月不能为空",
					});
					return;
				}
				if (this.type == "add") {
					this.addDoc()
				} else if (this.type == "edit") {
					this.editDoc()
				}

			},
			editDoc() {
				editDoc(this.form).then(
					res => {
						if (res.code == 200) {
							uni.showToast({
								icon: 'success',
								title: "操作成功",
							});
							setTimeout(function() {
								uni.$emit('refreshDoc');
								uni.navigateBack({
									delta: 1
								})
							}, 500);
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			addDoc() {
				addDoc(this.form).then(
					res => {
						if (res.code == 200) {
							uni.showToast({
								icon: 'success',
								title: "操作成功",
							});
							setTimeout(function() {
								uni.$emit('refreshDoc');
								uni.navigateBack({
									delta: 1
								})
							}, 500);
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			// 出生日期选择
			bindDateChange: function(e) {
				this.form.birthday = e.target.value
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background: #FFFFFF;
	}
.u-swipe-action-item__right__button__wrapper__text{
	font-size: 28rpx !important;
	line-height: 28rpx !important;
}
	.content {
		height: 100%;
		// display: flex;
		// flex-direction: column;
		// justify-content: space-between;

		.inner {
			// height: calc(100% - 120upx);
			padding:30upx;
			background: #FFFFFF;
			border-radius:16rpx  16rpx  16rpx  16rpx;
			margin-top:-20rpx;
			position: relative;
            .title-box{
				text{
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 36rpx;
					color: #222426;
					padding: 24rpx 0;
					
				}
				.num{
					font-weight: 500;
					font-size: 28rpx;
					color: #898E91;
				}
               
               }
			   .select-box2{
			   	width: 216rpx;
			   	height: 64rpx;
			   	background: #FFFFFF;
			   	border-radius: 32rpx 32rpx 32rpx 32rpx;
			   	display: flex;
			   	align-items: center;
			   				justify-content: center;
			   	text{
			   		font-family: PingFang SC;
			   		font-weight: 400;
			   		font-size: 24rpx;
			   		color: #626468;
			   		margin-left: 5rpx;
			   	}
			   }
				
			}
			.form-box {
				// padding:30upx;
				// background: #FFFFFF;
				// border-radius: 16upx;
				.form-swipe{
					overflow: hidden;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
				}
				.form-item {
					padding: 30upx;
					display: flex;
					align-items: center;
					// justify-content: space-between;
					background: #F5F7FA;
					
                    .left{
						display: flex;
						flex-direction: column;
						align-items: center;
						padding-right: 30rpx;
						border-right: 1px solid #CCCCCC;
						.label{
							font-weight: 400;
							font-size: 24rpx;
							color: #626468;
						}
						.time{
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 48rpx;
						}
						
					}
					.right{
						padding-left: 30rpx;
						view{
							font-weight: 400;
							font-size: 24rpx;
							color: #222426;
							text-align: left;
					}
				}
			}
		}

		.btn-box {
			// display: flex;
			// align-items: center;
			// justify-content: center;

			position: fixed;
			right: 20rpx;
			bottom: 20%;
			z-index: 999;
			// transform: translate(-50%,-50%);
			// background: #FFFFFF;
			.sub-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 192rpx;
				height: 80rpx;
				background: #008FD3;
				box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(0,143,211,0.2);
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				text{
					color: #fff;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
		}
	}
</style>