581 lines
13 KiB
Vue
581 lines
13 KiB
Vue
<template>
|
||
<view>
|
||
<uni-popup ref="memberInquirePopup" type="center">
|
||
<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="headError(item)"></image>
|
||
<image class="item-img" mode="aspectFill" v-else :src="$util.img('public/uniapp/default_img/head.png')"></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
|
||
};
|
||
},
|
||
created() {
|
||
this.getMemberList();
|
||
this.getMemberLevel();
|
||
},
|
||
methods: {
|
||
open() {
|
||
this.$refs.memberInquirePopup.open();
|
||
},
|
||
searchMember() {
|
||
this.page = 1;
|
||
this.getMemberList();
|
||
},
|
||
// 查询会员列表
|
||
getMemberList() {
|
||
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) {
|
||
if (this.page == 1) this.memberList = [];
|
||
this.memberList = this.memberList.concat(res.data.list);
|
||
if (res.data.page_count >= this.page) this.page++;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
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 (!/^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/.test(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>
|