productDev/dmvisit.git

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,254 @@
			<template>
			<view class="main_app">
			<view class="heade_title">
			<image class="icon" src="../../static/staff/ar_left@2x.png" @click="changeDate(-1)" mode="widthFix"></image>
			<text class="date">{{ activeDateCum }}</text>
			<image class="icon" src="../../static/staff/ar_right@2x.png" @click="changeDate(1)" mode="widthFix"></image>
			</view>
			<!-- -->
			<view class="meeting_list">
			<view class="item" :class="{active: i === 0}" v-for="item,i in meetingList" :key="i">
			<view class="name">{{ item.name }}</view>
			<view class="line"></view>
			</view>
			</view>
			<!-- -->
			<view class="time_list">
			<view class="item" v-for="item,i in timeList" :key="i">{{ item.time }}</view>
			</view>
			<!-- -->
			<view class="main_footer">
			<view class="df_ac">
			<view>å·²éæ©ï¼</view>
			<view class="sel_time">xxxxxx</view>
			</view>
			<view class="btns">
			<view class="left">
			<view class="item" v-for="item in colorOptions" :key="item.name">
			<view class="box" :style="{ background: item.color }"></view>
			<view class="">{{ item.name }}</view>
			</view>
			</view>
			<view class="sub" @click="$jump('/pages/staff/meetingSubOrder')">ç¡®è®¤é¢çº¦</view>
			</view>
			</view>
			<!-- -->
			<u-popup :show="isShowDetail" :round="12" mode="bottom" @close="isShowDetail = false">
			<view class="detail_modal">
			<view class="title">ä¼è®®å®¤é¢çº¦æåµ</view>
			<view class="h1">è®¨è®ºxxxxxéå</view>
			<view class="line">
			<view class="label">ä¼è®®æ¶é´</view>
			<view class="value">00000</view>
			</view>
			<view class="line">
			<view class="label">ä¼è®®å®¤</view>
			<view class="value">00000</view>
			</view>
			<view class="line">
			<view class="label">é¢çº¦äºº</view>
			<view class="value">00000</view>
			</view>
			<view class="btn" @click="isShowDetail = false">å³é</view>
			</view>
			</u-popup>
			</view>
			</template>

			<script>
			import dayjs from 'dayjs'
			export default {
			data() {
			return {
			activeDate: '',
			isShowDetail: false,
			meetingList: [
			{ name: '201ä¼è®®å®¤' },
			{ name: '201ä¼è®®å®¤' },
			{ name: '201ä¼è®®å®¤' },
			{ name: '201ä¼è®®å®¤' },
			],
			timeList: [
			{ time: '08:30-09:00' },
			{ time: '08:30-09:00' },
			{ time: '08:30-09:00' },
			{ time: '08:30-09:00' },
			],

			colorOptions: [
			{ color: '#279BAA', name: 'å·²éæ©' },
			{ color: '#F7F7F7', name: 'å¯é¢çº¦' },
			{ color: '#cccccc', name: 'ä¸å¯é¢çº¦' },
			]

			};
			},
			computed: {
			activeDateCum(){
			const { activeDate } = this
			let weeks = ['å¨æ¥', 'å¨ä¸','å¨äº','å¨ä¸','å¨å','å¨äº','å¨å']
			return dayjs(activeDate).format('YYYYå¹´MæDæ¥') + ' ' + weeks[dayjs(activeDate).day()]
			}
			},
			created() {
			this.activeDate = dayjs().format('YYYY-MM-DD')
			},
			methods: {
			changeDate(num){
			const { activeDate } = this
			let fn = num > 0 ? 'add' : 'subtract'
			this.activeDate = dayjs(activeDate)[fn](1, 'days').format('YYYY-MM-DD')
			}
			}
			}
			</script>

			<style lang="scss">
			.detail_modal{
			padding: 40rpx 30rpx;
			.title{
			text-align: center;
			font-weight: 500;
			font-size: 32rpx;
			margin-bottom: 40rpx;
			}
			.h1{
			font-weight: 500;
			font-size: 32rpx;
			margin-bottom: 30rpx;
			}
			.line{
			display: flex;
			margin-bottom: 20rpx;
			.label{
			width: 140rpx;
			color: #888888;
			}
			.value{
			color: #333333;
			}
			}
			.btn{
			margin-top: 230rpx;
			width: 690rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: #279BAA;
			border-radius: 44rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			}
			}
			.main_footer{
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 0;
			padding: 20rpx 30rpx 84rpx;
			box-shadow: 0rpx -3rpx 6rpx 0rpx #EEEEEE;
			.sel_time{
			color: #279BAA;
			}
			.btns{
			margin-top: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left{
			display: flex;
			.item{
			display: flex;
			align-items: center;
			margin-right: 20rpx;
			.box{
			margin-right: 10rpx;
			width: 32rpx;
			height: 32rpx;
			}
			}
			}
			.sub{
			width: 184rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			background: #279BAA;
			box-shadow: 0rpx -1rpx 0rpx 0rpx #EEEEEE;
			border-radius: 36rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			}
			}
			}
			.time_list{
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			flex-wrap: wrap;
			.item{
			width: 220rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #F7F7F7;
			border-radius: 4rpx;
			margin-bottom: 24rpx;
			font-size: 30rpx;
			}
			.active{
			background-color: #279BAA;
			color: #fff;
			}
			.disable{
			background-color: #cccccc;
			color: #999999;
			}
			}
			.meeting_list{
			display: flex;
			padding-left: 30rpx;
			width: 720rpx;
			overflow-x: auto;
			border-bottom: 1rpx solid #E5E5E5;
			.item{
			flex-shrink: 0;
			margin-right: 60rpx;
			padding: 30rpx 0 0;
			.line{
			width: 60rpx;
			height: 4rpx;
			background-color: #fff;
			margin: 26rpx auto 0;
			}
			}
			.active{
			color: #279BAA;
			font-weight: 600;
			font-size: 30rpx;
			.line{
			width: 60rpx;
			height: 4rpx;
			background-color: #279BAA;
			margin: 26rpx auto 0;
			}
			}
			}
			.main_app{
			padding: 0;
			}
			.heade_title{
			display: flex;
			justify-content: center;
			align-items: center;
			.date{
			margin: 0 24rpx;
			font-weight: 600;
			font-size: 32rpx;
			}
			.icon{
			width: 30rpx;
			}
			}
			</style>