assess-app/pages/index/index.vue

<template>
	<view class="flex-common-css page-box box-bg">
		<Nav :title="'我的'" :genre="1" :back="false" :is_fixed='false'></Nav>
		<Search :placeholder="'姓名或电话'" @setSearch="setSearch"></Search>
		<task-ima-tab @setProductId="setProductId" :num-type="0"></task-ima-tab>
		<!-- 		<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-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="1"></Tab>
		<!-- 弹窗 -->
		<popupModuleVue ref="popupModuleRef"></popupModuleVue>
	</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 TaskImaTab from "@/common/task/task_ima_tab.vue";
	import {
		date
	} from "@/uni_modules/uv-ui-tools/libs/function/test";
	import popupModuleVue from "./module/popup-module.vue"
	export default {
		components: {
			TaskItem,
			PieChart,
			CircleChart,
			IndexColumn,
			IndexPersonal,
			TaskImaTab,
			popupModuleVue
		},
		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: {
			setSearch() {
				this.$refs.popupModuleRef.openPop()
			},
			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://img10.360buyimg.com/imgw/s288x1000_jfs/t1/272247/11/21904/319337/680a15b3F83ce2abb/edea9200bca61e12.jpg',
							proportion: '37',
							name: '大连市甘井子区红旗中路86号5单元3层2号房屋',
							live: false,
							percentage: '3.1',
							description: '地铁地产有限责任公司',
							amount: '5.0',
							trend: '7.5',
							risk: '客户终身价值 37%',
							time: '2024-001',
							id: 1,
						},
						{
							img: 'https://img10.360buyimg.com/imgw/s288x1000_jfs/t1/291521/34/387/2600515/680d9b5cFb8b7b047/cada828e2de5de80.jpg',
							proportion: '71',
							name: '大连市甘井子区丛岭街67号1层3号',
							live: false,
							percentage: '4.1',
							description: '医疗地产公司',
							amount: '5.0',
							trend: '5.5',
							risk: '客户终身价值 77%',
							time: '2024-002',
							id: 2,
						},
						{
							img: 'https://img10.360buyimg.com/imgw/s288x1000_jfs/t1/310628/9/1190/138687/6825caaaF809d367e/78f129884bf3a7bf.png',
							proportion: '60',
							name: '大连市中山区致富街31号43层2号房屋',
							live: false,
							percentage: '1.5',
							description: '奢侈品地产公司',
							amount: '8.5',
							trend: '6.8',
							risk: '客户终身价值 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>