源文件

jeepay-ui-uapp-agent/pageAccount/withdrawalDetails/components/Screening.vue

@@ -0,0 +1,195 @@
+<template>
+  <JPopup ref="popup">
+    <JMainCard pd="0" wrapPd="30rpx">
+      <ScreenTitle bgColor="#7737FE" :list="timeList" bdR="20rpx 20rpx 0 0" :index="timeIndex.i" @search="search" />
+      <view class="screen-wrapper">
+        <view class="src-main bgF">
+          <view class="title">提现状态</view>
+          <view class="order-wrapper">
+            <block v-for="(v, i) in stateList" :key="i">
+              <view
+                class="order-item"
+                :class="{ 'selected-state': stateIndex.includes(i), 'selected-none': !v }"
+                @tap="stateChange(i)"
+                >{{ v }}</view
+              >
+            </block>
+          </view>
+        </view>
+      </view>
+    </JMainCard>
+    <view class="scr-footer">
+      <view @tap="reset">重置</view>
+      <view class="confirm" @tap="confirm">确认筛选</view>
+    </view>
+  </JPopup>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref } from "vue"
+import JPopup from "@/components/newComponents/JPopup/JPopup"
+import ScreenTitle from "@/components/newComponents/ScreenTitle/ScreenTitle"
+import JMainCard from "@/components/newComponents/JMainCard/JMainCard"
+
+const emits = defineEmits(["confirm"])
+const timeList = reactive([
+  { value: "", text: "全部" },
+  { value: "today", text: "今天" },
+  { value: "yesterday", text: "昨天" },
+  { value: "near2now_7", text: "近七天" },
+  { value: "near2now_30", text: "近30天" },
+  { value: "customer", text: "自定义" },
+])
+
+const stateList = reactive(["审核中", "审核失败", "结算中", "结算成功", "结算失败", ""])
+// 获取组件身上的方法
+const popup = ref(null)
+const stateIndex = ref([])
+const timeIndex = ref({ val: { text: "全部", value: "" }, i: 0 })
+const open = () => {
+  stateIndex.value = stateIndex.value.length == 0 ? [0, 1, 2, 3, 4] : stateIndex.value
+  popup.value.open()
+}
+const search = (val) => {
+  console.log("val", val)
+  if (val.val.text == "自定义" && val.val.time) {
+    val.val.value = val.val.time
+  }
+  timeIndex.value = val
+}
+const stateChange = (i) => {
+  if (i == 5) return
+  if (stateIndex.value.includes(i)) {
+    if (stateIndex.value.length == 1) return uni.showToast({ title: "最少保留一个筛选条件", icon: "none" })
+    stateIndex.value.splice(
+      stateIndex.value.findIndex((v) => v == i),
+      1
+    )
+  } else {
+    stateIndex.value.push(i)
+  }
+}
+const confirm = () => {
+  const stateType = stateIndex.value.map((v) => (v = v + 1)).join(",")
+  emits("confirm", { time: timeIndex.value.val.value, stateType })
+  popup.value.close()
+}
+const reset = () => {
+  timeIndex.value = { val: { text: "全部", value: "" }, i: 0 }
+  stateIndex.value = [0, 1, 2, 3, 4]
+}
+defineExpose({ open })
+</script>
+
+<style lang="scss" scoped>
+.screen-wrapper {
+  min-height: 500rpx;
+  overflow-y: scroll;
+}
+.selected {
+  padding: 20rpx;
+  border-radius: 7rpx;
+  color: $primaryColor;
+  background-color: #fff;
+}
+.src-main {
+  padding: 30rpx;
+  .select-wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 30rpx;
+    .select-mch {
+      margin: 20rpx;
+      image {
+        vertical-align: bottom;
+      }
+    }
+    .mch-info {
+      display: flex;
+      image {
+        width: 93rpx;
+        height: 93rpx;
+        margin-right: 10rpx;
+      }
+      view {
+        display: flex;
+        flex-direction: column;
+        font-size: 33rpx;
+        font-weight: 700;
+        text {
+          margin-top: 15rpx;
+          color: #8c8c8c;
+          font-size: 25rpx;
+          font-weight: 500;
+        }
+      }
+    }
+    image {
+      width: 40rpx;
+      height: 40rpx;
+    }
+    .img-wrapper {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      overflow: hidden;
+      width: 93rpx;
+      height: 93rpx;
+      margin-right: 20rpx;
+      image {
+        width: 60rpx;
+        height: 66rpx;
+      }
+    }
+  }
+  .select-agent {
+    margin-top: 30rpx;
+  }
+  .title {
+    margin: 35rpx 0 20rpx 0;
+    font-size: 30rpx;
+    font-weight: 700;
+  }
+  .order-wrapper {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    view {
+      flex: 0 0 32%;
+      padding: 20rpx 0;
+      margin-bottom: 15rpx;
+      box-sizing: border-box;
+      background-color: #f2f2f2;
+      border-radius: 10rpx;
+      text-align: center;
+      font-size: 28rpx;
+      color: #666;
+    }
+    .selected-state {
+      border: 2rpx solid $primaryColor;
+      color: $primaryColor;
+    }
+    .selected-none {
+      background-color: transparent;
+    }
+  }
+}
+.scr-footer {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 30rpx 75rpx 30rpx;
+  font-size: 33rpx;
+  view {
+    flex: 1;
+    text-align: center;
+    padding: 31rpx;
+    background-color: rgba(255, 255, 255, 0.8);
+    border-radius: 20rpx;
+  }
+  .confirm {
+    margin-left: 20rpx;
+    color: $primaryColor;
+  }
+}
+</style>