lineage-app/pages/family/family.vue

<template>
	<view class="tui-tabs">
		<t-rt-popup ref="rtBubble"></t-rt-popup>
		
		<scroll-view style="width: 100%;" id="tab-bar" scroll-with-animation class="tui-scroll-h" :scroll-x="true" :show-scrollbar="false" :scroll-into-view="scrollInto">
			<view v-for="(tab, index) in tabBars" :key="tab.id" class="tui-tab-item" :id="tab.id" :data-current="index" @click="tabClick">
				<text class="tui-tab-item-title" :class="{ 'tui-tab-item-title-active': tabIndex == index }">{{ tab.name }}</text>
			</view>
			<view style="position: absolute;right: 10px;margin-top: 8px;">
				<tui-icon name="share" :size="20" color="#000"></tui-icon>
			</view>
		</scroll-view>
		<view class="tui-line-h"></view>
		<scroll-view v-if="tabIndex==0"  style="height: 100%;padding: 10px;width: auto;" :current="tabIndex" class="tui-swiper-box" :duration="300" @change="tabChange">
			<view class="tui-swiper-item" >
				<scroll-view scroll-y="true" style="100%">
				<view class="tui-flex family-card">
					<view class="tui-center tui-col-4">
						<view style="width: 150rpx;height: 150rpx;border-radius:75rpx;background-color: #E6B728;text-align: center;color: #FFFFFF;">
							<view style="font-size: 64rpx;margin-top: 14rpx;line-height: 1.2;">余</view>
							<view style="font-size: 20rpx;">家族姓氏</view>
						</view>
					</view>
					<view class="tui-center tui-col-4">
						<view style="width: 100%;font-size: 24rpx;color: #FFFFFF;line-height: 2;">
							<view>家族ID:38689456</view>
							<view>族长:暂无</view>
							<view>创建地:广西南宁</view>
						</view>
					</view>
					<view class="tui-center tui-col-4" style="height: 100%;">
						<view style="height: 100%;">
							<view style="margin:40rpx 40rpx 40rpx 40rpx;" @tap="switchfamily">
								<tui-button type="white" plain shape="circle" width="180rpx" height="40rpx" :size="30"><tui-icon style="margin-right: 3px;" name="listview" :size="16" color="#fff"></tui-icon>切换家族</tui-button>
							</view>
							<view style="position: absolute;top: 140rpx;right: 60rpx;" @tap="postcard" hover-class="tui-opcity">
								<view><tui-icon color="#fff" name="qrcode" :size="32"></tui-icon></view>
							</view>
						</view>
					</view>
				</view>
				<tui-tabs :tabs="tabs" :currentTab="currentTab"
				  @change="change" itemWidth="25%" style="width: 100%;top:auto;margin-top: 20px;"></tui-tabs>
				<!--选项卡逻辑自己实现即可，此处未做处理-->
				<view style="margin-bottom: 55px;">
					<view class="tui-order-item" v-if="currentTab==0">
						<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>
												<view class="tui-order-time tui-light-gray">1907.7</view>
												<view class="tui-order-desc">余姓,中国百家姓之一,主要起源于姬姓,东周春秋时期秦国上卿由余之后。</view>
											</view>
										</template>
									</tui-timeaxis-item>
								</tui-time-axis>
								<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>
												<view class="tui-order-time tui-light-gray">1907.7</view>
												<view class="tui-order-desc">余姓,中国百家姓之一,主要起源于姬姓,东周春秋时期秦国上卿由余之后。</view>
											</view>
										</template>
									</tui-timeaxis-item>
								</tui-time-axis>
								<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>
												<view class="tui-order-time tui-light-gray">1907.7</view>
												<view class="tui-order-desc">余姓,中国百家姓之一,主要起源于姬姓,东周春秋时期秦国上卿由余之后。</view>
											</view>
										</template>
									</tui-timeaxis-item>
								</tui-time-axis>
								<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>
												<view class="tui-order-time tui-light-gray">1907.7</view>
												<view class="tui-order-desc">余姓,中国百家姓之一,主要起源于姬姓,东周春秋时期秦国上卿由余之后。</view>
											</view>
										</template>
									</tui-timeaxis-item>
								</tui-time-axis>
								<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>
												<view class="tui-order-time tui-light-gray">1907.7</view>
												<view class="tui-order-desc">余姓,中国百家姓之一,主要起源于姬姓,东周春秋时期秦国上卿由余之后。</view>
											</view>
										</template>
									</tui-timeaxis-item>
								</tui-time-axis>
						</view>
						<tui-button @tap="editevent" style="position: fixed;bottom: 140rpx;right: 70rpx;width: 96rpx;height: 96rpx;border-radius: 50%;"><tui-icon name="evaluate" :size="32" color="#fff"></tui-icon></tui-button>
					</view>
					
					<view class="tui-order-item" v-if="currentTab==1">
						<view style="margin: 10rpx 0;">
							<view class="tui-title">
								<view>余姓起源<tui-icon name="edit" :size="22" style="margin-left: 6rpx;" @click="plot"></tui-icon></view>
							</view>
							<view class="tui-default" style="background: #fff;font-size: 24rpx;">
								<view class="contenfont">
									<view class="container" v-for="(item,index11) in textfont" :key="index11" :class="fold ? 'fold' : 'unfold'"  v-if="item.font !==''" >
									
									<label>    
									
									<span>{{item.font}}</span>
									
									</label>
									
									</view>
									
									<view style="width: 100%;">
									<view class="show" @click="btn" v-show="fold"><tui-icon name="arrowdown"></tui-icon></view>
									<view class="show" @click="btn" v-show="!fold"><tui-icon name="arrowup"></tui-icon></view>
									</view>
								</view>
								
								
							</view>
						</view>
						<tui-button @click="plot" style="position: fixed;bottom: 140rpx;right: 70rpx;width: 96rpx;height: 96rpx;border-radius: 50%;"><tui-icon name="plus" :size="32" color="#fff"></tui-icon></tui-button>
						
					</view>
					
					<view class="tui-order-item" v-if="currentTab==2">
						<view style="width: 100%;text-align: center;">
							<view style="width: 30%;height: 250rpx;margin: 1.6%;float: left;background-color: #000000;">
								<view class="tui-banner-swiper">
									<swiper-item>
										<view class="tui-banner-title" style="top: 0;right: 0;width: auto;">
											<tui-icon color="#fff" name="edit" :size="22" style="margin-left: 6rpx;" @click="glory"></tui-icon>
										</view>
										<image src="../../static/img/shop/1.jpg" class="tui-slide-image"/>
									</swiper-item>
								</view>
							</view>
							<view style="width: 30%;height: 250rpx;margin: 1.6%;float: left;background-color: #000000;">
								<view class="tui-banner-swiper">
									<swiper-item>
										<view class="tui-banner-title" style="top: 0;right: 0;width: auto;">
											<tui-icon color="#fff" name="edit" :size="22" style="margin-left: 6rpx;" @click="glory"></tui-icon>
										</view>
										<image src="../../static/img/shop/1.jpg" class="tui-slide-image"/>
									</swiper-item>
								</view>
							</view>
							<view style="width: 30%;height: 250rpx;margin: 1.6%;float: left;background-color: #000000;">
								<view class="tui-banner-swiper">
									<swiper-item>
										<view class="tui-banner-title" style="top: 0;right: 0;width: auto;">
											<tui-icon color="#fff" name="edit" :size="22" style="margin-left: 6rpx;" @click="glory"></tui-icon>
										</view>
										<image src="../../static/img/shop/1.jpg" class="tui-slide-image"/>
									</swiper-item>
								</view>
							</view>
						</view>
						<tui-button @click="glory" style="position: fixed;bottom: 140rpx;right: 70rpx;width: 96rpx;height: 96rpx;border-radius: 50%;"><tui-icon name="plus" :size="32" color="#fff"></tui-icon></tui-button>
						
					</view>
					
					<view class="tui-order-item" v-if="currentTab==3">
						<view style="width: 100%;text-align: center;">
							<view style="width: 30%;height: 250rpx;margin: 1.6%;float: left;background-color: #000000;">
								<view class="tui-banner-swiper">
									<swiper-item>
										<view class="tui-banner-title" style="top: 5rpx;right: 5rpx;width: auto;z-index: 99999;">
											<tui-icon color="#fff" name="delete" :size="16" style="margin-left: 6rpx;" @click="dele"></tui-icon>
										</view>
										<view class="tui-banner-title">
											<view>家族合照</view>
											<view>123张</view>
										</view>
										<image @tap="listimage" src="../../static/img/shop/1.jpg" class="tui-slide-image"/>
									</swiper-item>
								</view>
							</view>
							<view style="width: 30%;height: 250rpx;margin: 1.6%;float: left;background-color: #000000;">
								<view class="tui-banner-swiper">
									<swiper-item>
										<view class="tui-banner-title" style="top: 5rpx;right: 5rpx;width: auto;z-index: 99999;">
											<tui-icon color="#fff" name="delete" :size="16" style="margin-left: 6rpx;" @click="dele"></tui-icon>
										</view>
										<view class="tui-banner-title">
											<view>家族合照</view>
											<view>123张</view>
										</view>
										<image @tap="listimage" src="../../static/img/shop/1.jpg" class="tui-slide-image"/>
									</swiper-item>
								</view>
							</view>
							<view style="width: 30%;height: 250rpx;margin: 1.6%;float: left;background-color: #000000;">
								<view class="tui-banner-swiper">
									<swiper-item>
										<view class="tui-banner-title" style="top: 5rpx;right: 5rpx;width: auto;z-index: 99999;">
											<tui-icon color="#fff" name="delete" :size="16" style="margin-left: 6rpx;" @click="dele"></tui-icon>
										</view>
										<view class="tui-banner-title">
											<view>家族合照</view>
											<view>123张</view>
										</view>
										<image @tap="listimage" src="../../static/img/shop/1.jpg" class="tui-slide-image"/>
									</swiper-item>
								</view>
							</view>
						</view>
						<tui-button @click="album" style="position: fixed;bottom: 140rpx;right: 70rpx;width: 96rpx;height: 96rpx;border-radius: 50%;"><tui-icon name="plus" :size="32" color="#fff"></tui-icon></tui-button>
						
					</view>
				</view>
				</scroll-view>
			</view>
		</scroll-view>
		<scroll-view v-if="tabIndex==1"  style="height: 100%;" :current="tabIndex" class="tui-swiper-box" :duration="300" @change="tabChange">
			<view class="tui-swiper-item" >
				<scroll-view scroll-x="true" scroll-y="true" style="100%">
					<!--代-->
					<view style="float: left;">
						<view>第一代</view>
						<view>第二代</view>
						<view>第三代</view>
						<view>第四代</view>
						<view>第五代</view>
						<view>第六代</view>
						<view>第一代</view>
						<view>第二代</view>
						<view>第三代</view>
						<view>第四代</view>
						<view>第五代</view>
						<view>第六代</view>
						<view>第一代</view>
						<view>第二代</view>
						<view>第三代</view>
						<view>第四代</view>
						<view>第五代</view>
						<view>第六代</view>
						<view>第一代</view>
						<view>第二代</view>
						<view>第三代</view>
						<view>第四代</view>
						<view>第五代</view>
						<view>第六代</view>
						<view>第一代</view>
						<view>第二代</view>
						<view>第三代</view>
						<view>第四代</view>
						<view>第五代</view>
						<view>第六代</view>
						<view>第一代</view>
						<view>第二代</view>
						<view>第三代</view>
						<view>第四代</view>
						<view>第五代</view>
						<view>第六代</view>
						<view>第一代</view>
						<view>第二代</view>
						<view>第三代</view>
						<view>第四代</view>
						<view>第五代</view>
						<view>第六代</view>
					</view>
					<view>
						
					</view>
				</scroll-view>
			</view>
		</scroll-view>
		<scroll-view v-if="tabIndex==2"  style="height: 100%;width: auto;" :current="tabIndex" class="tui-swiper-box" :duration="300" @change="tabChange">
			<view class="tui-swiper-item" >
				<txl style="width: 100%;height: 100%;" @ev="evFunc" :datas="datas" :index="true" name="employeeName" photo="IMGphoto"></txl>
			</view>
		</scroll-view>
		<tui-modal :show="editglory" @cancel="hide2" :custom="true" fadeIn >
			<view class="tui-modal-custom">
				<input  placeholder="请输入标题" class="tui-modal-input"  v-model="title" />
				        <view class="uni-list">
				            <view class="uni-list-cell">
				                <view class="uni-list-cell-db">
				                    
				                </view>
				            </view>
				        </view>
				<view class="tui-box-upload">
					<tui-upload :value="value" :serverUrl="serverUrl" @complete="result" @remove="remove"></tui-upload>
				</view>
				<tui-button height="72rpx" :size="28" shape="circle" @click="handleClick2">保存</tui-button>
			</view>
		</tui-modal>
		<tui-modal :show="addalbum" @cancel="hide3" :custom="true" fadeIn >
			<view class="tui-modal-custom">
				<input  placeholder="请输入相册名称" class="tui-modal-input"  v-model="title" />
				        <view class="uni-list">
				            <view class="uni-list-cell">
				                <view class="uni-list-cell-db">
				                    
				                </view>
				            </view>
				        </view>
				<view class="tui-box-upload">
					<tui-upload :value="value" :serverUrl="serverUrl" @complete="result" @remove="remove"></tui-upload>
					<view style="text-align: center;font-size: 12px;">上传相册封面</view>
				</view>
				<tui-button height="72rpx" :size="28" shape="circle" @click="handleClick3">保存</tui-button>
			</view>
		</tui-modal>
		<tui-modal :show="editplot" @cancel="hide9" :custom="true" fadeIn >
			<view class="tui-modal-custom">
				<input  placeholder="请输入标题" class="tui-modal-input"  v-model="title" />
				<textarea  placeholder="请输入内容" class="tui-modal-input"  v-model="textarea" />
				<view class="tui-box-upload">
					<tui-upload :value="value" :serverUrl="serverUrl" @complete="result" @remove="remove"></tui-upload>
				</view>
				<tui-button height="72rpx" :size="28" shape="circle" @click="handleClick9">保存</tui-button>
			</view>
		</tui-modal>
	</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';


const cityData = require('@/utils/index.list.js')
// 缓存最多页数
const MAX_CACHE_PAGEINDEX = 3;
// 缓存页签数量
const MAX_CACHE_PAGE = 3;

export default {
	components: {
		tNewsItem,
		tuiIcon,
		tuiButton,
		tuiTabs,
		tuiTimeAxis,
		tuiTimeaxisItem,
		tuiCard,
		tuiModal,
		tuiUpload,
		txl,
		tRtPopup
	},
	computed: {
		startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        },
		last() {
			return function(data, index) {
				return data.length - 1 == index ? true : false
			}
		}
	},
	data() {
		const currentDate = this.getDate({
		            format: true
		        })
		return {
			inputShowed: false, // 输入框是否显示
			inputVal: '', // 搜索框输入的内容
			searchResult: [], // 搜索结果
			title: 'picker',
			date: '请选择日期',
			backgroundColor:"#C74547",
			bottom: 100,
			isIos: false,
			newsList: [],
			cacheTab: [],
			tabIndex: 0,
			datas: [{
			        "employeeId": "test1",
			                "employeeName": "q冰冰",
			                "companyId": "1",
			                "companyName": "test company",
			                "departmentId": "testdeptid",
			                "departmentName": "test dept",
			                "postId": "testpostid",
			                "postName": "testpost",
							"IMGphoto":"../../../../../static/img/shop/1.jpg"
			    },{
			        "employeeId": "test1",
			                "employeeName": "w冰冰",
			                "companyId": "1",
			                "companyName": "test company",
			                "departmentId": "testdeptid",
			                "departmentName": "test dept",
			                "postId": "testpostid",
			                "postName": "testpost",
							"IMGphoto":"../../../../../static/img/shop/1.jpg"
			    },{
			        "employeeId": "test1",
			                "employeeName": "e冰冰",
			                "companyId": "1",
			                "companyName": "test company",
			                "departmentId": "testdeptid",
			                "departmentName": "test dept",
			                "postId": "testpostid",
			                "postName": "testpost",
							"IMGphoto":"../../../../../static/img/shop/1.jpg"
			    },{
			        "employeeId": "test1",
			                "employeeName": "r冰冰",
			                "companyId": "1",
			                "companyName": "test company",
			                "departmentId": "testdeptid",
			                "departmentName": "test dept",
			                "postId": "testpostid",
			                "postName": "testpost",
							"IMGphoto":"../../../../../static/img/shop/1.jpg"
			    },{
			        "employeeId": "test1",
			                "employeeName": "t冰冰",
			                "companyId": "1",
			                "companyName": "test company",
			                "departmentId": "testdeptid",
			                "departmentName": "test dept",
			                "postId": "testpostid",
			                "postName": "testpost",
							"IMGphoto":"../../../../../static/img/shop/1.jpg"
			    },{
			        "employeeId": "test1",
			                "employeeName": "y冰冰",
			                "companyId": "1",
			                "companyName": "test company",
			                "departmentId": "testdeptid",
			                "departmentName": "test dept",
			                "postId": "testpostid",
			                "postName": "testpost",
							"IMGphoto":"../../../../../static/img/shop/1.jpg"
			    },{
			        "employeeId": "test1",
			                "employeeName": "u冰冰",
			                "companyId": "1",
			                "companyName": "test company",
			                "departmentId": "testdeptid",
			                "departmentName": "test dept",
			                "postId": "testpostid",
			                "postName": "testpost",
							"IMGphoto":"../../../../../static/img/shop/1.jpg"
			    },{
			        "employeeId": "test1",
			                "employeeName": "i冰冰",
			                "companyId": "1",
			                "companyName": "test company",
			                "departmentId": "testdeptid",
			                "departmentName": "test dept",
			                "postId": "testpostid",
			                "postName": "testpost",
							"IMGphoto":"../../../../../static/img/shop/1.jpg"
			    },{
			        "employeeId": "test1",
			                "employeeName": "o冰冰",
			                "companyId": "1",
			                "companyName": "test company",
			                "departmentId": "testdeptid",
			                "departmentName": "test dept",
			                "postId": "testpostid",
			                "postName": "testpost",
							"IMGphoto":"../../../../../static/img/shop/1.jpg"
			    },{
			        "employeeId": "test1",
			                "employeeName": "p冰冰",
			                "companyId": "1",
			                "companyName": "test company",
			                "departmentId": "testdeptid",
			                "departmentName": "test dept",
			                "postId": "testpostid",
			                "postName": "testpost",
							"IMGphoto":"../../../../../static/img/shop/1.jpg"
			    },{
			        "employeeId": "test1",
			                "employeeName": "a冰冰",
			                "companyId": "1",
			                "companyName": "test company",
			                "departmentId": "testdeptid",
			                "departmentName": "test dept",
			                "postId": "testpostid",
			                "postName": "testpost",
							"IMGphoto":"../../../../../static/img/shop/1.jpg"
			    },{
			        "employeeId": "test1",
			                "employeeName": "s冰冰",
			                "companyId": "1",
			                "companyName": "test company",
			                "departmentId": "testdeptid",
			                "departmentName": "test dept",
			                "postId": "testpostid",
			                "postName": "testpost",
							"IMGphoto":"../../../../../static/img/shop/1.jpg"
			    },{
			        "employeeId": "test1",
			                "employeeName": "d冰冰",
			                "companyId": "1",
			                "companyName": "test company",
			                "departmentId": "testdeptid",
			                "departmentName": "test dept",
			                "postId": "testpostid",
			                "postName": "testpost",
							"IMGphoto":"../../../../../static/img/shop/1.jpg"
			    },{
			        "employeeId": "test1",
			                "employeeName": "f冰冰",
			                "companyId": "1",
			                "companyName": "test company",
			                "departmentId": "testdeptid",
			                "departmentName": "test dept",
			                "postId": "testpostid",
			                "postName": "testpost",
							"IMGphoto":"../../../../../static/img/shop/1.jpg"
			    },{
			        "employeeId": "test1",
			                "employeeName": "g冰冰",
			                "companyId": "1",
			                "companyName": "test company",
			                "departmentId": "testdeptid",
			                "departmentName": "test dept",
			                "postId": "testpostid",
			                "postName": "testpost",
							"IMGphoto":"../../../../../static/img/shop/1.jpg"
			    },{
			        "employeeId": "test1",
			                "employeeName": "h冰冰",
			                "companyId": "1",
			                "companyName": "test company",
			                "departmentId": "testdeptid",
			                "departmentName": "test dept",
			                "postId": "testpostid",
			                "postName": "testpost",
							"IMGphoto":"../../../../../static/img/shop/1.jpg"
			    },{
			        "employeeId": "test1",
			                "employeeName": "j冰冰",
			                "companyId": "1",
			                "companyName": "test company",
			                "departmentId": "testdeptid",
			                "departmentName": "test dept",
			                "postId": "testpostid",
			                "postName": "testpost",
							"IMGphoto":"../../../../../static/img/shop/1.jpg"
			    },{
			        "employeeId": "test1",
			                "employeeName": "k冰冰",
			                "companyId": "1",
			                "companyName": "test company",
			                "departmentId": "testdeptid",
			                "departmentName": "test dept",
			                "postId": "testpostid",
			                "postName": "testpost",
							"IMGphoto":"../../../../../static/img/shop/1.jpg"
			    },{
			        "employeeId": "test1",
			                "employeeName": "l冰冰",
			                "companyId": "1",
			                "companyName": "test company",
			                "departmentId": "testdeptid",
			                "departmentName": "test dept",
			                "postId": "testpostid",
			                "postName": "testpost",
							"IMGphoto":"../../../../../static/img/shop/1.jpg"
			    },{
			        "employeeId": "test1",
			                "employeeName": "z冰冰",
			                "companyId": "1",
			                "companyName": "test company",
			                "departmentId": "testdeptid",
			                "departmentName": "test dept",
			                "postId": "testpostid",
			                "postName": "testpost",
							"IMGphoto":"../../../../../static/img/shop/1.jpg"
			    },{
			        "employeeId": "test1",
			                "employeeName": "x冰冰",
			                "companyId": "1",
			                "companyName": "test company",
			                "departmentId": "testdeptid",
			                "departmentName": "test dept",
			                "postId": "testpostid",
			                "postName": "testpost",
							"IMGphoto":"../../../../../static/img/shop/1.jpg"
			    },{
			        "employeeId": "test1",
			                "employeeName": "c冰冰",
			                "companyId": "1",
			                "companyName": "test company",
			                "departmentId": "testdeptid",
			                "departmentName": "test dept",
			                "postId": "testpostid",
			                "postName": "testpost",
							"IMGphoto":"../../../../../static/img/shop/1.jpg"
			    },{
			        "employeeId": "test1",
			                "employeeName": "v冰冰",
			                "companyId": "1",
			                "companyName": "test company",
			                "departmentId": "testdeptid",
			                "departmentName": "test dept",
			                "postId": "testpostid",
			                "postName": "testpost",
							"IMGphoto":"../../../../../static/img/shop/1.jpg"
			    },{
			        "employeeId": "test1",
			                "employeeName": "b冰冰",
			                "companyId": "1",
			                "companyName": "test company",
			                "departmentId": "testdeptid",
			                "departmentName": "test dept",
			                "postId": "testpostid",
			                "postName": "testpost",
							"IMGphoto":"../../../../../static/img/shop/1.jpg"
			    },{
			        "employeeId": "test1",
			                "employeeName": "n冰冰",
			                "companyId": "1",
			                "companyName": "test company",
			                "departmentId": "testdeptid",
			                "departmentName": "test dept",
			                "postId": "testpostid",
			                "postName": "testpost",
							"IMGphoto":"../../../../../static/img/shop/1.jpg"
			    },{
			        "employeeId": "test1",
			                "employeeName": "m冰冰",
			                "companyId": "1",
			                "companyName": "test company",
			                "departmentId": "testdeptid",
			                "departmentName": "test dept",
			                "postId": "testpostid",
			                "postName": "testpost",
							"IMGphoto":"../../../../../static/img/shop/1.jpg"
			    }],
			tabBars: [
				{
					name: '首页',
					id: 'hot'
					
				},
				{
					name: '家族树',
					id: 'yule'
				},
				{
					name: '成员',
					id: 'sports'
				}
			],
			tabs: [{
				name: "大事件"
			}, {
				name: "家族园地"
			}, {
				name: "家族荣耀"
			}, {
				name: "家族影像"
			}],
			card: [{
					img: {
						url: "/static/images/news/avatar_1.jpg"
					},
					title: {
						text: "CSDN云计算"
					},
					tag: {
						text: "1小时前"
					},
					header: {
						bgcolor: "#F7F7F7",
						line: true
					}
				},
				{
					img: {
						url: "/static/images/news/avatar_2.jpg",
						width: 80,
						height: 80,
						circle: true
					},
					title: {
						text: "CSDN云计算",
						color: "#ed3f14",
						size: 34
					},
					tag: {
						text: "1小时前",
						color: "#ed3f14",
						size: 28
					}
				},
				{
					img: {
						url: "/static/images/news/avatar_1.jpg",
						circle: true
					},
					title: {
						text: "JavaScript"
					},
					tag: {
						text: "昨天"
					},
					header: {
						line: true,
						bgcolor: "#F7F7F7"
					}
				},
				{
					header: {
						line: true
					}
				}
			],
			fold:true,
			
			textfont:[{
			
			font:"合抱之木，生于毫末；九层之台，起于垒土。实现中华民族伟大复兴是一个长期而艰巨的过程，需要凝聚磅礴之力，才能实现质的飞跃实现中华民族伟大复兴的中国梦汇聚了强。大的中国力量2013年3月17日"
			
			    }],
				dataList: [{
					name: "../../static/img/shop/1.jpg",
					size: 30
				}, {
					name: "../../static/img/shop/1.jpg",
					size: 30
				}, {
					name: "../../static/img/shop/1.jpg",
					size: 30
				}, {
					name: "../../static/img/shop/1.jpg",
					size: 30
				}, {
					name: "../../static/img/shop/1.jpg",
					size: 30
				}, {
					name: "../../static/img/shop/1.jpg",
					size: 30
				}, {
					name: "../../static/img/shop/1.jpg",
					size: 30
				}, {
					name: "../../static/img/shop/1.jpg",
					size: 30
				}, {
					name: "../../static/img/shop/1.jpg",
					size: 30
				}, {
					name: "../../static/img/shop/1.jpg",
					size: 30
				}, {
					name: "../../static/img/shop/1.jpg",
					size: 30
				}, {
					name: "../../static/img/shop/1.jpg",
					size: 30
				}],
			scrollInto: '',
			imageData: [],
			//上传地址
			serverUrl: "https://api.thorui.cn/",
			value:[], //初始化图片
			modal: false,
			currentTab: 0,
			showTips: false,
			navigateFlag: false,
			pulling: false,
			editplot: false,
			editglory: false,
			addalbum: false,
			title: '',
			textarea:''
		};
	},
	onNavigationBarButtonTap(e) {
	        if (e.index === 0) {
	        	this.$refs.rtBubble.toggle();
	        }
	},
	onLoad() {
		const that = this;
		setTimeout(() => {
			this.newsList = this.randomfn();
			uni.getSystemInfo({
				success: res => {
					this.isIos = 'ios' == res.platform.toLocaleLowerCase();
				}
			})
		}, 200);
		setTimeout(()=>{
			//实际开发中图片地址应为网络地址
			this.value=['../../static/img/shop/1.jpg']
		},200)
	},
	methods: {
		rtBubble() {
			this.$refs.rtBubble.toggle();
		},
		open(){
		         this.$refs.popup.open()
		      },
		close(){
		         this.$refs.popup.close()
		      },
		evFunc(data){
		            console.log(data)
		        },
				bindPickerChange: function(e) {
		            console.log('picker发送选择改变，携带值为', e.target.value)
		            this.index = e.target.value
		        },
		        bindDateChange: function(e) {
		            this.date = e.target.value
		        },
		        bindTimeChange: function(e) {
		            this.time = e.target.value
		        },
		        getDate(type) {
		            const date = new Date();
		            let year = date.getFullYear();
		            let month = date.getMonth() + 1;
		            let day = date.getDate();
		
		            if (type === 'start') {
		                year = year - 60;
		            } else if (type === 'end') {
		                year = year + 2;
		            }
		            month = month > 9 ? month : '0' + month;;
		            day = day > 9 ? day : '0' + day;
		            return `${year}-${month}-${day}`;
		        },
		touchMove(e) {
			let pageY = e.changedTouches[0].pageY - this.scrollTop;
			let index = Math.floor((pageY - this.titleHeight) / this.indexBarItemHeight)
			let item = this.lists[index]
			if (item) {
				this.touchmoveIndex = index
			}
		},
		touchEnd() {
			this.touchmove = false;
			this.touchmoveIndex = -1
		},
		touchCancel() {
			this.touchmove = false;
			this.touchmoveIndex = -1
		},
		result: function(e) {
			console.log(e)
			this.imageData = e.imgArr;
		},
		remove: function(e) {
			//移除图片
			console.log(e)
			let index = e.index
		},
		plot() {
			this.editplot = true;
		},
		glory() {
			this.editglory = true;
		},
		album() {
			this.addalbum = true;
		},

		hide2() {
			this.editglory = false;
		},
		hide3() {
			this.addalbum = false;
		},
		hide9() {
			this.editplot = false;
		},
		dele() {
			console.log('删除成功');
		},

		handleClick2() {
			this.hide2();
		},
		handleClick3() {
			this.hide3();
		},
		handleClick9() {
			this.hide9();
		},
		btn:function(){      // 收起 展开
		
		this.fold=!this.fold;
		
		},
		postcard: function() {
			uni.navigateTo({
				url: '/pages/family/postcard/postcard'
			});
		},
		switchfamily: function() {
			uni.navigateTo({
				url: '/pages/family/switch/switch'
			});
		},
		listimage: function() {
			uni.navigateTo({
				url: '/pages/family/listimage/listimage'
			});
		},
		editevent: function() {
			uni.navigateTo({
				url: './editevent'
			});
		},
		change(e) {
			this.currentTab = e.index
		},
		randomfn() {
			let ary = [];
			for (let i = 0, length = this.tabBars.length; i < length; i++) {
				let aryItem = {
					loadingText: '正在加载...',
					refreshing: false,
					refreshText: '',
					data: [],
					isLoading: false,
					pageIndex: 1
				};
				ary.push(aryItem);
			}
			return ary;
		},
		tabClick(e) {
			let index = e.target.dataset.current || e.currentTarget.dataset.current;
			this.switchTab(index);
		},
		tabChange(e) {
			let index = e.target.current || e.detail.current;
			this.switchTab(index);
		},
		switchTab(index) {
			if (this.tabIndex === index) return;
			// 缓存 tabId
			if (this.newsList[this.tabIndex].pageIndex > MAX_CACHE_PAGEINDEX) {
				let isExist = this.cacheTab.indexOf(this.tabIndex);
				if (isExist < 0) {
					this.cacheTab.push(this.tabIndex);
					//console.log("cache index:: " + this.tabIndex);
				}
			}

			this.tabIndex = index;
			let scrollIndex = index - 1 < 0 ? 0 : index - 1;
			this.scrollInto = this.tabBars[scrollIndex].id;

			// 释放 tabId
			if (this.cacheTab.length > MAX_CACHE_PAGE) {
				let cacheIndex = this.cacheTab[0];
				this.clearTabData(cacheIndex);
				this.cacheTab.splice(0, 1);
				//console.log("remove cache index:: " + cacheIndex);
			}
		}
	},
};
</script>

<style>
	@import '../../static/style/thorui.css';
/* #ifndef APP-PLUS */
page {
	width: 100%;
	min-height: 100%;
	display: flex;
}
.container {
		padding-bottom: env(safe-area-inset-bottom);
	}
/* #endif */
page {
		height: 100%;
		overflow: hidden;
	}

	.page {
		height: 100%;
		overflow: hidden;
	}

	.img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.content {
		width: 80%;
		padding-left: 30rpx;
		background: #fff0;
	}

	.title {
		width: 80%;
		font-size: 34rpx;
		padding-bottom: 10rpx;
		color: #333;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis
	}

/*添加图标*/
.add {
	text-align: center;
	width: 80rpx;
	height: 80rpx;
	border-radius:40rpx;
	background: #c77072;
	position: fixed;
	right: 40rpx;
	bottom: 70rpx;
	line-height: 1.3;
	/* #ifdef H5 */
	right: 40rpx;
	bottom: 140rpx;
	line-height: 1.1;
	/* #endif */
}
	
/*家族影像*/
.tui-banner-swiper {
		width: 100%;
		height: 100%;
		position: relative;
	}
.tui-banner-title {
		width: 100%;
		background: #0000005c;
		height: 35px;
		position: absolute;
		z-index: 9999;
		color: #fff;
		bottom: 0;
		font-size: 26rpx;
		font-weight: bold;
		box-sizing: border-box;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.tui-slide-image {
		width: 100%;
		height: 100%;
		display: block;
	}
/*家族荣耀*/

/*家族园地*/

.title {
	font-size: 34rpx;
	color: #333;
	font-weight: 500;
}
.tui-box-upload {
	padding-left: 25rpx;
	box-sizing: border-box;
	margin-bottom: 30rpx;
}
.tui-prompt-title {
	padding-bottom: 20rpx;
	font-size: 34rpx;
}
.tui-modal-input {
	width: 80%;
	border-bottom: 1rpx solid #e6e6e6;
	margin: 30rpx auto 50rpx;
	padding-bottom: 20rpx;
	font-size: 32rpx;
}
.contenfont{position: relative;}

.fold{height:100rpx;overflow: hidden;}

.unfold{height:auto;}

.show{
	width: 100%;
	text-align: center;
}

.tui-title {
		width: 100%;
		padding: 20rpx 20rpx 20rpx 20rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		line-height: 30rpx;
		color: #666;
	}

	.tui-default {
		padding: 20rpx 30rpx;
	}

	.tui-article {
		position: relative;
	}

	.tui-article-img {
		width: 100%;
		height: 300rpx;
		display: block;
	}

	.tui-article-title {
		position: absolute;
		left: 0;
		bottom: 0;
		color: #fff;
		font-size: 32rpx;
		font-weight: 500;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));
	}

	.tui-cell-title {
		font-size: 32rpx;
		font-weight: 500;
		padding: 0 10rpx;
		word-break: break-all;
		word-wrap: break-word;
	}

	.tui-cell-img {
		height: 160rpx;
		width: 160rpx;
	}

	.tui-flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-mr {
		margin-right: 20rpx;
	}


	.tui-flex-pic {
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		background: #fff;
		padding: 0 120rpx;
	}

	.tui-flex-pic image {
		width: 32%;
		margin-bottom: 2%;
	}

	.tui-content {
		padding: 0rpx 30rpx 20rpx 120rpx;
		box-sizing: border-box;
		font-size: 34rpx;
		font-weight: 400;
		color: #333;
	}

	.tui-color-gray {
		color: #ccc;
	}

	.tui-pleft {
		padding-left: 120rpx;
	}
/*大事件*/
.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;
		background: #fff;
		margin-top: 20rpx;
		box-sizing: border-box;
	}

	.tui-order-title {
		padding-bottom: 12rpx;
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}

	.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;
		font-weight: bold;
	}

	.tui-light-gray {
		color: #888 !important;
	}

	.tui-primary {
		color: #5677fc;
	}
/*家族*/
.family-card{
	background-color: #C74547;
	width: 100%;
	height: 250rpx;
	border-radius: 20rpx;
}

.tui-tabs {
	flex: 1;
	flex-direction: column;
	overflow: hidden;
	background-color: #fafafa;
	/* #ifdef MP-ALIPAY || MP-BAIDU */
	height: 100vh;
	/* #endif */
}

.tui-scroll-h {
	width: 100%;
	height: 80rpx;
	background-color: #ffffff;
	color: #000000;
	flex-direction: row;
	/* #ifndef APP-PLUS */
	white-space: nowrap;
	/* #endif */
	/* #ifdef H5 */
	position: fixed;
	left: 0;
	z-index:999;
	/* #endif */
}

.tui-line-h {
	/* #ifdef APP-PLUS */
	height: 1rpx;
	background-color: #cccccc;
	/* #endif */
	position: relative;
}
/* #ifndef APP-PLUS*/
.tui-line-h::after {
	content: '';
	position: absolute;
	border-bottom: 1rpx solid #cccccc;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	bottom: 0;
	right: 0;
	left: 0;
}
/* #endif */

.tui-tab-item {
	/* #ifndef APP-PLUS */
	display: inline-block;
	/* #endif */
	display: inline-block;
	flex-wrap: nowrap;
	padding-left: 34rpx;
	padding-right: 34rpx;
}

.tui-tab-item-title {
	color: #555;
	font-size: 30rpx;
	height: 80rpx;
	line-height: 80rpx;
	flex-wrap: nowrap;
	/* #ifndef APP-PLUS */
	white-space: nowrap;
	/* #endif */
}

.tui-tab-item-title-active {
	color: #C74547;
	font-size: 36rpx;
	font-weight: bold;
	border-bottom-width: 6rpx;
	border-color: #C74547;
	text-align: center;
}

.tui-swiper-box {
	flex: 1 !important;
	/* #ifdef H5 */
	margin-top: 80rpx;
	/* #endif */
}

.tui-swiper-item {
	flex: 1 !important;
	flex-direction: row;
}

.tui-scroll-v {
	flex: 1;
	/* #ifndef MP-ALIPAY */
	flex-direction: column;
	/* #endif */
	width: 750rpx;
}

.tui-update-tips {
	position: absolute;
	left: 0;
	top: 41px;
	right: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: #fddd9b;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.tui-update-tips-text {
	font-size: 14px;
	color: #ffffff;
}

.tui-refresh {
	width: 750rpx;
	height: 64px;
	justify-content: center;
}

.tui-refresh-view {
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
}

.tui-refresh-icon {
	width: 20px;
	height: 20px;
	transition-duration: 0.25s;
	transition-property: transform;
	transform: rotate(0deg);
	transform-origin: 10px 10px;
}

.tui-refresh-icon-active {
	transform: rotate(180deg);
}

.tui-loading-icon {
	width: 20px;
	height: 20px;
	margin-right: 5px;
	color: #999999;
}

.tui-loading-text {
	margin-left: 2px;
	font-size: 14px;
	color: #999999;
}

.tui-loading-more {
	align-items: center;
	justify-content: center;
	padding-top: 15px;
	padding-bottom: 15px;
	text-align: center;
	position: relative;
}
.tui-loadmore-line {
	border-bottom-width: 1rpx;
	border-bottom-style: solid;
	border-bottom-color: #e5e5e5;
	width: 320rpx;
	position: absolute;
	z-index: -1;
}

.tui-loading-more-text {
	padding-left: 8rpx;
	padding-right: 8rpx;
	font-size: 28rpx;
	line-height: 28rpx;
	background-color: #fafafa;
	text-align: center;
	color: #999;
}
</style>