366 lines
9.4 KiB
Vue
366 lines
9.4 KiB
Vue
<template>
|
||
<view class="custom-content">
|
||
<!--顶部搜索框-->
|
||
<view class="search-content">
|
||
<view class="search-box">
|
||
<text class="iconfont icon-sousuo" @click="getStaffList(1)"></text>
|
||
<input class="search-input" type='text' placeholder='请输入员工名称' v-model="search.keyword" @input="getStaffList(1)" />
|
||
</view>
|
||
</view>
|
||
<!-- 员工列表 -->
|
||
<view class="custom-list">
|
||
<view class="list-item" v-for="(item,index) in list" :key="index">
|
||
<view class="left-avatar">
|
||
<image v-if="item.avatar.length > 10" :src="item.avatar" mode="widthFix"/>
|
||
</view>
|
||
<view class="center-info">
|
||
<view class="info-top">{{ item.nickname }}</view>
|
||
<view class="info-bottom">UID：{{ item.uid }}</view>
|
||
</view>
|
||
<view class="right-btn" v-if="uid != item.uid">
|
||
<view class="give-btn edit-btn" @click="goToEditPage(item.service_id)">编辑</view>
|
||
<view class="give-btn del-btn" @click="delInfo(item.service_id)">删除</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!--添加按钮-->
|
||
<view class="group-btn">
|
||
<view class="add-btn" @click="addStaff()">添加员工</view>
|
||
</view>
|
||
<!-- 添加方式弹框 -->
|
||
<uni-popup ref="addTypeList" type="bottom">
|
||
<view class="add-type-content">
|
||
<view class="add-type-box" @click="goToEditPage">手动添加</view>
|
||
<view class="add-type-box" @click="createQrCode">二维码邀请</view>
|
||
</view>
|
||
</uni-popup>
|
||
<!--二维码-->
|
||
<uni-popup ref="qrCodePopup" type="center">
|
||
<view class="qr-code-content">
|
||
<image class="image" :src="qrCode"></image>
|
||
<view class="close-qr-code" @click="closeQrCode()">关闭</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {mapGetters} from "vuex";
|
||
import {getStaffList,delStaff,staffInviteQrCode} from "@/api/service";
|
||
export default {
|
||
name: 'custom',
|
||
components: {},
|
||
computed: {
|
||
...mapGetters(['isLogin','uid', 'userInfo', 'viewColor'])
|
||
},
|
||
data() {
|
||
return {
|
||
mer_id: 0,
|
||
// 员工列表
|
||
list: [],
|
||
search:{
|
||
page: 1,
|
||
limit: 20,
|
||
keyword: '',
|
||
},
|
||
// 二维码
|
||
qrCode: '',
|
||
}
|
||
},
|
||
onLoad: function(options) {
|
||
this.mer_id = options.mer_id || 0;
|
||
if(this.mer_id <= 0){
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '非法访问，参数不明确！',
|
||
success: function success(res) {
|
||
uni.navigateBack();
|
||
}
|
||
});
|
||
}
|
||
// 获取用户列表
|
||
this.getStaffList(1);
|
||
},
|
||
methods: {
|
||
// 提货记录
|
||
getStaffList(page) {
|
||
// 初始化
|
||
let _this = this;
|
||
if(Number(page) == 1) _this.list = [];
|
||
// 请求参数处理
|
||
_this.search.page = Number(page) > 0 ? Number(page) : _this.search.page;
|
||
let search = Object.assign({},_this.search);
|
||
search.mer_id = _this.mer_id;
|
||
// 请求
|
||
getStaffList(search).then(res => {
|
||
let list = res.data.list || {};
|
||
if (Object.values(list).length > 0) {
|
||
_this.list = _this.$util.SplitArray(list, _this.list);
|
||
_this.$set(_this, 'list', _this.list);
|
||
_this.search.page++;
|
||
}
|
||
}).catch(err => {
|
||
this.$util.Tips({
|
||
title: err
|
||
});
|
||
});
|
||
},
|
||
// 删除信息
|
||
delInfo(service_id){
|
||
let _this = this;
|
||
uni.showModal({
|
||
title: '确认删除当前员工？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
let params = {
|
||
service_id: service_id,
|
||
mer_id: _this.mer_id
|
||
};
|
||
delStaff(params).then(res => {
|
||
this.$util.Tips({
|
||
title: '删除成功'
|
||
}, () => {
|
||
_this.getStaffList(1)
|
||
});
|
||
}).catch(err => {
|
||
this.$util.Tips({
|
||
title: err
|
||
});
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 点击添加员工
|
||
addStaff(){
|
||
this.$refs.addTypeList.open('bottom');
|
||
},
|
||
// 二维码邀请 - 生成二维码
|
||
createQrCode(){
|
||
let _this = this;
|
||
staffInviteQrCode({ mer_id: _this.mer_id }).then(res => {
|
||
if (res.status == 200) {
|
||
_this.qrCode = res.data.qr_code || '';
|
||
_this.$refs.addTypeList.close();
|
||
_this.$refs.qrCodePopup.open('center');
|
||
}
|
||
}).catch(err => {
|
||
this.$util.Tips({
|
||
title: err
|
||
});
|
||
});
|
||
},
|
||
// 关闭二维码
|
||
closeQrCode(){
|
||
this.$refs.qrCodePopup.close();
|
||
},
|
||
// 进入员工编辑页面
|
||
goToEditPage(service_id){
|
||
let path = '/pages/admin/business/edit_staff?mer_id=' + this.mer_id;
|
||
if(Number(service_id) > 0) path += '&service_id=' +service_id;
|
||
uni.navigateTo({
|
||
url: path,
|
||
});
|
||
},
|
||
},
|
||
// 触底事件
|
||
onReachBottom() {
|
||
this.getStaffList();
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.custom-content{
|
||
// 搜索框
|
||
.search-content{
|
||
width: 100vw;
|
||
background: url("@/static/images/custom/custom_top_bg.jpg") no-repeat;
|
||
padding: 20rpx 30rpx;
|
||
|
||
.search-box{
|
||
width: 100%;
|
||
height: 70rpx;
|
||
padding: 10rpx 15rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 10rpx;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
|
||
.icon-sousuo{
|
||
width: calc(70rpx - 15rpx);
|
||
padding-right: 15rpx;
|
||
height: calc(70rpx - (10rpx * 2));
|
||
line-height: calc(70rpx - (10rpx * 2));
|
||
text-align: center;
|
||
}
|
||
.search-input{
|
||
width: calc(100% - 70rpx + 15rpx);
|
||
height: calc(70rpx - (10rpx * 2));
|
||
}
|
||
}
|
||
}
|
||
// 员工列表
|
||
.custom-list{
|
||
width: 100vw;
|
||
background: #FFFFFF;
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
.list-item:not(:last-child){
|
||
border-bottom: 2rpx solid #f6f6f6;
|
||
}
|
||
.list-item{
|
||
--item-height-value-: 100rpx;
|
||
|
||
width: 100vw;
|
||
padding: 20rpx 30rpx;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
.left-avatar{
|
||
width: 100rpx;
|
||
height: var(--item-height-value-);
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
image{
|
||
width: 80rpx !important;
|
||
height: 80rpx !important;
|
||
border-radius: 50% !important;
|
||
}
|
||
}
|
||
.center-info{
|
||
width: calc(100% - 100rpx - 200rpx);
|
||
height: var(--item-height-value-);
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
flex-wrap: nowrap;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
padding-left: 10rpx;
|
||
.info-top{
|
||
width: 100%;
|
||
height: calc(100rpx - 40rpx);
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
font-size: 28rpx;
|
||
}
|
||
.info-bottom{
|
||
width: 100%;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
font-size: 26rpx;
|
||
color: #9e9e9e;
|
||
}
|
||
}
|
||
.right-btn{
|
||
width: 200rpx;
|
||
height: var(--item-height-value-);
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.give-btn{
|
||
padding: 6rpx 15rpx;
|
||
border-radius: 50rpx;
|
||
font-size: 26rpx;
|
||
color: #FFFFFF;
|
||
width: 95rpx;
|
||
text-align: center;
|
||
}
|
||
.edit-btn{
|
||
background: #409eff;
|
||
}
|
||
.del-btn{
|
||
background: #f56c6c;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 添加员工
|
||
.group-btn{
|
||
width: 100vw;
|
||
position: fixed;
|
||
bottom: 100rpx!important;
|
||
left: 0!important;
|
||
padding: 0 30rpx;
|
||
display: inline-flex;
|
||
flex-wrap: nowrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: row;
|
||
.add-btn{
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
color: #fff;
|
||
background-color: #409eff;
|
||
border-color: #409eff;
|
||
border-radius: 15rpx;
|
||
}
|
||
}
|
||
// 添加员工方式弹框
|
||
.add-type-content{
|
||
width: 100%;
|
||
background: #FFFFFF;
|
||
padding: 20rpx;
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.add-type-box{
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
color: #fff;
|
||
background-color: #409eff;
|
||
border-color: #409eff;
|
||
width: 80%;
|
||
border-radius: 100rpx;
|
||
font-size: 30rpx;
|
||
text-align: center;
|
||
}
|
||
.add-type-box:first-child{
|
||
margin-bottom: 20rpx;
|
||
background-color: #e6a23c!important;
|
||
border-color: #e6a23c!important;
|
||
}
|
||
}
|
||
// 二维码弹框
|
||
.qr-code-content{
|
||
width: 80vw;
|
||
.image{
|
||
width: 80vw;
|
||
height: 80vw;
|
||
}
|
||
.close-qr-code{
|
||
position: fixed;
|
||
top: 35rpx;
|
||
right: 70rpx;
|
||
color: #FFFFFF;
|
||
border: 2rpx solid #FFFFFF;
|
||
height: 40rpx;
|
||
line-height: 36rpx;
|
||
padding: 0 20rpx;
|
||
border-radius: 50rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|