151 lines
3.8 KiB
Vue
151 lines
3.8 KiB
Vue
<template>
|
|
<view class="info-wrapper">
|
|
<view class="dev-title" v-if="dev" @tap="devType.open(vdata.devTitle.value)">
|
|
{{ vdata.devTitle.label }}
|
|
<image src="/static/iconImg/icon-arrow-black.svg" mode="scaleToFill" />
|
|
</view>
|
|
<view class="info-title" :class="{ 'fixed-header': fixed }">
|
|
<block v-for="(v, i) in vdata.titleList" :key="i">
|
|
<view class="info-item" :class="{ 'active-title': vdata.selected == v.value }" @tap="selectedTitle(v)">
|
|
{{ v.title }}
|
|
<view class="stat-sort" :class="[calcClassName(v)]"></view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
<!-- 默认插槽位置 -->
|
|
<slot />
|
|
</view>
|
|
<JSinglePopup :list="devTypeList" ref="devType" @confirm="confirmType" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref } from 'vue';
|
|
const props = defineProps({
|
|
dev: { type: Boolean, default: false }, //是否展示设备类型切换标题
|
|
fixed: { type: Boolean, default: false } //是否固定头部 默认 false
|
|
});
|
|
const emits = defineEmits(['device', 'sortClick']);
|
|
const vdata = reactive({
|
|
selected: 'totalSuccAmt',
|
|
devTitle: {
|
|
label: '全部设备类型',
|
|
value: ''
|
|
},
|
|
titleList: [
|
|
{ title: '成交金额', value: 'totalSuccAmt', sort: 'ascend' },
|
|
{ title: '退款金额', value: 'totalRefundAmt', sort: 'ascend' },
|
|
{ title: '成交笔数', value: 'totalSuccNum', sort: 'ascend' },
|
|
{ title: '成功率', value: 'succRate', sort: 'ascend' }
|
|
]
|
|
});
|
|
const devType = ref(null);
|
|
const selectedTitle = (val) => {
|
|
if (vdata.selected != val.value) {
|
|
vdata.selected = val.value;
|
|
emits('sortClick', val);
|
|
return;
|
|
}
|
|
val.sort = val.sort == 'ascend' ? 'descend' : 'ascend';
|
|
emits('sortClick', val);
|
|
};
|
|
const devTypeList = reactive([
|
|
{ label: '全部', value: '' },
|
|
{ label: '电子码牌', value: '0' },
|
|
{ label: '实体码牌', value: '1' },
|
|
{ label: '实体立牌', value: '2' },
|
|
{ label: '云音响码牌', value: '3' },
|
|
{ label: '扫码POS', value: 'scan_pos"' },
|
|
{ label: '智能POS', value: 'auto_pos"' },
|
|
{ label: '收银插件', value: 'cash_plugin' }
|
|
]);
|
|
// 计算需要展示的上下箭头
|
|
const calcClassName = (val) => {
|
|
// 判断 选中 与 集合中的 value 值是否相等 不相等 则不添加类名
|
|
if (vdata.selected == val.value) {
|
|
// 返回上箭头 下箭头类名
|
|
return val.sort == 'descend' ? 'asc-sort' : 'des-sort';
|
|
}
|
|
return '';
|
|
};
|
|
const confirmType = (val) => {
|
|
vdata.devTitle = val;
|
|
emits('device', val.value);
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.info-wrapper {
|
|
margin: 0 35rpx 40rpx 35rpx;
|
|
border-radius: $J-b-r32;
|
|
background-color: $J-bg-ff;
|
|
.dev-title {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 30rpx;
|
|
height: 100rpx;
|
|
font-size: 30rpx;
|
|
background-color: #fff;
|
|
border-bottom: 1rpx solid #ededed;
|
|
image {
|
|
margin-left: 10rpx;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
.info-title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 40rpx;
|
|
height: 102rpx;
|
|
font-size: 24rpx;
|
|
color: $J-color-t80;
|
|
background-color: #fff;
|
|
border-bottom: 1rpx solid #ededed;
|
|
.active-title {
|
|
font-weight: 500;
|
|
color: #2980fd;
|
|
border-bottom: 5rpx solid #2980fd;
|
|
}
|
|
.info-item {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
.stat-sort {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-left: 10rpx;
|
|
&::before,
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
width: 0px;
|
|
height: 0px;
|
|
border: 8rpx solid;
|
|
border-color: #d9d9d9 transparent transparent transparent;
|
|
}
|
|
&::before {
|
|
margin-bottom: 4rpx;
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
.asc-sort::before {
|
|
border-color: #2980fd transparent transparent transparent;
|
|
}
|
|
.des-sort::after {
|
|
border-color: #2980fd transparent transparent transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.fixed-header {
|
|
position: sticky;
|
|
top: 112rpx;
|
|
z-index: 10;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
</style>
|