<template>
	<view id="actives">
		<!-- 活动消息推送 -->
		<view class="activity" v-for="(item, index) in actives" :key="index">
			<view class="times">{{item.kd_time}}</view>
			<view class="content">
				<view class="store_name">
					<image :src="item.store_avatar"></image>
					<view>{{item.store_name}}</view>
				</view>
				<view class="xiantiao"></view>
				<view class="title">{{item.title}}</view>
				<view class="images_about" @click="viewLogistics(item)">
					<image :src="item.picture"></image>
					<view>
						<text>{{item.summary}}</text>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="loadStatus" bg-color="#ECECEC" margin-top="20" @loadmore="loadmore" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				actives: [],
				page: 1,
				timer: true,
				loadStatus: 'loadmore'
			};
		},
        onLoad() {
          this.getCartList();  
		},
		onReachBottom() {
			this.loadmore();
		},
		methods: {
			loadmore() {
				if(!this.timer) return false;
				this.loadStatus = "loading";
				this.page++;
				this.getCartList({ load: 'loadmore' }).then(length => {
					if(length == 0) {
						this.page--;
						this.loadStatus = 'nomore';
					} else {
						this.loadStatus = 'loading';
					}
				}).catch(() => {
					this.loadStatus = "nomore";
					this.page--;
				})
			},
            async getCartList({ load = 'reload' } = {}) {
                const res = await this.$u.post("message/orderDeliveryList",{ page: this.page })
				this.timer = true;
				if (res.errCode == 0) {
					if(load == 'reload') {
						this.actives = res.data.data;
						if(res.data.data.length < 12) this.loadStatus = "nomore";
					}
					else if(load == 'loadmore') this.actives.push(...res.data.data);
				}
				return res.data.data.length;
			},
			viewLogistics(item) {
				let url;
				if(item.takeawayer_phone) {
					url = '/pageE/order/Details';
				} else {
					url = '/pageE/order/Logistics';
				}
				this.$u.route(url, {
					oid: item.order_id,
				});
			}
		},
		components:{
		}
	};
</script>

<style lang="scss" >
page{
	background-color: #ECECEC;
}
	#actives{
			height: 100%;
	}
.activity{
	
	.times{
		width:100%;
		font-size:28rpx;
		font-weight:400;
		color:rgba(102,102,102,1);
		text-align: center;
		padding: 39rpx 0 30rpx;
	}
	.content{
		width:630rpx;
		padding: 30rpx;
		background:rgba(255,255,255,1);
		border-radius:20rpx;
		margin: 0 auto;
		overflow: hidden;
		image{
			width: 137rpx;
			height: 140rpx;
			float: left;
		}
		.title{
			font-size:30rpx;
			color:rgba(51,51,51,1);
			padding: 0rpx 0 19rpx;
			font-weight: bold;
		}
		.images_about{
			overflow: hidden;
			text{
				display: table-cell;
				height: 140rpx;
				vertical-align: middle;
				width: 400rpx;
				padding-left: 15rpx;
				line-height: 36rpx;
				font-size: 26rpx;
			}
			view{
				display: inline-block;
				float: left;
				width:430rpx;
				height:140rpx;
				background:rgba(241,241,241,1);
			}
		}
		.content{
		}
		.xiantiao{
			width: 630rpx;
			border-top: 1px #ececec solid;
			margin-left: -30rpx;
			margin-bottom: 20rpx;
		}
		// 店铺
		.store_name{
			overflow: hidden;
			zoom: 1;
			padding: 0rpx 0 20rpx 0;
			image{
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				float: left;
			}
			view{
				font-size:26rpx;
				color:rgba(51,51,51,1);
				float: left;
				display: table-cell;
				line-height: 60rpx;
				display: inline-block;
				margin-left: 21rpx;
			}
		}
	}
}
</style>
