初始化
This commit is contained in:
yziiy
479
pages/union/index.vue
Normal file
479
pages/union/index.vue
Normal file
@@ -0,0 +1,479 @@
|
||||
<template>
|
||||
<view class="view-page">
|
||||
<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" style="color:#FF8ACC;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>
|
||||
<view class="swipe-view">
|
||||
|
||||
</view>
|
||||
<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="truncate-three">
|
||||
{{data.user_name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right-button">
|
||||
<view class="online-view" v-if="data.guild_user_list.length">
|
||||
<div class="avatars-container" v-for="ele in data.guild_user_list.slice(0,3)" :key="ele.id">
|
||||
<view class="avatar">
|
||||
<img :src="ele.avatar" alt="" />
|
||||
</view>
|
||||
</div>
|
||||
<view class="online-people truncate-three">
|
||||
{{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';
|
||||
export default {
|
||||
components: {
|
||||
navBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchValue: '',
|
||||
logo,
|
||||
loading: false,
|
||||
noMore: false,
|
||||
pageConfig: {
|
||||
pageSize: 5,
|
||||
currentPage: 1,
|
||||
total: 2
|
||||
},
|
||||
isMerber: null,
|
||||
listData: [],
|
||||
UnionByUser: null,
|
||||
statusBarHeight: 0
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
const {
|
||||
id,
|
||||
h
|
||||
} = options
|
||||
uni.setStorageSync('token', id || '14a62bb9dac0eebf7fb9643639a7e172')
|
||||
if (uni.getStorageSync('token')) {
|
||||
this.getList()
|
||||
this.getInfo()
|
||||
}
|
||||
this.statusBarHeight = h
|
||||
uni.setStorageSync('BarHeight', h)
|
||||
},
|
||||
onReachBottom() {
|
||||
if (!this.loading && !this.noMore) {
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 关闭当前公会中心页面
|
||||
back() {
|
||||
this.closeWeb()
|
||||
},
|
||||
search() {
|
||||
this.pageConfig.currentPage = 1
|
||||
this.listData = []
|
||||
this.getList()
|
||||
},
|
||||
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 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">
|
||||
.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%;
|
||||
|
||||
.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.png');
|
||||
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: 100rpx;
|
||||
height: 100rpx;
|
||||
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 {
|
||||
width: 106rpx;
|
||||
height: 36rpx;
|
||||
padding: 0 12rpx;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
text-align: right;
|
||||
background: #333333;
|
||||
border-radius: 116rpx 116rpx 116rpx 116rpx;
|
||||
border: 2rpx solid #333333;
|
||||
position: relative;
|
||||
left: 10rpx;
|
||||
margin: 32rpx 0;
|
||||
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
.apply-button {
|
||||
display: inline-block;
|
||||
// width: 98rpx;
|
||||
// height: 46rpx;
|
||||
background: #0DFFB9;
|
||||
border-radius: 68rpx;
|
||||
text-align: center;
|
||||
padding: 4rpx 40rpx;
|
||||
}
|
||||
|
||||
.online-view {
|
||||
// display: inline-block;
|
||||
margin-top: 24rpx;
|
||||
padding: 12rpx 8rpx;
|
||||
// background: #333333;
|
||||
// border-radius: 92rpx;
|
||||
// font-size: 24rpx;
|
||||
// color: #FFFFFF;
|
||||
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: #FFFFFF;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user