123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281 |
- <template>
- <view class="contain">
- <view class="header">
- <image src="/static/image/common/grade-left.png" mode="" @click="$back()"></image>
- <div class="tabbar">
- <div class="tab" :class="{'active': tab == 1}" @click="changeTab(1)">
- {{ $t("game.lab") }}
- <div class="line"></div>
- </div>
- <div class="tab" :class="{'active': tab == 2}" @click="changeTab(2)">
- {{ $t('member.tab1') }}
- <div class="line"></div>
- </div>
- </div>
- </view>
- <div class="list">
- <div class="item" v-for="(item, index) in list" :key="item.id">
- <div class="img-box" @click="toUrlLive(item)">
- <u--image
- class="avatar"
- :src="item.avatar"
- shape="circle"
- width="96rpx"
- height="96rpx"
- ></u--image>
- <img v-if="item.islive == 1" class="img" src="/static/image/match/live-actives.png" alt="">
- <img v-else class="img" src="/static/image/match/live.png" alt="">
- </div>
- <div class="content">
- <div class="left">
- <div>{{ item.user_nickname }}</div>
- <div class="num">{{ $t('member.lab2') }}: {{ numberToK(item.attention) }}</div>
- </div>
- <view class="paid size28" v-if="item.is_attention == 1" @click="attention(item, index)">
- <!-- Followed -->
- {{ $t('member.lab') }}
- </view>
- <view class="guanzhu-box" v-if="item.is_attention == 0" @click="attention(item, index)">
- <image src="/static/image/match/guanzhu.png" mode="widthFix" class="guanzhu-icon mg-rt12"></image>
- <text class="size28 cfff">{{ $t('member.lab1') }}</text>
- </view>
- </div>
- </div>
- </div>
- <u-loadmore
- :status="status"
- fontSize="28"
- :line="true"
- :loading-text="statusType.loadingText"
- :loadmore-text="statusType.loadmoreText"
- :nomore-text="statusType.nomoreText"
- />
- </view>
- </template>
- <script>
- import { numberToK, parseTime } from '@/utils/util'
- export default {
- data() {
- return {
- type:0,
- list: [],
- statusType:{
- loadingText: this.$t('common.lab'),
- loadmoreText: this.$t('common.lab1'),
- nomoreText: this.$t('common.lab2')
- },
- status:'loadmore',
- tab: 1,
- pageNumber: 1
- }
- },
- onLoad(option) {
- this.type = option.type;
- this.getList()
- },
- // 触底触发
- onReachBottom() {
- if(this.status == 'loadmore'){
- this.pageNumber++;
- this.getList();
- }
-
- },
- // 下拉刷新
- onPullDownRefresh(){
- // 正常情况下接口返回应该很会很快。故意延迟调用,让用户有在刷新的体验感
- this.pageNumber = 1;
- this.status = 'loadmore';
- this.getList();
-
- setTimeout(res=>{
- uni.stopPullDownRefresh()
- },1500)
- },
- methods: {
- getList() {
- this.status= 'loading';
- this.getHistory()
- },
- getHistory() {
- let params = {
- page: this.pageNumber
- }
- if (this.tab == 2) {
- params.type = '2'
- }
- uni.$u.http.get('/api/game/users', {
- params
- }).then(res => {
- if (this.pageNumber == 1) {
- this.list = res.data || []
- } else {
- this.list = this.list.concat(res.data || [])
- }
- this.status = this.list.length == res.total ? 'nomore' : 'loadmore'
- })
- },
- changeTab(item){
- if (this.tab == item) {
- return
- }
- if (this.$store.state.isLogin != 1) {
- this.$toUrl('/pages/login/login')
- return
- }
- this.tab = item
- this.pageNumber = 1
- this.getList()
- },
- /* 关注 */
- attention(item, index) {
- if (this.$store.state.isLogin != 1) {
- this.$toUrl('/pages/login/login')
- return
- }
- uni.showLoading({
- title: this.$t('common.lab'),
- });
- uni.$u.http
- .post("/api/Member/attention", {
- id: item.id,
- })
- .then((res) => {
- if (this.tab == 1) {
- this.$set(this.list[index], 'attention', item.is_attention == 0 ? (item.attention + 1) : (item.attention - 1) )
- this.$set(this.list[index], 'is_attention', item.is_attention == 0 ? 1 : 0 )
- } else {
- this.pageNumber = 1
- this.getList()
- }
- }).finally(() => {
- uni.hideLoading();
- });
- },
- toUrlLive(item) {
- uni.navigateTo({
- url: `/pages/Match/member/usermanger?id=${item.id}`,
- });
- },
- numberToK(v) {
- return numberToK(v)
- },
- parseTime(t) {
- return parseTime(t, '{y}-{m}-{d} {h}:{i}')
- }
- },
- }
- </script>
- <style lang="scss" scoped>
- page {
- background-color: #F3F3F7;
- }
- .header {
- color: #fff;
- font-size: 34rpx;
- padding: 0 24rpx;
- position: sticky;
- top: 0;
- z-index: 10;
- background-color: #1D2550;
- display: flex;
- align-items: center;
- justify-content: center;
- image {
- position: absolute;
- left: 24rpx;
- top: 50%;
- transform: translateY(-50%);
- width: 60rpx;
- height: 60rpx;
- }
- .tabbar {
- width: 260px;
- display: flex;
- align-items: center;
- justify-content: center;
- .tab {
- flex: 1;
- line-height: 44px;
- text-align: center;
- position: relative;
- &.active {
- color: #DC3C23;
- .line {
- display: block;
- }
- }
- }
- .line {
- position: absolute;
- bottom: 3px;
- left: 50%;
- transform: translateX(-50%);
- width: 126rpx;
- background-color: #DC3C23;
- display: none;
- height: 2px;
- }
- }
- }
- .list {
- padding: 24rpx 28rpx;
- background-color: #F3F3F7;
- }
- .item {
- margin-bottom: 24rpx;
- padding: 28rpx 28rpx;
- background-color: #fff;
- border-radius: 12rpx;
- display: flex;
- font-size: 14px;
- .num {
- color: rgb(117, 117, 117);
- margin-top: 8px;
- }
- }
- .img-box {
- margin-right: 20rpx;
- position: relative;
- .img {
- position: absolute;
- bottom: 0;
- left: 50%;
- transform: translateX(-50%);
- width: 77%;
- }
- }
- .content {
- flex: 1;
- min-width: 10%;
- max-width: 100%;
- display: flex;
- justify-content: space-between;
- align-items: center;
- .left {
- flex: 1;
- min-width: 10%;
- max-width: 100%;
- }
- .paid{
- padding: 8rpx 20rpx;
- border-radius: 12rpx;
- background-color: #ccc;
- color: #fff;
- }
- .guanzhu-box{
- display: flex;
- justify-content: center;
- align-items: center;
- background: url(@/static/image/match/right-bg.png)center center/ 100% 100% no-repeat;
- width: 180rpx;
- height: 59.54rpx;
- .guanzhu-icon{
- width: 28.82rpx;
- height: 25.39rpx;
- }
- }
- }
- </style>
|