添加：运营中心 - 我的邀请（店铺）
This commit is contained in:
parent
7761895178
commit
a32e8ff742
|
|
@ -8,6 +8,10 @@ export function myAgentList(data) {
|
|||
export function inviteSupplierJoinQrCode(data) {
|
||||
return request.get('agent/qr_code_invite',data);
|
||||
}
|
||||
// 代理中心 - 我的邀请
|
||||
export function getMyInvite(data) {
|
||||
return request.get(`agent/my_invite`, data);
|
||||
}
|
||||
// 代理加入 - 提交申请信息
|
||||
export function submitAgentApplyInfo(data) {
|
||||
return request.post('agent/agent_apply',data);
|
||||
|
|
|
|||
|
|
@ -157,7 +157,7 @@ export default {
|
|||
title: '我的邀请',
|
||||
type: 'link',
|
||||
url: '/pages/agent/invite/my_invite',
|
||||
icon: 'icon-yaoqing1',
|
||||
icon: 'icon-wodetuandui',
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,39 @@
|
|||
<template>
|
||||
<view class="main-content">
|
||||
|
||||
|
||||
我的邀请
|
||||
|
||||
|
||||
<!--顶部内容-->
|
||||
<view class="top">
|
||||
<view class="top-title">我邀请的店铺</view>
|
||||
<image mode="heightFix" class="top-icon" :src="top_icon" />
|
||||
</view>
|
||||
<!--主要内容-->
|
||||
<view class="main-box">
|
||||
<!--选项卡-->
|
||||
<view class="tabs">
|
||||
<view :class="['tab',{'tab-active': merchant_type == 0}]" @click="changeTab(0)">普通商户</view>
|
||||
<view :class="['tab',{'tab-active': merchant_type == 1}]" @click="changeTab(1)">酒道馆</view>
|
||||
<view :class="['tab',{'tab-active': merchant_type == 2}]" @click="changeTab(2)">供应商</view>
|
||||
<view :class="['tab',{'tab-active': merchant_type == 3}]" @click="changeTab(3)">烟酒店</view>
|
||||
</view>
|
||||
<!--列表信息-->
|
||||
<view class="_list">
|
||||
<template v-if="Object.values(list).length > 0">
|
||||
<view class="item-box" v-for="(item,index) in list" :key="index">
|
||||
<view class="left">
|
||||
<view class="name">{{ item.mer_name || '' }}</view>
|
||||
<view class="left-info">
|
||||
<image mode="widthFix" class="mer-logo" :src="item.mer_avatar" />
|
||||
<view class="contacts">
|
||||
<view class="contacts-line">负责人：{{ item.real_name || '' }}</view>
|
||||
<view class="contacts-line">电话：{{ item.mer_phone || '' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--<text class="right-icon iconfont icon-xiangyou"></text>-->
|
||||
</view>
|
||||
</template>
|
||||
<emptyPage v-else title="暂无邀请店铺～"></emptyPage>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 授权登录 -->
|
||||
<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authClose"></authorize>
|
||||
</view>
|
||||
|
|
@ -13,26 +42,36 @@
|
|||
<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 {getMyInvite} from "@/api/agent";
|
||||
|
||||
export default {
|
||||
name: 'business',
|
||||
components: {
|
||||
authorize
|
||||
authorize,
|
||||
emptyPage
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor'])
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
top_icon: '',
|
||||
// 登录相关
|
||||
isAuto: false, //没有授权的不会自动授权
|
||||
isShowAuth: false,//是否隐藏授权
|
||||
|
||||
|
||||
// 选项卡
|
||||
merchant_type: 3,// 商户类别：0=普通商户，1=酒道馆，2=供应商，3=烟酒店
|
||||
// 列表相关
|
||||
agent_id: 0,
|
||||
list: [],
|
||||
page: 1,
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
let _this = this;
|
||||
_this.agent_id = options.agent_id || 0;
|
||||
// 判断：是否登录
|
||||
if (!this.isLogin) {
|
||||
// 未登录 授权登录
|
||||
|
|
@ -43,6 +82,9 @@ export default {
|
|||
this.init();
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.top_icon = `${HTTP_REQUEST_URL}/static/images/mer/my_invite_top_icon.png`;
|
||||
},
|
||||
methods: {
|
||||
// 授权回调
|
||||
onLoadFun() {
|
||||
|
|
@ -57,15 +99,43 @@ export default {
|
|||
},
|
||||
// 授权成功 初始化
|
||||
init () {
|
||||
|
||||
|
||||
this.getList();
|
||||
},
|
||||
// 获取列表
|
||||
getList() {
|
||||
let _this = this;
|
||||
let params = {
|
||||
page: _this.page,
|
||||
merchant_type: _this.merchant_type,
|
||||
invite_agent_id: _this.agent_id
|
||||
}
|
||||
// 发起请求
|
||||
getMyInvite(params).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.page++;
|
||||
}
|
||||
}).catch(err => {
|
||||
this.$util.Tips({title: err});
|
||||
});
|
||||
},
|
||||
// 改变tab
|
||||
changeTab(merchantType){
|
||||
this.merchant_type = merchantType || 0;
|
||||
this.page = 1;
|
||||
this.list = [];
|
||||
this.getList();
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
// 滚动到底部
|
||||
onReachBottom() {
|
||||
this.getList();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -73,12 +143,123 @@ export default {
|
|||
.main-content{
|
||||
width: 100vw!important;
|
||||
min-height: 100vh!important;
|
||||
background: orange;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
background: #f6f6f6;
|
||||
// 顶部内容
|
||||
.top{
|
||||
width: 100vw;
|
||||
height: 300rpx;
|
||||
position: relative;
|
||||
background: #be0000;
|
||||
.top-title{
|
||||
position: absolute;
|
||||
top: 60rpx;
|
||||
left: 60rpx;
|
||||
z-index: 10;
|
||||
height: 150rpx!important;
|
||||
line-height: 150rpx!important;
|
||||
color: #ffffff;
|
||||
font-size: 50rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.top-icon{
|
||||
position: absolute;
|
||||
top: 60rpx;
|
||||
right: 60rpx;
|
||||
z-index: 10;
|
||||
height: 150rpx !important;
|
||||
}
|
||||
}
|
||||
// 主要内容
|
||||
.main-box{
|
||||
width: 100vw;
|
||||
background: #f6f6f6;
|
||||
padding: 25rpx;
|
||||
border-top-left-radius: 30rpx;
|
||||
border-top-right-radius: 30rpx;
|
||||
position: relative;
|
||||
top: -91rpx;
|
||||
.tabs{
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 25rpx;
|
||||
.tab{
|
||||
color: #be0000;
|
||||
width: calc(100% / 4);
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
background: #ffffff;
|
||||
}
|
||||
.tab-active{
|
||||
background: #be0000;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
._list{
|
||||
.item-box{
|
||||
width: 100%;
|
||||
padding: 20rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 25rpx;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.left{
|
||||
width: calc(100% - 60rpx);
|
||||
.name{
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
width: 100%;
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.left-info{
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-top: 10rpx;
|
||||
.mer-logo{
|
||||
height: calc(45rpx * 2) !important;
|
||||
width: calc(45rpx * 2) !important;
|
||||
border-radius: 10rpx!important;
|
||||
}
|
||||
.contacts{
|
||||
width: calc(100% - calc(45rpx * 2));
|
||||
padding-left: 15rpx;
|
||||
.contacts-line{
|
||||
height: 45rpx;
|
||||
line-height: 45rpx;
|
||||
font-size: 28rpx;
|
||||
color: #949494;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.right-icon{
|
||||
width: 60rpx;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue