Skip to content

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

修改了三个页面的分页，目前还有小bug

parent cff0c728
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 235 additions and 568 deletions
pages/tab/activity.vue
View file @ 2ec109b5
This diff is collapsed.
pages/tab/my.vue
View file @ 2ec109b5
......@@ -44,7 +44,7 @@
<text v-else>0</text>
</view>
<view class="top-tabs">
<view class="tab-1" @click="gotolike(1,info.meFollowCount)">
<view class="tab-1" @click="gotolike(1)">
<view class="tab-1-num">
<text v-if="info.meFollowCount">{{info.meFollowCount}}</text><text v-else>0</text>
</view>
......@@ -52,7 +52,7 @@
我喜欢的
</view>
</view>
<view class="tab-2" style="margin: 0 136rpx;" @click="gotolike(2,info.followMeCount)">
<view class="tab-2" style="margin: 0 136rpx;" @click="gotolike(2)">
<view class="tab-2-num">
<text v-if="info.followMeCount">{{info.followMeCount}}</text><text v-else>0</text>
</view>
......@@ -60,7 +60,7 @@
喜欢我的
</view>
</view>
<view class="tab-3" @click="gotolike(3,info.eachFollowCount)">
<view class="tab-3" @click="gotolike(3)">
<view class="tab-3-num">
<text v-if="info.eachFollowCount">{{info.eachFollowCount}}</text><text v-else>0</text>
</view>
......@@ -385,11 +385,13 @@ import {articleList, getOssUrl} from "../../api/article";
url: "/pagesme/me/doubleauth"
})
},
gotolike(type,num) { //喜欢三个列表页面
//跳转我喜欢的 喜欢我的 互相喜欢的三个列表页面
gotolike(type,num) {
uni.navigateTo({
url: "/pagesme/me/likeList?type="+type+'&num='+num
url: "/pagesme/me/likeList?type="+type
})
},
//操作项跳转
whether(i) {
if (i == 0) {
uni.navigateTo({
......
pagesUser/userList.vue
View file @ 2ec109b5
<template>
<view style="background-color: #F4F5F9;min-height: 100vh;">
<!-- 页头-->
<view class="content">
<u-navbar bgColor="white" :placeholder="true" title="会员信息">
<view class="u-nav-slot" slot="left">
<u-icon name="arrow-left" color="black" size="20" @click="backbar"/>
......@@ -10,33 +9,44 @@
</view>
</view>
</u-navbar>
<view class="recommendation" :style="{'top':navHeight+'px'}">
<view v-if="isdata" class="nodatacard">
<view class="text">暂无数据</view>
</view>
<view class="card">
<view class="recommendation-card" v-for="item in userList" @click="gotoDetail(item)">
<view class="card-image">
<image class="img" :src="item.avatarUrl"/>
</view>
<view class="card-bottom">
<view class="bottom-left">
<view class="bottom-info">
{{item.memNickName}}
<image v-if="item.memSex == '男'" class="gender" :src="baseUrl+'/user/male.png'" mode=""/>
<image v-else class="gender" :src="baseUrl+'/user/famale.png'" mode=""/>
</view>
<view class="bottom-info">
{{ item.memAge }}岁
<text style="margin-left: 10rpx;margin-right: 10rpx;color: #BBB9B9FF;">|</text>
{{item.memHeight}}cm
<!-- z-paging是一个分页组件-->
<z-paging ref="paging" empty-view-text="迈出第一步才有更多故事发生哦"
:empty-view-title-style="{
'font-size': '32rpx',
'color': '#C9C9D0',
'position': 'absolute',
'width': '100vw',
}" :empty-view-img="baseUrl+'/common/empty.png'" :empty-view-img-style="{
'position': 'absolute',
'top': '210rpx',
'width': '447rpx',
'height': '375rpx'
}" v-model="dataList" @query="queryList" :fixed="true" :auto-show-back-to-top="true" :back-to-top-with-animate="false">
<view class="recommendation" :style="{'top':navHeight+'px'}">
<view class="card">
<view class="recommendation-card" v-for="item in dataList" @click="gotoDetail(item)">
<view class="card-image">
<image class="img" :src="item.avatarUrl"/>
</view>
<view class="card-bottom">
<view class="bottom-left">
<view class="bottom-info">
{{item.memNickName}}
<image v-if="item.memSex == '男'" class="gender" :src="baseUrl+'/user/male.png'" mode=""/>
<image v-else class="gender" :src="baseUrl+'/user/famale.png'" mode=""/>
</view>
<view class="bottom-info">
{{ item.memAge }}岁
<text style="margin-left: 10rpx;margin-right: 10rpx;color: #BBB9B9FF;">|</text>
{{item.memHeight}}cm
</view>
<view class="bottom-address">{{item.city}}</view>
</view>
<view class="bottom-address">{{item.city}}</view>
</view>
</view>
</view>
</view>
</view>
</z-paging>
</view>
</template>
......@@ -48,19 +58,14 @@ import {getOssUrl} from "../api/article";
export default {
data() {
return {
//分页插件存储数据的变量
dataList:[],
//图片路径
baseUrl: this.$IMG_URL,
//分页查询参数
queryParam:{
page:1,
rows:10
},
//用户列表
userList:[],
//是否有数据
isdata: false,
//页面数据的数量
num:'',
//距离表头高度
navHeight:'',
menuButtonInfo: '',
......@@ -84,53 +89,15 @@ export default {
this.navHeight = (height + statusBarHeight + (margin * 5)) //导航栏总高
}
})
//获取用户信息
this.getUserList()
},
methods: {
filterSearch(value) {
let minHeight = ''
let maxHeight = ''
let minWeight = ''
let maxWeight = ''
if (value.memHeight != '' && value.memHeight != '不限'){
minHeight = value.memHeight.split('-')[0]
maxHeight = value.memHeight.split('-')[1]
}
if (value.memWeight != '' && value.memWeight != '不限'){
minWeight = value.memWeight.split('-')[0]
maxWeight = value.memWeight.split('-')[1]
//获取用户信息列表
queryList(pageNo, pageSize) {
const params = {
page: pageNo,
rows: pageSize
}
console.log('======params======', value)
this.queryParam = {
page: 1,
rows: 10,
memSex: value.memSex,
minHeight: minHeight,
maxHeight: maxHeight,
minWeight: minWeight,
maxWeight: maxWeight,
memResidenceProvince: value.memResidenceProvince,
memResidenceCity: value.memResidenceCity
}
this.getUserList()
},
//左上角的搜索
search() {
//判断当前是否已登录
uni.navigateTo({
url: '/pagesUser/userFilterPage'
});
},
//跳转用户详情
gotoDetail(item){
uni.navigateTo({
url: '/pagesUser/userInfo?memberId='+item.businessId
})
},
//获取用户列表数据
getUserList() {
userList(this.queryParam).then(res =>{
userList(params).then(res =>{
this.userList = res.data.data
//遍历this.userList
this.userList.forEach(item => {
......@@ -157,10 +124,24 @@ export default {
item.city = getCity(item.memResidenceProvince,item.memResidenceCity)
}
});
this.$refs.paging.completeByTotal(this.userList,res.data.total);
}).catch(e => {
console.log(e)
})
},
//左上角的搜索
search() {
//判断当前是否已登录
uni.navigateTo({
url: '/pagesUser/userFilterPage'
});
},
//跳转用户详情
gotoDetail(item){
uni.navigateTo({
url: '/pagesUser/userInfo?memberId='+item.businessId
})
},
//返回按钮
backbar() {
uni.navigateBack({
......@@ -172,87 +153,90 @@ export default {
</script>
<style lang="scss" scoped>
.u-nav-slot {
display: flex;
align-items: center;
.text {
height: 44rpx;
font-size: 32rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #000000;
margin-left: 14rpx;
line-height: 44rpx;
}
.img {
width: 22rpx;
height: 28rpx;
margin-left: 32rpx;
}
}
.recommendation {
.content {
min-height: 100vh;
background-color: #F4F5F9;
position: absolute;
padding: 0 34rpx;
.nodatacard{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.text{
text-align: center;
padding: 42rpx 0;
font-size: 13px;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #B9B9B9;
}
}
.recommendation-top {
display: flex;
justify-content: space-between;
margin: 56rpx 0;
.top-title {
font-size: 19px;
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
font-weight: bold;
color: #222222;
}
.more {
.recommendation {
min-height: 100vh;
background-color: #F4F5F9;
position: absolute;
padding: 0 34rpx;
.nodatacard{
height: 100vh;
display: flex;
.more-title {
font-size: 17px;
justify-content: center;
align-items: center;
flex-direction: column;
.text{
text-align: center;
padding: 42rpx 0;
font-size: 13px;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #848484;
margin-right: 14rpx;
color: #B9B9B9;
}
}
.recommendation-top {
display: flex;
justify-content: space-between;
margin: 56rpx 0;
.top-title {
font-size: 19px;
font-family: Source Han Sans CN-Bold, Source Han Sans CN;
font-weight: bold;
color: #222222;
}
.more-image {
.more {
display: flex;
align-items: center;
.rightimage {
width: 7px;
height: 12px;
.more-title {
font-size: 17px;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: #848484;
margin-right: 14rpx;
}
.more-image {
display: flex;
align-items: center;
.rightimage {
width: 7px;
height: 12px;
}
}
}
}
}
.u-nav-slot {
display: flex;
align-items: center;
.text {
height: 44rpx;
font-size: 32rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #000000;
margin-left: 14rpx;
line-height: 44rpx;
}
.img {
width: 22rpx;
height: 28rpx;
margin-left: 32rpx;
}
}
.card {
display: grid;
grid-template-columns: 330rpx 330rpx;
grid-column-gap: 22rpx;
.recommendation-card {
width: 330rpx;
margin-bottom: 25rpx;
......@@ -307,6 +291,5 @@ export default {
}
}
}
}
</style>
pagesme/me/likeList.vue
View file @ 2ec109b5
......@@ -2,34 +2,44 @@
<view style="background-color: #F4F5F9;min-height: 100vh;">
<!-- 页头-->
<u-navbar @leftClick="backbar" bgColor="#F4F5F9" :title="title"></u-navbar>
<view class="recommendation" :style="{'top':navHeight+'px'}">
<view v-if="isdata" class="nodatacard">
<view class="text">暂无数据</view>
</view>
<view class="card">
<view class="recommendation-card" v-for="item in userList">
<view class="card-image">
<image @click="gotoDetail(item)" class="img" :src="item.avatarUrl"/>
</view>
<view class="card-bottom">
<view class="bottom-left">
<view class="bottom-info">
{{item.memNickName}}
<image v-if="item.memSex === '0'" class="gender" :src="baseUrl+'/user/male.png'" mode=""/>
<image v-else class="gender" :src="baseUrl+'/user/famale.png'" mode=""/>
</view>
<view class="bottom-info">
{{item.memAge}}岁
<text style="margin-left: 10rpx;margin-right: 10rpx;color: #BBB9B9FF;">|</text>
{{item.memHeight}}cm
<z-paging ref="paging" empty-view-text="迈出第一步才有更多故事发生哦"
:empty-view-title-style="{
'font-size': '32rpx',
'color': '#C9C9D0',
'position': 'absolute',
'width': '100vw',
}" :empty-view-img="baseUrl+'/common/empty.png'" :empty-view-img-style="{
'position': 'absolute',
'top': '210rpx',
'width': '447rpx',
'height': '375rpx'
}" v-model="dataList" @query="queryList" :fixed="true" :auto-show-back-to-top="true" :back-to-top-with-animate="false">
<view class="recommendation" :style="{'top':navHeight+'px'}">
<view class="card">
<view class="recommendation-card" v-for="item in userList">
<view class="card-image">
<image @click="gotoDetail(item)" class="img" :src="item.avatarUrl"/>
</view>
<view class="card-bottom">
<view class="bottom-left">
<view class="bottom-info">
{{item.memNickName}}
<image v-if="item.memSex === '0'" class="gender" :src="baseUrl+'/user/male.png'" mode=""/>
<image v-else class="gender" :src="baseUrl+'/user/famale.png'" mode=""/>
</view>
<view class="bottom-info">
{{item.memAge}}岁
<text style="margin-left: 10rpx;margin-right: 10rpx;color: #BBB9B9FF;">|</text>
{{item.memHeight}}cm
</view>
<view class="bottom-address">{{item.city}}</view>
</view>
<view class="bottom-address">{{item.city}}</view>
<image v-if="type == '1' || type == '3'" class="cnacleLike" :src="baseUrl+'/user/cancelLike.png'" @click="deleteLike(item.userId)"/>
</view>
<image v-if="type == '1' || type == '3'" class="cnacleLike" :src="baseUrl+'/user/cancelLike.png'" @click="deleteLike(item.userId)"/>
</view>
</view>
</view>
</view>
</z-paging>
</view>
</template>
......@@ -42,6 +52,8 @@ import {calculateAge, parseDate} from "../../common";
export default {
data() {
return {
//分页插件存储数据的变量
dataList:[],
//图片路径
baseUrl: this.$IMG_URL,
//用户列表
......@@ -56,8 +68,9 @@ export default {
num:'',
//距离表头
navHeight:'',
share: false,
menuButtonInfo: '',
//查询类型 1:我喜欢的 2：喜欢我的 3：互相喜欢的
queryType:'',
//分页查询参数
queryParam:{
page:1,
......@@ -68,7 +81,6 @@ export default {
onLoad(options) {
//设置页头
this.type = options.type;
this.num = options.num;
//获取当前页面的页头高度
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
const {
......@@ -89,8 +101,13 @@ export default {
this.getUserList()
},
methods: {
getList(params){
//我喜欢的
//分页查询
queryList(pageNo, pageSize) {
const params = {
page: pageNo,
rows: pageSize,
queryType:this.queryType
}
likeList(params).then(res =>{
this.userList = res.data.data
this.num = this.userList.length
......@@ -128,43 +145,29 @@ export default {
getTitle(){
if (this.type == '1'){
//我喜欢的
this.title = '我喜欢的' + '('+ this.num +')';
this.title = '我喜欢的' + '('+this.num+')';
} else if (this.type == '2'){
//喜欢我的
this.title = '喜欢我的' + '('+ this.num +')';
this.title = '喜欢我的'+ '('+this.num+')';
} else if (this.type == '3'){
//互相喜欢
this.title = '互相喜欢' + '('+ this.num +')';
this.title = '互相喜欢'+ '('+this.num+')';
}
},
//获取用户列表数据
getUserList(){
if (this.type == '1'){
//我喜欢的
const params = {
page:this.queryParam.page,
rows:this.queryParam.rows,
queryType: '1'
}
this.getList(params)
this.queryType = '1'
} else if(this.type == '2') {
//喜欢我的
const params = {
page:this.queryParam.page,
rows:this.queryParam.rows,
queryType: '2'
}
this.getList(params)
this.queryType = '2'
} else if(this.type == '3') {
//互相喜欢的
const params = {
page:this.queryParam.page,
rows:this.queryParam.rows,
queryType: '3'
}
this.getList(params)
this.queryType = '3'
}
},
//取消关注
deleteLike(id){
//是否确认
uni.showModal({
......@@ -193,6 +196,7 @@ export default {
url: '/pagesUser/userInfo?memberId='+item.businessId
})
},
//返回按钮
backbar() {
uni.navigateBack({
delta: 1, //返回层数，2则上上页
......@@ -205,7 +209,7 @@ export default {
<style lang="scss" scoped>
.recommendation {
background-color: #F4F5F9;
position: relative;
position: absolute;
padding: 0 34rpx;
.nodatacard{
height: 100vh;
......
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