533 lines
16 KiB
Vue
533 lines
16 KiB
Vue
<template>
|
||
<view class="main">
|
||
<view 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/commercial/navigation-left.svg" @click="handleBack"/>
|
||
</view>
|
||
<view class="mapView">
|
||
<map id="myMap" :longitude="longitude" :latitude="latitude" :markers="markers" class="map" show-location></map>
|
||
</view>
|
||
|
||
<view class="listBox" :style="{height:showMore?`calc(100vh - ${menu.bottom + 14}px)`:'calc(100vh - 680rpx)',transform:showMore?`translateY(-${340 - menu.bottom - 14}px)`:'translateY(-32rpx)'}">
|
||
<view class="listTop"></view>
|
||
<view class="contentList">
|
||
<view class="expand" @click="handleChangeShowMore">
|
||
<img class="showMore" :style="{transform: showMore?'rotate(90deg)':'rotate(-90deg)'}" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/goMore.svg"/>
|
||
</view>
|
||
<view class="contentTop">
|
||
<span class="listTitle">商家营收</span>
|
||
|
||
<!-- <view class="typeChangeBox">-->
|
||
<!-- <view :class="pageType===1?'normal select':'normal'" @click="handleChangeType(1)">按天统计</view>-->
|
||
<!-- <view :class="pageType===2?'normal select':'normal'" @click="handleChangeType(2)">累计统计</view>-->
|
||
<!-- </view>-->
|
||
</view>
|
||
|
||
<!-- <view 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">-->
|
||
<!-- <view :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}}</view>-->
|
||
<!-- </scroll-view>-->
|
||
<!-- </view>-->
|
||
|
||
<!-- <view class="listTitle">-->
|
||
<!-- <view class="titleItem"></view>-->
|
||
<!-- </view>-->
|
||
<scroll-view v-if="dataList && dataList.length>0" scroll-y="true" class="list" :style="{height:showMore?'calc(100% - 40px)':'calc(100% - 40px)'}">
|
||
<view class="listItem" v-for="(item,index) in dataList" :key="index">
|
||
<view class="leftItem">
|
||
<img class="img" :src="item.Brand_ICO?item.Brand_ICO:'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/defaultShopIcon.png'"/>
|
||
</view>
|
||
<view class="rightItem">
|
||
<view class="itemTop">
|
||
<view class="itemTitle">{{ item.Brand_Name || '' }}</view>
|
||
<span class="type">{{item.BrandType_Name || ''}}</span>
|
||
</view>
|
||
<view class="itemBox" v-if="item.Bussiness_Name">
|
||
<img class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/shop.svg"/>
|
||
<span class="name">{{item.Bussiness_Name || ''}}</span>
|
||
</view>
|
||
<view class="itemBox" v-if="item.Bussiness_Time">
|
||
<img class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/time.svg"/>
|
||
<span class="name">{{item.Bussiness_Time || ''}}</span>
|
||
</view>
|
||
<view class="otherItem">
|
||
<span class="other">{{item.Bussiness_State==='1000'?'运营中':'已暂停'}}</span>
|
||
<span class="other">{{item.Business_Trade|| ''}}</span>
|
||
</view>
|
||
<view class="curRevenue">
|
||
<span class="label">实时营收：</span>
|
||
<span class="value">{{item.CurRevenue?$util.getMoney(item.CurRevenue):'-'}}</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view v-else class="noDataBox" :style="{height:showMore?'calc(100% - 40px)':'calc(100% - 40px)'}">
|
||
<img class="noDataImg" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/noData.svg"/>
|
||
<text class="noDataText">暂无数据</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import request from '@/util/index.js'
|
||
import moment from "moment";
|
||
export default {
|
||
name: "map",
|
||
data(){
|
||
return {
|
||
longitude:'',
|
||
latitude:'',
|
||
markers:{},// 标点
|
||
id:'',
|
||
statusBarHeight:0,
|
||
menu:{},
|
||
pageType: 1,
|
||
currentScroll:'',
|
||
scrollList:[],
|
||
nowDay:'',
|
||
dataList:[],//
|
||
showMore: false,// 是否展开
|
||
curYear:'',
|
||
compareYear:'',
|
||
searchTime:'',// 查询的时间
|
||
}
|
||
},
|
||
onLoad(query){
|
||
console.log('query',query)
|
||
if (query.time){
|
||
this.searchTime = query.time
|
||
}
|
||
// 获取手机参数对页面进行适配
|
||
let systemInfo = uni.getSystemInfoSync()
|
||
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
||
this.menu = uni.getMenuButtonBoundingClientRect()
|
||
|
||
if (!query.longitude || !query.latitude){
|
||
let seat = uni.getStorageSync('seatInfo')
|
||
this.longitude = seat.longitude
|
||
this.latitude = seat.latitude
|
||
}else{
|
||
this.longitude = query.longitude
|
||
this.latitude = query.latitude
|
||
}
|
||
|
||
this.id=query.id
|
||
let markers = []
|
||
markers.push({
|
||
// iconPath: 'https://eshangtech.com/ShopICO/ahyd-BID/service/health.svg',
|
||
id: this.id,
|
||
latitude: this.latitude,
|
||
longitude: this.longitude
|
||
})
|
||
// }
|
||
this.markers = markers
|
||
|
||
const date = new Date()
|
||
let y = date.getFullYear()
|
||
let m = date.getMonth() + 1
|
||
let d = date.getDate()
|
||
if (m<10){
|
||
m = '0' + m
|
||
}
|
||
if (d<10){
|
||
d = '0' + d
|
||
}
|
||
// this.nowDay = `${y}-${m}-${d}`
|
||
// this.currentScroll = 'item'+ this.nowDay
|
||
// 拿到是春运开始的第几天
|
||
let dayNumber = 0
|
||
this.curYear = y
|
||
this.compareYear = y - 1
|
||
// 24年春运开始时间为 1.26
|
||
let mNumber = date.getMonth() + 1
|
||
let dNumber = date.getDate()
|
||
if (mNumber === 1){
|
||
dayNumber = mNumber - 26 + 1
|
||
}else{
|
||
dayNumber = 6 + dNumber
|
||
}
|
||
this.howDayNumber = dayNumber
|
||
// let dateList = []
|
||
// for (let i = 1;i<=dayNumber;i++){
|
||
// 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.handleGetData()
|
||
this.handleTest()
|
||
},
|
||
methods:{
|
||
handleBack(){
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
},
|
||
async handleTest(){
|
||
const req = {
|
||
Province_Code: '340000'
|
||
}
|
||
let data = await request.$webGet('CommercialApi/BaseInfo/GetServerpartList',req)
|
||
let list = data.Result_Data.List
|
||
let newList = []
|
||
list.forEach(item=>{
|
||
if (!item.SERVERPART_X || !item.SERVERPART_Y){
|
||
newList.push(item)
|
||
}
|
||
})
|
||
console.log('newList',newList)
|
||
},
|
||
handleChangeType(value){
|
||
this.pageType = value
|
||
},
|
||
handleChangeTime(date){
|
||
this.currentScroll = 'item'+ date
|
||
this.handleGetData()
|
||
},
|
||
async handleGetData(){
|
||
uni.showLoading({
|
||
title:'加载中'
|
||
})
|
||
// let time = date?
|
||
// date==='all'?this.nowDay:
|
||
// this.currentScroll.split('item')[1]:
|
||
// this.currentScroll.split('item')[1]
|
||
|
||
|
||
let req = {
|
||
ProvinceCode:'340000',
|
||
Serverpart_ID:this.id,
|
||
Statistics_Date:this.searchTime?moment(this.searchTime).format('YYYY-MM-DD'):moment().format('YYYY-MM-DD'),
|
||
}
|
||
let data = await request.$webGet('CommercialApi/BaseInfo/GetBrandAnalysis',req)
|
||
if (data.Result_Code===100){
|
||
let list = data.Result_Data.ShopBrandList
|
||
let resList = []
|
||
let noResList = []
|
||
// 原先是要去掉营收为0的 现在不去
|
||
list.forEach(item=>{
|
||
if (item.CurRevenue){
|
||
resList.push(item)
|
||
}else{
|
||
noResList.push(item)
|
||
}
|
||
})
|
||
this.dataList = this.handleSortList(resList).concat(this.handleSortBrandIdList(noResList))
|
||
uni.hideLoading()
|
||
}else{
|
||
uni.hideLoading()
|
||
}
|
||
},
|
||
handleChangeShowMore(){
|
||
this.showMore = !this.showMore
|
||
},
|
||
handleSortList(list){
|
||
var len = list.length;
|
||
for (var i = 0; i < len - 1; i++) {
|
||
for (var j = 0; j < len - 1 - i; j++) {
|
||
if (list[j].CurRevenue < list[j + 1].CurRevenue){
|
||
var temp = list[j];
|
||
list[j] = list[j + 1];
|
||
list[j + 1] = temp;
|
||
}
|
||
}
|
||
}
|
||
return list
|
||
},
|
||
handleSortBrandIdList(list){
|
||
var len = list.length;
|
||
for (var i = 0; i < len - 1; i++) {
|
||
for (var j = 0; j < len - 1 - i; j++) {
|
||
if (list[j].Brand_Id < list[j + 1].Brand_Id){
|
||
var temp = list[j];
|
||
list[j] = list[j + 1];
|
||
list[j + 1] = temp;
|
||
}
|
||
}
|
||
}
|
||
return list
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
|
||
<style scoped lang="scss">
|
||
.main{
|
||
width: 100%;
|
||
height: 100vh;
|
||
background: #fff;
|
||
.header{
|
||
position: fixed;
|
||
width: 100%;
|
||
padding: 0 16px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
z-index: 2;
|
||
.backArrow{
|
||
width: 24px;
|
||
height: 24px;
|
||
margin-right: 16px;
|
||
position: absolute;
|
||
}
|
||
}
|
||
.mapView{
|
||
width: 100vw;
|
||
height: 680rpx;
|
||
.map{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.listBox{
|
||
width: 100%;
|
||
background: #fff;
|
||
border-radius: 32rpx 32rpx 0 0;
|
||
transform: translateY(-32rpx);
|
||
padding: 4rpx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
.listTop{
|
||
position: absolute;
|
||
top: 4rpx;left: 4rpx;
|
||
width: calc(100% - 8rpx);
|
||
height: 212rpx;
|
||
border-radius: 32rpx 32rpx 0 0;
|
||
overflow: hidden;
|
||
background: linear-gradient(360deg, rgba(230,238,255,0) 0%, #E6EEFF 100%);;
|
||
}
|
||
.contentList{
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 4rpx;left: 4rpx;
|
||
box-sizing: border-box;
|
||
padding: 28rpx 30rpx;
|
||
.expand{
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.showMore{
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
}
|
||
.contentTop{
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.listTitle{
|
||
font-size: 32rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
color: #1E2535;
|
||
line-height: 44rpx;
|
||
}
|
||
.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: #EFEFF5;
|
||
border-radius: 6rpx;
|
||
}
|
||
}
|
||
}
|
||
.navBigList{
|
||
width: 100%;
|
||
height: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 32rpx;
|
||
.navList{
|
||
width: 100%;
|
||
height: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
white-space: nowrap;
|
||
padding-bottom: 24rpx;
|
||
border-bottom: 1px solid #F5F4F4;
|
||
.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: #2363FF;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
//.listTitle{
|
||
// display: flex;
|
||
// align-items: center;
|
||
// .titleItem{
|
||
// font-size: 28rpx;
|
||
// font-family: PingFangSC, PingFang SC;
|
||
// font-weight: 400;
|
||
// color: #A69E9F;
|
||
// line-height: 40rpx;
|
||
// }
|
||
//}
|
||
.list{
|
||
width: 100%;
|
||
margin-top: 16rpx;
|
||
.listItem{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 32rpx 24rpx;
|
||
border-radius: 16rpx;
|
||
background: #F8F9F9;
|
||
display: flex;
|
||
//align-items: center;
|
||
margin-bottom: 24rpx;
|
||
.leftItem{
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
margin-right: 24rpx;
|
||
.img{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.rightItem{
|
||
width: calc(100% - 144rpx);
|
||
.itemTop{
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.itemTitle{
|
||
font-size: 34rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
line-height: 48rpx;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
.type{
|
||
display: inline-block;
|
||
padding: 2rpx 8rpx;
|
||
background: #EDF0F4;
|
||
border-radius: 4rpx;
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
line-height: 36rpx;
|
||
}
|
||
}
|
||
.itemBox{
|
||
display: flex;
|
||
//align-items: center;
|
||
margin-bottom: 4rpx;
|
||
.icon{
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 8rpx;
|
||
margin-top: 4rpx;
|
||
}
|
||
.name{
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
line-height: 36rpx;
|
||
}
|
||
}
|
||
.otherItem{
|
||
display: flex;
|
||
align-items: center;
|
||
.other{
|
||
display: inline-block;
|
||
padding: 2rpx 8rpx;
|
||
background: #EDF0F4;
|
||
border-radius: 4rpx;
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
line-height: 36rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
}
|
||
.curRevenue{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 24rpx;
|
||
justify-content: flex-end;
|
||
//justify-content: space-between;
|
||
.label{
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
line-height: 36rpx;
|
||
}
|
||
.value{
|
||
font-size: 40rpx;
|
||
font-family: DINAlternate, DINAlternate;
|
||
font-weight: bold;
|
||
color: #FACB7F;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.noDataBox{
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.noDataImg{
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
}
|
||
.noDataText{
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
</style>
|