assess-app/pages/index/index.vue

<template>
	<view class="flex-common-css page-box box-bg">
		<Nav :title="'Featured Collections'" :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> -->
		<view class="p-30 box-border-box bgc-fff">
			<scroll-view class="scroll-view center" scroll-x="true">
				<view class="d-inline-block mr-20">
					<view class="croll-view-item bgc-5692FF mb-10">
						<view class="size-64">
							🏢
						</view>
						<view class="head-tab size-24 fc-fff bgc-7D99FF r-40">
							4 deals
						</view>
					</view>
					<view class="size-28">
						Commercial Real Estate
					</view>
					<view class="size-24 fc-6A7383">
						Prime locations
					</view>
				</view>
				<view class="d-inline-block mr-20">
					<view class="croll-view-item bgc-00DC73-00BF7C mb-10">
						<view class="size-64">
							🏘️
						</view>
						<view class="head-tab size-24 fc-fff bgc-33D595 r-40">
							3 deals
						</view>
					</view>
					<view class="size-28">
						Residential
					</view>
					<view class="size-24 fc-6A7383">
						Housing market
					</view>
				</view>
				<view class="d-inline-block mr-20">
					<view class="croll-view-item bgc-00DC73-00BF7C mb-10">
						<view class="size-64">
							✨
						</view>
						<view class="head-tab size-24 fc-fff bgc-33D595 r-40">
							3 deals
						</view>
					</view>
					<view class="size-28">
						Low Risk
					</view>
					<view class="size-24 fc-6A7383">
						LTV < 70%
					</view>
				</view>
				<view class="d-inline-block mr-20">
					<view class="croll-view-item bgc-C579FF-F4399F mb-10">
						<view class="size-64">
							⚙️
						</view>
						<view class="head-tab size-24 fc-fff bgc-E87DD2 r-40">
							3 deals
						</view>
					</view>
					<view class="size-28">
						Equipment
					</view>
					<view class="size-24 fc-6A7383">
						Asset-backed
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="p-20">
			<view class="personal m-lr10 row-justify-sb center">
				<text class="sys-weight-600">精选系列</text>
				<view class="row-justify-sb center">
					<view class="personal_text">
						<uni-datetime-picker type="date">
							<view class="personal sys-background-fff size-24 sys-weight-600 p-lr30 r-40">{{indexTime}}
							</view>
						</uni-datetime-picker>
					</view>
				</view>
			</view>
		</view>
		<view class="scroll-view-css flex-direction">
			<TaskItem :type="5" :taskList="backlogList" @heartBut="heartBut"></TaskItem>
		</view>
		<Tab class="tabs_height" :tab-index="0"></Tab>
	</view>

</template>
<script>
	import TaskItem from "@/common/task/task-item.vue"
	import PieChart from "@/common/chart/pie_chart.vue"
	import CircleChart from "@/common/chart/circle_chart.vue"
	// 个人信息
	import IndexColumn from "./module/index_column.vue"
	// 顶部栏目
	import IndexPersonal from "./module/index_personal.vue"
	import {
		getDateBacklogStatistics,
		getDayBacklogList
	} from "@/api/task";
	import {
		date
	} from "@/uni_modules/uv-ui-tools/libs/function/test";

	export default {
		components: {
			TaskItem,
			PieChart,
			CircleChart,
			IndexColumn,
			IndexPersonal
		},
		data() {
			return {
				current: 0,
				modelTime: this.$tools.getDate('-'),
				indexTime: this.$tools.getDate('-'),
				is_admin: false,
				scrollTop: 0,
				topNavHeight: 0,
				tabsList: [{
					name: '全部',
					disabled: false
				}, {
					name: '未完成(0)',
					dot_color: 'red',
					is_dot: false,
					disabled: false
				}, {
					name: '已完成',
					dot_color: 'red',
					is_dot: false,
					disabled: false
				}],
				memberData: {
					draftNum: 0,
					creditNum: 0,
					noticeNum: 0,
					take_num: 0,
					unreadNum: 0,
				},
				statisticsData: {
					endNum: 0,
					exceedDate: 0,
					lagDate: 0,
					totalNum: 0,
				},
				loanList: [],
				backlogList: [],
				weekData: [],
				weekNum: 1,
				dayNum: 0,
				day: '',
				month: '',
				page: 1,
				isAjax: false,
				total: null
			}
		},
		watch: {},
		onLoad() {},
		onShow() {},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop / 120
		},
		mounted() {
			this.backlogListData()
		},
		onReachBottom() {},
		methods: {
			heartBut(data) {
				if (uni.getStorageSync('loanList')) {
					this.loanList = uni.getStorageSync('loanList')
				}
				if (data) {
					this.backlogList.forEach((i, k) => {
						if (i.id === data.id) {
							i.live = !i.live
						}
					})
					uni.setStorageSync('backlogList', this.backlogList)
					if (data.type) {
						this.backlogList.forEach((v, j) => {
							if (v.id === data.id) {
								this.loanList.push(v)
							}
						})
						uni.setStorageSync('loanList', this.loanList)
					} else {
						this.backlogList.forEach((v, j) => {
							if (v.id === data.id) {
								this.loanList.splice(j, 1)
							}
						})
						uni.setStorageSync('loanList', this.loanList)
					}
				}
			},
			backlogListData() {
				let data = uni.getStorageSync('backlogList')
				if (data) {
					this.backlogList = data
				} else {
					this.backlogList = [{
							img: 'https://copyright.bdstatic.com/vcg/creative/d6c6a351be227d5d3b3e8c1f96f56e50.jpg@h_1280',
							proportion: '37',
							name: 'Downtown Office Tower -Prime Location',
							live: false,
							percentage: '3.1',
							description: 'Metro Properties LLC',
							amount: '5.0',
							trend: '7.5',
							risk: 'LTV 37%',
							time: '2024-001',
							id: 1,
						},
						{
							img: 'https://pic.rmb.bdstatic.com/bjh/3ea195479f8a/250303/f53064611fee7c092312f3b6ea8e439d.jpeg',
							proportion: '71',
							name: 'Tower -Prime Location',
							live: false,
							percentage: '4.1',
							description: 'Healthcare Properties Inc',
							amount: '5.0',
							trend: '5.5',
							risk: 'LTV 77%',
							time: '2024-002',
							id: 2,
						},
						{
							img: 'https://qcloud.dpfile.com/pc/3B5v9C_aeqiLmADxyv5K2oclwwy3V_g7gw7Dmq38AuV9VmaUI3Rb5Uvj6kJNMMCrY0q73sB2DyQcgmKUxZFQtw.jpg',
							proportion: '60',
							name: 'Luxury Retail Center - High Street',
							live: false,
							percentage: '1.5',
							description: 'Healthcare Properties Inc',
							amount: '8.5',
							trend: '6.8',
							risk: 'LTV 10.5%',
							time: '2024-002',
							id: 3,
						}
					]
					uni.setStorageSync('backlogList', this.backlogList)
				}
			}
		},
	}
</script>
<style lang="scss" scoped>
	.box-bg{
		background-image: url('https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/task/task-nav-bg.png');
		background-repeat: no-repeat;
		background-size: 100% auto;
	}
	.head-tab {
		padding: 8rpx 16rpx;
	}

	.croll-view-item {
		width: 320rpx;
		height: 224rpx;
		border-radius: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.scroll-view {
		white-space: nowrap;
	}

	.personal {
		height: 55rpx;
		line-height: 55rpx;
	}

	.pie_chart {
		width: 135px
	}

	.circle_chart {
		width: 135px;
		padding-top: 20rpx;
	}

	.chart_dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
	}
</style>