Browse Source

style(timeselect): 修改配送时间组件 style

suzigang 4 years ago
parent
commit
15b95e8c32

+ 1 - 2
src/packages/__VUE/timedetail/index.scss

@@ -1,7 +1,6 @@
 .nut-timedetail {
+  display: flex;
   width: 100%;
-  height: 100%;
-  overflow: auto;
   padding: 0 5px 50px 13px;
   &__detail {
     width: 100%;

+ 11 - 34
src/packages/__VUE/timeselect/demo.vue

@@ -9,19 +9,11 @@
       height="50%"
       :current-key="currentKey1"
       :current-time="currentTime1"
-      @selected="handleSelected1"
+      @select="handleSelected1"
     >
       <template #pannel>
-        <nut-timepannel
-          name="2月23日(今天)"
-          pannel-key="0"
-          @change="handleChange1"
-        ></nut-timepannel>
-        <nut-timepannel
-          name="2月24日(星期三)"
-          pannel-key="1"
-          @change="handleChange1"
-        ></nut-timepannel>
+        <nut-timepannel name="2月23日(今天)" pannel-key="0" @change="handleChange1"></nut-timepannel>
+        <nut-timepannel name="2月24日(星期三)" pannel-key="1" @change="handleChange1"></nut-timepannel>
       </template>
       <template #detail>
         <nut-timedetail :times="times1" @select="selectTime1"></nut-timedetail>
@@ -36,19 +28,11 @@
       height="50%"
       :current-key="currentKey2"
       :current-time="currentTime2"
-      @selected="handleSelected2"
+      @select="handleSelected2"
     >
       <template #pannel>
-        <nut-timepannel
-          name="2月23日(今天)"
-          pannel-key="0"
-          @change="handleChange2"
-        ></nut-timepannel>
-        <nut-timepannel
-          name="2月24日(星期三)"
-          pannel-key="1"
-          @change="handleChange2"
-        ></nut-timepannel>
+        <nut-timepannel name="2月23日(今天)" pannel-key="0" @change="handleChange2"></nut-timepannel>
+        <nut-timepannel name="2月24日(星期三)" pannel-key="1" @change="handleChange2"></nut-timepannel>
       </template>
       <template #detail>
         <nut-timedetail :times="times2" @select="selectTime2"></nut-timedetail>
@@ -107,9 +91,7 @@ export default createDemo({
     };
 
     const selectTime1 = (item: string) => {
-      let curTimeIndex = state.currentTime1[0]['list'].findIndex(
-        (time: string) => time === item
-      );
+      let curTimeIndex = state.currentTime1[0]['list'].findIndex((time: string) => time === item);
       if (curTimeIndex === -1) {
         state.currentTime1[0]['list'].push(item);
       } else {
@@ -118,14 +100,13 @@ export default createDemo({
     };
 
     const handleSelected1 = (obj: any) => {
+      console.log(123);
       proxy.$toast.text(`您选择了:${JSON.stringify(obj)}`);
     };
 
     const handleChange2 = (pannelKey: number) => {
       state.currentKey2 = pannelKey;
-      let curTime = state.currentTime2.find(
-        (item: any) => item.key == pannelKey
-      );
+      let curTime = state.currentTime2.find((item: any) => item.key == pannelKey);
       if (!curTime) {
         state.currentTime2.push({
           key: pannelKey,
@@ -139,12 +120,8 @@ export default createDemo({
     };
 
     const selectTime2 = (item: string) => {
-      let findIndex = state.currentTime2.findIndex(
-        (item: any) => item.key == state.currentKey2
-      );
-      let curTimeIndex = state.currentTime2[findIndex]['list'].findIndex(
-        (time: string) => time === item
-      );
+      let findIndex = state.currentTime2.findIndex((item: any) => item.key == state.currentKey2);
+      let curTimeIndex = state.currentTime2[findIndex]['list'].findIndex((time: string) => time === item);
       if (curTimeIndex === -1) {
         state.currentTime2[findIndex]['list'].push(item);
       } else {

+ 3 - 0
src/packages/__VUE/timeselect/index.scss

@@ -4,6 +4,7 @@
   position: relative;
   overflow: hidden;
   &__title {
+    display: flex;
     width: 100%;
     height: 50px;
     line-height: 50px;
@@ -29,6 +30,8 @@
     &__detail {
       width: calc(100% - 140px);
       height: 308px;
+      overflow-y: auto;
+      overflow-x: hidden;
     }
   }
 }

+ 2 - 2
src/packages/__VUE/timeselect/index.taro.vue

@@ -58,7 +58,7 @@ export default create({
       default: false
     }
   },
-  emits: ['update:visible', 'selected'],
+  emits: ['update:visible', 'select'],
   setup: (props: any, context: any) => {
     const classes = computed(() => {
       const prefixCls = componentName;
@@ -82,7 +82,7 @@ export default create({
 
     const close = () => {
       context.emit('update:visible', false);
-      context.emit('selected', currentTime.value);
+      context.emit('select', currentTime.value);
     };
 
     provide('currentKey', currentKey);

+ 1 - 1
src/packages/styles/variables.scss

@@ -280,7 +280,7 @@ $noticeBar-left-icon-width: 16px !default;
 $noticeBar-right-icon-width: 16px !default;
 
 // TimeSelect
-$timeselect-title-font-size: $font-size-1 !default;
+$timeselect-title-font-size: $font-size-2 !default;
 $timeselect-title-color: $title-color !default;
 $timeselect-pannel-bg-color: #f6f7f9 !default;
 

+ 10 - 34
src/sites/mobile-taro/vue/src/business/pages/timeselect/index.vue

@@ -9,19 +9,11 @@
       height="50%"
       :current-key="currentKey1"
       :current-time="currentTime1"
-      @selected="handleSelected1"
+      @select="handleSelected1"
     >
       <template #pannel>
-        <nut-timepannel
-          name="2月23日(今天)"
-          pannel-key="0"
-          @change="handleChange1"
-        ></nut-timepannel>
-        <nut-timepannel
-          name="2月24日(星期三)"
-          pannel-key="1"
-          @change="handleChange1"
-        ></nut-timepannel>
+        <nut-timepannel name="2月23日(今天)" pannel-key="0" @change="handleChange1"></nut-timepannel>
+        <nut-timepannel name="2月24日(星期三)" pannel-key="1" @change="handleChange1"></nut-timepannel>
       </template>
       <template #detail>
         <nut-timedetail :times="times1" @select="selectTime1"></nut-timedetail>
@@ -36,19 +28,11 @@
       height="50%"
       :current-key="currentKey2"
       :current-time="currentTime2"
-      @selected="handleSelected2"
+      @select="handleSelected2"
     >
       <template #pannel>
-        <nut-timepannel
-          name="2月23日(今天)"
-          pannel-key="0"
-          @change="handleChange2"
-        ></nut-timepannel>
-        <nut-timepannel
-          name="2月24日(星期三)"
-          pannel-key="1"
-          @change="handleChange2"
-        ></nut-timepannel>
+        <nut-timepannel name="2月23日(今天)" pannel-key="0" @change="handleChange2"></nut-timepannel>
+        <nut-timepannel name="2月24日(星期三)" pannel-key="1" @change="handleChange2"></nut-timepannel>
       </template>
       <template #detail>
         <nut-timedetail :times="times2" @select="selectTime2"></nut-timedetail>
@@ -112,9 +96,7 @@ export default defineComponent({
     };
 
     const selectTime1 = (item: string) => {
-      let curTimeIndex = state.currentTime1[0]['list'].findIndex(
-        (time: string) => time === item
-      );
+      let curTimeIndex = state.currentTime1[0]['list'].findIndex((time: string) => time === item);
       if (curTimeIndex === -1) {
         state.currentTime1[0]['list'].push(item);
       } else {
@@ -131,9 +113,7 @@ export default defineComponent({
 
     const handleChange2 = (pannelKey: number) => {
       state.currentKey2 = pannelKey;
-      let curTime = state.currentTime2.find(
-        (item: any) => item.key == pannelKey
-      );
+      let curTime = state.currentTime2.find((item: any) => item.key == pannelKey);
       if (!curTime) {
         state.currentTime2.push({
           key: pannelKey,
@@ -147,12 +127,8 @@ export default defineComponent({
     };
 
     const selectTime2 = (item: string) => {
-      let findIndex = state.currentTime2.findIndex(
-        (item: any) => item.key == state.currentKey2
-      );
-      let curTimeIndex = state.currentTime2[findIndex]['list'].findIndex(
-        (time: string) => time === item
-      );
+      let findIndex = state.currentTime2.findIndex((item: any) => item.key == state.currentKey2);
+      let curTimeIndex = state.currentTime2[findIndex]['list'].findIndex((time: string) => time === item);
       if (curTimeIndex === -1) {
         state.currentTime2[findIndex]['list'].push(item);
       } else {