yangchunlong/orico-association
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

活动按钮状态流转

Browse Source
This commit is contained in:
yangchunlong
2026-03-25 15:53:37 +08:00
commit 37346e790f
2762 changed files with 240282 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

253
pagesTools/publicize/index.vue Normal file
View File

@@ -0,0 +1,253 @@
<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| 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>