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.
788 lines
20 KiB
788 lines
20 KiB
<template>
|
|
<view>
|
|
<!-- tabs选项卡 -->
|
|
<view class="lf-flex">
|
|
<view style="width: 84%;">
|
|
<u-tabs
|
|
:current="tabIndex"
|
|
:list="tabList"
|
|
:lineWidth="34"
|
|
:scrollable="false"
|
|
:itemWidth="100 / tabList.length +'%'"
|
|
lineColor="#E7A23F"
|
|
@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="lf-flex lf-flex-wrap">
|
|
<view class="filter-date-item" :class="{active: filterGather.date == item.value}" @click="selectReceivingTime(item)" v-for="(item, index) in receivingTimeList" :key="index">{{ item.label }}</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">
|
|
<u-input v-model="filterGather.name" placeholder="输入送评人姓名或手机号"></u-input>
|
|
</view>
|
|
<view class="flex-col items-start text-wrapper_3">
|
|
<u-input v-model="filterGather.label" placeholder="输入标签"></u-input>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex-col group_13">
|
|
<text class="text_18">按送评信息</text>
|
|
<view class="flex-col items-start text-wrapper_4">
|
|
<u-input v-model="filterGather.order_num" placeholder="输入评级编号" class="text-wrapper_4-input" ></u-input>
|
|
</view>
|
|
</view>
|
|
<view class="flex-row group_14">
|
|
<view class="flex-col items-center text-wrapper_5" @click="reset">
|
|
<text>重置</text>
|
|
</view>
|
|
<view class="flex-col items-center text-wrapper_6" @click="confirm">
|
|
<text>确认</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex-col items-center group_15" @click="showFilter = false">
|
|
<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">
|
|
<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" @click="$url('/packages/sonpingDetail/sonpingDetail?id='+ item.id)">
|
|
<view class="flex-col section_5">
|
|
<view class="justify-between">
|
|
<view class="flex-row group_8">
|
|
<image :src="showOrderStatusIcon(item.status)" class="image_7" />
|
|
<text class="text_7">{{ ['在线送评','确认收货','定价','发货'][item.status-1] }}</text>
|
|
</view>
|
|
<text class="text_8" :style="{color: item.status_text_color}">{{ item.status_text }}</text>
|
|
</view>
|
|
<view class="justify-between group_9">
|
|
<view class="flex-row">
|
|
<text>{{ item.owner }}</text>
|
|
<text class="text_10">{{ item.tel }}</text>
|
|
</view>
|
|
<text>共{{ item.num }}件</text>
|
|
</view>
|
|
<view class="justify-between group_11">
|
|
<!-- <text class="text_12">更多</text> -->
|
|
<text class="text_12"></text>
|
|
<view class="flex-row" v-if="item.status == 1">
|
|
<view class="flex-col items-center text-wrapper" @click.stop="orderCancel(item)">
|
|
<text>取消</text>
|
|
</view>
|
|
<view class="flex-col items-center text-wrapper_1" @click.stop="orderSend(item)">
|
|
<text>寄送藏品</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex-row" v-else-if="item.status == 2">
|
|
<view class="flex-col items-center text-wrapper" @click.stop="clickIndex = index, $url('/packages/address/address?is_select=1')">
|
|
<text>更改地址</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex-row" v-else-if="item.status == 3">
|
|
<view class="flex-col items-center text-wrapper_1" style="border-color: #EA2B2B; color: #EA2B2B;" @click.stop="orderPay(item)">
|
|
<text>付款</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex-row" v-else-if="item.status == 4">
|
|
<view class="flex-col items-center text-wrapper_1" @click.stop="orderConfirm(item)">
|
|
<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>
|
|
|
|
<script>
|
|
import { orderList, cancelOrder, confirmOrder, doPay, changOrderAddress } from '@/service/order.js';
|
|
import orderStatus1 from '@/static/icon/order_status1.png';
|
|
import orderStatus2 from '@/static/icon/order_status2.png';
|
|
import orderStatus3 from '@/static/icon/order_status3.png';
|
|
import orderStatus4 from '@/static/icon/order_status4.png';
|
|
|
|
export default {
|
|
data(){
|
|
let publicKey = {
|
|
page: 1,
|
|
pageSize: 10,
|
|
isPage: true,
|
|
status: 'loading', // loading加载，nomore没有更多了
|
|
isRefresher: false, // 下拉刷新状态，默认没有开启下拉
|
|
}
|
|
return {
|
|
showFilter: false,
|
|
tabList: [{
|
|
name: '全部',
|
|
ident: 'all',
|
|
type: 0,
|
|
data: [],
|
|
badge: {isDot: false},
|
|
requestFunction: 'getList',
|
|
...publicKey
|
|
},{
|
|
name: '待确认',
|
|
ident: 'waitconfirm',
|
|
type: 1,
|
|
data: [],
|
|
badge: {isDot: false},
|
|
requestFunction: 'getList',
|
|
...publicKey
|
|
},{
|
|
name: '评级中',
|
|
ident: 'gradeing',
|
|
type: 2,
|
|
data: [],
|
|
badge: {isDot: false},
|
|
requestFunction: 'getList',
|
|
...publicKey
|
|
},{
|
|
name: '待付款',
|
|
ident: 'waitpay',
|
|
type: 3,
|
|
data: [],
|
|
badge: {isDot: false},
|
|
requestFunction: 'getList',
|
|
...publicKey
|
|
},{
|
|
name: '待收货',
|
|
ident: 'waitreceiv',
|
|
type: 4,
|
|
data: [],
|
|
badge: {isDot: false},
|
|
requestFunction: 'getList',
|
|
...publicKey
|
|
}],
|
|
tabIndex: 0,
|
|
receivingTimeList: [{
|
|
label: '1个月内',
|
|
value: '1'
|
|
},{
|
|
label: '3个月内',
|
|
value: '2'
|
|
},{
|
|
label: '6个月内',
|
|
value: '3'
|
|
},{
|
|
label: '今年',
|
|
value: '4'
|
|
},{
|
|
label: '2021年',
|
|
value: '5'
|
|
},{
|
|
label: '2020年',
|
|
value: '6'
|
|
},{
|
|
label: '2019年',
|
|
value: '7'
|
|
}],
|
|
filterGather: {
|
|
date: '',
|
|
name: '',
|
|
label: '',
|
|
order_num: ''
|
|
},
|
|
clickButton: false,
|
|
address: {},
|
|
clickIndex: 0
|
|
}
|
|
},
|
|
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)`;
|
|
},
|
|
showOrderStatusIcon(){
|
|
return function(status){
|
|
return [orderStatus1, orderStatus2, orderStatus3, orderStatus4][status-1]
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
address(){
|
|
this.orderAddressChange();
|
|
}
|
|
},
|
|
onLoad(options){
|
|
this.tabIndex = Number(options.current || this.tabIndex);
|
|
this[ this.tabList[this.tabIndex].requestFunction ](); // 获取当前tab下的数据列表
|
|
},
|
|
methods: {
|
|
// 获取数据
|
|
getList(options = {}){
|
|
let tabItem = this.tabList[this.tabIndex];
|
|
let filterGather = this.filterGather;
|
|
let data = {
|
|
type: tabItem.type,
|
|
page: tabItem.page,
|
|
pageSize: tabItem.pageSize
|
|
};
|
|
if(filterGather.date){
|
|
data.confirm_type = filterGather.date;
|
|
}
|
|
if(filterGather.name){
|
|
data.name_phone = filterGather.name;
|
|
}
|
|
if(filterGather.label){
|
|
data.label = filterGather.label;
|
|
}
|
|
if(filterGather.order_num){
|
|
data.order_num = filterGather.order_num;
|
|
}
|
|
|
|
orderList(data).then(res => {
|
|
let datas = res.data.datas;
|
|
let isPage = this.$isRight(datas.next_page_url);
|
|
if(!isPage){
|
|
tabItem.isPage = isPage;
|
|
tabItem.status = 'nomore';
|
|
}
|
|
if(tabItem.page == 1){
|
|
tabItem.data = datas.data;
|
|
}else{
|
|
tabItem.data.push(...datas.data);
|
|
}
|
|
|
|
if(options.refresher){
|
|
this.$refs.uToast.show({
|
|
message: '刷新成功',
|
|
type: 'success'
|
|
});
|
|
tabItem.isRefresher = false;
|
|
}
|
|
})
|
|
},
|
|
// 筛选
|
|
confirm(){
|
|
let tabItem = this.tabList[this.tabIndex];
|
|
tabItem.page = 1;
|
|
tabItem.isPage = true;
|
|
tabItem.status = 'loading';
|
|
tabItem.data = [];
|
|
this[tabItem.requestFunction]();
|
|
this.showFilter = false;
|
|
},
|
|
// 重置筛选条件
|
|
reset(){
|
|
this.filterGather = this.$options.data().filterGather;
|
|
this.$refs.uToast.show({
|
|
message: '内容已重置',
|
|
type: 'success'
|
|
});
|
|
},
|
|
// 选择确认收货时间
|
|
selectReceivingTime(item){
|
|
if(this.filterGather.date == item.value){
|
|
this.filterGather.date = "";
|
|
}else{
|
|
this.filterGather.date = item.value;
|
|
}
|
|
},
|
|
// 取消订单
|
|
orderCancel(item){
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '真要取消该订单吗？',
|
|
success: async result => {
|
|
if(result.confirm){
|
|
await cancelOrder(item.order_id);
|
|
this.$refs.uToast.show({
|
|
message: '取消成功',
|
|
type: 'success'
|
|
});
|
|
this.confirm();
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 寄送藏品
|
|
orderSend(item){
|
|
let base_data = encodeURIComponent(JSON.stringify(item));
|
|
this.$url('/pages/write/distribution?base_data='+ base_data);
|
|
},
|
|
// 更改地址
|
|
async orderAddressChange(){
|
|
let order_id = this.tabList[this.tabIndex].data[this.clickIndex].order_id;
|
|
await changOrderAddress({order_id: order_id, addr_id: this.address.id});
|
|
this.$refs.uToast.show({
|
|
message: '地址修改成功',
|
|
type: 'success'
|
|
});
|
|
},
|
|
// 订单付款
|
|
orderPay(item){
|
|
if(this.clickButton) return;
|
|
this.clickButton = true;
|
|
doPay(item.order_id).then(res => {
|
|
console.log("----------------", res);
|
|
let datas = res.data.datas;
|
|
uni.requestPayment({
|
|
provider: 'wxpay',
|
|
timeStamp: datas.timeStamp,
|
|
nonceStr: datas.nonceStr,
|
|
package: datas.package,
|
|
signType: datas.signType,
|
|
paySign: datas.paySign,
|
|
success: res => {
|
|
this.clickButton = false;
|
|
this.$refs.uToast.show({
|
|
message: '支付成功',
|
|
type: 'success'
|
|
});
|
|
this.confirm();
|
|
},
|
|
fail: err => {
|
|
uni.showModal({
|
|
title: '',
|
|
content: 'fail:' + JSON.stringify(err) + '支付失败',
|
|
showCancel: false
|
|
})
|
|
this.clickButton = false;
|
|
}
|
|
})
|
|
}).catch(err => this.clickButton = false)
|
|
},
|
|
// 确认收货
|
|
async orderConfirm(item){
|
|
uni.showModal({
|
|
title:"确认收货",
|
|
content:'确认收到货物并签收？',
|
|
success:async (e) => {
|
|
if(e.confirm){
|
|
await confirmOrder(item.id);
|
|
this.$refs.uToast.show({
|
|
message: '确认收货成功',
|
|
type: 'success'
|
|
});
|
|
this.confirm();
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 切换tab
|
|
switchTab(item){
|
|
this.tabIndex = item.index;
|
|
// 判断所切换到的tab下是否有数据并且isPage为true，如果没有再请求，否则啥也不干
|
|
let tabItem = this.tabList[this.tabIndex];
|
|
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 ]();
|
|
}
|
|
}
|
|
},
|
|
// 下拉刷新，重新获取页面数据，将状态置回初始值再请求
|
|
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>
|
|
|
|
<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_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);
|
|
/deep/.u-input{
|
|
width: 100%;
|
|
}
|
|
}
|
|
.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 );
|
|
}
|
|
|
|
.filter-date-item{
|
|
width: 160rpx;
|
|
height: 68rpx;
|
|
background: #F6F6F6;
|
|
border-radius: 10rpx;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
margin-right: 16rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
&:nth-child(4n){
|
|
margin-right: 0rpx;
|
|
}
|
|
&:nth-child(n+5){
|
|
margin-top: 16rpx;
|
|
}
|
|
&.active{
|
|
color: #FFFFFF;
|
|
background-color: #E7A23F;
|
|
}
|
|
}
|
|
</style>
|