|
|
@@ -1,5 +1,12 @@
|
|
|
<template>
|
|
|
- <view class="family-member-strip" v-if="members && members.length > 0">
|
|
|
+ <view class="family-member-strip" v-if="(members && members.length > 0) || isAdmin">
|
|
|
+ <!-- 待审批加入请求徽章 -->
|
|
|
+ <view class="strip-toolbar" v-if="isAdmin">
|
|
|
+ <view class="pending-badge" v-if="pendingCount > 0" @tap="openRequests">
|
|
|
+ <text class="badge-icon">🔔</text>
|
|
|
+ <text class="badge-count">{{ pendingCount }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
<scroll-view
|
|
|
class="strip-scroll"
|
|
|
scroll-x
|
|
|
@@ -33,46 +40,69 @@
|
|
|
</view>
|
|
|
|
|
|
<!-- 长按操作菜单 -->
|
|
|
- <view class="action-overlay" v-if="showActionMenu" @click="closeMenu"></view>
|
|
|
+ <view class="action-overlay" v-if="showActionMenu" @tap="closeMenu"></view>
|
|
|
<view class="action-sheet" v-if="showActionMenu">
|
|
|
<view class="action-header">
|
|
|
<text class="action-title">{{ actionMember ? actionMember.nickname : '' }}</text>
|
|
|
<text class="action-relation">{{ actionMember ? (actionMember.relationship || actionMember.relativeLabel || '') : '' }}</text>
|
|
|
</view>
|
|
|
- <view class="action-item" @click="switchToMember" v-if="canSwitch">
|
|
|
+ <view class="action-item" @tap="switchToMember" v-if="canSwitch">
|
|
|
<text class="action-item-icon">🔄</text>
|
|
|
<text class="action-item-text">切换到该成员视角</text>
|
|
|
</view>
|
|
|
- <view class="action-item" @click="editMember" v-if="canEdit">
|
|
|
+ <view class="action-item" @tap="editMember" v-if="canEdit">
|
|
|
<text class="action-item-icon">✏️</text>
|
|
|
<text class="action-item-text">编辑资料</text>
|
|
|
</view>
|
|
|
- <view class="action-item" @click="questionnaireMember">
|
|
|
+ <view class="action-item" @tap="questionnaireMember">
|
|
|
<text class="action-item-icon">📋</text>
|
|
|
<text class="action-item-text">关系问卷</text>
|
|
|
</view>
|
|
|
- <view class="action-item" @click="interactionMember">
|
|
|
+ <view class="action-item" @tap="interactionMember">
|
|
|
<text class="action-item-icon">💬</text>
|
|
|
<text class="action-item-text">记录互动</text>
|
|
|
</view>
|
|
|
- <view class="action-item" @click="callMember" v-if="actionMember && actionMember.phone">
|
|
|
+ <view class="action-item" @tap="callMember" v-if="actionMember && actionMember.phone">
|
|
|
<text class="action-item-icon">📞</text>
|
|
|
<text class="action-item-text">拨打电话</text>
|
|
|
</view>
|
|
|
- <view class="action-item action-danger" @click="removeMember" v-if="canRemove">
|
|
|
+ <view class="action-item action-danger" @tap="removeMember" v-if="canRemove">
|
|
|
<text class="action-item-icon">🗑️</text>
|
|
|
<text class="action-item-text">移除成员</text>
|
|
|
</view>
|
|
|
- <view class="action-item action-cancel" @click="closeMenu">
|
|
|
+ <view class="action-item action-cancel" @tap="closeMenu">
|
|
|
<text class="action-item-text">取消</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
+ <!-- 待审批请求弹窗 -->
|
|
|
+ <view class="request-overlay" v-if="showRequests" @tap="closeRequests"></view>
|
|
|
+ <view class="request-sheet" v-if="showRequests">
|
|
|
+ <view class="sheet-header">
|
|
|
+ <text class="sheet-title">待处理加入申请({{ pendingRequests.length }})</text>
|
|
|
+ <text class="sheet-close" @tap="closeRequests">×</text>
|
|
|
+ </view>
|
|
|
+ <view v-if="pendingRequests.length === 0" class="empty-requests">
|
|
|
+ <text>暂无待处理的请求</text>
|
|
|
+ </view>
|
|
|
+ <view class="request-item" v-for="req in pendingRequests" :key="req.id">
|
|
|
+ <image class="req-avatar" src="/static/default-avatar.png" mode="aspectFill"></image>
|
|
|
+ <view class="req-info">
|
|
|
+ <text class="req-name">{{ req.requesterNickname }}</text>
|
|
|
+ <text class="req-time">{{ req.createdAt }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="req-actions">
|
|
|
+ <button class="req-btn btn-approve" @tap="approveRequest(req.id)">通过</button>
|
|
|
+ <button class="req-btn btn-reject" @tap="rejectRequest(req.id)">拒绝</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import FamilyMemberCard from '@/components/FamilyMemberCard'
|
|
|
-import { kickFamilyMemberById } from '@/utils/api'
|
|
|
+import { kickFamilyMemberById, getPendingFamilyRequests, approveFamilyJoinRequest, rejectFamilyJoinRequest } from '@/utils/api'
|
|
|
|
|
|
export default {
|
|
|
components: { FamilyMemberCard },
|
|
|
@@ -80,14 +110,21 @@ export default {
|
|
|
members: { type: Array, default: function() { return [] } },
|
|
|
selectedMemberId: { type: Number, default: null },
|
|
|
energyMap: { type: Object, default: function() { return {} } },
|
|
|
- isParent: { type: Boolean, default: false }
|
|
|
+ isParent: { type: Boolean, default: false },
|
|
|
+ isAdmin: { type: Boolean, default: false }
|
|
|
},
|
|
|
data: function() {
|
|
|
return {
|
|
|
showActionMenu: false,
|
|
|
- actionMember: null
|
|
|
+ actionMember: null,
|
|
|
+ pendingCount: 0,
|
|
|
+ pendingRequests: [],
|
|
|
+ showRequests: false
|
|
|
}
|
|
|
},
|
|
|
+ mounted: function() {
|
|
|
+ this.loadPendingRequests()
|
|
|
+ },
|
|
|
computed: {
|
|
|
canSwitch: function() {
|
|
|
// 仅家庭成员记录(source=family_member)且已关联账号时才能切换视角;
|
|
|
@@ -183,6 +220,67 @@ export default {
|
|
|
getMemberEnergy: function(member) {
|
|
|
if (!member || !this.energyMap) return null
|
|
|
return this.energyMap[member.id] || this.energyMap[member.memberId] || null
|
|
|
+ },
|
|
|
+ loadPendingRequests: function() {
|
|
|
+ var self = this
|
|
|
+ if (!this.isAdmin) return
|
|
|
+ getPendingFamilyRequests()
|
|
|
+ .then(function(res) {
|
|
|
+ if (res.code === 200) {
|
|
|
+ var data = res.data || []
|
|
|
+ self.pendingCount = data.length
|
|
|
+ self.pendingRequests = data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(function() {
|
|
|
+ // 静默失败
|
|
|
+ })
|
|
|
+ },
|
|
|
+ openRequests: function() {
|
|
|
+ this.showRequests = true
|
|
|
+ },
|
|
|
+ closeRequests: function() {
|
|
|
+ this.showRequests = false
|
|
|
+ },
|
|
|
+ approveRequest: function(requestId) {
|
|
|
+ var self = this
|
|
|
+ uni.showModal({
|
|
|
+ title: '确认通过',
|
|
|
+ content: '确认通过该成员的加入申请?',
|
|
|
+ success: function(modalRes) {
|
|
|
+ if (modalRes.confirm) {
|
|
|
+ approveFamilyJoinRequest(requestId)
|
|
|
+ .then(function() {
|
|
|
+ uni.showToast({ title: '已通过', icon: 'success' })
|
|
|
+ self.loadPendingRequests()
|
|
|
+ self.closeRequests()
|
|
|
+ })
|
|
|
+ .catch(function(err) {
|
|
|
+ uni.showToast({ title: err.message || '操作失败', icon: 'none' })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ rejectRequest: function(requestId) {
|
|
|
+ var self = this
|
|
|
+ uni.showModal({
|
|
|
+ title: '确认拒绝',
|
|
|
+ content: '确认拒绝该成员的加入申请?',
|
|
|
+ success: function(modalRes) {
|
|
|
+ if (modalRes.confirm) {
|
|
|
+ rejectFamilyJoinRequest(requestId)
|
|
|
+ .then(function() {
|
|
|
+ uni.showToast({ title: '已拒绝', icon: 'success' })
|
|
|
+ self.loadPendingRequests()
|
|
|
+ self.closeRequests()
|
|
|
+ })
|
|
|
+ .catch(function(err) {
|
|
|
+ uni.showToast({ title: err.message || '操作失败', icon: 'none' })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -275,4 +373,139 @@ export default {
|
|
|
.action-cancel .action-item-text {
|
|
|
color: #6B7280;
|
|
|
}
|
|
|
+
|
|
|
+/* 待审批徽章 */
|
|
|
+.strip-toolbar {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ padding: 8rpx 30rpx 4rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.pending-badge {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 8rpx 16rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border: 2rpx solid #EF4444;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ box-shadow: 0 2rpx 8rpx rgba(239, 68, 68, 0.15);
|
|
|
+}
|
|
|
+
|
|
|
+.badge-icon {
|
|
|
+ font-size: 28rpx;
|
|
|
+ margin-right: 6rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.badge-count {
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #EF4444;
|
|
|
+}
|
|
|
+
|
|
|
+/* 待审批请求弹窗 */
|
|
|
+.request-overlay {
|
|
|
+ position: fixed;
|
|
|
+ top: 0; left: 0; right: 0; bottom: 0;
|
|
|
+ background: rgba(0,0,0,0.4);
|
|
|
+ z-index: 1500;
|
|
|
+}
|
|
|
+
|
|
|
+.request-sheet {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 24rpx 24rpx 0 0;
|
|
|
+ z-index: 1501;
|
|
|
+ max-height: 70vh;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
|
|
+}
|
|
|
+
|
|
|
+.sheet-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 16rpx 30rpx 16rpx;
|
|
|
+ border-bottom: 1rpx solid #F3F4F6;
|
|
|
+}
|
|
|
+
|
|
|
+.sheet-title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #1F2937;
|
|
|
+}
|
|
|
+
|
|
|
+.sheet-close {
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: #9CA3AF;
|
|
|
+ padding: 8rpx;
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.empty-requests {
|
|
|
+ text-align: center;
|
|
|
+ padding: 60rpx 0;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #9CA3AF;
|
|
|
+}
|
|
|
+
|
|
|
+.request-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+ border-bottom: 1rpx solid #F9FAFB;
|
|
|
+}
|
|
|
+
|
|
|
+.req-avatar {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.req-info {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.req-name {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #1F2937;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.req-time {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #9CA3AF;
|
|
|
+ display: block;
|
|
|
+ margin-top: 4rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.req-actions {
|
|
|
+ display: flex;
|
|
|
+ gap: 12rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.req-btn {
|
|
|
+ padding: 12rpx 24rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-approve {
|
|
|
+ background: #16A34A;
|
|
|
+ color: #FFFFFF;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-reject {
|
|
|
+ background: #EF4444;
|
|
|
+ color: #FFFFFF;
|
|
|
+}
|
|
|
</style>
|