405 lines
16 KiB
Vue
405 lines
16 KiB
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('public/uniapp/default_img/head.png')"></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('public/uniapp/default_img/head.png')"></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>
|