文件
mashangyoujiu/Application/Retail/View/Plus/store_plusvip.html

375 行
18 KiB
HTML
可执行文件

<!--[1.8.70]-->
<style>
.tags {
margin: 15px 15px 0 0;
}
</style>
<div id="plusVipApp">
<el-form :inline="true" size="small">
<el-form-item>
<el-input placeholder="昵称/手机号/实体卡"
type="text" size="small"
v-model="searchForm.keyword" clearable
@keydown.enter.exact.native.prevent="handleCurrentChange(1)" style="width:200px">
</el-input>
</el-form-item>
<el-form-item>
<select-store :store-id.sync="searchForm.store_id"
:store-status="3"
:show-status="true"
:placeholder="'会员所属门店'"></select-store>
</el-form-item>
<el-form-item>
<el-select size="small" v-model="searchForm.status" placeholder="会员状态" clearable>
<el-option v-for="item in vipStatus"
:key="item.status"
:label="item.name"
:value="item.status">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getSumData();handleCurrentChange(1);">搜索</el-button>
<el-button type="primary" v-if="storeAuth.data_export==1&&operate.storeExportVip"
plain @click="storeExportVip">导出
</el-button>
<el-button type="primary" plain @click="showEditMore=!showEditMore">>>更多搜索</el-button>
</el-form-item>
<div v-show="showEditMore" style="display: flex;flex-direction: row;flex-wrap: wrap;">
<el-form-item>
<vip-more-search :section="searchForm.section"></vip-more-search>
</el-form-item>
</div>
</el-form>
<div class="table-top-card-box">
<div class="table-top-card">
<div class="table-top-card-header">会员总数</div>
<div class="table-top-card-body">{{sumData.all_count}}</div>
</div>
<div class="table-top-card">
<div class="table-top-card-header">昨日新会员</div>
<div class="table-top-card-body">{{sumData.yesterday_count}}</div>
</div>
<div class="table-top-card">
<div class="table-top-card-header">上周新会员</div>
<div class="table-top-card-body">{{sumData.last_week_count}}</div>
</div>
<div class="table-top-card">
<div class="table-top-card-header">总可用积分</div>
<div class="table-top-card-body">{{sumData.all_integral}}</div>
</div>
<div class="table-top-card">
<div class="table-top-card-header">总可用余额</div>
<div class="table-top-card-body">{{sumData.all_balance}}</div>
</div>
</div>
<!--列表-->
<div style="max-width: calc(100vw - 208px);margin-top: 20px;">
<el-table border :data="vipList" size="small" :max-height="tableHeight"
:header-cell-style="{background:'#F5F7FA',color:'#606266'}">
<el-table-column align="center" fixed="left" type="index" label="序号" width="50"></el-table-column>
<el-table-column align="center" label="姓名/昵称" show-overflow-tooltip
min-width="120">
<template slot-scope="scope">
<span v-if="scope.row.name">{{scope.row.name}}</span><br/>
<span v-if="scope.row.nickname">{{scope.row.nickname}}</span>
</template>
</el-table-column>
<el-table-column align="center" prop="mobile_phone" label="手机号" min-width="110"
show-overflow-tooltip></el-table-column>
<el-table-column align="center" prop="user_label" label="会员标签" min-width="100"></el-table-column>
<el-table-column align="center" prop="card_key" label="实体卡号" min-width="80"
show-overflow-tooltip></el-table-column>
<el-table-column align="center" prop="integral" label="积分" min-width="80"
show-overflow-tooltip></el-table-column>
<el-table-column align="center" prop="balance" label="余额" min-width="100"
show-overflow-tooltip></el-table-column>
<el-table-column align="center" prop="birthday" label="生日" min-width="100"
show-overflow-tooltip></el-table-column>
<el-table-column align="center" prop="add_time" label="注册时间" min-width="150"
show-overflow-tooltip></el-table-column>
<el-table-column align="center" prop="start_time" label="开始时间" min-width="150"
show-overflow-tooltip></el-table-column>
<el-table-column align="center" prop="end_time" label="到期时间" min-width="150"
show-overflow-tooltip></el-table-column>
<el-table-column align="center" prop="store_name" label="所属门店" min-width="100"
show-overflow-tooltip></el-table-column>
<el-table-column align="center" prop="guide_name" label="所属导购" min-width="90"
show-overflow-tooltip></el-table-column>
<el-table-column align="center" prop="state_name" label="状态" min-width="80"
show-overflow-tooltip></el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="130">
<template slot-scope="scope">
<el-button type="text" size="mini" @click="toDetails(scope.row.vip_id)">详细信息</el-button>
<el-dropdown>
<el-button plain type="text" size="mini">更多操作</el-button>
<el-dropdown-menu slot="dropdown">
<div style="display: flex;flex-direction: column;padding: 0 10px;align-items: center">
<el-button v-if="operate.rechargeList" type="text"
@click.native="refund(scope.row.vip_id)"
size="mini">余额退款
</el-button>
<template v-if="storeAuth.store_operation_vip==1">
<!--冻结-->
<vip-frozen v-if="scope.row.status == 1 && operate.storeFrozenVip"
:vid="scope.row.vip_id" :type="4" @end="getVipList"></vip-frozen>
<!--挂失-->
<vip-loss v-if="scope.row.status == 1 && operate.storeLossVip"
:vid="scope.row.vip_id" :type="4" @end="getVipList"></vip-loss>
<!--恢复-->
<vip-thaw
v-if="(scope.row.status == 3 || scope.row.status == 4) && operate.storeThawVip"
:vid="scope.row.vip_id" :type="4" @end="getVipList"></vip-thaw>
<template v-if="storeAuth.store_edit_vip_info==1&&operate.storeModifyVipInfo">
<el-button @click.native="modifyVip(scope.row)"
type="text" size="mini">修改信息
</el-button>
<el-button size="mini" type="text" @click.native="doSetVipLabel(scope.row.id)">
会员标签
</el-button>
</template>
<!--密码-->
<vip-password v-if="operate.storeModifyPassword"
:vid="scope.row.vip_id" :type="4"></vip-password>
</template>
<el-button size="mini" type="text" v-if="operate.plus_record"
@click.native="plusRecord(scope.row.vip_id)">记录
</el-button>
</div>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
<div slot="empty" v-if="!loading">暂无数据</div>
<div slot="empty" v-else><span class="el-icon-loading"></span></div>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 15, 20, 25, 30, 35, 40, 45, 50]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="currentLen">
</el-pagination>
</div>
<!--编辑会员-->
<edit-vip-info :show="showModifyDialog"
:type="4"
:edit-data="editData"
@end="editVipEnd"></edit-vip-info>
<!-- 会员标签 -->
<edit-vip-label :show="showSetVipLabelDialog"
:vid="edit_vid"
@end="editVipLabelEnd"></edit-vip-label>
</div>
<script src="/Public/Retail/common/js/select-store.js"></script>
<script src="/Public/Retail/common/js/select-vip-grade.js?v=1.0.2"></script>
<script src="/Public/Retail/js/vip/common-operate.js"></script>
<script src="/Public/Retail/js/vip/edit-vip-label.js"></script>
<script type="text/javascript">
var plusVipApp = new Vue({
el: '#plusVipApp',
data: {
tableHeight: (MenuApp.getContainerClientHeight() - 240) + 'px',
searchForm: {
store_id: '',
keyword: '',
status: '',
section: {
integral: '',
balance: '',
purchase: '',
type: '',
time: '',
}
},
sumData: {
all_count: 0,
yesterday_count: 0,
last_week_count: 0,
all_integral: 0,
all_balance: 0,
},
editData: {},//编辑会员的资料
showModifyDialog: false,//是否显示编辑会员
vipStatus: [
{name: '所有会员', status: 0},
{name: '正常会员', status: 1},
{name: '已冻结会员', status: 3},
{name: '已挂失会员', status: 4},
],
showEditMore: false,//是否显示更多操作
operate: {},//用户操作权限
vipList: [],//会员列表
currentPage: 1,//页
currentLimit: 10,//每页数量
currentLen: 10,//当前条件下总数量
loading: true,//列表是否在加载中
showSetVipLabelDialog: false,//是否显示修改会员标签
edit_vid: '',
},
methods: {
//查看会员信息
toDetails(id) {
layer.open({
type: 2,
title: "详细信息",
content: "{:U('MemberAnalyze/detail')}?id=" + id,
area: ["calc(100% - 160px)", "calc(100% - 65px)"],
offset: 'rb',
resize: false,
shade: 0,
move: false
});
},
modifyVip(item) {
this.editData = {...item};
this.editData.id = item.vip_id;
this.editData.plus_type = '2';
this.showModifyDialog = true;
},
editVipEnd() {
this.showModifyDialog = false;
this.getVipList();
},
//显示修改会员标签
doSetVipLabel(id) {
//会员标签
this.edit_vid = id;
this.showSetVipLabelDialog = true;
},
editVipLabelEnd() {
this.showSetVipLabelDialog = false;
this.getVipList();
},
//余额退款
refund(id) {
layer.open({
type: 2,
title: "充值列表",
content: "{:U('Vip/rechargeIndex')}?id=" + id,
area: ['calc(100% - 160px)', 'calc(100% - 65px)'],
offset: 'rb',
resize: false,
shade: 0,
move: false,
end: () => {
this.getVipList();
}
})
},
//plus记录
plusRecord(id) {
layer.open({
type: 2,
title: "plus记录",
content: "{:U('plus_record')}?vip_id=" + id,
area: ['50%', '50%'],
})
},
//切换每页筛选数量
handleSizeChange(val) {
this.currentLimit = val;
this.currentPage = 1;
this.getVipList();
},
//切换页数
handleCurrentChange(val) {
this.currentPage = val;
this.getVipList();
},
//获取统计数据
getSumData() {
if ([1, 2, 3].indexOf(this.searchForm.section.type) > -1) {
if (!this.searchForm.section.time) {
return this.$message.warning('请选择时间');
}
}
this.sendRequest('Retail/Plus/getStorePlusVipTotal', {
data: {
...this.searchForm,
section: JSON.stringify(this.searchForm.section),
},
success: (res) => {
if (res.status == 1) {
this.sumData.yesterday_count = res.data.yesterday_count;
this.sumData.last_week_count = res.data.last_week_count;
this.sumData.all_integral = res.data.all_integral;
this.sumData.all_balance = res.data.all_balance;
} else {
this.$message.error(res.message);
}
}
})
},
//获取会员列表
getVipList() {
this.loading = true;
this.sendRequest('Retail/Plus/getStorePlusVipList', {
data: {
page: this.currentPage,
limit: this.currentLimit,
...this.searchForm,
section: JSON.stringify(this.searchForm.section),
},
success: (res) => {
this.loading = false;
if (res.status == 1) {
this.sumData.all_count = res.data.count;
this.vipList = [];
this.vipList = res.data.list;
this.currentLen = parseInt(res.data.count);
} else {
this.$message.error('数据获取失败');
}
}
})
},
//导出
storeExportVip() {
let store_id = this.searchForm.store_id;
let keyword = this.searchForm.keyword;
let status = this.searchForm.status;
let section = this.searchForm.section;
this.$confirm("确认导出会员?", "提示", {
confirmButtonText: '导出',
cancelButtonText: '取消',
type: 'info'
}).then(() => {
window.location.href = `{:U('storeExportVip')}?keyword=${keyword}&store_id=${store_id}&status=${status}&section=${JSON.stringify(section)}`;
}).catch(() => {
});
},
//获取用户权限
getOperate() {
this.checkOperateAuth({
storeExportVip: '/index.php/Retail/Plus/storeExportVip',
storeFrozenVip: '/index.php/Retail/Plus/storeFrozenVip',
storeLossVip: '/index.php/Retail/Plus/storeLossVip',
storeThawVip: '/index.php/Retail/Plus/storeThawVip',
storeModifyPassword: '/index.php/Retail/Plus/storeModifyPassword',
storeModifyVipInfo: '/index.php/Retail/Plus/storeModifyVipInfo',
store_plus_record: '/index.php/Retail/Plus/store_plus_record',
rechargeList: '/index.php/Retail/Vips/rechargeList',
}, (data) => {
this.operate = data;
});
}
},
created() {
this.getOperate();
this.getVipList();
this.getSumData();
}
});
</script>