增加聊天功能

pageChat/components/date-time-picker.vue

@@ -0,0 +1,108 @@
+<template>
+  <view>
+    <view @click="open">
+      <slot v-if="$slots.default"> </slot>
+      <view v-else class="choose-goods u-flex u-row-between">
+        <text class="color-999" v-if="!startTime && !endTime"
+          >请选择日期范围</text
+        >
+        <text class="color-333 u-font-24 u-m-r-32 " v-else
+          >{{ startTime }} - {{ endTime }}</text
+        >
+        <view class="u-flex" v-if="startTime&&endTime" @click.stop="clear">
+          <up-icon name="close" size="14"></up-icon>
+        </view>
+        <up-icon size="14" name="arrow-right" v-else ></up-icon>
+
+      </view>
+    </view>
+    <my-date-pickerview
+      @confirm="datePickerConfirm"
+      mode="all"
+      ref="datePicker"
+    ></my-date-pickerview>
+  </view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const datePicker = ref(null);
+const startTime = defineModel("startTime", {
+  default: () => "",
+  type: String,
+});
+const endTime = defineModel("endTime", {
+  default: () => "",
+  type: String,
+});
+
+function clear(){
+  startTime.value = "";
+  endTime.value = "";
+}
+function open() {
+  datePicker.value.toggle();
+}
+function datePickerConfirm(e) {
+  startTime.value = e.start;
+  endTime.value = e.end;
+  console.log(e);
+}
+</script>
+<style lang="scss">
+.popup-content {
+  background: #fff;
+  width: 640rpx;
+  border-radius: 18rpx;
+}
+.top {
+  padding: 40rpx 48rpx;
+  border-bottom: 1px solid #d9d9d9;
+}
+.bottom {
+  padding: 48rpx 52rpx;
+  display: flex;
+  justify-content: space-between;
+  border-top: 1px solid #d9d9d9;
+  gap: 50rpx;
+  .btn {
+    flex: 1;
+    text-align: center;
+    padding: 18rpx 60rpx;
+    border-radius: 100rpx;
+    font-size: 32rpx;
+    border: 2rpx solid transparent;
+    &.success {
+      background-color: $my-main-color;
+      color: #fff;
+    }
+    &.cancel {
+      border-color: #d9d9d9;
+      box-shadow: 0 4rpx 0 0 #00000005;
+    }
+  }
+}
+.item {
+  padding: 10rpx 30rpx;
+  border: 1px solid #d9d9d9;
+  margin: 10rpx;
+  border-radius: 8rpx;
+  transition: all 0.3s ease-in-out;
+  box-shadow: 0 0 10px transparent;
+  &.selected {
+    border-color: $my-main-color;
+    box-shadow: 0 0 10px $my-main-color;
+  }
+}
+.choose-goods {
+  display: flex;
+  padding: 24rpx;
+  align-items: center;
+  border-radius: 8rpx;
+  border: 2rpx solid #d9d9d9;
+  background: #fff;
+  font-size: 28rpx;
+  font-weight: 400;
+  min-height: 90rpx;
+}
+</style>