You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
174 lines
4.9 KiB
174 lines
4.9 KiB
<template> |
|
<view class="app-wallpaper" :style="{ |
|
backgroundImage:'url('+staticImage.wallpaperBgImage+')' |
|
}"> |
|
|
|
<view class="order-capsule-container row"> |
|
<view class="order-capsule col-4 active"> |
|
全部 |
|
</view> |
|
<view class="order-capsule col-4"> |
|
待服务 |
|
</view> |
|
<view class="order-capsule col-4"> |
|
已完成 |
|
</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"> |
|
<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'; |
|
export default { |
|
components: { |
|
HeaderNav, |
|
FooterNav, |
|
RightNav, |
|
MzButton |
|
}, |
|
data() { |
|
return { |
|
title: 'Hello', |
|
loading: true, |
|
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', |
|
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: { |
|
navTo(url){ |
|
wx.navigateTo({ |
|
url:url |
|
}) |
|
}, |
|
}, |
|
onPageScroll(res) { |
|
if(res.scrollTop <= 20){ |
|
uni.$emit('isTop', true); |
|
}else{ |
|
uni.$emit('isTop', false); |
|
} |
|
}, |
|
created() { |
|
this.pagePadding = (api.navHeight().navPaddingTop + |
|
api.navHeight().navHeight + (api.navHeight().headerPadding * 2)) |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
@import './components/index.scss'; |
|
</style> |