feat：新增征信报告页面

components/en-scroll/en-scroll.vue

@@ -2,7 +2,7 @@
 	<view>
 		<scroll-view class="main" :style="{height:`calc(100vh - ${$tools.topHeight()+navHeight+tabHeight}px)`}"
 			scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="45"
-			refresher-background="lightgreen" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
+			refresher-background="#EEF1F7" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
 			@refresherrestore="onRestore" @refresherabort="onAbort" @scrolltolower="onScrolltolower">
 			<!-- 自定义样式时设置 refresher-default-style="none" -->
 			<view slot="refresher">刷新样式</view>
@@ -33,12 +33,6 @@
 		created() {
 			this.tabHeight = this.is_tabHeight ? this.tabHeight : 0
 		},
-		onLoad() {
-			// this._freshing = false;
-			// setTimeout(() => {
-			// 	this.triggered = true;
-			// }, 1000)
-		},
 		methods: {
 			// 自定义下拉刷新控件被下拉
 			onPulling(e) {

components/en-utils/en-nav/en-nav.vue

@@ -169,7 +169,7 @@
 			position: absolute;
 			width: 100rpx;
 			height: 42rpx;
-			top: 0;
+			top: 12rpx;
 			bottom: 0;
 			left: 30rpx;
 			color: #fff;
@@ -177,7 +177,7 @@
 
 			.back {
 				width: 25rpx;
-				height: 35rpx;
+				height: 32rpx;
 			}
 		}
 

page_task/credit_report/components/credit-item.vue

@@ -0,0 +1,56 @@
+<template>
+	<view class="p-lr20 p-b40">
+		<view class="sys-background-fff r-30 text-color-12 p-20 m-t20" v-for="(item,index) in 20" :key="index">
+			<view class="row-justify-sb center">
+				<view class="row-c line-30">
+					<text class="size-30 sys-weight-600">张三</text>
+					<image class="wh-30 m-lr16" src="/static/img/task/task-phone.png" mode="aspectFill"></image>
+					<text class="size-26">11212345465</text>
+				</view>
+				<image class="wh-80" src="/page_task/static/img/task-details/icon-5.png" mode="aspectFill"></image>
+			</view>
+			<view class="sys-from-background-color size-24 text-color-666 p-20 r-20 m-tb20">
+				<view>
+					<text>报告时间：</text>
+					<text>2024.09.12 12:14:56</text>
+				</view>
+				<view class="m-t10">
+					<text>报告编号：</text>
+					<text>537000653987897457454</text>
+				</view>
+			</view>
+			<view class="row-justify-sb center">
+				<text class="size-24 text-color-999 flex">2024.10.11 12:45上传</text>
+				<button class="credit-item-button sys-weight-500 size-28" type="default" hover-class="is-hover"
+					@click="onSubmit">去处理</button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+
+		},
+		data() {
+			return {
+
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.credit-item-button {
+		width: 173rpx;
+		color: #fff;
+		background: #0FB160;
+		line-height: 70rpx;
+		border-radius: 100rpx;
+	}
+
+	button::after {
+		border: none;
+	}
+</style>

page_task/credit_report/credit_report.vue

@@ -0,0 +1,145 @@
+<template>
+	<view class="total-page page-box page-env-20 scroll_content task-bg">
+		<Nav title="征信报告" :genre="1" is_fixed></Nav>
+		<view class="header-filter">
+			<view class="row-justify-sb center m-20">
+				<view class="subsection">
+					<uv-subsection :list="list" :bgColor="'#FFF'" :barBg="'#0FB160'" :activeColor="'#fff'"
+						:inactiveColor="'#0FB160'" :fontSize="14" custom-style="height: 70rpx;border-radius: 30rpx;"
+						custom-item-style="border-radius: 30rpx;" :current="subCurrent"
+						@change="onSubChange"></uv-subsection>
+				</view>
+				<view class="row credit_earch center sys-background-fff r-30 p-l16">
+					<uni-icons type="search" size="18" color="#999"></uni-icons>
+					<input class="flex m-l10 m-r20 size-28 sys-background-fff" type="text" placeholder="搜索姓名/电话"
+						placeholder-style="font-size:28rpx;color:#999" v-model="value" />
+				</view>
+			</view>
+			<view style="height: 100rpx;">
+				<z-tabs ref="tabs" :list="tabsList" :active-style="{color:'#10B261',fontWeight:'bold',fontSize:'28rpx'}"
+					:bar-style="{background:'#10B261'}" :inactive-style="{fontWeight:'bold',fontSize:'28rpx'}"
+					:current="current" :bar-animate-mode="'worm'" @change="tabsChange" />
+			</view>
+		</view>
+		<EnScroll ref="scroll" :navHeight="navHeight" is_tabHeight @onRefresh="onRefresh"
+			@onScrollBottom="onScrollBottom">
+			<CreditItem></CreditItem>
+		</EnScroll>
+		<view class="fixed-button p-t20 p-lr30">
+			<button class="en-button button-background sys-weight-500 row-justify-c center" type="default"
+				hover-class="is-hover" @click="onSubmit">
+				<image class="wh-36 m-lr16" src="/static/img/task/task-phone.png" mode="aspectFill"></image>
+				邀请客户添加征信报告
+			</button>
+		</view>
+	</view>
+</template>
+<script>
+	import CreditItem from "./components/credit-item.vue";
+
+	export default {
+		components: {
+			CreditItem,
+		},
+		data() {
+			return {
+				value: '',
+				current: 0,
+				navHeight: 0,
+				swiperCurrent: 0,
+				tabsList: [{
+					name: '全部',
+					dot_color: 'red',
+					disabled: false,
+					'id': 0,
+				}, {
+					name: '待验证',
+					dot_color: 'yellow',
+					disabled: false,
+					'id': 6,
+				}, {
+					'id': 1,
+					name: '已通过',
+					dot_color: '',
+					disabled: false
+				}, {
+					'id': 2,
+					name: '已拒绝',
+					dot_color: '',
+					disabled: false
+				}],
+				subCurrent: 0,
+				list: ['全部', '当日', '本周'],
+			}
+		},
+		onReady() {
+			this.getFilterHeight()
+		},
+		onLoad() {},
+		mounted() {},
+		methods: {
+			tabsChange(index) {
+				if (index !== this.current) {
+					this.current = index;
+					this.startList()
+				}
+			},
+			onSubChange(current) {
+				this.subCurrent = current
+			},
+			// 下拉刷新
+			onRefresh() {
+				console.log('下拉刷新');
+				setTimeout(() => {
+					this.$refs.scroll.onEndPulling()
+				}, 500)
+			},
+			// 滚动到底部
+			onScrollBottom() {
+				console.log('滚动到底部');
+			},
+			getFilterHeight() {
+				const query = uni.createSelectorQuery().in(this);
+				query.select('.header-filter').boundingClientRect(data => {
+					if (data) {
+						console.log(data.height);
+						this.navHeight = data.height
+					}
+				}).exec();
+			}
+		},
+	}
+</script>
+<style lang="scss" scoped>
+	.subsection {
+		width: 430rpx;
+	}
+
+	.credit_earch {
+		width: 250rpx;
+		height: 69rpx;
+	}
+
+	.en-button {
+		border: none;
+		color: #fff;
+		font-size: 30rpx;
+		border: 1rpx solid #0FB160 !important;
+		line-height: 80rpx;
+		border-radius: 100rpx;
+		background-color: #0FB160;
+	}
+
+	.fixed-button {
+		position: fixed;
+		bottom: 0;
+		z-index: 10;
+		background: #fff;
+		width: calc(100% - 60rpx);
+		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+	}
+
+	button::after {
+		border: none;
+	}
+</style>

pages.json

@@ -196,6 +196,13 @@
               "hide": true
             }
           }
+        },
+        {
+        	"path" : "credit_report/credit_report",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : ""
+        	}
         }
       ]
     }

uni_modules/uv-subsection/components/uv-subsection/props.js

@@ -5,6 +5,10 @@ export default {
 			type: Array,
 			default: () => []
 		},
+		barBg: {
+			type: String,
+			default: '#ffffff'
+		},
 		// 当前活动的tab的index
 		current: {
 			type: [String, Number],

uni_modules/uv-subsection/components/uv-subsection/uv-subsection.vue

@@ -1,36 +1,20 @@
 <template>
-	<view 
-		class="uv-subsection"
-		ref="uv-subsection"
-		:class="[`uv-subsection--${mode}`]"
+	<view class="uv-subsection" ref="uv-subsection" :class="[`uv-subsection--${mode}`]"
 		:style="[$uv.addStyle(customStyle), wrapperStyle]">
-		<view 
-			class="uv-subsection__bar"
-			ref="uv-subsection__bar"
-			:style="[barStyle]"
-			:class="[
+		<view class="uv-subsection__bar" ref="uv-subsection__bar" :style="[barStyle]" :class="[
         mode === 'button' && 'uv-subsection--button__bar',
         current === 0 && mode === 'subsection' && 'uv-subsection__bar--first',
         current > 0 && current < list.length - 1 && mode === 'subsection' && 'uv-subsection__bar--center',
         current === list.length - 1 && mode === 'subsection' && 'uv-subsection__bar--last'
-      ]"
-		></view>
-		<view class="uv-subsection__item"
-			:class="[
+      ]"></view>
+		<view class="uv-subsection__item" :class="[
         `uv-subsection__item--${index}`,
         index < list.length - 1 && 'uv-subsection__item--no-border-right',
         index === 0 && 'uv-subsection__item--first',
         index === list.length - 1 && 'uv-subsection__item--last'
-      ]"
-			:ref="`uv-subsection__item--${index}`"
-			:style="[itemStyle(index)]"
-			@tap="clickHandler(index)"
-			v-for="(item, index) in list"
-			:key="index"
-		>
-			<text 
-				class="uv-subsection__item__text"
-				:style="[textStyle(index)]">{{ getText(item) }}
+      ]" :ref="`uv-subsection__item--${index}`" :style="[itemStyle(index)]" @tap="clickHandler(index)"
+			v-for="(item, index) in list" :key="index">
+			<text class="uv-subsection__item__text" :style="[textStyle(index)]">{{ getText(item) }}
 			</text>
 		</view>
 	</view>
@@ -77,7 +61,7 @@
 		watch: {
 			list: {
 				deep: true,
-				handler(){
+				handler() {
 					this.init();
 				}
 			},
@@ -116,6 +100,7 @@
 				const style = {};
 				style.width = `${this.itemRect.width}px`;
 				style.height = `${this.itemRect.height}px`;
+				style.backgroundColor = this.barBg
 				// 通过translateX移动滑块，其移动的距离为索引*item的宽度
 				// #ifndef APP-NVUE
 				style.transform = `translateX(${ this.current * this.itemRect.width }px)`;
@@ -191,6 +176,7 @@
 
 <style lang="scss" scoped>
 	@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
+
 	.uv-subsection {
 		@include flex;
 		position: relative;
@@ -198,6 +184,7 @@
 		/* #ifndef APP-NVUE */
 		width: 100%;
 		box-sizing: border-box;
+
 		/* #endif */
 		&--button {
 			height: 32px;
@@ -205,19 +192,23 @@
 			padding: 3px;
 			border-radius: 3px;
 			align-items: stretch;
+
 			&__bar {
 				background-color: #ffffff;
 			}
 		}
+
 		&--subsection {
 			height: 30px;
 		}
+
 		&__bar {
 			position: absolute;
 			/* #ifndef APP-NVUE */
 			transition-property: transform, color;
 			transition-duration: 0.3s;
 			transition-timing-function: ease-in-out;
+
 			/* #endif */
 			&--first {
 				border-top-left-radius: 3px;
@@ -225,12 +216,14 @@
 				border-top-right-radius: 0px;
 				border-bottom-right-radius: 0px;
 			}
+
 			&--center {
 				border-top-left-radius: 0px;
 				border-bottom-left-radius: 0px;
 				border-top-right-radius: 0px;
 				border-bottom-right-radius: 0px;
 			}
+
 			&--last {
 				border-top-left-radius: 0px;
 				border-bottom-left-radius: 0px;
@@ -238,6 +231,7 @@
 				border-bottom-right-radius: 3px;
 			}
 		}
+
 		&__item {
 			// background-color: rgba(100,158,72,0.25);
 			@include flex;
@@ -246,17 +240,21 @@
 			align-items: center;
 			// vue环境下，需要设置相对定位，因为滑块为绝对定位，item需要在滑块的上面
 			position: relative;
+
 			&--no-border-right {
 				border-right-width: 0 !important;
 			}
+
 			&--first {
 				border-top-left-radius: 3px;
 				border-bottom-left-radius: 3px;
 			}
+
 			&--last {
 				border-top-right-radius: 3px;
 				border-bottom-right-radius: 3px;
 			}
+
 			&__text {
 				font-size: 12px;
 				line-height: 12px;