Skip to content

H
h5
提交 de0c8473 作者: ZhangLingKun
操作

修复：节目排行

上级 3dcb1cf3
流水线 #8316 已通过 于阶段
in 1 分 14 秒
正在显示 包含 775 行增加 和 5 行删除
src/api/index.ts
import CommonAPI from '@/api/modules/common'
import ForumAPI from '@/api/modules/forum'
const useApi = { CommonAPI }
export { CommonAPI }
const useApi = { CommonAPI, ForumAPI }
export { CommonAPI, ForumAPI }
export default useApi
src/api/interface/common.ts
......@@ -109,3 +109,32 @@ export type listCompanyInfoByCoopIdType = InterListFunction<
backUserAccountId: number
}
>
// web端账号密码登录
export type WebLoginType = InterFunction<
{
accountNo: string
passWord: string
},
{
nickName: string
phoneNum: string
token: string
userAccountId: number
}
>
// 测试-手机号登录
export type TestPhoneLogin = InterFunction<
{
phone: string
},
{
authStatus: null
nickName: string
phoneNum: string
portType: number
sessionKey: null
token: string
uid: string
userAccountId: number
}
>
src/api/modules/common.ts
......@@ -2,7 +2,9 @@ import {
BackEndLoginType,
cooperationServiceBitmap,
getSecondDistrictInfo,
listCompanyInfoByCoopIdType
listCompanyInfoByCoopIdType,
TestPhoneLogin,
WebLoginType
} from '@/api/interface/common'
import request from '../request'
......@@ -22,4 +24,11 @@ export default class CommonAPI {
// 合作商家列表-根据合作标签id获取
static listCompanyInfoByCoopId: listCompanyInfoByCoopIdType = (params) =>
request.get('/userapp/cooperation/listCompanyInfoByCoopId', params)
// web端账号密码登录
static webLogin: WebLoginType = (params) => request.post('/userapp/auth/webLogin', params)
// 测试-手机号登录
static testPhoneLogin: TestPhoneLogin = (params) =>
request.get('/userapp/auth/testPhoneLogin', params)
}
src/api/modules/forum.ts 0 → 100644
import {
allCommentListType,
appGambitListsType,
attentionType,
dynamicRecentNewsType,
forumDetailType,
forumListType,
gambitAppRemoveType,
gambitLikedType,
getRemainingVotesType,
likeOrCancelType,
listGambitType,
publishCommentType,
publishForumType,
replyListType,
reviewLikesType,
transPondType,
userMessageType
} from '@/api/interface/forum'
import request from '@/api/request'
class ForumAPI {
// 论坛列表
static getForumList: forumListType = (data) => {
return request.get('/release/dynamic/dynamicList', data)
}
// 论坛-评论-发表
static publishComment: publishCommentType = (data) => {
return request.post('/release/dynamic/comment', data)
}
// 论坛-发布
static publishForum: publishForumType = (data) => {
return request.post('/release/dynamic/publish', data)
}
// 论坛-点赞或取消点赞
static likeOrCancel: likeOrCancelType = (data) => {
return request.get('/release/dynamic/likeOrCancel', data)
}
// 论坛-详情
static getForumDetail: forumDetailType = (data) => {
return request.get('/release/dynamic/dynamicDetails', data)
}
// 话题-列表（小程序）
static getAppGambitList: listGambitType = (data) =>
request.post('/release/dynamic/appGambitList', data)
// 话题-话题下的帖子
static getAppGambitLists: appGambitListsType = (data) =>
request.post('/release/gambit/appGambitLists', data)
// 话题-评论/回复点赞,取消
static reviewLikes: reviewLikesType = (data) => request.get('/release/dynamic/reviewLikes', data)
// 话题-所有评论
static getAllCommentList: allCommentListType = (data) =>
request.post('/release/gambit/allCommentList', data)
// 话题-评论下的回复
static getReplyList: replyListType = (data) => request.post('/release/gambit/replyList', data)
// 话题-单个用户信息
static getUserMessage: userMessageType = (data) =>
request.get('/release/gambit/userMessage', data)
// 帖子-关注
static attention: attentionType = (data) => request.get('/release/gambit/attention', data)
// 话题-个人点赞过的帖子
static getGambitLiked: gambitLikedType = (data) => request.post('/release/gambit/liked', data)
// 话题-帖子删除
static gambitAppRemove: gambitAppRemoveType = (data) =>
request.get('/release/gambit/appRemove', data)
// new-小程序-返回最新5条带动态的图片
static dynamicRecentNews: dynamicRecentNewsType = (data) =>
request.get('/release/dynamic/recentNews', data)
// 帖子-转发数
static transPond: transPondType = (data) => request.get('/release/gambit/transPond', data)
// 查看剩余投票次数
static getRemainingVotes: getRemainingVotesType = (data) =>
request.get('/release/dynamic/getRemainingVotes', data)
}
export default ForumAPI
src/components/nav-bar/index.vue 0 → 100644
<template>
<u-navbar
:title="title"
:auto-back="false"
:bg-color="bgColor"
:title-style="titleStyle"
:left-icon-color="leftIconColor"
:placeholder="placeholder"
:left-icon="!hideLeft && 'arrow-left' as any"
:left-text="leftText"
@left-click="handleLeft"
/>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
name: 'NavBar',
props: {
// 标题名称
title: {
type: String,
default: ''
},
// 是否自动返回
autoBack: {
type: Boolean,
default: true
},
// 背景颜色
bgColor: {
type: String,
default: '#ffffff'
},
// 是否隐藏左侧按钮
hideLeft: {
type: Boolean,
default: false
},
// 标题样式
titleStyle: {
type: Object,
default: () => {
return {}
}
},
// 左侧按钮颜色
leftIconColor: {
type: String,
default: '#000000'
},
// 是否开启占位（默认开）
placeholder: {
type: Boolean,
default: true
},
// 左侧文字
leftText: {
type: String,
default: ''
}
},
emits: ['left-click'],
setup(props, { emit }) {
// 分享类型
const shareType = ref<string>()
// 分享类型路由转化列表
const shareTypeList = [
{ label: '首页', value: 'share', router: '/pages/home/index', action: uni.switchTab },
{
label: '新闻',
value: 'news',
router: '/page-home/news-list/index?type=share',
action: uni.redirectTo
}
]
// 点击左侧按钮
const handleLeft = () => {
if (props.hideLeft) return
// 如果设置自动返回，则自动返回
if (props.autoBack) {
// 设置通用分享，默认返回首页
const item = shareTypeList.find((i) => i.value === shareType.value)
// 如果有专门的分享页面
if (item) {
item.action({
url: item.router,
fail: (e: { errMsg: string }) => {
uni.showToast({ title: e.errMsg, icon: 'none' })
uni.switchTab({ url: '/pages/home/index' })
}
})
return
}
// 如果不来自分享，则直接返回上一页
uni.navigateBack({
delta: 1,
fail: (e: { errMsg: string }) => {
uni.showToast({ title: e.errMsg, icon: 'none' })
uni.switchTab({ url: '/pages/home/index' })
}
})
} else {
emit('left-click')
}
}
return {
handleLeft,
shareType
}
},
mounted() {
// eslint-disable-next-line no-undef
const router = getCurrentPages().at(-1) as { options: { type: string }; route: string }
if (!router?.options?.type) return
// 如果有分享文章则设置分享类型
this.shareType = router.options?.type
// console.log('执行到此处 --->', router)
}
})
</script>
src/pages.json
......@@ -4,7 +4,7 @@
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "　",
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
},
......@@ -13,6 +13,15 @@
"style": {
"navigationBarTitleText": ""
}
},
// 年会排行版
{
"path": "pages/activity-rank/index",
"style": {
"navigationBarTitleText": "云享飞",
"enablePullDownRefresh": true,
"navigationBarTextStyle": "white"
}
}
],
"globalStyle": {
......
src/pages/activity-rank/comp/rank-item/index.vue 0 → 100644
<template>
<view class="rank-item flex-around" @click="handleDetail()">
<view class="item item-index flex-center">
<view v-if="index >= 3">{{ index + 1 }}</view>
<image v-else :src="rankIcon[index]" mode="aspectFill" class="icon" />
</view>
<view v-if="current === 1" class="item item-name text-ellipsis">{{ getDetailName }}</view>
<view class="item item-title text-ellipsis">{{ detail?.description }}</view>
<view class="item item-num">{{ detail?.likesCount }}</view>
<!-- <view class="item item-action">-->
<!-- <u-button-->
<!-- :custom-style="{ padding: 0, minWidth: '100%' }"-->
<!-- shape="circle"-->
<!-- size="mini"-->
<!-- :plain="detail.likes"-->
<!-- type="primary"-->
<!-- color="#ff5617"-->
<!-- :disabled="detail.likes"-->
<!-- >-->
<!-- {{ detail?.likes ? '已投票' : '去投票' }}-->
<!-- </u-button>-->
<!-- </view>-->
</view>
</template>
<script setup lang="ts">
import { InterListType } from '@/api/interface'
import { forumListType } from '@/api/interface/forum'
import { computed, PropType } from 'vue'
// 详情类型
type DetailType = InterListType<forumListType>[0]
// 参数
const props = defineProps({
index: {
type: Number,
default: 0
},
current: {
type: Number,
default: 0
},
detail: {
type: Object as PropType<DetailType>,
default: () => ({})
}
})
// 排名icon
const rankIcon = [
'https://file.iuav.com/file/activity-rank-1.png',
'https://file.iuav.com/file/activity-rank-2.png',
'https://file.iuav.com/file/activity-rank-3.png'
]
// 跳转详情
const handleDetail = () => {
uni.navigateTo({ url: `/page-forum/forum-detail/index?forumId=${props.detail.id}` })
}
// 获取详情里面的文字
const getDetailName = computed(() => {
const reg = /(演出者|姓名|表演者)：([^:\s]+)/
return props.detail?.description?.match(reg)?.[2] || '无'
})
</script>
<style scoped lang="scss">
.rank-item {
position: relative;
width: 100%;
box-sizing: border-box;
flex-wrap: nowrap;
margin-bottom: 48rpx;
padding: 0 24rpx;
.item {
text-align: center;
font-weight: 500;
font-size: 48rpx;
color: #5f5f5f;
}
.item-index {
width: 22%;
//margin-right: 1%;
font-weight: 500;
font-size: 48rpx;
color: #ff4600;
.icon {
width: 58rpx;
height: 58rpx;
}
}
.item-num {
width: 20%;
font-weight: 500;
font-size: 48rpx;
color: #333333;
}
.item-name {
width: 20%;
font-weight: 500;
font-size: 48rpx;
color: #333333;
}
.item-title {
width: 35%;
margin-right: 0;
}
.item-num {
margin-right: 2%;
}
.item-action {
width: 12.5%;
}
}
</style>
src/pages/activity-rank/index.scss 0 → 100644
page{
background-color: #D81300 !important;
}
src/pages/activity-rank/index.vue 0 → 100644
<template>
<view class="activity-rank">
<image
class="activity-bg"
src="https://file.iuav.com/file/activity-rank-bg.png"
mode="widthFix"
lazy-load
/>
<view class="activity-view">
<!--顶部标题-->
<view class="activity-tab flex-between">
<view
v-for="(i, j) in tabList"
:key="j"
class="tab-item flex-center"
:class="{ 'item-active': currentIndex === j }"
@click="handleTab(j)"
>
<image class="title" mode="aspectFill" :src="currentIndex === j ? i.active : i.default" />
</view>
</view>
<!--排行列表-->
<view class="activity-list">
<!--男生女生-->
<!-- <view class="activity-switch flex-between">-->
<!-- <view class="activity-all flex-end" @click="handleTopic()">-->
<!-- <view class="text">-->
<!-- {{ tabList[currentIndex]?.detail }}-->
<!-- </view>-->
<!-- <u-icon name="arrow-right" color="#C80700" size="12"></u-icon>-->
<!-- </view>-->
<!-- </view>-->
<!--表头-->
<view class="list-td flex-around">
<view class="td-item">排名</view>
<view v-if="currentIndex === 1" class="td-item">姓名</view>
<view class="td-item">节目名称</view>
<view class="td-item">得票数</view>
<!-- <view class="td-item">操作</view>-->
</view>
<!--列表-->
<view class="list-tr">
<rank-item
v-for="(i, j) in rankList"
:key="j"
:index="j"
:detail="i"
:current="currentIndex"
/>
<view v-if="!rankList?.length" class="list-none">投票尚未开始，请耐心等待哦~</view>
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import './index.scss'
import { ref } from 'vue'
import { InterListType, InterReqType } from '@/api/interface'
import { CommonAPI, ForumAPI } from '@/api'
import { onPullDownRefresh, onShow } from '@dcloudio/uni-app'
import { forumListType } from '@/api/interface/forum'
import RankItem from './comp/rank-item/index.vue'
// 列表类型
type ListType = InterListType<forumListType>
// 请求类型
type ReqType = InterReqType<forumListType>
// tab栏数据
const tabList = ref([
{
title: '节目榜',
active: 'https://file.iuav.com/file/activity-tab-0-act.png',
default: 'https://file.iuav.com/file/activity-tab-0.png',
id: 1001,
detail: '查看全部节目'
},
{
title: '个人榜',
active: 'https://file.iuav.com/file/activity-tab-1-act.png',
default: 'https://file.iuav.com/file/activity-tab-1.png',
id: 1002,
detail: '查看全部表演者'
}
])
// 当前选择的index
const currentIndex = ref(0)
// 当前选择的switch
const currentSwitch = ref(0)
// 话题列表
const rankList = ref<ListType>()
// 获取话题列表
const getRankList = async (data?: ReqType) => {
const res = await ForumAPI.getForumList({
pageNo: 1,
pageSize: 999,
gambitId: tabList.value[currentIndex.value]?.id,
needSort: 1,
...data
})
if (res && res.code === '200') {
rankList.value = res.result?.list || []
// console.log('话题列表 --->', res.result?.list)
}
}
// tab栏切换
const handleTab = (index: number) => {
currentIndex.value = index
currentSwitch.value = 0
getRankList({ gambitId: tabList.value[currentIndex.value]?.id })
}
// 登录
const getLoginToken = async () => {
const res = await CommonAPI.testPhoneLogin({
phone: '17608918976'
})
if (res && res.code === '200') {
console.log('登录成功 --->', res.result.token)
uni.setStorageSync('token', res.result.token)
}
}
// 组件挂载
onShow(async () => {
await getLoginToken()
await getRankList()
})
// 下拉刷新
onPullDownRefresh(() => {
uni.showToast({ title: '加载中', icon: 'loading' })
getRankList()
uni.stopPullDownRefresh()
})
</script>
<style scoped lang="scss">
.activity-rank {
position: relative;
width: 68%;
box-sizing: border-box;
margin: 0 auto;
.activity-bg {
position: absolute;
top: -100rpx;
left: calc((100% - 38%) / 2);
width: 38%;
//z-index: -10;
}
.activity-view {
position: relative;
width: 100%;
box-sizing: border-box;
padding: 258rpx 28rpx 200rpx 28rpx;
.activity-tab {
position: relative;
width: 100%;
box-sizing: border-box;
flex-wrap: nowrap;
align-items: flex-end;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 32rpx;
border-radius: 20rpx 20rpx 0 0;
background: #fff;
}
.tab-item {
position: relative;
width: 50%;
box-sizing: border-box;
height: 120rpx;
background: linear-gradient(240deg, #fe2825 0%, #fd5472 100%);
border: 2rpx solid rgba(255, 255, 255, 1);
border-radius: 0 20rpx 0 0;
padding: 0 0 32rpx 0;
.title {
width: 148rpx;
height: 50rpx;
}
&:first-child {
border-radius: 20rpx 0 0 0;
}
}
.item-active {
height: 142rpx;
background: #fff;
border-radius: 20rpx 20rpx 0 0 !important;
}
}
.activity-list {
position: relative;
width: 100%;
min-height: 500rpx;
box-sizing: border-box;
background: linear-gradient(
180deg,
#ffffff 0%,
rgba(255, 255, 255, 0.89) 51%,
rgba(254, 254, 252, 0.6) 100%
);
border-radius: 0 0 20rpx 20rpx;
padding-bottom: 4rpx;
//padding: 0 24rpx;
.activity-all {
position: absolute;
top: 0;
right: 24rpx;
box-sizing: border-box;
align-items: baseline;
//transform: translateY(-10rpx);
//margin-bottom: 12rpx;
.text {
color: #c80700;
font-size: 26rpx;
}
}
.activity-switch {
position: relative;
width: 100%;
box-sizing: border-box;
padding: 0 24rpx;
margin-bottom: 24rpx;
min-height: 32rpx;
.list-switch {
position: relative;
width: 186rpx;
height: 48rpx;
background: #ff5617;
border-radius: 52rpx;
font-size: 24rpx;
color: #fff;
box-sizing: border-box;
padding: 0 2rpx;
.switch-item {
width: 50%;
height: 44rpx;
border-radius: 60rpx;
text-align: center;
line-height: 44rpx;
}
.item-active {
background: #ffffff;
color: #ff5617;
transition: all 0.15s ease-in-out;
}
}
}
.list-td,
.list-tr {
position: relative;
width: 100%;
box-sizing: border-box;
.td-item {
font-weight: 500;
font-size: 28rpx;
color: #777777;
line-height: 33rpx;
text-align: center;
}
.list-none {
position: relative;
width: 100%;
text-align: center;
font-weight: 400;
font-size: 28rpx;
color: #aaaaaa;
margin-top: 200rpx;
}
}
.list-td {
margin-bottom: 32rpx;
}
}
.activity-footer {
position: fixed;
bottom: 48rpx;
width: calc(100% - 56rpx);
height: 124rpx;
background: linear-gradient(90deg, #fff4ee 0%, #ff4850 100%);
border-radius: 64rpx 64rpx 64rpx 64rpx;
border: 2rpx solid #fe3361;
box-sizing: border-box;
padding: 0 32rpx;
.avatar {
width: 68rpx;
height: 68rpx;
border: 2rpx solid #fff;
border-radius: 50%;
margin-right: 24rpx;
}
.content {
font-size: 24rpx;
.bold {
margin: 0 4rpx;
font-weight: bold;
font-size: 32rpx;
}
}
.action {
position: absolute;
top: 20rpx;
right: 24rpx;
width: 184rpx;
height: 88rpx;
.button {
width: 100%;
height: 100%;
transition: all 0.15s ease-in-out;
&:active {
transform: scale(0.9);
}
}
}
}
}
}
</style>
src/static/style/global.scss
$bg-color: #f5f5f5;
$bg-color: #F1F5F6;
$button-bg-color: linear-gradient(270deg, #ff2100 0%, #fe9d45 100%);
page {
background-color: $bg-color;
}
scroll-view ::-webkit-scrollbar {
//下面四个属性，选一个就可
display:none;
width: 0;
height: 0;
background-color: transparent;
}
.uni-app--showleftwindow + .uni-tabbar-bottom {
display: none;
}
.flex-center {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.flex-start {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}
.flex-baseline {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: baseline;
}
.flex-end {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
.flex-between {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.flex-around {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.select-none{
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.align-start {
align-items: flex-start;
}
.cursor-pointer {
cursor: pointer;
}
.two-line-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论