<template>
    <view
        style="display: flex;flex-direction: column;height: 100vh;background: -webkit-linear-gradient(left,#FEA65F,#FB9440);">
        <!-- 有列表的时候用 :auto='false' 需要你在onload等调用reload方法 -->
        <z-paging ref="paging" v-model="data" @query="queryList" :pagingStyle='styleObject' :auto='true'>

            <view v-for="(item,index) in data" style=" display: flex;flex-direction: column;margin-left: 10px;margin-right: 10px;background: #fff;margin-top: 10px;
				border-radius: 10px;padding: 10px 20px;">

                <view class="item">
                    <text class="item_left">预约单号：</text>
                    <text class="item_rifht">{{item.reserveCode}}</text>
                </view>
                <view class="item">
                    <text class="item_left">菜窖类型：</text>
                    <text class="item_rifht">{{item.affiliationValue}}</text>
                </view>
                <view class="item">
                    <text class="item_left">预约日期：</text>
                    <text class="item_rifht">{{item.reserveDate}}</text>
                </view>
                <view class="item">
                    <text class="item_left">提货门店：</text>
                    <text class="item_rifht">{{item.storeName}}</text>
                </view>
                <view class="item">
                    <text class="item_left">门店地址：</text>
                    <text class="item_rifht">{{item.address}}</text>
                </view>
                <view class="item">
                    <text class="item_left">提&ensp;货&ensp;人：</text>
                    <text class="item_rifht">{{item.userName}}</text>
                </view>
                <view class="item">
                    <text class="item_left">联系电话：</text>
                    <text class="item_rifht">{{item.userPhone}}</text>
                </view>
                <view class="item">
                    <text class="item_left">状&ensp;&ensp;&ensp;&ensp;态：</text>
                    <text class="item_rifht">{{item.stateValue}}</text>
                </view>
                <view style="	display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
                    <text style="color: #999; font-size: 12px;">- {{item.goodss}}</text>
                </view>
            </view>

        </z-paging>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                styleObject: {
                    'padding-top': '10px',
                    'padding-bottom': '10px',
                    'border-radius': '15px',
                    'background': '#f2f2f2'
                },
                data: []
            }
        },
        methods: {
            // 分页的请求
            queryList(pageNo, pageSize) {
                let _this = this
                _this.$api.myOrderListByUserSid({
                    "current": pageNo,
                    "size": pageSize,
                    "params": {
                        "customerSid": getApp().globalData.sid,
                        "state": '0', //0 未提货  1 已提货

                    }
                }).then((resp) => {
                    // 添加数据源
                    this.$refs.paging.complete(resp.records)
                }).catch(e => {
                    // 出错了，点击重试
                    _this.$refs.paging.complete(false);
                })
            },
        }
    }
</script>

<style scoped>
    .item {
        margin-top: 5px;
    }

    .item_left {
        font-size: 14px;
        color: #333;
    }

    .item_rifht {
        font-size: 13px;
        color: #666;
    }
</style>