491 lines
12 KiB
Vue
491 lines
12 KiB
Vue
<template>
|
|
<scroll-view scroll-y="true" @scroll="showFixed" style="height:100%" class="page-body" v-if="showPage">
|
|
|
|
<div class="page-title" :style="'opacity:'+(1-opacity)+';'" v-if="pageData">
|
|
<text>{{pageData.Serverpart_Name || ''}}</text>
|
|
<text>¥ {{pageData.Revenue_Amount ? $util.fmoney(pageData.Revenue_Amount,2) : '0.00'}}</text>
|
|
</div>
|
|
<cover-view class="fixed-box page-title" :style="'transform: translateY('+fixedY+'px);opacity:'+opacity+';'">
|
|
<cover-view>{{pageData.Serverpart_Name || ''}}</cover-view>
|
|
<cover-view class="price-text" style="width: 200rpx;text-align: right;">¥ {{pageData.Revenue_Amount ? $util.fmoney(pageData.Revenue_Amount,2) : '0.00'}}</cover-view>
|
|
</cover-view>
|
|
<canvas canvas-id="sellCate" id="sellCate" class="operation-cate-content" @touchstart="touchPie($event,'sellCate')"></canvas>
|
|
|
|
<div class="shop-box">
|
|
<scroll-view scroll-x class="tab-shop" scroll-with-animation :scroll-left="scrollLeft">
|
|
|
|
<div v-for="(n,i) in cateBrandList" :key="i" :id="`tabNum${i}`" class="cate-name" :class="{'active': nowShop==i}" @click="selectCate(i)">{{n.Bussiness_Name}}</div>
|
|
|
|
</scroll-view>
|
|
<div class="tab-content" v-if="cateBrandList.length" >
|
|
<div class="shop-card" v-for="(m,i) in cateBrandList[nowShop].listBrandModel" :key="i" @click="toBrandPage(m,i)" >
|
|
<div>
|
|
<image v-if="m.Brand_ICO" :src="m.Brand_ICO" mode="aspectFit"></image>
|
|
<image v-else src="/static/images/revenue/home.png" mode="aspectFit"></image>
|
|
</div>
|
|
<div class="shop-name">{{m.Brand_Name}}</div>
|
|
<div class="price-num">¥ {{m.Revenue_Amount ? $util.fmoney(m.Revenue_Amount,2) : '0.00'}}</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="more-brand " v-if="cateBrandList[nowShop].listBrandModel.length>6" @click="showAll=!showAll"><image src="/static/images/revenue/more-brand.png" mode="aspectFit" :class="{'transfrom':showAll}"></image></div> -->
|
|
</div>
|
|
</scroll-view>
|
|
</template>
|
|
|
|
<script>
|
|
import uCharts from '@/components/u-charts/u-charts.js';
|
|
let rincanvas = {}
|
|
var _self;
|
|
export default {
|
|
data() {
|
|
return {
|
|
scrollLeft: 0,
|
|
theRequest:{},
|
|
showAll:false,
|
|
showHeight: uni.upx2px(484)+'px',
|
|
sellData : [
|
|
{
|
|
name: '休闲餐饮',
|
|
data: 136763.00,
|
|
active: true
|
|
},
|
|
{
|
|
name: '正餐饮',
|
|
data: 126763.00
|
|
},
|
|
{
|
|
name: '零售',
|
|
data: 86763.00
|
|
},
|
|
{
|
|
name: '司乘服务',
|
|
data: 36763.00
|
|
},
|
|
{
|
|
name: '汽车服务',
|
|
data: 56763.00
|
|
}
|
|
],
|
|
pageData: {},
|
|
cateBrandList:[],
|
|
ringColor: ['#FFAC37', '#d8ece9', '#e0e3f7', '#f7f5f6', '#b2b7e3'],
|
|
nowShop: 0,
|
|
showPage: false,
|
|
fixedY:0,
|
|
opacity: 0,
|
|
}
|
|
},
|
|
|
|
onLoad(option) {
|
|
_self = this
|
|
uni.showLoading({
|
|
title: '正在加载...'
|
|
})
|
|
if(option.ProvinceCode){
|
|
this.theRequest = option
|
|
this.getData(option)
|
|
}else{
|
|
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
showFixed(e){
|
|
let options = e.detail
|
|
let maxHeight = uni.upx2px(110)
|
|
let minHeight = 0
|
|
let selfHeight = uni.upx2px(110)
|
|
if(options.scrollTop > minHeight && options.scrollTop < maxHeight){
|
|
|
|
this.fixedY = -selfHeight+ (options.scrollTop -minHeight)
|
|
this.opacity = (options.scrollTop -minHeight)/selfHeight
|
|
}else if(options.scrollTop>maxHeight){
|
|
// uni.setNavigationBarColor({
|
|
// backgroundColor:"#fcfcfc"
|
|
// })
|
|
this.fixedY = 0
|
|
this.opacity = 1
|
|
}else{
|
|
this.fixedY = 0-selfHeight
|
|
this.opacity = 0
|
|
}
|
|
|
|
},
|
|
toBrandPage(item,index){
|
|
let theRequest = this.theRequest
|
|
let nowShop = this.nowShop
|
|
|
|
let btid = this.cateBrandList[nowShop].Business_Trade
|
|
|
|
let pages = `/pages/everdayRenven/serviceDetail?bid=${item.Brand_Id}&id=${theRequest.ServerpartIds}&time=${theRequest.time}&provinceId=${theRequest.ProvinceCode}&btid=${item.Business_Trade}`
|
|
this.$util.toNextRoute('navigateTo', pages)
|
|
},
|
|
async selectCate(index){
|
|
if(index==this.nowShop) return
|
|
this.nowShop = index
|
|
this.showAll = false
|
|
let leftWidthSum = 0;
|
|
for (var i = 0; i <= index; i++) {
|
|
let nowElement = await this.getWidth('tabNum' + i)
|
|
leftWidthSum = leftWidthSum + nowElement.width
|
|
}
|
|
let winWidth = uni.getSystemInfoSync().windowWidth
|
|
winWidth = (winWidth-60)/1.5
|
|
this.scrollLeft = leftWidthSum > winWidth ? (leftWidthSum - winWidth) : 0
|
|
|
|
this.$forceUpdate()
|
|
},
|
|
getWidth(id) { //得到元素的宽高
|
|
return new Promise((res, rej) => {
|
|
uni.createSelectorQuery().select("#" + id).fields({
|
|
size: true,
|
|
scrollOffset: true
|
|
}, (data) => {
|
|
res(data)
|
|
// console.log(data)
|
|
}).exec()
|
|
})
|
|
},
|
|
operationFn() { //昨日营收占比
|
|
let _this = this;
|
|
|
|
// 业态营收占比
|
|
let colors1 = ['#FFAC37', '#d8ece9', '#e0e3f7', '#f7f5f6', '#b2b7e3'];
|
|
let list = []
|
|
_this.pageData.listBusinessModel.map((m,i)=>{
|
|
let n = {
|
|
name: m.Bussiness_Name,
|
|
data: m.Revenue_Amount
|
|
}
|
|
// if(i==0) {
|
|
// n.textColor='#999'
|
|
// n.active =true
|
|
// }else{
|
|
n.textColor='#D1D1D1'
|
|
// }
|
|
n.textSize= uni.upx2px(26)
|
|
n.format = function(arg) {
|
|
return [n.name,(arg*100).toFixed(2)+'%']
|
|
}
|
|
list.push(n)
|
|
})
|
|
_this.sellData = list
|
|
|
|
// this.regionProgress = businessData[1]
|
|
_this.showPie({
|
|
id: 'sellCate',
|
|
data: list,
|
|
colors: colors1,
|
|
});
|
|
|
|
},
|
|
showPie(obj) {
|
|
let data= {
|
|
series: []
|
|
}
|
|
|
|
data.series = data.series.concat(obj.data)
|
|
rincanvas[obj.id] = new uCharts({
|
|
$this: _self,
|
|
canvasId: obj.id,
|
|
colors: obj.colors,
|
|
type: 'ring',
|
|
|
|
padding: [uni.upx2px(36),uni.upx2px(16),uni.upx2px(36),uni.upx2px(16)],
|
|
legend: {
|
|
show: false,
|
|
},
|
|
title: {
|
|
name: data.series[0].name,
|
|
fontSize: uni.upx2px(26),
|
|
color: '#666666',
|
|
// offsetY: uni.upx2px(-16),
|
|
},
|
|
|
|
animation: false,
|
|
subtitle: {
|
|
name: '¥'+this.$util.fmoney(data.series[0].data,2),
|
|
color: '#666666',
|
|
fontSize: uni.upx2px(30),
|
|
offsetX: uni.upx2px(16),
|
|
},
|
|
fontSize: uni.upx2px(40),
|
|
background: '#FFFFFF',
|
|
pixelRatio: 1,
|
|
series: data.series,
|
|
animation: true,
|
|
width: uni.upx2px(720),
|
|
height: uni.upx2px(586),
|
|
dataLabel: true,
|
|
disablePieStroke: true,
|
|
dataPointShape: false,
|
|
extra: {
|
|
pie: {
|
|
ringWidth: uni.upx2px(102),
|
|
labelWidth: uni.upx2px(40),
|
|
activeOpacity: 1,
|
|
activeRadius: 10
|
|
},
|
|
tooltip: {
|
|
showBox: false,
|
|
bgColor: '#000',
|
|
bgOpacity: 0.4,
|
|
|
|
}
|
|
},
|
|
});
|
|
|
|
},
|
|
touchPie(e,id,opt) {
|
|
|
|
let index = rincanvas[id].getCurrentDataIndex(e)
|
|
if(index==-1) return
|
|
let item = this.sellData[index]
|
|
this.sellData.map(n=>{n.textColor="#d1d1d1"})
|
|
item.textColor = "#999"
|
|
let showData = {
|
|
title: {
|
|
name: item.name,
|
|
fontSize: uni.upx2px(26),
|
|
color: '#666666',
|
|
offsetY: uni.upx2px(-16),
|
|
},
|
|
series: this.sellData,
|
|
animation: false,
|
|
subtitle: {
|
|
name: '￥'+this.$util.fmoney(item.data,2),
|
|
color: '#666666',
|
|
fontSize: uni.upx2px(30),
|
|
offsetY: uni.upx2px(-16),
|
|
},
|
|
}
|
|
rincanvas[id].updateData(showData);
|
|
|
|
rincanvas[id].showToolTip(e);
|
|
this.nowShop = index+1
|
|
},
|
|
getData(theRequest){
|
|
let _this = this
|
|
|
|
|
|
this.$request.$webGet('WeChat/GetServerpartBrand',{
|
|
Serverpart_Id: theRequest.ServerpartIds,
|
|
statictics_Time: theRequest.time,
|
|
pushProvinceCode: theRequest.ProvinceCode
|
|
}).then(res=>{
|
|
uni.hideLoading()
|
|
if(res.Result_Code !=100 ) return
|
|
_this.showPage= true
|
|
|
|
_this.pageData = res.Result_Data
|
|
|
|
let list = JSON.parse(JSON.stringify(res.Result_Data.listBusinessModel))
|
|
// _this.cateBrandList = res.Result_Data.listBusinessModel
|
|
let all = {
|
|
Bussiness_Name:'全部',
|
|
|
|
listBrandModel:[]
|
|
}
|
|
list.map(n=>{
|
|
all.listBrandModel.push(...n.listBrandModel)
|
|
})
|
|
all.listBrandModel.sort((a,b)=>{
|
|
if(a.Revenue_Amount<b.Revenue_Amount){
|
|
return 1
|
|
}else{
|
|
return -1
|
|
}
|
|
})
|
|
_this.cateBrandList = [all,...list]
|
|
_this.operationFn()
|
|
})
|
|
|
|
|
|
},
|
|
|
|
},
|
|
onPageScroll(e){
|
|
let options = e.detail
|
|
let maxHeight = uni.upx2px(110)
|
|
let minHeight = 0
|
|
let selfHeight = uni.upx2px(110)
|
|
if(options.scrollTop > minHeight && options.scrollTop < maxHeight){
|
|
|
|
this.fixedY = Math.ceil(-selfHeight+ (options.scrollTop -minHeight))
|
|
this.opacity = Math.ceil( (options.scrollTop -minHeight)/selfHeight)
|
|
}else if(options.scrollTop>maxHeight){
|
|
|
|
this.fixedY = 0
|
|
this.opacity = 1
|
|
}else{
|
|
this.fixedY = 0-selfHeight
|
|
this.opacity = 0
|
|
}
|
|
console.log(options.scrollTop)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-body {
|
|
background-color: #fff;
|
|
padding-bottom: 60rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
cover-view {
|
|
color: #fff;
|
|
}
|
|
|
|
.page-title {
|
|
background-color: #fcfcfc;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 110rpx;
|
|
padding: 0 24rpx;
|
|
justify-content: space-between;
|
|
/* font-family: Bahnschrift Regular !important; */
|
|
color: #000;
|
|
font-size: 30rpx;
|
|
}
|
|
.page-title text:last-child {
|
|
/* font-size: 42rpx; */
|
|
color: #383838;
|
|
/* font-family: 'Bahnschrift Regular' !important; */
|
|
}
|
|
.fixed-box {
|
|
|
|
background-color: #686D8F;
|
|
/* background: linear-gradient(to right, #686D8F, #A1ACC6); */
|
|
transition: all .2s;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 999;
|
|
box-sizing: border-box;
|
|
color: #fff;
|
|
}
|
|
/* 业态 */
|
|
.operation-cate-content {
|
|
height: 585rpx;
|
|
width: 750rpx;
|
|
margin: 0 auto;
|
|
}
|
|
/* 门店 */
|
|
.shop-box {
|
|
margin: 0 20rpx;
|
|
border-radius: 8rpx;
|
|
background-color: #F6F8FA;
|
|
padding: 36rpx 20rpx;
|
|
}
|
|
.tab-shop {
|
|
|
|
color: #999999;
|
|
white-space: nowrap;
|
|
/* display: flex;
|
|
align-items: center; */
|
|
|
|
}
|
|
.tab-shop .cate-name {
|
|
padding-right: 16rpx;
|
|
font-size: 26rpx;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
.tab-shop .cate-name + .cate-name::before {
|
|
content: '|';
|
|
color: #eeeeee;
|
|
padding-right: 16rpx;
|
|
}
|
|
.tab-shop .cate-name.active {
|
|
color: #000;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
|
|
}
|
|
.tab-content {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 24rpx;
|
|
transition: all 0.5s cubic-bezier(0, 1, 0.5, 1);
|
|
margin: 24rpx auto 0 auto;
|
|
overflow: hidden;
|
|
height: inherit;
|
|
width: inherit;
|
|
}
|
|
|
|
/* 门店卡片 */
|
|
.shop-card {
|
|
width: 210rpx;
|
|
height: 227rpx;
|
|
border-radius: 8rpx;
|
|
color: #fff;
|
|
text-align: center;
|
|
padding-top: 20rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 16rpx;
|
|
}
|
|
.shop-card:nth-child(6n-5){
|
|
background: url(/static/images/revenue/shop-card.png) no-repeat center 50%,linear-gradient(-35deg, #ed7c77 , #d6524c);
|
|
background-size: contain;
|
|
}
|
|
|
|
.shop-card:nth-child(6n-4){
|
|
background: url(/static/images/revenue/shop-card.png) no-repeat center 50%,linear-gradient(-35deg, #d1bea8 , #ba9d7b );
|
|
margin-left: 18rpx;
|
|
background-size: contain;
|
|
}
|
|
.shop-card:nth-child(6n-3) {
|
|
background: url(/static/images/revenue/shop-card.png) no-repeat center 50%,linear-gradient(-35deg, #929cc0 , #aab3d0 );
|
|
margin-left: 18rpx;
|
|
background-size: contain;
|
|
}
|
|
.shop-card:nth-child(6n-2) {
|
|
background: url(/static/images/revenue/shop-card.png) no-repeat center 50%,linear-gradient(-35deg, #779cb1 , #a3bbc9 );
|
|
background-size: contain;
|
|
margin-left: 0rpx;
|
|
}
|
|
.shop-card:nth-child(6n-1) {
|
|
background: url(/static/images/revenue/shop-card.png) no-repeat center 50%,linear-gradient(-35deg, #c08d80 , #e8cbc7 );
|
|
margin-left: 18rpx;
|
|
background-size: contain;
|
|
}
|
|
.shop-card:nth-child(6n) {
|
|
background: url(/static/images/revenue/shop-card.png) no-repeat center 50%,linear-gradient(-35deg, #5cbe9c , #95d5bf );
|
|
margin-left: 18rpx;
|
|
background-size: contain;
|
|
margin-left: 18rpx;
|
|
}
|
|
.shop-card .shop-name {
|
|
font-size: 24rpx;
|
|
text-shadow: 0 2rpx 2rpx #A9a5a0;
|
|
line-height: 1.4;
|
|
}
|
|
.shop-card image {
|
|
border-radius: 50%;
|
|
border: 2rpx solid #fff;
|
|
background-color: #FFFFFF;
|
|
width: 62rpx;
|
|
height: 62rpx;
|
|
}
|
|
.shop-card .price-num {
|
|
|
|
font-size: 38rpx;
|
|
font-family: Bahnschrift Regular;
|
|
}
|
|
/* 更多品牌 */
|
|
.more-brand {
|
|
text-align: center;
|
|
padding-top: 44rpx;
|
|
}
|
|
.more-brand image {
|
|
width: 62rpx;
|
|
height: 36rpx;
|
|
transition: all 0.5s cubic-bezier(0, 1, 0.5, 1);
|
|
}
|
|
image.transfrom {
|
|
transform: rotate(-180deg);
|
|
|
|
}
|
|
</style>
|