|
@@ -529,8 +529,12 @@ export default {
|
|
|
var y = touch.clientY - rect.top
|
|
var y = touch.clientY - rect.top
|
|
|
var node = self.getTouchNode(x, y)
|
|
var node = self.getTouchNode(x, y)
|
|
|
if (node) {
|
|
if (node) {
|
|
|
- self.dragging = { node: node, offsetX: x - node.x, offsetY: y - node.y }
|
|
|
|
|
- self.dragStartPos = { x: x, y: y }
|
|
|
|
|
|
|
+ if (node.isSelf) {
|
|
|
|
|
+ self.touchingSelf = true
|
|
|
|
|
+ } else {
|
|
|
|
|
+ self.dragging = { node: node, offsetX: x - node.x, offsetY: y - node.y }
|
|
|
|
|
+ self.dragStartPos = { x: x, y: y }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
@@ -558,6 +562,18 @@ export default {
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
onTouchEnd: function(e) {
|
|
onTouchEnd: function(e) {
|
|
|
|
|
+ var wasTouchingSelf = this.touchingSelf
|
|
|
|
|
+ this.touchingSelf = false
|
|
|
|
|
+ if (wasTouchingSelf) {
|
|
|
|
|
+ // 触摸的是中心"我"节点 → 跳转添加成员页面
|
|
|
|
|
+ if (this.interactive) {
|
|
|
|
|
+ this.$emit('addMemberTap')
|
|
|
|
|
+ this.goAddMember()
|
|
|
|
|
+ }
|
|
|
|
|
+ this.dragging = null
|
|
|
|
|
+ this.dragStartPos = null
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
if (!this.dragging) return
|
|
if (!this.dragging) return
|
|
|
var wasDragged = this.dragStartPos && (
|
|
var wasDragged = this.dragStartPos && (
|
|
|
Math.abs(this.dragging.node.x - this.dragStartPos.x) > 5 ||
|
|
Math.abs(this.dragging.node.x - this.dragStartPos.x) > 5 ||
|
|
@@ -595,6 +611,20 @@ export default {
|
|
|
return (typeof val !== 'undefined' && val !== null) ? val : 75
|
|
return (typeof val !== 'undefined' && val !== null) ? val : 75
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
|
|
+ // 跳转到添加成员页面
|
|
|
|
|
+ goAddMember: function() {
|
|
|
|
|
+ uni.navigateTo({
|
|
|
|
|
+ url: '/pages/family/add-member'
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ // 点击右上角小齿轮 → 跳转成员管理页
|
|
|
|
|
+ onManageTap: function() {
|
|
|
|
|
+ uni.navigateTo({
|
|
|
|
|
+ url: '/pages/profile/family-members'
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
updateCanvasSize: function() {
|
|
updateCanvasSize: function() {
|
|
|
var self = this
|
|
var self = this
|
|
|
var query = uni.createSelectorQuery().in(this)
|
|
var query = uni.createSelectorQuery().in(this)
|
|
@@ -699,7 +729,7 @@ export default {
|
|
|
.family-graph-wrapper {
|
|
.family-graph-wrapper {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- height: 280px;
|
|
|
|
|
|
|
+ min-height: 200rpx;
|
|
|
margin: 10rpx 0;
|
|
margin: 10rpx 0;
|
|
|
background: #FFFFFF;
|
|
background: #FFFFFF;
|
|
|
border-radius: 24rpx;
|
|
border-radius: 24rpx;
|
|
@@ -711,6 +741,60 @@ export default {
|
|
|
left: 0;
|
|
left: 0;
|
|
|
z-index: 1;
|
|
z-index: 1;
|
|
|
}
|
|
}
|
|
|
|
|
+/* PC 端悬停检测覆盖层 */
|
|
|
|
|
+.hover-layer {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ z-index: 2;
|
|
|
|
|
+ background: transparent;
|
|
|
|
|
+ pointer-events: auto;
|
|
|
|
|
+}
|
|
|
|
|
+/* 右上角小齿轮 */
|
|
|
|
|
+.gear-icon {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 12rpx;
|
|
|
|
|
+ right: 12rpx;
|
|
|
|
|
+ z-index: 10;
|
|
|
|
|
+ width: 56rpx;
|
|
|
|
|
+ height: 56rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ background: rgba(255, 255, 255, 0.9);
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
|
|
+}
|
|
|
|
|
+.gear-text {
|
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
|
+ color: #94A3B8;
|
|
|
|
|
+}
|
|
|
|
|
+/* + 添加成员提示 */
|
|
|
|
|
+.add-hint {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ z-index: 5;
|
|
|
|
|
+ width: 40rpx;
|
|
|
|
|
+ height: 40rpx;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ background: #10B981;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ opacity: 0;
|
|
|
|
|
+ transform: scale(0.5);
|
|
|
|
|
+ transition: opacity 0.15s, transform 0.15s;
|
|
|
|
|
+ pointer-events: none;
|
|
|
|
|
+}
|
|
|
|
|
+.add-hint.add-hint-visible {
|
|
|
|
|
+ opacity: 1;
|
|
|
|
|
+ transform: scale(1);
|
|
|
|
|
+}
|
|
|
|
|
+.add-hint-text {
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ line-height: 1;
|
|
|
|
|
+}
|
|
|
.family-graph-empty {
|
|
.family-graph-empty {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|