123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121 |
- <template>
- <view>
- <navbar :config="config" backColor="#666"></navbar>
- <view class="Body">
- <view class="tabBox">
- <view :class="{active:selTabIndex==0}" @click="switchTab(0)">商城订单</view>
- <view :class="{active:selTabIndex==1}" @click="switchTab(1)">集采订单</view>
- <view :class="{active:selTabIndex==2}" @click="switchTab(2)">加盟订单</view>
- </view>
- <view class="minTabBox">
- <view :class="{active:selMinTabIndex==0}" @click="switchMinTab(0)">全部订单</view>
- <view :class="{active:selMinTabIndex==1}" @click="switchMinTab(1)">已付款</view>
- <view :class="{active:selMinTabIndex==2}" @click="switchMinTab(2)">已完成</view>
- <view :class="{active:selMinTabIndex==3}" @click="switchMinTab(3)">已结算</view>
- </view>
- <view class="noDataCls">
- <image src="/static/operationCenter/noData.png" mode=""></image>
- <view>暂无数据!</view>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- config: {
- back: true,
- title: '推广订单',
- color: '#1A1A1A',
- backgroundColor: [1, "#ffffff"],
- statusBarFontColor: 'black',
- },
- selTabIndex: 0,
- selMinTabIndex: 0
- }
- },
- methods: {
- switchTab(index) {
- this.selTabIndex = index
- },
- switchMinTab(index) {
- this.selMinTabIndex = index
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .Body {
- .tabBox {
- display: flex;
- justify-content: space-between;
- padding: 0 30rpx;
- border-bottom: 1rpx solid #E6E6E6;
- >view {
- font-size: 30rpx;
- padding: 22rpx 0;
- color: #1A1A1A;
- position: relative;
- font-weight: 700;
- }
- >.active {
- color: #22A834;
- &::after {
- display: block;
- width: 100%;
- height: 4rpx;
- content: "";
- background: #22A834;
- position: absolute;
- bottom: 0;
- left: 0;
- border-radius: 2rpx;
- }
- }
- }
- .minTabBox {
- display: flex;
- justify-content: space-between;
- padding: 0 20rpx;
- margin-top: 22rpx;
- >view {
- width: 140rpx;
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 14rpx 0;
- color: #333333;
- background: #F2F2F2;
- border-radius: 30rpx;
- font-size: 26rpx;
- position: relative;
- }
- >.active {
- color: #FFFFFF;
- background: #22A834;
- }
- }
- }
- .noDataCls{
- text-align: center;
- font-size: 28rpx;
- color: #333333;
- margin-top: 200rpx;
- image{
- width: 300rpx;
- height: 224rpx;
- margin-bottom: 32rpx;
- }
- }
- </style>
|