865 lines
32 KiB
Vue
865 lines
32 KiB
Vue
<template>
|
|
<div class="main">
|
|
<div class="top">
|
|
<div class="header" :style="{height:menu.height + menu.top + 'px',top:0+'px'}">
|
|
<image :style="{bottom: ((statusBarHeight-24)/4)+'px' }" class="backArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg" @click="handleBack"/>
|
|
<!-- <img :style="{bottom: ((statusBarHeight-24)/4)+'px' }" class="detailIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/serverPartDetail.png">-->
|
|
<div v-if="showSpring" class="picker" @click="handleGoMap">
|
|
<div class="selectService">
|
|
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/fixed.svg"></image>
|
|
<view class="select">
|
|
<view class="content">
|
|
<view class="uni-input">{{springService.SERVERPART_NAME}}</view>
|
|
<p class="area" v-if="springService.Serverpart_ID">{{springService.SPREGIONTYPE_NAME}}</p>
|
|
<image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>
|
|
</view>
|
|
</view>
|
|
</div>
|
|
</div>
|
|
|
|
<view v-else class="seachBox" :style="{height: menu.height + 'px'}" @click="handleGoMap">
|
|
<image class="searchIcon" src="/static/images/seach/searchIcon.svg"/>
|
|
<text class="searchText">请输入想看的服务区</text>
|
|
</view>
|
|
</div>
|
|
|
|
<!-- <scroll-view :style="{top:menu.bottom + 24 + 'px' }" scroll-x="true" class="headerNavList" :scrollIntoView="currentServerPart" :scroll-with-animation="true">-->
|
|
<!-- <div :class="currentServerPart==='ServerPart'+item.value?'scrollItem selectItem':'scrollItem'" v-for="(item,index) in ServerpartList" :key="index" :id="'ServerPart'+item.value" @click="handleChangeServerPart(item.value)">{{item.name.split('服务区')[0]}}</div>-->
|
|
<!-- </scroll-view>-->
|
|
</div>
|
|
<div class="contentPage">
|
|
<div class="contentTop">
|
|
<div class="content">
|
|
<div class="left">
|
|
<img class="detailLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/serverDetail.png"/>
|
|
<!-- <text class="modalUnit">{{selectDateText || ''}}</text>-->
|
|
<!-- <text class="modalUnit">{{`/统计到${allDateDay || ''}`}}</text>-->
|
|
</div>
|
|
<div class="right">
|
|
<div class="typeChangeBox">
|
|
<div :class="pageType===1?'normal select':'normal'" @click="handleChangeType(1)">按天统计</div>
|
|
<div :class="pageType===2?'normal select':'normal'" @click="handleChangeType(2)">累计统计</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="contentBox">
|
|
<div class="navBigList" v-if="pageType===1">
|
|
<!-- <div class="allBox">-->
|
|
<!-- <div :class="currentScroll==='all'?'scrollItem selectItem':'scrollItem'" @click="handleChangeTime('all')">累计</div>-->
|
|
<!-- </div>-->
|
|
<scroll-view scroll-x="true" class="navList" :scrollIntoView="currentScroll" :scroll-with-animation="true">
|
|
<div :class="currentScroll==='item'+item.value?'scrollItem selectItem':'scrollItem'" v-for="(item,index) in scrollList" :key="index" :id="'item'+item.value" @click="handleChangeTime(item.value)">{{item.label}}</div>
|
|
</scroll-view>
|
|
</div>
|
|
<view class="sortBox">
|
|
<view class="sortItem" style="width: 80rpx;" @click="handleChangeSortName(1)">
|
|
<text class="sortText">排序</text>
|
|
</view>
|
|
<view class="sortItem" :style="{width:'calc(100% - 410rpx)',display:'flex',alignItems:'center',justifyContent:'flex-end'}" @click="handleChangeSortName(1)">
|
|
<!-- <text class="sortText">{{ `24年${type === 1 ? '销售' : type === 2 ? '营收' : type === 3 ? '车流' : ''}` }}</text>-->
|
|
<text class="sortText">{{ `24年` }}</text>
|
|
<view class="sortIconBox" style="margin-right: 60rpx">
|
|
<image class="upIcon" :style="{transform: sortName===1?sortType===1?``:`rotate(180deg)`:``}" :src="sortType===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg':sortName===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
|
|
<image class="bottomIcon" :style="{transform: sortName===1?sortType===1?``:`rotate(180deg)`:'rotate(-180deg)'}":src="sortType===1 && sortName===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="sortItem" style="width: 110rpx;" @click="handleChangeSortName(2)">
|
|
<!-- <text class="sortText">{{ `23年${type === 1 ? '销售' : type === 2 ? '营收' : type === 3 ? '车流' : ''}` }}</text>-->
|
|
<text class="sortText">{{ `23年` }}</text>
|
|
<view class="sortIconBox">
|
|
<image class="upIcon" :style="{transform: sortName===2?sortType===1?``:`rotate(180deg)`:``}" :src="sortType===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg':sortName===2?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
|
|
<image class="bottomIcon" :style="{transform: sortName===2?sortType===1?``:`rotate(180deg)`:'rotate(-180deg)'}":src="sortType===1 && sortName===2?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="sortItem" style="width: 110rpx;" @click="handleChangeSortName(3)">
|
|
<!-- <text class="sortText">{{ `${type === 1 ? '销售' : type === 2 ? '营收' : type === 3 ? '车流' : ''}增长` }}</text>-->
|
|
<text class="sortText">{{ `增长` }}</text>
|
|
<view class="sortIconBox">
|
|
<image class="upIcon" :style="{transform: sortName===3?sortType===1?``:`rotate(180deg)`:``}" :src="sortType===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg':sortName===3?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
|
|
<image class="bottomIcon" :style="{transform: sortName===3?sortType===1?``:`rotate(180deg)`:'rotate(-180deg)'}":src="sortType===1 && sortName===3?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="sortItem" style="width: 110rpx;" @click="handleChangeSortName(4)">
|
|
<!-- <text class="sortText">{{ `${type === 1 ? '销售' : type === 2 ? '营收' : type === 3 ? '车流' : ''}增幅` }}</text>-->
|
|
<text class="sortText">{{ `增幅` }}</text>
|
|
<view class="sortIconBox">
|
|
<image class="upIcon" :style="{transform: sortName===4?sortType===1?``:`rotate(180deg)`:``}" :src="sortType===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg':sortName===4?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
|
|
<image class="bottomIcon" :style="{transform: sortName===4?sortType===1?``:`rotate(180deg)`:'rotate(-180deg)'}":src="sortType===1 && sortName===4?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<div class="scrollBox">
|
|
<scroll-view :scroll-y="true" class="typeFirst" v-if="dataList && dataList.length>0">
|
|
<div class="listItem" v-for="(item,index) in dataList" :key="index">
|
|
<div class="noItem" style="width: 80rpx;align-items: center">
|
|
<img v-if="index<=2" class="noIcon" :src="index===0?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/first.png':index===1?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/second.png':index===2?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/third.png':''"/>
|
|
<text class="noOther" v-else>{{index + 1}}</text>
|
|
</div>
|
|
<div class="firstItem" :style="{width:'calc(100% - 440rpx)',textAlign:'left'}">
|
|
<div class="itemIcon">
|
|
<img class="itemImg" v-if="item.Brand_ICO" :src="item.Brand_ICO "/>
|
|
<img class="itemImg" v-else src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/defaultShopIcon.png"/>
|
|
</div>
|
|
<div class="itemRight" :style="{width:'calc(100% - 128rpx)'}">
|
|
<span class="firstItemText">{{item.ServerpartShopName || '-'}}</span>
|
|
<span>{{item.RevenueINC.curYearData?item.RevenueINC.curYearData<100?`${item.RevenueINC.curYearData}(元)`:$util.getMoney(item.RevenueINC.curYearData / 10000):'' }}</span>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- <div class="item" style="width: 110rpx"></div>-->
|
|
<div class="item" style="width: 110rpx">{{item.RevenueINC.lYearData?item.RevenueINC.lYearData<100?`${item.RevenueINC.lYearData}(元)`:$util.getMoney(item.RevenueINC.lYearData / 10000):'' }}</div>
|
|
<div class="item" style="width: 110rpx">{{item.RevenueINC.increaseData?item.RevenueINC.increaseData<100 && item.RevenueINC.increaseData>0?`${item.RevenueINC.increaseData}(元)`:$util.getMoney(item.RevenueINC.increaseData / 10000):'' }}</div>
|
|
<div class="item" style="width: 110rpx">
|
|
<span :style="{color: item.RevenueINC.increaseData>0?'#E83944':item.RevenueINC.increaseRate<0?'#0E9976':''}">
|
|
{{item.RevenueINC.increaseRate>0?'+':''}}
|
|
</span>
|
|
<span :style="{color: item.RevenueINC.increaseRate>0?'#E83944':item.RevenueINC.increaseRate<0?'#0E9976':''}">
|
|
{{item.RevenueINC.increaseRate?item.RevenueINC.increaseRate+'%':''}}
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
</scroll-view>
|
|
|
|
<view class="noDataBox" v-else>
|
|
<img class="noDataImg" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/noData.svg"/>
|
|
<text class="noDataText">暂无数据</text>
|
|
</view>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import request from '@/util/index.js'
|
|
import moment from "moment";
|
|
export default {
|
|
name: "merchantRevenue",
|
|
data() {
|
|
return {
|
|
statusBarHeight:0,// 胶囊按钮高度
|
|
menu:'', // 手机属性
|
|
pageType:1, // 一天还是累计
|
|
scrollList:[], // 横向滑动日期
|
|
currentScroll:'', // 选中的日期
|
|
lastDay:'', // 最近有效日期
|
|
sortType: 1,// 正序降序 0正序 1降序
|
|
sortName: 3,// 排序字段 1 24年营收 2 23年营收 3营收增长 4营收增幅
|
|
dataList:[],
|
|
type:0,// 判断是要查询哪个数据 1销售 2营收 3车流
|
|
ServerpartId:'',// 服务区id
|
|
useInfo:{},
|
|
ServerpartList:[],
|
|
currentServerPart:'',
|
|
showSpring: false,
|
|
springService:null,// 当前选中的服务区
|
|
}
|
|
},
|
|
onLoad(query){
|
|
// 获取手机参数对页面进行适配
|
|
let systemInfo = uni.getSystemInfoSync()
|
|
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
|
this.menu = uni.getMenuButtonBoundingClientRect()
|
|
|
|
if (query.ServerpartId){
|
|
this.ServerpartId = query.ServerpartId
|
|
this.currentServerPart = `ServerPart` + query.ServerpartId
|
|
}
|
|
if (query.type){
|
|
this.type = Number(query.type)
|
|
}
|
|
|
|
if (query.serverPartList){
|
|
this.ServerpartList = JSON.parse(query.serverPartList)
|
|
}
|
|
// 获取用户信息
|
|
let userInfo = uni.getStorageSync('vuex')
|
|
userInfo = JSON.parse(userInfo)
|
|
this.useInfo = JSON.parse(JSON.stringify(userInfo))
|
|
|
|
this.lastDay = uni.getStorageSync('lastDay')
|
|
console.log('query',query)
|
|
if (query.currentScroll){
|
|
this.currentScroll = query.currentScroll
|
|
}else{
|
|
this.currentScroll = 'item'+ '2024-03-05'
|
|
}
|
|
|
|
// 拿到是春运开始的第几天
|
|
let dayNumber = 0
|
|
const lastDate = new Date(this.lastDay)
|
|
let y = lastDate.getFullYear()
|
|
this.curYear = y
|
|
this.compareYear = y - 1
|
|
let lastMonth = lastDate.getMonth() + 1
|
|
let lastDays = lastDate.getDate()
|
|
this.allDateDay = `${lastMonth<10?'0'+lastMonth:lastMonth}月${lastDays<10?'0'+lastDays:lastDays}日`
|
|
// 24年春运开始时间为 1.26
|
|
// if (lastMonth === 1){
|
|
// dayNumber = lastDays - 26 + 1
|
|
// }else{
|
|
// dayNumber = 6 + lastDays
|
|
// }
|
|
dayNumber = moment().diff("2024-01-26", "days")
|
|
this.howDayNumber = dayNumber<=40?dayNumber:40
|
|
let dateList = []
|
|
for (let i = 1;i<=this.howDayNumber;i++){
|
|
dateList.push({label:`第${i}天`,value:moment("2024-01-25").add(i, 'days').format("YYYY-MM-DD")})
|
|
// if (i<7){
|
|
// dateList.push({label:`第${i}天`,value:`2024-01-${26+i-1}`})
|
|
// }else{
|
|
// dateList.push({label:`第${i}天`,value:`2024-02-${i - 7 + 1<10?`0${i - 7 + 1}`:i - 7 + 1}`})
|
|
// }
|
|
}
|
|
this.scrollList = dateList
|
|
|
|
// this.handleGetPageData()
|
|
},
|
|
onShow(){
|
|
let seat = uni.getStorageSync('springService')
|
|
if (seat){
|
|
this.springService = seat
|
|
this.showSpring = true
|
|
this.dataList = []
|
|
this.handleGetPageData()
|
|
}else{
|
|
this.showSpring = false
|
|
}
|
|
},
|
|
methods:{
|
|
handleChangeType(value){
|
|
this.pageType = value
|
|
if (value===2){
|
|
this.handleGetPageData('all')
|
|
}else{
|
|
this.handleGetPageData()
|
|
}
|
|
},
|
|
handleGoMap(){
|
|
this.$util.toNextRoute('navigateTo', '/pages/map/index?type=springTravel')
|
|
},
|
|
// 拿到页面表格数据
|
|
async handleGetPageData(date){
|
|
uni.showLoading({
|
|
title: '正在加载...'
|
|
})
|
|
let time = date?
|
|
date==='all'?this.lastDay:
|
|
this.currentScroll.split('item')[1]:
|
|
this.currentScroll.split('item')[1]
|
|
const req = {
|
|
calcType:this.pageType,
|
|
pushProvinceCode: this.useInfo.userData.ProvinceCode || '340000',
|
|
curYear: this.curYear,
|
|
compareYear: this.compareYear,
|
|
HolidayType:2,
|
|
StatisticsDate:time,
|
|
ServerpartId: this.springService.Serverpart_ID || this.ServerpartId,
|
|
SortStr:`${this.type===1?'revenue':this.type===2?'account':this.type===3?'bayonet':''} ${this.sortType===0?'asc':'desc'}`,
|
|
}
|
|
// this.dataList
|
|
const data = await request.$webGet('CommercialApi/Revenue/GetShopINCAnalysis',req)
|
|
if(data.Result_Code===100){
|
|
this.dataList = this.handleGetSort(data.Result_Data.ShopINCList)
|
|
}else{
|
|
this.dataList = []
|
|
}
|
|
uni.hideLoading()
|
|
},
|
|
handleChangeTime(date){
|
|
if (date==='all'){
|
|
this.currentScroll = 'all'
|
|
const time = new Date(this.lastDay)
|
|
let m = time.getMonth()+1
|
|
let d = time.getDate()
|
|
this.allDateDay = `${m<10?'0'+m:m}月${d<10?'0' + d:d}日`
|
|
}else{
|
|
this.currentScroll = 'item'+ date
|
|
const time = new Date(date)
|
|
let m = time.getMonth()+1
|
|
let d = time.getDate()
|
|
this.allDateDay = `${m<10?'0'+m:m}月${d<10?'0' + d:d}日`
|
|
}
|
|
|
|
this.handleGetPageData(date)
|
|
},
|
|
// 修改排序字段
|
|
handleChangeSortName(value){
|
|
uni.showLoading({
|
|
title: '正在加载...'
|
|
})
|
|
if (value===this.sortName){
|
|
if (this.sortType===1){
|
|
this.sortType=0
|
|
}else{
|
|
this.sortType=1
|
|
}
|
|
}else{
|
|
this.sortName = value
|
|
this.sortType=1
|
|
}
|
|
let list = this.handleGetSort(this.dataList)
|
|
this.dataList = list
|
|
this.$forceUpdate()
|
|
uni.hideLoading()
|
|
},
|
|
// 排序方法
|
|
handleGetSort(list){
|
|
var len = list.length;
|
|
|
|
for (var i = 0; i < len - 1; i++) {
|
|
for (var j = 0; j < len - 1 - i; j++) {
|
|
// 判断按照那个排序
|
|
if (this.type===1 || this.type===2){
|
|
// 正序
|
|
if (this.sortType===0){
|
|
// 24年营收
|
|
if (this.sortName===1){
|
|
if (list[j].RevenueINC.curYearData > list[j + 1].RevenueINC.curYearData) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
// 23年营收
|
|
}else if(this.sortName===2){
|
|
if (list[j].RevenueINC.lYearData > list[j + 1].RevenueINC.lYearData) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
// 营收增长
|
|
}else if(this.sortName===3){
|
|
if (list[j].RevenueINC.increaseData > list[j + 1].RevenueINC.increaseData) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
// 营收增幅
|
|
}else if(this.sortName===4){
|
|
if (list[j].RevenueINC.increaseRate > list[j + 1].RevenueINC.increaseRate ) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
}
|
|
}
|
|
else{
|
|
// 降序
|
|
// 24年营收
|
|
if (this.sortName===1){
|
|
if (list[j].RevenueINC.curYearData < list[j + 1].RevenueINC.curYearData) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
// 23年营收
|
|
}else if(this.sortName===2){
|
|
if (list[j].RevenueINC.lYearData < list[j + 1].RevenueINC.lYearData) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
// 营收增长
|
|
}else if(this.sortName===3){
|
|
if (list[j].RevenueINC.increaseData < list[j + 1].RevenueINC.increaseData) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
// 营收增幅
|
|
}else if(this.sortName===4){
|
|
if (list[j].RevenueINC.increaseRate < list[j + 1].RevenueINC.increaseRate ) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
else if(this.type===3){
|
|
// 正序
|
|
if (this.sortType===0){
|
|
// 24年车流
|
|
if (this.sortName===1){
|
|
if (list[j].BayonetINC.curYearData > list[j + 1].BayonetINC.curYearData) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
// 23年营收
|
|
}else if(this.sortName===2){
|
|
if (list[j].BayonetINC.lYearData > list[j + 1].BayonetINC.lYearData ) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
// 营收增长
|
|
}else if(this.sortName===3){
|
|
if (list[j].BayonetINC.increaseData > list[j + 1].BayonetINC.increaseData ) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
// 营收增幅
|
|
}else if(this.sortName===4){
|
|
if (list[j].BayonetINC.increaseRate > list[j + 1].BayonetINC.increaseRate) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
}
|
|
}else{
|
|
// 降序
|
|
// 24年车流
|
|
if (this.sortName===1){
|
|
if (list[j].BayonetINC.curYearData < list[j + 1].BayonetINC.curYearData) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
// 23年营收
|
|
}else if(this.sortName===2){
|
|
if (list[j].BayonetINC.lYearData < list[j + 1].BayonetINC.lYearData ) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
// 营收增长
|
|
}else if(this.sortName===3){
|
|
if (list[j].BayonetINC.increaseData < list[j + 1].BayonetINC.increaseData ) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
// 营收增幅
|
|
}else if(this.sortName===4){
|
|
if (list[j].BayonetINC.increaseRate < list[j + 1].BayonetINC.increaseRate) { // 比较相邻元素大小并交换位置
|
|
var temp = list[j];
|
|
list[j] = list[j + 1];
|
|
list[j + 1] = temp;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return list;
|
|
},
|
|
handleBack(){
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
},
|
|
// 选择服务区
|
|
handleChangeServerPart(value){
|
|
this.ServerpartId = value
|
|
this.currentServerPart = `ServerPart` + value
|
|
this.handleGetPageData(null)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.main {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #fff;
|
|
.top{
|
|
width: 100%;
|
|
height: 324rpx;
|
|
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/rankBg.png");
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
.header{
|
|
position: fixed;
|
|
width: 100%;
|
|
padding: 0 16px;
|
|
box-sizing: border-box;
|
|
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/rankBg.png");
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0;
|
|
background-size: 100% 324rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
z-index: 3;
|
|
.backArrow{
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-right: 16px;
|
|
position: absolute;
|
|
}
|
|
.detailIcon{
|
|
width: 230rpx;
|
|
height: 48rpx;
|
|
margin-left: 16rpx;
|
|
position: absolute;
|
|
left: 40px;
|
|
}
|
|
.seachBox{
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 60px;
|
|
width: 400rpx;
|
|
background: #fff;
|
|
border-radius: 32rpx;
|
|
margin-left: 16rpx;
|
|
box-sizing: border-box;
|
|
padding: 10rpx 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
.searchIcon{
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
.searchText{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #B6BACB;
|
|
line-height: 40rpx;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
.picker{
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 40px;
|
|
.selectService{
|
|
display: flex;
|
|
align-items: center;
|
|
.img{
|
|
width: 40px;
|
|
height: 40px;
|
|
z-index: 2;
|
|
}
|
|
.select{
|
|
height: 32px;
|
|
background: #F8F8FA;
|
|
border-radius: 0 16px 16px 0;
|
|
transform: translateX(-20px);
|
|
box-sizing: border-box;
|
|
padding-left: 25px;
|
|
display: flex;
|
|
align-items: center;
|
|
.content{
|
|
display: flex;
|
|
align-items: center;
|
|
.uni-input{
|
|
padding: 0;
|
|
background: transparent;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
}
|
|
.area{
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 40px;
|
|
margin-left: 4px;
|
|
}
|
|
.rightArrow{
|
|
width: 24px;
|
|
height: 12px;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.headerNavList{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 60rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
box-sizing: border-box;
|
|
padding-left: 32rpx;
|
|
.scrollItem{
|
|
display: inline-block;
|
|
height: 40rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
color: #E8A29A;
|
|
line-height: 40rpx;
|
|
margin-right: 40rpx;
|
|
}
|
|
.selectItem{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
line-height: 40rpx;
|
|
position: relative;
|
|
}
|
|
.selectItem:after{
|
|
content:'';
|
|
display: inline-block;
|
|
width: 56rpx;
|
|
height: 6rpx;
|
|
background-color: #fff;
|
|
position: absolute;
|
|
bottom: -8rpx;
|
|
left: 0px;
|
|
}
|
|
}
|
|
}
|
|
.contentPage{
|
|
width: 100%;
|
|
transform: translateY(-32rpx);
|
|
background: #fff;
|
|
border-radius: 32rpx 32rpx 0rpx 0rpx;
|
|
.contentTop{
|
|
width: 100%;
|
|
height: 120rpx;
|
|
background: linear-gradient(360deg, rgba(255,200,198,0) 0%, #FFC8C6 100%);
|
|
border-radius: 32rpx 32rpx 0rpx 0rpx;
|
|
box-sizing: border-box;
|
|
padding: 24rpx 24rpx 0;
|
|
.content{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.left{
|
|
.detailLogo{
|
|
width: 178rpx;
|
|
height: 32rpx;
|
|
}
|
|
.modalUnit{
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #9A9A9A;
|
|
line-height: 36rpx;
|
|
}
|
|
}
|
|
.right{
|
|
.typeChangeBox{
|
|
display: flex;
|
|
align-items: center;
|
|
background: #FFFFFF;
|
|
border-radius: 6rpx;
|
|
box-sizing: border-box;
|
|
padding: 4rpx;
|
|
.normal{
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 36rpx;
|
|
padding: 6rpx 16rpx;
|
|
}
|
|
.select{
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #160002;
|
|
line-height: 36rpx;
|
|
background: #F5EFEF;
|
|
border-radius: 6rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.contentBox{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 32rpx;
|
|
.navBigList{
|
|
width: 100%;
|
|
height: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-bottom: 24rpx;
|
|
border-bottom: 1px solid #F5F4F4;
|
|
.allBox{
|
|
width: 70rpx;
|
|
height: 100%;
|
|
.scrollItem{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #A69E9F;
|
|
line-height: 40rpx;
|
|
}
|
|
.selectItem{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
color: #ED3E48;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
}
|
|
.navList{
|
|
width: 100%;
|
|
height: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
.scrollItem{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #A69E9F;
|
|
line-height: 40rpx;
|
|
margin-right: 32rpx;
|
|
display: inline-block;
|
|
}
|
|
.selectItem{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
color: #ED3E48;
|
|
line-height: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sortBox{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 16rpx;
|
|
margin-top: 24rpx;
|
|
.sortItem{
|
|
display: flex;
|
|
align-items: center;
|
|
.sortText{
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #9A9A9A;
|
|
line-height: 36rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.sortIconBox{
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: 16rpx;
|
|
.upIcon{
|
|
width: 16rpx;
|
|
height: 12rpx;
|
|
margin-bottom: 4rpx;
|
|
}
|
|
.bottomIcon{
|
|
width: 16rpx;
|
|
height: 12rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.scrollBox{
|
|
.typeFirst{
|
|
height: calc(100vh - 300px);
|
|
.listItem{
|
|
width: 100%;
|
|
display: flex;
|
|
//align-items: center;
|
|
align-items: flex-end;
|
|
padding: 16rpx 0;
|
|
.noItem{
|
|
display: flex;
|
|
height: 120rpx;
|
|
align-items: center;
|
|
.noIcon{
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
.noOther{
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(141deg, #BABCC3 0%, #CBCCD1 45%, #B5B6BA 100%);
|
|
border-radius: 50%;
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
line-height: 24rpx;
|
|
}
|
|
}
|
|
.item{
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #9A9A9A;
|
|
line-height: 40rpx;
|
|
|
|
}
|
|
.firstItem{
|
|
display: flex;
|
|
.itemIcon{
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
margin-right: 8rpx;
|
|
.itemImg{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.itemRight{
|
|
height: 120rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
color: #9A9A9A;
|
|
.firstItemText{
|
|
width: 100%;
|
|
text-align: left;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #9A9A9A;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
.noDataBox{
|
|
width: 100%;
|
|
height: calc(100vh - 300px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.noDataImg{
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
}
|
|
.noDataText{
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|