企业微信前端

components/baseComponents/bs-dateTimePicker2/bs-dateTimePicker2.vue

+<template>
+    <view class="dateTime" style="width: 100%;">
+        <view class="flex_sb" @click="open">
+            <text v-if="dateTimeValue">{{dateTimeValue}}</text>
+            <text v-else class="input-tip">{{placeholder}}</text>
+            <slot name="rightIcon"></slot>
+        </view>
+        <u-popup :show="show" @close="close" @open="open">
+            <view class="popup-box">
+                <view class="popup-header">
+                    <view class="popup-title">请选择日期时间</view>
+                    <view class="close">
+                        <u-icon  name="close" color="#8C8C8C" size="32" @click="close"></u-icon>
+                    </view>
+                </view>
+    
+                <u-tabs v-if="list.length>0" :list="list" @click="switchTab"></u-tabs>
+    
+                <DateTimePicker
+                    v-show="tabIndex === 0"
+                    @onChange="onChangeDate"
+                    :minDate="minDate"
+                    :defaultDate="defaultDate"
+                    :mode="DATE_TYPES.YMD"
+                />
+                <DateTimePicker
+                    @onChange="onChangeTime"
+                    v-show="tabIndex === 1"
+                    :defaultDate="defaultTime"
+                    :mode="DATE_TYPES.HMS"
+                />
+                <view class="footer-btns">
+                    <button class="primary-btn" @click="confirm">确定</button>
+                </view>
+            </view>
+        </u-popup>
+    </view>
+</template>
+
+<script>
+    import DateTimePicker from './dateTimePicker/index.vue'
+    import { DATE_TYPES } from './constant'
+    import {dateTransformYMDhms,formatGMT} from '../../../utils/util'
+    export default{
+        options: { styleIsolation: 'shared' },
+        components:{DateTimePicker},
+        data() {
+            return {
+                DATE_TYPES,
+                defaultDate:"",
+                defaultTime:"",
+                dateValue:"",
+                timeValue:"",
+                minDate: new Date().getFullYear().toString(),
+                show:false,
+                tabIndex:0,
+                dateTimeValue:""
+            }
+        },
+        props:{
+            placeholder:{
+                type:String,
+                default:"请选择日期时间"
+            },
+            type:{
+                type:String,
+                default:'dateTime' //date 只选择日期  dateTime选择日期时间
+            },
+            value:""
+        },
+        computed:{
+            list(){
+                let tabs =[]
+                if(this.type == 'dateTime'){
+                    tabs = [
+                        {
+                            name:'日期'
+                        },
+                        {
+                            name:'时间'
+                        },
+                    ]
+                }
+                return tabs
+            }
+        },
+        watch: {
+            value:{
+                handler(val){
+                    let res = formatGMT(val);
+                    if(this.type == 'date'){
+                        res = formatGMT(val,'D');
+                    }
+
+                    this.dateTimeValue = res ? res : '';
+
+                },
+                immediate:true
+            }
+        },
+        created() {
+			
+            this.setDefaultDateTime();
+        },
+        methods: {
+            open(){
+                this.show = true
+            },
+            close(){
+                this.show = false
+            },
+            switchTab(val){
+                this.tabIndex = val.index
+            },
+            confirm(){
+                this.close()
+                let date = ''
+				
+                this.dateValue = this.defaultDate;
+                if(this.type == 'date'){
+                    date = new Date(`${this.defaultDate} 00:00:00`)
+                }else{
+                    this.timeValue = this.defaultTime;
+                    date = new Date(`${this.defaultDate} ${this.defaultTime}`)
+                    
+                }
+                this.$emit('input',date);
+            },
+            setDefaultDateTime(){
+				
+                const {Y,M,D,h,m,s} = dateTransformYMDhms(new Date());
+                this.defaultDate = `${Y}-${M}-${D}`;
+                this.defaultTime = this.type == 'date' ? '' : `${h}:${m}:${s}`;
+            },
+            onChangeDate(date){
+                this.defaultDate = date;
+            },
+            onChangeTime(time){
+                this.defaultTime = time;
+            }
+        }
+    }
+</script>
+
+<style lang="scss">
+    .popup-box {
+        position: relative;
+        background: #fff;
+        border-radius: 32rpx 32rpx 0rpx 0rpx;
+        padding-bottom: 0rpx;
+        .popup-header{
+            padding-top: 24rpx;
+        }
+        .popup-title{
+            font-size: 32rpx;
+            text-align: center;
+            margin-bottom: 18rpx;
+        }
+        .close{
+            position: absolute;
+            top: 24rpx;
+            right: 24rpx;
+            display: inline-block;
+            width: 40rpx;
+            height: 40rpx;
+        }
+		/deep/.uicon-close{
+            font-size: 32rpx !important;
+        }
+        /deep/ .u-icon{
+            width: 32rpx !important;
+            position:absolute !important;
+            top: 24rpx !important;
+            right: 24rpx !important;
+        }
+
+        /deep/.u-tabs{
+            padding:0 64rpx;
+        }
+
+    }
+    .dateTime{
+        /deep/.u-popup__content {
+			border-radius: 32rpx 32rpx 0 0 !important;
+			padding-bottom: 50rpx !important;
+		}
+    }
+    uni-picker-view {
+    display: block;
+    }
+    
+    uni-picker-view .uni-picker-view-wrapper {
+        display: flex;
+        position: relative;
+        overflow: hidden;
+        height: 100%;
+        background-color: white;
+    }
+    
+    uni-picker-view[hidden] {
+    display: none;
+    }
+     
+    picker-view {
+        width: 100%;
+        height: 600upx;
+        margin-top:20upx;
+    }
+    .item {
+        line-height: 100upx;
+        text-align: center;
+    }
+    .input-tip{
+        font-size: 14px;
+        color: #BFBFBF;
+    }
+</style>
\ No newline at end of file

components/baseComponents/bs-dateTimePicker2/constant.js

+// 日期模式
+export const DATE_TYPES = {
+  // 年月日
+  YMD: 1,
+  // 年月
+  YM: 2,
+  // 年份
+  Y: 3,
+  // 年月日时分秒
+  'YMD-HMS': 4,
+  // 时分秒
+  HMS: 5,
+  // 时分
+  HM: 6
+};

components/baseComponents/bs-dateTimePicker2/customPickerView/index.css

+.picker-view {
+  height: 356rpx;
+}
+
+.picker-view-column {
+  font-size: 14px;
+  line-height: 34px;
+  text-align: center;
+  color: #333;
+}
+
+/* 覆盖默认样式，样式可以按需自己改 */
+.uni-picker-view-indicator {
+  background-color: rgba(106, 123, 255, 0.1);
+}
+.uni-picker-view-indicator::before,
+.uni-picker-view-indicator::after {
+  content: none;
+}

components/baseComponents/bs-dateTimePicker2/customPickerView/index.js

+export default {
+  data() {
+    return {};
+  },
+  props: {
+    // 所有列选项数据
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    // 每一列默认选中值数组，不传默认选中第一项
+    selectVals: {
+      type: Array,
+      default: () => []
+    }
+  },
+  computed: {
+    // 每一列选中项的索引，当默认选中值变化的时候这个值也要变化
+    indexArr: {
+      // 多维数组，深度监听
+      cache: false,
+      get() {
+        if (this.selectVals.length > 0) {
+          return this.columns.map((col, cIdx) => {
+            return col.findIndex((i) => i == this.selectVals[cIdx]);
+          });
+        } else {
+          return [].fill(0, 0, this.columns.length);
+        }
+      }
+    }
+  },
+  methods: {
+    onChange(e) {
+      const { value } = e.detail;
+
+      let ret = this.columns.map((item, index) => {
+        let idx = value[index];
+        if (idx < 0) {
+          idx = 0;
+        }
+        if (idx > item.length - 1) {
+          idx = item.length - 1;
+        }
+        return item[idx];
+      });
+      this.$emit('onChange', {
+        value: ret
+      });
+    }
+  }
+};

components/baseComponents/bs-dateTimePicker2/customPickerView/index.vue

+<template>
+  <picker-view class="picker-view" :value="indexArr" @change="onChange">
+    <picker-view-column class="picker-view-column" v-for="(col, colIdx) in columns" :key="colIdx">
+      <view v-for="(item, idx) in col" :key="idx">{{ item }}</view>
+    </picker-view-column>
+  </picker-view>
+</template>
+
+<script src="./index.js"></script>
+
+<style lang="css" scoped src="./index.css"></style>

components/baseComponents/bs-dateTimePicker2/dateTimePicker/dateUtil.js

+/**
+ * 日期时间格式化
+ * @param {Date} date 要格式化的日期对象
+ * @param {String} fmt 格式化字符串，eg：YYYY-MM-DD HH:mm:ss
+ * @returns 格式化后的日期字符串
+ */
+function formatDate(date, fmt) {
+  if (typeof date == 'string') {
+    date = new Date(handleDateStr(date));
+  }
+
+  const o = {
+    'M+': date.getMonth() + 1, // 月份
+    'd+': date.getDate(), // 日
+    'D+': date.getDate(), // 日
+    'H+': date.getHours(), // 小时
+    'h+': date.getHours(), // 小时
+    'm+': date.getMinutes(), // 分
+    's+': date.getSeconds(), // 秒
+    'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
+    S: date.getMilliseconds() // 毫秒
+  };
+
+  if (/([y|Y]+)/.test(fmt)) {
+    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').slice(4 - RegExp.$1.length));
+  }
+
+  for (const k in o) {
+    if (new RegExp('(' + k + ')').test(fmt)) {
+      fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).slice(('' + o[k]).length));
+    }
+  }
+
+  return fmt;
+}
+
+/**
+ * 处理时间字符串，兼容ios下new Date()返回NaN问题
+ * @param {*} dateStr 日期字符串
+ * @returns
+ */
+function handleDateStr(dateStr) {
+  return dateStr.replace(/\-/g, '/');
+}
+
+/**
+ * 判断日期1是否在日期2之前，即日期1小于日期2
+ * @param {Date} date1
+ * @param {Date} date2
+ * @returns
+ */
+function isBefore(date1, date2) {
+  if (typeof date1 == 'string') {
+    date1 = new Date(handleDateStr(date1));
+  }
+  if (typeof date2 == 'string') {
+    date2 = new Date(handleDateStr(date2));
+  }
+  return date1.getTime() < date2.getTime();
+}
+
+/**
+ * 判断日期1是否在日期2之后，即日期1大于日期2
+ * @param {Date} date1
+ * @param {Date} date2
+ * @returns
+ */
+function isAfter(date1, date2) {
+  if (typeof date1 == 'string') {
+    date1 = new Date(handleDateStr(date1));
+  }
+  if (typeof date2 == 'string') {
+    date2 = new Date(handleDateStr(date2));
+  }
+  return date1.getTime() > date2.getTime();
+}
+
+/**
+ * 检查传入的字符串是否能转换为有效的Date对象
+ * @param {String} date
+ * @returns {Boolean}
+ */
+function isValid(date) {
+  return new Date(date) !== 'Invalid Date' && !isNaN(new Date(date));
+}
+
+export default {
+  formatDate,
+  handleDateStr,
+  isBefore,
+  isAfter,
+  isValid
+};

components/baseComponents/bs-dateTimePicker2/dateTimePicker/index.vue

+<template>
+  <view class="datetime-picker">
+    <CustomPickerView :columns="dateConfig" :selectVals="selectVals" @onChange="onChangePickerValue" />
+  </view>
+</template>
+
+<script src="./index.js"></script>
+
+<style scoped lang="css"></style>

components/popupRadio/popupRadio.vue

+<template>
+	<view class="popupRadio">
+		<u-popup 
+		:show="radioShow" 
+		:mode="mode" 
+		:closeable="closeable"
+		:closeOnClickOverlay="true"
+		@close="() => $emit('cancel')">
+			<view v-if="title" class="popupRadioTitle">
+				<text>{{title}}</text>
+			</view>
+		<!-- 	<view v-if="!radioList.length" style="height: 10vh; line-height: 10vh; text-align: center;">
+				暂无数据选择
+			</view> -->
+
+			<u-radio-group :value="currentSelect" placement="column" iconPlacement="right" @change="onChange" >
+				<u-radio 
+					size="40" labelSize="28" iconSize="28"
+					labelColor="#434343"
+					:customStyle="{marginBottom: '8px'}"
+					v-for="(item, index) in radioList" 
+					:key="index" 
+					:label="item.label" 
+					:name="item.value">
+				</u-radio>
+			</u-radio-group>
+
+			<view class="popupRadioFoot" v-if="showbtn">
+				<button @click="cancel">取消</button>
+				<button @click="confirm">确定</button>
+			</view>
+
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	export default {
+		options: {
+			styleIsolation: 'shared'
+		},
+		props: {
+			radioShow: {
+				type: Boolean,
+				default: false
+			},
+			radioList: {
+				type: Array,
+				default: []			
+			},
+			mode: {
+				type: String,
+				default: "bottom"
+			},
+			title: {
+				type: String,
+				default: ""
+			},
+			currentSelect: {
+				type: String,
+				default: ""
+			},
+			showbtn:{
+				type: Boolean,
+				default: false
+			},
+			closeable:{
+				type: Boolean,
+				default: false
+			},
+		},
+		name: "popupRadio",
+		data() {
+			return {
+				currentSelectName: ""
+			};
+		},
+		onLoad: function(options) {
+			console.log(this.radioList)
+		},
+		onShow() {
+			console.log(1)
+			console.log(this.radioList)
+		},
+		methods: {
+			confirm() {
+				this.$emit('confirm', this.currentSelectName)
+			},
+			cancel(){
+				this.$emit('cancel')
+			},
+			onChange(value){
+				this.currentSelectName = value
+				this.$emit('onChange',value)
+			},
+		},
+		mounted() {
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.popupRadio {
+		opacity: 1;
+		/deep/.uicon-close{
+				font-size: 32rpx !important;
+			}
+		/deep/.u-popup__content {
+			border-radius: 32rpx 32rpx 0 0;
+			padding-bottom: 250rpx;
+		}
+
+		.popupRadioTitle {
+			margin-top: 48rpx;
+			text-align: center;
+			color: #8C8C8C;
+			font-size: 32rpx;
+		}
+
+		/deep/.u-radio-group {
+			margin: 48rpx;
+			margin-bottom: 0rpx;
+			max-height: 50vh;
+			overflow-y: scroll;
+
+			.u-radio {
+				height: 45rpx;
+				line-height: 45rpx;
+			}
+
+			.u-radio__text {
+				font-size: 32rpx !important;
+
+			}
+
+			.u-radio__icon-wrap {
+				height: 32rpx !important;
+				width: 32rpx !important;
+				line-height: 32rpx;
+			}
+
+			
+		}
+		/deep/.popupRadioFoot{
+			display: flex;
+			justify-content: space-between;
+			bottom: 100rpx;
+			width: 100%;
+			button{
+				width: 339rpx;
+				height: 88rpx;
+				line-height: 88rpx;
+				border-radius: 44rpx;
+				color: #2E75E6;
+				padding: 0 24rpx;
+				border: 3rpx solid transparent;
+				position: relative;
+				background-clip: padding-box, border-box;
+				background-origin: padding-box, border-box;
+				background-image:  linear-gradient(90deg, #FAFAFA, #FAFAFA), linear-gradient(90deg, #2E75E6, #5E58EE);
+				&:after{
+					content: "";
+				}
+				&:last-child{
+					background-image:  linear-gradient(90deg, #2E75E6, #5E58EE), linear-gradient(90deg, #2E75E6, #5E58EE);
+					color: #FFFFFF;
+				}
+			}
+			
+		}
+	}
+</style>