Compare commits
7 Commits
dee871759e
...
ad9899d716
Author | SHA1 | Date | |
---|---|---|---|
|
ad9899d716 | ||
|
77e08232f7 | ||
|
ddbe15cfb1 | ||
|
934906bb75 | ||
|
7a59995bba | ||
|
21b2ca5a07 | ||
|
19e1c3b1f6 |
181
app/components/SignaturePad.vue
Normal file
181
app/components/SignaturePad.vue
Normal file
@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<div class="signature-pad-container">
|
||||
<canvas
|
||||
ref="canvasRef"
|
||||
class="signature-pad"
|
||||
:style="{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
backgroundColor: '#fff',
|
||||
border: '1px solid #e5e5e5',
|
||||
borderRadius: '4px'
|
||||
}"
|
||||
@touchstart="handleStart"
|
||||
@touchmove="handleMove"
|
||||
@touchend="handleEnd"
|
||||
@mousedown="handleStart"
|
||||
@mousemove="handleMove"
|
||||
@mouseup="handleEnd"
|
||||
@mouseleave="handleEnd"
|
||||
></canvas>
|
||||
<div class="signature-controls">
|
||||
<van-button
|
||||
type="default"
|
||||
size="small"
|
||||
@click="clearCanvas"
|
||||
>清除</van-button>
|
||||
<van-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleConfirm"
|
||||
>确认</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'change'])
|
||||
|
||||
const canvasRef = ref(null)
|
||||
const ctx = ref(null)
|
||||
const isDrawing = ref(false)
|
||||
const lastX = ref(0)
|
||||
const lastY = ref(0)
|
||||
const LINE_WIDTH = 2 // 固定画笔粗细
|
||||
|
||||
// 初始化画布
|
||||
const initCanvas = () => {
|
||||
const canvas = canvasRef.value
|
||||
const dpr = window.devicePixelRatio || 1
|
||||
const rect = canvas.getBoundingClientRect()
|
||||
|
||||
// 设置画布的实际大小
|
||||
canvas.width = rect.width * dpr
|
||||
canvas.height = rect.height * dpr
|
||||
|
||||
ctx.value = canvas.getContext('2d')
|
||||
|
||||
// 缩放画布以匹配设备像素比
|
||||
ctx.value.scale(dpr, dpr)
|
||||
ctx.value.lineCap = 'round'
|
||||
ctx.value.lineJoin = 'round'
|
||||
ctx.value.strokeStyle = '#000'
|
||||
ctx.value.lineWidth = LINE_WIDTH
|
||||
}
|
||||
|
||||
// 开始绘制
|
||||
const handleStart = (e) => {
|
||||
e.preventDefault() // 防止页面滚动
|
||||
isDrawing.value = true
|
||||
const point = getPoint(e)
|
||||
lastX.value = point.x
|
||||
lastY.value = point.y
|
||||
}
|
||||
|
||||
// 绘制中
|
||||
const handleMove = (e) => {
|
||||
if (!isDrawing.value) return
|
||||
e.preventDefault() // 防止页面滚动
|
||||
|
||||
const point = getPoint(e)
|
||||
ctx.value.beginPath()
|
||||
ctx.value.moveTo(lastX.value, lastY.value)
|
||||
ctx.value.lineTo(point.x, point.y)
|
||||
ctx.value.stroke()
|
||||
|
||||
lastX.value = point.x
|
||||
lastY.value = point.y
|
||||
}
|
||||
|
||||
// 结束绘制
|
||||
const handleEnd = () => {
|
||||
isDrawing.value = false
|
||||
}
|
||||
|
||||
// 获取触点坐标
|
||||
const getPoint = (e) => {
|
||||
const canvas = canvasRef.value
|
||||
const rect = canvas.getBoundingClientRect()
|
||||
const dpr = window.devicePixelRatio || 1
|
||||
const event = e.touches ? e.touches[0] : e
|
||||
|
||||
// 计算实际的触点位置
|
||||
const x = (event.clientX - rect.left)
|
||||
const y = (event.clientY - rect.top)
|
||||
|
||||
return {
|
||||
x: x,
|
||||
y: y
|
||||
}
|
||||
}
|
||||
|
||||
// 清除画布
|
||||
const clearCanvas = () => {
|
||||
const canvas = canvasRef.value
|
||||
ctx.value.clearRect(0, 0, canvas.width, canvas.height)
|
||||
emit('update:modelValue', '')
|
||||
emit('change', '')
|
||||
}
|
||||
|
||||
// 确认并生成图片
|
||||
const handleConfirm = () => {
|
||||
const canvas = canvasRef.value
|
||||
const imageData = canvas.toDataURL('image/png')
|
||||
emit('update:modelValue', imageData)
|
||||
emit('change', imageData)
|
||||
}
|
||||
|
||||
// 监听屏幕旋转
|
||||
const handleResize = () => {
|
||||
const canvas = canvasRef.value
|
||||
const imageData = canvas.toDataURL('image/png')
|
||||
initCanvas()
|
||||
// 恢复之前的内容
|
||||
const img = new Image()
|
||||
img.onload = () => {
|
||||
ctx.value.drawImage(img, 0, 0, canvas.width, canvas.height)
|
||||
}
|
||||
img.src = imageData
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initCanvas()
|
||||
window.addEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', handleResize)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.signature-pad-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.signature-pad {
|
||||
flex: 1;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.signature-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 16px;
|
||||
padding: 8px;
|
||||
}
|
||||
</style>
|
@ -2,14 +2,10 @@
|
||||
<main class="flex flex-col min-h-svh">
|
||||
<AppHeader class="h-[var(--van-nav-bar-height)]" />
|
||||
<div class="flex-1 flex flex-col">
|
||||
<keep-alive>
|
||||
<slot />
|
||||
</keep-alive>
|
||||
<slot />
|
||||
</div>
|
||||
<AppFooter />
|
||||
</main>
|
||||
</template>
|
||||
<script setup >
|
||||
import { goodStore } from "@/stores/goods/index.js";
|
||||
const { fullLive } = goodStore()
|
||||
</script>
|
@ -35,7 +35,6 @@ const confirm=()=>{
|
||||
<div class="text-#000 text-16px font-600 ">支付部分</div>
|
||||
<input class="w-272px h-48px bg-#F3F3F3 px-11px text-16px" type="text" placeholder="最多RMB5,000">
|
||||
</template>
|
||||
|
||||
<div class="text-#2B53AC text-14px" @click="changePayStatus">{{payStatus===0 ? '支付部分' : '支付全部'}}</div>
|
||||
</div>
|
||||
</van-dialog>
|
||||
|
@ -70,6 +70,19 @@ onBeforeUnmount(() => {
|
||||
const goPay = () => {
|
||||
show.value = true
|
||||
}
|
||||
const fullLive1 = ref(false)
|
||||
|
||||
watch(()=>{
|
||||
return props.fullLive
|
||||
}, (newVal) => {
|
||||
if (newVal) {
|
||||
setTimeout(() => {
|
||||
fullLive1.value = true
|
||||
}, 400)
|
||||
}else {
|
||||
fullLive1.value = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -89,8 +102,10 @@ const goPay = () => {
|
||||
</div>
|
||||
<!-- <div :id="playerId" class="w-screen"
|
||||
:style="fullLive?'height: calc(100vh - var(--van-nav-bar-height))':'height:100%'"></div>-->
|
||||
|
||||
<transition>
|
||||
<div v-if="fullLive">
|
||||
<div v-if="fullLive1">
|
||||
|
||||
<sideButton class="absolute top-196px right-0 z-999"></sideButton>
|
||||
<div class="absolute left-1/2 transform -translate-x-1/2 flex flex-col items-center" style="bottom:calc(var(--safe-area-inset-bottom) + 26px)">
|
||||
<div class="text-16px text-#FFB25F font-600">
|
||||
@ -114,6 +129,7 @@ const goPay = () => {
|
||||
</div>
|
||||
<paymentResults v-model:show="show1" type="error"/>
|
||||
</div>
|
||||
|
||||
</transition>
|
||||
|
||||
|
||||
@ -127,7 +143,7 @@ const goPay = () => {
|
||||
<style scoped>
|
||||
.v-enter-active,
|
||||
.v-leave-active {
|
||||
transition: opacity 0.5s ease;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.v-enter-from,
|
||||
|
@ -12,7 +12,9 @@ const finished = ref(false);
|
||||
const getArtworkList=async ()=>{
|
||||
const res= await artworkList({auctionUuid: auctionDetail.value.uuid,...pageRef.value})
|
||||
if (res.status===0){
|
||||
itemList.value.push(...res.data.data)
|
||||
if (Array.isArray(res.data.data)&&res.data.data?.length>0){
|
||||
itemList.value.push(...res.data.data)
|
||||
}
|
||||
pageRef.value.itemCount=res.data.count
|
||||
}
|
||||
}
|
||||
|
@ -16,7 +16,9 @@ const initData=async ()=>{
|
||||
await getAuctionDetail()
|
||||
const res= await artworkList({auctionUuid: auctionDetail.value.uuid,...pageRef.value})
|
||||
if (res.status===0){
|
||||
itemList.value=res.data.data
|
||||
if (Array.isArray(res.data.data)&&res.data.data?.length>0){
|
||||
itemList.value=res.data.data
|
||||
}
|
||||
pageRef.value.itemCount=res.data.count
|
||||
}
|
||||
}
|
||||
@ -26,8 +28,8 @@ initData()
|
||||
<template>
|
||||
<div class="flex-grow-1">
|
||||
<client-only>
|
||||
<LiveRoom @click="changeLive" :class="['changeLive', fullLive ? 'expanded' : 'collapsed']" ref="liveRef" :fullLive="fullLive"/>
|
||||
</client-only>
|
||||
<LiveRoom @click="changeLive" :class="['changeLive', fullLive ? 'expanded' : 'collapsed']" ref="liveRef" :fullLive="fullLive"/>
|
||||
</client-only>
|
||||
<div v-show="!fullLive" class="bg-#fff">
|
||||
<van-tabs sticky animated>
|
||||
<van-tab title="拍品列表">
|
||||
|
@ -1,21 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: 'Keepalive',
|
||||
})
|
||||
|
||||
definePageMeta({
|
||||
name: 'Keepalive',
|
||||
keepalive: true,
|
||||
title: '🧡 KeepAlive',
|
||||
i18n: 'menu.keepAlive',
|
||||
})
|
||||
|
||||
const value = ref(1)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<p> {{ $t('keepalive_page.label') }} </p>
|
||||
<van-stepper v-model="value" class="mt-10" />
|
||||
<div class="h-[100vh] w-[100vw]">
|
||||
<SignaturePad v-model="signature" @change="handleSignatureChange"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import SignaturePad from '~/components/SignaturePad.vue'
|
||||
|
||||
const signature = ref('')
|
||||
|
||||
const handleSignatureChange = (imageData) => {
|
||||
// imageData 是 base64 格式的图片数据
|
||||
console.log('签名已更新:', imageData)
|
||||
}
|
||||
</script>
|
@ -92,12 +92,13 @@ const getCode =async () => {
|
||||
})
|
||||
loadingRef.value.loading1=false
|
||||
if (res.status===0){
|
||||
pane.value = 1
|
||||
vanSwipeRef.value?.swipeTo(pane.value)
|
||||
showKeyboard.value=true
|
||||
startCountdown();
|
||||
|
||||
|
||||
}
|
||||
pane.value = 1
|
||||
vanSwipeRef.value?.swipeTo(pane.value)
|
||||
showKeyboard.value=true
|
||||
startCountdown();
|
||||
/* pane.value = 1
|
||||
vanSwipeRef.value?.swipeTo(pane.value)
|
||||
showKeyboard.value=true
|
||||
|
8
app/plugins/vconsole.client.ts
Normal file
8
app/plugins/vconsole.client.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import VConsole from 'vconsole'
|
||||
|
||||
export default defineNuxtPlugin(() => {
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
const vConsole = new VConsole()
|
||||
console.log('VConsole is enabled')
|
||||
}
|
||||
})
|
@ -6,7 +6,7 @@
|
||||
"scripts": {
|
||||
"build": "nuxt build",
|
||||
"dev": "cross-env ENV_FILE=.env.test nuxt dev",
|
||||
"dev:prod": "NODE_ENV=production ENV_FILE=.env.prod nuxt dev",
|
||||
"dev:prod": "cross-env ENV_FILE=.env.prod nuxt dev",
|
||||
"build:test": "cross-env ENV_FILE=.env.test nuxt build",
|
||||
"build:prod": "cross-env ENV_FILE=.env.prod nuxt build",
|
||||
"generate": "nuxt generate",
|
||||
@ -26,6 +26,7 @@
|
||||
"nuxt": "^3.15.0",
|
||||
"pinyin": "4.0.0-alpha.2",
|
||||
"segmentit": "^2.0.3",
|
||||
"vconsole": "^3.15.1",
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.0"
|
||||
},
|
||||
|
@ -38,6 +38,9 @@ importers:
|
||||
segmentit:
|
||||
specifier: ^2.0.3
|
||||
version: 2.0.3
|
||||
vconsole:
|
||||
specifier: ^3.15.1
|
||||
version: 3.15.1
|
||||
vue:
|
||||
specifier: ^3.5.13
|
||||
version: 3.5.13(typescript@5.7.2)
|
||||
@ -1884,6 +1887,13 @@ packages:
|
||||
resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
|
||||
engines: {node: '>=12.13'}
|
||||
|
||||
copy-text-to-clipboard@3.2.0:
|
||||
resolution: {integrity: sha512-RnJFp1XR/LOBDckxTib5Qjr/PMfkatD0MUCQgdpqS8MdKiNUzBjAQBEN6oUy+jW7LI93BBG3DtMB2KOOKpGs2Q==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
core-js@3.40.0:
|
||||
resolution: {integrity: sha512-7vsMc/Lty6AGnn7uFpYT56QesI5D2Y/UkgKounk87OP9Z2H9Z8kj6jzcSGAxFmUtDOS0ntK6lbQz+Nsa0Jj6mQ==}
|
||||
|
||||
core-util-is@1.0.3:
|
||||
resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
|
||||
|
||||
@ -2899,6 +2909,9 @@ packages:
|
||||
ms@2.1.3:
|
||||
resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
|
||||
|
||||
mutation-observer@1.0.3:
|
||||
resolution: {integrity: sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA==}
|
||||
|
||||
mz@2.7.0:
|
||||
resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
|
||||
|
||||
@ -3964,6 +3977,9 @@ packages:
|
||||
peerDependencies:
|
||||
vue: ^3.0.0
|
||||
|
||||
vconsole@3.15.1:
|
||||
resolution: {integrity: sha512-KH8XLdrq9T5YHJO/ixrjivHfmF2PC2CdVoK6RWZB4yftMykYIaXY1mxZYAic70vADM54kpMQF+dYmvl5NRNy1g==}
|
||||
|
||||
vite-hot-client@0.2.4:
|
||||
resolution: {integrity: sha512-a1nzURqO7DDmnXqabFOliz908FRmIppkBKsJthS8rbe8hBEXwEwe4C3Pp33Z1JoFCYfVL4kTOMLKk0ZZxREIeA==}
|
||||
peerDependencies:
|
||||
@ -6272,6 +6288,10 @@ snapshots:
|
||||
dependencies:
|
||||
is-what: 4.1.16
|
||||
|
||||
copy-text-to-clipboard@3.2.0: {}
|
||||
|
||||
core-js@3.40.0: {}
|
||||
|
||||
core-util-is@1.0.3: {}
|
||||
|
||||
cosmiconfig@6.0.0:
|
||||
@ -7310,6 +7330,8 @@ snapshots:
|
||||
|
||||
ms@2.1.3: {}
|
||||
|
||||
mutation-observer@1.0.3: {}
|
||||
|
||||
mz@2.7.0:
|
||||
dependencies:
|
||||
any-promise: 1.3.0
|
||||
@ -8563,6 +8585,13 @@ snapshots:
|
||||
'@vue/shared': 3.5.13
|
||||
vue: 3.5.13(typescript@5.7.2)
|
||||
|
||||
vconsole@3.15.1:
|
||||
dependencies:
|
||||
'@babel/runtime': 7.26.0
|
||||
copy-text-to-clipboard: 3.2.0
|
||||
core-js: 3.40.0
|
||||
mutation-observer: 1.0.3
|
||||
|
||||
vite-hot-client@0.2.4(vite@6.0.5(@types/node@22.10.2)(jiti@2.4.2)(sass@1.83.1)(terser@5.37.0)(tsx@4.19.2)(yaml@2.6.1)):
|
||||
dependencies:
|
||||
vite: 6.0.5(@types/node@22.10.2)(jiti@2.4.2)(sass@1.83.1)(terser@5.37.0)(tsx@4.19.2)(yaml@2.6.1)
|
||||
|
Loading…
Reference in New Issue
Block a user