427 lines
11 KiB
Vue
427 lines
11 KiB
Vue
<template>
|
||
<view class="page-content">
|
||
<!--主要内容-->
|
||
<view class="main-content">
|
||
<!--顶部内容-->
|
||
<view class="top" :style="{ 'background-image': `url(${top_icon})`}">
|
||
<view class="top-box">
|
||
<view class="left">
|
||
<view class="num">{{ mer_info.total_shareholder || 0 }}</view>
|
||
<view class="num-title">全部共创股东</view>
|
||
</view>
|
||
<view class="right" v-if="Object.values(level_list).length > 0">
|
||
<view class="invite-btn" @click="invite">
|
||
去邀请 <text class="iconfont icon-xiangyou"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!--列表相关内容-->
|
||
<view class="list-content">
|
||
<!--选项卡-->
|
||
<view class="tabs" v-if="Object.values(level_list).length > 1">
|
||
<view class="tabs-content">
|
||
<view
|
||
v-for="(item, index) in level_list" :key="index"
|
||
:class="['tab',{'tab-active': (Number(level_current.id) === Number(item.id))}]"
|
||
@click="changeLevel(item)"
|
||
>
|
||
{{ item.title || itme.id }}({{ item.quota_used || 0 }})
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!--搜索框-->
|
||
<view class="search-content">
|
||
<input class="search-input" v-model="search_text" type="text" placeholder="请输入会员ID/昵称/手机号" />
|
||
</view>
|
||
<!--列表内容-->
|
||
<view class="_list" v-if="Object.values(list).length > 0">
|
||
<view class="_list-box" v-for="(item,index) in list" :key="index">
|
||
<image class="avatar" :src="item.user.avatar || '/static/images/f.png'" />
|
||
<view class="user-info">
|
||
<view class="header-info">
|
||
<view class="nickname">{{ item.user.nickname }}</view>
|
||
<view class="uid">{{ item.user.uid }}</view>
|
||
</view>
|
||
<view class="phone" v-if="item.user.phone">手机号：{{ item.user.phone }}</view>
|
||
</view>
|
||
<view class="right">
|
||
<view v-if="item.status == 0" class="status-text wait-pay">待付款</view>
|
||
<view v-else class="status-text already-pay">已付款</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<emptyPage v-else title="暂无信息～"></emptyPage>
|
||
</view>
|
||
</view>
|
||
<!-- 授权登录 -->
|
||
<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authClose"></authorize>
|
||
<!--二维码弹框-->
|
||
<qr-code :isShow="qr_code_show" :params="qr_code_params" @close="qr_code_show = false"></qr-code>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {mapGetters} from "vuex";
|
||
import authorize from '@/components/Authorize';
|
||
import { HTTP_REQUEST_URL } from '@/config/app.js';
|
||
import emptyPage from '@/components/emptyPage.vue';
|
||
import {merShareholderLevelList, merShareholderMerInfo, merShareholderList} from "@/api/store";
|
||
import qrCode from "@/components/diyPopup/qrCode";
|
||
|
||
export default {
|
||
name: 'business',
|
||
components: {
|
||
authorize,
|
||
emptyPage,
|
||
qrCode
|
||
},
|
||
computed: {
|
||
...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor', 'shopIsLogin', 'shopMerId'])
|
||
},
|
||
data() {
|
||
return {
|
||
// 登录相关
|
||
isAuto: false, //没有授权的不会自动授权
|
||
isShowAuth: false,//是否隐藏授权
|
||
// 等级列表相关
|
||
level_list: {},
|
||
level_current: {},
|
||
// 列表相关
|
||
list: [],
|
||
page: 1,
|
||
search_text: '',
|
||
// 其他信息
|
||
mer_info: {},
|
||
top_icon: '',
|
||
merchant_type: '',
|
||
// 二维码信息
|
||
qr_code_show: false,
|
||
qr_code_params: {},
|
||
}
|
||
},
|
||
onReady() {
|
||
this.top_icon = `${HTTP_REQUEST_URL}/static/images/mer/shareholder/shareholder_top.png`;
|
||
},
|
||
onLoad(options) {
|
||
// 判断：是否登录
|
||
if (!this.isLogin) {
|
||
this.isAuto = true;
|
||
this.isShowAuth = true;// 未登录 授权登录
|
||
}
|
||
else this.init();// 已登录 获取信息
|
||
},
|
||
watch: {
|
||
'level_current': {
|
||
handler() {
|
||
this.getList();
|
||
},
|
||
deep: false
|
||
},
|
||
'search_text':{
|
||
handler(val) {
|
||
this.page = 1;
|
||
this.list = [];
|
||
this.getList();
|
||
},
|
||
deep: false
|
||
}
|
||
},
|
||
methods: {
|
||
// 授权回调
|
||
onLoadFun() {
|
||
if(this.isLogin){
|
||
this.isShowAuth = false;
|
||
this.init();
|
||
}
|
||
},
|
||
// 授权关闭
|
||
authClose(e) {
|
||
this.isShowAuth = e
|
||
},
|
||
// 授权成功 初始化
|
||
init () {
|
||
// 判断：商户是否登录
|
||
if(!this.shopIsLogin){
|
||
uni.showModal({
|
||
title: '未登录',
|
||
content: '请先登录商户账号!',
|
||
confirmText: '去登录',
|
||
cancelText: '返回首页',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.navigateTo({
|
||
url:'/pages/user/index'
|
||
})
|
||
}
|
||
else{
|
||
uni.switchTab({
|
||
url: '/pages/index/index'
|
||
});
|
||
}
|
||
}
|
||
});
|
||
return false;
|
||
}
|
||
// 商户登录成功后操作
|
||
this.getMerInfo();
|
||
},
|
||
// 获取商户信息
|
||
getMerInfo(){
|
||
let _this = this;
|
||
merShareholderMerInfo(_this.shopMerId).then(res => {
|
||
let data = res.data || {};
|
||
_this.mer_info = data;
|
||
_this.merchant_type = data.merchant_type;
|
||
_this.getLevelList();
|
||
})
|
||
},
|
||
// 获取等级列表
|
||
getLevelList(){
|
||
let _this = this;
|
||
merShareholderLevelList({merchant_type: _this.merchant_type, mer_id: _this.shopMerId}).then(res => {
|
||
_this.level_list = res.data || {};
|
||
_this.level_current = res.data[0] || {};
|
||
})
|
||
},
|
||
// 点击切换查看等级
|
||
changeLevel(item){
|
||
this.page = 1;
|
||
this.list = [];
|
||
this.search_text = '';
|
||
this.level_current = item || {};
|
||
},
|
||
// 获取股东列表
|
||
getList(){
|
||
let _this = this;
|
||
let params = {
|
||
level_id: _this.level_current.id,
|
||
mer_id: _this.shopMerId,
|
||
page: _this.page,
|
||
search_text: _this.search_text || ''
|
||
};
|
||
merShareholderList(params).then(res => {
|
||
let list = res.data.list || {};
|
||
if (Object.values(list).length > 0) {
|
||
list = _this.$util.SplitArray(list, _this.list);
|
||
_this.$set(_this, 'list', list);
|
||
_this.page++;
|
||
}
|
||
})
|
||
},
|
||
// 点击去邀请
|
||
invite(){
|
||
let _this = this;
|
||
// 去邀请 - 判断是否存在多个等级
|
||
if(Object.values(_this.level_list).length > 1){
|
||
// 页面跳转
|
||
uni.navigateTo({
|
||
url: '/pages/admin/business/shareholder/invite?merchant_type=' + _this.merchant_type
|
||
})
|
||
}else{
|
||
this.qr_code_params = {
|
||
type: 'mer_shareholder_invite',
|
||
mer_id: _this.shopMerId,
|
||
level: _this.level_current.id,
|
||
};
|
||
this.qr_code_show = true;
|
||
}
|
||
},
|
||
},
|
||
// 滚动到底部
|
||
onReachBottom() {},
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.page-content{
|
||
width: 100vw;
|
||
min-height: 100vh;
|
||
background-color: #f6f6f6;
|
||
|
||
.top{
|
||
width: 100%;
|
||
padding: 30rpx;
|
||
background-size: 100% auto;
|
||
background-repeat: no-repeat;
|
||
|
||
.top-box{
|
||
width: 100%;
|
||
background: #fffaf7;
|
||
border-radius: 15rpx;
|
||
box-shadow: 0 0 10rpx 0 #f3f3f3;
|
||
padding: 20rpx;
|
||
height: 200rpx;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.left{
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
flex-wrap: nowrap;
|
||
align-items: flex-start;
|
||
justify-content: space-evenly;
|
||
.num{
|
||
font-size: 50rpx;
|
||
font-weight: bold;
|
||
}
|
||
.num-title{
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
.right{
|
||
.invite-btn{
|
||
background-color: #ce110b;
|
||
color: #fefdf8;
|
||
border-radius: 10rpx;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
padding: 0 20rpx;
|
||
}
|
||
.icon-xiangyou{
|
||
font-size: 28rpx;
|
||
padding-left: 5rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.list-content{
|
||
width: 100%;
|
||
background-color: #ffffff;
|
||
|
||
.tabs{
|
||
width: 100vw;
|
||
overflow: auto;
|
||
.tabs-content {
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
|
||
.tab{
|
||
width: max-content;
|
||
margin: 0 30rpx;
|
||
text-align: center;
|
||
height: 65rpx;
|
||
line-height: 65rpx;
|
||
}
|
||
.tab-active{
|
||
position: relative;
|
||
font-weight: bold;
|
||
}
|
||
.tab-active:after{
|
||
content: "";
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 25%;
|
||
width: 50%;
|
||
height: 6rpx;
|
||
background-color: #cd1300;
|
||
}
|
||
}
|
||
}
|
||
|
||
.search-content{
|
||
width: 100%;
|
||
padding: 30rpx;
|
||
|
||
.search-input{
|
||
width: calc(100% - (2 * 30rpx));
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
text-align: left;
|
||
background-color: #f2f2f2;
|
||
border-radius: 60rpx;
|
||
padding: 0 30rpx;
|
||
color: #838383;
|
||
}
|
||
}
|
||
|
||
._list{
|
||
width: 100%;
|
||
background-color: #ffffff;
|
||
._list-box{
|
||
width: 100%;
|
||
border-top: 2rpx solid #f6f6f6;// #f6f6f6
|
||
padding: 20rpx 30rpx;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
|
||
.avatar{
|
||
height: 100rpx;
|
||
width: 100rpx;
|
||
border-radius: 50%;
|
||
}
|
||
.user-info{
|
||
width: calc(100% - 100rpx - 150rpx);
|
||
padding-left: 20rpx;
|
||
|
||
.header-info{
|
||
width: 100%;
|
||
height: calc(100rpx - 40rpx);
|
||
line-height: calc(100rpx - 40rpx);
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
.nickname{
|
||
font-size: 30rpx;
|
||
}
|
||
.uid{
|
||
background-color: #fce0df;
|
||
color: #d60000;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
font-size: 26rpx;
|
||
padding: 0 15rpx;
|
||
border-radius: 50rpx;
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
.phone{
|
||
color: #6a6a6a;
|
||
font-size: 26rpx;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
.right{
|
||
width: 150rpx;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: flex-end;
|
||
|
||
.status-text{
|
||
border-radius: 150rpx;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
color: #ffffff;
|
||
font-size: 26rpx;
|
||
padding: 0 20rpx;
|
||
}
|
||
.wait-pay{
|
||
background-color: #8f8f8f;
|
||
}
|
||
.already-pay{
|
||
background-color: #ce110b;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
/deep/ .empty-box{
|
||
padding-bottom: 200rpx;
|
||
}
|
||
</style>
|