Merge remote-tracking branch 'origin/ls_tev'

src/components/common/c-cell.vue

@@ -11,11 +11,12 @@
         <!-- 输入框 -->
         <template v-if="type === '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"
             :value="value"
             :placeholder="placeholder"
             @input="handleInput"
+            :class="leftinput"
           >
         </template>
         <template v-else>
@@ -63,6 +64,10 @@ export default Vue.extend({
       type: String,
       default: 'text-text-primary'
     },
+    leftinput: {
+      type: String,
+      default: 'text-right'
+    },
     titleClass: String,
     contentAlign: {
       type: String,

src/router/schedule.ts

@@ -49,6 +49,14 @@ export const scheduleRoutes: Array<RouteConfig> = [
         meta: {
           title: '所有成员'
         }
+      },
+      {
+        path: 'create-events',
+        name: 'CreateEvents',
+        component: () => import('@/views/schedule/create-events.vue'),
+        meta: {
+          title: '新建日程'
+        }
       }
     ]
   }

src/views/schedule/create-events.vue

+<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 class="absolute pb-8 font-bold text-lg">{{time}}:{{min}}PM</div>
+         <div class="absolute text-sm mt-1">120min</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 class="bg-gray-300 rounded-full px-2.5" :class="class1" @click="clickTag(text1)">{{text1}}</div>
+              <div class="bg-gray-300 rounded-full px-2.5" :class="class2" @click="clickTag(text2)">{{text2}}</div>
+              <div class="bg-gray-300 rounded-full px-2.5" :class="class3" @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 { Switch } from 'vant';
+Vue.use(Switch);
+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')
+    let date=new Date();
+    if(date.getHours()===12){
+      this.time=12
+    }else{
+      this.time=date.getHours() % 12;
+    }
+    this.min=date.getMinutes();
+  },
+  data() {
+    return {
+      show:false,
+      content:'',
+      time:0,
+      min:0,
+      checked:true,
+      active:'',
+      text1:'会议',
+      text2:'外勤',
+      text3:'出差',
+      class1:'',
+      class2:'',
+      class3:'',
+    }
+  },
+  computed: {
+    // text() {
+    //   return this.currentRate.toFixed(0) + '%';
+    // },
+  },
+  methods:{
+    isShow(){
+      this.show=!this.show
+    },
+    clickTag(name:string){
+      if(name==='会议'){
+        this.class2=''
+        this.class3=''
+        return this.class1='bg-gradient-to-r from-meeting-l to-meeting-r '
+      }else if(name==='外勤'){
+         this.class1=''
+        this.class3=''
+        return this.class2='bg-gradient-to-r from-field-l to-field-r '
+      }else if(name==='出差'){
+         this.class2=''
+        this.class1=''
+        return this.class3='bg-gradient-to-r from-trip-l to-trip-r '
+      }
+     
+   },
+   
+  }
+})
+</script>
+
+<style lang="less" scoped>
+  
+
+</style>
\ No newline at end of file