182 lines
3.8 KiB
Vue
182 lines
3.8 KiB
Vue
<template>
|
|
<view class="page-gray u-font-28">
|
|
<view class="search bg-fff u-flex u-col-center ">
|
|
<view class="u-flex-1">
|
|
<uni-search-bar bgColor="#F9F9F9" cancelButton="none" placeholder="搜索" @confirm="search" @clear="search"
|
|
v-model="query.keywords">
|
|
</uni-search-bar>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="list ">
|
|
<view class="bg-fff u-row-between u-flex no-choose border-r-12" @tap="chooseUser">
|
|
<view>不选择挂账人</view>
|
|
<my-radio v-model="nouser" :size="18" border-color="#d1d1d1" @change="chooseUser"></my-radio>
|
|
</view>
|
|
<template v-if="list.length>0">
|
|
<view class="u-m-t-32 bg-fff box bg-fff">
|
|
<view class="u-flex item u-row-between" v-for="(item,index) in list" :key="index"
|
|
@tap="chooseUser(index,item)">
|
|
<view class="u-flex">
|
|
<view class="u-m-l-32">
|
|
<view class="u-m-t-12">挂账人：{{item.debtor}}</view>
|
|
<view class=" u-font-24 u-m-t-12 u-flex">
|
|
<view class=" u-flex">
|
|
<text class="">挂账额度：</text>
|
|
<text class="color-main">{{item.remainingAmount}}</text>
|
|
</view>
|
|
<view class="u-m-l-30 u-flex">
|
|
<text class="">账户余额：</text>
|
|
<text class="color-main">{{item.accountBalance}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<my-radio @change="chooseUser(index,item)" v-model="item.checked" :size="18"
|
|
border-color="#d1d1d1"></my-radio>
|
|
</view>
|
|
</view>
|
|
<view class="u-m-t-32">
|
|
<my-pagination :page="query.page" :totalElements="query.totalElements" :size="query.size"
|
|
@change="pageChange"></my-pagination>
|
|
</view>
|
|
|
|
</template>
|
|
<template v-if="hasAjax&&list.length<=0">
|
|
<my-img-empty tips="未找到相关用户"></my-img-empty>
|
|
</template>
|
|
|
|
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import { reactive, onBeforeMount, ref } from 'vue';
|
|
import { getCreditBuyerPage } from '@/http/api/buyer.js';
|
|
|
|
let nouser = ref(false)
|
|
let timer = null
|
|
onLoad(() => {
|
|
getBuyer()
|
|
})
|
|
onBeforeMount(() => {
|
|
clearInterval(timer)
|
|
})
|
|
|
|
const query = reactive({
|
|
keywords: "",
|
|
page: 1,
|
|
size: 10,
|
|
status: 1
|
|
})
|
|
const list = reactive([])
|
|
let hasAjax = ref(false)
|
|
|
|
/**
|
|
* 获取用户列表
|
|
*/
|
|
async function getBuyer() {
|
|
const res = await getCreditBuyerPage(query)
|
|
hasAjax.value = true
|
|
list.length = res.records.length
|
|
for (let i in res.records) {
|
|
list[i] = {
|
|
...res.records[i],
|
|
checked: false
|
|
}
|
|
}
|
|
query.totalElements = res.totalRow
|
|
console.log(list);
|
|
}
|
|
|
|
/**
|
|
* 挂账人选择
|
|
* @param {Object} index
|
|
* @param {Object} item
|
|
*/
|
|
function chooseUser(index, item) {
|
|
if (index === undefined || item === undefined) {
|
|
nouser.value = true
|
|
return emitChooser({
|
|
id: '',
|
|
debtor: '',
|
|
creditAmount: '0.00',
|
|
accountBalance: '0.00'
|
|
})
|
|
} else {
|
|
list[index].checked = true
|
|
emitChooser(item)
|
|
}
|
|
}
|
|
function emitChooser(data) {
|
|
uni.$emit('choose-buyer', data)
|
|
timer = setTimeout(() => {
|
|
uni.navigateBack()
|
|
}, 100)
|
|
}
|
|
function pageChange(e) {
|
|
query.page = e
|
|
getBuyer()
|
|
}
|
|
|
|
function search() {
|
|
query.page = 1
|
|
getBuyer()
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.scale7 {
|
|
transform: scale(0.7);
|
|
}
|
|
|
|
.search {
|
|
padding-right: 28rpx;
|
|
|
|
.icon-saoma {
|
|
margin-left: 20rpx;
|
|
width: 34rpx;
|
|
height: 32rpx;
|
|
}
|
|
}
|
|
|
|
.list {
|
|
padding: 32rpx 24rpx;
|
|
|
|
.no-choose {
|
|
padding: 36rpx 30rpx 36rpx 24rpx;
|
|
}
|
|
|
|
.box {
|
|
padding: 32rpx 30rpx 78rpx 24rpx;
|
|
|
|
.item {
|
|
padding: 24rpx 0;
|
|
|
|
.headimg {
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
font-size: 0;
|
|
width: 84rpx;
|
|
height: 84rpx;
|
|
background-color: #eee;
|
|
overflow: hidden;
|
|
|
|
.img {
|
|
width: 84rpx;
|
|
height: 84rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item:not(:first-child) {
|
|
border-top: 1px solid #E5E5E5;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
</style> |