new-cashier/jeepay-ui-uapp-face/pages/order/components/OrderScreen.vue

<template>
  <uni-drawer ref="refDrawer" mode="right">
    <uni-nav-bar statusBar :border="false" backgroundColor="transparent" />
    <view class="title">根据时间筛选</view>
    <view class="time-wrapper">
      <view class="time-star" @tap="refStarTime.show" :style="{ color: vdata.starTime ? '#000' : '#999' }">{{ vdata.starTime || '开始时间' }}</view>
      ---
      <view class="time-end" @tap="refEndTime.show" :style="{ color: vdata.endTime ? '#000' : '#999' }">{{ vdata.endTime || '结束时间' }}</view>
    </view>
    <view class="title">支付方式</view>
    <view class="pay-model">
      <block v-for="v in payModelList" :key="v.value">
        <view class="model-item" :class="{ 'selected-item': vdata.payModel.includes(v.value) }" @tap="selectedItem(v.value, 'payModel')">{{ v.label }}</view>
      </block>
    </view>
    <view class="title">订单状态</view>
    <view class="state-list pay-model">
      <block v-for="v in stateList" :key="v.value">
        <view class="state-item model-item" :class="{ 'selected-item': vdata.payState.includes(v.value) }" @tap="selectedItem(v.value, 'payState')">{{ v.label }}</view>
      </block>
    </view>
    <view class="footer-button">
      <view @tap="reset">重置</view>
      <view class="confirm" @tap="confirm">确认</view>
    </view>
  </uni-drawer>
  <xp-picker ref="refStarTime" mode="ymdhi" v-model="vdata.starTime" @confirm="confirmStart"><view></view></xp-picker>
  <xp-picker ref="refEndTime" mode="ymdhi" v-model="vdata.endTime" @confirm="confirmEnd"><view></view></xp-picker>
</template>

<script setup>
import { inject, onMounted, reactive, ref } from 'vue'
import { startAndEndTime } from '@/commons/utils/timeInspect'
import dayjs from 'dayjs'
const params = inject('params') //引入 父级注入的依赖
const emits = defineEmits(['confirm'])
const payModelList = [
  { label: '云闪付', value: 'YSFPAY' },
  { label: '支付宝', value: 'ALIPAY' },
  { label: '银联', value: 'UNIONPAY' },
  { label: '微信', value: 'WECHAT' },
  { label: '其他', value: 'OTHER' },
]
const stateList = [
  { label: '订单生成', value: '0' },
  { label: '支付中', value: '1' },
  { label: '支付成功', value: '2' },
  { label: '支付失败', value: '3' },
  { label: '已撤销', value: '4' },
  { label: '已退款', value: '5' },
  { label: '订单关闭', value: '6' },
]
const vdata = reactive({
  starTime: '',
  endTime: '',
  payModel: [],
  payState: [],
})
const refStarTime = ref(null)
const refEndTime = ref(null)
const refDrawer = ref(null)
const open = () => {
  refDrawer.value.open()
}
const close = () => {
  refDrawer.value.close()
}
const confirmStart = (e) => {
  vdata.starTime = dayjs(e.timestamp).format('YYYY-MM-DD hh:mm')
  console.log(e)
}
const confirmEnd = (e) => {
  vdata.endTime = dayjs(e.timestamp).format('YYYY-MM-DD hh:mm')
}
const selectedItem = (v, key) => {
  if (vdata[key].includes(v))
    return vdata[key].splice(
      vdata[key].findIndex((item) => item == v),
      1
    )

  vdata[key].push(v)
}
const confirm = () => {
  if (vdata.starTime || vdata.endTime) {
    if (!startAndEndTime(vdata.starTime, vdata.endTime)) return
    params.queryDateRange = `customDateTime_${vdata.starTime + ':00'}_${vdata.endTime + ':00'}`
  }
  params.unionOrderState = vdata.payState.join(',')
  params.unionWayCodeType = vdata.payModel.join(',')
  emits('confirm')
  close()
}
const reset = () => {
  vdata.starTime = ''
  vdata.endTime = ''
  vdata.payModel = []
  vdata.payState = []
}
defineExpose({ open, close })
</script>

<style lang="scss" scoped>
.title {
  margin-top: 20rpx;
  margin-left: 30rpx;
  font-size: 24rpx;
  font-weight: 600;
  letter-spacing: 2rpx;
}
.time-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20rpx;
  font-size: 16rpx;
  letter-spacing: 2rpx;
  .time-star,
  .time-end {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 30rpx;
    height: 50rpx;
    background-color: rgb(235, 227, 227);
    border-radius: 10rpx;
  }
}
.pay-model {
  display: flex;
  flex-wrap: wrap;
  padding: 10rpx;
  .model-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 20rpx;
    height: 50rpx;
    width: 24%;
    font-size: 16rpx;
    letter-spacing: 2rpx;
    background-color: rgba($color: #000000, $alpha: 0.15);
    border-radius: 10rpx;
  }
}
.footer-button {
  display: flex;
  justify-content: space-around;
  padding: 30rpx;
  margin-top: 80rpx;
  color: #fff;
  font-size: 18rpx;
  letter-spacing: 2rpx;
  view {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220rpx;
    height: 60rpx;
    border-radius: 10rpx;
    background-color: rgba($color: #666666, $alpha: 0.3);
  }
  .confirm {
    background-color: $v-primary;
  }
}
.selected-item {
  background-color: $v-primary !important;
  color: #fff;
}
</style>