541 lines
12 KiB
Vue
541 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="'公会中心'" :emitBack="true" @backEvent="back">
|
|
<template #rightView>
|
|
<view v-if="isMerber" @click="jumpMineUnion" class="font-24 minUnicon" style="white-space: nowrap">
|
|
我的公会
|
|
</view>
|
|
</template>
|
|
</navBar>
|
|
<view class="content">
|
|
<view class="flex-input">
|
|
<uni-easyinput type="number" prefixIcon="search" clearSize="18" v-model="searchValue"
|
|
placeholder="请输入公会ID">
|
|
</uni-easyinput>
|
|
<view class="search-button" @click="search">
|
|
搜索
|
|
</view>
|
|
</view>
|
|
<swiper class="swipe-view" circular :autoplay="true" :interval="2000" :duration="500">
|
|
<swiper-item v-for="item in swiperList" :key="item">
|
|
<view class="swiper-item uni-bg-red">
|
|
<img :src="item.image" alt="" />
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view class="title">
|
|
热门公会
|
|
</view>
|
|
<view class="hotspot-view">
|
|
<view class="hotspot-box" v-for="data in listData" :key="data.id" @click="viewDetails(data)">
|
|
<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">
|
|
申请
|
|
</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>
|
|
<uni-load-more :status="loading ? 'loading' : noMore ? 'noMore' : 'more'" />
|
|
</view>
|
|
</view>
|
|
</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';
|
|
export default {
|
|
components: {
|
|
navBar
|
|
},
|
|
data() {
|
|
return {
|
|
searchValue: '',
|
|
baseBgUrl:config.PRIMARY_BGURL,
|
|
logo,
|
|
loading: false,
|
|
noMore: false,
|
|
pageConfig: {
|
|
pageSize: 5,
|
|
currentPage: 1,
|
|
total: 2
|
|
},
|
|
isMerber: null,
|
|
listData: [],
|
|
UnionByUser: null,
|
|
statusBarHeight: 0,
|
|
ThemeData: null,
|
|
swiperList: []
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
const {
|
|
id,
|
|
h
|
|
} = options
|
|
uni.setStorageSync('token', id || '')
|
|
if (uni.getStorageSync('token')) {
|
|
this.getList()
|
|
this.getInfo()
|
|
this.getSwiper()
|
|
}
|
|
this.statusBarHeight = h
|
|
uni.setStorageSync('BarHeight', h)
|
|
if (uni.getStorageSync('Theme_Data')) {
|
|
this.ThemeData = JSON.parse(uni.getStorageSync('Theme_Data'))
|
|
}
|
|
// 监听事件，事件名如 'refreshList'
|
|
uni.$on('refreshList', (data) => {
|
|
this.refreshList(); // 执行刷新方法
|
|
// 如果传递了数据，可以从 data 中获取
|
|
});
|
|
},
|
|
onUnload() {
|
|
// 页面卸载时移除事件监听，避免内存泄漏和重复监听
|
|
uni.$off('refreshList');
|
|
},
|
|
onReachBottom() {
|
|
if (!this.loading && !this.noMore) {
|
|
this.getList()
|
|
}
|
|
},
|
|
methods: {
|
|
// 关闭当前公会中心页面
|
|
back() {
|
|
this.closeWeb()
|
|
},
|
|
search() {
|
|
this.pageConfig.currentPage = 1
|
|
this.listData = []
|
|
this.getList()
|
|
},
|
|
refreshList() {
|
|
this.searchValue = ''
|
|
this.search()
|
|
this.getInfo()
|
|
},
|
|
closeWeb() {
|
|
const platform = uni.getSystemInfoSync().platform;
|
|
// console.log(platform, '打印设备参数')
|
|
if (platform === 'ios') {
|
|
console.log('调用iOS原生方法')
|
|
// 通过 messageHandlers 调用 iOS 原生方法
|
|
window.webkit.messageHandlers.nativeHandler.postMessage({
|
|
'action': 'closeWeb'
|
|
});
|
|
} else if (platform === 'android') {
|
|
console.log('调用Android原生方法')
|
|
// 调用 Android 原生方法
|
|
window.Android.closeWeb();
|
|
}
|
|
},
|
|
async getSwiper() {
|
|
http.get('/api/banner/get_banner_list', {
|
|
token: uni.getStorageSync('token') || '',
|
|
show_type: 5
|
|
}).then(response => {
|
|
const {
|
|
data,
|
|
code
|
|
} = response
|
|
this.swiperList = code ? data : []
|
|
})
|
|
},
|
|
async getInfo() {
|
|
http.get('/api/Guild/is_guild_member', {
|
|
token: uni.getStorageSync('token') || ''
|
|
}).then(response => {
|
|
const {
|
|
data,
|
|
code
|
|
} = response
|
|
this.isMerber = code ? data : false
|
|
this.UnionByUser = code ? data.guild_id : 0
|
|
}).catch(error => {
|
|
this.isMerber = false
|
|
this.UnionByUser = null
|
|
});
|
|
},
|
|
async getList() {
|
|
this.loading = true
|
|
http.get('/api/Guild/guild_list', {
|
|
page: this.pageConfig.currentPage,
|
|
limit: this.pageConfig.pageSize,
|
|
search_id: this.searchValue,
|
|
token: uni.getStorageSync('token') || ''
|
|
}).then(response => {
|
|
const {
|
|
data,
|
|
code
|
|
} = response
|
|
if (code) {
|
|
this.pageConfig.total = data.count
|
|
this.loading = false
|
|
const newData = data.list || []
|
|
if (newData.length === 0) {
|
|
this.noMore = true
|
|
return
|
|
}
|
|
this.listData = [...this.listData, ...newData]
|
|
this.pageConfig.currentPage++
|
|
if (this.listData.length === this.pageConfig.total) {
|
|
this.noMore = true
|
|
return
|
|
}
|
|
}
|
|
}).catch(error => {
|
|
this.loading = false
|
|
});
|
|
},
|
|
// 点击公会详情
|
|
viewDetails(data) {
|
|
uni.navigateTo({
|
|
url: `/pages/union/detail?id=${data.id}`
|
|
});
|
|
},
|
|
// 跳转到我的公会
|
|
jumpMineUnion() {
|
|
uni.navigateTo({
|
|
url: `/pages/union/detail?id=${this.UnionByUser}`
|
|
});
|
|
},
|
|
copyData(text) {
|
|
if (text) {
|
|
|
|
if (uni.getSystemInfoSync().platform === 'h5') {
|
|
const textarea = document.createElement('textarea');
|
|
textarea.value = text;
|
|
document.body.appendChild(textarea);
|
|
textarea.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(textarea);
|
|
|
|
uni.showToast({
|
|
title: '复制成功',
|
|
icon: 'none',
|
|
});
|
|
return;
|
|
} else {
|
|
uni.setClipboardData({
|
|
data: text,
|
|
success: () => {
|
|
uni.showToast({
|
|
title: '已复制到剪贴板',
|
|
icon: 'none',
|
|
duration: 1500
|
|
});
|
|
},
|
|
fail: () => {
|
|
uni.showToast({
|
|
title: '复制失败，请重试',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
});
|
|
}
|
|
} else {
|
|
uni.showToast({
|
|
title: '暂无可复制文本',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
</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%;
|
|
|
|
.minUnicon {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.content {
|
|
padding: 0 32rpx;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* 搜索框 */
|
|
.flex-input {
|
|
width: 100%;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
flex-direction: row;
|
|
|
|
.search-button {
|
|
padding: 0 0 0 20rpx;
|
|
}
|
|
}
|
|
|
|
/* 轮播图 */
|
|
.swipe-view {
|
|
width: 100%;
|
|
height: 200rpx;
|
|
// background-color: antiquewhite;
|
|
border-radius: 14rpx;
|
|
margin-top: 36rpx;
|
|
// background-image: url('/static/image/swiper.jpg');
|
|
// background-repeat: no-repeat;
|
|
// background-size: 100% 100%;
|
|
}
|
|
|
|
.title {
|
|
padding: 24rpx 0;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
/* 热门公会 */
|
|
.hotspot-view {
|
|
.hotspot-box {
|
|
width: calc(100% - 48rpx);
|
|
padding: 24rpx;
|
|
// 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;
|
|
|
|
// 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: center;
|
|
|
|
.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 {
|
|
// 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> |