commit -m 机构画像

common/css/iconfont.scss

@@ -1,14 +1,8 @@
-// @font-face {
-//   font-family: "iconfont"; /* Project id 1519039 */
-//   src: url('/common/fonts/iconfont.woff2?t=1668502271099') format('woff2'),
-//        url('/common/fonts/iconfont.woff?t=1668502271099') format('woff'),
-//        url('/common/fonts/iconfont.ttf?t=1668502271099') format('truetype');
-// }
 @font-face {
   font-family: "iconfont"; /* Project id 1519039 */
-  src: url('//at.alicdn.com/t/c/font_1519039_ow9hswsn3r.woff2?t=1671427765583') format('woff2'),
-       url('//at.alicdn.com/t/c/font_1519039_ow9hswsn3r.woff?t=1671427765583') format('woff'),
-       url('//at.alicdn.com/t/c/font_1519039_ow9hswsn3r.ttf?t=1671427765583') format('truetype');
+  src: url('//at.alicdn.com/t/c/font_1519039_vj73i9j8tkm.woff2?t=1679652049039') format('woff2'),
+       url('//at.alicdn.com/t/c/font_1519039_vj73i9j8tkm.woff?t=1679652049039') format('woff'),
+       url('//at.alicdn.com/t/c/font_1519039_vj73i9j8tkm.ttf?t=1679652049039') format('truetype');
 }
 
 .iconfont {
@@ -19,6 +13,50 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-xiaoshou:before {
+  content: "\e74b";
+}
+
+.icon-fangwenjilu:before {
+  content: "\e752";
+}
+
+.icon-zixunjilu:before {
+  content: "\e753";
+}
+
+.icon-sousuoguanjianci:before {
+  content: "\e74e";
+}
+
+.icon-gongsi:before {
+  content: "\e74f";
+}
+
+.icon-dingdan:before {
+  content: "\e750";
+}
+
+.icon-rili:before {
+  content: "\e751";
+}
+
+.icon-xiugaiziliao:before {
+  content: "\e74d";
+}
+
+.icon-shangcheng:before {
+  content: "\e749";
+}
+
+.icon-tianxie:before {
+  content: "\e74a";
+}
+
+.icon-jigouhuaxiang:before {
+  content: "\e74c";
+}
+
 .icon-duanxin:before {
   content: "\e747";
 }

pages.json

@@ -674,6 +674,19 @@
 						"navigationBarTitleText": "机构画像"
 					}
 				},
+				{
+					"path": "club/club-visit",
+					"style": {
+						"navigationBarTitleText": "访问记录",
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path": "club/club-visit-detail",
+					"style": { 
+						"navigationBarTitleText": "访问详情"
+					}
+				},
 				{
 					"path": "club/allClub-list",
 					"style": {

pages/goods/product.vue

@@ -1458,7 +1458,6 @@ export default {
 				// - topBar.height
 			})
 			this.sectionPropsArr = sectionPropsArr
-
 			console.log('更新tab影响区域')
 		},
 		//当滑动时也能同步激活tab

pages/seller/club/club-list.vue

@@ -550,7 +550,7 @@ page,
 					margin-right: 5rpx;
 				}
 			}
-	}
+		}
 	}
 }
 </style>

pages/seller/club/club-portrait.vue

@@ -1,32 +1,43 @@
 <template>
-	<view class="container">
-		<!-- 订单 -->
-		<view class="charts-box"> 
-			<echartOrder ref="echart-order"/>
+	<view class="container clearfix">
+		<view class="charts-navbar" id="topBar">
+			<view
+				class="nav-item tui-skeleton-fillet"
+				v-for="(nav, index) in navBarList"
+				:key="index"
+				:class="{ current: tabCurrentIndex === nav.index }"
+				@click="tabChange(nav.index)"
+			>
+				<text>{{ nav.name }}</text> <text class="line"></text>
+			</view>
 		</view>
-		<!-- 关键词 -->
-		<view class="charts-box">
-			<echartKeyword ref="echart-keyword" />
-		</view>
-		<!-- 咨询记录 -->
-		<view class="charts-box">
-			<echartContact ref="echart-contact"/>
-		</view>
-		<!-- 访问记录 -->
-		<view class="charts-box">
-			<echartService ref="echart-service"/>
+		<view class="charts-content">
+			<!-- 重点资料 -->
+			<view class="charts-box charts-box0" id="charts-box0"> <echartInfo ref="echart-info" /> </view>
+			<!-- 订单 -->
+			<view class="charts-box charts-box1" id="charts-box1"> <echartOrder ref="echart-order" /> </view>
+			<!-- 关键词 -->
+			<view class="charts-box charts-box2" id="charts-box2"> <echartKeyword ref="echart-keyword" /> </view>
+			<!-- 咨询记录 -->
+			<view class="charts-box charts-box3" id="charts-box3"> <echartContact ref="echart-contact" /> </view>
+			<!-- 访问记录 -->
+			<view class="charts-box charts-box4" id="charts-box4"> <echartService ref="echart-service" /> </view>
 		</view>
 	</view>
 </template>
 
 <script>
 import { mapState, mapMutations } from 'vuex'
+import { debounce } from '@/common/config/common.js'
+import echartInfo from './components/echart-info'
 import echartOrder from './components/echart-order'
 import echartKeyword from './components/echart-keyword'
 import echartContact from './components/echart-contact'
 import echartService from './components/echart-service'
+const observers = {}
 export default {
 	components: {
+		echartInfo,
 		echartOrder,
 		echartKeyword,
 		echartContact,
@@ -34,25 +45,329 @@ export default {
 	},
 	data() {
 		return {
-			
+			navBarList: [
+				{ name: '重点资料', index: 0 },
+				{ name: '订单数据', index: 1 },
+				{ name: '搜索关键词', index: 2 },
+				{ name: '咨询记录', index: 3 },
+				{ name: '访问记录', index: 4 }
+			],
+			tabCurrentIndex: 0,
+			anchorList: [], // 锚点元素节点信息
+			anchorStatus: [0, 0, 0, 0, 0] // 分别代表5个锚点区域的开关 0:关  1:开
 		}
 	},
-	onLoad(option) {
-		
+	onLoad(option) {},
+	onReady() {
+		console.log('onReady')
+		// if (!this.isRequest) {
+		//     this.getAnchorSection()
+		// }
+		setTimeout(() => {
+			this.getAnchorSection()
+		}, 2000)
 	},
 	filters: {},
 	computed: {},
 	methods: {
-		
+		tabChange(index) {
+			this.tabCurrentIndex = index
+			this.scrollToAnchor()
+		},
+		// 获取锚点元素信息
+		getAnchorSection() {
+			const query = uni.createSelectorQuery().in(this)
+			query.selectAll('.charts-box').boundingClientRect(data => {
+				if (data.length > 0) {
+					this.anchorList = data
+					this.anchorList.forEach((dom, index) => {
+						uni.createSelectorQuery().select('.charts-content').boundingClientRect(data => {
+							//目标节点、也可以是最外层的父级节点
+							uni.createSelectorQuery().select(`#${dom.id}`).boundingClientRect(res => {
+								//dom
+								dom.top = res.top - data.top + 5
+							}).exec()
+						}).exec()
+					})
+					console.log(this.anchorList)
+					console.log('tabs is ready')
+					// clearInterval(this.selectorTimer)
+					this.observerAnchor(data)
+				}
+			}).exec()
+		},
+		// 滚动到锚点
+		scrollToAnchor() {
+			// const selector = '#anchor' + (this.currentTab + 1)
+			let scrollTop = 0
+			const query = uni.createSelectorQuery().in(this)
+			if (this.tabCurrentIndex > 0) {
+				scrollTop = this.anchorList[this.tabCurrentIndex].top
+			}
+			uni.pageScrollTo({
+				scrollTop: scrollTop
+			})
+		},
+		// 为需要观测的区域创建观测者
+		observerAnchor(selectorList = []) {
+			const height = uni.getSystemInfoSync().windowHeight - 70
+			selectorList.forEach((selector, index) => {
+				observers[selector.id] = uni.createIntersectionObserver(this)
+				observers[selector.id].relativeToViewport({ bottom: -height }).observe(`#${selector.id}`, res => {
+					if (res.intersectionRatio > 0) {
+						this.anchorStatus[index] = 1
+						// console.log(index, `当前区域为${selector.id}标签选择器的区域...`)
+					} else {
+						this.anchorStatus[index] = 0
+						// console.log(index, `离开区域为${selector.id}标签选择器的区域...`)
+					}
+				})
+			})
+		},
+		// 设置currentTab
+		setCurrentTab: debounce(function() {
+			const index = this.anchorStatus.lastIndexOf(1)
+			if (this.tabCurrentIndex !== index) this.tabCurrentIndex = index
+		}, 200)
+	},
+	onPageScroll(e) {
+		this.scrollTop = e.scrollTop
 	},
 	onShow() {}
 }
 </script>
 
 <style lang="scss">
+page {
+	background-color: #f5f5f5 !important;
+}
+.container {
+	width: 100%;
+	height: auto;
+	box-sizing: border-box;
+	padding: 0 24rpx;
+	padding-top: 122rpx;
+}
+.charts-navbar {
+	width: 100%;
+	height: 90rpx;
+	background-color: #ffffff;
+	box-sizing: border-box;
+	padding: 20rpx 0;
+	display: flex;
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 99;
+	.nav-item {
+		display: flex;
+		flex: 1;
+		justify-content: center;
+		align-items: center;
+		height: 50rpx;
+		font-size: $font-size-28;
+		color: $text-color;
+		position: relative;
+		float: left;
+		position: relative;
+		.line {
+			width: 60rpx;
+			height: 2px;
+			border-radius: 1px;
+			background: #ffffff;
+			position: absolute;
+			bottom: 0;
+			left: 50%;
+			margin-left: -30rpx;
+		}
+		&.current {
+			color: $color-system;
+			.line {
+				background: $color-system;
+			}
+		}
+	}
+}
+.charts-content{
+	width: 100%;
+	height: auto;
+}
 .charts-box {
 	width: 100%;
-	height: 600rpx;
+	min-height: 500rpx;
 	box-sizing: border-box;
+	padding: 34rpx 24rpx;
+	background-color: #fff;
+	margin-bottom: 32rpx;
+	border-radius: 16rpx;
+	float: left;
+	.echart-content {
+		width: 100%;
+		.echart-title {
+			width: 100%;
+			height: 96rpx;
+			float: left;
+			box-sizing: border-box;
+			padding: 16rpx 0 24rpx 0;
+			.e-icon {
+				width: 56rpx;
+				height: 56rpx;
+				float: left;
+				text-align: center;
+				line-height: 56rpx;
+				border-radius: 50%;
+				&.e1 {
+					background-color: #1890f9;
+				}
+				&.e2 {
+					background-color: #e15616;
+				}
+				&.e3 {
+					background-color: #f2637b;
+				}
+				&.e4 {
+					background-color: #f99e0a;
+				}
+				&.e5 {
+					background-color: #36cbcb;
+				}
+				.iconfont {
+					font-size: 30rpx;
+					color: #fff;
+				}
+			}
+			.e-name {
+				float: left;
+				line-height: 56rpx;
+				font-size: 30rpx;
+				margin-left: 24rpx;
+				color: #333;
+			}
+			.e-start {
+				float: right;
+				line-height: 56rpx;
+				font-size: 28rpx;
+				color: #34cc8c;
+			}
+		}
+		.echart-main {
+			width: 100%;
+			height: 404rpx;
+			box-sizing: border-box;
+			padding: 32rpx 40rpx;
+			position: relative;
+			float: left;
+			background-color: #f7f7f7;
+			.echart-text {
+				width: 100%;
+				line-height: 40rpx;
+				margin-bottom: 20rpx;
+				font-size: 28rpx;
+				color: #333;
+				float: left;
+				.label {
+					color: #999;
+					text-align-last: justify;
+				}
+			}
+			.echart-next {
+				width: 100rpx;
+				height: 100%;
+				position: absolute;
+				right: 10rpx;
+				top: 0;
+				line-height: 404rpx;
+				font-size: 28rpx;
+				color: #1890f9;
+			}
+		}
+		.echart-search {
+			width: 100%;
+			height: auto;
+			float: left;
+			margin-bottom: 58rpx;
+			.echart-search-text {
+				width: 100%;
+				height: 34rpx;
+				margin-bottom: 20rpx;
+				.search-text {
+					float: left;
+					line-height: 34rpx;
+					font-size: 24rpx;
+					color: #333;
+					margin-right: 20rpx;
+					text {
+						color: #e15616;
+					}
+				}
+			}
+			.echart-search-date {
+				width: 100%;
+				height: 56rpx;
+				box-sizing: border-box;
+				.line {
+					color: #999999;
+					float: left;
+					line-height: 56rpx;
+					margin: 0 20rpx;
+				}
+				.echart-search-date-input {
+					width: 228rpx;
+					height: 56rpx;
+					border: 1px solid #e2e2e2;
+					border-radius: 8rpx;
+					box-sizing: border-box;
+					padding: 0 20rpx;
+					line-height: 56rpx;
+					float: left;
+					position: relative;
+					.input-text {
+						display: block;
+						height: 56rpx;
+						font-size: 26rpx;
+						color: #666666;
+					}
+					.icon-riqi {
+						color: #999;
+						display: block;
+						width: 40rpx;
+						height: 56rpx;
+						position: absolute;
+						right: 10rpx;
+						top: 0;
+						line-height: 56rpx;
+					}
+				}
+			}
+			.echart-search-time {
+				width: 100%;
+				height: 40rpx;
+				margin-top: 24rpx;
+				.time-tab {
+					width: 80rpx;
+					height: 40rpx;
+					float: left;
+					border-radius: 20rpx;
+					margin-right: 24rpx;
+					box-sizing: border-box;
+					border: 1px solid #b2b2b2;
+					line-height: 38rpx;
+					font-size: 24rpx;
+					text-align: center;
+					color: #999;
+					&.current {
+						background-color: #fef6f3;
+						border-color: #e15616;
+						color: #e15616;
+					}
+				}
+			}
+		}
+		.echart-mains {
+			width: 100%;
+			min-height: 400rpx;
+			float: left;
+		}
+	}
 }
 </style>

pages/seller/club/club-visit-detail.vue

@@ -0,0 +1,34 @@
+<template>
+	<view>
+			<view class="uni-container">
+				<uni-table ref="table" :loading="loading" border stripe type="selection" emptyText="暂无更多数据" @selection-change="selectionChange">
+					<uni-tr>
+						<uni-th width="150" align="center">日期</uni-th>
+						<uni-th width="150" align="center">姓名</uni-th>
+						<uni-th align="center">地址</uni-th>
+						<uni-th width="204" align="center">设置</uni-th>
+					</uni-tr>
+					<uni-tr v-for="(item, index) in tableData" :key="index">
+						<uni-td>{{ item.date }}</uni-td>
+						<uni-td>
+							<view class="name">{{ item.name }}</view>
+						</uni-td>
+						<uni-td align="center">{{ item.address }}</uni-td>
+						<uni-td>
+							<view class="uni-group">
+								<button class="uni-button" size="mini" type="primary">修改</button>
+								<button class="uni-button" size="mini" type="warn">删除</button>
+							</view>
+						</uni-td>
+					</uni-tr>
+				</uni-table>
+				<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" /></view>
+			</view>
+		</view>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

pages/seller/club/club-visit.vue

@@ -0,0 +1,224 @@
+<template>
+	<view class="container ">
+		<au-custom :navbar-data='nvabarData' @navigateBack="hanldNavigateBack"></au-custom>
+		<view class="vsit-content">
+			<view class="list" v-for="(item,index) in list" :key="index" >
+				<view class="list-title">{{ item.year }}年</view>
+				<view class="list-main clear">
+					<view class="list-main-item" v-for="(visit,index) in item.data">
+						<view class="item-le">
+							<view class="item-le-t none">{{ visit.month }}</view>
+							<view class="item-le-t">{{ visit.day }}</view>
+						</view>
+						<view class="item-ri">
+							<view class="item-ri-i">访问记录</view>
+							<view class="item-ri-i none">{{ visit.num }}条</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>	
+</template>
+
+<script>
+	export default{
+		data(){
+			return{
+				nvabarData: {		//顶部自定义导航
+					haveHome:true,
+					haveBack:true,
+					textColor:'#ffffff',
+					showCapsule:1, // 是否显示左上角图标  1表示显示  0表示不显示,
+					showSearch: 0,
+					title: '',  // 导航栏 中间的标题
+					textLeft:this.$store.state.isIphone
+				},
+				list:[
+					{
+						year:"2023",
+						data:[
+							{
+								month:'三月',
+								day:'03-27',
+								num:5
+							},
+							{
+								month:'三月',
+								day:'03-27',
+								num:5
+							},
+							{
+								month:'三月',
+								day:'03-27',
+								num:5
+							},
+							{
+								month:'三月',
+								day:'03-27',
+								num:5
+							}
+						]
+					},
+					{
+						year:"2022",
+						data:[
+							{
+								month:'十二月',
+								day:'12-27',
+								num:5
+							},
+							{
+								month:'十二月',
+								day:'12-27',
+								num:15
+							},
+							{
+								month:'十二月',
+								day:'12-27',
+								num:50
+							},
+							{
+								month:'十二月',
+								day:'12-27',
+								num:5
+							}
+						]
+					},
+				]
+			}
+		},
+		filters:{
+			
+		},
+		onLoad(option) {
+			
+		},
+		methods:{
+			hanldNavigateBack(){
+				uni.navigateBack({
+					delta: 1
+				})
+			}
+		},
+		onShow() {
+			
+		}
+	}
+</script>
+
+<style lang="scss">
+	page{
+		width: 100%;
+		height: auto;
+		background-color: #F7F7F7 !important;
+	}
+	.container{
+		width: 100%;
+		min-height: 700rpx;
+		background: url(https://static.caimei365.com/app/img/bg/bg_visit@2x.png) top center no-repeat;
+		background-size: contain;
+		box-sizing: border-box;
+		padding: 0 24rpx;
+		padding-top: 441rpx;
+	}
+	.vsit-content{
+		width: 100%;
+		min-height: 1000rpx;
+		background: #FFFFFF;
+		border-radius: 24rpx;
+		padding: 52rpx 24rpx;
+		box-sizing: border-box;
+		.list{
+			width: 100%;
+			height: auto;
+			margin-bottom: 80rpx;
+			.list-title{
+				width: 100%;
+				height: 58rpx;
+				margin-bottom: 20rpx;
+				font-size: 42rpx;
+				color: #333;
+			}
+			.list-main{
+				width: 100%;
+				height: auto;
+				padding: 24rpx 16rpx 24rpx 70rpx;
+				box-sizing: border-box;
+				position: relative;
+				&::before{
+					content:'';
+					height: 100%; 
+					border-left: 2px dashed #FFA880;
+					position: absolute;
+					left: 37rpx;
+					top: 0;
+				}
+				.list-main-item{
+					width: 565rpx;
+					height: 120rpx;
+					box-sizing: border-box;
+					padding: 12rpx 35rpx;
+					background: url(https://static.caimei365.com/app/img/bg/bg_visit_list@2x.png)no-repeat;
+					background-size: cover;
+					margin-bottom: 40rpx;
+					position: relative;
+					border-radius: 16rpx;
+					&::after{
+						content:'';
+						width: 40rpx;
+						height: 40rpx;
+						background: url(https://static.caimei365.com/app/img/bg/bg_visit_radius@2x.png)no-repeat;
+						background-size: cover;
+						position: absolute;
+						left: -52rpx;
+					}
+					.item-le{
+						height: 100%;
+						box-sizing: border-box;
+						padding-right: 30rpx;
+						position: relative;
+						float: left;
+						&::before{
+							content: '';
+							width: 1px;
+							height: 48rpx;
+							background-color: #CCC;
+							position: absolute;
+							top: 24rpx;
+							right: 0;
+						}
+						.item-le-t{
+							width: 120rpx;
+							height: 48rpx;
+							line-height: 48rpx;
+							font-size: 30rpx;
+							text-align: center;
+							color: #333333;
+							&.none{
+								color: #999;
+							}
+						}
+					}
+					.item-ri{
+						height: 96rpx;
+						padding-left: 48rpx;
+						float: left;
+						.item-ri-i{
+							padding-right: 60rpx;
+							line-height: 96rpx;
+							font-size: 28rpx;
+							text-align: center;
+							color: #999;
+							float: left;
+							&.none{
+								font-size: 30rpx;
+								color: #E15616;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

pages/seller/club/components/echart-contact.vue

@@ -1,12 +1,50 @@
 <template>
-	<view>
-		<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
+	<view class="echart-content">
+		<view class="echart-title">
+			<view class="e-icon e4"><text class="iconfont icon-zixunjilu"></text></view> <view class="e-name">咨询记录</view>
+		</view>
+		<view class="echart-search">
+			<view class="echart-search-text">
+				<view class="search-text">所有：<text>￥10000(10个)</text></view>
+				<view class="search-text">当前范围：<text>￥10000(10个)</text></view>
+			</view>
+			<view class="echart-search-date">
+				<view class="echart-search-date-input">
+					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindStartDateChange">
+						<text class="input-text">{{ queryData.startAddTime }}</text>
+					</picker>
+					<text class="iconfont icon-riqi"></text>
+				</view>
+				<view class="line">-</view>
+				<view class="echart-search-date-input">
+					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindEndDateChange">
+						<text class="input-text">{{ queryData.endAddTime }}</text>
+					</picker>
+					<text class="iconfont icon-riqi"></text>
+				</view>
+			</view>
+			<view class="echart-search-time">
+				<view
+					class="time-tab"
+					v-for="(time, index) in timeList"
+					:class="{ current: current === index }"
+					:key="index"
+					@click="handleTimeClick(time.current,index)"
+					>{{ time.label }}</view
+				>
+			</view>
+		</view>
+		<view class="echart-mains">
+			<qiun-data-charts type="column" :opts="opts" :chartData="chartData" :animation="false"/>
+		</view>
 	</view>
 </template>
 
 <script>
 import { mapState, mapMutations } from 'vuex'
+import chartMixin from './mixins/chart.mixin.js'
 export default {
+	mixins: [chartMixin],
 	data() {
 		return {
 			chartData: {},

pages/seller/club/components/echart-info.vue

@@ -0,0 +1,41 @@
+<template>
+	<view class="echart-content"> 
+		<view class="echart-title">
+			<view class="e-icon e1"><text class="iconfont icon-gongsi"></text></view>
+			<view class="e-name">采美信息技术有限公司</view>
+			<view class="e-start">已上线</view>
+		</view>
+		<view class="echart-main clearfix">
+			<view class="echart-text"><text class="label">联系人：</text>黄志国</view>
+			<view class="echart-text"><text class="label">手机号：</text>15817887258</view>
+			<view class="echart-text"><text class="label">联系人身份：</text>采购</view>
+			<view class="echart-text"><text class="label">机构类型：</text>医美-门诊</view>
+			<view class="echart-text"><text class="label">地址：</text>安徽省合肥市</view>
+			<view class="echart-text"><text class="label">注册 间：</text> 2023-03-23</view>
+			<view class="echart-next">详情></view>
+		</view>
+	</view>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex'
+export default {
+	data() {
+		return {
+			
+		}
+	},
+	created() {
+	},
+	filters: {},
+	computed: {},
+	methods: {
+		
+	},
+	onShow() {}
+}
+</script>
+
+<style lang="scss">
+
+</style>

pages/seller/club/components/echart-keyword.vue

@@ -1,12 +1,50 @@
 <template>
-	<view>
-		<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
+	<view class="echart-content">
+		<view class="echart-title">
+			<view class="e-icon e3"><text class="iconfont icon-sousuoguanjianci"></text></view> <view class="e-name">搜索关键词</view>
+		</view>
+		<view class="echart-search">
+			<view class="echart-search-text">
+				<view class="search-text">所有：<text>￥10000(10个)</text></view>
+				<view class="search-text">当前范围：<text>￥10000(10个)</text></view>
+			</view>
+			<view class="echart-search-date">
+				<view class="echart-search-date-input">
+					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindStartDateChange">
+						<text class="input-text">{{ queryData.startAddTime }}</text>
+					</picker>
+					<text class="iconfont icon-riqi"></text>
+				</view>
+				<view class="line">-</view>
+				<view class="echart-search-date-input">
+					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindEndDateChange">
+						<text class="input-text">{{ queryData.endAddTime }}</text>
+					</picker>
+					<text class="iconfont icon-riqi"></text>
+				</view>
+			</view>
+			<view class="echart-search-time">
+				<view
+					class="time-tab"
+					v-for="(time, index) in timeList"
+					:class="{ current: current === index }"
+					:key="index"
+					@click="handleTimeClick(time.current,index)"
+					>{{ time.label }}</view
+				>
+			</view>
+		</view>
+		<view class="echart-mains">
+			<qiun-data-charts type="column" :opts="opts" :chartData="chartData" :animation="false"/>
+		</view>
 	</view>
 </template>
 
 <script>
 import { mapState, mapMutations } from 'vuex'
+import chartMixin from './mixins/chart.mixin.js'
 export default {
+	mixins: [chartMixin],
 	data() {
 		return {
 			chartData: {},

pages/seller/club/components/echart-order.vue

@@ -1,11 +1,54 @@
 <template>
-	<view> <qiun-data-charts type="pie" :opts="opts" :chartData="chartData" :errorShow="false" /> </view>
+	<view class="echart-content">
+		<view class="echart-title">
+			<view class="e-icon e2"><text class="iconfont icon-dingdan"></text></view> <view class="e-name">订单</view>
+		</view>
+		<view class="echart-search">
+			<view class="echart-search-text">
+				<view class="search-text">所有：<text>￥10000(10个)</text></view>
+				<view class="search-text">当前范围：<text>￥10000(10个)</text></view>
+			</view>
+			<view class="echart-search-date">
+				<view class="echart-search-date-input">
+					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindStartDateChange">
+						<text class="input-text">{{ queryData.startAddTime }}</text>
+					</picker>
+					<text class="iconfont icon-riqi"></text>
+				</view>
+				<view class="line">-</view>
+				<view class="echart-search-date-input">
+					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindEndDateChange">
+						<text class="input-text">{{ queryData.endAddTime }}</text>
+					</picker>
+					<text class="iconfont icon-riqi"></text>
+				</view>
+			</view>
+			<view class="echart-search-time">
+				<view
+					class="time-tab"
+					v-for="(time, index) in timeList"
+					:class="{ current: current === index }"
+					:key="index"
+					@click="handleTimeClick(time.current,index)"
+					>{{ time.label }}</view
+				>
+			</view>
+		</view>
+		<view class="echart-mains">
+			<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" :errorShow="false" />
+		</view>
+	</view>
 </template>
 
 <script>
 import { mapState, mapMutations } from 'vuex'
+import chartMixin from './mixins/chart.mixin.js'
 export default {
+	mixins: [chartMixin],
 	data() {
+		const currentDate = this.getDate({
+			format: true
+		})
 		return {
 			chartData: {},
 			opts: {
@@ -112,7 +155,7 @@ export default {
 		this.getServerData()
 	},
 	filters: {},
-	computed: {},
+	
 	methods: {
 		getServerData() {
 			//模拟从服务器获取数据时的延时
@@ -121,13 +164,14 @@ export default {
 				let res = {
 					series: [
 						{
+							format: 'pieDemo1',
 							data: [
-								{ name: '普通订单【62.5%】', value: 50 },
-								{ name: '二手订单【0%】', value: 5 },
-								{ name: '返佣订单【0%】', value: 5 },
-								{ name: '部分退款订单【0%】', value: 2 },
-								{ name: '全部退款订单【0%】', value: 4 },
-								{ name: '已关闭订单【37.5%】', value: 6 }
+								{ name: '普通', value: 50, per: '63.5%' },
+								{ name: '二手', value: 5, per: '0%' },
+								{ name: '返佣', value: 5, per: '0%' },
+								{ name: '部分退款', value: 2, per: '0%' },
+								{ name: '全部退款', value: 4, per: '36.5%' },
+								{ name: '已关闭', value: 60, per: '0%' }
 							]
 						}
 					]
@@ -140,11 +184,4 @@ export default {
 }
 </script>
 
-<style lang="scss">
-.charts-box {
-	width: 100%;
-	height: 600rpx;
-	box-sizing: border-box;
-	padding: 20rpx;
-}
-</style>
+<style lang="scss"></style>

pages/seller/club/components/echart-service.vue

@@ -1,12 +1,46 @@
 <template>
-	<view>
-		<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
+	<view class="echart-content">
+		<view class="echart-title">
+			<view class="e-icon e5"><text class="iconfont icon-fangwenjilu"></text></view> <view class="e-name">访问记录</view>
+		</view>
+		<view class="echart-search">
+			<view class="echart-search-date">
+				<view class="echart-search-date-input">
+					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindStartDateChange">
+						<text class="input-text">{{ queryData.startAddTime }}</text>
+					</picker>
+					<text class="iconfont icon-riqi"></text>
+				</view>
+				<view class="line">-</view>
+				<view class="echart-search-date-input">
+					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindEndDateChange">
+						<text class="input-text">{{ queryData.endAddTime }}</text>
+					</picker>
+					<text class="iconfont icon-riqi"></text>
+				</view>
+			</view>
+			<view class="echart-search-time">
+				<view
+					class="time-tab"
+					v-for="(time, index) in timeList"
+					:class="{ current: current === index }"
+					:key="index"
+					@click="handleTimeClick(time.current,index)"
+					>{{ time.label }}</view
+				>
+			</view>
+		</view>
+		<view class="echart-mains">
+			<qiun-data-charts type="column" :opts="opts" :chartData="chartData" :animation="false"/>
+		</view>
 	</view>
 </template>
 
 <script>
 import { mapState, mapMutations } from 'vuex'
+import chartMixin from './mixins/chart.mixin.js'
 export default {
+	mixins: [chartMixin],
 	data() {
 		return {
 			chartData: {},

pages/seller/club/components/mixins/chart.mixin.js

@@ -0,0 +1,60 @@
+// 统计数据
+// 统计类型 1：首页banner；2：直播模块；3：最新活动；4：热门文章；5：新品橱窗；6：活动列表
+import Vue from 'vue'
+const chartMixin = {
+    data() {
+        const currentDate = this.getDate({
+        	format: true
+        })
+        return {
+        	date: currentDate,
+        	current:0,
+        	timeList: [
+        		{ label: '全年', current: 0 },
+        		{ label: '半年', current: 1 },
+        		{ label: '月', current: 2 },
+        		{ label: '日', current: 3 }
+        	]
+        }
+    },
+    computed: {
+        startDate() {
+            return this.getDate('start')
+        },
+        endDate() {
+            return this.getDate('end')
+        }
+    },
+    methods: {
+        handleTimeClick(type,index){
+      	//年月日点击
+      	this.current = index
+        },
+        bindStartDateChange(event) {
+      	//开始时间
+      	console.log('开始时间==>', event.detail.value)
+      	this.queryData.startAddTime = event.detail.value
+        },
+        bindEndDateChange(event) {
+      	//结束时间
+      	console.log('结束时间==>', event.detail.value)
+      	this.queryData.endAddTime = event.detail.value
+        },
+        getDate(type) {
+      	const date = new Date()
+      	let year = date.getFullYear()
+      	let month = date.getMonth() + 1
+      	let day = date.getDate()
+      	if (type === 'start') {
+      		year = year - 1
+      	} else if (type === 'end') {
+      		year = year + 1
+      	}
+      	month = month > 9 ? month : '0' + month
+      	day = day > 9 ? day : '0' + day
+      	return `${year}-${month}-${day}`
+        }
+    }
+}
+
+export default chartMixin

pages/seller/club/list.vue

@@ -120,6 +120,15 @@
 										"
 										>{{ club.customerValue }} <text class="iconfont icon-xiayibu"></text
 									></text>
+									<text class="tags-or" @click.stop="orderHistory(club)">
+										<text class="iconfont icon-dingdan"></text> 订单列表
+										<text
+											v-if="club.orderNum > 0"
+											class="opea-badge uni-badge uni-badge-error uni-small uni-badge--small icon-num"
+										>
+											{{ showBadge(club.orderNum) }}
+										</text>
+									</text>
 								</view>
 								<view class="list-ntel" v-if="tabSmallCurrentIndex === 1">
 									<text class="list-link">销售：{{ club.serviceName ? club.serviceName : '' }}</text>
@@ -130,26 +139,44 @@
 								</view>
 							</view>
 						</view>
-						<view class="list-cell-btn">
-							<view class="btn" @click.stop="checkData(club)">修改资料</view>
-							<view class="btn" @click.stop="orderHistory(club)">
-								历史订单
-								<text
-									v-if="club.orderNum > 0"
-									class="opea-badge uni-badge uni-badge-error uni-small uni-badge--small icon-num"
+						<view class="club-list-bot">
+							<template v-if="tabSmallCurrentIndex === 0">
+								<view class="btn" @click.stop="handleClickOper(1, club)">
+									<text class="iconfont icon-jigouhuaxiang"></text> 机构画像</view
 								>
-									{{ showBadge(club.orderNum) }}
-								</text>
-							</view>
-							<view
-								class="btn"
-								v-if="isManage && club.serviceProviderId != 1342"
-								@click.stop="handleReplaceClub(club)"
-								>更换协销</view
-							>
-							<view class="btn" @click.stop="handleClubinfo(club)" v-if="club.recordCount === 1"
-								>注册行为记录</view
-							>
+								<view class="btn" @click.stop="handleClickOper(2, club)">
+									<text class="iconfont icon-tianxie"></text> 填写咨询记录</view
+								>
+								<view class="btn" @click.stop="handleClickOper(4, club)">
+									<text class="iconfont icon-shangcheng"></text>商城访问记录
+								</view>
+								<view
+									class="btn"
+									v-if="tabSmallCurrentIndex === 0"
+									@click.stop="handleShowBubble(club, index)"
+								>
+									<text class="iconfont icon-gengduo2"></text>
+									<view class="btn-bubble" v-if="currentIndex === index && club.bubble">
+										<view class="btn-view border" @click.stop="checkData(club)">
+											<text class="iconfont icon-xiugaiziliao"></text> 修改资料
+										</view>
+										<view class="btn-view" @click.stop="handleReplaceClub(club)">
+											<text class="iconfont icon-xiaoshou"></text> 更换协销
+										</view>
+									</view>
+								</view>
+							</template>
+							<template v-if="tabSmallCurrentIndex === 1">
+								<view class="btn" @click.stop="handleClickOper(1, club)">
+									<text class="iconfont icon-jigouhuaxiang"></text> 机构画像</view
+								>
+								<view class="btn" @click.stop="handleClickOper(2, club)">
+									<text class="iconfont icon-tianxie"></text> 填写咨询记录</view
+								>
+								<view class="btn none" @click.stop="handleClickOper(4, club)">
+									<text class="iconfont icon-xiaoshou"></text>更换协销</view
+								>
+							</template>
 						</view>
 					</view>
 					<!--加载loadding-->
@@ -219,7 +246,7 @@ export default {
 	data() {
 		return {
 			listTab: [{ name: '个人机构' }, { name: '资质机构' }],
-			listItemTab: [{ name: '我的机构' }, { name: '组员机构' }, { name: '待分配机构' }],
+			listItemTab: [{ name: '我的机构' }, { name: '组员机构' }],
 			listQuery: Object.assign({}, defaultListQuery),
 			isShowClose: false,
 			isEmpty: false,
@@ -246,7 +273,8 @@ export default {
 				clubId: 0,
 				spId: 0
 			},
-			isShowIndex: false
+			isShowIndex: false,
+			currentIndex: 0
 		}
 	},
 	onLoad(option) {
@@ -272,7 +300,10 @@ export default {
 					if (data.list && data.list.length > 0) {
 						this.isEmpty = false
 						this.hasNextPage = response.data.hasNextPage
-						this.clubList = data.list
+						this.clubList = data.list.map((el, index) => {
+							el.bubble = false
+							return el
+						})
 						this.pullFlag = false
 						setTimeout(() => {
 							this.pullFlag = true
@@ -471,6 +502,10 @@ export default {
 		},
 		handleNavigateIndex() {
 			this.$api.navigateTo(`/pages/seller/index/index`)
+		},
+		handleShowBubble(club, index) {
+			this.currentIndex = index
+			club.bubble = !club.bubble
 		}
 	},
 	onReachBottom() {
@@ -629,7 +664,7 @@ page,
 .club-main {
 	.list {
 		width: 100%;
-		height: 268rpx;
+		height: 288rpx;
 		padding: 24rpx;
 		box-sizing: border-box;
 		background: #ffffff;
@@ -649,12 +684,12 @@ page,
 					height: 140rpx;
 					border-radius: 8rpx;
 				}
-				.list-id{
+				.list-id {
 					display: inline-block;
 					width: 100%;
 					height: 32rpx;
 					line-height: 32rpx;
-					background: rgba(0,0,0,0.1);
+					background: rgba(0, 0, 0, 0.1);
 					color: #333;
 					position: absolute;
 					top: 0;
@@ -667,7 +702,7 @@ page,
 				}
 			}
 			.list-content {
-				width: 498rpx;
+				width: 530rpx;
 				height: 140rpx;
 				float: left;
 				padding-left: 30rpx;
@@ -725,6 +760,25 @@ page,
 							margin-left: 10rpx;
 						}
 					}
+					.tags-or {
+						display: inline-block;
+						height: 36rpx;
+						box-sizing: border-box;
+						font-size: $font-size-22;
+						color: #1890f9;
+						text-align: center;
+						line-height: 36rpx;
+						position: relative;
+						.opea-badge {
+							position: absolute;
+							right: -30rpx;
+							top: -15rpx;
+						}
+						.icon-xiayibu {
+							font-size: 22rpx;
+							color: #1890f9;
+						}
+					}
 				}
 				.list-ntel {
 					width: 100%;
@@ -746,31 +800,104 @@ page,
 				}
 			}
 		}
-		.list-cell-btn {
+		.club-list-bot {
 			width: 100%;
-			height: 60rpx;
-			display: flex;
-			color: #166ce1;
-			flex-direction: row;
-			align-items: center;
+			height: 80rpx;
 			float: left;
+			background-color: #f7f7f7;
+			border-radius: 8rpx;
 			margin-top: 20rpx;
 			.btn {
-				height: 60rpx;
+				height: 80rpx;
 				box-sizing: border-box;
+				line-height: 80rpx;
 				padding: 0 20rpx;
-				line-height: 60rpx;
-				border-radius: 30rpx;
 				font-size: $font-size-24;
-				color: $text-color;
+				color: #333333;
 				text-align: center;
-				margin: 0 20rpx 0 0;
+				float: left;
 				position: relative;
-				border: 1px solid #999999;
-				.opea-badge {
-					position: absolute;
-					right: -10rpx;
-					top: -20rpx;
+				&:nth-child(1) {
+					&:before {
+						content: '';
+						width: 1px;
+						height: 20rpx;
+						background-color: #b2b2b2;
+						position: absolute;
+						right: 0;
+						top: 30rpx;
+					}
+				}
+				&:nth-child(2) {
+					&:before {
+						content: '';
+						width: 1px;
+						height: 20rpx;
+						background-color: #b2b2b2;
+						position: absolute;
+						right: 0;
+						top: 30rpx;
+					}
+				}
+				&:nth-child(3) {
+					&:before {
+						content: '';
+						width: 1px;
+						height: 20rpx;
+						background-color: #b2b2b2;
+						position: absolute;
+						right: 0;
+						top: 30rpx;
+					}
+				}
+				&:last-child {
+					padding: 0 28rpx;
+					.iconfont {
+						font-weight: bold;
+					}
+					.btn-bubble {
+						width: 200rpx;
+						height: 160rpx;
+						background: rgba(51, 51, 51, 0.8);
+						position: absolute;
+						top: -154rpx;
+						right: 0;
+						border-radius: 8rpx;
+						&:before {
+							content: '';
+							width: 0;
+							height: 0;
+							border: 15rpx solid transparent;
+							border-top: 15rpx solid rgba(51, 51, 51, 0.8);
+							position: absolute;
+							bottom: -28rpx;
+							right: 42rpx;
+						}
+						.btn-view {
+							width: 100%;
+							height: 80rpx;
+							box-sizing: border-box;
+							line-height: 80rpx;
+							font-size: $font-size-24;
+							color: #ffffff;
+							text-align: center;
+							float: left;
+							.iconfont {
+								font-size: 28rpx;
+								color: #ffffff;
+								margin-right: 5rpx;
+								font-weight: normal;
+							}
+							&.border {
+								border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+							}
+						}
+					}
+				}
+				.iconfont {
+					font-size: 30rpx;
+					color: #333333;
+					margin-right: 5rpx;
 				}
 			}
 		}

services/config.env.js

@@ -4,8 +4,8 @@ if(process.env.NODE_ENV === 'development'){
     // URL_CONFIG = 'http://192.168.2.67:18002'	 //智捷联调地址
     // URL_CONFIG = 'http://192.168.2.68:18002'	 //涛涛联调地址
     // URL_CONFIG = 'http://192.168.2.17:18002' //志国联调地址
-    // URL_CONFIG = 'https://core-b.caimei365.com'
-    URL_CONFIG = 'https://core.caimei365.com'  
+    URL_CONFIG = 'https://core-b.caimei365.com'
+    // URL_CONFIG = 'https://core.caimei365.com'  
 }else{
     // 生产环境
     // URL_CONFIG = 'https://core-b.caimei365.com'

uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js

@@ -71,11 +71,17 @@ const cfu = {
                 return series[index].name+'：'+series[index].data+'元'
             }
         },
+        'pieDemo1':function(val, index, series, opts){
+		    if(index !== undefined){
+		        return `${series[index].name}${series[index].per}`
+		    }
+        },
         'xAxisDemo3': function(val) {
-            const index = val.indexOf('#')
-            const newParams = val.slice(0, index)
-            var newParamsName = newParams.substring(0, 4) + '...'
-            return newParamsName
+            if(val.length>4){
+				 return val.substring(0, 3) + '...'
+            }else{
+				 return val
+            }
         }
     },
     //这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在opts参数，会将demotype与opts中option合并后渲染图表。