322 lines
6.8 KiB
Vue
322 lines
6.8 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="tabs">
|
||
<u-tabs :list="tabs" @click="onChangeTab" :current="1" lineColor="#7f006f"></u-tabs>
|
||
</view>
|
||
<!-- 推广权益 -->
|
||
<block v-if="currTab == 10">
|
||
<view class="card">
|
||
<view class="title">推广权益</view>
|
||
<view class="content">
|
||
<u-parse :content="plan.comments"></u-parse>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<!-- 推广列表 -->
|
||
<block v-if="currTab == 20">
|
||
<view class="search-wrapper">
|
||
<uni-data-select v-model="where.gradeId" :localdata="grade" @change="onSearch"></uni-data-select>
|
||
</view>
|
||
<view class="user-list">
|
||
<u-list :height="700" @scrolltolower="scrolltolower">
|
||
<view class="list">
|
||
<u-list-item v-for="(item, index) in list" :key="index">
|
||
<u-cell :title="`${item.nickname}`" :label="`ID：${userIdPrefix}${item.userId} 粉丝：${item.id}`" isLink>
|
||
<u-avatar slot="icon" size="50" :src="item.avatar"
|
||
customStyle="margin: -3px 5px -3px 0"></u-avatar>
|
||
<!-- <view solt="label">
|
||
<text class="desc-text">{{ `ID：${item.userId}` }}</text>
|
||
<text class="desc-text">{{ `粉丝：${item.id}` }}</text>
|
||
</view> -->
|
||
<view slot="right-icon" class="follow-btn" @click.stop="onFollow">
|
||
<text>{{ item.gradeName }}</text>
|
||
</view>
|
||
</u-cell>
|
||
</u-list-item>
|
||
<u-empty v-if="list.length == 0" mode="search"
|
||
icon="http://cdn.uviewui.com/uview/empty/search.png">
|
||
</u-empty>
|
||
</view>
|
||
</u-list>
|
||
</view>
|
||
</block>
|
||
<!-- 我的团队 -->
|
||
<block v-if="currTab == 30">
|
||
<view class="user-list">
|
||
<u-list :height="700" @scrolltolower="scrolltolower">
|
||
<view class="list">
|
||
<u-list-item v-for="(item, index) in list" :key="index">
|
||
<u-cell :title="`${item.nickname}`" :label="`ID：${userIdPrefix}${item.userId} 粉丝：${item.id}`" isLink>
|
||
<u-avatar slot="icon" size="50" :src="item.avatar"
|
||
customStyle="margin: -3px 5px -3px 0"></u-avatar>
|
||
<!-- <view solt="label">
|
||
<text class="desc-text">{{ `ID：${item.userId}` }}</text>
|
||
<text class="desc-text">{{ `粉丝：${item.id}` }}</text>
|
||
</view> -->
|
||
<view slot="right-icon" class="follow-btn" @click.stop="onFollow">
|
||
<text>{{ item.gradeName }}</text>
|
||
</view>
|
||
</u-cell>
|
||
</u-list-item>
|
||
<u-empty v-if="list.length == 0" mode="search"
|
||
icon="http://cdn.uviewui.com/uview/empty/search.png">
|
||
</u-empty>
|
||
</view>
|
||
</u-list>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import * as UserRefereeApi from '@/api/user-referee.js'
|
||
import * as UserPlanApi from '@/api/love-user-plan.js'
|
||
import * as MerchantApi from '@/api/merchant.js'
|
||
|
||
import {
|
||
username,
|
||
userIdPrefix
|
||
} from '@/config.js';
|
||
|
||
const userId = uni.getStorageSync('userId')
|
||
|
||
// tab栏数据
|
||
const tabs = [{
|
||
name: `推广权益`,
|
||
value: 10
|
||
}, {
|
||
name: `推广列表`,
|
||
value: 20
|
||
}, {
|
||
name: `我的团队`,
|
||
value: 30
|
||
}]
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
userIdPrefix,
|
||
tabs,
|
||
currTab: 20,
|
||
planId: 0,
|
||
plan: null,
|
||
// 会员类型
|
||
grade: [{
|
||
value: 2,
|
||
text: '注册用户'
|
||
},
|
||
{
|
||
value: 3,
|
||
text: '普通会员'
|
||
},
|
||
{
|
||
value: 4,
|
||
text: '尊享会员'
|
||
},
|
||
{
|
||
value: 7,
|
||
text: '线上门店'
|
||
},
|
||
{
|
||
value: 8,
|
||
text: '门店合伙人'
|
||
},
|
||
{
|
||
value: 9,
|
||
text: '门店运营总监'
|
||
},
|
||
{
|
||
value: 10,
|
||
text: '实体门店'
|
||
},
|
||
{
|
||
value: 11,
|
||
text: '旗舰店'
|
||
},
|
||
{
|
||
value: 12,
|
||
text: '区县级运营中心'
|
||
},
|
||
{
|
||
value: 13,
|
||
text: '市级运营中心'
|
||
},
|
||
{
|
||
value: 14,
|
||
text: '省级运营中心'
|
||
}
|
||
],
|
||
// 会员列表
|
||
list: [],
|
||
where: {},
|
||
page: 0,
|
||
// 控制onShow事件是否刷新订单列表
|
||
canReset: false,
|
||
disabled: false
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面加载
|
||
*/
|
||
onLoad(options) {
|
||
this.planId = options.id
|
||
this.getPlan()
|
||
this.list = []
|
||
this.onRefreshList()
|
||
},
|
||
|
||
methods: {
|
||
getPlan() {
|
||
const app = this
|
||
const {
|
||
planId
|
||
} = this
|
||
UserPlanApi.getUserPlan(planId).then(res => {
|
||
app.plan = res.data
|
||
})
|
||
},
|
||
getMerchant() {
|
||
const app = this
|
||
MerchantApi.listMerchant({
|
||
userId
|
||
}).then(result => {
|
||
let arr = []
|
||
app.merchantList = []
|
||
result.data.map(d => {
|
||
arr.push({
|
||
label: d.merchantName,
|
||
id: d.merchantId,
|
||
code: d.merchantCode
|
||
})
|
||
})
|
||
app.merchantList.push(arr)
|
||
})
|
||
},
|
||
// 刷新会员列表
|
||
onRefreshList() {
|
||
const app = this
|
||
app.where.page = app.page
|
||
app.where.dealerId = userId
|
||
return new Promise((resolve, reject) => {
|
||
UserRefereeApi.pageUserReferee(app.where)
|
||
.then(result => {
|
||
const list = result.data.list
|
||
// 合并新数据
|
||
app.list = app.list.concat(list)
|
||
if (result.data.count > app.list.length) {
|
||
app.canReset = true
|
||
} else {
|
||
app.canReset = false
|
||
}
|
||
resolve(list)
|
||
})
|
||
})
|
||
},
|
||
scrolltolower(e) {
|
||
console.log("e: ", e);
|
||
},
|
||
navTo(url, userId) {
|
||
this.$push(url, userId)
|
||
},
|
||
onFollow(e) {
|
||
console.log("e11: ", e);
|
||
},
|
||
onSearch() {
|
||
this.list = []
|
||
this.where.page = 1
|
||
this.onRefreshList()
|
||
},
|
||
onChangeTab(e) {
|
||
const app = this
|
||
app.currTab = e.value
|
||
if (e.value == 10) {
|
||
|
||
}
|
||
if (e.value == 20) {
|
||
app.list = []
|
||
app.where.gradeStart = undefined
|
||
app.where.gradeEnd = undefined
|
||
app.onRefreshList()
|
||
}
|
||
if (e.value == 30) {
|
||
app.list = []
|
||
app.where.gradeStart = 7
|
||
app.where.gradeEnd = 14
|
||
app.onRefreshList()
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
padding: 0rpx;
|
||
background-color: #f3f3f3;
|
||
height: 90vh;
|
||
}
|
||
|
||
.user-list {
|
||
width: 700rpx;
|
||
margin: 20rpx auto;
|
||
padding: 10rpx 0;
|
||
border-radius: 20rpx;
|
||
background-color: #ffffff;
|
||
|
||
.desc-text {
|
||
margin-right: 50rpx;
|
||
}
|
||
}
|
||
|
||
.follow-btn {
|
||
padding: 4rpx 20rpx;
|
||
color: #ffffff;
|
||
font-size: 26rpx;
|
||
border-radius: 50rpx;
|
||
margin-right: 10rpx;
|
||
background: linear-gradient(#47076b, #8d1a50);
|
||
|
||
image {
|
||
width: 24rpx;
|
||
height: 66rpx;
|
||
margin-right: 6rpx;
|
||
}
|
||
}
|
||
|
||
.search-wrapper{
|
||
width: 250rpx;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.tabs {
|
||
width: 700rpx;
|
||
margin: auto;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.card {
|
||
width: 700rpx;
|
||
min-height: 500rpx;
|
||
margin: 20rpx auto;
|
||
padding: 10rpx 0;
|
||
background-color: #ffffff;
|
||
border-radius: 20rpx;
|
||
|
||
.title {
|
||
width: 640rpx;
|
||
margin: 10rpx auto;
|
||
line-height: 3rem;
|
||
border-bottom: 2rpx solid #f3f3f3;
|
||
}
|
||
|
||
.content {
|
||
width: 640rpx;
|
||
margin: 10rpx auto;
|
||
line-height: 2rem;
|
||
color: #666666;
|
||
}
|
||
}
|
||
</style>
|