530 lines
12 KiB
Vue
530 lines
12 KiB
Vue
<template>
|
|
<view class="view-page" :style="{backgroundImage: `url('${ThemeData?.app_bg || baseBgUrl}')`}">
|
|
<navBar :style="{marginTop: `${statusBarHeight}${uni.getSystemInfoSync().platform === 'ios' ? 'px': 'dp'}`}"
|
|
:navTitle="'公会中心'">
|
|
<template #rightView>
|
|
<view class="icon-right flex-line" @click="exit" v-if="isHasUnicon && !isLeader">
|
|
<img :src="logout" alt="" />
|
|
</view>
|
|
</template>
|
|
</navBar>
|
|
<view class="content">
|
|
<view class="flex-input">
|
|
<uni-easyinput prefixIcon="search" clearSize="18" v-model="searchValue"
|
|
placeholder="请输入公会ID/昵称">
|
|
</uni-easyinput>
|
|
<view class="search-button" @click="search">
|
|
搜索
|
|
</view>
|
|
</view>
|
|
<view class="hotspot-view">
|
|
<view class="hotspot-box" v-for="data in listData" :key="data.id">
|
|
<view class="flex-line">
|
|
<view class="head-portrait">
|
|
<img :src="data.cover || logo" alt="" />
|
|
</view>
|
|
<view class="info-box ml-20">
|
|
<view class="flex-line">
|
|
<span class="truncate">{{data.guild_name}}</span><span
|
|
class="id-title">ID:{{data.guild_special_id}}</span>
|
|
<img @click.stop="copyData(data.guild_special_id)" class="icon-box"
|
|
src="@/static/image/union/copy.png" alt="" />
|
|
</view>
|
|
<view class="subhead-title truncate">
|
|
{{data.intro}}
|
|
</view>
|
|
<view class="chairman">
|
|
<view class="chairman-portrait">
|
|
<img :src="data.user_avatar" alt="暂无头像" />
|
|
</view>
|
|
<view class="chairman-name">
|
|
{{data.user_name}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="right-button">
|
|
<view class="apply-button" @click="applyUnion(data)">
|
|
申请
|
|
</view>
|
|
<view class="online-view">
|
|
<view v-show="data.guild_user_list.length">
|
|
<view class="avatars-container">
|
|
<view class="avatar" v-for="ele in data.guild_user_list.slice(0,3)" :key="ele.id">
|
|
<img :src="ele.avatar" alt="" />
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
<view class="online-people">
|
|
{{data.num}}人
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 弹窗 -->
|
|
<uni-popup ref="message" type="message">
|
|
<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
|
|
</uni-popup>
|
|
<uni-popup ref="popup" type="center">
|
|
<view class="popup_view">
|
|
<view class="color-3 font-32 popup_title">
|
|
温馨提示
|
|
</view>
|
|
<view class="color-3 font-24 messageContent">
|
|
{{ messageContent }}
|
|
</view>
|
|
<view class="popup_button flex-line">
|
|
<view class="close_button flex-line" @click="closePopup">
|
|
取消
|
|
</view>
|
|
<view class="confirm-button flex-line" @click="confirmPopup">
|
|
确认
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import navBar from '@/component/nav.vue';
|
|
import http from '@/until/http.js';
|
|
import logo from '@/static/image/logo.png';
|
|
import config from '@/until/config.js';
|
|
import logout from '@/static/image/union/logout.png'
|
|
export default {
|
|
components: {
|
|
navBar
|
|
},
|
|
data() {
|
|
return {
|
|
searchValue: '',
|
|
noUnionImage: config.not_unionUrl,
|
|
baseBgUrl: config.new_unionUrl,
|
|
unionBgUrl: config.unicon_url,
|
|
logo,
|
|
logout,
|
|
loading: false,
|
|
noMore: false,
|
|
isMerber: null,
|
|
listData: [],
|
|
UnionByUser: null,
|
|
statusBarHeight: 0,
|
|
ThemeData: null,
|
|
// 是否實名
|
|
isAuth: false,
|
|
// 是否为公会长,
|
|
isLeader: false,
|
|
// 是否有公会
|
|
isHasUnicon: false,
|
|
messageContent: '',
|
|
popupStstus: 0,
|
|
messageText: "",
|
|
msgType: "success",
|
|
detailData:null
|
|
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
if (uni.getStorageSync('token')) {
|
|
this.getUserInfo()
|
|
} else {
|
|
uni.navigateBack()
|
|
}
|
|
if (uni.getStorageSync('BarHeight')) {
|
|
this.statusBarHeight = uni.getStorageSync('BarHeight')
|
|
}
|
|
if (uni.getStorageSync('Theme_Data')) {
|
|
this.ThemeData = JSON.parse(uni.getStorageSync('Theme_Data'))
|
|
}
|
|
},
|
|
methods: {
|
|
// 获取用户信息 拿实名信息
|
|
async getUserInfo() {
|
|
http.get('/api/User/get_user_info', {
|
|
token: uni.getStorageSync('token') || ''
|
|
}).then(response => {
|
|
const {
|
|
data,
|
|
code
|
|
} = response
|
|
this.isAuth = code ? data.auth : 0
|
|
})
|
|
},
|
|
async getUnionList(name) {
|
|
this.loading = true
|
|
http.get('/api/Guild/guild_list', {
|
|
page: 1,
|
|
limit: 1000,
|
|
search_id: name,
|
|
token: uni.getStorageSync('token') || ''
|
|
}).then(response => {
|
|
const {
|
|
data,
|
|
code
|
|
} = response
|
|
if (code) {
|
|
this.loading = false
|
|
this.listData = data.list || []
|
|
}
|
|
}).catch(error => {
|
|
this.loading = false
|
|
});
|
|
},
|
|
search() {
|
|
if (this.searchValue) {
|
|
// 搜索
|
|
this.getUnionList(this.searchValue)
|
|
}
|
|
},
|
|
// 申請加入工會
|
|
applyUnion(data) {
|
|
if (this.isAuth) {
|
|
this.detailData = data
|
|
this.popupStstus = 1
|
|
this.messageContent = "是否选择加入当前公会"
|
|
this.$refs.popup.open('center')
|
|
} else {
|
|
this.popupStstus = 3
|
|
this.messageContent = "当前尚未实名认证，是否跳转到实名认证页面？"
|
|
this.$refs.popup.open('center')
|
|
}
|
|
},
|
|
closePopup() {
|
|
this.popupStstus = null
|
|
this.detailData = null
|
|
this.messageContent = ""
|
|
this.$refs.popup.close()
|
|
},
|
|
confirmPopup() {
|
|
if (this.popupStstus !== null) {
|
|
if (this.popupStstus === 1) {
|
|
this.joinUnionize()
|
|
} else if (this.popupStstus === 3) {
|
|
// 实名认证页面
|
|
this.authConfirm()
|
|
}
|
|
}
|
|
},
|
|
authConfirm() {
|
|
// 去实名认证页面
|
|
const platform = uni.getSystemInfoSync().platform;
|
|
if (platform === 'ios') {
|
|
window.webkit.messageHandlers.nativeHandler.postMessage({
|
|
'action': 'enterAuthent'
|
|
});
|
|
} else if (platform === 'android') {
|
|
window.Android.enterAuthent();
|
|
}
|
|
this.closePopup()
|
|
},
|
|
// 申请加入公会
|
|
async joinUnionize() {
|
|
http.post('/api/Guild/join_guild', {
|
|
guild_id: this.detailData.id,
|
|
token: uni.getStorageSync('token') || ''
|
|
}).then(response => {
|
|
const {
|
|
data,
|
|
code,
|
|
msg
|
|
} = response
|
|
if (code) {
|
|
this.messageText = `加入成功`
|
|
this.$refs.message.open()
|
|
this.msgType = 'success'
|
|
uni.$emit('refreshList');
|
|
uni.navigateBack()
|
|
} else {
|
|
this.messageText = msg
|
|
this.msgType = 'error'
|
|
this.$refs.message.open()
|
|
}
|
|
this.closePopup()
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.view-page {
|
|
// padding: 32rpx;
|
|
// min-height: 100vh;
|
|
min-height: 100vh;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
// background-image: url('@/static/image/help/bg.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.popup_view {
|
|
width: 550rpx;
|
|
// height: 40vh;
|
|
background-color: #fff;
|
|
border-radius: 32rpx;
|
|
padding: 32rpx;
|
|
|
|
.popup_title {
|
|
text-align: center;
|
|
}
|
|
|
|
.messageContent {
|
|
margin: 24rpx 0;
|
|
}
|
|
|
|
.popup_button {
|
|
margin-top: 24rpx;
|
|
width: 100%;
|
|
justify-content: space-around;
|
|
|
|
.close_button,
|
|
.confirm-button {
|
|
width: 200rpx;
|
|
height: 84rpx;
|
|
background: #F3F3F3;
|
|
border-radius: 106rpx;
|
|
color: #999999;
|
|
justify-content: center;
|
|
}
|
|
|
|
.confirm-button {
|
|
background: var(--primary-color);
|
|
color: var(--font-button-color);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.content {
|
|
padding: 0 32rpx;
|
|
}
|
|
|
|
// /* 搜索框 */
|
|
.flex-input {
|
|
width: 100%;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
flex-direction: row;
|
|
|
|
.search-button {
|
|
padding: 0 0 0 20rpx;
|
|
}
|
|
}
|
|
|
|
|
|
/* 热门公会 */
|
|
.hotspot-view {
|
|
margin-top: 28rpx;
|
|
|
|
.hotspot-box {
|
|
width: calc(100% - 48rpx);
|
|
padding: 24rpx;
|
|
position: relative;
|
|
// min-height: calc(268rpx - 48rpx);
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
margin-bottom: 24rpx;
|
|
/* */
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
justify-content: space-between;
|
|
flex-direction: row;
|
|
|
|
/* 头像 */
|
|
.head-portrait {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 50%;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
/* 中间信息 */
|
|
.info-box {
|
|
padding: 0 24rpx;
|
|
// max-width: 40%;
|
|
width: 55%;
|
|
|
|
.icon-box {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
margin-left: 5rpx;
|
|
}
|
|
|
|
/* 会长样式 */
|
|
.chairman {
|
|
min-width: 106rpx;
|
|
height: 36rpx;
|
|
padding: 0 12rpx;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
text-align: right;
|
|
background: var(--subss-color);
|
|
border-radius: 116rpx 116rpx 116rpx 116rpx;
|
|
border: 2rpx solid var(--subss-color);
|
|
position: relative;
|
|
left: 10rpx;
|
|
margin: 32rpx 0;
|
|
display: inline-flex;
|
|
|
|
.truncate-three {
|
|
text-align: left;
|
|
}
|
|
|
|
.chairman-portrait {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
border-radius: 50%;
|
|
border: 2rpx solid #FFFFFF;
|
|
position: absolute;
|
|
top: -10rpx;
|
|
left: -20rpx;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.chairman-name {
|
|
margin-left: 0.9rem;
|
|
}
|
|
}
|
|
|
|
.id-title {
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
margin-left: 24rpx;
|
|
}
|
|
|
|
.subhead-title {
|
|
display: block;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
margin: 8rpx 0;
|
|
}
|
|
|
|
.like-box {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
flex-direction: row;
|
|
padding: 6rpx 24rpx;
|
|
background: #2AFEC0;
|
|
border-radius: 35rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
margin: 8rpx 0;
|
|
}
|
|
}
|
|
|
|
/* 右边按钮 */
|
|
.right-button {
|
|
text-align: right;
|
|
position: absolute;
|
|
right: 30rpx;
|
|
bottom: 50rpx;
|
|
|
|
.apply-button {
|
|
display: inline-block;
|
|
background: var(--primary-color);
|
|
font-size: var(--font-button-size);
|
|
color: var(--font-button-color);
|
|
border-radius: 68rpx;
|
|
text-align: center;
|
|
|
|
padding: 4rpx 30rpx;
|
|
}
|
|
|
|
.online-view {
|
|
|
|
.avatar {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
border: 2px solid white;
|
|
/* 白色边框 */
|
|
background-size: cover;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
|
transition: all 0.4s ease;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
/* 头像位置 */
|
|
.avatar:nth-child(1) {
|
|
left: calc(50% - 60rpx);
|
|
z-index: 3;
|
|
}
|
|
|
|
.avatar:nth-child(2) {
|
|
left: calc(50% - 35rpx);
|
|
z-index: 2;
|
|
}
|
|
|
|
.avatar:nth-child(3) {
|
|
left: calc(50% - 10rpx);
|
|
z-index: 1;
|
|
}
|
|
|
|
/* 悬停效果 */
|
|
.avatar:hover {
|
|
transform: translateY(-10px);
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
|
|
z-index: 10;
|
|
}
|
|
|
|
// display: inline-block;
|
|
margin-top: 24rpx;
|
|
padding: 12rpx 8rpx;
|
|
text-align: right;
|
|
width: 160rpx;
|
|
height: 44rpx;
|
|
line-height: 44rpx;
|
|
// background: #333333;
|
|
border-radius: 92rpx 92rpx 92rpx 92rpx;
|
|
position: relative;
|
|
|
|
.avatars-container {
|
|
position: absolute;
|
|
top: 10rpx;
|
|
left: 40%;
|
|
}
|
|
|
|
.online-people {
|
|
color: rgba(0, 0, 0, 0.5);
|
|
font-size: 24rpx;
|
|
text-align: left;
|
|
display: inline-block;
|
|
/* width: 6ch; */
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
word-break: keep-all;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |