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.
362 lines
13 KiB
362 lines
13 KiB
3 years ago
|
<template>
|
||
|
|
<view>
|
||
|
|
<!-- 菜单 (悬浮,预先隐藏)-->
|
||
|
|
<!-- <me-tabs v-if="isShowSticky" v-model="tabIndex" :fixed="true" :tabs="tabs" @change="tabChange"></me-tabs> -->
|
||
|
|
|
||
|
|
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption" @scroll="scroll" @topclick="topClick">
|
||
|
|
<!-- 菜单 (在mescroll-uni中不能使用fixed,否则iOS滚动时会抖动, 所以需在mescroll-uni之外存在一个一样的菜单) -->
|
||
|
|
<view id="tabInList">
|
||
|
|
<me-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></me-tabs>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 搜索 -->
|
||
|
|
<view class="cu-bar bg-white search" :class="scrolltop ? 'fixed' : ''" :style="[{top:CustomBar + 'px'}]">
|
||
|
|
<view class="search-form round">
|
||
|
|
<input @input="searchList" v-model="serach" type="text" placeholder="输入搜索的关键词" confirm-type="search"></input>
|
||
|
|
<text class="cuIcon-search"></text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="add-customer mat15 flex-between">
|
||
|
|
<text>共{{total}}条</text>
|
||
|
|
<view v-if="roleArr.includes('57')">
|
||
|
|
<button class="mini-btn" type="primary" size="mini" @click="handleApply(item,'new')"><text class="cuIcon-add mar-icon"></text>添加</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 数据列表 -->
|
||
|
|
<view class="cu-list menu-avatar">
|
||
|
|
<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in businessApplyListData" :key="index"
|
||
|
|
@touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
|
||
|
|
<view class="good-list">
|
||
|
|
<view class="charge" :id="'index-' + item.name" :data-index="index">
|
||
|
|
<navigator v-if="[57,58].includes(item.roleId)" @click="handleApply(item,'watch')" hover-class='none' :url="'/guaranteePages/pages/addApplication/addApplication'"
|
||
|
|
class="nav-li" navigateTo :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]">
|
||
|
|
<view class="charge-title flex-between">
|
||
|
|
<text>{{item.name}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="charge-text">
|
||
|
|
<view>
|
||
|
|
<text>业务编号：</text>
|
||
|
|
<text class="mgl30">{{item.businessCode}}</text>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<text>客户名称：</text>
|
||
|
|
<text class="mgl30">{{item.name}}</text>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<text>联系电话：</text>
|
||
|
|
<text class="mgl30">{{item.phone}}</text>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<text>业务类别：</text>
|
||
|
|
<text class="mgl30">{{item.businessType}}</text>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<text>申请额度(万元)：</text>
|
||
|
|
<text class="mgl30">{{item.applyAmount||''}}</text>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<text>申请期限：</text>
|
||
|
|
<text class="mgl30">{{item.applyTime}}</text>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<text>申请日期：</text>
|
||
|
|
<text class="mgl30">{{item.createTime}}</text>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<text>审批状态：</text>
|
||
|
|
<text class="mgl30">{{item.statusVal}}</text>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<text>业务状态：</text>
|
||
|
|
<text class="mgl30">{{item.businessStatusVal}}</text>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<text>操作状态：</text>
|
||
|
|
<text class="mgl30">{{item.operationType}}</text>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<text>提单人：</text>
|
||
|
|
<text class="mgl30">{{item.account}}</text>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<text>所属部门：</text>
|
||
|
|
<text class="mgl30">{{item.deptName}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</navigator>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="move foot-btn sideBtn">
|
||
|
|
<view class="">
|
||
|
|
<button v-show="item.status===1" v-if="[57].includes(item.roleId)&&item.businessStatus !== 3" class="mini-btn round def-btn mar-lr mgr6" type="primary" size="mini" @click="repaelPop(item)">撤销</button>
|
||
|
|
<button v-show="item.status===1" v-if="[58].includes(item.roleId)&&item.businessStatus !== 3" class="mini-btn round def-btn mar-lr" type="primary" size="mini" @click="handleApply(item,'audit')">审核</button>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<button v-show="item.status===4||item.status===5||item.status == 6&&item.operatingStatus == 3&&item.businessStatus !== 2" v-if="[57].includes(item.roleId)&&item.businessStatus !== 3" class="mini-btn round def-btn mar-lr" type="primary" size="mini" @click="handleApply(item,'change')">修改</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</mescroll-body>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
||
|
|
// import core from "@/util/core.js"
|
||
|
|
export default {
|
||
|
|
mixins: [MescrollMixin], // 使用mixin
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
upOption: {
|
||
|
|
// 如果用mescroll-uni 则需要onScroll: true, 且需要 @scroll="scroll"; 而mescroll-body最简单只需在onPageScroll处理即可
|
||
|
|
// onScroll: true // 是否监听滚动事件, 默认false (配置为true时,可@scroll="scroll"获取到滚动条位置和方向)
|
||
|
|
},
|
||
|
|
tabs:[
|
||
|
|
{name:'待指派', num:1, y:0, curPageLen:0, hasNext:true},
|
||
|
|
{name:'审核中', num:1, y:0, curPageLen:0, hasNext:true},
|
||
|
|
{name:'已审核', num:1, y:0, curPageLen:0, hasNext:true},
|
||
|
|
{name:'已拒绝', num:1, y:0, curPageLen:0, hasNext:true},
|
||
|
|
{name:'已驳回', num:1, y:0, curPageLen:0, hasNext:true},
|
||
|
|
{name:'已撤销', num:1, y:0, curPageLen:0, hasNext:true},
|
||
|
|
{name:'草稿', num:1, y:0, curPageLen:0, hasNext:true},
|
||
|
|
],
|
||
|
|
tabIndex: 0, // 当前菜单下标
|
||
|
|
preIndex: 0, // 前一个菜单下标
|
||
|
|
navTop: null, // nav距离到顶部的距离 (如计算不准确,可直接写死某个值)
|
||
|
|
isShowSticky: false, // 是否悬浮
|
||
|
|
TabCur: 0,
|
||
|
|
scrollLeft: 0,
|
||
|
|
CustomBar: this.CustomBar,
|
||
|
|
listCurID: '',
|
||
|
|
businessApplyListData: [],
|
||
|
|
page: 1,
|
||
|
|
pageSize: 10,
|
||
|
|
total: 0,
|
||
|
|
CustomerNumberOrName: '',
|
||
|
|
scrolltop: false,
|
||
|
|
listTouchStart: 0,
|
||
|
|
listTouchDirection: null,
|
||
|
|
modalName: null,
|
||
|
|
roleArr:'',// 取得当前角色信息
|
||
|
|
serach:'',// 搜索值
|
||
|
|
status:'',// 筛选值
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
// 返回时刷新数据
|
||
|
|
this.upCallback({num:1,size:10,search:''})// 每次返回该页面，刷新页面请求
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.roleArr = uni.getStorageSync('roleArr')
|
||
|
|
},
|
||
|
|
destroyed() {},// 离开时销毁组件
|
||
|
|
methods: {
|
||
|
|
// 业务-列表
|
||
|
|
getBusinessApply(){
|
||
|
|
let params = {
|
||
|
|
page: this.page?this.page:1,
|
||
|
|
size: this.pageSize?this.pageSize:10,
|
||
|
|
CustomerNumberOrName: this.CustomerNumberOrName
|
||
|
|
}
|
||
|
|
this.$http.get('/api-guarantee/dg-apply-amount-info/businessApplicationList',params).then(res => {
|
||
|
|
res.data.list.map(e =>{
|
||
|
|
e.statusVal = this.core.statusVal(e.status)
|
||
|
|
e.businessStatusVal = this.core.businessType(e.businessStatus)
|
||
|
|
e.operationType = this.core.operationType(e.operatingStatus)
|
||
|
|
})
|
||
|
|
|
||
|
|
this.businessApplyListData = res.data.list
|
||
|
|
this.total = res.data.totalCount
|
||
|
|
}).catch(function (error) {});
|
||
|
|
},
|
||
|
|
// 撤销业务
|
||
|
|
repaelPop(item){
|
||
|
|
let _this = this
|
||
|
|
uni.showModal({
|
||
|
|
title: '提示',
|
||
|
|
content: '是否撤销该申请',
|
||
|
|
success: function (res) {
|
||
|
|
if (res.confirm) {
|
||
|
|
_this.$http.get('/api-guarantee/dg-apply-amount-info/revokeBusinessApplication',{id: item.id}).then(res => {
|
||
|
|
uni.showToast({title: '撤销成功'})
|
||
|
|
_this.upCallback({num:1,size:10,search:''})
|
||
|
|
}).catch(function (error) {});
|
||
|
|
} else if (res.cancel) {}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
changeTab(index){
|
||
|
|
this.TabCur = index;
|
||
|
|
},
|
||
|
|
/*下拉刷新的回调 */
|
||
|
|
downCallback() {
|
||
|
|
// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
|
||
|
|
// loadSwiper();
|
||
|
|
// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
|
||
|
|
this.mescroll.resetUpScroll()
|
||
|
|
// this.getBusinessApply()
|
||
|
|
},
|
||
|
|
/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
|
||
|
|
upCallback(page) {
|
||
|
|
this.$http.get('/api-guarantee/dg-apply-amount-info/businessApplicationList',{
|
||
|
|
page: page.num,
|
||
|
|
size: page.size,
|
||
|
|
status:this.status,
|
||
|
|
CustomerNumberOrName:page.search?page.search:''
|
||
|
|
}).then(res => {
|
||
|
|
if(page.num == 1) this.businessApplyListData = []; //如果是第一页需手动制空列表
|
||
|
|
res.data.list.map(e =>{
|
||
|
|
e.statusVal = this.core.statusVal(e.status)
|
||
|
|
e.businessStatusVal = this.core.businessType(e.businessStatus)
|
||
|
|
e.operationType = this.core.operationType(e.operatingStatus)
|
||
|
|
})
|
||
|
|
this.businessApplyListData = this.businessApplyListData.concat(res.data.list); //追加新数据
|
||
|
|
this.total = res.data.totalCount
|
||
|
|
this.mescroll.endSuccess(res.data.list); // 隐藏加载状态栏
|
||
|
|
}).catch(()=>{
|
||
|
|
//联网失败, 结束加载
|
||
|
|
this.mescroll.endErr();
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 搜索框--结合防抖
|
||
|
|
searchList(e){
|
||
|
|
let that = this
|
||
|
|
if (this.timer) {
|
||
|
|
clearTimeout(this.timer);
|
||
|
|
this.timer = null;
|
||
|
|
}
|
||
|
|
this.timer = setTimeout(function () {
|
||
|
|
that.upCallback({num:1,size:10,search:e.detail.value})
|
||
|
|
},800)
|
||
|
|
},
|
||
|
|
// 设置nav到顶部的距离 (滚动条为0, 菜单顶部的数据加载完毕获取到的navTop数值是最精确的)
|
||
|
|
setNavTop(){
|
||
|
|
let view = uni.createSelectorQuery().select('#tabInList');
|
||
|
|
view.boundingClientRect(data => {
|
||
|
|
if(data) this.navTop = data.top // 到屏幕顶部的距离
|
||
|
|
}).exec();
|
||
|
|
},
|
||
|
|
// mescroll-uni的滚动事件 (需在up配置onScroll:true才生效)
|
||
|
|
// 而mescroll-body最简单只需在onPageScroll处理即可
|
||
|
|
scroll(){
|
||
|
|
// 菜单悬浮的原理: 监听滚动条的位置大于某个值时,控制顶部菜单的显示和隐藏
|
||
|
|
if (this.mescroll.getScrollTop() >= this.navTop) {
|
||
|
|
this.isShowSticky = true // 显示悬浮菜单
|
||
|
|
} else {
|
||
|
|
this.isShowSticky = false // 隐藏悬浮菜单
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 点击回到顶部按钮时,先隐藏悬浮菜单,避免闪动
|
||
|
|
topClick(){
|
||
|
|
this.isShowSticky = false
|
||
|
|
},
|
||
|
|
// 切换菜单
|
||
|
|
tabChange (index) {
|
||
|
|
this.status = index+"";
|
||
|
|
this.upCallback({num:1,size:10})
|
||
|
|
// 记录前一个菜单的数据
|
||
|
|
// let preTab = this.tabs[this.preIndex]
|
||
|
|
// preTab.y = this.mescroll.getScrollTop(); // 滚动条位置
|
||
|
|
// // 当前菜单的数据
|
||
|
|
// let curTab = this.tabs[index]
|
||
|
|
// if (!curTab.goods) {
|
||
|
|
// // 没有初始化,则初始化
|
||
|
|
// this.isChangeTab = true;
|
||
|
|
// this.mescroll.resetUpScroll()
|
||
|
|
// } else{
|
||
|
|
// // 初始化过,则恢复之前的列表数据
|
||
|
|
// this.mescroll.setPageNum(curTab.num + 1); // 恢复当前页码
|
||
|
|
// this.mescroll.endSuccess(curTab.curPageLen, curTab.hasNext); // 恢复是否有下一页或显示空布局
|
||
|
|
// this.$nextTick(()=>{
|
||
|
|
// this.mescroll.scrollTo(curTab.y, 0) // 恢复滚动条的位置
|
||
|
|
// })
|
||
|
|
// this.getBusinessApply()
|
||
|
|
// }
|
||
|
|
},
|
||
|
|
// ListTouch触摸开始
|
||
|
|
ListTouchStart(e) {
|
||
|
|
this.listTouchStart = e.touches[0].pageX
|
||
|
|
},
|
||
|
|
// ListTouch计算方向
|
||
|
|
ListTouchMove(e) {
|
||
|
|
this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
|
||
|
|
},
|
||
|
|
// ListTouch计算滚动
|
||
|
|
ListTouchEnd(e) {
|
||
|
|
if (this.listTouchDirection == 'left') {
|
||
|
|
this.modalName = e.currentTarget.dataset.target
|
||
|
|
} else {
|
||
|
|
this.modalName = null
|
||
|
|
}
|
||
|
|
this.listTouchDirection = null
|
||
|
|
},
|
||
|
|
// 传递当前操作状态和值
|
||
|
|
handleApply(item,str){
|
||
|
|
uni.setStorageSync('applyHandle',str)// 操作状态
|
||
|
|
if(str==='new'){// 添加的情况下跳转
|
||
|
|
this.goto('/guaranteePages/pages/addApplication/addApplication')
|
||
|
|
uni.removeStorageSync('applyMsg')
|
||
|
|
uni.removeStorageSync('businessId')
|
||
|
|
}else{
|
||
|
|
uni.setStorageSync('applyMsg',JSON.stringify(item))// 所有的值存起来
|
||
|
|
uni.setStorageSync('businessId',item.businessId)// 储存有业务id
|
||
|
|
}
|
||
|
|
if(str!='new'&&str!='watch'){// 非新增和查看时的跳转
|
||
|
|
this.goto('/guaranteePages/pages/addApplication/addApplication')
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
},
|
||
|
|
// 使用mescroll-body最简单只需在onPageScroll处理即可
|
||
|
|
onPageScroll(e){
|
||
|
|
if (e.scrollTop >= this.navTop) {
|
||
|
|
this.isShowSticky = true // 显示悬浮菜单
|
||
|
|
} else {
|
||
|
|
this.isShowSticky = false // 隐藏悬浮菜单
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.cu-bar .search-form{
|
||
|
|
border: 2rpx solid #00B9FF;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
background-color: #fff;
|
||
|
|
margin: 0 50rpx;
|
||
|
|
height: 72rpx;
|
||
|
|
line-height: 72rpx;
|
||
|
|
margin-top: 20rpx;
|
||
|
|
input{
|
||
|
|
height: 72rpx;
|
||
|
|
line-height: 72rpx;
|
||
|
|
padding: 0 40rpx;
|
||
|
|
}
|
||
|
|
.cuIcon-search{
|
||
|
|
margin: 0 20rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.add-customer{
|
||
|
|
padding: 0 50rpx;
|
||
|
|
button{
|
||
|
|
background-color: #00B9FF;
|
||
|
|
border-radius: 30rpx;
|
||
|
|
.mar-icon{
|
||
|
|
margin-right: 10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.sideBtn{
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
justify-content: space-around;
|
||
|
|
}
|
||
|
|
/deep/ .cu-list>.cu-item .move view{
|
||
|
|
flex: none;
|
||
|
|
margin-top: 10rpx;
|
||
|
|
}
|
||
|
|
</style>
|