|
|
@@ -0,0 +1,346 @@
|
|
|
+<template>
|
|
|
+ <view class="container club-visit">
|
|
|
+ <tui-skeleton
|
|
|
+ v-if="skeletonShow"
|
|
|
+ backgroundColor="#fafafa"
|
|
|
+ borderRadius="10rpx"
|
|
|
+ :isLoading="true"
|
|
|
+ :loadingType="5"
|
|
|
+ />
|
|
|
+ <template v-else>
|
|
|
+ <view class="visit-content clearfix" v-if="list.length > 0">
|
|
|
+ <view
|
|
|
+ class="info-main-list"
|
|
|
+ v-for="(visit, index) in list"
|
|
|
+ :key="index"
|
|
|
+ :class="index === list.length - 1 ? 'none' : ''"
|
|
|
+ >
|
|
|
+ <view class="info-title" v-if="visit.accessDate">{{ visit.accessDate }}</view>
|
|
|
+ <view
|
|
|
+ class="info-main"
|
|
|
+ v-for="(record, recordIndex) in visit.record"
|
|
|
+ :key="recordIndex"
|
|
|
+ :class="recordIndex === visit.record.length - 1 ? 'none' : ''"
|
|
|
+ >
|
|
|
+ <view class="info-p"
|
|
|
+ >访问时间：<text>{{ record.accessNewTime }}</text></view
|
|
|
+ >
|
|
|
+ <view class="info-p"
|
|
|
+ >页面类型：<text>{{ record.pageType ? record.pageType : '--' }}</text></view
|
|
|
+ >
|
|
|
+ <view class="info-p"
|
|
|
+ >页面标签：<text>{{ record.pageLabel ? record.pageLabel : '--' }}</text></view
|
|
|
+ >
|
|
|
+ <view class="info-p"
|
|
|
+ >商品名称：<text>{{ record.productName ? record.productName : '--' }}</text></view
|
|
|
+ >
|
|
|
+ <view class="info-p">商品图片： <text v-if="!record.productImage">--</text></view>
|
|
|
+ <view class="info-img" v-if="record.productImage"
|
|
|
+ ><image :src="record.productImage" alt=""
|
|
|
+ /></view>
|
|
|
+ <view class="info-p"
|
|
|
+ >访问来源：<text>{{ record.accessSource | accessSourceFilters }}</text></view
|
|
|
+ >
|
|
|
+ <view class="info-p"
|
|
|
+ >访问客户端：<text>{{ record.accessClient | accessClientFilters }}</text></view
|
|
|
+ >
|
|
|
+ <view class="info-p"
|
|
|
+ >访问时长：<text>{{ record.accessDuration }}</text></view
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!--加载loadding-->
|
|
|
+ <tui-loadmore :visible="loadding" :index="3" type="black" />
|
|
|
+ <tui-nomore :visible="!pullUpOn" :backgroundColor="'#F7F7F7'" :text="nomoreText" />
|
|
|
+ <!--加载loadding-->
|
|
|
+ </view>
|
|
|
+ <view class="vsit-content-none" v-else>
|
|
|
+ <image
|
|
|
+ class="none-image"
|
|
|
+ src="https://static.caimei365.com/app/img/bg/bg_visit_none@2x.png"
|
|
|
+ mode=""
|
|
|
+ ></image>
|
|
|
+ <view class="none-text">暂无数据</view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <!-- 侧边 -->
|
|
|
+ <view class="scrollTop" :style="{ bottom: '150rpx' }">
|
|
|
+ <view class="icon top" @click="onPageScrollTop" :class="isScrollTop ? 'show' : 'none'">
|
|
|
+ <text class="iconfont icon-zhiding"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapState, mapMutations } from 'vuex'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ skeletonShow: true,
|
|
|
+ isScrollTop: false,
|
|
|
+ nomoreText: '上拉显示更多',
|
|
|
+ hasNextPage: false,
|
|
|
+ loadding: false,
|
|
|
+ pullUpOn: true,
|
|
|
+ pullFlag: true,
|
|
|
+ listQuery: {
|
|
|
+ clubId: 0,
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10
|
|
|
+ },
|
|
|
+ list: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ accessClientFilters(value) {
|
|
|
+ // 访问客户端
|
|
|
+ const map = {
|
|
|
+ '0': '网站',
|
|
|
+ '1': '小程序'
|
|
|
+ }
|
|
|
+ return map[value]
|
|
|
+ },
|
|
|
+ accessSourceFilters(value) {
|
|
|
+ // 访问来源
|
|
|
+ if (!value) return '--'
|
|
|
+ const map = {
|
|
|
+ '0': '直接访问',
|
|
|
+ '1': '百度搜索',
|
|
|
+ '2': '360搜索',
|
|
|
+ '3': '谷歌搜索',
|
|
|
+ '4': '神马搜索',
|
|
|
+ '5': '头条搜索',
|
|
|
+ '6': '搜狗搜索',
|
|
|
+ '7': '直接访问'
|
|
|
+ }
|
|
|
+ return map[value]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ onLoad(option) {
|
|
|
+ this.listQuery.clubId = option.clubId
|
|
|
+ this.getClubRecordDetail()
|
|
|
+ setTimeout(() => {
|
|
|
+ this.skeletonShow = false
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getClubRecordDetail() {
|
|
|
+ //获取记录详情
|
|
|
+ try {
|
|
|
+ this.listQuery.pageNum = 1
|
|
|
+ const res = await this.UserService.getClubKeynoteRecord(this.listQuery)
|
|
|
+ const data = res.data
|
|
|
+ if (data.list && data.list.length > 0) {
|
|
|
+ this.hasNextPage = data.hasNextPage
|
|
|
+ this.list = data.list
|
|
|
+ this.pullFlag = false
|
|
|
+ setTimeout(() => {
|
|
|
+ this.pullFlag = true
|
|
|
+ }, 500)
|
|
|
+ if (this.hasNextPage) {
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.nomoreText = '上拉显示更多'
|
|
|
+ } else {
|
|
|
+ this.pullUpOn = true
|
|
|
+ this.loadding = false
|
|
|
+ this.nomoreText = '已至底部'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.log('加载异常~', error.msg)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getOnReachBottomData() {
|
|
|
+ try {
|
|
|
+ this.listQuery.pageNum += 1
|
|
|
+ const res = await this.UserService.getClubKeynoteRecord(this.listQuery)
|
|
|
+ const data = res.data
|
|
|
+ if (data.list && data.list.length > 0) {
|
|
|
+ this.hasNextPage = data.hasNextPage
|
|
|
+ this.list = this.list.concat(data.list)
|
|
|
+ this.pullFlag = false // 防上拉暴滑
|
|
|
+ setTimeout(() => {
|
|
|
+ this.pullFlag = true
|
|
|
+ }, 500)
|
|
|
+ if (this.hasNextPage) {
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.nomoreText = '上拉显示更多'
|
|
|
+ } else {
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.loadding = false
|
|
|
+ this.nomoreText = '已至底部'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.log('上滑加载异常~', error.msg)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onPageScrollTop() {
|
|
|
+ uni.pageScrollTo({
|
|
|
+ scrollTop: 0,
|
|
|
+ duration: 600
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onPullDownRefresh() {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getClubRecordDetail()
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
+ }, 200)
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ if (this.hasNextPage) {
|
|
|
+ this.loadding = true
|
|
|
+ this.pullUpOn = true
|
|
|
+ this.getOnReachBottomData()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onPageScroll(e) {
|
|
|
+ //实时获取到滚动的值
|
|
|
+ if (e.scrollTop > 800) {
|
|
|
+ this.isScrollTop = true
|
|
|
+ } else {
|
|
|
+ this.isScrollTop = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {}
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+page {
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
+.club-visit {
|
|
|
+ width: 100%;
|
|
|
+ .visit-content {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .info-main-list {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ border-bottom: 20rpx solid #f5f5f5;
|
|
|
+ box-sizing: border-box;
|
|
|
+ &.none {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info-title {
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 24rpx 24rpx 0 24rpx;
|
|
|
+ position: relative;
|
|
|
+ line-height: 48rpx;
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .info-main {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ border-bottom: 2rpx solid #f5f5f5;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .info-p {
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ position: relative;
|
|
|
+ line-height: 66rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #999999;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ line-clamp: 1;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ text {
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info-img {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ image {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ display: block;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ border: 1px dashed #e2e2e2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.none {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .vsit-content-none {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 800rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ padding: 52rpx 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ .none-image {
|
|
|
+ width: 260rpx;
|
|
|
+ height: 260rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ .none-text {
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 44rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.scrollTop {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ position: fixed;
|
|
|
+ right: 20rpx;
|
|
|
+ z-index: 99;
|
|
|
+ .icon {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ float: left;
|
|
|
+ margin: 10rpx 0;
|
|
|
+ line-height: 80rpx;
|
|
|
+ text-align: center;
|
|
|
+ .contact-btn {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ background-color: rgba(0, 0, 0, 0);
|
|
|
+ line-height: 80rpx;
|
|
|
+ .iconfont {
|
|
|
+ font-size: $font-size-44;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.top {
|
|
|
+ background-color: rgba(0, 0, 0, 0.4);
|
|
|
+ &.show {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ &.none {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .iconfont {
|
|
|
+ font-size: $font-size-44;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
