309 lines
6.6 KiB
Vue
309 lines
6.6 KiB
Vue
<template>
|
||
<view class="container">
|
||
<custom-navbar title="邀请记录" :leftImg="'/static/images/back.png'" :showUser="true" backgroundColor="#fff"
|
||
titleColor="#333333" borderBottom="none">
|
||
</custom-navbar>
|
||
<!-- 状态标签 -->
|
||
<view class="tab-container">
|
||
<view v-for="(tab, index) in tabs" :key="index"
|
||
:class="['tab-item', { active: queryData.state === tab.id }]" @click="switchTab(index, tab.id)">
|
||
{{ tab.text }}
|
||
</view>
|
||
</view>
|
||
<CommonList ref="groupRef" apiUrl="/sj/sjinvitelist"
|
||
:listScrollHeight="`calc(100vh - ${statusBarHeight + 264}rpx)`">
|
||
<template #listData="{ list }">
|
||
<!-- 列表容器 -->
|
||
<view class="invite-list">
|
||
<!-- 列表项：循环渲染接口数据 -->
|
||
<view class="invite-item" v-for="(item, idx) in list" :key="item.id" v-if="item.syr">
|
||
<view class="stateText" :class="{stateText2: item.state == '拒绝'}">
|
||
{{ item.state }}
|
||
</view>
|
||
|
||
<!-- <view class="state-tag" :class="{
|
||
'tag-agree': item.state === '同意',
|
||
'tag-refuse': item.state === '拒绝',
|
||
'tag-wait': item.state === '待答复'
|
||
}">
|
||
{{ item.state }}
|
||
</view> -->
|
||
|
||
<view class="flex-row-center item-card">
|
||
<!-- 头像区域 -->
|
||
<image class="item-avatar" :src="item.syr.head_photo" mode="aspectFill"></image>
|
||
<!-- 信息区域 -->
|
||
<view class="item-info">
|
||
<!-- 姓名 + 状态标签 -->
|
||
<view class="info-header">
|
||
<text class="info-name">{{ item.syr.name }}</text>
|
||
|
||
</view>
|
||
|
||
<!-- 时间信息 -->
|
||
<view class="info-time mt_6">邀请时间: {{ item.create_time }}</view>
|
||
<!-- 绑定/拒绝时间：根据状态显示 -->
|
||
<view class="info-time" v-if="item.state == '同意'">
|
||
绑定时间: {{ item.update_time || item.create_time }}
|
||
</view>
|
||
<view class="info-time" v-if="item.state == '拒绝'">
|
||
拒绝时间: {{ item.update_time }}
|
||
</view>
|
||
|
||
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<!-- 拒绝原因：仅“已拒绝”状态显示 -->
|
||
<view class="info-reason" v-if="item.state == '拒绝' && item.back_text">
|
||
<text class="reason-label">拒绝原因:</text>
|
||
<text class="reason-content">{{ item.back_text }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<!-- 空数据状态 -->
|
||
<template #empty>
|
||
<noData></noData>
|
||
</template>
|
||
</CommonList>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from "@/utils/request";
|
||
import searchBox from "./components/search-box.vue";
|
||
import CommonList from "@/components/common/CommonList.vue";
|
||
export default {
|
||
name: "addStaff",
|
||
components: {
|
||
searchBox,
|
||
CommonList
|
||
},
|
||
data() {
|
||
return {
|
||
statusBarHeight: 0,
|
||
queryData: {
|
||
title: "",
|
||
state: "",
|
||
},
|
||
tabs: [{
|
||
id: "",
|
||
text: "全部",
|
||
},
|
||
{
|
||
id: 1,
|
||
text: "待答复",
|
||
},
|
||
{
|
||
id: 2,
|
||
text: "已同意",
|
||
},
|
||
{
|
||
id: 3,
|
||
text: "已拒绝",
|
||
}
|
||
],
|
||
};
|
||
},
|
||
async onLoad(options) {
|
||
let type = 3;
|
||
let result = await request.post("/user/getuser", {
|
||
type,
|
||
});
|
||
this.userInfo = result.data;
|
||
this.queryData.sjid = this.userInfo.id
|
||
this.statusBarHeight = this.getRpxStatusBarHeight();
|
||
this.$nextTick(() => {
|
||
this.search();
|
||
});
|
||
},
|
||
methods: {
|
||
switchTab(index, id) {
|
||
this.queryData.state = id;
|
||
this.search();
|
||
},
|
||
search() {
|
||
this.$refs.groupRef.manualRefresh(this.queryData);
|
||
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less">
|
||
/* 标签栏样式 */
|
||
.tab-container {
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
align-items: center;
|
||
// justify-content: space-between;
|
||
column-gap: 48rpx;
|
||
background-color: #fff;
|
||
padding: 30rpx 0rpx 20rpx 30rpx;
|
||
box-sizing: border-box;
|
||
-webkit-overflow-scrolling: touch;
|
||
overflow-x: scroll;
|
||
}
|
||
|
||
.tab-item {
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
padding: 16rpx 0;
|
||
white-space: nowrap;
|
||
/* 核心：禁止自动换行 */
|
||
position: relative;
|
||
}
|
||
|
||
.tab-item.active {
|
||
color: #E8101E;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.tab-item.active::after {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 32rpx;
|
||
height: 6rpx;
|
||
background-color: #E8101E;
|
||
border-radius: 3rpx;
|
||
}
|
||
|
||
/* 列表容器 */
|
||
.invite-list {
|
||
/* 列表项 */
|
||
.invite-item {
|
||
margin: 20rpx;
|
||
padding: 20rpx;
|
||
border-radius: 20rpx;
|
||
background: #fff;
|
||
position: relative;
|
||
|
||
|
||
|
||
/* 状态标签通用样式 */
|
||
.stateText {
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #E8101E;
|
||
text-align: left;
|
||
font-style: normal;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
background-image: url("/static/images/icons/tabBj.png");
|
||
background-size: 100% auto;
|
||
background-position: center top;
|
||
background-repeat: no-repeat;
|
||
width: 128rpx;
|
||
height: 49rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.stateText2{
|
||
background-image: url("/static/images/icons/tabBj2.png");
|
||
color: #333;
|
||
}
|
||
|
||
.item-card{
|
||
|
||
/* 头像样式 */
|
||
.item-avatar {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 50%;
|
||
margin-right: 20rpx;
|
||
}
|
||
/* 信息区域 */
|
||
.item-info {
|
||
flex: 1;
|
||
|
||
/* 姓名+状态行 */
|
||
.info-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10rpx;
|
||
|
||
.info-name {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
|
||
}
|
||
|
||
/* 时间信息样式 */
|
||
.info-time {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
line-height: 33rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
|
||
/* 拒绝原因样式 */
|
||
.info-reason {
|
||
padding-top: 21rpx;
|
||
margin-top: 21rpx;
|
||
border-top: 1rpx solid #F1F1F1;
|
||
|
||
.reason-label {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #E8101E;
|
||
line-height: 33rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.reason-content {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
line-height: 33rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
.mt_6{
|
||
margin-bottom: 6rpx;
|
||
}
|
||
|
||
.common-list {
|
||
background: #f5f5f5 !important;
|
||
border-radius: 30rpx !important;
|
||
}
|
||
|
||
::v-deep .list-container {
|
||
padding: 0 !important;
|
||
}
|
||
|
||
::v-deep .list-scroll {
|
||
margin-top: 0 !important;
|
||
}
|
||
</style> |