<template>
|
<view>
|
<view class="header">
|
<search-bar class="mb-0" placeholder="输入会员姓名、手机号、订单号查询"></search-bar>
|
</view>
|
<view>
|
<h-tabs
|
class="tab"
|
:tabData="tabs"
|
:config="{
|
color: '#abb1cc',
|
activeColor: '#518EFF',
|
underLineColor: '#518EFF',
|
underLineHeight: 4,
|
fontSize: '28',
|
underLineWidth: 60
|
}"
|
/>
|
<view class="list">
|
<navigator url="./serviceOrderDetail" class="list-item" v-for="item in 4">
|
<view class="list-header">
|
<text>订单号: N202012123556</text>
|
<text class="gray">2020-12-15 18:11:01</text>
|
</view>
|
<view class="list-content">
|
<view class="flex flex-v">
|
<view>
|
<image src="../../static/images/order-icon1.png" class="icon"></image>
|
<text>李广</text>
|
</view>
|
<view class="flex mt-10">
|
<image src="../../static/images/order-icon2.png" class="icon" style="padding-top: 3px;"></image>
|
<view>
|
<text>肽补水·无创水光管理</text>
|
<text class="block mt-5">肽补水·无创水光管理</text>
|
</view>
|
</view>
|
<view class="mt-10">
|
<image src="../../static/images/order-icon3.png" class="icon"></image>
|
<text>VIP-2（星海店）</text>
|
</view>
|
|
</view>
|
<view class="flex flex-v right">
|
<text class="gray">90分钟</text>
|
<text class="gray mt-10">莉莉</text>
|
<text class="gray mt-5">雯雯</text>
|
<text class="blue mt-10">待付款</text>
|
</view>
|
</view>
|
<view class="list-footer">
|
<text class="white-btn small-btn">取消</text>
|
<text class="blue-btn small-btn ml-10">开始服务</text>
|
</view>
|
</navigator>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import HTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
|
import searchBar from '../../components/searchBar/index.vue';
|
export default {
|
components: {
|
HTabs,
|
searchBar
|
},
|
data() {
|
return {
|
tabs:[
|
{
|
state: 1,
|
name: '全部'
|
},
|
{
|
state: 2,
|
name: '待预约'
|
},
|
{
|
state: 3,
|
name: '待配料'
|
},
|
{
|
state: 4,
|
name: '待服务'
|
},
|
{
|
state: 5,
|
name: '服务中'
|
},
|
{
|
state: 6,
|
name: '已完成'
|
}
|
],
|
}
|
}
|
}
|
</script>
|
|
<style>
|
page{
|
background: #F6F6F8;
|
}
|
.header{
|
padding: 10px 10px 5px;
|
background: #FFFFFF;
|
}
|
.tab{
|
background: #FFFFFF;
|
border-bottom: 1px solid #EDEAF4;
|
}
|
.list-item{
|
background: #FFFFFF;
|
border-radius: 4px;
|
margin: 10px;
|
color: #3a3f3f;
|
}
|
.list-header{
|
display: flex;
|
justify-content: space-between;
|
padding: 12px 15px;
|
font-size: 15px;
|
border-bottom: 1px solid #EDEAF4;
|
}
|
.list-content{
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 12px 15px;
|
font-size: 14px;
|
}
|
.list-content .icon{
|
width: 16px;
|
height: 16px;
|
vertical-align: sub;
|
margin-right: 10px;
|
}
|
.list-footer{
|
display: flex;
|
justify-content: flex-end;
|
padding: 10px 15px;
|
border-top: 1px solid #EDEAF4;
|
}
|
</style>
|
