zhxy-desk/components/teaPlan.vue

<template>
	<view class="plan-tea">
		<view class="plan-tea-left">
			<view :style="`color:${titleColor(item)} ;`" v-for="(item,index) in list" :key="index"
				class="plan-tea-left-item">
				<view class="plan-tea-left-item-title">
					{{item.dateTitle}}
				</view>
				<view v-if="item.open" class="">
					<view :style="`color:${color(item1)} ;`" v-for="(item1,index1) in item.child" :key="index1"
						class="child-item">
						{{item1.date}}
					</view>
				</view>
			</view>
		</view>

		<view class="plan-tea-right">
			<view class="plan-tea-right-item" v-for="(item,index) in list" :key="index">

				<view @click.stop="open(item)" class="plan-tea-right-item-top">
					<text>{{item.title}}</text>
					<text>
						<uni-icons v-if="item.open" color="#999" type="top" size="16"></uni-icons>
						<uni-icons v-else color="#999" type="bottom" size="16"></uni-icons>
					</text>
					<view @click.stop="open(item)" :style="`width:${titleWidth(item)} ;`"
						class="plan-tea-right-item-top-color">

					</view>
				</view>
				<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :show="item.open">
					<view @click="openPop(item)" :style="`background-color:${bgcColor(item1)} ;`"
						v-for="(item1,index1) in item.child" :key="index1" class="children-item">
						{{item1.title}}
					</view>
				</uni-transition>
			</view>

		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="确定" content="确认该课时已完成?"
				@confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "teaPlan",
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				modeClass: ['fade', 'zoom-in'],
				msgType: '',
				item: {}
			};
		},
		methods: {
			color(item1) {

				if (item1.flag) {
					return '#05cca1'
				}
			},
			titleColor(item) {
				let color = ' '
				item.child.forEach(it => {
					if (it.flag) {
						color = '#05cca1'
					}
				})
				return color
			},
			bgcColor(item1) {
				if (item1.flag) {
					return 'rgba(5,204,161,0.15)'
				}
			},
			titleWidth(item) {
				let arr = []
				item.child.forEach(item => {
					if (item.flag) {
						arr.push(item)
					}
				})
				let percent = (arr.length / item.child.length * 100).toFixed(2)
				return percent + '%'
			},
			open(item) {
				item.open = !item.open
				this.$emit('update:list', this.list)

			},
			openPop(item) {
				this.msgType = 'info'
				this.item = item
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.plan-tea {
		display: flex;

		.children-item {
			width: 80%;
			height: 74rpx;
			border-radius: 5.33px;
			box-shadow: 0px 0px 8px 0px rgba(147, 147, 147, 0.20);
			margin-bottom: 24rpx;
			border-radius: 37rpx;
			padding: 0 32rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
		}

		.plan-tea-right-item-top {
			width: 100%;
			height: 74rpx;
			border-radius: 5.33px;
			box-shadow: 0px 0px 8px 0px rgba(147, 147, 147, 0.20);
			margin-bottom: 24rpx;
			padding: 0 32rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;

			.plan-tea-right-item-top-color {
				left: 0;
				position: absolute;
				width: 100%;
				height: 100%;
				background-color: rgba(5, 204, 161, 0.15);
				border-radius: 5.33px;
			}
		}

		.plan-tea-left-item-title {
			text-align: right;
			font-size: 48rpx;
			margin-bottom: 24rpx;
			height: 74rpx;
			line-height: 74rpx;
		}

		.plan-tea-line {
			.plan-tea-line-item-color {
				width: 20.33px;
				height: 20.33px;
				background: #05cca1;
				border-radius: 50%;
				margin: 0 24rpx;
			}
		}

		.child-item {
			margin-bottom: 24rpx;
			text-align: right;
			height: 74rpx;
			line-height: 74rpx;
		}

		.plan-tea-right {
			flex: 1;
			margin-left: 32rpx;
		}

	}
</style>