assess-app/pages/loan/loan.vue

<template>
	<view class="flex-common-css page-box task-bg">
		<Nav :title="'贷后管理'" :genre="1" :back="false" :is_fixed='false'></Nav>
		<Search :placeholder="'贷款人姓名或电话'" @setSearch="setSearch"></Search>
		<view class="page-box-bg-fff m-lr20 r-20">
			<z-tabs ref="tabs" :list="tabsList" :active-style="{color:'#10B261',fontWeight:'bold',fontSize:'30rpx'}"
				:bar-style="{background:'#10B261'}" :inactive-style="{fontWeight:'bold',fontSize:'28rpx'}"
				:current="current" :bar-animate-mode="'worm'" @change="tabsChange" />
		</view>
		<!-- 			<EnScroll ref="scroll" :navHeight="100" is_tabHeight @onRefresh="onRefresh"
				@onScrollBottom="onScrollBottom">
			</EnScroll> -->
		<view class="common-view-css flex-direction">
			<LoanItem :task-list="list" @onCalculate="onCalculate"></LoanItem>
		</view>			
		<Tab :tab-index="1"></Tab>
		<uni-popup ref="popup" type="bottom" @touchmove.stop.prevent="moveHandle">
			<view class="page-env-160 sys-background-fff r-20">
				<view class="row-justify-sb center p-lr30 p-t30">
					<view class="wh-25"></view>
					<text class="size-30 sys-weight-600">核算年利率</text>
					<image class="wh-25"
						src="https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/task-details/close.png"
						mode="aspectFill" @click="onClose">
					</image>
				</view>
				<view class="p-30 size-28 m-b50">
					<view class="">
						<text>当前年利率</text><text
							class="sys-weight-600 color-FF730E m-l10">{{(loanItem.interest_rate*1).toFixed(2)}}%</text>
					</view>
					<view class="row-justify-sb center r-10 sys-from-background-color p-30 m-t30">
						<input class="flex" type="text" placeholder="请输入新年利率" v-model="loanItem.new_rate" />
						<text class="text-color-12">%</text>
					</view>
				</view>
				<EnButton text="确认核算" @onSubmit="setComputation"></EnButton>
			</view>
		</uni-popup>
		<!--		<EnButton :is_both="1" leftText="利率对比" rightText="完善贷后" @onLeftSubmit="onRateCompare" @onSubmit="onPerfectRate">-->
		<!--		</EnButton>-->
		<uni-popup background-color="#fff" ref="clientPopup" type="bottom" border-radius="10px"
			@touchmove.stop.prevent="moveHandle">
			<view>
				<client-type :client-id="loanItem.client_id" @endTaskSet="onClose"></client-type>
			</view>
		</uni-popup>
	</view>

</template>
<script>
	// 任务列表
	import LoanItem from "@/common/task/loan-item.vue";
	import {
		getLoanList
	} from "@/api/task";
	import tools from "@/service/tools";
	import loanItem from "@/common/task/loan-item.vue";
	import EnSelect from "@/components/en-utils/en-select/en-select.vue";
	import ClientType from "@/pages/loan/components/clientType.vue";

	export default {
		components: {
			ClientType,
			EnSelect,
			LoanItem
		},
		data() {
			return {
				current: 0,
				tabsList: [{
					name: '全部',
					disabled: false
				}, {
					name: '未完成(0)',
					dot_color: 'red',
					is_dot: false,
					disabled: false
				}, {
					name: '已完成',
					dot_color: 'red',
					is_dot: false,
					disabled: false
				}],
				searchText: "",
				fromData: {
					status: 0,
					interest_rate: '', //利率区间 数组或者字符串，连接
					residue_num: '', //剩余期数
					product_name: '', //产品名称
					phone: '', //电话号码
					selectStr: '', //电话号码
					name: '', //客户名称
					productId: '', //产品ID
					page: 1,
				},
				total: 0,
				list: [],
				loanItem: {
					interest_rate: 0,
					id: 0,
					new_rate: '',
					client_id: '',
				}
			}
		},
		watch: {},
		onShow() {
			this.getList()
		},
		onLoad() {},
		mounted() {
		},
		methods: {
			startList() {
				this.fromData.status = this.current
				this.total = 999;
				this.list = [];
				this.page = 1;
				this.isAjax = false;
				this.getList();

			},
			setSearch(text) {
				this.fromData.selectStr = text
				this.startList()
			},
			getList() {
				this.list = uni.getStorageSync('loanList')
				console.log(this.list, '1111111111');
				// getLoanList(this.fromData).then((res) => {
				// 	if (res.code === 1) {
				// 		this.list = [...this.list, ...res.data.items]
				// 		this.total = res.data.total
				// 		this.tabsList[1].name = '未完成（' + res.data.noNum + ')'
				// 		this.tabsList[1].is_dot = res.data.noNum > 0;
				// 	} else {
				// 		tools.error(res.msg)
				// 	}
				// })
			},
			tabsChange(index) {
				this.current = index;
				// this.startList()
			},
			// 下拉刷新
			onRefresh() {

				setTimeout(() => {

					this.$refs.scroll.onEndPulling()
				}, 200)
				console.log("下拉刷新");
			},
			// 滚动到底部
			onScrollBottom() {
				uni.showLoading({
					title: '数据加载中'
				})
				setTimeout(() => {
					uni.showToast({
						title: '加载完成',
						icon: 'none'
					})
				}, 1000)
				console.log("到底部了");
			},
			setComputation() {
				uni.navigateTo({
					url: "/pages/loan/module/rate_compare?loanId=" + this.loanItem.id +
						'&interestRate=' + this.loanItem.interest_rate +
						'&newInterestRate=' + this.loanItem.new_rate
				})
			},
			onPerfectRate() {
				uni.navigateTo({
					url: "/pages/loan/module/perfect_rate"
				})
			},
			onCalculate(data) {
				this.loanItem.id = data.item.id
				if (data.type === 1) {
					this.loanItem.interest_rate = data.item.interest_rate
					this.$refs.popup.open('bottom')
				} else {
					this.loanItem.client_id = data.item.client_id
					this.$refs.clientPopup.open('bottom')
				}

			},
			onClose() {
				this.$refs.popup.close('bottom')
				this.$refs.clientPopup.close('bottom')
			},
			moveHandle() {
				return false
			}
		},
	}
</script>
<style lang="scss" scoped>
	// .page-box{
	//   height: 100vh;
	//   background-image: url("https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/index/index-bg.png?imageMogr2/quality/20");
	//   background-repeat: no-repeat;
	//   background-size: 100% auto;
	//   display: flex;
	//   flex-direction: column;
	//   .top-data{
	//     flex: 1;
	//     overflow: hidden;
	//     .top-row{
	//       height: 680rpx;
	//     }
	//   }

	//   .bottom-data{

	//   }

	// }
</style>