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

<template>
	<view>
		<view class="search-wrap" v-if="!info && type == 'member'">
			<view class="header">会员信息</view>
			<view class="search-box">
				<view class="search-title">询问客户信息查询会员</view>
				<view class="search-content">
					<input placeholder="请输入会员信息" v-model="searchText" placeholder-style="font-size:0.16rem;color:#ACACAC;" @confirm="searchMember()" />
					<button class="primary-btn" @click="searchMember">查询</button>
					<button class="default-btn" plain="true" @click="addSwitch">录入</button>
				</view>

				<view class="search-desc">可查询会员账号、手机号、昵称、会员码(可使用扫码枪)、会员动态码</view>
				<view class="search-tips">使用扫码枪时，光标必须在输入框内，方可进行使用</view>
			</view>
		</view>

		<view class="info-wrap" v-if="info && type == 'member'">
			<view class="header">会员信息</view>
			<view class="headimg-content">
				<view class="headimg"><image :src="info.headimg ? $util.img(info.headimg) : $util.img(defaultImg.head)" @error="info.headimg = defaultImg.head"></image></view>
				<view class="header-info">
					<view class="name">
						{{ info.nickname }}
						<text v-if="info.member_level">{{ info.member_level_name }}</text>
					</view>
					<view class="header-info-item">
						<view>电话：{{ info.mobile }}</view>
						<view>性别：{{ info.sex == 0 ? '未知' : info.sex == 1 ? '男' : '女' }}</view>
						<view>生日：{{ info.birthday ? $util.timeFormat(info.birthday, 'y-m-d') : '--' }}</view>
						<view>注册时间：{{ info.reg_time | timeFormat }}</view>
					</view>
				</view>
			</view>

			<view class="content-data">
				<view class="content-data-item">
					<view class="item-title">余额</view>
					<view class="item-value">{{ (parseFloat(info.balance_money) + parseFloat(info.balance)) | moneyFormat }}</view>
					<view class="item-btn" @click="recharge()">充值</view>
				</view>
				<view class="content-data-item">
					<view class="item-title">积分</view>
					<view class="item-value">{{ info.point }}</view>
					<view class="item-btn"></view>
				</view>
				<view class="content-data-item">
					<view class="item-title">优惠券（张）</view>
					<view class="item-value">{{ info.coupon_num }}</view>
					<view class="item-btn" @click="coupon()">查看</view>
				</view>
			</view>

			<view class="content-data">
				<view class="content-data-item">
					<view class="item-title">总消费金额(元)</view>
					<view class="item-value">{{ info.order_money | moneyFormat }}</view>
				</view>
				<view class="content-data-item">
					<view class="item-title">消费订单数</view>
					<view class="item-value">{{ info.order_num }}</view>
				</view>
				<view class="content-data-item">
					<view class="item-title">平均客单价(元)</view>
					<view class="item-value" v-if="info.order_money > 0 && info.order_num > 0">{{ (info.order_money / info.order_num) | moneyFormat }}</view>
					<view class="item-value" v-else>0.00</view>
				</view>
				<view class="content-data-item">
					<view class="item-title">上次到店时间</view>
					<view class="item-value">{{ info.last_login_time ? $util.timeFormat(info.last_login_time) : '--' }}</view>
				</view>
			</view>
		</view>

		<view class="coupon-box" v-if="info && type == 'coupon'">
			<i class="iconguanbi1 iconfont " @click="type = 'member'"></i>
			<view class="content-list">
				<view class="content-item" v-for="(item, index) in memberCoupon" v-if="memberCoupon.length > 0">
					<view class="item-title">{{ item.coupon_name }}</view>

					<view class="item-content" v-if="item.type == 'reward' || item.type == 'random'">
						<text>￥</text>
						{{ item.money }}
					</view>
					<view class="item-content" v-if="item.type == 'discount'">
						{{ item.discount }}
						<text>折</text>
					</view>

					<view class="item-line"></view>
					<view class="item-bottom">
						<view class="item-desc" v-if="item.type == 'reward' || item.type == 'random'">满{{ item.at_least }}可用</view>
						<view class="item-desc" v-if="item.type == 'discount'">满{{ item.at_least }}可用,最多优惠{{ item.discount_limit }}元</view>
						<view class="item-time">{{ $util.timeFormat(item.start_time) }}至{{ $util.timeFormat(item.end_time) }}</view>
					</view>
				</view>
				<view class="empty" v-if="memberCoupon.length == 0">
					<image :src="$util.img('public/uniapp/cashier/goods_empty.png')" mode="widthFix"></image>
					<view class="tips">暂无优惠券</view>
				</view>
			</view>
		</view>

		<view class="form-box" v-if="!info && type == 'addmember'">
			<view class="header">录入会员</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">
						<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="form-item">
					<view class="form-label"></view>
					<view class="form-inline">
						<button type="primary" class="primary-btn" @click="addMember">确定录入</button>
						<button type="primary" class="default-btn" @click="type = 'member'">返回搜索</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniDataCheckbox from '@/components/uni-data-checkbox/uni-data-checkbox.vue';
export default {
	components: {
		uniDataCheckbox
	},
	name: 'ncMember',
	props: {},
	data() {
		return {
			memberId: 0,
			searchText: '',
			type: 'addmember',
			memberCoupon: [],
			startDate: '1900-1-1',
			sex: [
				{
					text: '未知',
					value: 0
				},
				{
					text: '男',
					value: 1
				},
				{
					text: '女',
					value: 2
				}
			],
			memberData: {
				sex: 0,
				mobile: '',
				nickname: '',
				birthday: '',
				headimg: '',
				email: '',
				memberlabel: [],
				remark: '',
				member_level: 0,
				member_level_name: '',
				member_code: ''
			},
			flag: false,
			memberLevelList: []
		};
	},
	created() {
		this.getMemberLevel();
	},
	methods: {
		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();
		},
		// 添加图片
		addImg(i) {
			this.$util.upload(
				1,
				{
					path: 'headimg'
				},
				res => {
					if (res.length > 0) {
						this.memberData.headimg = res[0];
						this.$forceUpdate();
					}
				}
			);
		},
		getMemberLabel() {
			this.memberLabelList = [];
			this.$api.sendRequest({
				url: '/cashier/storeapi/MemberLabel/labellist',
				data: { page: 1, page_size: 0 },
				success: res => {
					if (res.code == 0 && res.data) {
						this.memberLabelList = res.data.list;
					}
				}
			});
		},
		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
							});
						}
					}
				}
			});
		},
		addSwitch() {
			this.type = 'addmember';
			this.memberData.mobile = this.searchText;
		},
		addMember() {
			if (this.verify()) {
				if (this.flag) return;
				this.flag = true;
				this.$api.sendRequest({
					url: '/cashier/storeapi/member/addMember',
					data: this.memberData,
					success: res => {
						if (res.code == 0 && res.data) {
							this.memberId = res.data;
							this.type = 'member';
							this.getMemberInfo();
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
						this.flag = false;
					}
				});
			}
		},
		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;
		},
		changeTime(e) {
			this.memberData.birthday = e;
		},
		recharge() {
			this.$util.redirectTo('/pages/recharge/index');
		},
		coupon() {
			this.type = 'coupon';
			this.memberCoupon = [];
			this.$api.sendRequest({
				url: '/cashier/storeapi/member/coupon',
				data: {
					member_id: this.info.member_id,
					page: 1,
					page_size: 0
				},
				success: res => {
					if (res.code == 0 && res.data) {
						this.memberCoupon = res.data.list;
					}
				}
			});
		},
		searchMember() {
			if (!/[\S]+/.test(this.searchText)) {
				this.$util.showToast({ title: '请输入搜索内容' });
				return;
			}

			this.$api.sendRequest({
				url: '/cashier/storeapi/member/searchmember',
				data: {
					search_text: this.searchText
				},
				success: res => {
					if (res.code == 0 && res.data) {
						this.memberId = res.data.member_id;
						this.searchText = '';
						this.getMemberInfo();
					} else {
						this.$util.showToast({ title: '没有查询到对应会员' });
					}
				}
			});
		},
		searchMemberByType(searchText, searchType) {
			this.$api.sendRequest({
				url: '/cashier/storeapi/member/searchmember',
				data: {
					search_text: searchText,
					search_type: searchType
				},
				success: res => {
					if (res.code == 0 && res.data) {
						this.memberId = res.data.member_id;
						this.searchText = '';
						this.getMemberInfo();
						this.type = 'member';
					} else {
						this.$util.showToast({ title: '没有查询到对应会员' });
					}
				}
			});
		},
		getMemberInfo() {
			this.$api.sendRequest({
				url: '/cashier/storeapi/member/info',
				data: {
					member_id: this.memberId
				},
				success: res => {
					if (res.code == 0 && res.data) {
						this.$store.commit('setMemberInfo', res.data);
					} else {
						this.$util.showToast({ title: '未获取到会员信息' });
					}
				}
			});
		}
	},
	computed: {
		info() {
			if (!this.memberInfo) this.type = 'member';
			return this.memberInfo;
		}
	}
};
</script>

<style lang="scss">
.header {
	height: 0.66rem;
	line-height: 0.66rem;
	text-align: left;
	border-bottom: 0.01rem solid #e6e6e6;
	color: #303133;
	font-size: 0.14rem;
}

.search-wrap {
	.search-box {
		padding-top: 2rem;
		display: flex;
		align-items: center;
		height: calc(100% - 0.86rem);
		flex-direction: column;
		justify-content: center;
		.search-title {
			font-size: 0.18rem;
			color: #303133;
		}
		.search-content {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 0.3rem;
			input {
				height: 0.5rem;
				width: 60%;
				max-width: 5rem;
				background: #ffffff;
				padding-left: 0.2rem;
				border: 0.01rem solid #cccccc;
				box-sizing: border-box;
				font-size: 0.18rem;
			}
			button {
				margin: 0;
				width: 1.2rem;
				height: 0.5rem;
				font-size: 0.18rem;
				text-align: center;
				line-height: 0.5rem;
				margin-right: 0.15rem;
			}
		}
		.search-desc {
			color: #909399;
			font-size: 0.14rem;
			margin-top: 0.3rem;
		}
		.search-tips {
			color: $primary-color;
			font-size: 0.14rem;
			margin-top: 0.15rem;
		}
	}
}

.info-wrap {
	.headimg-content {
		display: flex;
		align-items: center;
		margin-top: 0.2rem;
		.headimg {
			width: 0.7rem;
			height: 0.7rem;
			border-radius: 50%;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.header-info {
			margin-left: 0.15rem;
			width: calc(100% - 0.85rem);
			.name {
				font-size: 0.16rem;
				color: #303133;
				text {
					background: #ffffff;
					border: 0.01rem solid $primary-color;
					border-radius: 0.02rem;
					font-size: 0.12rem;
					color: $primary-color;
					margin-left: 0.15rem;
					padding: 0.01rem 0.04rem;
				}
			}
			.header-info-item {
				display: flex;
				align-items: center;
				margin-top: 0.1rem;
				justify-content: space-between;
				view {
					text-align: left;
					font-size: 0.14rem;
					color: #303133;
					opacity: 0.9;
				}
			}
		}
	}

	.content-data {
		display: flex;
		align-items: flex-start;
		justify-content: space-around;
		margin-top: 0.2rem;
		border: 0.01rem solid #e6e6e6;
		padding: 0.25rem 0.3rem;
		.content-data-item {
			width: 25%;
			.item-title {
				font-size: 0.14rem;
				font-weight: 400;
				color: #303133;
				opacity: 0.9;
			}
			.item-value {
				font-size: 0.2rem;
				color: #303133;
				margin-top: 0.1rem;
			}
			.item-btn {
				font-size: 0.14rem;
				color: $primary-color;
				margin-top: 0.05rem;
				cursor: pointer;
			}
		}
	}

	.table-data-list {
		padding: 0 0.15rem;
		margin-top: 0.2rem;
	}
}

// 优惠券
.coupon-box {
	position: relative;
	padding-top: 0.3rem;
	.iconfont {
		position: absolute;
		right: 0.2rem;
		top: 0.2rem;
		font-size: 0.24rem;
		cursor: pointer;
	}
	.content-list {
		padding: 0.2rem 0rem;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		.content-item {
			width: calc((100% - 0.2rem) / 3);
			position: relative;
			background-color: #fff;
			box-shadow: 0 0 0.15rem rgba(0, 0, 0, 0.1);
			display: flex;
			flex-direction: column;
			align-items: baseline;
			border-radius: 0.05rem;
			border: 0.01rem solid #eee !important;
			margin-right: 0.1rem;
			box-sizing: border-box;
			margin-bottom: 0.1rem;
			.item-title {
				color: #000;
				font-size: 0.15rem;
				padding: 0.15rem 0 0 0.15rem;
			}
			.item-content {
				color: #fe2278;
				font-size: 0.24rem;
				padding: 0.15rem 0.1rem;
				width: 100%;
				text-align: center;
				box-sizing: border-box;
				font-weight: 600;
			}
			.item-line {
				height: 0.01rem;
				width: 100%;
				border-top: 0.01rem dashed rgba(0, 0, 0, 0.2);
				position: relative;
			}
			.item-line:before {
				content: ' ';
				position: absolute;
				top: -0.13rem;
				left: -0.01rem;
				box-sizing: border-box;
				height: 0;
				width: 0;
				border-bottom: solid 0.12rem transparent;
				border-top: solid 0.12rem transparent;
				border-left: solid 0.08rem #f2f2f2;
			}
			.item-line:after {
				content: ' ';
				position: absolute;
				top: -0.13rem;
				right: -0.01rem;
				box-sizing: border-box;
				height: 0;
				width: 0;
				border-bottom: solid 0.12rem transparent;
				border-top: solid 0.12rem transparent;
				border-right: solid 0.08rem #f2f2f2;
			}
			.item-bottom {
				width: 100%;
				padding: 0.05rem 0.15rem;
				color: #999;
				font-size: 0.12rem;
				box-sizing: border-box;
			}
		}
		.content-item:nth-child(3n) {
			margin-right: 0;
		}
	}
}
.empty {
	text-align: center;
	padding-top: 1.2rem;
	margin: 0 auto;
	image {
		width: 2rem;
	}

	.tips {
		color: #999;
		margin-top: 0.15rem;
	}
}

// 录入会员
.form-box {
	.form-content {
		margin-top: 0.2rem;

		.form-item {
			margin-bottom: 0.1rem;
			display: flex;
			.form-label {
				width: 1.3rem;
				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;
						}
					}
				}
			}
		}
	}
}
</style>