New file |
| | |
| | | <template> |
| | | <!-- 订单列表 --> |
| | | <view> |
| | | <h-tabs |
| | | class="tab" |
| | | :activeIndex="orderStatus" |
| | | @tabClick="tabChange" |
| | | :tabData="tabs" |
| | | :config="{ |
| | | color: '#abb1cc', |
| | | activeColor: '#518EFF', |
| | | underLineColor: '#518EFF', |
| | | underLineHeight: 4, |
| | | fontSize: '28', |
| | | underLineWidth: 60, |
| | | }" |
| | | /> |
| | | <view v-if="this.orderStatus==0"> |
| | | <view class="list"> |
| | | <view class="list-item" v-for="item in 2"> |
| | | <navigator url="./" hover-class="none"> |
| | | <view class="list-header"> |
| | | <text>订单号: 123456789</text> |
| | | <text class="blue">待付款</text> |
| | | </view> |
| | | <view class="list-content"> |
| | | <view class="flex flex-v flex-1"> |
| | | <text class="font-bold font-15">刘亦菲</text> |
| | | <text class="gray">2020-12-23 12:34</text> |
| | | </view> |
| | | <view class="flex justify-between flex-1"> |
| | | <view> |
| | | <view>应付金额</view> |
| | | <view>实付金额</view> |
| | | <view>欠款总额</view> |
| | | </view> |
| | | <view class="right"> |
| | | <view>¥ 233</view> |
| | | <view>¥ 233</view> |
| | | <view>¥ 233</view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </navigator> |
| | | <view class="list-footer"> |
| | | <text class="blue-btn small-btn mr-10">选择</text> |
| | | <text class="blue-btn small-btn">查看详情</text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view v-if="this.orderStatus==1"> |
| | | <view class="list"> |
| | | <navigator url="./" class="list-item" v-for="item in 2"> |
| | | <view class="list-header"> |
| | | <text>订单号: 123456789</text> |
| | | <text class="gray">2020-12-23 12:34</text> |
| | | </view> |
| | | <view class="list-content"> |
| | | <view class="flex flex-v"> |
| | | <view> |
| | | <image src="../../../static/images/order-icon1.png" class="icon"></image> |
| | | <text>Label</text> |
| | | </view> |
| | | <view class="flex align-center mt-10"> |
| | | <image src="../../../static/images/order-icon2.png" class="icon"></image> |
| | | <view> |
| | | <text>肽洁净●小气泡深层管理</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" style="flex: 0 0 70px;"> |
| | | <text class="gray mb-5">90分钟</text> |
| | | <text class="gray mt-5">邝健琼</text> |
| | | <text class="mt-10 blue">待配料</text> |
| | | </view> |
| | | </view> |
| | | <view class="list-footer"> |
| | | <text class="blue-btn small-btn mr-10">选择</text> |
| | | <text class="blue-btn small-btn">查看详情</text> |
| | | </view> |
| | | </navigator> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | import HTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue"; |
| | | export default{ |
| | | components: { |
| | | HTabs |
| | | }, |
| | | data() { |
| | | return { |
| | | tabs:[ |
| | | { |
| | | state: 0, |
| | | name: '订单' |
| | | }, |
| | | { |
| | | state: 1, |
| | | name: '服务单' |
| | | } |
| | | ], |
| | | orderStatus: 0, |
| | | } |
| | | }, |
| | | methods:{ |
| | | tabChange(index){ |
| | | if(this.orderStatus === index){ |
| | | console.log(index) |
| | | return; |
| | | } |
| | | this.orderStatus = index; |
| | | }, |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style> |
| | | page{ |
| | | background: #F6F6F8; |
| | | } |
| | | .tab{ |
| | | background: #FFFFFF; |
| | | } |
| | | .list-item{ |
| | | background: #FFFFFF; |
| | | border-radius: 4px; |
| | | margin: 10px; |
| | | color: #3a3f3f; |
| | | border: 1px solid #EDEAF4; |
| | | padding: 0 10px; |
| | | } |
| | | .list-header{ |
| | | display: flex; |
| | | justify-content: space-between; |
| | | padding: 12px 0; |
| | | font-size: 15px; |
| | | border-bottom: 1px solid #EDEAF4; |
| | | } |
| | | .list-content{ |
| | | display: flex; |
| | | justify-content: space-between; |
| | | padding: 12px 0; |
| | | font-size: 14px; |
| | | line-height: 28px; |
| | | } |
| | | .list-content .icon{ |
| | | width: 16px; |
| | | height: 16px; |
| | | vertical-align: sub; |
| | | margin-right: 10px; |
| | | } |
| | | .list-footer{ |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | padding: 10px 0; |
| | | border-top: 1px solid #EDEAF4; |
| | | } |
| | | </style> |