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

<template>
	<view class="container">
		<view class="search-wrap" v-if="!info && type == 'member1'">
			<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 == 'member1'">
			<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">{{ parseInt(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="member-card-wrap">
				<view class="common-tab-wrap" id="tab">
					<view class="tab-item active-bar"><text class="text">会员卡项</text></view>
					<view class="active" :style="activeStyle"></view>
				</view>
				<view class="card-wrap">
					<scroll-view scroll-y="true" class="card-list" @scrolltolower="getMemberCard()">
						<block v-if="memberCardData.list.length">
							<view
								class="card-item"
								:class="{ active: memberCardData.index == index }"
								v-for="(item, index) in memberCardData.list"
								:key="index"
								@click="selectMemberCard(item, index)"
							>
								<view class="card-name">{{ item.goods_name }}</view>
								<view class="info">
									<view v-if="item.total_num > 0">可用{{ item.total_num - item.total_use_num }}次</view>
									<view v-else>不限次</view>
									<view v-if="item.end_time > 0">有效期：{{ $util.timeFormat(item.end_time, 'y-m-d') }}</view>
									<view v-else>长期有效</view>
								</view>
							</view>
						</block>
						<view v-else class="empty">
							<image :src="$util.img('public/uniapp/cashier/card_empty.png')" mode="widthFix"></image>
							<view class="tips">暂无可用卡项</view>
						</view>
					</scroll-view>
					<view class="item-list">
						<view class="title">
							<view>可用服务/商品</view>
							<view v-if="memberCardData.currData.card_type == 'commoncard'">
								以下服务/商品剩余可用
								<text class="num">{{ memberCardData.currData.total_num - memberCardData.currData.total_use_num }}</text>
								次
							</view>
						</view>
						<scroll-view scroll-y="true" class="item-wrap">
							<view class="uni-flex" v-if="memberCardData.currData.item_list">
								<view
									class="card-item"
									:class="{
										active: memberCardData.selected['item_' + item.item_id],
										'item-mum-1': itemNum == 1,
										'item-mum-2': itemNum == 2,
										'item-mum-3': itemNum == 3,
										'not-select': !checkStatus(item) && !memberCardData.selected['item_' + item.item_id]
									}"
									@click="selectMemberCardItem(item, index)"
									v-for="(item, index) in memberCardData.currData.item_list"
								>
									<view class="image"><image :src="$util.img(item.sku_image, { size: 'small' })" mode="widthFix"></image></view>
									<view class="info">
										<view>
											<view class="name">
												<text class="tag">{{ item.is_virtual ? '服务' : '商品' }}</text>
												{{ item.sku_name }}
											</view>
											<block v-if="memberCardData.currData.card_type != 'commoncard'">
												<view class="num" v-if="item.num > 0">剩余可用{{ item.num - item.use_num }}次</view>
												<view class="num" v-else>不限次</view>
											</block>
										</view>
										<view class="operation-wrap">
											<view class="price">
												<text class="util">￥</text>
												{{ item.price }}
											</view>
											<view class="number-wrap" v-if="memberCardData.selected['item_' + item.item_id]">
												<text class="iconfont iconjian" @click.stop="itemDec(memberCardData.selected['item_' + item.item_id])"></text>
												<input type="number" v-model="memberCardData.selected['item_' + item.item_id].input_num" />
												<text class="iconfont iconjia" @click.stop="itemInc(memberCardData.selected['item_' + item.item_id])"></text>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="empty" v-else>
								<image :src="$util.img('public/uniapp/cashier/goods_empty.png')" mode="widthFix"></image>
								<view class="tips">暂无相关数据</view>
							</view>
						</scroll-view>
						<view class="button-wrap">
							<button type="default" class="primary-btn" :disabled="memberCardData.itemIndex == -1" @click="selectGoods()">加入购物车</button>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="info-wrap" v-if="info && type == 'card'">
			<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 && memberInfo.birthday ? memberInfo.birthday : '--' }}</view>
						<view>注册时间：{{ info.reg_time | timeFormat }}</view>
					</view>
				</view>
			</view>
			<view class="member-card-wrap">
				<view class="common-tab-wrap" id="tab">
					<view class="tab-item active-bar"><text class="text">会员卡项</text></view>
					<view class="active" :style="activeStyle"></view>
				</view>
				<view class="card-wrap">
					<scroll-view scroll-y="true" class="card-list" @scrolltolower="getMemberCard()">
						<block v-if="memberCardData.list.length">
							<view
								class="card-item"
								:class="{ active: memberCardData.index == index }"
								v-for="(item, index) in memberCardData.list"
								:key="index"
								@click="selectMemberCard(item, index)"
							>
								<view class="card-name">{{ item.goods_name }}</view>
								<view class="info">
									<view v-if="item.total_num > 0">可用{{ item.total_num - item.total_use_num }}次</view>
									<view v-else>不限次</view>
									<view v-if="item.end_time > 0">有效期：{{ $util.timeFormat(item.end_time, 'y-m-d') }}</view>
									<view v-else>长期有效</view>
								</view>
							</view>
						</block>
						<view v-else class="empty">
							<image :src="$util.img('public/uniapp/cashier/card_empty.png')" mode="widthFix"></image>
							<view class="tips">暂无可用卡项</view>
						</view>
					</scroll-view>
					<view class="item-list">
						<view class="title">
							<view>可用服务/商品</view>
							<view v-if="memberCardData.currData.card_type == 'commoncard'">
								以下服务/商品剩余可用
								<text class="num">{{ memberCardData.currData.total_num - memberCardData.currData.total_use_num }}</text>
								次
							</view>
						</view>
						<scroll-view scroll-y="true" class="item-wrap">
							<view class="uni-flex" v-if="memberCardData.currData.item_list">
								<view
									class="card-item"
									:class="{
										active: memberCardData.selected['item_' + item.item_id],
										'item-mum-1': itemNum == 1,
										'item-mum-2': itemNum == 2,
										'item-mum-3': itemNum == 3,
										'not-select': !checkStatus(item) && !memberCardData.selected['item_' + item.item_id]
									}"
									@click="selectMemberCardItem(item, index)"
									v-for="(item, index) in memberCardData.currData.item_list"
								>
									<view class="image"><image :src="$util.img(item.sku_image, { size: 'small' })" mode="widthFix"></image></view>
									<view class="info">
										<view>
											<view class="name">
												<text class="tag">{{ item.is_virtual ? '服务' : '商品' }}</text>
												{{ item.sku_name }}
											</view>
											<block v-if="memberCardData.currData.card_type != 'commoncard'">
												<view class="num" v-if="item.num > 0">剩余可用{{ item.num - item.use_num }}次</view>
												<view class="num" v-else>不限次</view>
											</block>
										</view>
										<view class="operation-wrap">
											<view class="price">
												<text class="util">￥</text>
												{{ item.price }}
											</view>
											<view class="number-wrap" v-if="memberCardData.selected['item_' + item.item_id]">
												<text class="iconfont iconjian" @click.stop="itemDec(memberCardData.selected['item_' + item.item_id])"></text>
												<input type="number" v-model="memberCardData.selected['item_' + item.item_id].input_num" />
												<text class="iconfont iconjia" @click.stop="itemInc(memberCardData.selected['item_' + item.item_id])"></text>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="empty" v-else>
								<image :src="$util.img('public/uniapp/cashier/goods_empty.png')" mode="widthFix"></image>
								<view class="tips">暂无相关数据</view>
							</view>
						</scroll-view>
						<view class="button-wrap">
							<button type="default" class="primary-btn" :disabled="memberCardData.itemIndex == -1" @click="selectGoods()">加入购物车</button>
						</view>
					</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="coupon-box" v-if="info && type == 'hongbao'">
			<text class="iconguanbi1 iconfont " @click="type = 'member'"></text>
			<view class="content-list">
				<view class="content-item" v-for="(item, index) in memberHongbao" v-if="memberHongbao.length > 0">
					<view class="item-title">{{ item.name }}</view>
					<view class="item-content">
						<text>￥</text>
						{{ item.money }}
					</view>
					<view class="item-line"></view>
					<view class="item-bottom">
						<view class="item-time">{{ $util.timeFormat(item.start_time) }}至{{ $util.timeFormat(item.end_time) }}</view>
					</view>
				</view>
				<view class="empty" v-if="memberHongbao.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';
import ncMember from './nc-member.js';

export default {
	components: {
		uniDataCheckbox
	},
	name: 'ncMember',
	props: {},
	mixins: [ncMember],
	computed: {
		info() {
			if (this.memberInfo) this.type = 'card';
			return this.memberInfo;
		}
	},
	watch: {
		info: function(nVal, oVal) {
			if ((nVal && !oVal) || (nVal && oVal && nVal.member_id != oVal.member_id) || !nVal) {
				this.memberCardData.page = 0;
				this.memberCardData.index = 0;
				this.memberCardData.list = [];
				this.memberCardData.currData = {};
				this.memberCardData.selected = {};
				if (nVal) this.getMemberCard();
			}
		}
	}
};
</script>

<style lang="scss">
@import './nc-member.scss';
</style>