196 lines
4.8 KiB
Vue
196 lines
4.8 KiB
Vue
<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>
|