第一次提交
This commit is contained in:
gxwebsoft
251
pages/zone/member/member.vue
Normal file
251
pages/zone/member/member.vue
Normal file
@@ -0,0 +1,251 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="user-list">
|
||||
<block v-for="(item,index) in list" :key="index">
|
||||
<view class="item" v-if="item.userInfo" @click="$push('sub_pages/member/detail/detail',{userId: item.userId})">
|
||||
<view class="has-house-num">
|
||||
南宁1套
|
||||
</view>
|
||||
<view class="content">
|
||||
喜欢极限运动，摩托、健身、旅游、看书等，事业单位正式工作，收入稳定，想找个聊得...
|
||||
</view>
|
||||
<view class="user-info">
|
||||
<view class="left">
|
||||
<view class="avatar">
|
||||
<u-avatar size="25" :src="item.userInfo.avatar"
|
||||
customStyle="margin-right:5px; border: 4rpx solid #ffffff;"></u-avatar>
|
||||
<view class="nickname">{{ item.userInfo.nickname }}</view>
|
||||
</view>
|
||||
<view class="desc">
|
||||
南宁 • 31岁 • 20w-30w
|
||||
</view>
|
||||
</view>
|
||||
<view class="follow-btn" @click.stop="onFollow">
|
||||
<image src="@/static/icon/follow.png" mode="widthFix"></image>
|
||||
<text>关注</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-color"></view>
|
||||
<image class="bg" :src="item.userBgImg" mode="aspectFill"></image>
|
||||
|
||||
</view>
|
||||
</block>
|
||||
<!-- <u-list @scrolltolower="scrolltolower">
|
||||
<view class="list">
|
||||
<u-list-item v-for="(item, index) in list" :key="index">
|
||||
<u-cell :title="`${item.userInfo.nickname}`" :label="`粉丝：${ item.id }`" isLink
|
||||
@click="navTo('/pages/member/detail/detail',{userId: item.userId})">
|
||||
<u-avatar slot="icon" size="50" :src="item.userInfo.avatar"
|
||||
customStyle="margin: -3px 5px -3px 0"></u-avatar>
|
||||
<view slot="right-icon" class="follow-btn" @click.stop="onFollow">
|
||||
<image src="@/static/icon/follow.png" mode="widthFix"></image>
|
||||
<text>关注</text>
|
||||
</view>
|
||||
</u-cell>
|
||||
</u-list-item>
|
||||
<u-empty
|
||||
v-if="list.length == 0"
|
||||
mode="search"
|
||||
icon="http://cdn.uviewui.com/uview/empty/car.png"
|
||||
>
|
||||
</u-empty>
|
||||
</view>
|
||||
</u-list> -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as UserProfileApi from '@/api/love-user-profile.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
page: 0,
|
||||
where: {},
|
||||
// 控制onShow事件是否刷新订单列表
|
||||
canReset: false,
|
||||
disabled: false
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
this.where = options
|
||||
this.onRefreshList()
|
||||
uni.setNavigationBarTitle({
|
||||
title: options.name
|
||||
})
|
||||
},
|
||||
onPullDownRefresh(){
|
||||
const app = this
|
||||
setTimeout(function() {
|
||||
uni.stopPullDownRefresh();
|
||||
app.onRefreshList()
|
||||
}, 500);
|
||||
},
|
||||
methods: {
|
||||
// 刷新会员列表
|
||||
onRefreshList() {
|
||||
const app = this
|
||||
app.where.page = app.page
|
||||
return new Promise((resolve, reject) => {
|
||||
UserProfileApi.pageUserProfile(app.where)
|
||||
.then(result => {
|
||||
const list = result.data.list
|
||||
// 合并新数据
|
||||
app.list = app.list.concat(list)
|
||||
if(result.data.count > app.list.length){
|
||||
app.canReset = true
|
||||
}else{
|
||||
app.canReset = false
|
||||
}
|
||||
// 获取第一张图片作为背景图片
|
||||
list.map((d, i) => {
|
||||
if(!app.list[i].userBgImg){
|
||||
const imgs = JSON.parse(d.images)
|
||||
console.log("imgs: ",imgs);
|
||||
imgs.map(pic => {
|
||||
console.log("pic: ",pic);
|
||||
if (pic.type == 'image') {
|
||||
app.list[i].userBgImg = pic.url
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
resolve(list)
|
||||
})
|
||||
})
|
||||
},
|
||||
scrolltolower(e){
|
||||
console.log("e: ",e);
|
||||
},
|
||||
navTo(url,userId){
|
||||
this.$push(url,userId)
|
||||
},
|
||||
onFollow(e){
|
||||
console.log("e11: ",e);
|
||||
},
|
||||
onSearch(){
|
||||
this.list = []
|
||||
this.where.page = 1
|
||||
this.onRefreshList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
padding: 0 20rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
display: flex;
|
||||
height: 64rpx;
|
||||
}
|
||||
.user-list{
|
||||
.item{
|
||||
margin: 40rpx auto;
|
||||
width: 660rpx;
|
||||
min-height: 500rpx;
|
||||
background-color: #f3f3f3;
|
||||
border-radius: 15rpx;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
/* 背景叠加 */
|
||||
.bg-color {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
width: 660rpx;
|
||||
height: 365rpx;
|
||||
background-color: #000000;
|
||||
opacity: .2;
|
||||
filter: Alpha(opacity=20);
|
||||
}
|
||||
.bg{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
width: 660rpx;
|
||||
}
|
||||
.has-house-num{
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
left: 20rpx;
|
||||
z-index: 3;
|
||||
height: 43rpx;
|
||||
line-height: 43rpx;
|
||||
padding: 4rpx 20rpx;
|
||||
color: #ffffff;
|
||||
font-size: 26rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 40rpx;
|
||||
background: linear-gradient(#47076b, #8d1a50);
|
||||
}
|
||||
.content{
|
||||
width: 640rpx;
|
||||
position: absolute;
|
||||
top: 250rpx;
|
||||
color: #ffffff;
|
||||
font-size: 28rpx;
|
||||
padding: 20rpx;
|
||||
z-index: 2;
|
||||
}
|
||||
.user-info{
|
||||
width: 660rpx;
|
||||
height: 100rpx;
|
||||
padding: 20rpx;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
background-color: #1b0121;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.left{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.avatar{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.nickname{
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
.desc{
|
||||
color: #999999;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.follow-btn {
|
||||
width: 85rpx;
|
||||
height: 43rpx;
|
||||
padding: 4rpx 20rpx;
|
||||
color: #ffffff;
|
||||
font-size: 26rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 40rpx;
|
||||
background: linear-gradient(#47076b, #8d1a50);
|
||||
|
||||
image {
|
||||
width: 24rpx;
|
||||
height: 36rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user