253 lines
6.8 KiB
Vue
253 lines
6.8 KiB
Vue
<!-- +----------------------------------------------------------------------
|
||
| 麦沃德科技赋能开发者，助力商协会发展
|
||
+----------------------------------------------------------------------
|
||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||
+----------------------------------------------------------------------
|
||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||
+----------------------------------------------------------------------
|
||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||
+----------------------------------------------------------------------
|
||
| 推广会员 开发者: 麦沃德科技-暴雨
|
||
+---------------------------------------------------------------------- -->
|
||
|
||
<template>
|
||
<page-meta :page-style="'overflow:' + (pageShow ? 'hidden' : 'visible')"></page-meta>
|
||
<view class="container">
|
||
<!-- 标题栏 -->
|
||
<title-bar title="推广会员"></title-bar>
|
||
<!-- 内容区 -->
|
||
<view class="container-main flex-column" v-if="loadEnd">
|
||
<!-- 推广信息 -->
|
||
<view class="main-publicize">
|
||
<image class="publicize-image" src="/static/mine_bg.png" mode="widthFix"></image>
|
||
<view class="publicize-title">推广会员</view>
|
||
<view class="publicize-introduce">推广{{organize}}会员，为{{organize}}带来新活力</view>
|
||
<view class="publicize-button" :style="{background: themeColor}" @click="$refs.publicizePoster.generatePoster()">生成推广海报</view>
|
||
</view>
|
||
<!-- 推广人员列表 -->
|
||
<view class="main-list flex-item">
|
||
<!-- 筛选tab -->
|
||
<view class="main-list-title">
|
||
<view :style="{ color: isSelect == 0 ? themeColor : '#5A5B6E' }" @click="selectType(0)">普通用户({{userData.total || 0}}人)</view>
|
||
<view :style="{ color: isSelect == 1 ? themeColor : '#5A5B6E' }" @click="selectType(1)">{{organize}}会员({{memberData.total || 0}}人)</view>
|
||
</view>
|
||
<!-- 人员信息 -->
|
||
<view class="main-list-item">
|
||
<view class="list-item" v-if="isSelect == 0 && userData.total != 0" v-for="(item, index) in userData.data" :key="index">
|
||
<image :src="item.avatar" mode="aspectFit" class="list-item-img"></image>
|
||
<view class="list-item-phone text-ellipsis">{{item.mobile}}</view>
|
||
<view class="list-item-time">{{item.join_time}}</view>
|
||
</view>
|
||
<empty top="20%" title="暂无相关人员~" v-if="isSelect == 0 && userData.total == 0"></empty>
|
||
<view class="list-item" v-if="isSelect == 1 && memberData.total != 0" v-for="(item, index) in memberData.data" :key="index">
|
||
<image :src="item.member_avatar" mode="aspectFit" class="list-item-img"></image>
|
||
<view class="list-item-name text-ellipsis">{{item.member_name}}</view>
|
||
<view class="list-item-level text-ellipsis" :style="{color: themeColor}">{{item.level_name}}</view>
|
||
<view class="list-item-time">{{item.join_time}}</view>
|
||
</view>
|
||
<empty top="20%" title="暂无相关会员~" v-if="isSelect == 1 && memberData.total == 0"></empty>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 底部导航 -->
|
||
<tab-bar></tab-bar>
|
||
<!-- 推广海报 -->
|
||
<publicize-poster ref="publicizePoster" :show-data="posterData" @onChange="pageChange"></publicize-poster>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState } from "vuex"
|
||
import publicizePoster from "@/pagesTools/component/publicize/poster.vue"
|
||
export default {
|
||
components: {
|
||
publicizePoster,
|
||
},
|
||
data() {
|
||
return {
|
||
// 加载完成
|
||
loadEnd: false,
|
||
// 页面是否阻止滚动
|
||
pageShow: false,
|
||
// 列表类型
|
||
isSelect: 0,
|
||
// 会员数据
|
||
memberData: {},
|
||
// 用户列表
|
||
userData: {},
|
||
// 推广海报数据
|
||
posterData: {},
|
||
};
|
||
},
|
||
computed: {
|
||
...mapState({
|
||
themeColor: state => state.app.themeColor,
|
||
organize: state => state.app.organize,
|
||
})
|
||
},
|
||
onLoad() {
|
||
uni.showLoading({
|
||
title: "加载中"
|
||
})
|
||
this.getManList(() => {
|
||
uni.hideLoading()
|
||
this.loadEnd = true
|
||
})
|
||
},
|
||
onPullDownRefresh() {
|
||
this.getManList(() => {
|
||
uni.stopPullDownRefresh()
|
||
})
|
||
},
|
||
methods: {
|
||
// 改变页面滚动状态
|
||
pageChange(state) {
|
||
this.pageShow = state
|
||
},
|
||
// 获取推广会员数据
|
||
getManList(fn) {
|
||
this.$util.request("member.promotionList").then(res => {
|
||
if (fn) fn()
|
||
if (res.code == 1) {
|
||
this.memberData = res.data.member
|
||
this.userData = res.data.user
|
||
this.posterData = {
|
||
name: res.data.member_name,
|
||
avatar: res.data.member_avatar,
|
||
image: res.data.promotion_img,
|
||
businessName: res.data.business_association_name,
|
||
code: res.data.applet_qrcode_path
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}).catch(error => {
|
||
if (fn) fn()
|
||
console.error('获取推广人员', error)
|
||
})
|
||
},
|
||
// 切换人员类型
|
||
selectType(type) {
|
||
this.isSelect = type
|
||
this.getManList()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: #FFFFFF;
|
||
}
|
||
|
||
.container {
|
||
.container-main {
|
||
.main-publicize {
|
||
padding: 48rpx 48rpx 68rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
z-index: 1;
|
||
|
||
.publicize-image {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: -1;
|
||
}
|
||
|
||
.publicize-title {
|
||
font-size: 48rpx;
|
||
line-height: 68rpx;
|
||
color: #5A5B6E;
|
||
}
|
||
|
||
.publicize-introduce {
|
||
margin-top: 16rpx;
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
color: #5A5B6E;
|
||
}
|
||
|
||
.publicize-button {
|
||
margin-top: 16rpx;
|
||
padding: 14rpx 24rpx;
|
||
font-size: 24rpx;
|
||
line-height: 34rpx;
|
||
border-radius: 8rpx;
|
||
width: 192rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
.main-list {
|
||
margin-top: -20rpx;
|
||
border-radius: 32rpx 32rpx 0rpx 0rpx;
|
||
background: #FFFFFF;
|
||
|
||
.main-list-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 32rpx 114rpx 0rpx;
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
color: #5A5B6E;
|
||
}
|
||
|
||
.main-list-item {
|
||
padding: 48rpx;
|
||
|
||
.list-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 32rpx;
|
||
|
||
.list-item-img {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.list-item-name {
|
||
padding-left: 32rpx;
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
color: #5A5B6E;
|
||
}
|
||
|
||
.list-item-level {
|
||
flex: 1;
|
||
padding-left: 32rpx;
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
color: #5A5B6E;
|
||
}
|
||
|
||
.list-item-phone {
|
||
flex: 1;
|
||
padding-left: 32rpx;
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
color: #5A5B6E;
|
||
}
|
||
|
||
.list-item-time {
|
||
padding-left: 16rpx;
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
color: #5A5B6E;
|
||
}
|
||
|
||
&:first-child {
|
||
margin-top: 0;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |