caimei-applets-caimei/pages/seller/notice/components/visits-cell.vue

<template>
    <view class="visits-cell" @click="$emit('handlerVisits', visitsInfo)">
        <view class="visits-club">
            <image :src="visitsInfo.image || '/static/icon-user-active@3x.png'" mode="" class="visits-author"></image>
            <view>{{visitsInfo.name || '游客'}}</view>
        </view>
        <view class="visits-content">
            <view class="container" v-if="visitsInfo.linkMan && visitsInfo.contractMobile">
                <view class="visits-name">
                    {{ visitsInfo.linkMan }}
                </view>
                <view class="visits-phone">
                    {{ visitsInfo.contractMobile }}
                </view>
            </view>
            <view class="container">
                <view class="visits-name concern">
                    关注点：
                </view>
                <view class="visits-concern">
                    {{ visitsInfo.pageLabel }}
                </view>
            </view>
        </view>
		<view class="visits-content-bot">
			<view class="btn" @click.stop="handleClickOper(1, visitsInfo)">
				<text class="iconfont icon-jigouhuaxiang"></text> 机构画像
			</view>
			<view class="btn" @click.stop="handleClickOper(2, visitsInfo)">
				<text class="iconfont icon-tianxie"></text> 填写咨询记录
			</view>
			<view class="btn" @click.stop="handleClickOper(3, visitsInfo)">
				<text class="iconfont icon-shangcheng"></text> 商城访问记录
			</view>
		</view>
    </view>
</template>

<script>
export default {
    props: {
        visitsInfo: {
            type: Object,
            default: () => ({
                image: '',
				userId:'',
                pageLabel: '',
                name: '',
                linkMan: '',
                contractMobile: '',
                accessTime: '2023-08-29',
                clubId: '1111'
            })
        }
    },
	methods:{
		// 按钮操作
		handleClickOper(type, club) {
			//1：机构画像 2：填写咨询记录 3：商城访问记录 
			switch (type) {
				case 1:
					this.$api.navigateTo(`/pages/seller/club/club-portrait?userId=${club.userId}`)
					break
				case 2:
					this.$api.navigateTo(`/pages/seller/remarks/add?userId=${club.userId}`)
					break
				case 3:
					this.$api.navigateTo(`/pages/seller/club/club-visit?clubId=${club.clubId}`)
					break
			}
		},
	}
}
</script>

<style scoped lang="scss">
.visits-cell {
    margin: 0 auto 24rpx auto;
    width: 702rpx;
    border-radius: 16rpx;
    padding: 35rpx 32rpx;
    background-color: #fff;
    box-sizing: border-box;
    .visits-club {
        height: 70rpx;
        font-size: 32rpx;
        font-weight: bold;
        color:#333333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: flex;
        align-items: center;
        border-bottom: 1rpx solid #E1E1E1;
        padding-bottom: 18rpx;
        .visits-author {
            width: 56rpx;
            height: 56rpx;
            border-radius: 50%;
            object-fit: contain;
            margin-right: 16rpx;
            background-color: #FFF0E2;
        }
    }
    .visits-content {
        padding: 40rpx 0 0 0;
        .container {
            display: flex;
            font-size: 28rpx;
            .visits-name {
                white-space: nowrap;
                color: #333333;
            }
            .concern {
                font-weight: bold;
            }
            .visits-phone {
                margin-left: 28rpx;
                margin-bottom: 24rpx;
            }
            .visits-concern {
                line-height: 48rpx;
            }
        }
    }
	.visits-content-bot {
		width: 100%;
		height: 80rpx;
		background-color: #f7f7f7;
		border-radius: 8rpx;
		margin-top: 20rpx; 
		.btn {
			height: 80rpx;
			box-sizing: border-box;
			line-height: 80rpx;
			padding: 0 20rpx;
			font-size: $font-size-24;
			color: #333333;
			text-align: center;
			float: left;
			position: relative;
			&: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;
				}
			}
			.iconfont {
				font-size: 30rpx;
				color: #333333;
				margin-right: 5rpx;
			}
		}
	}
		
}
</style>