zhongshen_project/addon/cashier---/source/os/components/nc-select-member/nc-select-member.vue

<template>
	<view>
		<uni-popup ref="memberInquirePopup" type="center" @change="popupChange">
			<view class="member-inquire-wrap">
				<view class="member-header">
					<text class="title">会员列表</text>
					<text class="iconfont iconguanbi1" @click="$refs.memberInquirePopup.close()"></text>
				</view>
				<view class="member-content">
					<view class="search-warp">
						<view class="search-input">
							<input
								focus
								placeholder="可查询会员账号、手机号、昵称、会员码(可使用扫码枪)、会员动态码"
								placeholder-style="font-size:0.14rem"
								v-model="searchText"
								@confirm="searchMember()"
							/>
							<button class="switch primary-btn" @click="searchMember()">查询</button>
							<button class="default-btn" plain="true" @click="$refs.memberEnteringPopup.open()">添加会员</button>
						</view>
					</view>
					<scroll-view @scrolltolower="getMemberList()" scroll-y="true" class="member-list">
						<view
							:class="['member-item', { active: item.member_id == memberId }]"
							v-for="(item, index) in memberList"
							:key="index"
							@click="getMemberInfo(item.member_id)"
						>
							<image class="item-img" mode="aspectFill" v-if="item.headimg" :src="$util.img(item.headimg)" @error="item.headimg = defaultImg.head"></image>
							<image class="item-img" mode="aspectFill" v-else :src="$util.img(defaultImg.head)"></image>
							<view class="item-content">
								<view class="name">
									<text>{{ item.nickname }}</text>
									<!-- <text>(id:1568)</text> -->
								</view>
								<view class="phone">手机号：{{ item.mobile ? item.mobile : '--' }}</view>
								<view class="other">
									<!-- <view>类型：小程序</view> -->
									<view>余额：{{ parseFloat(parseFloat(item.balance) + parseFloat(item.balance_money)).toFixed(2) }}</view>
								</view>
							</view>
						</view>
						<view v-if="memberList.length == 0" class="empty">
							<image :src="$util.img('public/uniapp/cashier/member-empty.png')" mode="widthFix"></image>
							<view class="tips">暂无会员</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="memberEnteringPopup" type="center">
			<view class="member-entering-wrap">
				<view class="header">
					<text class="title">录入会员</text>
					<text class="iconfont iconguanbi1" @click="memberEnteringClose()"></text>
				</view>
				<view class="form-content">
					<view>
						<view class="form-item">
							<view class="form-label">
								<text class="required">*</text>
								手机号：
							</view>
							<view class="form-inline search-wrap"><input type="number" class="form-input" v-model="memberData.mobile" placeholder="请输入会员手机号" /></view>
						</view>

						<view class="form-item">
							<view class="form-label">
								<text class="required"></text>
								会员名称：
							</view>
							<view class="form-inline search-wrap"><input type="text" class="form-input" v-model="memberData.nickname" placeholder="请输入会员昵称" /></view>
						</view>

						<view class="form-item">
							<view class="form-label">
								<text class="required"></text>
								性别：
							</view>
							<view class="form-inline search-wrap"><uni-data-checkbox v-model="memberData.sex" selectedColor="#8558FA" :localdata="sex"></uni-data-checkbox></view>
						</view>

						<view class="form-item">
							<view class="form-label">
								<text class="required"></text>
								生日：
							</view>
							<view class="form-inline">
								<uni-datetime-picker :start="startDate" v-model="memberData.birthday" type="date" :clearIcon="false" @change="changeTime" />
							</view>
						</view>

						<view class="form-item" v-if="memberLevelList.length">
							<view class="form-label">
								<text class="required"></text>
								会员等级：
							</view>
							<view class="form-inline">
								<select-lay
									:zindex="10"
									:value="memberData.member_level"
									name="names"
									placeholder="请选择会员等级"
									:options="memberLevelList"
									@selectitem="selectMemberLevel"
								></select-lay>
							</view>
						</view>
					</view>
					<view class="btn-wrap"><button type="primary" class="primary-btn" @click="addMember">确定录入</button></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			memberList: [],
			searchText: '',
			page: 1,
			one_judge: true, // 第一次请求列表、详情渲染判断
			memberId: '',
			startDate: '1900-1-1',
			memberData: {
				sex: 0,
				mobile: '',
				nickname: '',
				birthday: '',
				headimg: '',
				member_level: '',
				member_level_name: ''
			},
			memberLevelList: [], //会员等级
			sex: [
				{
					text: '未知',
					value: 0
				},
				{
					text: '男',
					value: 1
				},
				{
					text: '女',
					value: 2
				}
			],
			flag: false,
			popupShow: false
		};
	},
	created() {
		this.getMemberList();
		this.getMemberLevel();
	},
	methods: {
		popupChange(e){
			this.popupShow = e.show;
		},
		open() {
			this.$refs.memberInquirePopup.open();
		},
		searchMember() {
			this.page = 1;
			this.getMemberList();
		},
		// 查询会员列表
		getMemberList() {
			setTimeout(() => {
				let data = {
					page: this.page,
					page_size: 12,
					search_text: this.searchText
				};
				this.$api.sendRequest({
					url: '/cashier/storeapi/member/lists',
					data: data,
					success: res => {
						if (res.code >= 0) {
							this.searchText = '';
							if (this.page == 1) this.memberList = [];
							this.memberList = this.memberList.concat(res.data.list);
							if (res.data.page_count >= this.page) this.page++;
						}
					}
				});
			}, 200)
		},
		getMemberInfo(memberId) {
			this.memberId = memberId;
			this.$api.sendRequest({
				url: '/cashier/storeapi/member/info',
				data: {
					member_id: memberId
				},
				success: res => {
					if (res.code == 0 && res.data) {
						this.$store.commit('setMemberInfo', res.data);
						this.$refs.memberInquirePopup.close();
					} else {
						this.$util.showToast({
							title: '未获取到会员信息'
						});
					}
				}
			});
		},
		/******************************** 录入会员 ********************************/
		getMemberLevel() {
			this.memberLevelList = [];
			this.$api.sendRequest({
				url: '/cashier/storeapi/memberlevel/lists',
				success: res => {
					if (res.code == 0 && res.data) {
						for (let i in res.data) {
							this.memberLevelList.push({
								label: res.data[i]['level_name'],
								value: res.data[i]['level_id'].toString(),
								disabled: false
							});
						}
					}
				}
			});
		},
		// 选择会员等级
		selectMemberLevel(index, item) {
			if (index >= 0) {
				this.memberData.member_level = item.value;
				this.memberData.member_level_name = item.label;
			} else {
				this.memberData.member_level = '';
				this.memberData.member_level_name = '';
			}
			this.$forceUpdate();
		},
		// 选择时间
		changeTime(e) {
			this.memberData.birthday = e;
		},
		verify() {
			if (!this.memberData.mobile) {
				this.$util.showToast({
					title: '请输入会员手机号'
				});
				return false;
			}
			if (!this.$util.verifyMobile(this.memberData.mobile)) {
				this.$util.showToast({
					title: '请输入正确的手机号码'
				});
				return false;
			}
			return true;
		},
		// 确定录入
		addMember() {
			if (this.verify()) {
				if (this.flag) return;
				this.flag = true;
				let data = this.memberData;
				this.$api.sendRequest({
					url: '/cashier/storeapi/member/addMember',
					data: this.memberData,
					success: res => {
						if (res.code == 0 && res.data) {
							this.memberEnteringClose();
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
						this.flag = false;
					}
				});
			}
		},
		memberEnteringClose() {
			this.$refs.memberEnteringPopup.close();
			this.page = 1;
			this.searchText = '';
			this.getMemberList();
		}
	}
};
</script>

<style lang="scss">
.member-inquire-wrap {
	overflow: hidden;
	width: 9.55rem;
	height: 5.37rem;
	background-color: #fff;
	border-radius: 0.05rem;
	.member-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 0.15rem;
		height: 0.45rem;
		line-height: 0.45rem;
		border-bottom: 0.01rem solid #e8eaec;
		.iconfont {
			font-size: $uni-font-size-lg;
		}
	}
	.member-content {
		padding: 0.1rem;
		.search-warp {
			margin-left: 0.1rem;
			.search-input {
				display: flex;
				align-items: center;
				margin-bottom: 0.05rem;
				input {
					flex: 1;
					padding-left: 0.1rem;
					width: 2.5rem;
					height: 0.4rem;
					line-height: 0.4rem;
					border: 0.01rem solid #dcdee2;
					border-right: none;
				}
				button {
					width: 2rem;
					height: 0.42rem;
					line-height: 0.42rem;
					color: #fff;
					font-size: $uni-font-size-base;
					margin: 0;
					&:last-of-type {
						margin-left: 0.15rem;
						margin-right: 0.1rem;
					}
				}
			}
		}
		/deep/ .uni-scroll-view-content {
			display: flex;
			flex-wrap: wrap;
			align-content: baseline;
			height: 430px;
		}
		.member-list {
			.member-item {
				display: flex;
				padding: 0.13rem 0.15rem;
				margin: 0.1rem;
				width: 2.9rem;
				height: 1rem;
				background-color: #f5f5f5;
				box-sizing: border-box;
				border-radius: 0.05rem;
				&.active {
					background-color: $primary-color;
					.name,
					.phone,
					.other > view {
						color: #fff;
					}
				}
				&:nth-child(3n + 3) {
					margin-right: 0;
				}
				image {
					width: 0.45rem;
					height: 0.45rem;
					border-radius: 50%;
					margin-right: 0.1rem;
					flex-shrink: 0;
				}
				.item-content {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
				}
				.name {
					text:nth-child(1) {
						font-size: $uni-font-size-lg;
						font-weight: bold;
					}
				}
				.phone {
					font-size: $uni-font-size-sm;
					color: #666;
				}
				.other {
					display: flex;
					justify-content: space-between;
					font-size: $uni-font-size-sm;
					view {
						font-size: $uni-font-size-sm;
						color: #666;
					}
				}
			}
		}
	}
}

// 录入会员
.member-entering-wrap {
	width: 6.5rem;
	height: 3.66rem;
	background-color: #fff;
	border-radius: 0.05rem;
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 0.15rem;
		height: 0.45rem;
		line-height: 0.45rem;
		border-bottom: 0.01rem solid #e8eaec;
		.iconfont {
			font-size: $uni-font-size-lg;
		}
	}
	.form-content {
		margin-top: 0.2rem;
		display: flex;
		flex-direction: column;
		align-items: center;

		.form-item {
			margin-bottom: 0.1rem;
			display: flex;
			.form-label {
				width: 0.9rem;
				text-align: right;
				padding-right: 0.1rem;
				box-sizing: border-box;
				height: 0.32rem;
				line-height: 0.32rem;
				.required {
					color: red;
					margin-right: 0.03rem;
				}
			}
			.form-inline {
				width: 2.4rem;
				line-height: 0.32rem;
				margin-right: 0.1rem;
				box-sizing: border-box;
				.form-input {
					border-width: 0.01rem;
					border-style: solid;
					background-color: #fff;
					color: rgba(0, 0, 0, 0.85);
					border-radius: 0.02rem;
					padding-left: 0.1rem;
					height: 0.32rem;
					line-height: 0.32rem;
					font-size: 0.14rem;
					border-color: #e6e6e6;
					border-radius: 0.02rem;
				}
				.form-textarea {
					border-width: 0.01rem;
					border-style: solid;
					background-color: #fff;
					color: rgba(0, 0, 0, 0.85);
					border-radius: 0.02rem;
					padding-left: 0.1rem;
					line-height: 0.32rem;
					font-size: 0.14rem;
					border-color: #e6e6e6;
					height: 1rem;
				}
				button {
					width: calc(50% - 0.05rem);
					display: inline-block;
					margin-right: 0.1rem;
					&:nth-child(2) {
						margin-right: 0;
					}
				}
				.upload-box {
					width: 0.7rem;
					height: 0.7rem;
					cursor: pointer;
					.upload-img {
						width: 100%;
						height: 100%;
						border: 0.01rem solid #e6e6e6;
						image {
							width: 100%;
							height: 100%;
						}
					}
					.upload-icon {
						width: 100%;
						height: 100%;
						border: 0.01rem solid #e6e6e6;
						align-items: center;
						text-align: center;
						line-height: 1.2;
						display: flex;
						flex-direction: column;
						justify-content: center;
						color: #999;
						.iconfont {
							font-size: 0.3rem;
						}
						view {
							font-size: 0.12rem;
						}
					}
				}
			}
			.search-wrap {
				position: relative;
				i {
					position: absolute;
					top: 50%;
					right: 0.1rem;
					transform: translateY(-50%);
					border-left: 0.01rem solid #e6e6e6;
					line-height: 0.3rem;
					padding-left: 0.1rem;
					cursor: pointer;
				}
			}
			.label-list {
				width: calc(100% - 1.35rem);
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				.label-item {
					border: 0.01rem solid #e6e6e6;
					padding: 0.07rem 0.1rem;
					line-height: 1;
					margin-right: 0.1rem;
					border-radius: 0.03rem;
					cursor: pointer;
					position: relative;
					margin-bottom: 0.1rem;
					i {
						position: absolute;
						right: -0.01rem;
						bottom: -0.01rem;
						color: $primary-color;
						display: none;
					}
					&.active {
						border-color: $primary-color;
						i {
							display: block;
						}
					}
				}
			}
		}
		.btn-wrap {
			position: absolute;
			bottom: 0.15rem;
			left: 0.25rem;
			right: 0.25rem;
			.primary-btn {
				height: 0.4rem;
				line-height: 0.4rem;
			}
		}
	}
}

.empty {
	text-align: center;
	padding-top: 0.8rem;
	width: 100%;

	image {
		width: 2rem;
	}

	.tips {
		color: #999;
		margin-top: 0.15rem;
	}
}
</style>