pet_uni/pages/UserOrderPage/index.vue

<template>
  <view class="body-background" :style="{
		backgroundImage:'url('+staticImage.wallpaperBgImage+')'
		}"></view>
  <HeaderNav title="我的订单" :is-back="true"></HeaderNav>

  <view class="order-screen-top" :style="{
			top:topStyle
		}">
    <view class="order-capsule-container row">
      <view class="order-capsule col-4"
            v-for="(item,index) in screenMenu"
            :class="{active:(item.value === screenCheck)}"
            @click="selectScreen(item)"
      >
        {{ item.name }}
      </view>

    </view>
    <view class="order-screen-container row">
      <view class="order-screen" v-for="(date, index) in dateSelectData" @click="dayActiveToggle(date)" :class="{active:dayActive === date.value}">
        {{ date.title }}
        <view class="order-screen-active">
          <image mode="widthFix" class="img" :src="staticImage.screenActiveImg" />
        </view>
      </view>

      <view class="order-screen-time-container row" @click="showCalendar">
        <view class="order-screen order-screen-time-title">
          {{$u.timeFormat(minDate,'mm/dd')}} - {{$u.timeFormat(maxDate,'mm/dd')}}
        </view>
        <view class="order-screen order-screen-time-buttton-container">
          <view class="order-screen-time-buttton">
            时间
          </view>
        </view>
      </view>

    </view>
  </view>
	<view class="app-wallpaper" :style="{
		backgroundImage:'url('+staticImage.wallpaperBgImage+')'
		}">


		<view class="order-list-container">
			<view class="order-list-item" v-for="(item,index) in orderList">
				<view class="order-card-container row">
					<view class="order-card-container-background col-12"></view>
					<view class="order-card-container-background-main row">
						<view class="order-card-col row" :style="{backgroundImage:'url('+staticImage.orderCardBackground+')'}">
							<view class="order-card-left">
								<image class="img" :src="item.pet_avatar" mode="aspectFill" />
							</view>
							<view class="order-card-right" style="max-width: 65%;">
								<view class="order-card-title" style="">
                  <u-text :text="item.addr"
                          color="#131313" size="32"
                          custom-style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;"></u-text>
                </view>
								<view class="order-card-tag-container row">
									<view class="order-card-tag" v-for="(server, i) in item.services" wx:key="i">{{ server }}</view>
								</view>
								<view class="order-card-day"><text class="card-label">上门：</text>{{item.do_date}} {{ item.do_time }}
								</view>
								<view class="order-card-pay-time"><text class="card-label">下单时间：</text>{{item.create_time}}
								</view>
							</view>
<!--              <view class="" style="padding:20rpx 0;">-->
<!--                <u-text :text="'订单编号: '+item.no"-->
<!--                        color="#131313" size="28"-->
<!--                        custom-style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;"></u-text>-->
<!--              </view>-->
							<view class="order-card-bottom col-12 row">
								<view class="card-button" @click="navTo(`/pages/ChatDetail/index?id=${item.id}`)">
									<MzButton
											title="立即沟通"
											font-color="#3E3221"
											button-color="#F7E1C3"
											button-width="255rpx"></MzButton>
								</view>
								<view class="card-button" @click="navTo('/pages/FeedLog/index?pet_id=' + item.pet_id)">
									<MzButton
											title="喂养档案"
											font-color="#FFFFFF"
											button-color="#4DC3B8"
											button-width="255rpx"></MzButton>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" fontSize="28"
								color="#ACB4B6"
								line
								line-color="#ACB4B6"
								marginBottom="30" marginTop="30" @loadmore="getOrderList()"/>
	</view>
  <uv-calendar ref="calendar" :defaultDate="[]" mode="multiple" title="选择服务日期" color="#4DC3B8" round="40rpx" :minDate="minDate" :maxDate="maxDate" :maxCount="2" monthNum="7">
    <template #footer>
      <MzButton button-color="#4DC3B8" button-width="90%" font-color="#fff" class="row" style="justify-content: center" @click="timeSelect">确定</MzButton>
    </template>
  </uv-calendar>

	<!-- <RightNav></RightNav> -->
</template>

<script>
	import {
		imghost
	} from '@/config/host.js'
	import HeaderNav from '@/components/HeaderNav/Index.vue';
	import FooterNav from '@/components/FooterNav/Index.vue';
	import RightNav from '@/components/RightNav/Index.vue';
	import MzButton from '@/components/MzButton/Index.vue';
	import api from '@/utils/functions.js';
	import {getOrderList} from "@/api/order";
	import log from "@/utils/log";
	export default {
		components: {
			HeaderNav,
			FooterNav,
			RightNav,
			MzButton
		},
    computed:{
      topStyle(){
        return (uni.getStorageSync('sysInfo').sysAndMenuHeight)+'px'
      },
    },
		data() {
			return {
				title: 'Hello',
				loading: true,
				status: 'loadmore',
        screenCheck:'',
        screenMenu:[
          {
            name:'全部',
            value:'',
          },{
            name:'待服务',
            value:'0',
          },{
            name:'已完成',
            value:'2',
          },
        ],
				dateSelectData:[
					{title:"全部", value: 0},
					{title:"今天", value: 1},
					{title:"明天", value: 2},
				],
				staticImage: {
					screenActiveImg: imghost + '/static/image/order-screen-active.png',
					orderCardBackground: imghost + '/static/image/order-card-background.png',
					wallpaperBgImage:imghost +'/static/image/background.png'
				},
				indexBanner: [{
					image: imghost + '/static/image/banner.png',
					url: '',
				}],
				user: {
					avatar: imghost + '/static/image/banner.png',
					nickname: '清晨的风',
					coupons: 221,
					id: 88685
				},
				isTop: false,
				pagePadding: 100,
				petImage: imghost + '/static/image/pet_avatar1.jpeg',
				orderList:[],
				dayActive: 0,
				statusActive: 1,
				page:1,
				is_buy:'',
				start_time:'',
				end_time:'',
        minDate:'',
        maxDate:'',
			}
		},
		onLoad(options) {
			this.screenCheck = options.type;
			this.is_buy = options.is_buy;
      log(options)
		},
		methods: {
      formatDate(date) {
        let waitFormat = new Date(date);
        let year = waitFormat.getFullYear();
        let month = (waitFormat.getMonth() + 1).toString().padStart(2, '0');
        let day = waitFormat.getDate().toString().padStart(2, '0');
        return `${year}-${month}-${day}`;
      },
      initTime(){
        let now = new Date();
        this.maxDate = this.formatDate(now);
        let minDate = now.setMonth(now.getMonth()-6);
        this.minDate = this.formatDate(minDate);

        console.log(this.minDate)
        console.log(this.maxDate)
      },
      timeSelect(e){
        let selected = this.$refs.calendar.selected;
        if(selected.length!==2){
          api.error('请选择开始和结束时间')
          return;
        }
        console.log(selected)
        let date0 = new Date(selected[0]);
        let date1 = new Date(selected[1]);
        if(date0>date1){
          this.start_time = selected[0];
          this.end_time = selected[1];
        }else{
          this.start_time = selected[1];
          this.end_time = selected[0];
        }

        // this.timeListTemp = this.timeList;
        this.page = 1;
        this.orderList = [];
        this.status = "loadmore";

        this.$refs.calendar.confirm();
        this.getOrderList();
      },
      showCalendar(){
        this.$refs.calendar.open();
      },
      selectScreen(item){
        this.screenCheck = item.value;
				this.page = 1;
				this.status = "loadmore";
				this.orderList = [];
				this.getOrderList();
      },
      navTo(url){
        uni.navigateTo({
          url:url
        })
      },
			getOrderList(filter = {
				status: "",
				start_time:  this.start_time,
				end_time: this.end_time,
			}){
				filter.is_worker = 0;
				filter.page = this.page++;
				filter.limit = 5;
				filter.is_buy = this.is_buy;
				if (this.screenCheck !== '') {
					filter.status = this.screenCheck;
				}

				if (this.status === 'nomore') {
					return;
				}
				this.status = 'loading';
        log(filter);
				getOrderList(filter).then(data => {
					if (filter.page === 1){
						this.orderList = data.data;
					}else{
						this.orderList.push(...data.data);
					}

					this.status = data.data.length < filter.limit ? 'nomore' : 'loadmore';
				});
			},
			dayActiveToggle(date){
				this.dayActive = date.value;
				this.page = 1;
				this.orderList = [];
				this.status = "loadmore";

				let currentTime = new Date().getTime();
				let unitDay = 86400000;
				let today = uni.$u.timeFormat(currentTime, 'yyyy-mm-dd');
				let tomorrow = uni.$u.timeFormat(currentTime + unitDay, 'yyyy-mm-dd');
				let acquired = uni.$u.timeFormat(currentTime + unitDay * 2, 'yyyy-mm-dd');
				this.start_time = ['', today, tomorrow][date.value];
				this.end_time = ['', tomorrow, acquired][date.value];
				this.getOrderList();
			},

		},
		onPageScroll(res) {
			if(res.scrollTop <= 20){
				uni.$emit('isTop', true);
			}else{
				uni.$emit('isTop', false);
			}
		},

		mounted() {
			this.getOrderList();
      this.initTime();
		},
		created() {
			this.pagePadding = (api.navHeight().navPaddingTop +
				api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
		}
	}
</script>

<style lang="scss">
	@import './components/index.scss';
</style>