源文件

jeepay-ui-uapp-agent/components/newComponents/ScreenTitle/ScreenTitle.vue

@@ -0,0 +1,169 @@
+<template>
+  <view class="s-wrapper" :style="{ borderRadius: props.bdR, backgroundColor: bgColor }">
+    <view class="s-screening">
+      <block v-for="(v, i) in list" :key="v.value">
+        <view class="s-scr-item" :class="{ selected: i == index }" @tap="onSelect(v, i)"> {{ v.text }} </view>
+      </block>
+    </view>
+    <view class="theCustom" :class="{ customer: index === props.list.findIndex((v) => v.value == 'customer') }">
+      <view class="time-picker">
+        <xp-picker
+          ref="star"
+          @confirm="confirm"
+          @cancel="emits('close')"
+          @tap="isShow"
+          mode="ymdhi"
+          :startTime="time.startDate"
+          >{{ time.startDate }}</xp-picker
+        >
+        <text></text>
+        <xp-picker
+          ref="end"
+          @confirm="confirmEnd"
+          @cancel="emits('close')"
+          mode="ymdhi"
+          @tap="isShow"
+          :startTime="time.endDate"
+          >{{ time.endDate }}</xp-picker
+        >
+      </view>
+    </view>
+  </view>
+</template>
+<script setup>
+import { onMounted, reactive, ref } from "vue"
+import { getDay } from "@/util/timeInterval.js"
+const time = ref({
+  startDate: `${getDay(0, "-")} 00:00`,
+  endDate: `${getDay(0, "-")} 23:59`,
+})
+
+const emits = defineEmits(["search", "open", "close"])
+const props = defineProps({
+  bdR: {
+    type: String,
+    default: "20rpx",
+  },
+  bgColor: { type: String },
+  list: {
+    type: Array,
+    default: [
+      // { value: 'all', text: '全部' },
+      { value: "today", text: "今天" },
+      { value: "yesterday", text: "昨天" },
+      { value: "currMonth", text: "本月" },
+      { value: "prevMonth", text: "上月" },
+      { value: "customer", text: "自定义" },
+    ],
+  },
+  index: {
+    type: Number,
+    default: 0,
+  },
+})
+const star = ref(null)
+const end = ref(null)
+const scrInfo = ref(0)
+
+const isOpen = ref(false)
+const onSelect = (val, i) => {
+  if (val.value != "customer") {
+    emits("search", { val, i })
+  } else {
+    emits("search", {
+      val: {
+        text: "自定义",
+        value: "customer",
+        time: `customDate_${time.value.startDate}:00_${time.value.endDate}:00`,
+      },
+      i,
+    })
+    props.index = props.list.findIndex((v) => v.value == "customer")
+    isOpen.value = true
+  }
+}
+
+//时间选择器确定
+const confirm = (e) => {
+  time.value.startDate = e.value
+  confirmEnd({ value: time.value.endDate })
+  emits("close")
+}
+const confirmEnd = (e) => {
+  time.value.endDate = e.value
+  let i = props.list.findIndex((v) => v.value == "customer")
+  emits("search", {
+    val: {
+      text: "自定义",
+      value: `customDate_${time.value.startDate}:00_${time.value.endDate}:00`,
+    },
+    i,
+  })
+
+  emits("close")
+}
+const isShow = (e) => {
+  if (star.value.pickerVisible || end.value.pickerVisible) {
+    emits("open")
+  } else {
+    emits("close")
+  }
+}
+// const endIsShow = () => {
+//   if (end.value.pickerVisible) {
+//     emits("open")
+//   } else {
+//     emits("close")
+//   }
+// }
+</script>
+
+<style lang="scss" scoped>
+.s-wrapper {
+  background: rgba(0, 0, 0, 0.1);
+  padding: 20rpx 20rpx 20rpx 20rpx;
+  .s-screening {
+    display: flex;
+    justify-content: space-between;
+    .s-scr-item {
+      padding: 20rpx;
+      text-align: center;
+      font-size: 28rpx;
+      white-space: nowrap;
+      border-radius: 7rpx;
+      color: rgba(255, 255, 255, 0.7);
+    }
+    .selected {
+      background-color: #fff;
+      color: #7737fe;
+    }
+  }
+  .theCustom {
+    height: 0;
+    overflow: hidden;
+    transition: height 0.3s ease-in;
+    .time-picker {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 90rpx;
+      padding: 0 30rpx;
+      margin-top: 10rpx;
+      background: #fff;
+      font-size: 28rpx;
+      border-radius: 7rpx;
+      color: $primaryColor;
+
+      text {
+        width: 40rpx;
+        height: 2rpx;
+        background-color: $primaryColor;
+      }
+    }
+  }
+  .customer {
+    height: 100rpx;
+    transition: height 0.3s ease-in;
+  }
+}
+</style>