assess-app/pages/index/index.vue

<template>
	<view class="total-page page_env page-box">
		<Nav :title="'工作台导航'" :back="false" :is_fixed="true" :opacity="scrollTop" :justify="'left'" :color="'#fff'">
			<view class="">
				<view class="p-30">
					<view class="bor-f1 row-justify-sb center p-40 r-20"
						style="box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);">
						<view class="center">
							<image class="wh-100 r-circle" src="/static/img/index/index-avatar.png" mode="">
							</image>
							<view class="m-l20">
								<text class="text-color-fff">HI，李亮</text>
								<view class="text-color-fff size-24 text-center r-20 line-30 p-tb6 p-lr20 m-t10 "
									style="background-color: rgba(0, 0, 0, 0.2);opacity: 0.6;">
									业务专员
								</view>
							</view>
						</view>
						<image class="wh-80 r-circle is-hover" src="/static/img/index/index-system.png"
							@click="onSystemShow">
						</image>
					</view>
					<view class="row-c m-t30">
						<view class="sys-background-dominant r-30 column-justify-sb" style="width: 50%;height: 300rpx;"
							v-if="!is_admin">
							<view class="column-c p-t40">
								<view class="row-c" style="height: 80rpx;line-height: 80rpx;">
									<image class="wh-80 m-r20 r20" src="/static/img/index/index-add.png" mode="">
									</image>
									<text class="text-color-fff sys-weight-600 size-30">新建任务</text>
								</view>
							</view>
							<view class="p-l40 column justify-center"
								style="background-color: rgba(255, 255, 255, 0.2);height: 140rpx;border-radius: 16rpx 16rpx 30rpx 30rpx;">
								<view class="row-c m-b16" style="height: 30rpx;line-height: 30rpx;">
									<image class="wh-30 m-r16" src="/static/img/index/index-record.png"></image>
									<text class="size-26 text-color-fff">任务记录</text>
								</view>
								<text class="text-color-fff size-24 text-center r-30 line-30 p-tb6 p-lr20"
									style="background-color: rgba(0, 0, 0, 0.2);opacity: 0.7;width: 140rpx;line-height: 40rpx;">
									创建中(2)
								</text>
							</view>
						</view>
						<view class="column-justify-sb" style="width: 50%;height: 300rpx;" v-else>
							<view class="column justify-center r-30 p-lr24"
								style="height: 140rpx;background: linear-gradient( 180deg, #94ECE1 0%, rgba(255,255,255,1) 100%);">
								<view class="row-c">
									<view class="sys-background-dominant r-10" style="width: 8rpx;height: 24rpx;">
									</view>
									<text class="text-color-12 sys-weight-600 size-24 m-l10">今日放款</text>
								</view>
								<view class="row-justify-sb center m-t20" style="line-height: 40rpx;">
									<text class="sys-weight-600" style="color: #02154E;">13678.45万</text>
									<view class="row-c">
										<text style="color: #02154E;padding-right: 6rpx;">34</text>
										<text class="size-24" style="color: #999999;">笔</text>
									</view>
								</view>
							</view>
							<view class="column justify-center r-30 p-lr24"
								style="height: 140rpx;background: linear-gradient( 180deg, #FFF5DA 0%, rgba(255,255,255,1) 100%);">
								<view class="row-c">
									<view class="sys-background-dominant r-10" style="width: 8rpx;height: 24rpx;">
									</view>
									<text class="text-color-12 sys-weight-600 size-24 m-l10">今日回款</text>
								</view>
								<view class="row-justify-sb center m-t20" style="line-height: 40rpx;">
									<text class="sys-weight-600" style="color: #02154E;">78459.80万</text>
									<view class="row-c">
										<text style="color: #02154E;padding-right: 6rpx;">56</text>
										<text class="size-24" style="color: #999999;">笔</text>
									</view>
								</view>
							</view>
						</view>
						<view class="m-l20 column-justify-sb" style="width: 50%;height: 300rpx;">
							<view class="row-justify-c center r-30"
								style="height: 140rpx;background: linear-gradient( 180deg, #FFEEDA 0%, rgba(255,255,255,1) 100%);"
								@click="onGetTask">
								<view style="position: relative;">
									<image class="wh-90 r-circle m-r20" src="/static/img/index/index-task.png"
										style="margin-right: 20rpx;" mode="">
									</image>
									<view class="text-color-fff size-20"
										style="border-radius: 40rpx;background: red;padding: 2rpx 10rpx;position: absolute;right: 10rpx;top: -10rpx;line-height: 30rpx;">
										12
									</view>
								</view>
								<text class="text-color-12 sys-weight-600">领取任务</text>
							</view>
							<view class="row-justify-c center r-30"
								style="height: 140rpx;background: linear-gradient( 180deg, #DAF4FF 0%, rgba(255,255,255,1) 100%);"
								@click="onMessage">
								<image class="wh-90 r-circle m-r20" src="/static/img/index/index-money.png" mode="">
								</image>
								<text class="text-color-12 sys-weight-600">任务消息</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</Nav>
		<view class="p-lr20 m-tb30">
			<view class="m-lr10 row-justify-sb center" style="height: 54rpx;line-height: 54rpx;">
				<text class="sys-weight-600">我的待办</text>
				<view class="row-justify-sb center">
					<image class="wh-30 m-r16" src="/static/img/address.png" mode=""></image>
					<text class="sys-background-fff size-24 sys-weight-600 p-lr30 r-40">2024年03月08日</text>
				</view>
			</view>
		</view>
		<view class="page-box-bg-fff m-t30 m-lr20 m-b20 r-30 row-justify-sb flex p-b30">
			<view class="">
				<view class="row-c">
					<view class="column-c" style="width: 135px;">
						<PieChart></PieChart>
						<text class="size-24 text-color-12">任务完成情况</text>
					</view>
					<view class="m-b30">
						<view class="row-c p-tb10" v-for="(item,index) in chartList" :key="index">
							<view class="row-c">
								<view class="row-c" style="line-height: 30rpx;">
									<view class="chart_dot" :style="{backgroundColor:item.color}"></view>
									<text class="m-l16 text-color-787">{{item.name}}</text>
								</view>
							</view>
							<text class="text-color-12 sys-weight-600" style="margin-left: 40rpx;">{{item.value}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="column-sb-c" style="width: 135px;padding-top: 20rpx;">
				<CircleChart :bgColor="'#0FB160'"></CircleChart>
				<text class="size-24 text-color-12">任务进度</text>
			</view>
		</view>
		<TaskItem :type="2"></TaskItem>
		<uni-popup background-color="#fff" ref="popup" type="left" border-radius="10px 10px 0 0"
			@touchmove.stop.prevent="moveHandle">
			<SystemPopup ref="system" @onCloseSystem="onCloseSystem"></SystemPopup>
		</uni-popup>
		<Tab :tab-index="0"></Tab>
	</view>

</template>
<script>
	import TaskItem from "@/common/task/task-item.vue";
	import SystemPopup from "@/common/system_popup/system_popup.vue";
	import PieChart from "@/common/chart/pie_chart.vue";
	import CircleChart from "@/common/chart/circle_chart.vue";
	
	export default {
		components: {
			TaskItem,
			SystemPopup,
			PieChart,
			CircleChart
		},
		data() {
			return {
				is_admin: false,
				scrollTop: 0,
				topNavHeight: 0,
				chartList:[{
					name:"超期",
					color:'#DE5847',
					value:"100%"
				},{
					name:"滞后",
					color:'#EF8F27',
					value:"100%"
				},{
					name:"正常",
					color:'#3ABF7D',
					value:"100%"
				},]
			}
		},
		created() {
			this.topNavHeight = getApp().globalData.topNavHeight
		},
		onLaunch() {

		},
		onLoad() {
			uni.hideTabBar()
		},
		watch: {


		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop / 120
		},
		mounted() {

		},
		methods: {
			onSystemShow() {
				this.$refs.popup.open('left')
			},
			onGetTask() {
				uni.navigateTo({
					url: "/page_subpack/gain_task/gain_task"
				})
			},
			onMessage() {
				uni.navigateTo({
					url: "/page_subpack/message/message"
				})
			},
			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{

	//   }

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