179crm_user_app/pages_company/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">(3)</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()"> 
				         <view class="form-item">
				         	<view class="left">
				         		<text class="label">已开始</text>
				         		<text class="time">{{item.time}}</text>
				         	</view>
				         	<view class="right">
				         		<view>{{item.content}}</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 {
		getDocDetails,
		addDoc,
		editDoc
	} from '@/api/doc.js'
	export default {
		components:{
		            RenCalendar
		        },
		data() {
			return {
				 options: [{
				                    text: '修改',
				                    style: {
				                        backgroundColor: '#008FD3'
				                    }
				                }, {
				                    text: '删除',
				                    style: {
				                        backgroundColor: '#FF5030'
				                    }
				                }],
				curDate:'',
				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,
				}
			};
		},
		onLoad(option) {
			let today = this.$refs.ren.getToday().date;
			            this.curDate = today;
			            this.markDays.push(today);
			this.type = option.type;
			console.log(this.type)
			if (this.type == 'edit') {
				this.docId = option.docId;
				// this.getDocDetails();
			}
		},
		methods: {
			//日历
			onDayClick(data){
			                this.curDate = data.date;
			            },
			action(e){
				console.log(e,'--')
			},
			addSchedule(){
				uni.navigateTo({
					url: '/pages_company/addSchedule'
				})
			},
			getDocDetails() {
				var data = {
					docId: this.docId
				};
				getDocDetails(data).then(
					res => {
						if (res.code == 200) {
							this.form = res.data;

						} 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>