13 changed files with 3799 additions and 333 deletions
-
7App.vue
-
2manifest.json
-
4packages/addAddress/addAddress-副本.vue
-
11packages/address/address.vue
-
3pages/index/index.vue
-
329pages/order/order-副本.vue
-
923pages/order/order.vue
-
227pages/order/wodedingdan_daiqueren-副本2.vue
-
349pages/order/wodedingdan_shaixuan-副本.vue
-
BINstatic/icon/filter.png
-
BINstatic/images/nomore.png
-
2275styles/common.css
-
0styles/iconFont.css
@ -0,0 +1,329 @@ |
|||||
|
<template> |
||||
|
<view class="flex-col page"> |
||||
|
<view class="flex-col group_4"> |
||||
|
<view class="flex-col"> |
||||
|
<view class="flex-col section_2"> |
||||
|
<view class="justify-center group_5"> |
||||
|
<text class="text_2">全部</text> |
||||
|
<text class="text_3">待确认</text> |
||||
|
<text class="text_4">评级中</text> |
||||
|
<text class="text_5">待付款</text> |
||||
|
<text class="text_6">待收货</text> |
||||
|
<view class="section_3"> </view> |
||||
|
<image |
||||
|
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497796432960040.png" |
||||
|
class="image_6" |
||||
|
/> |
||||
|
</view> |
||||
|
<view class="section_4"> </view> |
||||
|
</view> |
||||
|
<view class="flex-col group_6"> |
||||
|
<view class="flex-col section_5"> |
||||
|
<view class="justify-between"> |
||||
|
<view class="flex-row group_8"> |
||||
|
<image |
||||
|
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497803048201750.png" |
||||
|
class="image_7" |
||||
|
/> |
||||
|
<image |
||||
|
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497802899488083.png" |
||||
|
class="image_7 image_9" |
||||
|
/> |
||||
|
<text class="text_7">定价</text> |
||||
|
</view> |
||||
|
<text class="text_8">待付款</text> |
||||
|
</view> |
||||
|
<view class="justify-between group_9"> |
||||
|
<view class="flex-row"> |
||||
|
<text>李丽丽</text> |
||||
|
<text class="text_10">15273936409</text> |
||||
|
</view> |
||||
|
<text>共2件</text> |
||||
|
</view> |
||||
|
<view class="group_11"> |
||||
|
<text class="text_12">合计:</text> |
||||
|
<text class="text_13">¥120.00</text> |
||||
|
</view> |
||||
|
<view class="justify-between group_12"> |
||||
|
<text class="text_14">更多</text> |
||||
|
<view class="flex-col items-center text-wrapper"> |
||||
|
<text>付款</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="flex-col section_6"> |
||||
|
<view class="justify-between group_13"> |
||||
|
<view class="flex-row group_14"> |
||||
|
<image |
||||
|
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497802876916797.png" |
||||
|
class="image_10" |
||||
|
/> |
||||
|
<view class="group_15"> |
||||
|
<text class="text_16">全选</text> |
||||
|
<text class="text_17">(已选 x1)</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="flex-row group_16"> |
||||
|
<view class="group_17"> |
||||
|
<text class="text_18">合计</text> |
||||
|
<text class="text_19">:</text> |
||||
|
<text class="text_20">¥ 0</text> |
||||
|
</view> |
||||
|
<view class="flex-col items-center text-wrapper_1"> |
||||
|
<text>合并结算</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="section_7"> </view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return {}; |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="css"> |
||||
|
.image_7 { |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
} |
||||
|
.page { |
||||
|
background-color: #f6f6f6; |
||||
|
width: 100%; |
||||
|
overflow-y: auto; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.group_4 { |
||||
|
flex: 1 1 auto; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
.section_2 { |
||||
|
padding-left: 38rpx; |
||||
|
padding-right: 32rpx; |
||||
|
background-color: rgb(255, 255, 255); |
||||
|
} |
||||
|
.group_6 { |
||||
|
padding-top: 2rpx; |
||||
|
} |
||||
|
.group_5 { |
||||
|
padding: 34rpx 0 14rpx; |
||||
|
} |
||||
|
.section_4 { |
||||
|
align-self: center; |
||||
|
background-color: rgb(231, 162, 63); |
||||
|
border-radius: 4rpx; |
||||
|
width: 68rpx; |
||||
|
height: 8rpx; |
||||
|
} |
||||
|
.section_5 { |
||||
|
padding: 40rpx 30rpx 0 32rpx; |
||||
|
background-color: rgb(255, 255, 255); |
||||
|
} |
||||
|
.section_6 { |
||||
|
margin-top: 828rpx; |
||||
|
padding: 0 32rpx 16rpx; |
||||
|
background-color: rgb(255, 255, 255); |
||||
|
} |
||||
|
.text_2 { |
||||
|
color: rgb(153, 153, 153); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.text_3 { |
||||
|
margin-left: 46rpx; |
||||
|
color: rgb(153, 153, 153); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.text_4 { |
||||
|
margin-left: 44rpx; |
||||
|
color: rgb(153, 153, 153); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.text_5 { |
||||
|
margin-left: 46rpx; |
||||
|
color: rgb(51, 51, 51); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.text_6 { |
||||
|
margin-left: 46rpx; |
||||
|
color: rgb(153, 153, 153); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.section_3 { |
||||
|
margin-left: 36rpx; |
||||
|
margin-top: 4rpx; |
||||
|
background-color: rgb(246, 246, 246); |
||||
|
border-radius: 1rpx; |
||||
|
width: 2rpx; |
||||
|
height: 34rpx; |
||||
|
} |
||||
|
.image_6 { |
||||
|
margin: 4rpx 0 4rpx 32rpx; |
||||
|
width: 36rpx; |
||||
|
height: 32rpx; |
||||
|
} |
||||
|
.group_9 { |
||||
|
margin-top: 30rpx; |
||||
|
color: rgb(51, 51, 51); |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 44rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.group_11 { |
||||
|
margin-top: 20rpx; |
||||
|
align-self: flex-end; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.group_12 { |
||||
|
margin-top: 26rpx; |
||||
|
padding: 32rpx 2rpx 28rpx; |
||||
|
border-top: solid 2rpx rgb(239, 239, 239); |
||||
|
} |
||||
|
.group_13 { |
||||
|
padding: 18rpx 0 36rpx; |
||||
|
} |
||||
|
.section_7 { |
||||
|
align-self: center; |
||||
|
background-color: rgb(0, 0, 0); |
||||
|
border-radius: 4rpx; |
||||
|
width: 196rpx; |
||||
|
height: 8rpx; |
||||
|
} |
||||
|
.group_8 { |
||||
|
color: rgb(153, 153, 153); |
||||
|
font-size: 28rpx; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.text_8 { |
||||
|
color: rgb(234, 43, 43); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.text_12 { |
||||
|
color: rgb(231, 162, 63); |
||||
|
font-size: 24rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 34rpx; |
||||
|
} |
||||
|
.text_13 { |
||||
|
color: rgb(231, 162, 63); |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 600; |
||||
|
line-height: 44rpx; |
||||
|
} |
||||
|
.text_14 { |
||||
|
align-self: center; |
||||
|
color: rgb(153, 153, 153); |
||||
|
font-size: 28rpx; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.text-wrapper { |
||||
|
padding: 10rpx 0; |
||||
|
color: rgb(234, 43, 43); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
border-radius: 32rpx; |
||||
|
width: 160rpx; |
||||
|
height: 64rpx; |
||||
|
border: solid 2rpx rgb(234, 43, 43); |
||||
|
} |
||||
|
.group_14 { |
||||
|
align-self: center; |
||||
|
} |
||||
|
.group_16 { |
||||
|
width: 296rpx; |
||||
|
} |
||||
|
.image_9 { |
||||
|
margin-left: 20rpx; |
||||
|
} |
||||
|
.text_7 { |
||||
|
margin-left: 12rpx; |
||||
|
} |
||||
|
.text_10 { |
||||
|
margin-left: 21rpx; |
||||
|
} |
||||
|
.image_10 { |
||||
|
width: 44rpx; |
||||
|
height: 44rpx; |
||||
|
} |
||||
|
.group_15 { |
||||
|
margin-left: 10rpx; |
||||
|
white-space: nowrap; |
||||
|
height: 40rpx; |
||||
|
} |
||||
|
.group_17 { |
||||
|
align-self: center; |
||||
|
white-space: nowrap; |
||||
|
height: 44rpx; |
||||
|
} |
||||
|
.text-wrapper_1 { |
||||
|
margin-left: 20rpx; |
||||
|
padding: 16rpx 0; |
||||
|
color: rgb(255, 255, 255); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
background-color: rgb(231, 162, 63); |
||||
|
border-radius: 36rpx; |
||||
|
width: 172rpx; |
||||
|
height: 72rpx; |
||||
|
} |
||||
|
.text_16 { |
||||
|
color: rgb(51, 51, 51); |
||||
|
font-size: 28rpx; |
||||
|
line-height: 40rpx; |
||||
|
} |
||||
|
.text_17 { |
||||
|
color: rgb(51, 51, 51); |
||||
|
font-size: 24rpx; |
||||
|
line-height: 34rpx; |
||||
|
} |
||||
|
.text_18 { |
||||
|
color: rgb(51, 51, 51); |
||||
|
font-size: 24rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 34rpx; |
||||
|
} |
||||
|
.text_19 { |
||||
|
color: rgb(119, 119, 119); |
||||
|
font-size: 24rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 34rpx; |
||||
|
} |
||||
|
.text_20 { |
||||
|
color: rgb(209, 161, 28); |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 44rpx; |
||||
|
} |
||||
|
</style> |
||||
@ -1,329 +1,608 @@ |
|||||
<template> |
<template> |
||||
<view class="flex-col page"> |
|
||||
<view class="flex-col group_4"> |
|
||||
<view class="flex-col"> |
|
||||
<view class="flex-col section_2"> |
|
||||
<view class="justify-center group_5"> |
|
||||
<text class="text_2">全部</text> |
|
||||
<text class="text_3">待确认</text> |
|
||||
<text class="text_4">评级中</text> |
|
||||
<text class="text_5">待付款</text> |
|
||||
<text class="text_6">待收货</text> |
|
||||
<view class="section_3"> </view> |
|
||||
<image |
|
||||
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497796432960040.png" |
|
||||
class="image_6" |
|
||||
/> |
|
||||
</view> |
|
||||
<view class="section_4"> </view> |
|
||||
</view> |
|
||||
<view class="flex-col group_6"> |
|
||||
<view class="flex-col section_5"> |
|
||||
<view class="justify-between"> |
|
||||
<view class="flex-row group_8"> |
|
||||
<image |
|
||||
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497803048201750.png" |
|
||||
class="image_7" |
|
||||
/> |
|
||||
<image |
|
||||
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497802899488083.png" |
|
||||
class="image_7 image_9" |
|
||||
/> |
|
||||
<text class="text_7">定价</text> |
|
||||
</view> |
|
||||
<text class="text_8">待付款</text> |
|
||||
</view> |
|
||||
<view class="justify-between group_9"> |
|
||||
<view class="flex-row"> |
|
||||
<text>李丽丽</text> |
|
||||
<text class="text_10">15273936409</text> |
|
||||
</view> |
|
||||
<text>共2件</text> |
|
||||
</view> |
|
||||
<view class="group_11"> |
|
||||
<text class="text_12">合计:</text> |
|
||||
<text class="text_13">¥120.00</text> |
|
||||
</view> |
|
||||
<view class="justify-between group_12"> |
|
||||
<text class="text_14">更多</text> |
|
||||
<view class="flex-col items-center text-wrapper"> |
|
||||
<text>付款</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="flex-col section_6"> |
|
||||
<view class="justify-between group_13"> |
|
||||
<view class="flex-row group_14"> |
|
||||
<image |
|
||||
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497802876916797.png" |
|
||||
class="image_10" |
|
||||
/> |
|
||||
<view class="group_15"> |
|
||||
<text class="text_16">全选</text> |
|
||||
<text class="text_17">(已选 x1)</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="flex-row group_16"> |
|
||||
<view class="group_17"> |
|
||||
<text class="text_18">合计</text> |
|
||||
<text class="text_19">:</text> |
|
||||
<text class="text_20">¥ 0</text> |
|
||||
</view> |
|
||||
<view class="flex-col items-center text-wrapper_1"> |
|
||||
<text>合并结算</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="section_7"> </view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
|
<view> |
||||
|
<!-- tabs选项卡 --> |
||||
|
<view class="lf-flex"> |
||||
|
<view style="width: 84%;"> |
||||
|
<u-tabs |
||||
|
:current="tabIndex" |
||||
|
:list="tabList" |
||||
|
:lineWidth="34" |
||||
|
:scrollable="false" |
||||
|
:itemWidth="100 / tabList.length +'%'" |
||||
|
@change="switchTab" |
||||
|
> |
||||
|
</u-tabs> |
||||
|
</view> |
||||
|
<view class="filter-icon"> |
||||
|
<image src="@/static/icon/filter.png" @click="showFilter = !showFilter"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 筛选 --> |
||||
|
<view class="filter-box" v-if="showFilter"> |
||||
|
<view class="flex-col group_6" > |
||||
|
<view class="flex-col section_5"> |
||||
|
<view class="flex-col"> |
||||
|
<text class="text_7">按收货确认时间</text> |
||||
|
<view class="flex-col group_8"> |
||||
|
<view class="flex-row"> |
||||
|
<view class="flex-col items-center text-wrapper"> |
||||
|
<text>1个月内</text> |
||||
|
</view> |
||||
|
<view class="text-wrapper_1 flex-col items-center"> |
||||
|
<text>3个月内</text> |
||||
|
</view> |
||||
|
<view class="text-wrapper_1 flex-col items-center view_3"> |
||||
|
<text>6个月内</text> |
||||
|
</view> |
||||
|
<view class="text-wrapper_1 flex-col items-center"> |
||||
|
<text>今年</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="flex-row group_10"> |
||||
|
<view class="left-text-wrapper flex-col items-center"> |
||||
|
<text>2021年</text> |
||||
|
</view> |
||||
|
<view class="left-text-wrapper flex-col items-center view_6"> |
||||
|
<text>2020年</text> |
||||
|
</view> |
||||
|
<view class="left-text-wrapper flex-col items-center view_7"> |
||||
|
<text>2019年</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="flex-col group_11"> |
||||
|
<text class="text_15">按送评信息</text> |
||||
|
<view class="flex-row group_12"> |
||||
|
<view class="flex-col items-center text-wrapper_2"> |
||||
|
<text>输入送评人姓名或手机号</text> |
||||
|
</view> |
||||
|
<view class="flex-col items-start text-wrapper_3"> |
||||
|
<text class="text_17">输入标签</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="flex-col group_13"> |
||||
|
<text class="text_18">按送评信息</text> |
||||
|
<view class="flex-col items-start text-wrapper_4"> |
||||
|
<text class="text_19">输入评级编号</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="flex-row group_14"> |
||||
|
<view class="flex-col items-center text-wrapper_5"> |
||||
|
<text>重置</text> |
||||
|
</view> |
||||
|
<view class="flex-col items-center text-wrapper_6"> |
||||
|
<text>确认</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="flex-col items-center group_15"> |
||||
|
<view class="section_6"> </view> |
||||
|
<view class="section_7"> </view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
|
||||
|
<!-- 页面主体滚动区域 --> |
||||
|
<swiper :current="tabIndex" :style="{height: swiperContentHeight}" @change="swiperChange"> |
||||
|
<swiper-item v-for="(tabItem, idx) in tabList" :key="idx" :item-id="tabItem.ident" @touchmove="stopTouchMove"> |
||||
|
<scroll-view |
||||
|
:style="{height: swiperContentHeight, 'padding-top': '30rpx'}" |
||||
|
:scroll-y="true" |
||||
|
:refresher-enabled="true" |
||||
|
:refresher-triggered="tabItem.isRefresher" |
||||
|
@scrolltolower="scrolltolower" |
||||
|
@refresherrefresh="refresherrefresh" |
||||
|
> |
||||
|
<view class="item-box" v-for="(item, index) in tabItem.data" :key="index"> |
||||
|
<view class="flex-col section_5"> |
||||
|
<view class="justify-between"> |
||||
|
<view class="flex-row group_8"> |
||||
|
<image |
||||
|
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497798740970822.png" |
||||
|
class="image_7" |
||||
|
/> |
||||
|
<text class="text_7">在线送评</text> |
||||
|
</view> |
||||
|
<text class="text_8">待确认</text> |
||||
|
</view> |
||||
|
<view class="justify-between group_9"> |
||||
|
<view class="flex-row"> |
||||
|
<text>李丽丽</text> |
||||
|
<text class="text_10">15273936409</text> |
||||
|
</view> |
||||
|
<text>共5件</text> |
||||
|
</view> |
||||
|
<view class="justify-between group_11"> |
||||
|
<text class="text_12">更多</text> |
||||
|
<view class="flex-row"> |
||||
|
<view class="flex-col items-center text-wrapper"> |
||||
|
<text>取消</text> |
||||
|
</view> |
||||
|
<view class="flex-col items-center text-wrapper_1"> |
||||
|
<text>寄送藏品</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 当前tab下没有数据且无分页数据时,显示系统剪辑中 --> |
||||
|
<view class="nomore-box" v-if="tabItem.data.length <= 0 && !tabItem.isPage"> |
||||
|
<image src="@/static/images/nomore.png"></image> |
||||
|
<view>暂无订单记录</view> |
||||
|
</view> |
||||
|
<!-- 加载中和暂无更多显示 --> |
||||
|
<u-loadmore :status="tabItem.status" margin-bottom="20" marginTop="20" v-else></u-loadmore> |
||||
|
<!-- 底部修饰,解决部分机型底部被挡住且padding和margin都不生效的BUG --> |
||||
|
<view class="additional"></view> |
||||
|
</scroll-view> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
|
||||
|
<!-- 轻提示 --> |
||||
|
<u-toast ref="uToast"></u-toast> |
||||
|
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
export default { |
|
||||
data() { |
|
||||
return {}; |
|
||||
}, |
|
||||
}; |
|
||||
|
|
||||
|
export default { |
||||
|
data(){ |
||||
|
let publicKey = { |
||||
|
page: 1, |
||||
|
pageSize: 5, |
||||
|
isPage: true, |
||||
|
status: 'loading', // loading加载,nomore没有更多了 |
||||
|
isRefresher: false, // 下拉刷新状态,默认没有开启下拉 |
||||
|
} |
||||
|
return { |
||||
|
showFilter: false, |
||||
|
tabList: [{ |
||||
|
name: '全部', |
||||
|
ident: 'all', |
||||
|
data: [], |
||||
|
badge: {isDot: false}, |
||||
|
requestFunction: 'getList', |
||||
|
...publicKey |
||||
|
},{ |
||||
|
name: '待确认', |
||||
|
ident: 'video', |
||||
|
data: [], |
||||
|
badge: {isDot: false}, |
||||
|
requestFunction: 'getList', |
||||
|
...publicKey |
||||
|
},{ |
||||
|
name: '评级中', |
||||
|
ident: 'image', |
||||
|
data: [], |
||||
|
badge: {isDot: false}, |
||||
|
requestFunction: 'getList', |
||||
|
...publicKey |
||||
|
},{ |
||||
|
name: '待付款', |
||||
|
ident: 'share', |
||||
|
data: [], |
||||
|
badge: {isDot: false}, |
||||
|
requestFunction: 'getList', |
||||
|
...publicKey |
||||
|
},{ |
||||
|
name: '待收货', |
||||
|
ident: 'short', |
||||
|
data: [], |
||||
|
badge: {isDot: false}, |
||||
|
requestFunction: 'getList', |
||||
|
...publicKey |
||||
|
}], |
||||
|
tabIndex: 4, |
||||
|
scenic: {} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
// 传入对应tab的ident值,在当前tabIndex下是否匹配,匹配上返回true,否则返回false,调用matchTabIdent(par1, par2, ...) |
||||
|
matchTabIdent(){ |
||||
|
let that = this; |
||||
|
return function(){ |
||||
|
let identList = Array.from(arguments); |
||||
|
let hasKey = identList.some(item => that.tabList[that.tabIndex].ident === item); |
||||
|
return hasKey; |
||||
|
} |
||||
|
}, |
||||
|
// 计算获得swiper内容区域剩余高度 |
||||
|
swiperContentHeight(){ |
||||
|
return `calc(100vh - 80rpx - 10rpx)`; |
||||
|
} |
||||
|
}, |
||||
|
onLoad(){ |
||||
|
this.scenic = uni.getStorageSync("scenic_key") || {}; |
||||
|
this[ this.tabList[this.tabIndex].requestFunction ](); // 获取当前tab下的数据列表 |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取数据 |
||||
|
getList(options = {}){ |
||||
|
let tabItem = this.tabList[this.tabIndex]; |
||||
|
|
||||
|
setTimeout(() => { |
||||
|
if(tabItem.page === 1){ |
||||
|
tabItem.data = [1,2,3,4,5] |
||||
|
}else{ |
||||
|
let arr = [Math.random(), Math.random(), Math.random(), Math.random(), Math.random()]; |
||||
|
tabItem.data.push(...arr); |
||||
|
if(tabItem.page === 4){ |
||||
|
tabItem.isPage = false; |
||||
|
tabItem.status = "nomore"; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
if(options.refresher){ |
||||
|
this.$refs.uToast.show({ |
||||
|
title: '刷新成功', |
||||
|
type: 'success' |
||||
|
}); |
||||
|
tabItem.isRefresher = false; |
||||
|
} |
||||
|
}, 800); |
||||
|
}, |
||||
|
// 切换tab |
||||
|
switchTab(current){ |
||||
|
this.tabIndex = current; |
||||
|
// 判断所切换到的tab下是否有数据并且isPage为true,如果没有再请求,否则啥也不干 |
||||
|
let tabItem = this.tabList[this.tabIndex]; |
||||
|
// todo 方法报错... |
||||
|
console.log("tabItem", tabItem, current) |
||||
|
if(tabItem.data.length === 0 && tabItem.isPage){ |
||||
|
this[ tabItem.requestFunction ](); |
||||
|
} |
||||
|
}, |
||||
|
// swiper滑动响应事件 |
||||
|
swiperChange(event){ |
||||
|
// 事件触发类型为触摸时才做处理,否则是因为switchTab方法执行导致的事件回调 |
||||
|
if(event.detail.source === 'touch'){ |
||||
|
this.tabIndex = event.detail.current; |
||||
|
// 判断所切换到的tab下是否有数据并且isPage为true,如果没有再请求,否则啥也不干 |
||||
|
let tabItem = this.tabList[this.tabIndex]; |
||||
|
if(tabItem.data.length === 0 && tabItem.isPage){ |
||||
|
this[ tabItem.requestFunction ](); |
||||
|
} |
||||
|
} |
||||
|
console.log("swiperChange", event); |
||||
|
}, |
||||
|
stopTouchMove(){ |
||||
|
return false; |
||||
|
}, |
||||
|
// 下拉刷新,重新获取页面数据,将状态置回初始值再请求 |
||||
|
refresherrefresh(){ |
||||
|
let tabItem = this.tabList[this.tabIndex]; |
||||
|
tabItem.isRefresher = true; |
||||
|
tabItem.page = 1; |
||||
|
tabItem.isPage = true; |
||||
|
tabItem.status = 'loading'; |
||||
|
tabItem.data = []; |
||||
|
this[tabItem.requestFunction]({refresher: true}); |
||||
|
}, |
||||
|
// 滚动到底部 |
||||
|
scrolltolower(){ |
||||
|
let tabItem = this.tabList[this.tabIndex]; |
||||
|
if(tabItem.isPage){ |
||||
|
tabItem.page++; |
||||
|
this[tabItem.requestFunction](); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
</script> |
</script> |
||||
|
|
||||
<style scoped lang="css"> |
|
||||
.image_7 { |
|
||||
width: 40rpx; |
|
||||
height: 40rpx; |
|
||||
} |
|
||||
.page { |
|
||||
background-color: #f6f6f6; |
|
||||
width: 100%; |
|
||||
overflow-y: auto; |
|
||||
height: 100%; |
|
||||
} |
|
||||
.group_4 { |
|
||||
flex: 1 1 auto; |
|
||||
overflow-y: auto; |
|
||||
} |
|
||||
.section_2 { |
|
||||
padding-left: 38rpx; |
|
||||
padding-right: 32rpx; |
|
||||
background-color: rgb(255, 255, 255); |
|
||||
} |
|
||||
.group_6 { |
|
||||
padding-top: 2rpx; |
|
||||
} |
|
||||
.group_5 { |
|
||||
padding: 34rpx 0 14rpx; |
|
||||
} |
|
||||
.section_4 { |
|
||||
align-self: center; |
|
||||
background-color: rgb(231, 162, 63); |
|
||||
border-radius: 4rpx; |
|
||||
width: 68rpx; |
|
||||
height: 8rpx; |
|
||||
} |
|
||||
.section_5 { |
|
||||
padding: 40rpx 30rpx 0 32rpx; |
|
||||
background-color: rgb(255, 255, 255); |
|
||||
} |
|
||||
.section_6 { |
|
||||
margin-top: 828rpx; |
|
||||
padding: 0 32rpx 16rpx; |
|
||||
background-color: rgb(255, 255, 255); |
|
||||
} |
|
||||
.text_2 { |
|
||||
color: rgb(153, 153, 153); |
|
||||
font-size: 28rpx; |
|
||||
font-weight: 500; |
|
||||
line-height: 40rpx; |
|
||||
white-space: nowrap; |
|
||||
} |
|
||||
.text_3 { |
|
||||
margin-left: 46rpx; |
|
||||
color: rgb(153, 153, 153); |
|
||||
font-size: 28rpx; |
|
||||
font-weight: 500; |
|
||||
line-height: 40rpx; |
|
||||
white-space: nowrap; |
|
||||
} |
|
||||
.text_4 { |
|
||||
margin-left: 44rpx; |
|
||||
color: rgb(153, 153, 153); |
|
||||
font-size: 28rpx; |
|
||||
font-weight: 500; |
|
||||
line-height: 40rpx; |
|
||||
white-space: nowrap; |
|
||||
} |
|
||||
.text_5 { |
|
||||
margin-left: 46rpx; |
|
||||
color: rgb(51, 51, 51); |
|
||||
font-size: 28rpx; |
|
||||
font-weight: 500; |
|
||||
line-height: 40rpx; |
|
||||
white-space: nowrap; |
|
||||
} |
|
||||
.text_6 { |
|
||||
margin-left: 46rpx; |
|
||||
color: rgb(153, 153, 153); |
|
||||
font-size: 28rpx; |
|
||||
font-weight: 500; |
|
||||
line-height: 40rpx; |
|
||||
white-space: nowrap; |
|
||||
} |
|
||||
.section_3 { |
|
||||
margin-left: 36rpx; |
|
||||
margin-top: 4rpx; |
|
||||
background-color: rgb(246, 246, 246); |
|
||||
border-radius: 1rpx; |
|
||||
width: 2rpx; |
|
||||
height: 34rpx; |
|
||||
} |
|
||||
.image_6 { |
|
||||
margin: 4rpx 0 4rpx 32rpx; |
|
||||
width: 36rpx; |
|
||||
height: 32rpx; |
|
||||
} |
|
||||
.group_9 { |
|
||||
margin-top: 30rpx; |
|
||||
color: rgb(51, 51, 51); |
|
||||
font-size: 32rpx; |
|
||||
font-weight: 500; |
|
||||
line-height: 44rpx; |
|
||||
white-space: nowrap; |
|
||||
} |
|
||||
.group_11 { |
|
||||
margin-top: 20rpx; |
|
||||
align-self: flex-end; |
|
||||
white-space: nowrap; |
|
||||
} |
|
||||
.group_12 { |
|
||||
margin-top: 26rpx; |
|
||||
padding: 32rpx 2rpx 28rpx; |
|
||||
border-top: solid 2rpx rgb(239, 239, 239); |
|
||||
} |
|
||||
.group_13 { |
|
||||
padding: 18rpx 0 36rpx; |
|
||||
} |
|
||||
.section_7 { |
|
||||
align-self: center; |
|
||||
background-color: rgb(0, 0, 0); |
|
||||
border-radius: 4rpx; |
|
||||
width: 196rpx; |
|
||||
height: 8rpx; |
|
||||
} |
|
||||
.group_8 { |
|
||||
color: rgb(153, 153, 153); |
|
||||
font-size: 28rpx; |
|
||||
line-height: 40rpx; |
|
||||
white-space: nowrap; |
|
||||
} |
|
||||
.text_8 { |
|
||||
color: rgb(234, 43, 43); |
|
||||
font-size: 28rpx; |
|
||||
font-weight: 500; |
|
||||
line-height: 40rpx; |
|
||||
white-space: nowrap; |
|
||||
} |
|
||||
.text_12 { |
|
||||
color: rgb(231, 162, 63); |
|
||||
font-size: 24rpx; |
|
||||
font-weight: 500; |
|
||||
line-height: 34rpx; |
|
||||
} |
|
||||
.text_13 { |
|
||||
color: rgb(231, 162, 63); |
|
||||
font-size: 32rpx; |
|
||||
font-weight: 600; |
|
||||
line-height: 44rpx; |
|
||||
} |
|
||||
.text_14 { |
|
||||
align-self: center; |
|
||||
color: rgb(153, 153, 153); |
|
||||
font-size: 28rpx; |
|
||||
line-height: 40rpx; |
|
||||
white-space: nowrap; |
|
||||
} |
|
||||
.text-wrapper { |
|
||||
padding: 10rpx 0; |
|
||||
color: rgb(234, 43, 43); |
|
||||
font-size: 28rpx; |
|
||||
font-weight: 500; |
|
||||
line-height: 40rpx; |
|
||||
white-space: nowrap; |
|
||||
border-radius: 32rpx; |
|
||||
width: 160rpx; |
|
||||
height: 64rpx; |
|
||||
border: solid 2rpx rgb(234, 43, 43); |
|
||||
} |
|
||||
.group_14 { |
|
||||
align-self: center; |
|
||||
} |
|
||||
.group_16 { |
|
||||
width: 296rpx; |
|
||||
} |
|
||||
.image_9 { |
|
||||
margin-left: 20rpx; |
|
||||
} |
|
||||
.text_7 { |
|
||||
margin-left: 12rpx; |
|
||||
} |
|
||||
.text_10 { |
|
||||
margin-left: 21rpx; |
|
||||
} |
|
||||
.image_10 { |
|
||||
width: 44rpx; |
|
||||
height: 44rpx; |
|
||||
} |
|
||||
.group_15 { |
|
||||
margin-left: 10rpx; |
|
||||
white-space: nowrap; |
|
||||
height: 40rpx; |
|
||||
} |
|
||||
.group_17 { |
|
||||
align-self: center; |
|
||||
white-space: nowrap; |
|
||||
height: 44rpx; |
|
||||
} |
|
||||
.text-wrapper_1 { |
|
||||
margin-left: 20rpx; |
|
||||
padding: 16rpx 0; |
|
||||
color: rgb(255, 255, 255); |
|
||||
font-size: 28rpx; |
|
||||
font-weight: 500; |
|
||||
line-height: 40rpx; |
|
||||
white-space: nowrap; |
|
||||
background-color: rgb(231, 162, 63); |
|
||||
border-radius: 36rpx; |
|
||||
width: 172rpx; |
|
||||
height: 72rpx; |
|
||||
} |
|
||||
.text_16 { |
|
||||
color: rgb(51, 51, 51); |
|
||||
font-size: 28rpx; |
|
||||
line-height: 40rpx; |
|
||||
} |
|
||||
.text_17 { |
|
||||
color: rgb(51, 51, 51); |
|
||||
font-size: 24rpx; |
|
||||
line-height: 34rpx; |
|
||||
} |
|
||||
.text_18 { |
|
||||
color: rgb(51, 51, 51); |
|
||||
font-size: 24rpx; |
|
||||
font-weight: 500; |
|
||||
line-height: 34rpx; |
|
||||
} |
|
||||
.text_19 { |
|
||||
color: rgb(119, 119, 119); |
|
||||
font-size: 24rpx; |
|
||||
font-weight: 500; |
|
||||
line-height: 34rpx; |
|
||||
} |
|
||||
.text_20 { |
|
||||
color: rgb(209, 161, 28); |
|
||||
font-size: 32rpx; |
|
||||
font-weight: 500; |
|
||||
line-height: 44rpx; |
|
||||
} |
|
||||
|
<style> |
||||
|
/* 修复ios页面左右漂浮BUG */ |
||||
|
page{ |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
</style> |
||||
|
<style scoped lang="scss"> |
||||
|
.filter-icon{ |
||||
|
width: 16%; |
||||
|
height: 34rpx; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
border-left: 2rpx solid #F6F6F6; |
||||
|
image{ |
||||
|
width: 36rpx; |
||||
|
height: 32rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.filter-box{ |
||||
|
position: absolute; |
||||
|
z-index: 9999; |
||||
|
width: 750rpx; |
||||
|
|
||||
|
.text-wrapper_1 { |
||||
|
margin-left: 16rpx; |
||||
|
flex: 1 1 160rpx; |
||||
|
color: rgb(51, 51, 51); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
padding: 14rpx 0; |
||||
|
background-color: rgb(246, 246, 246); |
||||
|
border-radius: 10rpx; |
||||
|
height: 68rpx; |
||||
|
} |
||||
|
.left-text-wrapper { |
||||
|
padding: 14rpx 0; |
||||
|
background-color: rgb(246, 246, 246); |
||||
|
border-radius: 10rpx; |
||||
|
width: 160rpx; |
||||
|
height: 68rpx; |
||||
|
} |
||||
|
.group_6 { |
||||
|
padding-top: 2rpx; |
||||
|
} |
||||
|
.section_5 { |
||||
|
padding: 40rpx 32rpx 50rpx; |
||||
|
background-color: rgb(255, 255, 255); |
||||
|
} |
||||
|
.group_15 { |
||||
|
padding: 506rpx 0 16rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
.group_11 { |
||||
|
margin-top: 50rpx; |
||||
|
} |
||||
|
.group_13 { |
||||
|
margin-top: 50rpx; |
||||
|
} |
||||
|
.group_14 { |
||||
|
margin-top: 50rpx; |
||||
|
} |
||||
|
.section_6 { |
||||
|
background-color: rgb(0, 0, 0); |
||||
|
border-radius: 4rpx; |
||||
|
width: 196rpx; |
||||
|
height: 8rpx; |
||||
|
} |
||||
|
.section_7 { |
||||
|
background-color: rgba(0, 0, 0, 0.5); |
||||
|
width: 750rpx; |
||||
|
height: 528rpx; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
position: absolute; |
||||
|
} |
||||
|
.text_7 { |
||||
|
color: rgb(51, 51, 51); |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 44rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.group_8 { |
||||
|
margin-top: 20rpx; |
||||
|
} |
||||
|
.text_15 { |
||||
|
color: rgb(51, 51, 51); |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 44rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.group_12 { |
||||
|
margin-top: 20rpx; |
||||
|
color: rgb(195, 195, 195); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.text_18 { |
||||
|
color: rgb(51, 51, 51); |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 44rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.text-wrapper_4 { |
||||
|
margin-top: 18rpx; |
||||
|
padding: 12rpx 0; |
||||
|
color: rgb(195, 195, 195); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
border-radius: 10rpx; |
||||
|
border: solid 2rpx rgb(195, 195, 195); |
||||
|
} |
||||
|
.text-wrapper_5 { |
||||
|
padding: 24rpx 0; |
||||
|
flex: 1 1 330rpx; |
||||
|
color: rgb(195, 195, 195); |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 600; |
||||
|
line-height: 44rpx; |
||||
|
white-space: nowrap; |
||||
|
border-radius: 10rpx; |
||||
|
height: 96rpx; |
||||
|
border: solid 2rpx rgb(195, 195, 195); |
||||
|
} |
||||
|
.text-wrapper_6 { |
||||
|
margin-left: 26rpx; |
||||
|
padding: 26rpx 0; |
||||
|
flex: 1 1 330rpx; |
||||
|
color: rgb(255, 255, 255); |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 600; |
||||
|
line-height: 44rpx; |
||||
|
white-space: nowrap; |
||||
|
background-color: rgb(231, 162, 63); |
||||
|
border-radius: 10rpx; |
||||
|
height: 96rpx; |
||||
|
} |
||||
|
.group_10 { |
||||
|
margin-top: 20rpx; |
||||
|
color: rgb(51, 51, 51); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.text-wrapper_2 { |
||||
|
padding: 12rpx 0; |
||||
|
flex: 1 1 auto; |
||||
|
border-radius: 10rpx; |
||||
|
height: 68rpx; |
||||
|
border: solid 2rpx rgb(195, 195, 195); |
||||
|
} |
||||
|
.text-wrapper_3 { |
||||
|
margin-left: 28rpx; |
||||
|
padding: 12rpx 0; |
||||
|
border-radius: 10rpx; |
||||
|
width: 308rpx; |
||||
|
height: 68rpx; |
||||
|
border: solid 2rpx rgb(195, 195, 195); |
||||
|
} |
||||
|
.text_19 { |
||||
|
margin-left: 18rpx; |
||||
|
} |
||||
|
.text-wrapper { |
||||
|
padding: 14rpx 0; |
||||
|
flex: 1 1 160rpx; |
||||
|
color: rgb(255, 255, 255); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
background-color: rgb(231, 162, 63); |
||||
|
border-radius: 10rpx; |
||||
|
height: 68rpx; |
||||
|
} |
||||
|
.view_3 { |
||||
|
margin-left: 14rpx; |
||||
|
} |
||||
|
.view_6 { |
||||
|
margin-left: 16rpx; |
||||
|
} |
||||
|
.view_7 { |
||||
|
margin-left: 14rpx; |
||||
|
} |
||||
|
.text_17 { |
||||
|
margin-left: 18rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.item-box{ |
||||
|
width: 686rpx; |
||||
|
// height: 300rpx; |
||||
|
margin: 0 auto; |
||||
|
background-color: #f6f6f6; |
||||
|
&:nth-child(n+2){ |
||||
|
margin-top: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.section_5 { |
||||
|
padding: 40rpx 32rpx 0; |
||||
|
background-color: rgb(255, 255, 255); |
||||
|
} |
||||
|
.group_9 { |
||||
|
margin-top: 30rpx; |
||||
|
color: rgb(51, 51, 51); |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 44rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.group_11 { |
||||
|
margin-top: 26rpx; |
||||
|
padding: 32rpx 0 28rpx; |
||||
|
border-top: solid 2rpx rgb(239, 239, 239); |
||||
|
} |
||||
|
.group_8 { |
||||
|
color: rgb(153, 153, 153); |
||||
|
font-size: 28rpx; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.text_8 { |
||||
|
color: rgb(43, 102, 234); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.text_12 { |
||||
|
align-self: center; |
||||
|
color: rgb(153, 153, 153); |
||||
|
font-size: 28rpx; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.image_7 { |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
} |
||||
|
.text_7 { |
||||
|
margin-left: 12rpx; |
||||
|
} |
||||
|
.text_10 { |
||||
|
margin-left: 21rpx; |
||||
|
} |
||||
|
.text-wrapper { |
||||
|
padding: 10rpx 0; |
||||
|
color: rgb(153, 153, 153); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
border-radius: 32rpx; |
||||
|
width: 160rpx; |
||||
|
height: 64rpx; |
||||
|
border: solid 2rpx rgb(153, 153, 153); |
||||
|
} |
||||
|
.text-wrapper_1 { |
||||
|
margin-left: 18rpx; |
||||
|
padding: 10rpx 0; |
||||
|
color: rgb(231, 162, 63); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
border-radius: 32rpx; |
||||
|
width: 160rpx; |
||||
|
height: 64rpx; |
||||
|
border: solid 2rpx rgb(231, 162, 63); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.nomore-box{ |
||||
|
width: 686rpx; |
||||
|
height: 500rpx; |
||||
|
margin: 0 auto; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
image{ |
||||
|
width: 434rpx; |
||||
|
height: 260rpx; |
||||
|
} |
||||
|
view{ |
||||
|
text-align: center; |
||||
|
color: #777777; |
||||
|
margin-top: 40rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 解决scroll-view底部padding和margin都不生效贴边的BUG |
||||
|
.additional{ |
||||
|
height: calc( env(safe-area-inset-bottom) + 20rpx ); |
||||
|
height: calc( constant(safe-area-inset-bottom) + 20rpx ); |
||||
|
} |
||||
</style> |
</style> |
||||
@ -0,0 +1,227 @@ |
|||||
|
<template> |
||||
|
<view class="flex-col page"> |
||||
|
<view class="flex-col group_4"> |
||||
|
<view class="flex-col"> |
||||
|
<view class="flex-col section_2"> |
||||
|
<view class="justify-center group_5"> |
||||
|
<text class="text_2">全部</text> |
||||
|
<text class="text_3">待确认</text> |
||||
|
<text class="text_4">评级中</text> |
||||
|
<text class="text_5">待付款</text> |
||||
|
<text class="text_6">待收货</text> |
||||
|
<view class="section_3"> </view> |
||||
|
<image |
||||
|
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497798644145968.png" |
||||
|
class="image_6" |
||||
|
/> |
||||
|
</view> |
||||
|
<view class="section_4"> </view> |
||||
|
</view> |
||||
|
<view class="flex-col group_6"> |
||||
|
<view class="flex-col section_5"> |
||||
|
<view class="justify-between"> |
||||
|
<view class="flex-row group_8"> |
||||
|
<image |
||||
|
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497798740970822.png" |
||||
|
class="image_7" |
||||
|
/> |
||||
|
<text class="text_7">在线送评</text> |
||||
|
</view> |
||||
|
<text class="text_8">待确认</text> |
||||
|
</view> |
||||
|
<view class="justify-between group_9"> |
||||
|
<view class="flex-row"> |
||||
|
<text>李丽丽</text> |
||||
|
<text class="text_10">15273936409</text> |
||||
|
</view> |
||||
|
<text>共5件</text> |
||||
|
</view> |
||||
|
<view class="justify-between group_11"> |
||||
|
<text class="text_12">更多</text> |
||||
|
<view class="flex-row"> |
||||
|
<view class="flex-col items-center text-wrapper"> |
||||
|
<text>取消</text> |
||||
|
</view> |
||||
|
<view class="flex-col items-center text-wrapper_1"> |
||||
|
<text>寄送藏品</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="section_6"> </view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return {}; |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="css"> |
||||
|
.page { |
||||
|
background-color: #f6f6f6; |
||||
|
width: 100%; |
||||
|
overflow-y: auto; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.group_4 { |
||||
|
flex: 1 1 auto; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
.section_2 { |
||||
|
padding-left: 38rpx; |
||||
|
padding-right: 32rpx; |
||||
|
background-color: rgb(255, 255, 255); |
||||
|
} |
||||
|
.group_6 { |
||||
|
padding: 2rpx 0 16rpx; |
||||
|
} |
||||
|
.group_5 { |
||||
|
padding: 34rpx 0 14rpx; |
||||
|
} |
||||
|
.section_4 { |
||||
|
margin-left: 110rpx; |
||||
|
background-color: rgb(231, 162, 63); |
||||
|
border-radius: 4rpx; |
||||
|
width: 68rpx; |
||||
|
height: 8rpx; |
||||
|
} |
||||
|
.section_5 { |
||||
|
padding: 40rpx 32rpx 0; |
||||
|
background-color: rgb(255, 255, 255); |
||||
|
} |
||||
|
.section_6 { |
||||
|
margin-top: 1018rpx; |
||||
|
align-self: center; |
||||
|
background-color: rgb(0, 0, 0); |
||||
|
border-radius: 4rpx; |
||||
|
width: 196rpx; |
||||
|
height: 8rpx; |
||||
|
} |
||||
|
.text_2 { |
||||
|
color: rgb(153, 153, 153); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.text_3 { |
||||
|
margin-left: 46rpx; |
||||
|
color: rgb(51, 51, 51); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.text_4 { |
||||
|
margin-left: 44rpx; |
||||
|
color: rgb(153, 153, 153); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.text_5 { |
||||
|
margin-left: 46rpx; |
||||
|
color: rgb(153, 153, 153); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.text_6 { |
||||
|
margin-left: 46rpx; |
||||
|
color: rgb(153, 153, 153); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.section_3 { |
||||
|
margin-left: 36rpx; |
||||
|
margin-top: 4rpx; |
||||
|
background-color: rgb(246, 246, 246); |
||||
|
border-radius: 1rpx; |
||||
|
width: 2rpx; |
||||
|
height: 34rpx; |
||||
|
} |
||||
|
.image_6 { |
||||
|
margin: 4rpx 0 4rpx 32rpx; |
||||
|
width: 36rpx; |
||||
|
height: 32rpx; |
||||
|
} |
||||
|
.group_9 { |
||||
|
margin-top: 30rpx; |
||||
|
color: rgb(51, 51, 51); |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 44rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.group_11 { |
||||
|
margin-top: 26rpx; |
||||
|
padding: 32rpx 0 28rpx; |
||||
|
border-top: solid 2rpx rgb(239, 239, 239); |
||||
|
} |
||||
|
.group_8 { |
||||
|
color: rgb(153, 153, 153); |
||||
|
font-size: 28rpx; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.text_8 { |
||||
|
color: rgb(43, 102, 234); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.text_12 { |
||||
|
align-self: center; |
||||
|
color: rgb(153, 153, 153); |
||||
|
font-size: 28rpx; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.image_7 { |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
} |
||||
|
.text_7 { |
||||
|
margin-left: 12rpx; |
||||
|
} |
||||
|
.text_10 { |
||||
|
margin-left: 21rpx; |
||||
|
} |
||||
|
.text-wrapper { |
||||
|
padding: 10rpx 0; |
||||
|
color: rgb(153, 153, 153); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
border-radius: 32rpx; |
||||
|
width: 160rpx; |
||||
|
height: 64rpx; |
||||
|
border: solid 2rpx rgb(153, 153, 153); |
||||
|
} |
||||
|
.text-wrapper_1 { |
||||
|
margin-left: 18rpx; |
||||
|
padding: 10rpx 0; |
||||
|
color: rgb(231, 162, 63); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
border-radius: 32rpx; |
||||
|
width: 160rpx; |
||||
|
height: 64rpx; |
||||
|
border: solid 2rpx rgb(231, 162, 63); |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,349 @@ |
|||||
|
<template> |
||||
|
<view class="flex-col page"> |
||||
|
<view class="flex-col group_4"> |
||||
|
<view class="flex-col"> |
||||
|
<view class="flex-col section_2"> |
||||
|
<view class="justify-center group_5"> |
||||
|
<text class="text_2">全部</text> |
||||
|
<text class="text_3">待确认</text> |
||||
|
<text class="text_4">评级中</text> |
||||
|
<text class="text_5">待付款</text> |
||||
|
<text class="text_6">待收货</text> |
||||
|
<view class="section_3"> </view> |
||||
|
<image |
||||
|
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497796432960040.png" |
||||
|
class="image_6" |
||||
|
/> |
||||
|
</view> |
||||
|
<view class="section_4"> </view> |
||||
|
</view> |
||||
|
<view class="flex-col group_6"> |
||||
|
<view class="flex-col section_5"> |
||||
|
<view class="flex-col"> |
||||
|
<text class="text_7">按收货确认时间</text> |
||||
|
<view class="flex-col group_8"> |
||||
|
<view class="flex-row"> |
||||
|
<view class="flex-col items-center text-wrapper"> |
||||
|
<text>1个月内</text> |
||||
|
</view> |
||||
|
<view class="text-wrapper_1 flex-col items-center"> |
||||
|
<text>3个月内</text> |
||||
|
</view> |
||||
|
<view class="text-wrapper_1 flex-col items-center view_3"> |
||||
|
<text>6个月内</text> |
||||
|
</view> |
||||
|
<view class="text-wrapper_1 flex-col items-center"> |
||||
|
<text>今年</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="flex-row group_10"> |
||||
|
<view class="left-text-wrapper flex-col items-center"> |
||||
|
<text>2021年</text> |
||||
|
</view> |
||||
|
<view class="left-text-wrapper flex-col items-center view_6"> |
||||
|
<text>2020年</text> |
||||
|
</view> |
||||
|
<view class="left-text-wrapper flex-col items-center view_7"> |
||||
|
<text>2019年</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="flex-col group_11"> |
||||
|
<text class="text_15">按送评信息</text> |
||||
|
<view class="flex-row group_12"> |
||||
|
<view class="flex-col items-center text-wrapper_2"> |
||||
|
<text>输入送评人姓名或手机号</text> |
||||
|
</view> |
||||
|
<view class="flex-col items-start text-wrapper_3"> |
||||
|
<text class="text_17">输入标签</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="flex-col group_13"> |
||||
|
<text class="text_18">按送评信息</text> |
||||
|
<view class="flex-col items-start text-wrapper_4"> |
||||
|
<text class="text_19">输入评级编号</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="flex-row group_14"> |
||||
|
<view class="flex-col items-center text-wrapper_5"> |
||||
|
<text>重置</text> |
||||
|
</view> |
||||
|
<view class="flex-col items-center text-wrapper_6"> |
||||
|
<text>确认</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="flex-col items-center group_15"> |
||||
|
<view class="section_6"> </view> |
||||
|
<view class="section_7"> </view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return {}; |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="css"> |
||||
|
.text-wrapper_1 { |
||||
|
margin-left: 16rpx; |
||||
|
flex: 1 1 160rpx; |
||||
|
color: rgb(51, 51, 51); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
padding: 14rpx 0; |
||||
|
background-color: rgb(246, 246, 246); |
||||
|
border-radius: 10rpx; |
||||
|
height: 68rpx; |
||||
|
} |
||||
|
.left-text-wrapper { |
||||
|
padding: 14rpx 0; |
||||
|
background-color: rgb(246, 246, 246); |
||||
|
border-radius: 10rpx; |
||||
|
width: 160rpx; |
||||
|
height: 68rpx; |
||||
|
} |
||||
|
.page { |
||||
|
background-color: #f6f6f6; |
||||
|
width: 100%; |
||||
|
overflow-y: auto; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.group_4 { |
||||
|
flex: 1 1 auto; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
.section_2 { |
||||
|
padding-left: 38rpx; |
||||
|
padding-right: 32rpx; |
||||
|
background-color: rgb(255, 255, 255); |
||||
|
} |
||||
|
.group_6 { |
||||
|
padding-top: 2rpx; |
||||
|
} |
||||
|
.group_5 { |
||||
|
padding: 34rpx 0 14rpx; |
||||
|
} |
||||
|
.section_4 { |
||||
|
margin-right: 114rpx; |
||||
|
align-self: flex-end; |
||||
|
background-color: rgb(231, 162, 63); |
||||
|
border-radius: 4rpx; |
||||
|
width: 68rpx; |
||||
|
height: 8rpx; |
||||
|
} |
||||
|
.section_5 { |
||||
|
padding: 40rpx 32rpx 50rpx; |
||||
|
background-color: rgb(255, 255, 255); |
||||
|
} |
||||
|
.group_15 { |
||||
|
padding: 506rpx 0 16rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
.text_2 { |
||||
|
color: rgb(153, 153, 153); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.text_3 { |
||||
|
margin-left: 46rpx; |
||||
|
color: rgb(153, 153, 153); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.text_4 { |
||||
|
margin-left: 44rpx; |
||||
|
color: rgb(153, 153, 153); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.text_5 { |
||||
|
margin-left: 46rpx; |
||||
|
color: rgb(153, 153, 153); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.text_6 { |
||||
|
margin-left: 46rpx; |
||||
|
color: rgb(51, 51, 51); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.section_3 { |
||||
|
margin-left: 36rpx; |
||||
|
margin-top: 4rpx; |
||||
|
background-color: rgb(246, 246, 246); |
||||
|
border-radius: 1rpx; |
||||
|
width: 2rpx; |
||||
|
height: 34rpx; |
||||
|
} |
||||
|
.image_6 { |
||||
|
margin: 4rpx 0 4rpx 32rpx; |
||||
|
width: 36rpx; |
||||
|
height: 32rpx; |
||||
|
} |
||||
|
.group_11 { |
||||
|
margin-top: 50rpx; |
||||
|
} |
||||
|
.group_13 { |
||||
|
margin-top: 50rpx; |
||||
|
} |
||||
|
.group_14 { |
||||
|
margin-top: 50rpx; |
||||
|
} |
||||
|
.section_6 { |
||||
|
background-color: rgb(0, 0, 0); |
||||
|
border-radius: 4rpx; |
||||
|
width: 196rpx; |
||||
|
height: 8rpx; |
||||
|
} |
||||
|
.section_7 { |
||||
|
background-color: rgba(0, 0, 0, 0.5); |
||||
|
width: 750rpx; |
||||
|
height: 528rpx; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
position: absolute; |
||||
|
} |
||||
|
.text_7 { |
||||
|
color: rgb(51, 51, 51); |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 44rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.group_8 { |
||||
|
margin-top: 20rpx; |
||||
|
} |
||||
|
.text_15 { |
||||
|
color: rgb(51, 51, 51); |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 44rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.group_12 { |
||||
|
margin-top: 20rpx; |
||||
|
color: rgb(195, 195, 195); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.text_18 { |
||||
|
color: rgb(51, 51, 51); |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 44rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.text-wrapper_4 { |
||||
|
margin-top: 18rpx; |
||||
|
padding: 12rpx 0; |
||||
|
color: rgb(195, 195, 195); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
border-radius: 10rpx; |
||||
|
border: solid 2rpx rgb(195, 195, 195); |
||||
|
} |
||||
|
.text-wrapper_5 { |
||||
|
padding: 24rpx 0; |
||||
|
flex: 1 1 330rpx; |
||||
|
color: rgb(195, 195, 195); |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 600; |
||||
|
line-height: 44rpx; |
||||
|
white-space: nowrap; |
||||
|
border-radius: 10rpx; |
||||
|
height: 96rpx; |
||||
|
border: solid 2rpx rgb(195, 195, 195); |
||||
|
} |
||||
|
.text-wrapper_6 { |
||||
|
margin-left: 26rpx; |
||||
|
padding: 26rpx 0; |
||||
|
flex: 1 1 330rpx; |
||||
|
color: rgb(255, 255, 255); |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 600; |
||||
|
line-height: 44rpx; |
||||
|
white-space: nowrap; |
||||
|
background-color: rgb(231, 162, 63); |
||||
|
border-radius: 10rpx; |
||||
|
height: 96rpx; |
||||
|
} |
||||
|
.group_10 { |
||||
|
margin-top: 20rpx; |
||||
|
color: rgb(51, 51, 51); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.text-wrapper_2 { |
||||
|
padding: 12rpx 0; |
||||
|
flex: 1 1 auto; |
||||
|
border-radius: 10rpx; |
||||
|
height: 68rpx; |
||||
|
border: solid 2rpx rgb(195, 195, 195); |
||||
|
} |
||||
|
.text-wrapper_3 { |
||||
|
margin-left: 28rpx; |
||||
|
padding: 12rpx 0; |
||||
|
border-radius: 10rpx; |
||||
|
width: 308rpx; |
||||
|
height: 68rpx; |
||||
|
border: solid 2rpx rgb(195, 195, 195); |
||||
|
} |
||||
|
.text_19 { |
||||
|
margin-left: 18rpx; |
||||
|
} |
||||
|
.text-wrapper { |
||||
|
padding: 14rpx 0; |
||||
|
flex: 1 1 160rpx; |
||||
|
color: rgb(255, 255, 255); |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
white-space: nowrap; |
||||
|
background-color: rgb(231, 162, 63); |
||||
|
border-radius: 10rpx; |
||||
|
height: 68rpx; |
||||
|
} |
||||
|
.view_3 { |
||||
|
margin-left: 14rpx; |
||||
|
} |
||||
|
.view_6 { |
||||
|
margin-left: 16rpx; |
||||
|
} |
||||
|
.view_7 { |
||||
|
margin-left: 14rpx; |
||||
|
} |
||||
|
.text_17 { |
||||
|
margin-left: 18rpx; |
||||
|
} |
||||
|
</style> |
||||
|
After Width: 36 | Height: 32 | Size: 1.1 KiB |
|
After Width: 434 | Height: 260 | Size: 28 KiB |
2275
styles/common.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
Write
Preview
Loading…
Cancel
Save
Reference in new issue