lineage-app/pages/family/editevent.vue

<template>
	<view class="container">
		<view class="tui-order-tracking">
			<tui-time-axis>

				<tui-timeaxis-item backgroundColor="transparent">
					<template v-slot:node>
						<view class="tui-node" :style="{backgroundColor:backgroundColor}">
							
						</view>
					</template>

					<template v-slot:content>
						<view style="background: #fff;padding: 20rpx;border-radius:15rpx">
							<view class="tui-flex" style="border-bottom: 1px solid #f1f1f1;margin-bottom: 10rpx;">
								<view class=" tui-col-2" style="margin-bottom: 10rpx;">时间</view>
								<view class="tui-center tui-col-9" style="margin-bottom: 10rpx;"><input style="color: #999;font-size: 26rpx;width: 100%;" type="text" value="1907.7" /></view>
								<view class="tui-center tui-col-1" style="margin-bottom: 10rpx;" hover-class="tui-opcity"><tui-icon name="delete" :size="16" color="#C74547"></tui-icon></view>
							</view>
							<view class="tui-flex" style="border-bottom: 1px solid #f1f1f1;margin-bottom: 10rpx;">
								<view class=" tui-col-2" style="margin-bottom: 10rpx;">描述</view>
								<view class="tui-center tui-col-10" style="margin-bottom: 10rpx;"><textarea style="color: #999;height: 100rpx;font-size: 26rpx;" placeholder="请输入内容" value="描述123" /></view>
							</view>
							<view style="margin: 20rpx 0;">
								<tui-upload :value="value" :serverUrl="serverUrl" @complete="result" @remove="remove"></tui-upload>
							</view>
						</view>
					</template>

				</tui-timeaxis-item>
				
				<tui-timeaxis-item backgroundColor="transparent">
					<template v-slot:node>
						<view class="tui-node" :style="{backgroundColor:backgroundColor}">
							
						</view>
					</template>
				
					<template v-slot:content>
						<view style="background: #fff;padding: 20rpx;border-radius:15rpx">
							<view class="tui-flex" style="border-bottom: 1px solid #f1f1f1;margin-bottom: 10rpx;">
								<view class=" tui-col-2" style="margin-bottom: 10rpx;">时间</view>
								<view class="tui-center tui-col-9" style="margin-bottom: 10rpx;"><input style="color: #999;font-size: 26rpx;width: 100%;" type="text" value="1907.7" /></view>
								<view class="tui-center tui-col-1" style="margin-bottom: 10rpx;" hover-class="tui-opcity"><tui-icon name="delete" :size="16" color="#C74547"></tui-icon></view>
							</view>
							<view class="tui-flex" style="border-bottom: 1px solid #f1f1f1;margin-bottom: 10rpx;">
								<view class=" tui-col-2" style="margin-bottom: 10rpx;">描述</view>
								<view class="tui-center tui-col-10" style="margin-bottom: 10rpx;"><textarea style="color: #999;height: 100rpx;font-size: 26rpx;" placeholder="请输入内容" value="描述123" /></view>
							</view>
							<view style="margin: 20rpx 0;">
								<tui-upload :value="value" :serverUrl="serverUrl" @complete="result" @remove="remove"></tui-upload>
							</view>
						</view>
					</template>
				
				</tui-timeaxis-item>
				
				<tui-timeaxis-item backgroundColor="transparent">
					<template v-slot:node>
						<view class="tui-node" :style="{backgroundColor:backgroundColor}">
							
						</view>
					</template>
				
					<template v-slot:content>
						<view style="background: #fff;padding: 20rpx;border-radius:15rpx">
							<view class="tui-flex" style="border-bottom: 1px solid #f1f1f1;margin-bottom: 10rpx;">
								<view class=" tui-col-2" style="margin-bottom: 10rpx;">时间</view>
								<view class="tui-center tui-col-9" style="margin-bottom: 10rpx;"><input style="color: #999;font-size: 26rpx;width: 100%;" type="text" value="1907.7" /></view>
								<view class="tui-center tui-col-1" style="margin-bottom: 10rpx;" hover-class="tui-opcity"><tui-icon name="delete" :size="16" color="#C74547"></tui-icon></view>
							</view>
							<view class="tui-flex" style="border-bottom: 1px solid #f1f1f1;margin-bottom: 10rpx;">
								<view class=" tui-col-2" style="margin-bottom: 10rpx;">描述</view>
								<view class="tui-center tui-col-10" style="margin-bottom: 10rpx;"><textarea style="color: #999;height: 100rpx;font-size: 26rpx;" placeholder="请输入内容" value="描述123" /></view>
							</view>
							<view style="margin: 20rpx 0;">
								<tui-upload :value="value" :serverUrl="serverUrl" @complete="result" @remove="remove"></tui-upload>
							</view>
						</view>
					</template>
				
				</tui-timeaxis-item>
				
				<tui-timeaxis-item backgroundColor="transparent">
					<template v-slot:node>
						<view class="tui-node" :style="{backgroundColor:backgroundColor}">
							
						</view>
					</template>
				
					<template v-slot:content>
						<tui-button plain><tui-icon name="plus" :size="16" color="#C74547"></tui-icon>添加事件</tui-button>
					</template>
				
				</tui-timeaxis-item>
				


				
			</tui-time-axis>
		</view>
	</view>
</template>

<script>
import tNewsItem from '@/components/views/t-news-item/t-news-item.nvue';
import tuiIcon from "@/components/thorui/tui-icon/tui-icon"
import tuiButton from "@/components/thorui/tui-button/tui-button"
import tuiTabs from "@/components/thorui/tui-tabs/tui-tabs"
import tuiTimeAxis from "@/components/thorui/tui-time-axis/tui-time-axis"
import tuiTimeaxisItem from "@/components/thorui/tui-timeaxis-item/tui-timeaxis-item"
import tuiCard from "@/components/thorui/tui-card/tui-card"
import tuiModal from "@/components/thorui/tui-modal/tui-modal"
import tuiUpload from "@/components/thorui/tui-upload/tui-upload"
import txl from '@/components/yt-txl/index.vue';  
import tRtPopup from '@/components/views/t-rt-popup/t-rt-popup1';
	
	export default {
		components: {
			tNewsItem,
			tuiIcon,
			tuiButton,
			tuiTabs,
			tuiTimeAxis,
			tuiTimeaxisItem,
			tuiCard,
			tuiModal,
			tuiUpload,
			txl,
			tRtPopup
		},
		data() {
			return {
               backgroundColor:"#C74547",
			   value:[], //初始化图片
			   serverUrl: "https://api.thorui.cn/",
			   imageData: [],
			}
		},
		onLoad(options){
			setTimeout(()=>{
				//实际开发中图片地址应为网络地址
				this.value=['../../static/img/shop/1.jpg']
			},200);
            let page=options.page || ""
			if(page=='mall'){
				this.backgroundColor="#EB0909";
				uni.setNavigationBarTitle({
					title:"查看物流"
				})
				setTimeout(()=>{
					uni.setNavigationBarColor({
						backgroundColor:this.backgroundColor,
						frontColor:"#ffffff"
					})
				},50)
			}
		},
		methods:{
			result: function(e) {
				console.log(e)
				this.imageData = e.imgArr;
			},
			remove: function(e) {
				//移除图片
				console.log(e)
				let index = e.index
			},
		}
		
	}
</script>

<style>
	@import '@/static/style/thorui.css';
	
	.container{
		width: 100%;
	}
	.tui-order-header {
			padding: 30rpx;
			box-sizing: border-box;
			background: #fff;
		}
	
		.tui-text {
			font-size: 28rpx;
			color: #333;
			padding: 4rpx;
		}
	
		.tui-bold {
			font-weight: bold;
		}
	
		.tui-node {
			height: 32rpx;
			width: 32rpx;
			border-radius: 50%;
			background-color: #C74547;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			flex-shrink: 0;
		}
	
		.tui-node-dot {
			height: 16rpx;
			width: 16rpx;
			background-color: #ddd;
			border-radius: 50%;
			/* transform: translateY(45%); */
			margin-top: 6rpx;
		}
	
		.tui-bg-primary {
			background: #EB0909 !important;
		}
	
		.tui-order-tracking {
			padding: 30rpx 30rpx 30rpx 30rpx;
			box-sizing: border-box;
		}
	
		.tui-order-title {
			padding-bottom: 12rpx;
			font-size: 32rpx;
			color: #333;
			display: flex;
		}
		
	
		.tui-order-desc {
			padding-bottom: 12rpx;
			font-size: 28rpx;
			color: #333;
		}
	
		.tui-ptop {
			display: flex;
			justify-content: flex-start;
			line-height: 28rpx;
		}
	
		.tui-order-time {
			font-size: 24rpx;
		}
	
		.tui-light-gray {
			color: #888 !important;
		}
	
		.tui-primary {
			color: #C74547;
		}
</style>