Skip to content

O
OKR
Commit eea43bfc authored by lshan's avatar lshan
Browse files
Options

ls

parent 5664b015
Show whitespace changes
Inline Side-by-side
Showing with 330 additions and 1 deletion
src/components/common/c-cell.vue
View file @ eea43bfc
...@@ -11,11 +11,12 @@ ...@@ -11,11 +11,12 @@
<!-- 输入框 --> <!-- 输入框 -->
<template v-if="type === 'input'"> <template v-if="type === 'input'">
<input <input
class="w-full text-right text-sm text-text-secondary focus:text-text-primary" class="w-full text-sm text-text-secondary focus:text-text-primary"
type="text" type="text"
:value="value" :value="value"
:placeholder="placeholder" :placeholder="placeholder"
@input="handleInput" @input="handleInput"
:class="leftinput"
> >
</template> </template>
<template v-else> <template v-else>
...@@ -63,6 +64,10 @@ export default Vue.extend({ ...@@ -63,6 +64,10 @@ export default Vue.extend({
type: String, type: String,
default: 'text-text-primary' default: 'text-text-primary'
}, },
leftinput: {
type: String,
default: 'text-right'
},
contentAlign: { contentAlign: {
type: String, type: String,
default: 'items-center' default: 'items-center'
......
src/router/schedule.ts
View file @ eea43bfc
...@@ -25,6 +25,22 @@ export const scheduleRoutes: Array<RouteConfig> = [ ...@@ -25,6 +25,22 @@ export const scheduleRoutes: Array<RouteConfig> = [
meta: { meta: {
title: 'Test' title: 'Test'
} }
},
{
path: 'excise',
name: 'Excise',
component: () => import('@/views/schedule/excise.vue'),
meta: {
title: 'Excise'
}
},
{
path: 'create-events',
name: 'CreateEvents',
component: () => import('@/views/schedule/create-events.vue'),
meta: {
title: '新建日程'
}
} }
] ]
} }
......
src/views/schedule/create-events.vue 0 → 100644
View file @ eea43bfc
<template>
<!-- 新建日程 -->
<main-page
left-arrow
@click-left="$router.go(-1)"
>
<app-icon
slot="right"
type="png"
class-name="w-5 h-3 flex items-center "
:path="require('@/assets/icons/dot-h.png')"
@click="isShow()"
/>
<div class="pt-14 px-4 pb-28">
<!-- 环形图 -->
<div class="flex items-center justify-center">
<img src="@/assets/images/clock.png" alt="" class="h-50">
<div style="position:absolute" class="pb-8 font-bold">{{time}}</div>
<div style="position:absolute" class="text-xs mt-1">{{min}}</div>
</div>
<!-- 数据 -->
<div>
<van-popup v-model="show" round position="bottom" :style="{ height: '15%' }" >
<c-cell title="分享" titleColor="text-text-secondary "></c-cell>
<c-cell title="删除" titleColor="text-text-secondary "></c-cell>
</van-popup>
<c-cell title="日程名称" titleColor="text-text-secondary text-sm "/>
<c-cell type="input" placeholder="请输入日程名称" leftinput="text-left text-text-secondary text-sm"/>
<group-cell
class="mt-4" title="基本信息"
>
<c-cell title="地点" titleColor="text-text-secondary text-sm" :content="content">
<app-icon
slot="right"
type="png"
class-name="w-1.5 h-2"
:path="require('@/assets/icons/right-arrow.png')"
/>
</c-cell>
<c-cell title="负责人" titleColor="text-text-secondary text-sm">
<div slot="right" class="flex items-center">
<img src="@/assets/icons/avator.png" alt="" class="w-7 h-7 mr-2">
<app-icon
type="png"
class-name=" w-1.5 h-2 "
:path="require('@/assets/icons/right-arrow.png')"
/>
</div>
</c-cell>
<c-cell title="参与人员" titleColor="text-text-secondary text-sm">
<app-icon
slot="right"
type="png"
class-name="w-1.5 h-2"
:path="require('@/assets/icons/right-arrow.png')"
/>
</c-cell>
<c-cell title="描述" titleColor="text-text-secondary text-sm"/>
<c-cell type="input" placeholder="请输入日程描述" leftinput="text-left text-xs focus:text-text-secondary"></c-cell>
</group-cell>
<group-cell
class="mt-4" title="更多信息"
>
<c-cell title="私密" titleColor="text-text-secondary text-sm">
<div slot="right">
<van-switch v-model="checked" size="18px" active-color="#32B2F7"/>
</div>
</c-cell>
<c-cell title="标签" titleColor="text-text-secondary text-sm">
<div slot="right" class="flex text-white text-sm space-x-2">
<!-- <div v-for="(tag,index) in tags" :key="index">
<div class="bg-gray-300 rounded-full px-2" :class="active==tag.name ? 'active' : 'isactive'" @click="clickTag(tag.name)">{{tag.name}}</div>
</div> -->
<div class="bg-gray-300 rounded-full px-2.5" :class="active==text1 ? 'active1' : 'isactive'" @click="clickTag(text1)">{{text1}}</div>
<div class="bg-gray-300 rounded-full px-2.5" :class="active==text2 ? 'active2' : 'isactive'" @click="clickTag(text2)">{{text2}}</div>
<div class="bg-gray-300 rounded-full px-2.5" :class="active==text3 ? 'active3' : 'isactive'" @click="clickTag(text3)">{{text3}}</div>
</div>
</c-cell>
<c-cell title="附件" titleColor="text-text-secondary text-sm">
<app-icon
slot="right"
type="png"
class-name="w-1.5 h-2"
:path="require('@/assets/icons/right-arrow.png')"
/>
</c-cell>
</group-cell>
<!--按钮-->
<div class="fixed bottom-0 left-0 w-full px-4 bg-common-bg py-8">
<c-button>
发布
</c-button>
</div>
</div>
</div>
</main-page>
</template>
<script lang="ts">
import Vue from "vue";
import { Popup } from 'vant';
import { Circle } from 'vant';
import { Switch } from 'vant';
Vue.use(Switch);
Vue.use(Circle);
Vue.use(Popup);
export default Vue.extend({
name: "CreateEvents",
components: {
'main-page': () => import('@/layout/main-page.vue'),
'app-icon': () => import('@/components/common/Icon.vue'),
'c-cell': () => import('@/components/common/c-cell.vue'),
'input-cell': () => import('@/components/common/input-cell.vue'),
'group-cell': () => import('@/components/common/group-cell.vue'),
'c-button': () => import('@/components/common/c-button.vue'),
},
created() {
// console.log(Mock, 'mock')
},
data() {
return {
show:false,
position:'',
content:'',
checked:true,
active:'',
text1:'会议',
text2:'外勤',
text3:'出差',
time:'2:30PM',
min:'120min'
}
},
computed: {
// text() {
// return this.currentRate.toFixed(0) + '%';
// },
},
methods:{
isShow(){
this.show=!this.show
},
clickTag(name:string){
this.active=name
},
}
})
</script>
<style lang="less" scoped>
.isactive{
background-color: rgb(209, 218, 218)
}
.active1{
background-image: linear-gradient(to right, rgb(90, 171, 247) , rgb(112, 233, 203));
}
.active2{
background-image: linear-gradient(to right, rgb(122, 241, 212) , rgb(245, 156, 72));
}
.active3{
background-image: linear-gradient(to right, rgb(208, 43, 223) , rgb(240, 78, 132));
}
</style>
\ No newline at end of file
src/views/schedule/excise.vue 0 → 100644
View file @ eea43bfc
<template>
<!-- 协同日程 -->
<div
@click-left="$router.go(-1)"
class="bg-gray-100"
>
<div class="pt-14 px-4 pb-20">
<div class="flex items-center bg-white">
<!-- 月份、图标-->
<div class="flex items-center" @click="switchShow()">
<div>{{month}}</div>
<app-icon
:icon-name="open?'calendar-open':'calendar-close' "
class-name="w-3 h-3"
/>
</div>
<!-- 星期 --> <!-- //日历 -->
<div class=" w-full ">
<div class="flex ">
<div v-for="(day,index) in days" :key="index" class="flex-1 text-sm text-text-secondary text-center py-1.5">
{{day}}
</div>
</div>
<div class="flex">
<div
v-for="(day, index) in daysShow"
:key="index"
class="flex-1 text-center py-2"
>
{{ day.day }}
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from "vue";
interface Day{
type: string,
day: number,
month: number,
year: number
}
export default Vue.extend({
name: "Excise",
components: {
'main-page': () => import('@/layout/main-page.vue'),
'app-icon': () => import('@/components/common/Icon.vue')
},
data() {
const daysInMonth: Array<Day> = []
const daysShow: Array<Day> = []
return {
mounth:8,
daysInMonth,
daysShow,
currentDate: 0,
month: 0,
year: 0,
selectedYear: 0,
selectedMonth: 0,
day: 0,
days: ['日', '一', '二', '三', '四', '五', '六'],
open: false,
rowIndex:0
}
},
created(){
this.selectedMonth = this.month = new Date().getMonth() + 1
this.selectedYear = this.year = new Date().getFullYear()
this.day=new Date().getDate()
this.daysInMonth= this.getDaysInMonth(this.year,this.month-1)
const {days,index}=this.getDaysShowInShort(this.day,this.daysInMonth)
this.daysShow=days
this.rowIndex=index
},
methods:{
// 切换显示模式
switchShow() {
this.open = !this.open
let day = this.day
this.daysShow = this.open ? this.daysInMonth : this.getDaysShowInShort(day, this.daysInMonth).days
},
//展示7天
getDaysShowInShort(day: number, daysArr: Array<Day>) {
const index1 = daysArr.findIndex(item => item.day === day && item.type==='current')
const index = Math.floor(index1 / 7)
return { days: daysArr.slice( index * 7, index * 7 + 7 ), index}
},
//获取每月天数
getDaysInMonth(year: number, month: number) {
const result: Array<Day> = []
// 一年中每个月的天数
const daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
// 闰二月
if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
daysInMonth[1] = 29
}
// 当月第一天日期 周几 0-6
const firstDay = new Date(year, month, 1).getDay()
// 获取当月一号前几天显示
for (let i = 0; i < firstDay; i++) {
result.push({
type: 'pre',
day: daysInMonth[month - 1 < 0 ? 0 : month - 1] - firstDay + 1 + i,
year,
month: month
})
}
// 当月日期天数
for (let i = 0; i < daysInMonth[month]; i++) {
result.push({
type: 'current',
day: i + 1,
year,
month: month + 1
})
}
// 获取当月最后一天之后显示天数
for (let i = 0; i < 6 - new Date(year, month + 1, 0).getDay(); i++) {
result.push({
type: 'next',
day: i + 1,
year,
month: month + 2
})
}
return result
},
}
})
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment