127 lines
2.5 KiB
Vue
127 lines
2.5 KiB
Vue
<script setup>
|
|
// 点赞中心
|
|
import {
|
|
reactive,
|
|
ref,
|
|
computed,
|
|
} from 'vue';
|
|
//
|
|
import apex from '@/components/header/apex.vue'
|
|
//
|
|
import util from '@/common/js/util';
|
|
// 类型列表
|
|
const typeList = reactive([{
|
|
img: '/static/indexLike1.png',
|
|
count: 1000,
|
|
name: '展播量',
|
|
},
|
|
{
|
|
img: '/static/privateLike.png',
|
|
count: 20,
|
|
name: '完播量',
|
|
}
|
|
])
|
|
// 类型下标
|
|
const typeIndex = ref(0)
|
|
// 当前type
|
|
const typeCurrent = computed(() => {
|
|
let result = typeList[typeIndex.value]
|
|
return result
|
|
})
|
|
|
|
/**
|
|
* 点击下标
|
|
* @param {Object} index
|
|
*/
|
|
function handleTypeIndex(index) {
|
|
if (typeIndex.value === index) return
|
|
typeIndex.value = index
|
|
}
|
|
|
|
/**
|
|
* 点击列表
|
|
* @param {Object} item
|
|
*/
|
|
function handleDetail(item) {
|
|
// 进入详情
|
|
uni.navigateTo({
|
|
url: util.setUrl('/pages/index/dataCenter/pushDetail', {
|
|
//
|
|
})
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="appbw">
|
|
<view class="typeList rows f34">
|
|
<view class="item tac f1" :class="{'active': index === typeIndex}" v-for="(item,index) in typeList"
|
|
:key="index" @click="handleTypeIndex(index)">
|
|
<view class="name ptb10">{{item.name}}</view>
|
|
<view class="line"></view>
|
|
</view>
|
|
</view>
|
|
<view class="count rows mtb30 mlr30 ptb20 plr30 f32 br20">
|
|
<view class="key">{{typeCurrent.name}}</view>
|
|
<view class="value b">{{typeCurrent.count}}</view>
|
|
</view>
|
|
|
|
<!-- 列表盒子 -->
|
|
<view class="listBox mtb30 plr30">
|
|
<view class="item rows ptb20 plr10" v-for="(item,index) in 10" :key="index" @click="handleDetail(item)">
|
|
<view class="avatar">
|
|
<image class="wh100" src="/static/qq.png" mode="aspectFill" />
|
|
</view>
|
|
<view class="info f1 ml20 f28">
|
|
<view class="nickname t2hd c111">A**** 消耗榴莲果300兑换{{typeCurrent.name}}</view>
|
|
<view class="time mt10 c999 ">2024.12.08 20:00</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="nomore">暂无更多~</view>
|
|
|
|
<view class="fill" style="height: 30rpx;"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
// 类型列表
|
|
.typeList {
|
|
.item {
|
|
color: #999;
|
|
transition: .3s;
|
|
|
|
.line {
|
|
transition: .3s;
|
|
opacity: 0;
|
|
border: 2rpx solid #000;
|
|
}
|
|
|
|
&.active {
|
|
color: #333;
|
|
font-weight: bold;
|
|
|
|
.line {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 点赞统计
|
|
.count {
|
|
background-color: #FAF8F8;
|
|
|
|
.value {
|
|
color: #F84259;
|
|
}
|
|
}
|
|
|
|
// 列表盒子
|
|
.listBox {
|
|
.item+.item {
|
|
border-top: 2rpx solid #eee;
|
|
}
|
|
}
|
|
</style> |