You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
3.4 KiB
106 lines
3.4 KiB
<template>
|
|
<view class="dark-table-container">
|
|
<scroll-view scroll-x="true" class="table-scroll">
|
|
<view class="table">
|
|
<!-- 表头 -->
|
|
<view class="table-row table-header">
|
|
<view class="table-cell" v-for="(col, idx) in columns" :key="idx">
|
|
{{ col.label }}
|
|
<text v-if="col.tip" class="tip" @click="showTip(col.tip)">?</text>
|
|
</view>
|
|
</view>
|
|
<!-- 数据行 -->
|
|
<view class="table-row" v-for="(row, rIdx) in data" :key="rIdx">
|
|
<view class="table-cell" v-for="(col, cIdx) in columns" :key="cIdx">
|
|
{{ row[col.key] || '-' }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<!-- 说明弹窗 -->
|
|
<uni-popup ref="popup" type="center">
|
|
<view class="popup-content">{{ tipContent }}</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
columns: [
|
|
{ label: '渠道', key: 'channel' },
|
|
{ label: '资源数', key: 'resource', tip: '本月的新资源' },
|
|
{ label: '到访数(一访)', key: 'visit1', tip: '本月资源的一访到访数' },
|
|
{ label: '到访率(一访)', key: 'visitRate1', tip: '一访到访数/本月新资源数' },
|
|
{ label: '到访数(二访)', key: 'visit2', tip: '二访到访数/一访到访数' },
|
|
{ label: '到访率(二访)', key: 'visitRate2', tip: '二访到访数/一访到访数' },
|
|
{ label: '关单数(一访)', key: 'close1', tip: '本月一访到访的关单数' },
|
|
{ label: '关单率(一访)', key: 'closeRate1', tip: '一访关单数/一访到访数' },
|
|
{ label: '关单数(二访)', key: 'close2', tip: '二访到访的关单数' },
|
|
{ label: '关单率(二访)', key: 'closeRate2', tip: '二访关单数/二访到访数' },
|
|
{ label: '月总转', key: 'monthTrans', tip: '关单数（合计）/资源数' },
|
|
{ label: '往月到访数', key: 'lastMonthVisit', tip: '本月资源在往月到访的到访数' },
|
|
{ label: '月共到访', key: 'monthTotalVisit', tip: '本月资源任在本月到访/关单' },
|
|
{ label: '往月关单数', key: 'lastMonthClose', tip: '本月关单-往月关单' },
|
|
{ label: '月共关单', key: 'monthTotalClose', tip: '本月关单+往月关单' },
|
|
],
|
|
data: [
|
|
{ channel: '体检包（地推）', resource: 10, visit1: 5, visitRate1: '50%', visit2: 2, visitRate2: '40%', close1: 1, closeRate1: '20%', close2: 1, closeRate2: '50%', monthTrans: '10%', lastMonthVisit: 0, monthTotalVisit: 5, lastMonthClose: 0, monthTotalClose: 1 },
|
|
],
|
|
tipContent: ''
|
|
}
|
|
},
|
|
methods: {
|
|
showTip(content) {
|
|
this.tipContent = content
|
|
this.$refs.popup.open()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.dark-table-container {
|
|
background: #18181c;
|
|
color: #f1f1f1;
|
|
min-height: 100vh;
|
|
padding: 16rpx;
|
|
}
|
|
.table-scroll {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
}
|
|
.table {
|
|
min-width: 1200rpx;
|
|
}
|
|
.table-row {
|
|
display: flex;
|
|
border-bottom: 1px solid #333;
|
|
}
|
|
.table-header {
|
|
background: #23232a;
|
|
font-weight: bold;
|
|
}
|
|
.table-cell {
|
|
flex: 0 0 180rpx;
|
|
padding: 16rpx 8rpx;
|
|
text-align: center;
|
|
border-right: 1px solid #333;
|
|
position: relative;
|
|
}
|
|
.tip {
|
|
color: #ffb300;
|
|
margin-left: 8rpx;
|
|
font-size: 24rpx;
|
|
cursor: pointer;
|
|
}
|
|
.popup-content {
|
|
background: #23232a;
|
|
color: #fff;
|
|
padding: 32rpx;
|
|
border-radius: 16rpx;
|
|
min-width: 300rpx;
|
|
text-align: center;
|
|
}
|
|
</style>
|