jhlapp/pagesT/customer/CustomerDetail.vue

<template>
	<view>
		<view class="detail-top">
			<u-navbar
				title="客户详情"
				:background="{ background: `rgba(255,255,255,${scroll_top/100})` }"
				back-icon-color="#2D405E"
				:title-bold="true"
				title-color="#2D405E"
				title-size="32"
				:border-bottom="false"
			></u-navbar>
			<view class="top-view">
				<view class="clearfix customer-main">
					<view class="float_left main-left">
						<view class="cu-top">
							<text class="cu-name">{{ customer_detail.name }}</text>
							<text class="custom-icon custom-icon-ziyuan"></text>
							<text class="cu-mobile">{{ customer_detail.mobile }}</text>
						</view>
						<view class="type-view">
							<view class="type-li primary-type" v-if="customer_detail.customerType">{{ customer_detail.customerType }}</view>
							<view class="type-li primary-type" v-if="customer_detail.status === 2">已审核</view>
							<view class="type-li warning-type" v-if="customer_detail.status === 1">未审核</view>
							<view class="type-li warning-type" v-if="customer_detail.status === 0">待完善</view>
							<view class="type-li success-type" v-if="customer_detail.enableStatus === 5">启用</view>
							<view class="type-li danger-type" v-if="customer_detail.enableStatus === 4">禁用</view>
						</view>
					</view>
					<view class="float_right avatar"><image :src="customer_detail.avatar || '../../static/img/user-re.png'" mode="aspectFill"></image></view>
				</view>
				<view class="other-info">
					<view class="other-li">
						<text class="custom-icon custom-icon-form_light"></text>
						<text class="value">
							编号：{{ customer_detail.code }}
						</text>
					</view>
					<view class="other-li">
						<text class="custom-icon custom-icon-lishi"></text>
						<text class="value">
							注册时间：
						</text>
						<text class="value time">
							{{ $u.timeFormat(customer_detail.createTime) }}
						</text>
					</view>
				</view>
				<view class="bottom-info clearfix">
					所属商铺：{{customer_detail.shopName|| '未设置'}}
				</view>
				<view class="bottom-info clearfix" style="margin-top: 8rpx;">
					<view class="float_left">类型：{{customer_detail.customerType|| '未设置'}}</view>
					<view class="float_right">业务员：{{customer_detail.salesManName|| '未设置'}}</view>
				</view>
			</view>
		</view>
		<u-sticky offset-top="140">
			<view class="tabs-view">
				<u-tabs-swiper
					ref="tabs"
					:is-scroll="false"
					font-size="26"
					:current="tabs_current"
					:list="tags_list"
					height="94"
					@change="changeTab"
					bg-color="transparent"
					inactive-color="rgba(255, 255, 255, 0.6)"
					:bar-style="{ borderRadius: '6rpx', height: '6rpx', width: '32rpx', backgroundColor: '#ffffff' }"
					:active-item-style="{ color: '#ffffff', fontSize: '32rpx' }"
				></u-tabs-swiper>
			</view>
		</u-sticky>
		<!-- :style="{paddingTop:scroll_top>150?'150rpx':'0'}" -->
		<view class="handel-view">
			<view v-if="customer_id">
				<block v-if="tabs_current === 0">
					<!-- 浏览记录 -->
					<Visitslogs :customerId="customer_id"></Visitslogs>
				</block>
				<block v-if="tabs_current === 1">
					<!-- 购买记录 -->
					<BuyLogs :userCenterId="customer_detail.userCenterId"></BuyLogs>
				</block>
				<block v-if="tabs_current === 2">
					<!-- 跟进记录 -->
					<CommunicationLogs :customerId="customer_id"></CommunicationLogs>
				</block>
				<block v-if="tabs_current === 3">
					<!-- 账款明细 -->
					<moneyDetail :customerId="customer_id"></moneyDetail>
				</block>
				<block v-if="tabs_current === 4">
					<!-- 订单列表 -->
					<CustomerOrder :userCenterId="customer_detail.userCenterId"></CustomerOrder>
				</block>
			</view>
		</view>
		<view class="submit-btn">
			<viwe class="float_left" style="color: #B8C0C8;text-align: center;margin-left: 40rpx;">
				<view @click="goPage('/pagesT/customer/AddCustomer?id=' + customer_detail.id)">
					<u-icon
						label-pos="bottom"
						margin-top="10rpx"
						name="file-text"
						color="#B8C0C8"
						label="完善资料"
						label-color="#62738E"
						label-size="20"
						size="40"
					></u-icon>
				</view>
			</viwe>
			<view class="btn-min" @click="callPhone(customer_detail.mobile)">联系客户</view>
			<view class="btn-min-valet-order"  @click="orderAdd()" v-if="customer_detail.status === 2 && customer_detail.enableStatus === 5">代客下单</view>
		</view>
	</view>
</template>

<script>
import Visitslogs from './components/Visitslogs.vue';
import BuyLogs from './components/BuyLogs.vue';
import CommunicationLogs from './components/CommunicationLogs.vue';
import CustomerOrder from './components/CustomerOrder.vue';
import moneyDetail from './components/moneyDetail.vue';
export default {
	components: {
		Visitslogs,
		BuyLogs,
		CommunicationLogs,
		moneyDetail,
		CustomerOrder
	},
	data() {
		return {
			tabs_current: 0,
			tags_list: [
				{
					name: '浏览记录'
				},
				{
					name: '购买记录'
				},
				{
					name: '跟进记录'
				},
				{
					name: '账款明细'
				},
				{
					name: '订单列表'
				}
			],
			customer_id: 0,
			customer_detail: {},
			visit_logs: [],
			scroll_top: 0,
			actived: ''
		};
	},
	onPageScroll(e) {
		this.scroll_top = e.scrollTop;
	},
	async onLoad(options) {
		if (options.id) {
			this.customer_id = options.id;
		}
	},
	async onShow(options) {
		await this.getCustomerInfo();
	},
	methods: {
		orderAdd(item) {
			const obj = {
				shopId: this.customer_detail.shopId,
				userCenterId: this.customer_detail.userCenterId,
				customerId: this.customer_detail.id,
				customerName: this.customer_detail.name
			};
			this.goPage('/pages/order/OrderAdd?customer=' + JSON.stringify(obj));
		},
		// 切换tabs
		changeTab(index) {
			this.tabs_current = index;
		},
		// 客户详情
		async getCustomerInfo() {
			await this.$u.api.getCustomerInfo(this.customer_id).then(({ data }) => {
				this.customer_detail = data;
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.detail-top {
	// background: rgba($color: #ffffff, $alpha: 0.9);
	background: linear-gradient(270deg,#f8f8fd, #e7f7ff, #f8f8fd);
	padding-bottom: 100rpx;
	.top-view {
		padding: 24rpx 40rpx 40rpx;
		.customer-main {
			.avatar {
				image {
					background-color: #FFFFFF;
					display: block;
					width: 88rpx;
					height: 88rpx;
					border-radius: 8rpx;
					border: 2rpx solid #ffffff;
				}
			}
			.main-left{
				width: 560rpx;
				.cu-top {
					margin-bottom: 10rpx;
					line-height: 45rpx;
					.cu-name{
						font-family: DIN-Medium;
						display: inline-block;
						max-width: 360rpx;
						color: #2D405E;
						font-size: 32rpx;
						font-weight: 600;
						margin-right: 24rpx;
						vertical-align: middle;
					}
					.custom-icon-ziyuan{
						font-size: 28rpx;
						color: #000000;
						margin-right: 4rpx;
					}
					.cu-mobile{
						font-weight: 300;
						font-family: DINPro-Regular;
					}
				}
				.type-view {
					display: flex;
					.type-li {
						width: 104rpx;
						height: 36rpx;
						border-radius: 4rpx;
						font-size: 20rpx;
						margin-right: 8rpx;
						text-align: center;
						line-height: 36rpx;
						&.primary-type {
							background: rgba(64, 118, 214, 0.12);
							color: #4076d6;
						}
						&.warning-type {
							background: #fdf6e8;
							color: #fa6400;
						}
						&.success-type {
							background: rgba(0, 195, 149, 0.12);
							color: #00c395;
						}
						&.danger-type {
							background: rgba(246, 119, 120, 0.12);
							color: #f67778;
						}
					}
				}
			}
			
		}
		.other-info{
			padding-top: 22rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #B8C0C8;
			line-height: 40rpx;
			.custom-icon{
				font-size: 24rpx;
				margin-right: 8rpx;
			}
			.time{
				color: #2D405E;
				font-family: DINPro-Regular;
			}
		}
		.bottom-info{
			margin-top: 24rpx;
			.float_right{
				color: #B8C0C8;
			}
		}
	}
}

.tabs-view {
	width: 100%;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	background-color: #4076d6;
	transform: translateY(-100rpx);
}

.handel-view {
	width: 100%;
	margin: 0 auto;
	background-color: #ffffff;
	transform: translateY(-100rpx);
}

.submit-btn {
	width: 100%;
	height: 98rpx;
	font-size: 28rpx;
	color: #fff;
	font-family: PingFangSC-Medium, PingFang SC;

	.btn-min {
		float: right;
		width: 240rpx;
		height: 64rpx;
		line-height: 64rpx;
		background: #4076d6;
		border-radius: 32rpx;
		margin-left: 40rpx;
	}

	.btn-min-valet-order {
		float: right;
		width: 240rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		background: #fff;
		border-radius: 32rpx;
		border: 1px solid #979797;
		color: #2d405e;
		margin-left: 70rpx;
	}
}
</style>