pet_uni/pages/Index/components/OrderPage/index.vue

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

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

		</view>
		<view class="order-screen-container row">
			<view class="order-screen active">
				全部
				<view class="order-screen-active">
					<image mode="widthFix" class="img" :src="staticImage.screenActiveImg" />
				</view>
			</view>
			<view class="order-screen">
				明天
				<view class="order-screen-active">
					<image mode="widthFix" class="img" :src="staticImage.screenActiveImg" />
				</view>
			</view>
			<view class="order-screen">
				后天
				<view class="order-screen-active">
					<image mode="widthFix" class="img" :src="staticImage.screenActiveImg" />
				</view>
			</view>

			<view class="order-screen-time-container row">
				<view class="order-screen order-screen-time-title">
					05/06-08-03
				</view>
				<view class="order-screen order-screen-time-buttton-container">
					<view class="order-screen-time-buttton">
						时间
					</view>
				</view>
			</view>
			<view class="order-list-container">
				<view class="order-list-item" v-for="item in orderCardList">
					<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="petImage" mode="aspectFill" />
								</view>
								<view class="order-card-right">
									<view class="order-card-title">{{item.title}}</view>
									<view class="order-card-tag-container row">
										<view class="order-card-tag">刷毛</view>
										<view class="order-card-tag">洗澡</view>
									</view>
									<view class="order-card-day"><text class="card-label">上门：</text>{{item.do_time}}
									</view>
									<view class="order-card-pay-time"><text class="card-label">下单时间：</text>{{item.create_time}}
									</view>
								</view>
								<view class="order-card-bottom col-12 row">
                  <view class="card-button" @click="navTo('/pages/ChatDetail/index')">
                    <MzButton
                        title="立即沟通"
                        font-color="#3E3221"
                        button-color="#F7E1C3"
                        button-width="255rpx"></MzButton>
                  </view>
                  <view class="card-button" @click="navTo('/pages/FeedLog/index')">
                    <MzButton
                        title="喂养档案"
                        font-color="#FFFFFF"
                        button-color="#4DC3B8"
                        button-width="255rpx"></MzButton>
                  </view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

	<!-- <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
		},
		data() {
			return {
				title: 'Hello',
				loading: true,
        screenCheck:0,
        screenMenu:[
          {
            name:'全部',
            value:'',
          },{
            name:'待服务',
            value:'1',
          },{
            name:'已完成',
            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'
				},
				isTop: false,
				pagePadding: 100,
				petImage: imghost + '/static/image/pet_avatar1.jpeg',
				orderCardList:[
					{
						title:'成都市武侯区丰德国际4栋...',
						tags:['刷毛','洗澡'],
						do_time:'2023/05/03 15—17时',
						create_time:'2023/03/03 15:23:22',
					},
					{
						title:'成都市武侯区丰德国际4栋...',
						tags:['刷毛','洗澡'],
						do_time:'2023/05/03 15—17时',
						create_time:'2023/03/03 15:23:22',
					},
				],
			}
		},
		onLoad() {

		},
		methods: {
      selectScreen(index){
        this.screenCheck = index;
      },
      navTo(url){
        uni.navigateTo({
          url:url
        })
      },
			getOrderList(page = 1, filter = {
				status: "",
				start_time: "",
				end_time: ""
			}){
				filter.is_worker = this.$store.state.userInfo.store_id ? 1 : 0;
				filter.page = page;
				filter.limit = 10;

				getOrderList(filter).then(data => {
					log(data);
				})
			}
		},
		onPageScroll(res) {
			if(res.scrollTop <= 20){
				uni.$emit('isTop', true);
			}else{
				uni.$emit('isTop', false);
			}
		},
		mounted() {
			this.getOrderList();
		},
		created() {
			this.pagePadding = (api.navHeight().navPaddingTop +
				api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
		}
	}
</script>

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