party-h5/components/Y-Steps/Y-Steps.vue

<template>
	<!-- 获取一个数组，结构为[{date:'时间',info:'内容内容'}] -->
	<!-- @click事件返回点击标签元素的索引值 第一项为0 -->
	<view class="bg">
		<view class="steps">
			<view class="steps_item" v-for="(i,index) in infoList" :key='i.key'>
				<view class="s_r">
					<view class="line" :style="{backgroundColor:index != 0?'#e61916':'rgba(0,0,0,0)'}"></view>
					<view class="index-border">
						<view class="index" :style="{backgroundColor:'#e61916',color:' #ffd8d8'}">
							{{ index + 1 }}
						</view>
					</view>
					<view class="line" :style="{backgroundColor:index != infoList.length-1?'#e61916':'rgba(0,0,0,0)'}"></view>
				</view>
				<view class="s_l">
					<view class="info_item" @tap="topage(index)">
						<uni-collapse>
							<uni-collapse-item :title="i.name" class="child">
								<view class="child-body">
									<view class="child_list" v-for="item in i.child" :key='item.key'>
										<text @click="stepChild(item)">{{item.name}}</text>
										<text style="margin-left: 15px;" @click="downLoad(item)">(下载模板)</text>
									</view>
								</view>
							</uni-collapse-item>
						</uni-collapse>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp()
	export default {
		name: 'YSteps',
		data() {
			return {
				infoList: [],
				url:''
			};
		},
		created() {
			this.getSteps();

		},
		onLoad(e) {

		},
		methods: {
			getSteps: function() {
				uni.showLoading()
				let date = {
					// type:1
				}
				app.request('/organization-flow', date, 'get').then(res => {
					console.log(res, '----------------------------------------------index')
					let dataList = res.data.data
					let arr = [];
					let list = [];
					let nodelist = [];
					let data = [];
					let data1 = [];
					dataList.map(item => {
						data.push(item.child);
						item.child.map(item1 => {
							data1.push(item1);
						});
					});
					this.infoList = data1
					uni.hideLoading()

				})
			},
			//跳转子页面
			stepChild(item) {
				uni.setStorageSync('steps', item)
				uni.navigateTo({
					url: '../../pages/index/fileList'
				})
			},
			topage(e) {
				this.$emit('click', e);
			},
			downLoad(item){
				let key=item.key
				app.request('/templates',{key:key}).then(res=>{
					console.log(res.data.data.data,'点击下载')
					if(res.data.data.data.length>0){
						let url=res.data.data.data[0].resource
						this.url=url
						window.location.href=url
					}else{
						uni.showToast({
							title:'暂无模板',
							icon:'none'
						})
					}
					
				})
			
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #FFFFFF;
	}

	.bg {
		background-color: #FFFFFF;
		display: flex;
	}

	.steps {
		display: flex;
		flex-direction: column;

		.steps_item {
			display: flex;

			.s_r {

				padding: 0 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 10upx;

				.line {
					flex: 1;
					width: 5rpx;
					background-color: #fff;
				}

				.index-border {
					height: 50upx;
					width: 50upx;
					border-radius: 50upx;
					// line-height: 60upx;
					text-align: center;
					background-color: #ffe1e1;

					.index {
						width: 30upx;
						margin: 12upx 0 0 12upx;
						height: 30upx;
						font-size: 10px;
						text-align: center;
						line-height: 30upx;
						border-radius: 50upx;
						// background-color: #e61916;
					}
				}

			}

			.s_l {
				display: flex;
				flex-direction: column;
				padding: 30rpx 0;
				border-radius: 10upx;

				.info_item {
					margin-right: 30upx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					box-shadow: 0 10rpx 30rpx #ddd;
					border-radius: 10upx;
					min-width: 550upx;
					// padding-bottom: 30upx;

					.child {
						// background-color: #e61916;
						// color: #e61916;
						color: #FFFFFF;
						border-radius: 10upx;
					}

					.border {
						border-radius: 10upx;
						background-color: #FFFFFF;
					}

					.child-body {
						padding: 20upx 30upx 15upx;
						background-color: #FFFFFF;

						.child_list {

							background-color: #FFFFFF;
							// height:60upx;
							line-height: 40upx;
							font-size: 30upx;
							
							// padding-left: 30upx;
							// padding-right: 10px;
							word-wrap: break-word;
							word-break: break-all;
							overflow: hidden;
							padding: 20upx 0;
							border-bottom: 1px solid #F3F3F3;
							&:last-child{
								border-bottom: none;
							}
							text{
								line-height: 40upx;
								font-size: 30upx;
								color: #333333;
							}
						}
			
					}


					text {
						font-size: 18px;
						font-weight: 500;
						color: #FFFFFF;
						line-height: 25px;
					}

					view {
						font-size: 14px;
						font-weight: 400;
						color: rgba(102, 102, 102, 1);
						line-height: 20px;
						overflow: hidden;
						text-overflow: ellipsis;
						flex-direction: column;
					}
				}


				.info_item:active {
					background-color: #e61916 !important;
				}
			}
		}
	}
</style>