组件修改

src/projects/pension/components/DrugCalendar.vue

@@ -0,0 +1,137 @@
+<template>
+	<!-- <div class="canlender">
+		<div class="title">
+			
+			<div class="left btn" @click="editMonth('sub')"></div>
+			<div class="date-title">{{ dateFormat }}</div>
+			
+			<div class="right btn" @click="editMonth('add')"></div>
+		</div>
+		
+		<div class="week-day">
+			<div v-for="i in weekDay">{{ i }}</div>
+		</div>
+	
+		<div class="date-container">
+			<div v-for="item in canlender">
+				{{ item.dateNum }}
+			</div>
+		</div>
+	</div> -->
+
+	<div class="mui-content-padded vongi-cytx-time">
+		<ul class="mui-table-view mui-grid-view mui-grid-9">
+			<li v-for="i in weekDay" class="mui-table-view-cell mui-media">
+				<span class="color999">{{ i }}</span>
+			</li>
+		</ul>
+		<div class="vongi-cytx-date vongi-center">2020年10月</div>
+		<ul class="mui-table-view mui-grid-view mui-grid-9">
+			<li v-for="item in canlender" class="mui-table-view-cell mui-media">
+				<a href="#" class="">
+					<span>{{ item.dateNum }}</span>
+					<div class="mui-media-body"></div>
+				</a>
+			</li>
+			<!-- <a href="#" class="mui-active"> -->
+		</ul>
+	</div>
+
+</template>
+
+<script>
+	import {
+		currentTimeStamp,
+		parseUnixTime
+	} from '$project/utils'
+	export default {
+		name: 'DrugCalendar',
+		data() {
+			return {
+				msg: [],
+				weekDay: ["日", "一", "二", "三", "四", "五", "六"],
+				canlenderObj: null,
+				canlender: [],
+				currentDate: new Date(),
+			};
+		},
+
+		methods: {
+			//切换月
+			editMonth(type) {
+				const num = type === "sub" ? -1 : 1;
+				this.currentDate.setMonth(this.currentDate.getMonth() + num);
+				// 清空canlender日期容器
+				this.canlenderObj.clear();
+				// 重新生成canlender日期容器
+				this.canlenderObj.init(this.currentDate);
+				this.canlender = this.canlenderObj.canlender;
+			},
+			//切换日
+			editDate(date, type = "add", number = 1) {
+				const types = type === 'add' ? 1 : -1
+				const dates = date.getDate()
+				const newDate = new Date(date)
+				newDate.setDate(dates + number * types)
+				return newDate
+			},
+			//获取日
+			formatDate(date) {
+				return parseUnixTime(date, '{y}-{m}-{d}');
+			},
+			//初始化
+			init(date = new Date()) {
+				// 把当前日期定位到一号
+				const currentDate = new Date(date)
+				currentDate.setDate(1)
+
+				// 获取当前年月
+				this.year = currentDate.getFullYear()
+				this.month = currentDate.getMonth()
+
+				// 获取星期
+				const currentWeek = currentDate.getDay()
+
+				// 第一排放入一号的日期
+				this.canlender.push({
+					date: this.formatDate(currentDate),
+					dateNum: currentDate.getDate()
+				})
+
+				// 根据一号的日期向前补齐
+				for (let i = 0; i < currentWeek; i++) {
+					const date = this.editDate(currentDate, 'sub', i + 1)
+					this.canlender.unshift({
+						date: this.formatDate(date),
+						dateNum: date.getDate()
+					})
+				}
+
+				// 根据一号日期向后补齐，总共放六周日期
+				for (let i = 1; i < 42 - currentWeek; i++) {
+					const date = this.editDate(currentDate, 'add', i)
+					this.canlender.push({
+						date: this.formatDate(date),
+						dateNum: date.getDate()
+					})
+				}
+				console.log(this.canlender)
+			},
+		},
+		mounted() {
+			this.init();
+		},
+		computed: {
+			
+		},
+	}
+</script>
+
+<style scoped src="$project/assets/css/pension.css"></style>
+<style scoped src="$project/assets/css/xpwyfyy.css"></style>
+<style scoped>
+	.week-day div,
+	.date-container div {
+		display: inline;
+	}
+</style>

src/projects/pension/views/Master/Drug/Home.vue

@@ -1,6 +1,6 @@
 <template>
-<div>
-    <header class="mui-bar mui-bar-nav">
+	<div>
+		<header class="mui-bar mui-bar-nav">
 			<h1 class="mui-title">用药提醒</h1>
 			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
 			<a class="pink mui-pull-right"><span class="mui-icon iconfont icon-jia pink"></span>添加提醒</a>
@@ -19,25 +19,25 @@
 			<div class="mui-content-padded vongi-cytx-time">
 				<ul class="mui-table-view mui-grid-view mui-grid-9">
 					<li class="mui-table-view-cell mui-media">
-							<span>日</span>
+						<span>日</span>
 					</li>
 					<li class="mui-table-view-cell mui-media">
-							<span>一</span>
+						<span>一</span>
 					</li>
 					<li class="mui-table-view-cell mui-media">
-							<span>二</span>
+						<span>二</span>
 					</li>
 					<li class="mui-table-view-cell mui-media">
-							<span>三</span>
+						<span>三</span>
 					</li>
 					<li class="mui-table-view-cell mui-media">
-							<span>四</span>
+						<span>四</span>
 					</li>
 					<li class="mui-table-view-cell mui-media">
-							<span>五</span>
+						<span>五</span>
 					</li>
 					<li class="mui-table-view-cell mui-media">
-							<span>六</span>
+						<span>六</span>
 					</li>
 				</ul>
 				<ul class="mui-table-view mui-grid-view mui-grid-9">
@@ -86,20 +86,20 @@
 				</ul>
 			</div>
 			<div class="mui-content-padded vongi-cytx-time vongi-qingjiadt">
-				<h4 class="flew-items color666"><img src="~$project/assets/img/tixing.png" width="20"/>今日用药计划</h4>
+				<h4 class="flew-items color666"><img src="~$project/assets/img/tixing.png" width="20" />今日用药计划</h4>
 				<!--<div class="mui-media-body">无</div>-->
 				<form class="mui-input-group">
 					<div class="mui-input-row">
 						<label class="pink">08:00</label>
-						<span>阿莫仙阿莫西林胶囊0.5g*48粒/盒阿莫仙阿莫西林胶囊0.5g*48粒/盒 1片</span>					
+						<span>阿莫仙阿莫西林胶囊0.5g*48粒/盒阿莫仙阿莫西林胶囊0.5g*48粒/盒 1片</span>
 					</div>
 					<div class="mui-input-row">
 						<label class="pink">14:00</label>
-						<span>阿莫仙阿莫西林胶囊0.5g*48粒/盒阿莫仙阿莫西林胶囊0.5g*48粒/盒 1片</span>					
+						<span>阿莫仙阿莫西林胶囊0.5g*48粒/盒阿莫仙阿莫西林胶囊0.5g*48粒/盒 1片</span>
 					</div>
 					<div class="mui-input-row">
 						<label class="pink">22:00</label>
-						<span>阿莫仙阿莫西林胶囊0.5g*48粒/盒阿莫仙阿莫西林胶囊0.5g*48粒/盒 1片</span>					
+						<span>阿莫仙阿莫西林胶囊0.5g*48粒/盒阿莫仙阿莫西林胶囊0.5g*48粒/盒 1片</span>
 					</div>
 				</form>
 			</div>
@@ -120,16 +120,64 @@
 							</div>
 						</div>
 					</li>
-					
+
 				</ul>
 			</div>
 		</div>
-</div>
+
+		<!-- <drug-calendar></drug-calendar> -->
+
+		<loading :visible="isLoading"></loading>
+	</div>
 </template>
 
 <script>
+	import Common from '$project/components/Common.vue'
+	import Loading from '$project/components/Loading.vue'
+	import TopHeader from '$project/components/TopHeader.vue'
+	import DrugCalendar from '@/components/DrugCalendar.vue'
+	import {
+		mapGetters,
+		mapMutations
+	} from 'vuex'
+	export default {
+		name: 'MasterDrug',
+		components: {
+			Common,
+			Loading,
+			TopHeader,
+			DrugCalendar
+		},
+		data() {
+			return {
+				isLoading: false,
+
+				pageTitle: '用药提醒',
+			}
+		},
+		created() {},
+		methods: {
+
+			asynCallBack() {
+
+			},
+		},
+		mounted() {},
+		destroyed() {
+
+		},
+		computed: {
+			...mapGetters({
+				openId: 'wx_openid',
+				token: 'token',
+				person_data: 'person_data',
+				person_popedom: 'person_popedom',
+			})
+		}
+	}
 </script>
 
+
 <style scoped src="$project/assets/css/pension.css"></style>
 <style scoped src="$project/assets/css/xpwyfyy.css"></style>
 <style src="$project/assets/css/iconfont.css"></style>