Skip to content

C
cust-app
Commit 7ab1362f authored by liwei's avatar liwei
Browse files
Options

修改了排行榜页面

parent a8b82e47
Show whitespace changes
Inline Side-by-side
Showing with 239 additions and 323 deletions
pages.json
View file @ 7ab1362f
......@@ -23,9 +23,7 @@
"navigationStyle": "custom",
"backgroundColor": "#F4F5F9",
"backgroundColorTop": "#F4F5F9",
"backgroundColorBottom": "#F4F5F9",
"enablePullDownRefresh": false,
"onReachBottomDistance": 50
"backgroundColorBottom": "#F4F5F9"
}
},
{
......@@ -35,10 +33,7 @@
"navigationStyle": "custom",
"backgroundColor": "#F4F5F9",
"backgroundColorTop": "#F4F5F9",
"backgroundColorBottom": "#F4F5F9",
"enablePullDownRefresh": false,
"onReachBottomDistance": 50,
"disableScroll": true
"backgroundColorBottom": "#F4F5F9"
}
},
{
......@@ -48,10 +43,7 @@
"navigationStyle": "custom",
"backgroundColor": "#F4F5F9",
"backgroundColorTop": "#F4F5F9",
"backgroundColorBottom": "#F4F5F9",
"enablePullDownRefresh": false,
"onReachBottomDistance": 50,
"disableScroll": true
"backgroundColorBottom": "#F4F5F9"
}
},
{
......
pages/tab/activity.vue
View file @ 7ab1362f
......@@ -5,23 +5,22 @@
<!-- 轮播图 后面放banner里的图-->
<view class="box">
<view class="swiper">
<ls-swiper :list="userData.imgList" imgKey="" :loop="true" :dots="true" :autoplay="true"
:height="200" />
<ls-swiper :list="bannerList" imgKey="" :loop="true" :dots="true" :autoplay="true" :height="200" />
</view>
</view>
<!-- 活动列表-->
<view class="card" v-for="(item,index) in businessList" :key="index" @click="gotodetail(item)">
<view class="card" v-for="(item,index) in activityList" :key="index" @click="gotodetail(item)">
<view class="contentBody">
<view class="leftlist">
<image src="/static/images/home/gonggao.png" class="leftlistimage"/>
</view>
<view class="rightlist">
<view class="rightlist-title">{{item.name}}</view>
<view class="rightlist-title">{{item.title}}</view>
<view class="rightlist-time">
<view class="timeicon">
<u-icon name="clock" color="#666666;" size="15"></u-icon>
</view>
<view class="timetext">{{item.createTime}}</view>
<view class="timetext">{{item.publishDate}}</view>
</view>
<view class="rightlist-address">
<view class="addressicon">
......@@ -36,21 +35,29 @@
<view class="bussiness-nomore">~ 没有更多啦 ~</view>
</view>
<!-- <login @change="getUserInfo" :isLoginPop="isLoginPop" class="my-select"></login>-->
</view>
</view>
</template>
<script>
let util = require('@/util/means.js');
import LsSwiper from '../../components/ls-swiper/index.vue';
import {bannerList} from '../../api/banner/index'
import {activityList} from '../../api/activity/index'
export default {
components: {
LsSwiper
},
data() {
return {
businessList: [
//分页查询参数
queryParam:{
page:1,
rows:10
},
//banner轮播图
bannerList:[],
//活动列表
activityList: [
{
name:'测试1',
createTime:'2024-10-12',
......@@ -96,33 +103,17 @@ export default {
createTime:'2024-10-12',
address:'天津'
}
] ,// 商家列表
notice:'这里是公告这里是公告这里是公告这里是公告这里是公告这里是公告这里是公告这里是公告',
showBtn: true,
],
showArrowDown: true,
showTabbar: true,
scrollTop: 0,
isLoginPop: false,
userData: {
userArticleViewResponse: {
articleContent: null,
articleImg: []
}
},
data: [],
count: 0,
};
},
onHide() {
},
onShow() {
this.getRecUserInfo();
this.getBannerList()
this.getActivityList()
},
onPageScroll(e) {
if (!this.isInit) {
return;
}
const _this = this;
if (e.scrollTop <= 0) {
this.showArrowDown = true;
......@@ -159,156 +150,31 @@ export default {
_this.flag = true;
},
methods: {
// 页面跳转
gotopage(url) {
uni.reLaunch({
url: url
});
},
//热门推荐 跳转
gotodetail(item){
uni.navigateTo({
url: '/pages2/business/business/id='+item.businessId
})
},
async getUnRead() {
const res = await this.$myRequest({
url: `/message/un/read`,
withToken: true,
method: 'GET'
});
this.count = res.data.data
uni.setTabBarBadge({ //显示数字
index: 1, //tabbar下标
text: `${res.data.data}` //数字
//获取公告列表
getBannerList() {
const query = {
page:this.queryParam.page,
rows:this.queryParam.rows
}
bannerList(query).then(res =>{
//将res.data.rows集合里的bannerPicture取出来，放到集合中
this.bannerList = res.data.rows.map(item => item.bannerPicture)
}).catch(e => {
console.log(e)
})
},
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
},
getRecUserInfo() {
console.log("开始获取用户信息")
// 获取推荐用户信息
let age = 20;
if (this.age) {
age = util.mymethod(uni.getStorageSync('itemobj').birthday);
}
let loginType;
uni.getStorageSync('token') ? (loginType = true) : (loginType = false);
this.$myRequest({
url: 'nostalgia/fruser/recommendUserInfo',
withToken: loginType,
data: {
age,
gender: this.gender == undefined ? "FEMALE" : this.gender
},
method: 'GET'
}).then(res => {
console.log("获取用户信息完成")
if (res.data.code == 200) {
if (res.data.data == null) {
this.showArrowDown = false;
this.isInit = false;
// this.data = [];
this.userData = {};
this.nextData = {};
uni.setTabBarBadge({
index: 0,
text: '0'
});
} else {
this.showArrowDown = true;
this.isInit = true;
this.userData = res.data.data;
if(this.userData.userArticleViewResponse.articleImg.length>3){
this.userData.userArticleViewResponse.articleImg = this.userData.userArticleViewResponse.articleImg.splice(0,3)
}
uni.setTabBarBadge({
index: 0,
text: `${res.data.data.surplusNum}`
});
this.showBtn = true;
console.log(
`console.log("获取用户信息完成") 用户id${res.data.data.id}****剩余次数${res.data.data.surplusNum}`
);
}
} else {
this.$refs.elm.showDialog();
}
//获取活动列表
getActivityList() {
const query = {
page:this.queryParam.page,
rows:this.queryParam.rows
}
activityList(query).then(res =>{
this.activityList = res.data.rows
}).catch(e => {
console.log(e)
})
},
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>
......@@ -409,6 +275,13 @@ page {
font-weight: 500;
color: #222222;
margin-bottom: 12rpx;
/* 超出两行省略 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 控制行数 */
}
.rightlist-message {
......
pages/tab/index.vue
View file @ 7ab1362f
......@@ -139,24 +139,15 @@
</view>
</view>
</view>
<ELM ref="elm" :msg="tipMsg" :isConfirm="isConfirm" @confirm="confirma"></ELM>
</view>
</template>
<script>
let util = require('@/util/means.js');
import ELM from '@/components/elm-toast/index.vue';
import LsSwiper from '../../components/ls-swiper/index.vue';
import login from '../../components/login/login.vue';
import {
WS
} from '@/util/wsConfig.js'
import {noticeList} from '../../api/notice/index'
import {bannerList} from '../../api/banner/index'
export default {
components: {
ELM,
login,
LsSwiper
},
data() {
......@@ -226,7 +217,7 @@
},
//TODO 接口会调两次
onLoad() {
onShow() {
this.getNoticeList()
this.getBannerList()
this.showAnima = false;
......
pages/tab/rank.vue
View file @ 7ab1362f
......@@ -15,26 +15,24 @@
</view>
</u-navbar>
</view>
<scroll-view scroll-y="true" style="height: 100%">
<view style="background-image: linear-gradient(to right, rgb(183, 195, 255) 0%, rgb(189, 231, 255) 100%);position: relative;">
<view class="container">
<view style="margin: auto 180rpx;padding-top: 50rpx;width: 400rpx;height: 40rpx;border-radius: 20rpx;">
<view>
<view class="top">
<view class="top1">
<u-subsection bgColor="#ffffff80" buttonColor="red" :list="subList" :current="subCurrent" fontSize="15" @change="sectionChange"/>
</view>
</view>
<view class="top">
<view class="top2">
<!-- 第二名 -->
<view class="two">
<view style="padding: 0;margin-left: 85rpx;margin-bottom: 10rpx;margin-top: 10rpx">
<text style="color: rgb(231, 97, 97);font-family: fantasy;font-size: 35rpx">TOP 2</text>
<view class="two-rank">
<text class="two-text1">TOP 2</text>
</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 class="two-avatar">
<u-avatar :src="rankList[1].user.avatarUrl" size="100rpx"/>
</view>
<view style="position: relative;width: 100%;background-color: #ffffff;text-align: center;margin-top: 10rpx">
<text style="font-weight: bold; font-size: 13px; color: #070707;">{{rankList[1].user.nickname}}</text>
<view class="two-name">
<text class="two-text2">{{rankList[1].user.nickname}}</text>
</view>
<view style="position:absolute;bottom: 20rpx;left: 30rpx; background-color: #efefef;border-radius: 40rpx;">
<view class="two-rankValue">
<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"/>
......@@ -43,16 +41,16 @@
</view>
<!-- 第一名 -->
<view class="one">
<view style="padding: 0;margin-left: 85rpx;margin-bottom: 10rpx;margin-top: 10rpx">
<view class="one-rank">
<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;">
<view class="one-avatar">
<u-avatar :src="rankList[0].user.avatarUrl" size="100rpx"/>
</view>
<view style="position: relative;width: 100%;background-color: #ffffff;text-align: center;margin-top: 10rpx">
<view class="one-name">
<text style="font-weight: bold; font-size: 13px; color: #070707;">{{rankList[0].user.nickname}}</text>
</view>
<view style="position:absolute;bottom: 60rpx;left: 30rpx; background-color: #efefef;border-radius: 40rpx;">
<view class="one-rankValue">
<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"/>
......@@ -61,16 +59,16 @@
</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 class="three-rank">
<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;">
<view class="three-avatar">
<u-avatar :src="rankList[2].user.avatarUrl" size="100rpx"/>
</view>
<view style="position: relative;width: 100%;background-color: #ffffff;text-align: center;margin-top: 10rpx">
<view class="three-name">
<text style="font-weight: bold; font-size: 13px; color: #070707;">{{rankList[2].user.nickname}}</text>
</view>
<view style="position:absolute;bottom: 20rpx;left: 30rpx; background-color: #efefef;border-radius: 40rpx;">
<view class="three-rankValue">
<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"/>
......@@ -110,7 +108,7 @@
</view>
</view>
</view>
</scroll-view>
</view>
</view>
</template>
......@@ -147,30 +145,8 @@ export default {
}
],
current: 0,
viewHeight: 1400,
list: ['全国排名'],
key:1,
bgColor: '#F4F5F9',
option: [{
text: '删除',
style: {
backgroundColor: '#FF8080'
}
}],
total: 0,
params: {
pageIndex: 1,
pageSize: 10
},
count: 0,
isShow: false,
ownerId: null,
timeoutObj: null,
reConnect: true,
socketTask: null,
nologin: '',
tipMsg: '',
isConfirm: false,
rankList: [
{
hours:10,
......@@ -222,18 +198,11 @@ export default {
sectionChange(index) {
this.subCurrent = index
},
actionClick(i) {
this.tipMsg = "开源版暂未开放，敬请期待！如需旗舰版，可联系作者微信（MMRWXM）咨询";
this.$refs.elm.showDialog();
},
}
}
</script>
<style lang="less" scoped>
.container {
height: 600rpx;
}
.u-nav-slot {
display: flex;
align-items: center;
......@@ -249,10 +218,21 @@ export default {
line-height: 44rpx;
}
}
.top {
.top{
background-image: linear-gradient(to right, rgb(183, 195, 255) 0%, rgb(189, 231, 255) 100%);
position: relative;
height:600rpx;
.top1{
margin: auto 180rpx;
padding-top: 50rpx;
width: 400rpx;
height: 40rpx;
border-radius: 20rpx;
}
.top2 {
display: flex;
justify-content: space-around;
margin: auto 20rpx;
margin: auto 30rpx;
position: absolute;
bottom: 50rpx;
......@@ -260,11 +240,49 @@ export default {
position: absolute;
bottom: 0rpx;
left: 0rpx;
border-radius: 20rpx 0rpx 0rpx 20rpx;
border-radius: 20rpx 20rpx 20rpx 20rpx;
background-color: white;
width: 236rpx;
height: 320rpx;
width: 220rpx;
height: 340rpx;
z-index: 1;
clip-path: polygon(51% 0, 100% 0, 100% 86%, 51% 100%, 51% 100%, 0 86%, 0 0);
.two-rank{
padding: 0;
margin-left: 80rpx;
margin-bottom: 10rpx;
margin-top: 10rpx;
.two-text1{
color: rgb(231, 97, 97);
font-family: fantasy;
font-size: 35rpx;
}
}
.two-avatar{
border: 4rpx solid #dedfdf;
width: 100rpx;
height: 100rpx;
border-radius: 100%;
margin-left: 60rpx;
}
.two-name{
position: relative;
width: 100%;
background-color: #ffffff;
text-align: center;
margin-top: 10rpx;
.two-text2{
font-weight: bold;
font-size: 13px;
color: #070707;
}
}
.two-rankValue{
display: flex;
justify-content: center;
margin-top: 10rpx;
background-color: #efefef;
border-radius: 40rpx;
}
.recommend-image{
width: 40rpx;
height: 40rpx;
......@@ -273,14 +291,41 @@ export default {
.one {
position: absolute;
bottom: 0rpx;
bottom: 20rpx;
left: 236rpx;
border-radius: 20rpx 20rpx 0rpx 0rpx;
box-shadow: 0px -6px 10px -1px darkgrey;
border-radius: 20rpx 20rpx 20rpx 20rpx;
background-color: #ffffff;
width: 236rpx;
width: 220rpx;
height: 350rpx;
z-index: 2;
clip-path: polygon(51% 0, 100% 0, 100% 86%, 51% 100%, 51% 100%, 0 86%, 0 0);
.one-rank{
padding: 0;
margin-left: 80rpx;
margin-bottom: 10rpx;
margin-top: 10rpx
}
.one-avatar{
border: 4rpx solid #dedfdf;
width: 100rpx;
height: 100rpx;
border-radius: 100%;
margin-left: 60rpx;
}
.one-name{
position: relative;
width: 100%;
background-color: #ffffff;
text-align: center;
margin-top: 10rpx
}
.one-rankValue{
display: flex;
justify-content: center;
margin-top: 10rpx;
background-color: #efefef;
border-radius: 40rpx;
}
.recommend-image{
width: 40rpx;
height: 40rpx;
......@@ -291,23 +336,38 @@ export default {
position: absolute;
bottom: 0rpx;
left: 470rpx;
border-radius: 0rpx 20rpx 20rpx 0rpx;
border-radius: 20rpx 20rpx 20rpx 20rpx;
background-color: #ffffff;
width: 240rpx;
height: 320rpx;
width: 220rpx;
height: 340rpx;
z-index: 1;
clip-path: polygon(51% 0, 100% 0, 100% 86%, 51% 100%, 51% 100%, 0 86%, 0 0);
.three-rank{
padding: 0;margin-left: 80rpx;margin-bottom: 10rpx;margin-top: 10rpx
}
.three-avatar{
border: 4rpx solid #dedfdf; width: 100rpx; height: 100rpx;border-radius: 100%;margin-left: 60rpx;
}
.three-name{
position: relative;width: 100%;background-color: #ffffff;text-align: center;margin-top: 10rpx;
}
.three-rankValue{
display: flex;
justify-content: center;
margin-top: 10rpx;
background-color: #efefef;
border-radius: 40rpx;
}
.recommend-image{
width: 40rpx;
height: 40rpx;
}
}
}
}
.container-list {
border-radius: 20rpx;
margin: auto 20rpx;
padding: auto 20rpx;
margin-top: 100rpx;
background-color: #ffffff;
margin-top: 20rpx;
.list-item{
margin-bottom: 20rpx;
.recommend-image{
......
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