QianNiaoShop/pagesT/customer/CommunicationLogs.vue

<template>
	<view>
		<view class="keyword-view clearfix">
			<view class="float_left">
				<u-search
					disabled
					@search="searchConfirm()"
					:show-action="false"
					:clearabled="true"
					placeholder="请选择客户"
					v-model="customer_name"
					@click="goPage('/pagesT/customer/selCustomer')"
				></u-search>
			</view>
			<view class="float_right" @click="openSearch"><text class="custom-icon custom-icon-shaixuan"></text></view>
		</view>
		<view class="com-ul">
			<view class="com-li" v-for="(item, index) in order_list" :key="index">
				<view class="cutomer-name clearfix">
					<view class="float_left ellipsis">
						<u-icon margin-left="10" name="account-fill" label-size="24" label-color="#2979ff" :label="item.customerName" color="#2979ff" size="28"></u-icon>
					</view>
					<view class="float_right staff-name">
						{{ item.staffName }}
						<!-- <u-icon name="dianhua" color="#2d73ed" custom-prefix="custom-icon" /> -->
					</view>
				</view>
				<view class="cont">
					<view class="content">{{ item.content }}</view>
					<view v-if="item.picture" class="image-view"><image @click="previewImage(item.picture)" :src="item.picture" mode="aspectFill"></image></view>
					<view class="address clearfix">
						<view class="float_left">
							<block v-if="item.location">
								<u-icon name="map-fill" color="#6c6c6c" size="26"></u-icon>
								{{ item.location }}
							</block>
							<text v-else style="color: #999999;">无定位信息</text>
						</view>
					</view>
					<view class="time clearfix">
						<view class="float_left">{{ $u.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
						<view v-if="item.managerMobile" class="float_right" @click="callPhone(item.managerMobile)">
							<!-- 	<u-icon @click="goPage(`/pagesT/customer/CommunicationLogsAdd?id=${item.id}`)"
								style="margin-right: 30rpx;" name="edit-pen-fill" color="#2d73ed" /> -->
							客户电话：{{ item.managerMobile }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="load_status" />
		<addBtn url="/pagesT/customer/CommunicationLogsAdd"></addBtn>
		<u-popup v-model="search_show" mode="right">
			<view class="search-pop">
				<view class="form-view">
					<u-form label-width="160rpx" label-position="left">
						<u-form-item label-position="top" label="下单日期">
							<view class="date-li">
								<picker mode="date" @change="bindDateStartChange">
									<text class="date-li">{{ search_data.start ? $u.timeFormat(search_data.start, 'yyyy-mm-dd') : '开始日期' }}</text>
								</picker>
							</view>
							<view class="date-line">-</view>
							<view class="date-li">
								<picker mode="date" @change="bindDateEndChange">
									<text class="date-li">{{ search_data.end ? $u.timeFormat(search_data.end, 'yyyy-mm-dd') : '结束日期' }}</text>
								</picker>
							</view>
						</u-form-item>
					</u-form>
				</view>
				<view class="search-btn">
					<view class="btn-li" @click="clearValue()">重置</view>
					<view class="btn-li" @click="getAllCustomerCommunication()">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			load_status: 'nomore',
			customerData: '',
			page: 1,
			pageSize: 10,
			total: 0,
			order_list: [],
			customer_name: '',
			customer_id: '',
			search_show: false,
			search_data: {
				start: '',
				end: ''
			}
		};
	},
	watch: {
		customerData(val) {
			if (val) {
				this.customer_name = val.name;
				this.customer_id = val.id;
				this.page = 1;
				this.getAllCustomerCommunication();
			}
		}
	},
	computed: {
		staffId() {
			return this.$store.state.userInfo.staffId;
		},
		isAdministrator() {
			return this.$store.state.access.isAdministrator;
		}
	},
	onShow() {
		this.getAllCustomerCommunication();
	},
	onPullDownRefresh() {
		this.page = 1;
		this.getAllCustomerCommunication();
	},
	onReachBottom() {
		if (this.total / this.pageSize > this.page) {
			this.page += 1;
			this.getAllCustomerCommunication();
		}
	},
	methods: {
		clearValue() {
			this.search_show = false;
			this.customer_name = '';
			this.customer_id = '';
			this.search_data = {
				start: '',
				end: ''
			};
			this.page = 1;
			this.getAllCustomerCommunication();
		},
		getAllCustomerCommunication() {
			this.search_show = false;
			let params = {
				page: this.page,
				pageSize: this.pageSize,
				customerId: this.customer_id,
				start: this.search_data.start,
				end: this.search_data.end
			};
			if (!this.isAdministrator) {
				params.staffId = this.staffId;
			}
			this.$u.api.getAllCustomerCommunication(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;
			});
		},
		previewImage(image) {
			// 预览图片
			uni.previewImage({
				urls: [image],
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
		},
		openSearch() {
			this.search_show = true;
		},
		bindDateStartChange(e) {
			this.search_data.start = this.$utils.timeByTimestamp(e.detail.value + ' 00:00:00');
		},
		bindDateEndChange(e) {
			this.search_data.end = this.$utils.timeByTimestamp(e.detail.value + ' 23:59:59');
		}
	}
};
</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;
// 	}
// }
.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;
	}
}

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

	.com-li {
		width: 710rpx;
		margin: 20rpx auto;
		background-color: #ffffff;
		padding: 20rpx 0;
		border-radius: 20rpx;

		.cutomer-name {
			padding-bottom: 10rpx;
			color: $uni-color-primary;
			font-size: 24rpx;

			.float_left {
				max-width: 540rpx;
				background-color: #ecf5ff;
				border-top-right-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
				padding: 0 20rpx;
				line-height: 40rpx;
			}

			.staff-name {
				padding-right: 20rpx;
				line-height: 40rpx;
			}
		}

		.cont {
			padding: 0 20rpx;
			line-height: 36rpx;

			.content {
				padding-bottom: 10rpx;
			}

			.image-view {
				padding-bottom: 10rpx;

				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 10rpx;
				}
			}

			.address {
				padding-bottom: 10rpx;
				font-size: 24rpx;
			}

			.time {
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
}
</style>