Skip to content

C
cust-app
Commit 2e11ea25 authored by liwei's avatar liwei
Browse files
Options

修改了排行榜页面

parent 8469b91e
Show whitespace changes
Inline Side-by-side
Showing with 274 additions and 357 deletions
pages/tab/rank.vue
View file @ 2e11ea25
<template> <template>
<!-- 使用z-paging-swiper为根节点可以免计算高度 --> <view>
<z-paging-swiper> <view class="box">
<!-- 需要固定在顶部不滚动的view放在slot="top"的view中 --> <u-navbar :bgColor="bgColor" :placeholder="true">
<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 --> <view class="u-nav-slot" slot="left">
<template #top> <u-tabs :list="list1" @click="tabClick" :current="current" lineColor="#86A6F3" :activeStyle="{
<view class="">
<u-navbar :placeholder="true">
<template slot="left">
<u-tabs :list="list" @click="tabClick" :current="current" lineColor="#86A6F3" :activeStyle="{
color: '#303133', color: '#303133',
fontWeight: 'bold', fontWeight: 'bold',
transform: 'scale(1.2)' transform: 'scale(1.2)'
...@@ -16,394 +12,315 @@ ...@@ -16,394 +12,315 @@
transform: 'scale(1)' transform: 'scale(1)'
}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"> }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
</u-tabs> </u-tabs>
</template> </view>
</u-navbar> </u-navbar>
</view> </view>
</template> <scroll-view scroll-y="true" style="height: 100%">
<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面 --> <view style="background-image: linear-gradient(to right, rgb(183, 195, 255) 0%, rgb(189, 231, 255) 100%);position: relative;">
<swiper class="swiper" :current="current" @animationfinish="swiperAnimationfinish"> <view class="container">
<swiper-item class="swiper-item" v-for="(item,index) in list" :key="index"> <view style="margin: auto 180rpx;padding-top: 50rpx;width: 400rpx;height: 40rpx;border-radius: 20rpx;">
<!-- 这里的swiper-list-item为demo中为演示用定义的组件，列表及分页代码在swiper-list-item组件内 --> <u-subsection bgColor="#ffffff80" buttonColor="red" :list="subList" :current="subCurrent" fontSize="15" @change="sectionChange"/>
<!-- 请注意，swiper-list-item非z-paging内置组件，在自己的项目中必须自己创建，若未创建则会报组件不存在的错误 --> </view>
<!-- <ItemVue v-for="item in arr" :key="item.id" @delete="deleteFn" :info="item" </view>
" @praise="praise" @close="isOpen = false" @open="isOpen = true" /> --> <view class="top">
<ListVue ref="listItem" @selectShare="selectShare" :tabIndex="index" :userInfo="userInfo" <!-- 第二名 -->
:currentIndex="current" @changeOpen="changeOpen"></ListVue> <view class="two">
</swiper-item> <view style="padding: 0;margin-left: 85rpx;margin-bottom: 10rpx;margin-top: 10rpx">
</swiper> <text style="color: rgb(231, 97, 97);font-family: fantasy;font-size: 35rpx">TOP 2</text>
</z-paging-swiper> </view>
<view style="border: 4rpx solid #dedfdf; width: 100rpx; height: 100rpx;border-radius: 100%;margin-left: 65rpx;">
<u-avatar :src="rankList[1].user.avatarUrl" size="100rpx"></u-avatar>
</view>
<view style="position: relative;">
<view style="width: 100%; background-color: #ffffff;">
<u--text :bold="true" size="13" color="#070707" align="center" :text="rankList[1].user.nickname" />
</view>
</view>
<view style="position:absolute;bottom: 20rpx;left: 30rpx; background-color: #efefef;border-radius: 40rpx;">
<view style="display: flex; justify-content: center; align-items: center;width: 136rpx;margin: auto 20rpx; height: 60rpx;">
<u--text :bold="true" size="20" color="rgb(231, 97, 97)" align="right" :text="rankList[1].hours" />
<image src="/static/images/rank/rankRecommend2.png" class="recommend-image"/>
</view>
</view>
</view>
<!-- 第一名 -->
<view class="one">
<view style="padding: 0;margin-left: 85rpx;margin-bottom: 10rpx;margin-top: 10rpx">
<text style="color: rgb(215, 31, 31);font-family: fantasy;font-size: 35rpx">TOP 1</text>
</view>
<view style="border: 4rpx solid #dedfdf; width: 100rpx; height: 100rpx;border-radius: 100%;margin-left: 65rpx;">
<u-avatar :src="rankList[0].user.avatarUrl" size="100rpx"/>
</view>
<view style="position: relative;">
<view style="width: 100%; background-color: #ffffff;">
<u--text :bold="true" size="13" color="#070707" align="center" :text="rankList[0].user.nickname" />
</view>
</view>
<view style="position:absolute;bottom: 60rpx;left: 30rpx; background-color: #efefef;border-radius: 40rpx;">
<view style="display: flex; justify-content: center;align-items: center; width: 136rpx;margin: auto 20rpx; height: 60rpx;">
<u--text :bold="true" size="20" color="rgb(215, 31, 31)" align="right" :text="rankList[0].hours" />
<image src="/static/images/rank/rankRecommend1.png" class="recommend-image"/>
</view>
</view>
</view>
<!-- 第三名 -->
<view class="three">
<view style="padding: 0;margin-left: 85rpx;margin-bottom: 10rpx;margin-top: 10rpx">
<text style="color: rgb(229, 132, 36);font-family: fantasy;font-size: 35rpx"">TOP 3</text>
</view>
<view style="border: 4rpx solid #dedfdf; width: 100rpx; height: 100rpx;border-radius: 100%;margin-left: 65rpx;">
<u-avatar :src="rankList[2].user.avatarUrl" size="100rpx"/>
</view>
<view style="position: relative;">
<view style="width: 100%; background-color: #ffffff;">
<u--text :bold="true" size="13" color="#070707" align="center" :text="rankList[2].user.nickname" />
</view>
</view>
<view style="position:absolute;bottom: 20rpx;left: 30rpx; background-color: #efefef;border-radius: 40rpx;">
<view style="display: flex; justify-content: center;align-items: center; width: 136rpx;margin: auto 20rpx; height: 60rpx;">
<u--text :bold="true" size="20" color="rgb(229, 132, 36)" align="right" :text="rankList[2].hours" />
<image src="/static/images/rank/rankRecommend3.png" class="recommend-image"/>
</view>
</view>
</view>
</view>
</view>
<view class="container-list">
<view class="list-item" v-for="(item,index) in rankList.slice(3)" :key="index">
<view>
<u-row>
<u-col span="1">
<view style="">
<u--text size="15" align="center" color="rgb(115, 116, 122)" :text="index+4"/>
</view>
</u-col>
<u-col span="2">
<view>
<u-avatar :src="item.user.avatarUrl" size="80rpx"/>
</view>
</u-col>
<u-col span="3">
<u--text class="textClass" size="15" align="left" color="#000000" :text="item.user.nickname"/>
<u--text size="12" align="left" color="rgb(115, 116, 122)" :text="'编号：'+ item.user.code + '号'"/>
</u-col>
<u-col span="4">
<u-line-progress active-color="red" percent="30" type="success"></u-line-progress>
</u-col>
<u-col span="2">
<view style="display: flex; justify-content: flex-start;margin-left: 15rpx">
<image src="/static/images/rank/rankRecommend.png" class="recommend-image"/>
<u--text :bold="true" size="15" color="#4facfe" :text="item.hours" />
</view>
</u-col>
</u-row>
</view>
</view>
</view>
</scroll-view>
</view>
</template> </template>
<script> <script>
import ItemVue from '../components/Item.vue'; import ELM from '@/components/elm-toast/index.vue';
import empty from '@/components/empty.vue' import empty from '@/components/empty.vue'
import ListVue from '../components/List.vue'; import {
WS
} from '@/util/wsConfig.js'
import UText from "../../uni_modules/uview-ui/components/u--text/u--text";
export default { export default {
// 复制下面这行 options 代码
options: {
styleIsolation: 'shared'
},
components: { components: {
ItemVue, UText,
empty, empty,
ListVue ELM
}, },
data() { data() {
return { return {
list: [ subList: [
{ {
name: '按序号' name: '女生榜'
}, },
{ {
name: '按票数', name: '男生榜'
}
],
subCurrent: 0,
list1: [
{
name: '当月榜'
}, },
{
name: '历史榜',
}
], ],
current: 0,
viewHeight: 1400,
list: ['全国排名'],
key:1,
bgColor: '#F4F5F9',
option: [{
text: '删除',
style: {
backgroundColor: '#FF8080'
}
}],
total: 0,
params: { params: {
pageIndex: 1, pageIndex: 1,
pageSize: 4, pageSize: 10
tabType: 'RECOMMEND'
}, },
current: 1, // tabs组件的current值，表示当前活动的tab选项 count: 0,
arr: [], isShow: false,
total: 0, ownerId: null,
userInfo: {}, timeoutObj: null,
selectInfo: {}, reConnect: true,
isOpen: false, socketTask: null,
num: 0, nologin: '',
isLoginPop: false,
tipMsg: '', tipMsg: '',
isConfirm: false isConfirm: false,
}; rankList: [
}, {
onLoad() { hours:10,
if (uni.getStorageSync('info') != '') { user: { nickname: '测试用户1', avatarUrl: '',code:'1'}
this.userInfo = uni.getStorageSync('info');
} else {
this.userInfo = {
id: 0
}
}
// this.getList(true)
},
onShow() {
this.getNum()
if (uni.getStorageSync("isRefresh")) {
this.current = 1
this.$refs.listItem[1].reload()
uni.setStorageSync("isRefresh", false)
}
},
// 自定义此页面的转发给好友(已经有全局的分享方法，此处会覆盖全局)
onShareAppMessage(res) {
if (res.from == "button") {
return {
title: this.selectInfo.content,
path: '/pagescommunity/dynamicDetail/dynamicDetail?id=' + this.selectInfo.id,
imageUrl: this.selectInfo.img[0]
}
} else {
return {
title: "动态列表",
path: '/pages/tab/community',
}
}
}, },
// 自定义页面的分享到朋友圈 {
onShareTimeline(res) { hours:11,
return { user: { nickname: '测试用户2', avatarUrl: '',code:'2'}
title: "动态列表",
path: '/pages/tab/community',
}
}, },
methods: { {
changeOpen(value) { hours:12,
this.isOpen = value user: { nickname: '测试用户3', avatarUrl: '',code:'3'}
}, },
selectShare(value) { {
this.selectInfo = value hours:13,
user: { nickname: '测试用户4', avatarUrl: '',code:'4'}
}, },
// swiper滑动结束 {
swiperAnimationfinish(e) { hours:14,
this.current = e.detail.current; user: { nickname: '测试用户5', avatarUrl: '',code:'5'}
}, },
// 获取未读消息数 {
getNum() { hours:15,
this.$myRequest({ user: { nickname: '测试用户6', avatarUrl: '',code:'6'}
url: `/nostalgia/articleMessage/unread`,
withToken: true,
method: 'GET',
}).then(res => {
this.num = res.data != null ? res.data.data : 0;
})
}, },
// 删除 {
deleteFn(value) { hours:15,
this.$myRequest({ user: { nickname: '测试用户7', avatarUrl: '',code:'6'}
url: `nostalgia/article/article/${value.id}`,
withToken: true,
method: 'DELETE',
}).then(res => {
if (res.data.code == 200) {
let idx = this.arr.findIndex(item => item.id == value.id)
this.arr.splice(idx, 1)
this.total -= 1
} else {
this.tipMsg = res.data.msg;
this.$refs.elm.showDialog();
}
})
}, },
// 点赞 {
praise(value) { hours:15,
console.log("进来了") user: { nickname: '测试用户8', avatarUrl: '',code:'6'}
let obj = {
...value,
}
let url = ''
if (obj.isLike) {
url = 'nostalgia/article/cancel/praise'
obj.likeCount -= 1
} else {
url = 'nostalgia/article/praise'
obj.likeCount += 1
}
this.$myRequest({
url,
data: {
id: value.id,
praiseType: "ARTICLE"
}, },
withToken: true, {
method: 'PUT', hours:15,
}).then(res => { user: { nickname: '测试用户9', avatarUrl: '',code:'6'}
if (res.data.code == "200") {
obj.isLike = !value.isLike
let idx = this.arr.findIndex(item => item.id == obj.id)
this.arr.splice(idx, 1, obj)
} else {
console.log(res.data.msg)
this.tipMsg = res.data.msg;
this.$refs.elm.showDialog();
return;
}
})
}, },
onRefresh() { {
this.getList(true) hours:15,
// 告知z-paging下拉刷新结束，这样才可以开始下一次的下拉刷新 user: { nickname: '测试用户10', avatarUrl: '',code:'6'}
setTimeout(() => {
this.$refs.paging.complete();
}, 1000)
}, },
tabClick({name}) { ],
if (name == "关注") {
this.params.tabType = "FOLLOW"
this.current = 0
} else if (name == "最近") {
this.params.tabType = "RECOMMEND"
this.current = 1
} }
// else {
// this.params.tabType = "CITY"
// this.current = 2
// }
// this.params.pageIndex = 1
// this.getList(true)
}, },
goPage(path) { onShow() {
if (uni.getStorageSync('info') != '') {
uni.navigateTo({
url: path
})
} else {
this.isLoginPop = true
}
}, },
getList(isFirst) { methods: {
if (isFirst) this.params.pageIndex = 1 sectionChange(index) {
this.$myRequest({ this.subCurrent = index
url: `/nostalgia/article/page`,
data: this.params,
withToken: true,
method: 'GET',
}).then(res => {
this.total = res.data.data.totalCount
if (isFirst) this.arr = []
this.arr = [...this.arr, ...res.data.data.rows].map(item => {
return {
...item,
isDel: item.userId == this.userInfo.id
}
})
})
}, },
goMessage() { actionClick(i) {
if (uni.getStorageSync('info') != '') {
this.tipMsg = "开源版暂未开放，敬请期待！如需旗舰版，可联系作者微信（MMRWXM）咨询"; this.tipMsg = "开源版暂未开放，敬请期待！如需旗舰版，可联系作者微信（MMRWXM）咨询";
this.$refs.elm.showDialog(); this.$refs.elm.showDialog();
} else {
this.isLoginPop = true
}
},
getUserInfo(e) {
if (e == 0) {
this.isLoginPop = false;
return;
}
// #ifdef MP-WEIXIN
try {
wx.getUserProfile({
desc: '用于完善会员资料',
success: resinfo => {
wx.login({
success: res => {
if (res.code) {
console.log(res.code, resinfo);
this.setCode(res.code, resinfo);
} else {}
},
fail: err => {}
});
},
fail: errinfo => {
this.setCode(this.generateRandomString(10), 'null');
}
});
} catch {
wx.getUserInfo({
success: resinfo => {
wx.login({
success: res => {
if (res.code) {
console.log(res.code, resinfo);
this.setCode(res.code, resinfo);
} else {}
},
fail: err => {}
});
},
fail: errinfo => {}
});
}
// #endif
// #ifndef MP-WEIXIN
this.setCode("ip", 'null');
// #endif
},
async setCode(code, resinfo) {
const res = await this.$myRequest({
url: 'token/wxAppletLogin',
data: {
code: code
},
method: 'POST'
});
console.log(res, 'delshoucang');
var obj = {
code: code,
state: res.data.code,
nickName: resinfo != 'null' ? resinfo.userInfo.nickName : "匿名用户"
};
uni.setStorageSync('verification', obj);
if (res.data.code == 200) {
this.isLoginPop = false;
this.isConfirm = true;
this.tipMsg = "登录成功";
this.$refs.elm.showDialog();
var info = {
birthday: res.data.data.info.birthday,
city: res.data.data.info.city,
gender: res.data.data.info.gender,
headPortrait: res.data.data.info.headPortrait,
id: res.data.data.info.id,
nickName: res.data.data.info.nickName
};
uni.setStorageSync('info', info);
uni.setStorageSync('token', res.data.data.token);
} else if (res.data.code == 11002) {
this.isLoginPop = false;
uni.reLaunch({
url: '/pagesintroduction/selfIntroduction?code=' + code
});
} else {
this.tipMsg = res.data.msg;
this.$refs.elm.showDialog();
}
},
confirm() {
this.isConfirm = false;
}, },
generateRandomString(length) {
let result = uni.getStorageSync('touristopenid');
if (result != null&&result!="") {
return result;
}else{
result='';
}
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; // 包含大小写字母和数字的所有字符集合
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * characters.length);
result += characters[randomIndex];
}
var now = new Date();
var year = now.getFullYear(); // 年份
var month = (now.getMonth() + 1).toString().padStart(2, '0'); // 月份（注意要加上1）
var day = now.getDate().toString().padStart(2, '0'); // 天数
var hours = now.getHours().toString().padStart(2, '0'); // 小时
var minutes = now.getMinutes().toString().padStart(2, '0'); // 分钟
var seconds = now.getSeconds().toString().padStart(2, '0'); // 秒数
result = "touristopenid" + result + (+year + month + day + hours + minutes + seconds);
uni.setStorageSync('touristopenid', result);
return result;
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
* { .container {
box-sizing: border-box; height: 600rpx;
margin: 0;
padding: 0;
font-family: PingFang HK, PingFang HK;
} }
.u-nav-slot {
display: flex;
align-items: center;
.u-navbar .left { .text {
width: 28rpx; height: 44rpx;
height: 32rpx; text-align: center;
font-size: 32rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #000000;
margin-left: 315rpx;
line-height: 44rpx;
}
} }
.top {
display: flex;
justify-content: space-around;
margin: auto 20rpx;
position: absolute;
bottom: 50rpx;
.box { .two {
padding: 0 32rpx 30rpx 32rpx; position: absolute;
bottom: 0rpx;
::v-deep item-vue:first-child { left: 0rpx;
.item { border-radius: 20rpx 0rpx 0rpx 20rpx;
border: none; background-color: white;
margin-top: 0; width: 236rpx;
height: 320rpx;
z-index: 1;
.recommend-image{
width: 40rpx;
height: 40rpx;
} }
} }
}
.swiper { .one {
height: 100%; position: absolute;
} bottom: 0rpx;
left: 236rpx;
border-radius: 20rpx 20rpx 0rpx 0rpx;
box-shadow: 0px -6px 10px -1px darkgrey;
background-color: #ffffff;
width: 236rpx;
height: 350rpx;
z-index: 2;
.recommend-image{
width: 40rpx;
height: 40rpx;
}
}
::v-deep .itemm:first-child .item { .three {
border: none !important; position: absolute;
margin-top: 0; bottom: 0rpx;
left: 470rpx;
border-radius: 0rpx 20rpx 20rpx 0rpx;
background-color: #ffffff;
width: 240rpx;
height: 320rpx;
z-index: 1;
.recommend-image{
width: 40rpx;
height: 40rpx;
}
}
} }
.container-list {
border-radius: 20rpx;
margin: auto 20rpx;
padding: auto 20rpx;
margin-top: 100rpx;
background-color: #ffffff;
.list-item{
margin-bottom: 20rpx;
.recommend-image{
width: 40rpx;
height: 40rpx;
}
}
::v-deep .u-badge {
font-weight: 600;
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment