diff --git a/src/components/BowTarget.vue b/src/components/BowTarget.vue index 34cca2f..46b4ef1 100644 --- a/src/components/BowTarget.vue +++ b/src/components/BowTarget.vue @@ -249,6 +249,7 @@ const simulShoot2 = async () => { text-align: center; line-height: 10px; box-sizing: border-box; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .hit > text { transform: scaleX(0.7); diff --git a/src/components/BowTargetEdit.vue b/src/components/BowTargetEdit.vue index d865c6d..2982a9e 100644 --- a/src/components/BowTargetEdit.vue +++ b/src/components/BowTargetEdit.vue @@ -1,8 +1,143 @@ - + @@ -10,8 +145,91 @@ .container { width: 90%; margin: 10px auto; + position: relative; + user-select: none; } + .container > image { width: 100%; + display: block; +} + +.arrow-point { + position: absolute; + transform: translate(-50%, -50%); + z-index: 10; +} + +.point { + width: 12px; + height: 12px; + border-radius: 50%; + border: 1px solid #fff; + z-index: 1; + color: #fff; + font-size: 8px; + text-align: center; + line-height: 10px; + box-sizing: border-box; + background-color: #ff4444; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); +} + +.point > text { + transform: scaleX(0.7); + display: block; + font-weight: bold; +} + +.edit-buttons { + position: absolute; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + background: #18ff6899; + width: 88px; + height: 88px; + display: flex; + align-items: flex-end; +} + +.edit-buttons > text { + width: 100%; + display: block; + line-height: 50px; + text-align: center; + font-size: 20px; + font-weight: bold; + color: #fff; +} + +.edit-btn { + transform: translateX(-50%) translateY(-50%); + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + position: absolute; +} + +.edit-btn > image { + width: 24px; + height: 24px; +} + +.confirm-btn { + left: 50%; + bottom: -24px; +} + +.delete-btn { + right: -24px; + bottom: -24px; +} + +.drag-btn { + left: 50%; + top: 0; } diff --git a/src/components/EditOption.vue b/src/components/EditOption.vue index 6d7effe..fcdf775 100644 --- a/src/components/EditOption.vue +++ b/src/components/EditOption.vue @@ -236,7 +236,9 @@ watch( - 选择每组的箭数 + 选择每组的箭数 { + arrowGroups.value[currentGroup.value][currentArrow.value] = { ring }; +}; + const onBack = () => { uni.navigateBack(); }; @@ -38,17 +42,22 @@ const onSubmit = () => { }; const onClickRing = (ring) => { if (arrowGroups.value[currentGroup.value]) { - arrowGroups.value[currentGroup.value][currentArrow.value] = ring; + arrowGroups.value[currentGroup.value][currentArrow.value] = { ring }; clickable.value = arrowGroups.value[currentGroup.value].every( - (item) => !!item + (item) => !!item.ring ); - if (currentArrow.value < amount.value - 1) { - currentArrow.value++; - } + if (currentArrow.value < amount.value - 1) currentArrow.value++; } }; const deleteArrow = () => { - arrowGroups.value[currentGroup.value][currentArrow.value] = ""; + arrowGroups.value[currentGroup.value][currentArrow.value] = {}; +}; +const onEditDone = (arrow) => { + arrowGroups.value[currentGroup.value][currentArrow.value] = { + ...arrow, + ring: 10, + }; + if (currentArrow.value < amount.value - 1) currentArrow.value++; }; onMounted(() => { @@ -57,7 +66,7 @@ onMounted(() => { groups.value = Number(pointBook.amountGroup.split("/")[0]); amount.value = Number(pointBook.amountGroup.split("/")[1]); for (let i = 1; i <= groups.value; i++) { - arrowGroups.value[i] = new Array(amount.value).fill(""); + arrowGroups.value[i] = new Array(amount.value).fill({}); } } }); @@ -71,7 +80,10 @@ onMounted(() => { :onBack="() => (showTip = true)" > - + @@ -92,7 +104,13 @@ onMounted(() => { borderColor: currentArrow === index ? '#FED847' : '#eeeeee', borderWidth: currentArrow === index ? '2px' : '1px', }" - >{{ isNaN(arrow) ? arrow : arrow ? arrow + " 环" : "" }}{{ + isNaN(arrow.ring) + ? arrow.ring + : arrow.ring + ? arrow.ring + " 环" + : "" + }} 输入分值的情况下,系统不提供落点稳定性分 diff --git a/src/static/arrow-edit-delete.png b/src/static/arrow-edit-delete.png new file mode 100644 index 0000000..c3b6076 Binary files /dev/null and b/src/static/arrow-edit-delete.png differ diff --git a/src/static/arrow-edit-move.png b/src/static/arrow-edit-move.png new file mode 100644 index 0000000..15713f4 Binary files /dev/null and b/src/static/arrow-edit-move.png differ diff --git a/src/static/arrow-edit-save.png b/src/static/arrow-edit-save.png new file mode 100644 index 0000000..50e065e Binary files /dev/null and b/src/static/arrow-edit-save.png differ diff --git a/src/util.js b/src/util.js index 937711e..91a5527 100644 --- a/src/util.js +++ b/src/util.js @@ -282,3 +282,21 @@ export const isGameEnded = async (battleId) => { } return !isGaming; }; + +// 获取元素尺寸和位置信息 +export const getElementRect = () => { + return new Promise((resolve) => { + const query = uni.createSelectorQuery(); + query + .select(".container") + .boundingClientRect((rect) => { + resolve(rect); + }) + .exec(); + }); +}; + +export const calcRing = (x, y) => { + console.log(1111, x, y); + return 8; +};