挂账增加
This commit is contained in:
GaoHao
362
pageCreditBuyer/index.vue
Normal file
362
pageCreditBuyer/index.vue
Normal file
@@ -0,0 +1,362 @@
|
||||
<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">
|
||||
<input v-model="pageData.query.keywords" @input="inputEvent" type="text" placeholder="搜索挂账人或者手机号" />
|
||||
</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 myRepayment from './components/my-repayment';
|
||||
import color from '@/commons/color.js';
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
computed
|
||||
} from 'vue';
|
||||
import {
|
||||
onShow
|
||||
} from '@dcloudio/uni-app'
|
||||
import go from '@/commons/utils/go.js';
|
||||
import {
|
||||
hasPermission
|
||||
} from '@/commons/utils/hasPermission.js';
|
||||
import {
|
||||
getCreditBuyerList,
|
||||
editCreditBuyer,
|
||||
delCreditBuyer
|
||||
} from '@/http/yskApi/credit.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() {
|
||||
getCreditBuyerList({
|
||||
shopId: uni.getStorageSync("shopId"),
|
||||
repaymentStatus: pageData.query.repaymentStatus,
|
||||
keywords: pageData.query.keywords,
|
||||
size: pageData.query.size,
|
||||
page: pageData.query.page
|
||||
}).then(res => {
|
||||
pageData.list = res.content
|
||||
pageData.totalElements = res.totalElements
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 挂账人/手机号筛选
|
||||
*/
|
||||
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 => {
|
||||
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;
|
||||
}
|
||||
}
|
||||
.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>
|
||||
Reference in New Issue
Block a user