|
@@ -29,16 +29,17 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
+<!--
|
|
|
+ v-show="props.tipsButton === 1" -->
|
|
|
<view
|
|
|
class="mark-button"
|
|
|
- v-if="props.tipsButton === 1"
|
|
|
:style="{
|
|
|
width: 357 * rate + 'rpx',
|
|
|
height: 466 * rate + 'rpx',
|
|
|
top: 102 * rate + 'rpx',
|
|
|
left: '50%',
|
|
|
- transform: 'translateX(-50%)'
|
|
|
+ transform: 'translateX(-50%)',
|
|
|
+
|
|
|
}"
|
|
|
>
|
|
|
<view
|
|
@@ -51,7 +52,8 @@
|
|
|
height: 46 * rate + 'rpx',
|
|
|
backgroundColor: colorMap.get(item.color),
|
|
|
scale: 0.7,
|
|
|
- borderRadius: '50%'
|
|
|
+ borderRadius: '50%',
|
|
|
+ opacity: props.tipsButton === 1 ? 1 : 0
|
|
|
}"
|
|
|
/>
|
|
|
</view>
|
|
@@ -104,7 +106,7 @@
|
|
|
|
|
|
|
|
|
<script setup lang="ts" name="luojigou-board" >
|
|
|
-import { defineProps, reactive, ref, computed, getCurrentInstance, defineEmits } from 'vue'
|
|
|
+import { defineProps, reactive, ref, computed, getCurrentInstance, defineEmits,watch } from 'vue'
|
|
|
import { useStaticImg, useSchedulerOnce, useQueryElInfo, useAdaptationIpadAndPhone } from '@/hooks/index'
|
|
|
import type { CardModeEnum } from '@/enum/constant';
|
|
|
import { useCalcQuantityStore } from '@/store/index';
|
|
@@ -167,8 +169,17 @@ const ansRef = ref<UniApp.NodeInfo>()
|
|
|
const quesRef = ref<UniApp.NodeInfo>()
|
|
|
const movableAreaRef = ref<UniApp.NodeInfo>()
|
|
|
|
|
|
-useQueryElInfo('#quesRef', (nodeInfo) => quesRef.value = nodeInfo as UniApp.NodeInfo, getCurrentInstance()!)
|
|
|
-useQueryElInfo('#ansRef', (nodeInfo) => ansRef.value = nodeInfo as UniApp.NodeInfo, getCurrentInstance()!)
|
|
|
+useQueryElInfo('#quesRef', (nodeInfo) => {
|
|
|
+ console.log('#quesRef:', nodeInfo);
|
|
|
+
|
|
|
+ quesRef.value = nodeInfo as UniApp.NodeInfo
|
|
|
+
|
|
|
+}, getCurrentInstance()!)
|
|
|
+useQueryElInfo('#ansRef', (nodeInfo) => {
|
|
|
+ console.log('ansRef.value:',nodeInfo );
|
|
|
+
|
|
|
+ ansRef.value = nodeInfo as UniApp.NodeInfo
|
|
|
+}, getCurrentInstance()!)
|
|
|
useQueryElInfo('#movableAreaRef', (nodeInfo) => movableAreaRef.value = nodeInfo as UniApp.NodeInfo, getCurrentInstance()!)
|
|
|
|
|
|
const baseRatio = adaptatio
|
|
@@ -179,6 +190,9 @@ const { windowWidth, windowHeight } = uni.getSystemInfoSync()
|
|
|
|
|
|
const unit = windowWidth / windowHeight > 0.6 ? 1 : 0.5
|
|
|
|
|
|
+// 几钮模板
|
|
|
+const copies = props.cardType === 0 ? 4 : 6
|
|
|
+
|
|
|
const ansItemHeight = computed(() => Math.floor(ansRef.value?.height! / copies))
|
|
|
|
|
|
const TPos = (x: number, y: number) => {
|
|
@@ -187,10 +201,17 @@ const TPos = (x: number, y: number) => {
|
|
|
|
|
|
}
|
|
|
|
|
|
-const getButtonIndex = (_y: number) => Math.floor(_y / ansItemHeight.value)
|
|
|
+const getButtonIndex = (_y: number) => {
|
|
|
+ console.log(_y, ansItemHeight.value);
|
|
|
+
|
|
|
+ return Math.floor(_y / ansItemHeight.value)
|
|
|
+}
|
|
|
|
|
|
const getButtonPosByIndex = (index: number) => {
|
|
|
|
|
|
+ console.log("quesRef.value:", quesRef.value?.width);
|
|
|
+ console.log("ansRef.value:", ansRef.value.width);
|
|
|
+
|
|
|
const x = ansRef.value?.width! + quesRef.value?.width!
|
|
|
|
|
|
const y = ansItemHeight.value * index + ansItemHeight.value / 2 - 23 * rate * unit
|
|
@@ -199,8 +220,7 @@ const getButtonPosByIndex = (index: number) => {
|
|
|
}
|
|
|
|
|
|
|
|
|
-// 几钮模板
|
|
|
-const copies = props.cardType === 0 ? 4 : 6
|
|
|
+
|
|
|
|
|
|
const buttonWidth = 46 * windowWidth / 375 * baseRatio
|
|
|
|
|
@@ -252,13 +272,17 @@ const touchend = (ev: TouchEvent, item: Buttons) => {
|
|
|
|
|
|
const { x: itemX, y: itemY } = TPos(ev.changedTouches[0].pageX, ev.changedTouches[0].pageY)
|
|
|
|
|
|
+ console.log("itemY:", itemY);
|
|
|
+
|
|
|
+
|
|
|
// 返回原点 (没有放在答案区, 按钮回到初始位置)
|
|
|
if (itemX < quesRef.value?.width! || itemY > ansRef.value?.height! ) {
|
|
|
disPatchButtonGoInitPos(item.id)
|
|
|
} else {
|
|
|
|
|
|
const index = getButtonIndex(itemY <= 0 ? 0 : itemY)
|
|
|
-
|
|
|
+ console.log('index:', index);
|
|
|
+
|
|
|
const { x: targetX, y: targetY } = getButtonPosByIndex(index)
|
|
|
console.log(item.x , targetX , item.y, targetY);
|
|
|
|