dl_uniapp/pages/mine/member/member-index.vue
2025-04-14 11:49:35 +08:00

327 lines
7.3 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="auth-choose-box">
<navigation-bar-vue title="通告主详情" style="width: 100%;" background-color="#ffffff"
title-color="#000000"></navigation-bar-vue>
<view class="choose-detail">
<view class="people-info-box">
<view class="image-box">
<image src="@/static/images/profile.jpg" mode="aspectFit"></image>
</view>
<view class="people-name-box">
<view class="name-box">
<view class="name-dom">资深PR</view>
<view class="fans-dom">61关注</view>
</view>
<view class="renzheng-dom">
<image src="@/static/mine/auth/renzhen.png" mode="aspectFit"></image>
认证代运营公司
</view>
</view>
<view class="opt-box">
<view class="lahei">拉黑</view>
<view class="guanzhu">关注</view>
</view>
</view>
<view class="bozhu-type-box">
<view class="item-dom">好物</view>
<view class="item-dom">颜值</view>
</view>
<view class="pingjia-box">
<view class="pingjia-content">
<view class="top-title">
<image src="@/static/mine/auth/pingjia.png" mode="aspectFit"></image>
合作博主评价
</view>
<view class="item-box">
<view class="item-dom">定人快(<text>1</text>)</view>
<view class="item-dom">审稿快(<text>2</text>)</view>
<view class="item-dom">审稿快(<text>2</text>)</view>
<view class="item-dom">审稿快(<text>2</text>)</view>
<view class="item-dom">审稿快(<text>2</text>)</view>
</view>
</view>
</view>
<view class="dl-title">
<image src="@/static/mine/auth/dian.png" mode="aspectFit"></image>
<text>进行中的通告(<text>14</text>)</text>
</view>
<view class="data-list-box">
<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="onReachBottomCus" refresher-enabled
@refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered">
<notice-item v-if="dataList.length>0" :dataList="dataList" @goDetail="goDetail()"></notice-item>
<view style="text-align: center" v-if="dataList.length==0">
<image class="" src="@/static/images/nothing.png"></image>
</view>
</scroll-view>
</view>
</view>
</view>
</template>
<script>
import {
toast
} from '@/utils/common.js'
import noticeItem from '@/pages/components/notice-item.vue'
import navigationBarVue from '@/components/navigation/navigationBar.vue';
export default {
components: {
navigationBarVue,
noticeItem
},
data() {
return {
dataList: ['', ''],
queryParams: {
pageNum: 1,
pageSize: 10
},
total: 0,
//下来刷新状态
isTriggered: false
}
},
methods: {
/**
* 上滑加载数据
*/
onReachBottomCus() {
//判断 如果页码*页容量大于等于总条数,提示该页数据加载完毕
if (this.queryParams.pageNum * this.queryParams.pageSize >= this.total) {
toast("没有更多数据了")
return
}
//页码+1,调用获取数据的方法获取第二页数据
this.queryParams.pageNum++
},
/**
* 下拉刷新数据
*/
onRefresherrefresh() {
this.isTriggered = true
this.queryParams.pageNum = 1
this.total = 0
},
}
}
</script>
<style lang="scss">
.auth-choose-box {
padding-top: calc(90rpx + var(--status-bar-height));
border-top: 1rpx solid #F4F4F4;
background-color: white;
width: 100%;
color: #363636;
font-size: 30rpx;
height: 100%;
display: flex;
flex-direction: column;
align-items: self-start;
justify-content: center;
position: relative;
.choose-detail {
border-top: 1rpx solid #F4F4F4;
width: 100%;
background-color: #F2F2F2;
border-radius: 20rpx;
display: flex;
flex-direction: column;
align-items: self-start;
justify-content: start;
position: relative;
.people-info-box {
width: 100%;
padding: 30rpx;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
.image-box {
display: flex;
align-items: center;
justify-content: center;
image {
border-radius: 50%;
width: 100rpx;
height: 100rpx;
}
}
.people-name-box {
flex: 1;
display: flex;
flex-direction: column;
align-items: self-start;
justify-content: center;
padding: 0 15rpx;
.name-box {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
.name-dom {
font-size: 34rpx;
font-weight: bold;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 20rpx;
}
.fans-dom {
font-size: 22rpx;
padding: 5rpx 15rpx;
border: 1rpx solid #FC1F3E;
color: #FC1F3E;
border-radius: 25rpx 25rpx 25rpx 0;
}
}
.renzheng-dom {
padding: 8rpx 0;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
image {
width: 30rpx;
height: 30rpx;
margin-right: 10rpx;
}
}
}
.opt-box {
width: 230rpx;
font-size: 25rpx;
display: flex;
align-items: center;
justify-content: flex-end;
.lahei {
display: flex;
align-items: center;
justify-content: center;
border-radius: 20rpx;
color: white;
background-color: #929292;
padding: 5rpx 20rpx;
}
.guanzhu {
display: flex;
align-items: center;
justify-content: center;
margin-left: 20rpx;
background-color: #FC1F3E;
color: white;
border-radius: 20rpx;
padding: 5rpx 20rpx;
}
}
}
.bozhu-type-box {
width: 100%;
background-color: white;
border-bottom: 1rpx solid #F4F4F4;
.item-dom {
display: flex;
align-items: center;
justify-content: center;
float: left;
padding: 4rpx 25rpx;
background-color: #F4F4F4;
color: #363636;
margin: 0 0 30rpx 30rpx;
border-radius: 30rpx;
}
}
.pingjia-box {
width: 100%;
background-color: white;
padding: 30rpx;
.pingjia-content {
width: 100%;
background-color: #FAFAFA;
border-radius: 30rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.top-title {
width: 100%;
padding: 30rpx 30rpx 20rpx 30rpx;
display: flex;
align-items: center;
justify-content: start;
image {
width: 50rpx;
height: 50rpx;
margin-right: 10rpx;
font-weight: bold;
}
}
.item-box {
width: 100%;
.item-dom {
float: left;
padding: 5rpx 25rpx;
color: #363636;
border-radius: 30rpx;
border: 1rpx solid #E5E5E5;
margin: 0 0 15rpx 30rpx;
}
}
}
}
.dl-title {
padding: 20rpx 30rpx;
width: 100%;
display: flex;
align-items: center;
justify-content: start;
margin-bottom: 20rpx;
image {
width: 30rpx;
height: 30rpx;
}
text {
margin-left: 10rpx;
font-weight: bold;
font-size: 32rpx;
}
}
.data-list-box {
padding: 5rpx 30rpx 20rpx 30rpx;
display: flex;
flex-direction: column;
align-items: self-start;
justify-content: start;
width: 100%;
height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 400rpx);
}
}
}
</style>