FE_DQmini-code/guaranteePages/pages/asset/asset.vue

<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="listParams.customerNumberOrName" type="text" placeholder="输入搜索的关键词" confirm-type="search"></input>
					<text class="cuIcon-search"></text>
				</view>
			</view>					
			
			<view class="cu-list menu-avatar">
				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in listData" :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="item.name">
							<navigator @click="handleGe(item,'watch')" hover-class='none' :url="'/guaranteePages/pages/assetSee/assetSee'"
							 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 class="flex-between">
										<text class="time-text">{{item.time}}</text>
										<text class="status-text" :style="'background-color:'+item.status.bgColor+';color:'+item.status.textColor">{{item.status.text}}</text>
									</view> -->
								</view>
							</navigator>
						</view>
					</view>
					<view class="move foot-btn sideBtn">
						<view class="">
							<button v-show="item.status===1&&item.operatingStatus == 1||item.status===4&&item.operatingStatus == 1" v-if="[63].includes(item.roleId)&&item.businessStatus !== 3" class="mini-btn round def-btn mar-lr" type="primary" size="mini" @click="handleGe(item,'survey')">调查</button>
							<button v-show="item.status===0&&item.operatingStatus == 1" v-if="[62].includes(item.roleId)&&item.businessStatus !== 3" class="mini-btn round suc-btn" type="primary" size="mini" @click="handleGe(item,'none',true)">指派</button>
						</view>
						<view class="">
							<button v-show="item.status===1&&item.operatingStatus == 1||item.status===4&&item.operatingStatus == 1" v-if="[62,64].includes(item.roleId)&&item.businessStatus !== 3" class="mini-btn round def-btn mar-lr" type="primary" size="mini" @click="handleGe(item,'audit')">审核</button>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.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: '',
			listData: [],
			status:'',// 状态
			total: 1,
			scrolltop: false,
			listTouchStart: 0,
			listTouchDirection: null,
			modalName: null,
			
			listParams:{
				customerNumberOrName:"",// 搜索框
				page:1,
				size:10
			}
		};
	},
	onShow() {
		this.upCallback({
			num:1,size:10,serach:''
		})
	},
	mounted() {
		
	},
	methods: {
		changeTab(index){
			this.TabCur = index;
		},
		/*下拉刷新的回调 */
		downCallback() {
			// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
			// loadSwiper();
			// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			this.mescroll.resetUpScroll()
		},
		/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
		upCallback(page) {
			this.$http.post('/api-guarantee/dg-assets-investigation/assetsList',{
				page: page.num?page.num:1,
				size: page.size?page.size:10,
				status:this.status?this.status:'',
				customerNumberOrName:page.search?page.search:''
			}).then(res => {
				if(page.num == 1) this.listData = []; //如果是第一页需手动制空列表          
				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.listData = this.listData.concat(res.data.list); //追加新数据
				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 => {
				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.listParams.status = index
			if(index==0){
				this.status = ''
			}else{
				this.status = `${index-1}`
			}
			this.upCallback({
				num:1,size:10,serach:''
			})
			// 记录前一个菜单的数据
			let preTab = this.tabs[this.preIndex]
			preTab.y = this.mescroll.getScrollTop(); // 滚动条位置
			this.preIndex = index;
			// 当前菜单的数据
			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) // 恢复滚动条的位置
				})
			}
		},
		// 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
		},
		// 列表数据
		getList(val){
			if(val==='search'){
				this.listParams.page = 1
				this.listParams.size = 10
			}
			this.$http.get('/api-guarantee/dg-assets-investigation/assetsList',this.listParams).then(res=>{
				if(res.data&&res.data.list&&res.data.list.length!==0){
					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.listData = res.data.list
				}else{
					this.listData = []
				}
				
			})
			
		},
		
		// 传递当前操作状态和值
		handleGe(item,str,assign){
			if(assign){// 如果是指派-进入指派页面
				this.goto('/guaranteePages/pages/assignCommissioner/assignCommissioner')// 跳转指派
				uni.removeStorageSync('handleGe')
			}else{
				uni.setStorageSync('handleGe',str)// 操作状态记录
			}
			if(!assign&&str!=='watch'){// 审核
				this.goto('/guaranteePages/pages/assetSee/assetSee')
			}
			uni.setStorageSync('applyMsg',JSON.stringify(item))// 所有的值存起来
			uni.setStorageSync('businessId',item.businessId)// 储存有业务id
		},
		
	},
	// 使用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;
}
</style>