ys-app/src/pages/business/CRM/paymentCollection.vue

<template>
    <view class="con-body">
        <view class="con-bg">
            <!-- 头部 -->
            <customHeader ref="customHeaderRef" :title="'个人回款信息统计表'" :leftFlag="true" :rightFlag="false"></customHeader>

            <!-- 高度来避免头部遮挡 -->
            <view class="top-height"></view>

            <!-- 正文内容 -->
            <view>
                <!-- 搜索 -->
                <view class="search">
                    <picker mode="date" :value="defaultDate" :start="startDate" :end="endDate"
                     @change="bindDateChange" class="picker-bg">
						<view class="picker">
                            <uni-icons custom-prefix="iconfont" color="#ffffff" type="icon-phoneshizhong" size="18"></uni-icons>
                            <view>{{defaultDate}}</view>
                            <uni-icons type="down" size="18"></uni-icons>
                        </view>
					</picker>
                    <picker @change="bindPickerChange" :value="peopleIndex" :range="peopleArr" class="picker-bg">
                        <view class="picker">
                            <uni-icons type="person" size="18"></uni-icons>
                            <view>{{peopleArr[peopleIndex]}}</view>
                            <uni-icons type="down" size="18"></uni-icons>
                        </view>
                    </picker>
                    <button type="default" @click="handleSearch" size="mini" class="btn-search">查询</button>
                </view>
            
                <!-- 回款信息查询 -->
                <view class="white-bg">
                    <view class="table-title">回款信息查询</view>
                    <table class="my-table">
                        <tr>
                            <th class="tab-width100">姓名</th>
                            <th class="tab-width160">客户名称</th>
                            <th>目标回款</th>
                            <th>实际回款</th>
                            <th>完成度</th>
                        </tr>
                        <tr v-for="(item, index) in tableData" :key="index">
                            <td>{{ item.name }}</td>
                            <td class="txtLeft">{{ item.guestName }}</td>
                            <td>{{ item.tragetReturnMoney }}</td>
                            <td>{{ item.returnMoney }}</td>
                            <td>{{ item.completRate }}</td>
                        </tr>
                    </table>
                </view>
            </view>
        </view>

    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import customHeader from '@/components/customHeader.vue'
import { getDate} from '@/utils/datetime.js'


// 开始时间
let startDate = getDate('start');
// 结束时间，间隔10年
let endDate = getDate('end');
let defaultDate = getDate({ format: true })
let bindDateChange =  (e) =>{
    defaultDate = e.detail.value
}

let peopleIndex = ref(0);
let peopleArr = ["张志刚1","张志刚2"];
// 选择列表
let bindPickerChange = (e)=>{
    console.log('picker发送选择改变，携带值为', e.detail.value)
    peopleIndex.value = e.detail.value
}

let searchValue = ref(null)
// 查询搜索跳转
let handleSearch = () => {
    console.log(searchValue.value)
}

const tableData = [
  { name: '张志钢',guestName:'航宇救生装备有限公司',tragetReturnMoney:677153.25,returnMoney:677153.25,completRate:'100%'},
  { name: '张志钢',guestName:'中国船舶集团有限公司第七一七研究所',tragetReturnMoney:'700000.00',returnMoney:'53890.00',completRate:'7.7%'},
  { name: '张志钢',guestName:'北京国科舰航传感技术有限公司',tragetReturnMoney:'290877.00',returnMoney:'290877.00',completRate:'100%'},
  { name: '张志钢',guestName:'武汉杭久电气有限公司',tragetReturnMoney:869706.80,returnMoney:537809.75,completRate:'61.8%'},
  { name: '张志钢',guestName:'深圳市欧灿科技有限公司',tragetReturnMoney:328097.10,returnMoney:297905.37,completRate:'90.8%'},
  { name: '张志钢',guestName:'其他',tragetReturnMoney:558703.02,returnMoney:558703.02,completRate:'100%'},
  { name: '张志钢',guestName:'武汉航空仪表有限责任公司',tragetReturnMoney:'9807328.00',returnMoney:8692300.93,completRate:'88.6%'},
  { name: '张志钢',guestName:'武汉永力科技股份有限公司',tragetReturnMoney:539087.21,returnMoney:539087.21,completRate:'100%'},
  
]
</script>

<style scoped>
.search {
    display: flex;
    padding:0 30rpx;
}

.search .btn-search {
    border: none;
    background: none;
    line-height: normal;
    color: #fff;
    line-height: 56rpx !important;
    padding: 10rpx 0 0;
    text-align: left;
    cursor: pointer;
}

.search .btn-search::after {
    display: none;
}
.search .picker-bg{
    display: flex;
    background-color: #6FA2F8;
    border-radius: 25px;
    color:#fff;
    font-size:28rpx;
    padding:0rpx 20rpx;
     /* #ifndef APP-PLUS */
    padding:10rpx 20rpx 0 20rpx;
    /* #endif */
    margin-right:20rpx;
}
.search .picker-bg .picker {
    display: flex;
    align-items: center;
    /* #ifndef APP-PLUS */
    padding-top:2rpx;
    /* #endif */
}
.search .picker-bg .picker .uni-icons{
    color:#fff !important;
}
.search .picker-bg .picker .uni-icons:first-child{
    margin-right: 10rpx;
}
.search .picker-bg .picker .uniui-down{
    margin-left: 20rpx;
}

.white-bg {
    width: 750rpx;
    margin: 0;
    border-radius: 8px 8px 0 0;
    padding:20rpx 0rpx;
    margin-top:20rpx;
    /* #ifdef APP-PLUS */
    height:calc(100vh - 135px);
    /* #endif */
    /* #ifndef APP-PLUS */
    height:calc(100vh - 112px);
    /* #endif */
}

.table-title{
    text-align: center;
    font-weight: bold;
    border-bottom:2px solid #E7E7E7;
    padding-bottom:20rpx;
}
</style>