353 lines
9.2 KiB
Vue
353 lines
9.2 KiB
Vue
<template>
|
||
<view class="credit_search">
|
||
<view class="select" @tap="pageData.showStatus = !pageData.showStatus" style="display: flex;align-items: center;width: 140rpx;">
|
||
<text>{{pageData.title}}</text>
|
||
<up-icon name="arrow-down-fill" size="12" style="margin-left: 12rpx;"></up-icon>
|
||
</view>
|
||
<view class="input">
|
||
<up-input
|
||
shape='circle'
|
||
border="none"
|
||
v-model="pageData.query.keywords"
|
||
@change="inputEvent"
|
||
type="text"
|
||
placeholder="搜索挂账人或者手机号"
|
||
prefixIcon="search"
|
||
prefixIconStyle="font-size: 26px;color: #666"
|
||
style='width: 100%;padding: 24rpx;'
|
||
></up-input>
|
||
</view>
|
||
<view class="icon">
|
||
<up-icon @tap="pageData.sheetShow = true" name="list" color="#318AFE" :size="32"></up-icon>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view :style="{height:pageData.showStatus?statusHeight:0}" class="tranistion statusList overflow-hide">
|
||
<view @tap="changeNowStatusIndex(index,item)" class="u-flex u-p-l-30 lh30 u-p-r-30 u-row-between"
|
||
v-for="(item,index) in pageData.statusList" :key="index">
|
||
<view :class="{'color-main':pageData.statusIndex===index}">{{item.label}}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="debtor" v-if="pageData.list.length">
|
||
<view class="debtorItem" v-for="(item,index) in pageData.list" :key="index">
|
||
<view class="head">
|
||
<text> {{item.id}} </text>
|
||
<view class="headStatus"><text style="margin-right: 16rpx;">是否启用</text> <up-switch v-model="item.status" @change="statusChange(item)" :activeValue="1" :inactiveValue="0"></up-switch> </view>
|
||
</view>
|
||
<view class="content">
|
||
<view class="cell">
|
||
<view class="cell_item"><text>挂账人：</text><text class="val">{{item.debtor}}</text></view>
|
||
<view class="cell_item"><text>已挂账金额：</text><text class="val">{{item.owedAmount}}</text></view>
|
||
</view>
|
||
<view class="cell">
|
||
<view class="cell_item"><text>挂账额度：</text><text class="val">{{item.creditAmount}}</text></view>
|
||
<view class="cell_item"><text>剩余挂账额度：</text><text class="val">{{item.remainingAmount}}</text></view>
|
||
</view>
|
||
<view class="cell">
|
||
<view class="cell_item"><text>账户余额：</text><text class="val">{{item.accountBalance}}</text></view>
|
||
<view class="cell_item"><text>通用门店：</text><text class="val">{{item.shopName}}</text></view>
|
||
</view>
|
||
<view class="cell">
|
||
<view class="cell_item"><text>手机号：</text><text class="val">{{item.mobile}}</text></view>
|
||
</view>
|
||
</view>
|
||
<view class="handle">
|
||
<view class="handle_btn" @tap="toUrl('PAGES_CREDIT_BUYER_REPAYMENTRECORD',{id:item.id})">还款记录</view>
|
||
<view class="handle_btn" @tap="toUrl('PAGES_CREDIT_BUYER_DETAIL',{id:item.id,repaymentMethod:item.repaymentMethod})">查看明细</view>
|
||
<view class="handle_btn" :style="{ color: item.repaymentMethod == 'order' ? '#999' :'',borderColor: item.repaymentMethod == 'order' ? '#999' :''}" @tap="repaymentOpen(item)">还款</view>
|
||
<view class="handle_btn" @tap="toUrl('PAGES_CREDIT_BUYER_ADDDEBTOR',{item:JSON.stringify(item)})">编辑</view>
|
||
<view class="handle_btn" @tap="delDebtor(item)">删除</view>
|
||
|
||
</view>
|
||
</view>
|
||
<template v-if="pageData.list.length">
|
||
<my-pagination :page="pageData.query.page" :totalElements="pageData.totalElements" :size="pageData.query.size"
|
||
@change="pageChange"></my-pagination>
|
||
</template>
|
||
</view>
|
||
<view v-else style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: 500rpx;">
|
||
<image src="./bg.png" style="width: 325rpx;height: 335rpx;" mode=""></image>
|
||
<view style="font-size: 28rpx;color: #999;margin-top: 20rpx;">暂无数据</view>
|
||
</view>
|
||
<my-repayment ref="repayment" @affirm="affirm"></my-repayment>
|
||
|
||
<up-action-sheet :actions="pageData.sheetList" @select="selectClick" :show="pageData.sheetShow" round="20" cancelText="取消" @close="pageData.sheetShow=false"></up-action-sheet>
|
||
<up-modal :show="pageData.delShow" title="确认是否删除当前挂账人" @confirm="delConfirm" @cancel="pageData.delShow=false" showCancelButton></up-modal>
|
||
<view class="shade" v-show="pageData.showStatus" @tap="pageData.showStatus=false"></view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, computed } from 'vue';
|
||
import { onShow, onReachBottom } from '@dcloudio/uni-app'
|
||
|
||
import myRepayment from './components/my-repayment';
|
||
import go from '@/commons/utils/go.js';
|
||
import { hasPermission } from '@/commons/utils/hasPermission.js';
|
||
|
||
import { getCreditBuyerPage,editCreditBuyer,delCreditBuyer } from '@/http/api/buyer.js';
|
||
|
||
let pageData = reactive({
|
||
showStatus: false,
|
||
sheetShow: false,
|
||
sheetList: [
|
||
{name: '创建挂账人', value: 'add'}
|
||
],
|
||
delShow: false,
|
||
delItem: null,
|
||
list: [],
|
||
statusList: [
|
||
{ label: '全部状态', value: '' },
|
||
{ label: '未付款', value: 'unpaid' },
|
||
{ label: '部分支付', value: 'partial' },
|
||
{ label: '已付款', value: 'paid' }
|
||
],
|
||
query: {
|
||
page: 1,
|
||
size: 10,
|
||
repaymentStatus: '',
|
||
keywords: ''
|
||
},
|
||
statusIndex: 0,
|
||
title: '全部状态',
|
||
totalElements: 0,
|
||
})
|
||
let repayment = ref(null)
|
||
|
||
let statusHeight = computed(() => {
|
||
return 30 * pageData.statusList.length + 40 + 'px'
|
||
})
|
||
|
||
onShow(() => {
|
||
getList()
|
||
})
|
||
|
||
/**
|
||
* 获取挂账人列表
|
||
*/
|
||
async function getList() {
|
||
getCreditBuyerPage({
|
||
keywords: pageData.query.keywords,
|
||
repaymentStatus: pageData.query.repaymentStatus,
|
||
size: pageData.query.size,
|
||
page: pageData.query.page
|
||
}).then(res => {
|
||
pageData.list = res.records
|
||
pageData.totalElements = res.totalRow
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 挂账人/手机号筛选
|
||
*/
|
||
function inputEvent(d) {
|
||
pageData.query.keywords = d.replace(/\s*/g, "");
|
||
getList()
|
||
}
|
||
|
||
function changeNowStatusIndex(i,item) {
|
||
pageData.statusIndex = i
|
||
pageData.showStatus = false
|
||
pageData.title = item.label
|
||
pageData.query.repaymentStatus = item.value
|
||
getList()
|
||
}
|
||
// 页数改变事件
|
||
function pageChange(page) {
|
||
console.log(page)
|
||
pageData.query.page = page
|
||
getList()
|
||
}
|
||
|
||
/**
|
||
* 状态修改
|
||
*/
|
||
let statusChange = (item) => {
|
||
editCreditBuyer(item).then((res) => {})
|
||
}
|
||
|
||
/*
|
||
* 操作
|
||
*/
|
||
let selectClick = (e) => {
|
||
if(e.value == 'add') {
|
||
toUrl('PAGES_CREDIT_BUYER_ADDDEBTOR')
|
||
}
|
||
};
|
||
let repaymentOpen = (item) => {
|
||
if ( item.repaymentMethod == 'order' ) {
|
||
return;
|
||
}
|
||
repayment.value.open(item);
|
||
}
|
||
let affirm = (item) => {
|
||
getList()
|
||
}
|
||
/**
|
||
* 删除挂账人
|
||
*/
|
||
let delDebtor = (item) => {
|
||
pageData.delShow = true;
|
||
pageData.delItem = item;
|
||
|
||
}
|
||
let delConfirm = () => {
|
||
pageData.delShow = false;
|
||
delCreditBuyer(pageData.delItem.id).then(res => {
|
||
if( pageData.query.page > 1 && pageData.list.length == 1){
|
||
pageData.query.page--
|
||
getList()
|
||
} else {
|
||
getList()
|
||
}
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 跳转
|
||
*/
|
||
let toUrl = (url, d) => {
|
||
|
||
go.to(url, d)
|
||
}
|
||
</script>
|
||
<style>
|
||
page {
|
||
background-color: #f9f9f9;
|
||
}
|
||
</style>
|
||
<style scoped lang="less">
|
||
.shade{
|
||
width: 100%;
|
||
height: 100%;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
margin: auto;
|
||
z-index: 1;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
}
|
||
.credit_search {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
padding: 32rpx 28rpx;
|
||
background-color: #fff;
|
||
position: fixed;
|
||
top: 0;
|
||
z-index: 9;
|
||
>view:first-child,
|
||
>view:last-child {
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
|
||
>view:last-child {
|
||
color: #318AFE;
|
||
}
|
||
.select{
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.input {
|
||
width: 100%;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
background: #F9F9F9;
|
||
border-radius: 32rpx 32rpx 32rpx 32rpx;
|
||
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
|
||
}
|
||
.icon{
|
||
width: 90rpx;
|
||
}
|
||
}
|
||
|
||
.statusList {
|
||
position: fixed;
|
||
top: 124rpx;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 10;
|
||
background-color: #fff;
|
||
>view{
|
||
margin-bottom: 16rpx;
|
||
margin-top: 16rpx;
|
||
}
|
||
}
|
||
.debtor{
|
||
padding: 152rpx 28rpx 32rpx 28rpx;
|
||
.debtorItem{
|
||
padding: 24rpx 16rpx;
|
||
background-color: #fff;
|
||
border-radius: 10rpx;
|
||
margin-bottom: 32rpx;
|
||
.head{
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 24rpx;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
.headStatus{
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
.content{
|
||
background-color: #f9f9f9;
|
||
border-radius: 12rpx;
|
||
padding: 24rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-bottom: 32rpx;
|
||
.cell{
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 16rpx;
|
||
.cell_item{
|
||
flex-shrink: 0;
|
||
font-weight: bold;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
.val{
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.handle{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.handle_btn{
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #318AFE;
|
||
padding: 10rpx 18rpx;
|
||
border-radius: 28rpx 28rpx 28rpx 28rpx;
|
||
border: 2rpx solid #318AFE;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |