forked from natuka/web.puabadge.com
代码提交
This commit is contained in:
Linzm committed
1 parent
84061c9a18
commit
ac240bc142
92 files changed
+1182
-9505
No files matched your search
+304
-242
@@ -1,267 +1,329 @@
|
||||
<template name="cropper">
|
||||
<view>
|
||||
<image :src="imgSrc.imgSrc" class="my-avatar" mode="aspectFill" @click="fSelect" :style="imgStyle"></image>
|
||||
<!-- 上传图片 -->
|
||||
<canvas canvas-id="avatar-canvas" id="avatar-canvas" class="my-canvas" :style="{top: styleTop, height: cvsStyleHeight}"
|
||||
disable-scroll="false"></canvas>
|
||||
<!-- 截取边框 -->
|
||||
<canvas canvas-id="oper-canvas" id="oper-canvas" class="oper-canvas" :style="{top: styleTop, height: cvsStyleHeight}"
|
||||
disable-scroll="false" @touchstart="fStart" @touchmove="fMove" @touchend="fEnd"></canvas>
|
||||
<view class="oper-wrapper" :style="{display: styleDisplay}">
|
||||
<view class="btn-wrapper" v-if="showOper">
|
||||
<view @click="fClose" hover-class="hover">取消</view>
|
||||
<view @click="fUpload" hover-class="hover">选取</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from '@vue/runtime-dom'
|
||||
import type { PropType } from '@vue/runtime-dom'
|
||||
|
||||
<script>
|
||||
const tabHeight = 70;
|
||||
export default {
|
||||
name: "cropper",
|
||||
data() {
|
||||
return {
|
||||
cvsStyleHeight: '0px',
|
||||
styleDisplay: 'none',
|
||||
styleTop: '-10000px',
|
||||
prvTop: '-10000px',
|
||||
imgStyle: {},
|
||||
selStyle: {},
|
||||
showOper: true,
|
||||
imgSrc: {
|
||||
imgSrc: ''
|
||||
},
|
||||
qlty: 0.9,
|
||||
postWidthFirst: {},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
avatarSrc() {
|
||||
this.imgSrc.imgSrc = this.avatarSrc;
|
||||
}
|
||||
},
|
||||
props: {
|
||||
avatarSrc: '',
|
||||
avatarStyle: '',
|
||||
selWidth: '',
|
||||
selHeight: '',
|
||||
expWidth: '',
|
||||
expHeight: '',
|
||||
minScale: '',
|
||||
maxScale: '',
|
||||
canScale: '',
|
||||
noTab: '',
|
||||
quality: '',
|
||||
index: ''
|
||||
},
|
||||
created() {
|
||||
const canvas = document.getElementById('avatar-canvas');
|
||||
const operCanvas = document.getElementById('oper-canvas');
|
||||
this.ctxCanvas = canvas.getContext('2d');
|
||||
this.ctxCanvasOper = operCanvas.getContext('2d');
|
||||
interface Style {
|
||||
width?: string
|
||||
height?: string
|
||||
top?: string
|
||||
left?: string
|
||||
[key: string]: any
|
||||
}
|
||||
|
||||
this.qlty = parseInt(this.quality) || 0.9;
|
||||
this.imgSrc.imgSrc = this.avatarSrc;
|
||||
this.letScale = this.canScale === 'false' ? 0 : 1;
|
||||
this.indx = this.index || undefined;
|
||||
this.mnScale = this.minScale || 0.3;
|
||||
this.mxScale = this.maxScale || 4;
|
||||
this.noBar = this.noTab === 'true' ? 1 : 0;
|
||||
if (this.noBar) {
|
||||
this.moreHeight = 0;
|
||||
this.fWindowResize();
|
||||
} else {
|
||||
this.moreHeight = 50;
|
||||
this.fWindowResize();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fWindowResize() {
|
||||
const sysInfo = {
|
||||
platform: navigator.platform,
|
||||
pixelRatio: window.devicePixelRatio,
|
||||
windowWidth: window.innerWidth,
|
||||
windowHeight: window.innerHeight,
|
||||
windowTop: window.scrollY,
|
||||
windowBottom: 0,
|
||||
statusBarHeight: 0,
|
||||
screenHeight: screen.height
|
||||
};
|
||||
const tabHeight = 70
|
||||
export default defineComponent({
|
||||
name: 'Cropper',
|
||||
props: {
|
||||
avatarSrc: {
|
||||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
avatarStyle: {
|
||||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
selWidth: {
|
||||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
selHeight: {
|
||||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
expWidth: {
|
||||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
expHeight: {
|
||||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
minScale: {
|
||||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
maxScale: {
|
||||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
canScale: {
|
||||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
noTab: {
|
||||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
quality: {
|
||||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
index: {
|
||||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cvsStyleHeight: '0px',
|
||||
styleDisplay: 'none',
|
||||
styleTop: '-10000px',
|
||||
prvTop: '-10000px',
|
||||
imgStyle: {} as Style,
|
||||
selStyle: {} as Style,
|
||||
showOper: true,
|
||||
imgSrc: {
|
||||
imgSrc: '',
|
||||
},
|
||||
qlty: 0.9,
|
||||
postWidthFirst: {},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
avatarSrc() {
|
||||
this.imgSrc.imgSrc = this.avatarSrc
|
||||
},
|
||||
},
|
||||
created() {
|
||||
const canvas = document.getElementById('avatar-canvas')
|
||||
const operCanvas = document.getElementById('oper-canvas')
|
||||
this.ctxCanvas = canvas.getContext('2d')
|
||||
this.ctxCanvasOper = operCanvas.getContext('2d')
|
||||
|
||||
this.platform = sysInfo.platform;
|
||||
this.pixelRatio = sysInfo.pixelRatio;
|
||||
this.windowWidth = sysInfo.windowWidth;
|
||||
this.drawTop = sysInfo.windowTop;
|
||||
this.windowHeight = sysInfo.windowHeight + sysInfo.windowBottom;
|
||||
this.cvsStyleHeight = this.windowHeight - tabHeight + 'px';
|
||||
this.qlty = parseInt(this.quality) || 0.9
|
||||
this.imgSrc.imgSrc = this.avatarSrc
|
||||
this.letScale = this.canScale === 'false' ? 0 : 1
|
||||
this.indx = this.index || undefined
|
||||
this.mnScale = this.minScale || 0.3
|
||||
this.mxScale = this.maxScale || 4
|
||||
this.noBar = this.noTab === 'true' ? 1 : 0
|
||||
if (this.noBar) {
|
||||
this.moreHeight = 0
|
||||
this.fWindowResize()
|
||||
} else {
|
||||
this.moreHeight = 50
|
||||
this.fWindowResize()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fWindowResize() {
|
||||
const sysInfo = {
|
||||
platform: navigator.platform,
|
||||
pixelRatio: window.devicePixelRatio,
|
||||
windowWidth: window.innerWidth,
|
||||
windowHeight: window.innerHeight,
|
||||
windowTop: window.scrollY,
|
||||
windowBottom: 0,
|
||||
statusBarHeight: 0,
|
||||
screenHeight: screen.height,
|
||||
}
|
||||
|
||||
this.pxRatio = this.windowWidth / 750;
|
||||
this.platform = sysInfo.platform
|
||||
this.pixelRatio = sysInfo.pixelRatio
|
||||
this.windowWidth = sysInfo.windowWidth
|
||||
this.drawTop = sysInfo.windowTop
|
||||
this.windowHeight = sysInfo.windowHeight + sysInfo.windowBottom
|
||||
this.cvsStyleHeight = `${this.windowHeight - tabHeight}px`
|
||||
|
||||
let style = this.avatarStyle;
|
||||
console.log(style)
|
||||
this.imgStyle = style;
|
||||
this.expWidth && (this.exportWidth = this.expWidth.indexOf('rpx') >= 0 ? parseInt(this.expWidth) * this.pxRatio :
|
||||
parseInt(this.expWidth));
|
||||
this.expHeight && (this.exportHeight = this.expHeight.indexOf('rpx') >= 0 ? parseInt(this.expHeight) * this.pxRatio :
|
||||
parseInt(this.expHeight));
|
||||
this.pxRatio = this.windowWidth / 750
|
||||
|
||||
if (this.styleDisplay === 'flex') {
|
||||
this.fDrawInit(true);
|
||||
}
|
||||
this.fHideImg();
|
||||
},
|
||||
fSelect() {
|
||||
if (this.fSelecting) return;
|
||||
this.fSelecting = true;
|
||||
setTimeout(() => {
|
||||
this.fSelecting = false;
|
||||
}, 500);
|
||||
const style = this.avatarStyle
|
||||
console.log(style)
|
||||
this.imgStyle = style
|
||||
this.expWidth && (this.exportWidth = this.expWidth.includes('rpx')
|
||||
? parseInt(this.expWidth) * this.pxRatio
|
||||
: parseInt(this.expWidth))
|
||||
this.expHeight && (this.exportHeight = this.expHeight.includes('rpx')
|
||||
? parseInt(this.expHeight) * this.pxRatio
|
||||
: parseInt(this.expHeight))
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = 'image/*';
|
||||
input.onchange = (e) => {
|
||||
const file = e.target.files[0];
|
||||
if(!file) return;
|
||||
if (this.styleDisplay === 'flex')
|
||||
this.fDrawInit(true)
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const path = e.target.result;
|
||||
this.imgPath = path;
|
||||
this.fHideImg()
|
||||
},
|
||||
fSelect() {
|
||||
if (this.fSelecting)
|
||||
return
|
||||
this.fSelecting = true
|
||||
setTimeout(() => {
|
||||
this.fSelecting = false
|
||||
}, 500)
|
||||
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
this.imgWidth = img.width;
|
||||
this.imgHeight = img.height;
|
||||
this.path = path;
|
||||
const input = document.createElement('input')
|
||||
input.type = 'file'
|
||||
input.accept = 'image/*'
|
||||
input.onchange = (e) => {
|
||||
const file = e.target.files[0]
|
||||
if (!file)
|
||||
return
|
||||
|
||||
if (!this.hasSel) {
|
||||
let style = this.selStyle || {};
|
||||
if (this.selWidth && this.selHeight) {
|
||||
let selWidth = this.selWidth.indexOf('rpx') >= 0 ? parseInt(this.selWidth) * this.pxRatio :
|
||||
parseInt(this.selWidth),
|
||||
selHeight = this.selHeight.indexOf('rpx') >= 0 ? parseInt(this.selHeight) * this.pxRatio :
|
||||
parseInt(this.selHeight);
|
||||
style.width = parseInt(selWidth);
|
||||
style.height = parseInt(selHeight);
|
||||
style.top = parseInt((this.windowHeight - style.height - tabHeight) / 2);
|
||||
style.left = parseInt((this.windowWidth - style.width) / 2);
|
||||
} else {
|
||||
alert('裁剪框的宽或高没有设置');
|
||||
return;
|
||||
}
|
||||
this.selStyle = style;
|
||||
}
|
||||
const reader = new FileReader()
|
||||
reader.onload = (e) => {
|
||||
const path = e.target.result
|
||||
this.imgPath = path
|
||||
|
||||
this.fDrawInit(true);
|
||||
};
|
||||
img.src = path;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
input.click();
|
||||
},
|
||||
fUpload() {
|
||||
if (this.fUploading) return;
|
||||
this.fUploading = true;
|
||||
setTimeout(() => {
|
||||
this.fUploading = false;
|
||||
}, 1000);
|
||||
const img = new Image()
|
||||
img.onload = () => {
|
||||
this.imgWidth = img.width
|
||||
this.imgHeight = img.height
|
||||
this.path = path
|
||||
|
||||
let style = this.selStyle,
|
||||
x = parseInt(style.left),
|
||||
y = parseInt(style.top),
|
||||
width = parseInt(style.width),
|
||||
height = parseInt(style.height),
|
||||
expWidth = this.exportWidth || width,
|
||||
expHeight = this.exportHeight || height;
|
||||
if (!this.hasSel) {
|
||||
const style = this.selStyle || {}
|
||||
if (this.selWidth && this.selHeight) {
|
||||
const selWidth = this.selWidth.includes('rpx')
|
||||
? parseInt(this.selWidth) * this.pxRatio
|
||||
: parseInt(this.selWidth)
|
||||
const selHeight = this.selHeight.includes('rpx')
|
||||
? parseInt(this.selHeight) * this.pxRatio
|
||||
: parseInt(this.selHeight)
|
||||
style.width = `${parseInt(selWidth)}px`
|
||||
style.height = `${parseInt(selHeight)}px`
|
||||
style.top = `${parseInt((this.windowHeight - parseInt(style.height) - tabHeight) / 2)}px`
|
||||
style.left = `${parseInt((this.windowWidth - parseInt(style.width)) / 2)}px`
|
||||
} else {
|
||||
alert('裁剪框的宽或高没有设置')
|
||||
return
|
||||
}
|
||||
this.selStyle = style
|
||||
}
|
||||
|
||||
x *= this.pixelRatio;
|
||||
y *= this.pixelRatio;
|
||||
expWidth = width;
|
||||
expHeight = height;
|
||||
this.fDrawInit(true)
|
||||
}
|
||||
img.src = path
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
}
|
||||
input.click()
|
||||
},
|
||||
fUpload() {
|
||||
if (this.fUploading)
|
||||
return
|
||||
this.fUploading = true
|
||||
setTimeout(() => {
|
||||
this.fUploading = false
|
||||
}, 1000)
|
||||
|
||||
this.styleDisplay = 'none';
|
||||
this.styleTop = '-10000px';
|
||||
this.hasSel = false;
|
||||
this.fHideImg();
|
||||
const style = this.selStyle
|
||||
let x = parseInt(style.left)
|
||||
let y = parseInt(style.top)
|
||||
const width = parseInt(style.width)
|
||||
const height = parseInt(style.height)
|
||||
let expWidth = this.exportWidth || width
|
||||
let expHeight = this.exportHeight || height
|
||||
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.drawImage(this.ctxCanvas.canvas, x, y, width, height, 0, 0, expWidth, expHeight);
|
||||
x *= this.pixelRatio
|
||||
y *= this.pixelRatio
|
||||
expWidth = width
|
||||
expHeight = height
|
||||
|
||||
canvas.toBlob((blob) => {
|
||||
const url = URL.createObjectURL(blob);
|
||||
this.$emit("upload", {
|
||||
avatar: this.imgSrc,
|
||||
path: url,
|
||||
index: this.indx
|
||||
});
|
||||
}, 'image/png', this.qlty);
|
||||
},
|
||||
// ... 其他方法保持不变
|
||||
}
|
||||
}
|
||||
this.styleDisplay = 'none'
|
||||
this.styleTop = '-10000px'
|
||||
this.hasSel = false
|
||||
this.fHideImg()
|
||||
|
||||
const canvas = document.createElement('canvas')
|
||||
canvas.width = width
|
||||
canvas.height = height
|
||||
const ctx = canvas.getContext('2d')
|
||||
ctx.drawImage(this.ctxCanvas.canvas, x, y, width, height, 0, 0, expWidth, expHeight)
|
||||
|
||||
canvas.toBlob((blob) => {
|
||||
const url = URL.createObjectURL(blob)
|
||||
this.$emit('upload', {
|
||||
avatar: this.imgSrc,
|
||||
path: url,
|
||||
index: this.indx,
|
||||
})
|
||||
}, 'image/png', this.qlty)
|
||||
},
|
||||
// ... 其他方法保持不变
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template name="cropper">
|
||||
<view>
|
||||
<image :src="imgSrc.imgSrc" class="my-avatar" mode="aspectFill" :style="imgStyle" @click="fSelect" />
|
||||
<!-- 上传图片 -->
|
||||
<canvas
|
||||
id="avatar-canvas" canvas-id="avatar-canvas" class="my-canvas" :style="{ top: styleTop, height: cvsStyleHeight }"
|
||||
disable-scroll="false"
|
||||
/>
|
||||
<!-- 截取边框 -->
|
||||
<canvas
|
||||
id="oper-canvas" canvas-id="oper-canvas" class="oper-canvas" :style="{ top: styleTop, height: cvsStyleHeight }"
|
||||
disable-scroll="false" @touchstart="fStart" @touchmove="fMove" @touchend="fEnd"
|
||||
/>
|
||||
<view class="oper-wrapper" :style="{ display: styleDisplay }">
|
||||
<view v-if="showOper" class="btn-wrapper">
|
||||
<view hover-class="hover" @click="fClose">
|
||||
取消
|
||||
</view>
|
||||
<view hover-class="hover" @click="fUpload">
|
||||
选取
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
.my-canvas {
|
||||
display: flex;
|
||||
position: fixed !important;
|
||||
background: #000000;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
}
|
||||
.my-canvas {
|
||||
display: flex;
|
||||
position: fixed !important;
|
||||
background: #000000;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.my-avatar {
|
||||
width: 100vw;
|
||||
height: 100vw;
|
||||
}
|
||||
.my-avatar {
|
||||
width: 100vw;
|
||||
height: 100vw;
|
||||
}
|
||||
|
||||
.oper-canvas {
|
||||
display: flex;
|
||||
position: fixed !important;
|
||||
left: 0;
|
||||
z-index: 101;
|
||||
width: 100%;
|
||||
}
|
||||
.oper-canvas {
|
||||
display: flex;
|
||||
position: fixed !important;
|
||||
left: 0;
|
||||
z-index: 101;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.oper-wrapper {
|
||||
height: 71px;
|
||||
position: fixed !important;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 200;
|
||||
flex-direction: row;
|
||||
}
|
||||
.oper-wrapper {
|
||||
height: 71px;
|
||||
position: fixed !important;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 200;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.btn-wrapper {
|
||||
background-color: #000000;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
align-items: center
|
||||
}
|
||||
.btn-wrapper {
|
||||
background-color: #000000;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-wrapper view {
|
||||
width: 160rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
z-index: 300;
|
||||
}
|
||||
.btn-wrapper view {
|
||||
width: 160rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
z-index: 300;
|
||||
}
|
||||
|
||||
.hover {
|
||||
color: #f1f1f1;
|
||||
}
|
||||
</style>
|
||||
.hover {
|
||||
color: #f1f1f1;
|
||||
}
|
||||
</style>
|
||||
+165
-104
@@ -1,42 +1,100 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
const show = ref(false)
|
||||
const imgShow = ref(false)
|
||||
const router = useRouter()
|
||||
const imgurl = ref('') // 头像地址
|
||||
const fileInput = ref<HTMLInputElement | null>(null)
|
||||
function onUploadClick() {
|
||||
if (fileInput.value)
|
||||
fileInput.value.click()
|
||||
}
|
||||
function myUpload(rsp) {
|
||||
const self = this
|
||||
self.imgurl = rsp.path // 更新头像方式一
|
||||
}
|
||||
function goToRecord() {
|
||||
router.push('/badge/record')
|
||||
}
|
||||
function goToMyOrder() {
|
||||
router.push('/badge/myOrder')
|
||||
}
|
||||
function goToPreview() {
|
||||
router.push('/badge/preview')
|
||||
}
|
||||
function onFileChange
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="photo-upload-page">
|
||||
<div class="badge-size">
|
||||
<div class="size-title">剩余兑换数量</div>
|
||||
<div class="size-title">
|
||||
剩余兑换数量
|
||||
</div>
|
||||
<div class="size-options">
|
||||
<div class="size-item">
|
||||
<div class="size-text">4cm</div>
|
||||
<div class="size-count">（剩余兑换：1）</div>
|
||||
<div class="size-text">
|
||||
4cm
|
||||
</div>
|
||||
<div class="size-count">
|
||||
（剩余兑换：1）
|
||||
</div>
|
||||
</div>
|
||||
<div class="size-item">
|
||||
<div class="size-text">5cm</div>
|
||||
<div class="size-count">（剩余兑换：2）</div>
|
||||
<div class="size-text">
|
||||
5cm
|
||||
</div>
|
||||
<div class="size-count">
|
||||
（剩余兑换：2）
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="badge-info">
|
||||
<div class="badge-item" @click="goToRecord">
|
||||
<div class="badge-title">设计图集</div>
|
||||
<div class="badge-count">8张</div>
|
||||
<div class="badge-title">
|
||||
设计图集
|
||||
</div>
|
||||
<div class="badge-count">
|
||||
8张
|
||||
</div>
|
||||
</div>
|
||||
<div class="badge-item" @click="goToMyOrder">
|
||||
<div class="badge-title">我的订单</div>
|
||||
<div class="badge-count">3笔</div>
|
||||
<div class="badge-title">
|
||||
我的订单
|
||||
</div>
|
||||
<div class="badge-count">
|
||||
3笔
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 8px;background: #F2F2F2;"></div>
|
||||
<div style="height: 8px;background: #F2F2F2;" />
|
||||
<div class="step-container">
|
||||
<div class="step-item active">
|
||||
<div class="step-num">1</div>
|
||||
<div class="step-num">
|
||||
1
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">上传正面照片</div>
|
||||
<div class="step-desc">1张五官清晰的正面照片</div>
|
||||
<div class="step-title">
|
||||
上传正面照片
|
||||
</div>
|
||||
<div class="step-desc">
|
||||
1张五官清晰的正面照片
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-item">
|
||||
<div class="step-num">2</div>
|
||||
<div class="step-num">
|
||||
2
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">确认下单</div>
|
||||
<div class="step-desc">选择一个你喜欢的设计</div>
|
||||
<div class="step-title">
|
||||
确认下单
|
||||
</div>
|
||||
<div class="step-desc">
|
||||
选择一个你喜欢的设计
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -46,70 +104,87 @@
|
||||
<span class="photo-upload-guide-text">图片上传指南</span>
|
||||
</div>
|
||||
<div class="photo-upload-area" @click="onUploadClick">
|
||||
<!-- <cropper selWidth="660rpx" selHeight="660rpx" @upload="myUpload" :avatarSrc="imgurl" avatarStyle="width:100vw;height:100vw;">
|
||||
<img v-if="imgurl" :src="imgurl" class="photo-upload-image" alt="上传的照片" />
|
||||
<div v-else class="photo-upload-placeholder">
|
||||
<span class="photo-upload-plus">+</span>
|
||||
<span class="photo-upload-text">点击上传照片</span>
|
||||
</div>
|
||||
</cropper> -->
|
||||
<input
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
style="display: none"
|
||||
@change="onFileChange"
|
||||
/>
|
||||
<div class="photo-upload-plus">+</div>
|
||||
<div class="photo-upload-text">点击上传照片</div>
|
||||
<div class="photo-upload-tip">*上传照片时建议勾选[原图]</div>
|
||||
>
|
||||
<div class="photo-upload-plus">
|
||||
+
|
||||
</div>
|
||||
<div class="photo-upload-text">
|
||||
点击上传照片
|
||||
</div>
|
||||
<div class="photo-upload-tip">
|
||||
*上传照片时建议勾选[原图]
|
||||
</div>
|
||||
</div>
|
||||
<div class="photo-upload-footer">
|
||||
请确定您对上传的照片拥有合法使用权利或已取得他人合法授权，且同意本平台分析图片信息以提供生成服务
|
||||
请确定您对上传的照片拥有合法使用权利或已取得他人合法授权，且同意本平台分析图片信息以提供生成服务
|
||||
</div>
|
||||
</div>
|
||||
<div class="style-section">
|
||||
<div class="style-title">风格样式</div>
|
||||
<div class="style-title">
|
||||
风格样式
|
||||
</div>
|
||||
<div class="style-list">
|
||||
<div class="style-item">
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="随机风格盲盒" />
|
||||
<div class="style-label">随机风格盲盒</div>
|
||||
<span class="style-selected"></span>
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="随机风格盲盒">
|
||||
<div class="style-label">
|
||||
随机风格盲盒
|
||||
</div>
|
||||
<span class="style-selected" />
|
||||
</div>
|
||||
<div class="style-item">
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="Q版国风动漫" />
|
||||
<div class="style-label">Q版国风动漫</div>
|
||||
<span class="style-selected"></span>
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="Q版国风动漫">
|
||||
<div class="style-label">
|
||||
Q版国风动漫
|
||||
</div>
|
||||
<span class="style-selected" />
|
||||
</div>
|
||||
<div class="style-item">
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="Q版卡通" />
|
||||
<div class="style-label">Q版卡通</div>
|
||||
<span class="style-selected"></span>
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="Q版卡通">
|
||||
<div class="style-label">
|
||||
Q版卡通
|
||||
</div>
|
||||
<span class="style-selected" />
|
||||
</div>
|
||||
<div class="style-item">
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="芭比风" />
|
||||
<div class="style-label">芭比风</div>
|
||||
<span class="style-selected"></span>
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="芭比风">
|
||||
<div class="style-label">
|
||||
芭比风
|
||||
</div>
|
||||
<span class="style-selected" />
|
||||
</div>
|
||||
<div class="style-item">
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="随机风格盲盒" />
|
||||
<div class="style-label">随机风格盲盒</div>
|
||||
<span class="style-selected"></span>
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="随机风格盲盒">
|
||||
<div class="style-label">
|
||||
随机风格盲盒
|
||||
</div>
|
||||
<span class="style-selected" />
|
||||
</div>
|
||||
<div class="style-item">
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="Q版国风动漫" />
|
||||
<div class="style-label">Q版国风动漫</div>
|
||||
<span class="style-selected"></span>
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="Q版国风动漫">
|
||||
<div class="style-label">
|
||||
Q版国风动漫
|
||||
</div>
|
||||
<span class="style-selected" />
|
||||
</div>
|
||||
<div class="style-item">
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="Q版卡通" />
|
||||
<div class="style-label">Q版卡通</div>
|
||||
<span class="style-selected"></span>
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="Q版卡通">
|
||||
<div class="style-label">
|
||||
Q版卡通
|
||||
</div>
|
||||
<span class="style-selected" />
|
||||
</div>
|
||||
<div class="style-item">
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="芭比风" />
|
||||
<div class="style-label">芭比风</div>
|
||||
<span class="style-selected"></span>
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="芭比风">
|
||||
<div class="style-label">
|
||||
芭比风
|
||||
</div>
|
||||
<span class="style-selected" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -149,7 +224,7 @@
|
||||
</div>
|
||||
<div class="bg-photo-upload-area">
|
||||
<label class="bg-photo-upload-label">
|
||||
<input type="file" accept="image/*" style="display:none" />
|
||||
<input type="file" accept="image/*" style="display:none">
|
||||
<div class="bg-photo-upload-box">
|
||||
<div class="bg-photo-upload-plus">+</div>
|
||||
<div class="bg-photo-upload-text">上传照片</div>
|
||||
@@ -157,7 +232,7 @@
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 90px;"></div>
|
||||
<div style="height: 90px;" />
|
||||
<div class="design-action-bar">
|
||||
<div class="design-left">
|
||||
<img class="design-leaf-icon" width="18" height="18" src="@/assets/badge/leaf.png" alt="">
|
||||
@@ -171,33 +246,37 @@
|
||||
</div>
|
||||
<van-action-sheet v-model:show="show" title="背景样式说明" :close-on-click-overlay="true" closeable>
|
||||
<div style="padding: 24px 16px;">
|
||||
<div style="font-weight: bold; font-size: 15px; margin-bottom: 4px;">照片自有背景</div>
|
||||
<div style="font-weight: bold; font-size: 15px; margin-bottom: 4px;">
|
||||
照片自有背景
|
||||
</div>
|
||||
<div style="font-size: 12px; color: #888; margin-bottom: 12px;">
|
||||
选择该选项设计的徽章会根据上传的人像照片背景进行生成效果
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 24px;">
|
||||
<img src="@/assets/badge/suiji.png" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover; margin-right: 12px;" />
|
||||
<img src="@/assets/badge/suiji.png" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover; margin-right: 12px;">
|
||||
<span style="font-size: 24px; color: #bbb; margin-right: 12px;">
|
||||
<van-icon name="arrow" />
|
||||
</span>
|
||||
<img src="@/assets/badge/suiji.png" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover;" />
|
||||
<img src="@/assets/badge/suiji.png" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover;">
|
||||
</div>
|
||||
<div style="font-weight: bold; font-size: 15px; margin-bottom: 4px;">
|
||||
补充背景照片
|
||||
</div>
|
||||
<div style="font-weight: bold; font-size: 15px; margin-bottom: 4px;">补充背景照片</div>
|
||||
<div style="font-size: 12px; color: #888; margin-bottom: 12px;">
|
||||
选择该选项需要额外上传一张照片作为背景
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 12px;">
|
||||
<img src="@/assets/badge/suiji.png" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover; margin-right: 12px;" />
|
||||
<img src="@/assets/badge/suiji.png" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover; margin-right: 12px;">
|
||||
<span style="font-size: 24px; color: #bbb; margin-right: 12px;">
|
||||
<van-icon name="plus" />
|
||||
</span>
|
||||
<img src="@/assets/badge/suiji.png" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover;" />
|
||||
<img src="@/assets/badge/suiji.png" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover;">
|
||||
</div>
|
||||
<div style="font-size: 24px; color: #bbb;text-align: center;" >
|
||||
<div style="font-size: 24px; color: #bbb;text-align: center;">
|
||||
<van-icon name="arrow-down" />
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; justify-content: center; margin-top: 12px;">
|
||||
<img src="@/assets/badge/suiji.png" style="width: 120px; height: 120px; border-radius: 16px; object-fit: cover;" />
|
||||
<img src="@/assets/badge/suiji.png" style="width: 120px; height: 120px; border-radius: 16px; object-fit: cover;">
|
||||
</div>
|
||||
<div style="margin-top: 32px; text-align: center;">
|
||||
<button style="width: 90%; height: 44px; background: linear-gradient(90deg, #d6f5b7 0%, #50cf54 100%); border: none; border-radius: 22px; color: #222; font-size: 18px; font-weight: bold; cursor: pointer;" @click="show = false">
|
||||
@@ -206,11 +285,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
|
||||
|
||||
<van-action-sheet v-model:show="imgShow" title="图片上传指南" :close-on-click-overlay="true" closeable>
|
||||
<div style="padding: 0 16px 24px 16px;">
|
||||
<div style="text-align: center;">
|
||||
<img src="@/assets/badge/suiji.png" alt="照片上传指南" style="width: 220px; border-radius: 16px; margin-bottom: 16px;" />
|
||||
<img src="@/assets/badge/suiji.png" alt="照片上传指南" style="width: 220px; border-radius: 16px; margin-bottom: 16px;">
|
||||
</div>
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: center; margin-bottom: 16px;">
|
||||
<span style="background: #e6f7e6; color: #22c55e; border-radius: 8px; padding: 2px 10px; font-size: 13px;">光线均匀</span>
|
||||
@@ -221,26 +300,36 @@
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; margin-bottom: 16px;">
|
||||
<div style="flex: 1; text-align: center;">
|
||||
<img src="@/assets/badge/suiji.png" alt="多主体" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;" />
|
||||
<div style="font-size: 13px; color: #888; margin-top: 4px;">多主体</div>
|
||||
<img src="@/assets/badge/suiji.png" alt="多主体" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
|
||||
<div style="font-size: 13px; color: #888; margin-top: 4px;">
|
||||
多主体
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 1; text-align: center;">
|
||||
<img src="@/assets/badge/suiji.png" alt="光线昏暗" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;" />
|
||||
<div style="font-size: 13px; color: #888; margin-top: 4px;">光线昏暗</div>
|
||||
<img src="@/assets/badge/suiji.png" alt="光线昏暗" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
|
||||
<div style="font-size: 13px; color: #888; margin-top: 4px;">
|
||||
光线昏暗
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 1; text-align: center;">
|
||||
<img src="@/assets/badge/suiji.png" alt="后侧面及背影" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;" />
|
||||
<div style="font-size: 13px; color: #888; margin-top: 4px;">后侧面及背影</div>
|
||||
<img src="@/assets/badge/suiji.png" alt="后侧面及背影" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
|
||||
<div style="font-size: 13px; color: #888; margin-top: 4px;">
|
||||
后侧面及背影
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; margin-bottom: 24px;">
|
||||
<div style="flex: 1; text-align: center;">
|
||||
<img src="@/assets/badge/suiji.png" alt="照片模糊" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;" />
|
||||
<div style="font-size: 13px; color: #888; margin-top: 4px;">照片模糊</div>
|
||||
<img src="@/assets/badge/suiji.png" alt="照片模糊" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
|
||||
<div style="font-size: 13px; color: #888; margin-top: 4px;">
|
||||
照片模糊
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 1; text-align: center;">
|
||||
<img src="@/assets/badge/suiji.png" alt="照片留白过少" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;" />
|
||||
<div style="font-size: 13px; color: #888; margin-top: 4px;">照片留白过少</div>
|
||||
<img src="@/assets/badge/suiji.png" alt="照片留白过少" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;">
|
||||
<div style="font-size: 13px; color: #888; margin-top: 4px;">
|
||||
照片留白过少
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 24px; text-align: center;">
|
||||
@@ -251,34 +340,6 @@
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import cropper from "./cropper.vue";
|
||||
const show = ref(false);
|
||||
const imgShow = ref(false);
|
||||
const router = useRouter();
|
||||
const imgurl = ref(''); //头像地址
|
||||
const fileInput = ref<HTMLInputElement | null>(null);
|
||||
function onUploadClick() {
|
||||
if (fileInput.value) {
|
||||
fileInput.value.click();
|
||||
}
|
||||
}
|
||||
function myUpload(rsp) {
|
||||
const self = this;
|
||||
self.imgurl = rsp.path; //更新头像方式一
|
||||
}
|
||||
function goToRecord() {
|
||||
router.push('/badge/record');
|
||||
}
|
||||
function goToMyOrder() {
|
||||
router.push('/badge/myOrder');
|
||||
}
|
||||
function goToPreview() {
|
||||
router.push('/badge/preview');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.photo-upload-page {
|
||||
@@ -704,4 +765,4 @@ function goToPreview() {
|
||||
width: 18px;
|
||||
height: 12px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Reference in new issue
Block a user