front-end/jdApp/src/components/app-customer-sel.vue

<template>
	<div class="app-area-sel">
		<bottom-popup class="popup-wrap" :show="showPopup" @close="hidePopup">
			<div class="map-wrap">
				<div class="map-top-tit-wrap">
					<div class="map-top-tit">请选择客户</div>
					<app-close icon="iconguanbi" @close="hidePopup" />
				</div>
				<!-- 搜索 -->
				<div class="map-search">
					<app-search-module
						ref="aaaaa"
						placeholder="请填写姓名，支持拼音首字母"
						:focus="false"
						@input="searchFn"
					/>
				</div>
				<!-- 列表 -->
				<scroll-view class="customer-list" scroll-y>
					<view v-for="(item, index) in customerListData" :key="index" @click="switchCustomer(item, index)" class="customer-item">
						<view class="item-avatar">
							<image :src="item.smallAvatar" alt="商品图" />
						</view>
						<view class="item-name"> {{ item.name || "" }} <text v-if="newClientId==item.id">新增</text></view>
						<view class="item-level">{{ getCustomerLevelName(item) }}</view>
						<!-- <view class="item-tag">NEW</view> -->
					</view>
				</scroll-view>
				<view class="add-customer-bar" @click="gotoAddCustomer">
					没有找到客户？新增
				</view>
			</div>
		</bottom-popup>
	</div>
</template>

<script>
import BottomPopup from "@/components/plugin/bottom-popup";
import AppClose from "@/components/module/app-close";
import AppSearchModule from "@/components/module/app-search";
// api

import { getList } from "@/api/member/index";
export default {
	name: "app-customer-sel",
	components: {
		BottomPopup,
		AppClose,
		AppSearchModule
	},
	props: {
		show: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			showPopup: false,
			name: "",
			newClientId: "",
			customerListData: []
		};
	},
	mounted() {
		this.showPopup = this.show;
	},
	computed: {},
	watch: {
		show(val) {
			this.showPopup = val;
			// #ifdef H5
			this.$nextTick(function() {
				setTimeout(() => {
					this.$refs.aaaaa.$refs.searchInput._focusInput();
				}, 1000);
			});
			// #endif

			if (val) {
				this.initList();
			}
		}
	},
	methods: {
		initList() {
			return getList({name: this.name })
				.then(res => {
					const {data: { list }} = res;
					this.newClientId = uni.getStorageSync("newClient")?uni.getStorageSync("newClient").id:'';
					this.customerListData = list;
				})
				.catch(err => {});
		},
		// 搜索
		searchFn(e) {
			this.name = e;
			this.initList();
			// this.$emit('search', e)
		},
		hidePopup() {
			this.$emit("update:show", false);
			this.$emit("hide");
		},
		switchCustomer(item, index) {
			this.$emit("change", item);
			this.hidePopup();
		},
		getCustomerLevelName(level) {
			let levelName = "";
			switch (Number(level)) {
				case 0:
					levelName = "普通客户";
					break;
				case 1:
					levelName = "一级会员";
					break;
				case 2:
					levelName = "二级会员";
					break;

				default:
					break;
			}
			return levelName;
		},
		gotoAddCustomer() {
			uni.navigateTo({
				url: "/pagesClient/member/add",
				success: result => {
					this.hidePopup();
				},
				fail: () => {},
				complete: () => {}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
// 弹窗
/deep/.popup-wrap {
	.tui-popup-class {
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
	}
}
.map-wrap {
	.map-top-tit-wrap {
		padding: 34px 0;
		text-align: center;
		font-size: 34px;
	}
	.map-search {
		padding: 0 30px;
		margin-bottom: 20px;
	}
	.map-box {
		.current-site-icon {
			width: 63px;
			height: 90px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}

	// 列表
	.customer-list {
		min-height: 500rpx;
		max-height: 820rpx;
		// padding-bottom: 110rpx;
		box-sizing: border-box;
		.customer-item {
			display: flex;
			width: 100%;
			align-items: center;
			line-height: 40rpx;
			padding: 18rpx 30px;
			text-align: left;
			border-bottom: 1px solid #eee;
			position: relative;
			.item-avatar {
				flex-shrink: 0;
				width: 66px;
				height: 66px;
				border-radius: 50%;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.item-name {
				flex-shrink: 0;
				margin: 0 20upx;
				/*width: 200upx;*/
				text{
					padding: 0 10rpx;
					margin-left: 20rpx;
					color: #3385ff;
					border: 1px solid #3385ff;
				}
			}
			.item-level {
				margin: 0 20upx;
				flex: 1;
			}
			.item-tag {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 78px;
				height: 34px;
				flex-shrink: 0;
				background-color: #3385ff;
				border-radius: 17px 17px 17px 0;
				font-size: 20px;
				color: #fff;
			}
		}
	}
	.add-customer-bar {
		width: 100%;
		height: 100px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #3385ff;
		font-size: 26px;

		box-shadow: 0px -1px 6px 0px rgba(4, 0, 0, 0.06);
	}
}
</style>