jhlapp/pagesT/customer/VisitLogs.vue

<template>
	<view>
		<view class="keyword-view clearfix">
			<u-search
				disabled
				@custom="clearValue"
				@search="searchConfirm()"
				action-text="重置"
				:clearabled="true"
				placeholder="请选择客户"
				v-model="customer_name"
				@click="goPage('/pagesT/customer/selCustomer')"
			></u-search>
		</view>
		<view class="logs-ul">
			<view class="look-li" v-for="(item, index) in order_list" :key="index">
				<view class="goods-name">{{ item.goodsName }}</view>
				<view class="other-info clearfix">
					<view class="float_left"><text class="label">客户</text>{{ item.customerName }}</view>
					<view class="float_right" @click="callPhone(item.mobile)"><u-icon name="ziyuan" custom-prefix="custom-icon" :label="item.mobile" label-color="#4076D6"></u-icon></view>
				</view>
				<view class="other-info">
					<text class="label">时间</text>
					{{ $u.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}
				</view>
			</view>
			<!-- <view class="logs-li clearfix" v-for="(item, index) in order_list" :key="index">
				<view class="clearfix logs-goods">
					<view class="float_left goods-img">
						<image src="../../static/Tar_bar_slices/goods-fill.png" mode="aspectFill"></image>
					</view>
					<view class="float_left goods-info">
						<view class="goods-name ellipsis">{{ item.goodsName }}</view>
						<view class="other-info">
							<view class="info-li">购买价格：89</view>
							<view class="info-li">购买数量：51</view>
						</view>
						<view class="look-time-out clearfix">
							<view class="price float_left">¥117</view>
							<view class="look-time float_right">
								<view class="triangle"><text>浏览</text></view>
								<view class="second">21s</view>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom clearfix">
					<view class="float_left">
						<view class="cutomer ellipsis">{{ item.customerName }}</view>
						<view class="date">{{ $u.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
					</view>
					<view class="float_right">
						<view class="btn-li">查看订单</view>
						<view class="btn-li">联系客户</view>
					</view>
				</view>
			</view> -->
			<u-loadmore :status="load_status" />
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			load_status: 'nomore',
			page: 1,
			pageSize: 10,
			total: 0,
			order_list: [],
			keyword: '',
			customerData: '',
			customer_name: '',
			customer_id: ''
		};
	},
	watch: {
		customerData(val) {
			if (val) {
				this.customer_name = val.name;
				this.customer_id = val.id;
				this.page = 1;
				this.getAllCustomerVisitsLog();
			}
		}
	},
	onLoad() {
		this.getAllCustomerVisitsLog();
	},
	onPullDownRefresh() {
		this.page = 1;
		this.getAllCustomerVisitsLog();
	},
	onReachBottom() {
		if (this.total / this.pageSize > this.page) {
			this.page += 1;
			this.getAllCustomerVisitsLog();
		}
	},
	methods: {
		clearValue() {
			this.customer_name = '';
			this.customer_id = 0;
			this.page = 1;
			this.getAllCustomerVisitsLog();
		},
		searchConfirm() {
			this.page = 1;
			this.getAllCustomerVisitsLog();
		},
		getAllCustomerVisitsLog() {
			let params = {
				page: this.page,
				pageSize: this.pageSize,
				customerId: this.customer_id
			};
			this.load_status = 'loading';
			this.$u.api.getAllCustomerVisitsLog(params).then(res => {
				if (this.page === 1) {
					this.order_list = res.data;
				} else {
					this.order_list = this.order_list.concat(res.data);
				}
				this.load_status = this.$utils.loadStatus(this.page, this.pageSize, res.pageTotal);
				this.total = res.pageTotal;
				// console.log(this.order_list);
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.keyword-view {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	padding: 20rpx 24rpx;
	background-color: #ffffff;
	z-index: 9;

	.float_left {
		width: 640rpx;
	}

	.float_right {
		line-height: 64rpx;
		width: 50rpx;
		text-align: center;
		color: #666666;
	}
}

.logs-ul {
	padding-top: 100rpx;

	.logs-li {
		width: 710rpx;
		margin: 20rpx auto;
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 24rpx;
		.goods-img {
			position: relative;
			width: 120rpx;
			height: 120rpx;
			border-radius: 20rpx;
			overflow: hidden;
			margin-right: 20rpx;
			border: 1px solid #f5f5f5;

			image {
				width: 100%;
				height: 100%;
				display: block;
			}

			.buy-status {
				position: absolute;
				line-height: 30rpx;
				height: 30rpx;
				font-size: 20rpx;
				text-align: center;
				width: 100%;
				left: 0;
				bottom: 0;
				background-color: $uni-color-success;
				color: #ffffff;

				&.no-buy {
					background-color: $uni-color-error;
				}
			}
		}

		.goods-info {
			width: 520rpx;
			position: relative;
			.goods-name {
				font-weight: bold;
			}

			.date-time {
				font-size: 22rpx;
			}

			.other-info {
				padding-top: 10rpx;
				display: flex;
				flex-wrap: wrap;
				font-size: 22rpx;

				.info-li {
					width: 50%;
					display: inline-block;
					color: #6c6c6c;
				}
			}
		}

		.look-time-out {
			.price {
				color: $uni-color-error;
			}
			.look-time {
				color: #ffffff;
				font-size: 18rpx;
				width: 150rpx;
				height: 40rpx;
				line-height: 40rpx;
				overflow: hidden;
				background-color: $uni-color-warning;
				position: relative;
				border-radius: 6rpx;

				.triangle {
					text-align: center;
					position: absolute;
					width: 76rpx;
					height: 0;
					border-bottom: 40rpx solid #000000;
					border-left: 10px solid transparent;
					-webkit-transform: rotate(180deg);
					transform: rotate(180deg);

					text {
						display: block;
						transform: rotate(180deg);
					}
				}

				.second {
					font-size: 22rpx;
					position: absolute;
					right: 0;
					width: 74rpx;
					height: 40rpx;
					text-align: center;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}
	}

	.bottom {
		padding-top: 24rpx;
		border-top: 1px solid #eeeeee;
		margin-top: 24rpx;

		.float_left {
			width: 320rpx;

			.cutomer {
				font-weight: bold;
				font-size: 26rpx;
				padding-bottom: 6rpx;
			}

			.date {
				font-size: 22rpx;
				color: #666666;
			}
		}

		.float_right {
			.btn-li {
				display: inline-block;
				border-radius: 10rpx;
				margin-left: 16rpx;
				width: 140rpx;
				line-height: 54rpx;
				font-size: 24rpx;
				text-align: center;
				border: 1px solid $uni-color-primary;
				color: $uni-color-primary;

				&:last-child {
					background-color: $uni-color-primary;
					color: #ffffff;
				}
			}
		}
	}
}

.look-li {
	width: 710rpx;
	margin: 24rpx auto;
	background-color: #ffffff;
	padding: 24rpx;
	border-radius: 8rpx;
	.goods-name {
		color: #2d405e;
		font-weight: 600;
		font-size: 30rpx;
		padding-bottom: 20rpx;
	}
	.other-info {
		line-height: 40rpx;
		margin-top: 10rpx;
		.label {
			width: 82rpx;
			font-weight: 400;
			color: #b8c0c8;
			margin-right: 30rpx;
		}
	}
}
</style>