xiaochengxu/pages/BusinessStyle/BusinessStyle.vue

<template>
	<view class="main">
		<view class="back" />
		<u-navbar
			:title="getTitle()"
			:safeAreaInsetTop="true"
			:fixed="true"
			bgColor="#FFFFFF"
			:placeholder="true"
			@leftClick="onBackTouched"
		/>
		<view style="
			position: relative;
			width: 702rpx;
			height: 1360rpx;
			left: 24rpx;
			top: 24rpx;
			border-radius: 20rpx;
		">
			<u-list
				preLoadScreen=0
				height="1360rpx"
			>
				<u-list-item
					v-for="(item,index) in getItemsToShow()" :key="index"
				>
					<view class="rowItem" @click="onTouchOneItem(index)" :key="index">
						<text class="itemTitle">{{item.title}}</text>
						<text class="intro">{{item.titledesc}}</text>
						<text class="time">{{onChangeTime(item.inserttime)}}</text>
						<image :src="item.picurl" class="itemImage" mode="widthFix"></image>
						<u-line color="#E2E2E2" length="662rpx" customStyle="position: absolute;left: 20rpx;border: 1px solid #E2E2E2;" :hairline="true" margin="156rpx 0 0 0"></u-line>
					</view>
				</u-list-item>
			</u-list>
		</view>
	</view>
</template>

<script>
	var mainPageData	= getApp().globalData.mainPageData;
	var Define			= getApp().globalData.Define;
	import { post } from "@/common/api.js"
	import SkipData from "@/common/SkipData.js"
	export default {
		onLoad(args) {
			this.index 	= Number(args.index) ?? 0;
			var isGetted	= mainPageData.isMoreBusinessStyleGot;
			var url			= "pages/newsmorebrandstyle";
			if(this.index == 1){
				url			= "pages/newsmorebusdyna";
				isGetted	= mainPageData.isMoreBusinessDynamicGot;
			}
			if(isGetted){
				return;
			}
			uni.showLoading({
				
			})
			post(url,{
				pagecount : 100,
				pageindex : 1,
				
			}).then(res=>{
				uni.hideLoading();
				var infos	= Define.onNetMessage(res);
				if(!infos){
					return;
				}
				var objs		= [];
				var morenews 	= infos.morenews;
				for(var i = 0;i<morenews.length;i++){
					var da 	= morenews[i];
					var sk	= new SkipData();
					for(var key in da){
						sk[key] = da[key];
					}
					objs.push(sk);
				}
				if(this.index == 0){
					mainPageData.brandstyle = objs;
					mainPageData.isMoreBusinessStyleGot = true;
				}else{
					mainPageData.busdyna	= objs;
					mainPageData.isMoreBusinessDynamicGot	= true;
				}
			});
		},
		data() {
			return {
				index : 0,
				mainPageData,
			};
		},
		methods:{
			getTitle(){
				if(this.index == 0){
					return '品牌风采';
				}
				return '业务动态';
			},
			onBackTouched(){
				uni.navigateBack({
					
				})
			},
			getItemsToShow(){
				if(this.index == 0){
					return this.mainPageData.brandstyle;
				}
				return this.mainPageData.busdyna;
			},
			onTouchOneItem(index){
				var datas 	= this.getItemsToShow();
				var item	= datas[index];
				if(item){
					getApp().globalData.showingSkipData = item;
					uni.navigateTo({
						url:'/pages/SkipView/SkipView'
					})
				}
			},
			///将指定的时间进行转换
			onChangeTime(tm){
				return this.$utils.formatTime(tm);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.rowItem{
		width: 702rpx;
		height: 157rpx;
		position: relative;
		//background-color: #8799A3;
		border-radius: 20rpx;
	}
	.itemTitle{
		width: 471rpx;
		//height: 37rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #333333;
		opacity: 1;
		position: absolute;
		left: 20rpx;
		top: 24rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	
	///每一个简介text的style
	.intro{
		width: 471rpx;
		//height: 33rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		opacity: 1;
		position: absolute;
		left: 20rpx;
		//top: 69rpx;
		bottom: 55rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	
	///每一个简介text的style
	.time{
		width: 212rpx;
		//height: 33rpx;
		font-size: 20rpx;
		font-weight: 400;
		color: #999999;
		opacity: 1;
		position: absolute;
		left: 20rpx;
		//top: 69rpx;
		bottom: 12rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	///每个item的image的style
	.itemImage{
		width: 192rpx;
		height: 109rpx;
		position: absolute;
		top: 30rpx;
		right: 20rpx;
	}
</style>