629 lines
20 KiB
Vue
629 lines
20 KiB
Vue
<template>
|
|
<div class="main">
|
|
<div class="header">
|
|
<div class="headerBox">
|
|
<div class="headerTop" :style="{height:(menu.bottom + 6) + 'px'}">
|
|
<div class="box" :style="{top:(menu.bottom - (menu.height / 2)) + 'px'}">
|
|
<div class="icon" @click="handleBack">
|
|
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg"></image>
|
|
</div>
|
|
<text class="title">品牌详情</text>
|
|
<div class="seize"></div>
|
|
</div>
|
|
</div>
|
|
<div class="detail" :style="{top:(menu.bottom + 22) + 'px'}">
|
|
<!-- -->
|
|
<!-- :style="{height:( (status.screenWidth - 32) / 2.09)+'px'}"-->
|
|
<div class="box" >
|
|
<div class="left">
|
|
<image v-if="detail.BRAND_STATE === 1" class="img" :src="detail.BRAND_INTRO"></image>
|
|
</div>
|
|
<div class="right">
|
|
<div class="top">
|
|
<text class="title" :style="{fontSize:detail.BRAND_NAME.length>8?'12px':'16px'}">{{detail.BRAND_NAME}}</text>
|
|
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/brand/effective.svg"></image>
|
|
</div>
|
|
<div class="descBox">
|
|
<text class="desc">{{detail.BRAND_DESC}}</text>
|
|
<text v-if="detail.BRAND_DESC.length>11" class="more" @click="handleMore($event)">展开</text>
|
|
</div>
|
|
<div class="labelList">
|
|
<!-- <text class="labelItem">美食排行榜</text>-->
|
|
<!-- <text class="labelItem">这是标签</text>-->
|
|
<!-- <text class="labelItem">这是标签标签</text>-->
|
|
</div>
|
|
<div class="typeList">
|
|
<text class="typeItem">{{detail.BUSINESSTRADE_NAME}}</text>
|
|
<text class="typeItem">{{detail.BRAND_TYPENAME}}</text>
|
|
</div>
|
|
<div class="suggest" v-if="detail.MerchantName">
|
|
{{detail.MerchantName || ''}}
|
|
<!-- <text class="value">{{detail.COMMISSION_RATIO}}</text>-->
|
|
<!-- <text class="text">建议提成比例</text>-->
|
|
</div>
|
|
</div>
|
|
<div class="typeBox">
|
|
<image class="typeIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/brand/foodIcon.svg"></image>
|
|
<text class="text">服务区</text>
|
|
<text class="number">{{detail.ServerpartList.length}}</text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="businessProject" >
|
|
<div class="top">
|
|
<text class="projectTitle">经营项目</text>
|
|
<text v-if="serviceList && serviceList.length>0" class="number">({{`${serviceList.length}`}})</text>
|
|
</div>
|
|
<scroll-view class="list" scroll-y="true" :scroll-with-animation="true">
|
|
<div class="listItem" v-for="(item,index) in serviceList" :key="index" @click="handleShopDetail(item)">
|
|
<div class="itemTop">
|
|
<div class="left">
|
|
<div class="iconBox">
|
|
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/brand/servicePosition.svg"></image>
|
|
</div>
|
|
<div class="content">
|
|
<text class="name">{{item.SERVERPART_NAME}}</text>
|
|
<div class="type" v-if="item.SERVERPART_TYPE">
|
|
<image class="typeIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/brand/typeIcon.svg"></image>
|
|
<text class="text">{{item.SERVERPART_TYPE}}</text>
|
|
</div>
|
|
<div v-else style="height: 16px;">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<text class="price">{{item.SECTIONFLOW_NUM}}</text>
|
|
<text class="unit">断面流量</text>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="itemContent">
|
|
<div class="contentTop">
|
|
<div class="left">
|
|
<text class="itemTitle">{{item.BUSINESSPROJECT_NAME || '-'}}</text>
|
|
<div class="typeBox" v-if="item.COMMODITY_COUNT > 0">
|
|
<!-- <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/brand/store.svg"></image>-->
|
|
<!-- <text class="typeName">在售商品</text>-->
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<text class="price">{{item.PROJECT_AMOUNT || '0'}}</text>
|
|
<text class="unit" >( 万元 )</text>
|
|
</div>
|
|
</div>
|
|
<div class="bottomItem">
|
|
<image class="bottomIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/brand/storeIcon.svg"></image>
|
|
<text class="text">{{item.COOPMERCHANTS_NAME || '-'}}</text>
|
|
</div>
|
|
|
|
<div class="bottomItem">
|
|
<image class="bottomIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/brand/fixed.svg"></image>
|
|
<text class="text">{{item.SERVERPARTSHOP_NAME || '-'}}</text>
|
|
</div>
|
|
|
|
<div class="bottomItem">
|
|
<image class="bottomIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/brand/date.svg"></image>
|
|
<text class="text">{{ item.PROJECT_STARTDATE || item.PROJECT_ENDDATE ?`${item.PROJECT_STARTDATE || ''}-` + `${item.PROJECT_ENDDATE || ''}`:'-' }}</text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</scroll-view>
|
|
</div>
|
|
<div class="meng" v-if="isShow" @click="handleClose">
|
|
<div class="descPopup" :style="{top:descTop +'px',left:(descLeft - 130)+'px'}">
|
|
{{detail.BRAND_DESC}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import request from '@/util/index.js'
|
|
export default {
|
|
name: "formatDetail",
|
|
data() {
|
|
return {
|
|
menu:{},
|
|
status:{},
|
|
detail:{},// 详情信息
|
|
serviceList:[],// 服务区列表
|
|
descTop:0,// 悬浮框的高度
|
|
descLeft:0,// 悬浮框的左边距
|
|
isShow: false,// 是否显示展开框
|
|
}
|
|
},
|
|
onLoad(query){
|
|
this.menu = uni.getMenuButtonBoundingClientRect()
|
|
let systemInfo = uni.getSystemInfoSync()
|
|
this.status = systemInfo
|
|
console.log('this.status',this.status)
|
|
console.log('query',query)
|
|
console.log('query',JSON.parse(query.detail))
|
|
this.detail = JSON.parse(query.detail)
|
|
this.handleGetList()
|
|
},
|
|
methods:{
|
|
//返回上一级s
|
|
handleBack(){
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
},
|
|
// 经营项目的列表
|
|
async handleGetList(){
|
|
uni.showLoading({
|
|
title: '正在加载...'
|
|
})
|
|
const req = {
|
|
BusinessTradeId: this.detail.BRAND_INDUSTRY,
|
|
BusinessBrandId: this.detail.BRAND_ID,
|
|
}
|
|
const data = await request.$webGet(`EShangApiMain/BusinessProject/GetBrandReceivables`,req)
|
|
console.log('data',data)
|
|
this.serviceList = data.Result_Data.List
|
|
this.serviceList.forEach(item=>{
|
|
item.SECTIONFLOW_NUM = this.$util.noDecimal(item.SECTIONFLOW_NUM)
|
|
})
|
|
console.log('this.serviceList',this.serviceList)
|
|
uni.hideLoading()
|
|
},
|
|
handleMore(e){
|
|
console.log(e)
|
|
this.descTop = e.detail.y + 15
|
|
this.descLeft = e.detail.x
|
|
this.isShow = true
|
|
},
|
|
handleClose(){
|
|
this.isShow = false
|
|
},
|
|
handleShopDetail(item){
|
|
console.log('item',item)
|
|
// if (item.COOPMERCHANTS_ID && item.COOPMERCHANTS_ID!=='-1'){
|
|
// uni.navigateTo({
|
|
// url:`/pages/commercialBI/shopDetail?id=${item.COOPMERCHANTS_ID}&COOPMERCHANTSID=${item.COOPMERCHANTS_ID_Encrypted}`
|
|
// })
|
|
// }
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.main{
|
|
background: #fff;
|
|
.header{
|
|
width: 100%;
|
|
height: 316px;
|
|
background: linear-gradient(180deg, #7660FF 0%, #ABCAFF 100%);
|
|
.headerBox{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
z-index: 1;
|
|
.headerTop{
|
|
width: 100vw;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index:99999;
|
|
.box{
|
|
padding: 0 16px;
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
transform: translateY(-50%);
|
|
.icon{
|
|
width: 24px;
|
|
height: 24px;
|
|
.img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.title{
|
|
font-size: 18px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
line-height: 28px;
|
|
}
|
|
.seize{
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
}
|
|
}
|
|
.detail{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 16px;
|
|
position: absolute;
|
|
.box{
|
|
width: 100%;
|
|
background: linear-gradient(45deg, #E0F3FF 0%, #E7EEFF 29%, #F1F4FF 50%, #E3EAFF 65%, #D8D2FF 100%);
|
|
border-radius: 8px;
|
|
border: 1px solid #FCFCFF;
|
|
box-sizing: border-box;
|
|
padding: 12px;
|
|
display: flex;
|
|
position: relative;
|
|
.left{
|
|
width: 72px;
|
|
height: 72px;
|
|
border: 3px solid #fff;
|
|
border-radius: 8px;
|
|
.img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.right{
|
|
flex:1;
|
|
margin-left: 12px;
|
|
.top{
|
|
display: flex;
|
|
align-items: center;
|
|
.title{
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 600;
|
|
color: #051433;
|
|
line-height: 22px;
|
|
}
|
|
.icon{
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-left: 6px;
|
|
}
|
|
}
|
|
.descBox{
|
|
display: flex;
|
|
align-items: center;
|
|
.desc{
|
|
width: 150px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: inline-block;
|
|
height: 18px;
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #5C5773;
|
|
line-height: 18px;
|
|
}
|
|
.more{
|
|
color: #396CFF;
|
|
font-size: 12px
|
|
}
|
|
}
|
|
.labelList{
|
|
height: 18px;
|
|
display: flex;
|
|
margin-top: 4px;
|
|
.labelItem{
|
|
padding: 0 4px;
|
|
background: rgba(57, 108, 255, 0.1);
|
|
border-radius: 4rpx;
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #396CFF;
|
|
line-height: 18px;
|
|
margin-right:5px
|
|
}
|
|
}
|
|
.typeList{
|
|
margin-top: 4px;
|
|
border-radius: 2px;
|
|
.typeItem{
|
|
display: inline-block;
|
|
background: linear-gradient(270deg, rgba(90, 199, 255, 0.15) 0%, rgba(90, 193, 255, 0.15) 100%);
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #0075A1;
|
|
line-height: 22px;
|
|
margin-right: 8px;
|
|
padding: 1px 8px;
|
|
}
|
|
}
|
|
.suggest{
|
|
min-height: 25px;
|
|
margin-top: 8px;
|
|
background: linear-gradient(90deg, rgba(72,119,255,0.15) 0%, rgba(72, 119, 255, 0) 100%);
|
|
border-radius: 2px;
|
|
box-sizing: border-box;
|
|
padding: 4px 8px;
|
|
.value{
|
|
font-size: 14px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #396CFF;
|
|
line-height: 16px;
|
|
}
|
|
.text{
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #8995B5;
|
|
line-height: 18px;
|
|
margin-left: 4px;
|
|
}
|
|
}
|
|
}
|
|
.typeBox{
|
|
display: flex;
|
|
align-items: center;
|
|
background: linear-gradient(135deg, #77A1FF 0%, #7967FF 100%);
|
|
border-radius: 0 8px 0 5px;
|
|
padding: 3px 8px;
|
|
//border-image: linear-gradient(227deg, rgba(255, 255, 255, 1), rgba(234, 240, 255, 1), rgba(255, 255, 255, 0)) 1 1;
|
|
position: absolute;
|
|
right: 0;top: 0;
|
|
.typeIcon{
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
.text{
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #E3DEFF;
|
|
line-height: 18px;
|
|
margin-left: 4px;
|
|
}
|
|
.number{
|
|
font-size: 14px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.businessProject{
|
|
width: 100%;
|
|
transform: translateY(-16px);
|
|
height: calc(100vh - 316px);
|
|
border-top-left-radius: 16px;
|
|
border-top-right-radius: 16px;
|
|
background: #fff;
|
|
box-sizing: border-box;
|
|
padding: 16px;
|
|
.top{
|
|
display: flex;
|
|
align-items: center;
|
|
.projectTitle{
|
|
font-size: 17px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #051433;
|
|
line-height: 24px
|
|
}
|
|
.number{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 20px;
|
|
margin-left: 4px;
|
|
}
|
|
}
|
|
.list{
|
|
width: 100%;
|
|
height: calc(100vh - 372px);
|
|
margin-top: 8px;
|
|
.listItem{
|
|
width: 100%;
|
|
border-radius: 8px;
|
|
border: 1px solid #E8E7FF;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 12px;
|
|
background: linear-gradient(207deg, rgba(202, 202, 255, 0.25) 0%, rgba(243, 242, 255, 0.25) 100%);
|
|
.itemTop{
|
|
width: 100%;
|
|
height: 60px;
|
|
background: linear-gradient(270deg, #EBECFF 0%, #E9F9FF 100%);
|
|
padding: 8px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.left{
|
|
display: flex;
|
|
align-items: center;
|
|
.iconBox{
|
|
width: 36px;
|
|
height: 36px;
|
|
border: 2px solid #fff;
|
|
border-radius: 50%;
|
|
.icon{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.content{
|
|
margin-left: 16px;
|
|
.name{
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #051433;
|
|
line-height: 22px;
|
|
}
|
|
.type{
|
|
width: 48px;
|
|
height: 16px;
|
|
border: 1px solid #4F92FF;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 3px;
|
|
.typeIcon{
|
|
width: 21px;
|
|
height: 100%;
|
|
}
|
|
.text{
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #6370FF;
|
|
line-height: 12px;
|
|
margin-left: 2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.right{
|
|
display: flex;
|
|
flex-direction: column;
|
|
.price{
|
|
font-size: 18px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #683FF6;
|
|
line-height: 22px;
|
|
text-align: right;
|
|
}
|
|
.unit{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #A3A2B9;
|
|
line-height: 18px;
|
|
}
|
|
}
|
|
}
|
|
.itemContent{
|
|
width: 100%;
|
|
flex: 1;
|
|
box-sizing: border-box;
|
|
padding: 16px 12px;
|
|
.contentTop{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
.left{
|
|
width: 80%;
|
|
.itemTitle{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #051433;
|
|
line-height: 20px;
|
|
}
|
|
.typeBox{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 4px;
|
|
.icon{
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
.typeName{
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #5C5773;
|
|
line-height: 18px;
|
|
margin-left: 4px;
|
|
}
|
|
}
|
|
}
|
|
.right{
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 20%;
|
|
.price{
|
|
font-size: 18px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #683FF6;
|
|
line-height: 22px;
|
|
text-align: right;
|
|
}
|
|
.unit{
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #ABA9B9;
|
|
line-height: 18px;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
.bottomItem{
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin-bottom: 4px;
|
|
.bottomIcon{
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-right: 4px;
|
|
margin-top: 2px;
|
|
}
|
|
.text{
|
|
flex: 1;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #5C5773;
|
|
line-height: 22px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
::-webkit-scrollbar {
|
|
width: 4px;
|
|
height: 4px;
|
|
color:transparent;
|
|
}
|
|
|
|
/*定义滚动条轨道 内阴影+圆角*/
|
|
::-webkit-scrollbar-track {
|
|
border-radius: 10px;
|
|
background-color:transparent;
|
|
}
|
|
|
|
/*定义滑块 内阴影+圆角*/
|
|
::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
background-color:transparent;
|
|
}
|
|
}
|
|
}
|
|
.meng{
|
|
position: relative;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
top: -100vh;left: 0;
|
|
z-index: 99;
|
|
.descPopup{
|
|
width: 200px;
|
|
background: #FFFFFF;
|
|
box-shadow: 0 0 30px 0 rgba(22,4,82,0.13);
|
|
border-radius: 6px;
|
|
box-sizing: border-box;
|
|
padding: 12px;
|
|
position: fixed;
|
|
top: 0;left: 16px;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
</style>
|