electron-ban-pai/src/components/newsInformation.vue

<template>
	<div>
		<error-page v-if="showError" @closeError="closeError"></error-page>
		<div v-if="!showError">
			<template v-if="!showDetail">
				<div class="news-box" v-for="(item,index) in dataArr" :key="index" @click="goDetail(index)">
					<img class="news-img" :src="item.Head_Img || '../../static/img/seconds/tu-01.png'" >
					<div class="news-right-box">
						<div>
							<div class="news-content-box">
								<div class="clips1">{{item.Title}}</div>
								<div class="new-time-box">
									<span>{{item.dateyear}}</span>
									<span>{{item.datetime}}</span>
								</div>
							</div>
							<div class="clips3">{{item.Content}}</div>
						</div>
						<div class="news-num-box">
							<img src="../../static/img/kindergartenIntroduce/icon-browse.png">
							<div>{{item.BroweTotal}}人浏览</div>
						</div>
					</div>
				</div>
			</template>
			<newsInformationDetail v-if="showDetail" :dataObj="dataObj" @backNews="backNews"></newsInformationDetail>
			<loading :isShow="showLoading"></loading>
		</div>
	</div>
</template>

<script>
	import newsInformationDetail from '@/components/newsInformationDetail.vue';
	export default {
		components:{
			newsInformationDetail
		},
		name: 'newsInformation',
		data() {
			return {
				showDetail:false,
				dataArr:[],
				dataObj:'',
				showLoading:true,
				showError:false
			}
		},
		methods: {
			closeError(){
				this.showError = false;
			},
			// 查看详情
			goDetail(e) {
				if(this.$storage.get('network')){
					this.showLoading = true;
					this.dataObj = this.dataArr[e];
					this.classnewsdetailsEv(this.dataObj.Guid);
				} else {
					this.showError = true;
				}
			},
			// 继承详情返回事件
			backNews(e){
				this.showDetail = e;
			},
			async getnewsEv() {
				if(this.$storage.get('network')){
					this.showError = false;
					let data = await this.$axios({
						// 调用 serviceAPI
						url: this.$https.getnews,
						methods: "get",
						params: {
							EquipmentID: "yaohaotest001",
						},
					});
					if(data.data.data!=undefined){
						data.data.data.forEach(item=>{
							let obj = {
								BroweTotal: item.BroweTotal,
								Content: item.Content,
								DisplayName: item.DisplayName,
								Guid: item.Guid,
								Head_Img: item.Head_Img,
								dateyear: item.PublishTime.split(' ')[0],
								datetime: item.PublishTime.split(' ')[1],
								Title: item.Title
							}
							this.dataArr.push(obj)
						})
						this.$storage.set('dataArrnew',this.dataArr);
					}
				} else {
					this.dataArr = this.$storage.get('dataArrnew');
					if(this.dataArr==undefined){
						this.showError = true;
					}
				}
				
				this.showLoading = false;
			},
			async classnewsdetailsEv(guid) {
				if(this.$storage.get('network')){
					let data = await this.$axios({
						// 调用 serviceAPI
						url: this.$https.classnewsdetails,
						methods: "get",
						params: {
							EquipmentID: "yaohaotest001",
							Guid:guid
						},
					});
					if(data.data.data!=undefined){
						this.dataObj = data.data.data;
						this.$storage.set('dataObjnew',this.dataObj);
					}
				} else {
					this.dataObj = this.$storage.get('dataObjnew');
				}
				this.showDetail = true;
				this.showLoading = false;
			},
		},
		mounted() {
			this.getnewsEv();
		}
	}
</script>

<style>
</style>