<template>
		<!-- 有列表的时候用 :auto='false' 需要你在onload等调用reload方法 -->
		<z-paging ref="paging" v-model="data" @query="queryList" :auto='true'>
		
			<view v-for="(item,index) in data" style=" display: flex;flex-direction: column;margin-top: 15px;margin-left: 10px;margin-right: 10px;">
				<!-- <view 
					style="display: flex;flex-direction: column;border:  1px solid #e29a68;width: 100%;border-radius: 20rpx;margin-top: 8px;"
					 @click="detail(item.orderSid)">
				
					<view class="use">
						<image style="width: 70rpx;height: 70rpx;position: absolute;right: 40px;"
							src="../../static/card_line.png"></image>
						<image src="../../static/gift.png" style="width: 30px;height: 30px;padding-left: 6px;"></image>
						<view style="flex: 1;display: flex;flex-direction: column;z-index: 1;">
							<view style="font-size: 14px;padding: 2px;padding-left: 5px;padding-top: 7px;">{{item.code}}
							</view>
						</view>
				
						<view 
							style="flex-shrink: 0;padding: 9px;font-size: 13px;z-index: 1;font-weight: 600;">{{item.reserveDate}}
						</view>
					</view>
					<view
						style="display: flex;flex-direction: column; padding: 10px;border-bottom-left-radius: 20rpx;border-bottom-right-radius: 20rpx;background-color: #fdf0ee;">
						
						<view style="width: 100%;display: flex;flex-direction: row;align-items: center;">
							<text>礼包类型：</text>
							<text>{{item.bagName}}</text>
						</view>
						<view  style="width: 100%;display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
							<text>提货门店：</text>
							<text>{{item.store}}</text>
						</view>
						
					</view>
				</view> -->
				
				<view class="item" :class="{ item2: item.state=='已提货' }"
				style="display: flex;flex-direction: row;padding: 15px 5px;"
				> 
					
					<image src="https://supervise.yxtsoft.com/lpk/image/pack.png" mode="aspectFill" v-show="item.state=='未提货'"
						style="width: 50px;height: 50px;margin-right: 10px;" />
					
					<image src="https://supervise.yxtsoft.com/lpk/image/pack2.png" mode="aspectFill" v-show="item.state=='已提货'"
						style="width: 50px;height: 50px;margin-right: 10px;" />
					
					<view style="	display: flex;flex-direction: column;">
						
						<text style="color: #FE801A; font-size: 18px;">{{item.bagName}}</text>
						
						<view  style="	display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
								<text style="color: #333; font-size: 14px;">卡&ensp;&ensp;&ensp;&ensp;号：</text>
								<text style="color: #333; font-size: 14px;">{{item.code}}</text>
						</view>
						<view  style="	display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
								<text style="color: #333; font-size: 14px;">提货门店：</text>
								<text style="color: #333; font-size: 14px;">{{item.store}}</text>
						</view>
						<view  style="	display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
								<text style="color: #333; font-size: 14px;">提货日期：</text>
								<text style="color: #333; font-size: 14px;">{{item.reserveDate}}</text>
						</view>
						<view  style="	display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
								<text style="color: #333; font-size: 14px;">提&ensp;货&ensp;人：</text>
								<text style="color: #333; font-size: 14px;">{{item.userName}}</text>
						</view>
						<view  style="	display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
								<text style="color: #333; font-size: 14px;">联系电话：</text>
								<text style="color: #333; font-size: 14px;">{{item.userPhone}}</text>
						</view>
						<view  style="	display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
								<text style="color: #333; font-size: 14px;">状&ensp;&ensp;&ensp;&ensp;态：</text>
								<text style="font-size: 14px;"
								:style="{color:(item.state=='未提货'? '#FE8128' : '#333')}">{{item.state}}</text>
						</view>
						<view  style="	display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
								<text style="color: #999; font-size: 12px;">- {{item.goods}}</text>
						</view>
						
						
					</view>
					
					
				</view>
			
			</view>
		
		</z-paging>
		
</template>

<script>
	export default {
		data() {
			return {
				data: []
			}
		},
		onLoad() {
			uni.$on("order", (e) => {
				// 相当与下拉刷新
				this.$refs.paging.reload(true);
			})
		},
		methods: {
			// 分页的请求
			queryList(pageNo, pageSize) {
				let _this = this
				_this.$api.orderListByUserSid({
					"current": pageNo,
					"size": pageSize,
					"params": {
						"userSid": getApp().globalData.sid
					}
				}).then((resp) => {
					// 添加数据源
					this.$refs.paging.complete(resp.records)
				}).catch(e => {
					// 出错了，点击重试
					_this.$refs.paging.complete(false);
				})
			},
			detail(sid) {
				uni.navigateTo({
					url: '/pages/card/card_record_detail?sid=' + sid
				})
			},
		}
	}
</script>

<style>
	.item{
		/* 加载背景图 */
		background-image: url(https://supervise.yxtsoft.com/lpk/image/record_item.png);
		/* 让背景图基于容器大小伸缩 */
		background-size: 100% 100%;
	}
	
	.item2{
		/* 加载背景图 */
		background-image: url(https://supervise.yxtsoft.com/lpk/image/record_item2.png);
		/* 让背景图基于容器大小伸缩 */
		background-size: 100% 100%;
	}
	
	
</style>