forked from natuka/web.puabadge.com
Initial commit
This commit is contained in:
natuka committed
commit
84061c9a18
243 files changed
+63148
No files matched your search
@@ -0,0 +1,267 @@
|
||||
<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>
|
||||
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');
|
||||
|
||||
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.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.pxRatio = this.windowWidth / 750;
|
||||
|
||||
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));
|
||||
|
||||
if (this.styleDisplay === 'flex') {
|
||||
this.fDrawInit(true);
|
||||
}
|
||||
this.fHideImg();
|
||||
},
|
||||
fSelect() {
|
||||
if (this.fSelecting) return;
|
||||
this.fSelecting = true;
|
||||
setTimeout(() => {
|
||||
this.fSelecting = false;
|
||||
}, 500);
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = 'image/*';
|
||||
input.onchange = (e) => {
|
||||
const file = e.target.files[0];
|
||||
if(!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const path = e.target.result;
|
||||
this.imgPath = path;
|
||||
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
this.imgWidth = img.width;
|
||||
this.imgHeight = img.height;
|
||||
this.path = path;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
this.fDrawInit(true);
|
||||
};
|
||||
img.src = path;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
input.click();
|
||||
},
|
||||
fUpload() {
|
||||
if (this.fUploading) return;
|
||||
this.fUploading = true;
|
||||
setTimeout(() => {
|
||||
this.fUploading = false;
|
||||
}, 1000);
|
||||
|
||||
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;
|
||||
|
||||
x *= this.pixelRatio;
|
||||
y *= this.pixelRatio;
|
||||
expWidth = width;
|
||||
expHeight = height;
|
||||
|
||||
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>
|
||||
|
||||
<style lang="less">
|
||||
.my-canvas {
|
||||
display: flex;
|
||||
position: fixed !important;
|
||||
background: #000000;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.my-avatar {
|
||||
width: 100vw;
|
||||
height: 100vw;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.hover {
|
||||
color: #f1f1f1;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,707 @@
|
||||
<template>
|
||||
<div class="photo-upload-page">
|
||||
<div class="badge-size">
|
||||
<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>
|
||||
<div class="size-item">
|
||||
<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>
|
||||
<div class="badge-item" @click="goToMyOrder">
|
||||
<div class="badge-title">我的订单</div>
|
||||
<div class="badge-count">3笔</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 8px;background: #F2F2F2;"></div>
|
||||
<div class="step-container">
|
||||
<div class="step-item active">
|
||||
<div class="step-num">1</div>
|
||||
<div class="step-content">
|
||||
<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-content">
|
||||
<div class="step-title">确认下单</div>
|
||||
<div class="step-desc">选择一个你喜欢的设计</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="photo-upload-box">
|
||||
<div class="photo-upload-header" @click="imgShow = true">
|
||||
<van-icon name="question-o" size="16px" class="photo-upload-guide-icon" />
|
||||
<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>
|
||||
<div class="photo-upload-footer">
|
||||
请确定您对上传的照片拥有合法使用权利或已取得他人合法授权，且同意本平台分析图片信息以提供生成服务
|
||||
</div>
|
||||
</div>
|
||||
<div class="style-section">
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-style-section">
|
||||
<div class="bg-style-header">
|
||||
<span class="bg-style-title">背景样式</span>
|
||||
<span class="bg-style-desc disabled" @click="show = true">
|
||||
<van-icon name="question-o" size="16px" />
|
||||
<span class="iconfont" style="margin-left:5px;font-size:14px;vertical-align:middle;">背景样式说明</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="bg-style-tabs">
|
||||
<button
|
||||
class="bg-style-tab active"
|
||||
type="button"
|
||||
>
|
||||
照片原图背景
|
||||
</button>
|
||||
<button
|
||||
class="bg-style-tab"
|
||||
type="button"
|
||||
disabled
|
||||
>
|
||||
补充背景照片
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-style-tip">
|
||||
选择该选项设计的徽章会根据上传的肖像照片背景进行生成效果
|
||||
</div>
|
||||
<div class="bg-style-tip">
|
||||
选择该选项需要额外上传一张照片作为背景
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-photo-upload-section">
|
||||
<div class="bg-photo-upload-header">
|
||||
<span>补充背景照片</span>
|
||||
</div>
|
||||
<div class="bg-photo-upload-area">
|
||||
<label class="bg-photo-upload-label">
|
||||
<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>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 90px;"></div>
|
||||
<div class="design-action-bar">
|
||||
<div class="design-left">
|
||||
<img class="design-leaf-icon" width="18" height="18" src="@/assets/badge/leaf.png" alt="">
|
||||
<span class="design-remaining">剩余12次</span>
|
||||
</div>
|
||||
<button class="design-btn" @click="goToPreview">
|
||||
<span>开始设计</span>
|
||||
<img class="design-arrow" src="@/assets/badge/arrow.png" alt="">
|
||||
</button>
|
||||
</div>
|
||||
</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-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;" />
|
||||
<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;" />
|
||||
</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;" />
|
||||
<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;" />
|
||||
</div>
|
||||
<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;" />
|
||||
</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">
|
||||
我已了解
|
||||
</button>
|
||||
</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;" />
|
||||
</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>
|
||||
<span style="background: #e6f7e6; color: #22c55e; border-radius: 8px; padding: 2px 10px; font-size: 13px;">照片清晰</span>
|
||||
<span style="background: #e6f7e6; color: #22c55e; border-radius: 8px; padding: 2px 10px; font-size: 13px;">主体明确</span>
|
||||
<span style="background: #e6f7e6; color: #22c55e; border-radius: 8px; padding: 2px 10px; font-size: 13px;">面部特征明显</span>
|
||||
<span style="background: #e6f7e6; color: #22c55e; border-radius: 8px; padding: 2px 10px; font-size: 13px;">预留充足留白</span>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 24px; 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="imgShow = false">
|
||||
我已了解
|
||||
</button>
|
||||
</div>
|
||||
</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 {
|
||||
height: auto;
|
||||
overflow-y: scroll!important;
|
||||
}
|
||||
.badge-size {
|
||||
padding: 16px;
|
||||
.size-title {
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
}
|
||||
.size-options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 8px;
|
||||
.size-item:last-child {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.size-item {
|
||||
flex: 1;
|
||||
.size-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
padding: 4px 10px;
|
||||
background: #F0F2F5;
|
||||
border-radius: 4px;
|
||||
margin-right: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
.size-count {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.badge-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px 16px 16px;
|
||||
.badge-item:first-child {
|
||||
background-image: url('@/assets/badge/sheji.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.badge-item:last-child {
|
||||
background-image: url('@/assets/badge/order.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.badge-item {
|
||||
padding: 18px 12px;
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
height: 88px;
|
||||
.badge-title {
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.badge-count {
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.step-container {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 16px 0 16px 16px;
|
||||
}
|
||||
.step-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.step-item.active {
|
||||
flex: 2;
|
||||
margin-left: 50px;
|
||||
}
|
||||
.step-num {
|
||||
font-size: 48px;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
margin-right: 8px;
|
||||
text-shadow: 0 2px 8px #e6f7e6;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
.step-item.active .step-num {
|
||||
color: #fff;
|
||||
text-shadow:
|
||||
1px 1px 0 #000,
|
||||
-1px -1px 0 #000,
|
||||
-1px 1px 0 #000,
|
||||
1px -1px 0 #000,
|
||||
0 1px 0 #000,
|
||||
1px 0 0 #000,
|
||||
0 -1px 0 #000,
|
||||
-1px 0 0 #000;
|
||||
}
|
||||
.step-item.active .step-num::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 0;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background-color: #50cf54;
|
||||
opacity: 0.5;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.step-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.step-title {
|
||||
font-size: 16px;
|
||||
color: #808080;;
|
||||
}
|
||||
.step-desc {
|
||||
font-size: 12px;
|
||||
color: #808080;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.photo-upload-box {
|
||||
margin: 16px auto 0 auto;
|
||||
width: 80vw;
|
||||
height: 80vw;
|
||||
border-radius: 12px;
|
||||
background: #F0F2F5;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.photo-upload-header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px 0 12px;
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.photo-upload-guide-icon {
|
||||
font-size: 16px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.photo-upload-guide-text {
|
||||
font-size: 13px;
|
||||
}
|
||||
.photo-upload-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
}
|
||||
.photo-upload-plus {
|
||||
font-size: 48px;
|
||||
color: #c2c2c2;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.photo-upload-text {
|
||||
font-size: 16px;
|
||||
color: #888;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.photo-upload-tip {
|
||||
font-size: 12px;
|
||||
color: #b0b0b0;
|
||||
}
|
||||
.photo-upload-footer {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #b0b0b0;
|
||||
padding: 0 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.style-section {
|
||||
margin: 16px 0 0 0;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.style-title {
|
||||
font-size: 16px;
|
||||
color: #222;
|
||||
font-weight: bold;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.style-list {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
overflow-x: scroll;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
}
|
||||
.style-list::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari, Opera */
|
||||
}
|
||||
.style-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
width: 25vw;
|
||||
}
|
||||
.style-img {
|
||||
width: 23vw;
|
||||
height: 23vw;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
background: #f5f5f5;
|
||||
border: 2px solid transparent;
|
||||
transition: border 0.2s;
|
||||
}
|
||||
.style-item .style-selected {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
bottom: 30px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #50cf54;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #fff;
|
||||
display: inline-block;
|
||||
box-shadow: 0 2px 8px rgba(80, 207, 84, 0.2);
|
||||
}
|
||||
.style-item .style-selected::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 6px;
|
||||
border-left: 2px solid #fff;
|
||||
border-bottom: 2px solid #fff;
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 5px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.style-item .style-label {
|
||||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.style-item:hover .style-img,
|
||||
.style-item .style-selected ~ .style-img {
|
||||
border: 2px solid #50cf54;
|
||||
}
|
||||
|
||||
.bg-style-section {
|
||||
margin: 24px 0 0 0;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.bg-style-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.bg-style-title {
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.bg-style-desc {
|
||||
font-size: 13px;
|
||||
color: #808080;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.bg-style-desc.disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
.bg-style-tabs {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.bg-style-tab {
|
||||
padding: 6px 18px;
|
||||
border: none;
|
||||
border-radius: 18px;
|
||||
background: #f0f2f5;
|
||||
color: #333;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
.bg-style-tab.active {
|
||||
background: #e6f7e6;
|
||||
color: #22c55e;
|
||||
font-weight: bold;
|
||||
}
|
||||
.bg-style-tab:disabled {
|
||||
background: #f0f2f5;
|
||||
color: #b0b0b0;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.bg-style-tip {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.bg-photo-upload-section {
|
||||
margin: 24px 0 0 0;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.bg-photo-upload-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.bg-photo-upload-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.bg-photo-upload-label {
|
||||
display: inline-block;
|
||||
}
|
||||
.bg-photo-upload-box {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border: 2px dashed #b0b0b0;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
background: #fafafa;
|
||||
transition: border 0.2s;
|
||||
}
|
||||
.bg-photo-upload-plus {
|
||||
font-size: 32px;
|
||||
color: #b0b0b0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.bg-photo-upload-text {
|
||||
font-size: 16px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.design-action-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
.design-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.design-leaf-icon {
|
||||
margin-right: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.design-remaining {
|
||||
color: #222;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.design-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
width: 50vw;
|
||||
height: 56px;
|
||||
border-radius: 28px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
background: linear-gradient(90deg, #D1ED8E 0%, #55E668 100%);
|
||||
color: #222;
|
||||
box-shadow: 0 2px 8px rgba(80, 207, 84, 0.10);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.design-btn .design-arrow {
|
||||
margin-left: 20px;
|
||||
vertical-align: middle;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
transition: transform 0.2s;
|
||||
width: 18px;
|
||||
height: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div class="my-order">
|
||||
<div class="header" @click="goBack">
|
||||
<span class="back-icon"><van-icon name="arrow-left" size="16px" /> 返回</span>
|
||||
</div>
|
||||
<div class="order-list">
|
||||
<div class="order-item" @click="OrderDetail">
|
||||
<img class="order-img" src="@/assets/badge/suiji.png" alt="order1" />
|
||||
<span class="order-status status-processing">生产中</span>
|
||||
</div>
|
||||
<div class="order-item">
|
||||
<img class="order-img" src="@/assets/badge/suiji.png" alt="order2" />
|
||||
<span class="order-status status-finished">已完成</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router';
|
||||
const router = useRouter();
|
||||
function goBack() {
|
||||
router.push('/badge');
|
||||
}
|
||||
function OrderDetail() {
|
||||
router.push('/badge/orderDetail')
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
padding: 16px 16px 0 16px;
|
||||
}
|
||||
.back-icon {
|
||||
margin-right: 8px;
|
||||
color: #222;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.order-list {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: space-between;
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.order-item {
|
||||
position: relative;
|
||||
width: 43vw;
|
||||
height: 43vw;
|
||||
/* border-radius: 50%; */
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.order-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.order-status {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
padding: 2px 14px;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
background: #bdbdbd;
|
||||
opacity: 0.9;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.status-processing {
|
||||
background: #bdbdbd;
|
||||
}
|
||||
|
||||
.status-finished {
|
||||
background: #8bc34a;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<div class="my-order">
|
||||
<div class="header" @click="goBack">
|
||||
<span class="back-icon"><van-icon name="arrow-left" size="16px" /> 返回</span>
|
||||
</div>
|
||||
<div class="order-status">
|
||||
<div class="avatar-wrapper">
|
||||
<img class="avatar-img" src="@/assets/badge/suiji.png" alt="生产中" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-info">
|
||||
<div class="status-title">生产中</div>
|
||||
<div class="status-desc">
|
||||
下单后预计需要7天完成生产发货。如对产品有疑问，可以联系客服咨询。
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 0 16px;">
|
||||
<van-divider />
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<div class="product-title">产品信息</div>
|
||||
<div class="product-details">
|
||||
<div class="product-row">
|
||||
<span class="product-label">产品名称</span>
|
||||
<span class="product-value">立体徽章</span>
|
||||
</div>
|
||||
<div class="product-row">
|
||||
<span class="product-label">尺寸</span>
|
||||
<span class="product-value">5cm</span>
|
||||
</div>
|
||||
<div class="product-row">
|
||||
<span class="product-label">购买数量</span>
|
||||
<span class="product-value">1</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 0 16px;">
|
||||
<van-divider />
|
||||
</div>
|
||||
<div class="address-info" style="padding: 0 16px;">
|
||||
<div class="address-title">收货信息</div>
|
||||
<div class="address-row">
|
||||
<img class="address-img" src="@/assets/badge/location.png" alt="" >
|
||||
<span class="address-name">张先生</span>
|
||||
<span class="address-phone">136****0731</span>
|
||||
</div>
|
||||
<div class="address-detail">
|
||||
详细地址详细地址详细地址详细地址详细地址详细地址
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 0 16px;">
|
||||
<van-divider />
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<div class="product-title">订单信息</div>
|
||||
<div class="product-details">
|
||||
<div class="product-row">
|
||||
<span class="product-label">购买订单id</span>
|
||||
<span class="product-value">O98462</span>
|
||||
</div>
|
||||
<div class="product-row">
|
||||
<span class="product-label">购买时间</span>
|
||||
<span class="product-value">2025-03-24 16:12:46</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 30px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
const router = useRouter();
|
||||
function goBack() {
|
||||
router.push('/badge/myOrder');
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
padding: 16px 16px 0 16px;
|
||||
}
|
||||
.back-icon {
|
||||
margin-right: 8px;
|
||||
color: #222;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.order-status {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 32px;
|
||||
}
|
||||
.avatar-wrapper {
|
||||
width: 85vw;
|
||||
height: 85vw;
|
||||
border-radius: 50%;
|
||||
box-shadow: 2px 2px 4px #00000042,inset -2px -2px 4px #00000048,inset 2px 2px 4px #ffffffb4;
|
||||
margin-bottom: 24px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.status-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.status-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.status-desc {
|
||||
font-size: 10px;
|
||||
color: #888;
|
||||
}
|
||||
.product-info {
|
||||
width: 100%;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.product-title {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #111;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.product-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.product-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.product-label {
|
||||
color: #bdbdbd;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.product-value {
|
||||
color: #222;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.address-info {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.address-title {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #111;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.address-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: #222;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.address-img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.address-name {
|
||||
margin-right: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.address-phone {
|
||||
color: #888;
|
||||
font-size: 13px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.address-detail {
|
||||
font-size: 12px;
|
||||
color: #bdbdbd;
|
||||
margin-left: 24px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,381 @@
|
||||
<template>
|
||||
<div class="preview-container">
|
||||
<view class="backstyle_1"></view>
|
||||
<view class="backstyle_2"></view>
|
||||
<div class="header" @click="goBack">
|
||||
<span class="back-icon"><van-icon name="arrow-left" size="16px" /> 返回</span>
|
||||
</div>
|
||||
<div class="step-container">
|
||||
<div class="step-item">
|
||||
<div class="step-content">
|
||||
<div class="step-title">正面照片</div>
|
||||
<div class="step-desc">清晰的正面照片</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-item active">
|
||||
<div class="step-num">2</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">确认下单</div>
|
||||
<div class="step-desc">选择一个你喜欢的设计</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-section">
|
||||
<div class="progress-bar-bg">
|
||||
<div class="progress-bar-fg" :style="{ width: '12%' }"></div>
|
||||
</div>
|
||||
<div class="progress-text">照片数据分析中 12%</div>
|
||||
<div class="progress-desc">总计大约需要60秒，请耐心等待...</div>
|
||||
</div>
|
||||
<div class="info-section">
|
||||
<div class="info-item">
|
||||
<div class="info-title">芯比风格</div>
|
||||
<div class="info-content">风格</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-title">3D全彩打印</div>
|
||||
<div class="info-content">工艺</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-title">环保树脂</div>
|
||||
<div class="info-content">材料</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-desc">
|
||||
下单后如对排版要求有变更生产发货。<br>
|
||||
实物3D打印色彩与图片有自然色差，如对产品有疑问，可以联系客服咨询。
|
||||
</div>
|
||||
<div style="padding: 0 16px;">
|
||||
<van-divider />
|
||||
</div>
|
||||
<div class="order-section">
|
||||
<div class="order-title">订购数量</div>
|
||||
<div class="order-item">
|
||||
<span class="order-size">4cm</span>
|
||||
<span class="order-free">(剩余兑换：1)</span>
|
||||
<div class="order-ctrl">
|
||||
<button class="order-btn" disabled>-</button>
|
||||
<span class="order-count">1</span>
|
||||
<button class="order-btn">+</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-item">
|
||||
<span class="order-size">5cm</span>
|
||||
<span class="order-free">(剩余兑换：2)</span>
|
||||
<div class="order-ctrl">
|
||||
<button class="order-btn" disabled>-</button>
|
||||
<span class="order-count">1</span>
|
||||
<button class="order-btn">+</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="confirm-box">
|
||||
<div class="action-section">
|
||||
<button class="action-btn"><img class="action-img" src="@/assets/badge/reload.png" alt=""> 再次生成</button>
|
||||
<button class="action-btn"><img class="action-img" src="@/assets/badge/duibi.png" alt=""> 前后对比</button>
|
||||
<button class="action-btn"><img class="action-img" src="@/assets/badge/down.png" alt=""> 保存图片</button>
|
||||
</div>
|
||||
<div class="btn-box">
|
||||
<button class="confirm-btn">确认选择</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
const router = useRouter();
|
||||
function goBack() {
|
||||
router.push('/badge');
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.preview-container {
|
||||
min-height: 100vh;
|
||||
font-family: 'PingFang SC', Arial, sans-serif;
|
||||
color: #222;
|
||||
}
|
||||
.backstyle_1 {
|
||||
position: fixed;
|
||||
left: -110px;
|
||||
top: -40px;
|
||||
width: 328px;
|
||||
height: 216px;
|
||||
opacity: 0.2;
|
||||
transform: rotate(-13.72deg);
|
||||
border-radius: 50%;
|
||||
/* background: radial-gradient(48.48% 50% at 50% 50%, #EBD4A0 0%, #ebd5a000 81.94%); */
|
||||
background-image: radial-gradient( rgba(250, 182, 55, 0.726), #ebd5a09c, #d4cab100);
|
||||
z-index: -10;
|
||||
}
|
||||
.backstyle_2 {
|
||||
position: fixed;
|
||||
left: 97px;
|
||||
top: -95px;
|
||||
width: 370px;
|
||||
height: 374px;
|
||||
opacity: 0.1;
|
||||
border-radius: 50%;
|
||||
/* background: radial-gradient(59.73% 50% at 50% 50%, #90F272 0%, #90f27200 84.03%); */
|
||||
background-image: radial-gradient( rgb(69, 255, 63), #90f2729a, #90f27200);
|
||||
z-index: -10;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
padding: 16px 16px 0 16px;
|
||||
}
|
||||
.back-icon {
|
||||
margin-right: 8px;
|
||||
color: #222;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.step-container {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 16px 16px 16px 0;
|
||||
}
|
||||
.step-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.step-item.active {
|
||||
flex: 2.5;
|
||||
}
|
||||
.step-num {
|
||||
font-size: 48px;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
margin-right: 8px;
|
||||
text-shadow: 0 2px 8px #e6f7e6;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
.step-item.active .step-num {
|
||||
color: #fff;
|
||||
text-shadow:
|
||||
1px 1px 0 #000,
|
||||
-1px -1px 0 #000,
|
||||
-1px 1px 0 #000,
|
||||
1px -1px 0 #000,
|
||||
0 1px 0 #000,
|
||||
1px 0 0 #000,
|
||||
0 -1px 0 #000,
|
||||
-1px 0 0 #000;
|
||||
}
|
||||
.step-item.active .step-num::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 0;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background-color: #50cf54;
|
||||
opacity: 0.5;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.step-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.step-item.active .step-title {
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
.step-item.active .step-desc {
|
||||
color: #808080;
|
||||
font-size: 13px;
|
||||
}
|
||||
.step-title {
|
||||
font-size: 15px;
|
||||
color: #808080;;
|
||||
}
|
||||
.step-desc {
|
||||
font-size: 12px;
|
||||
color: #808080;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.progress-section {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
width: 80vw;
|
||||
height: 80vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.progress-bar-bg {
|
||||
width: 70%;
|
||||
height: 10px;
|
||||
background: #eee;
|
||||
border-radius: 5px;
|
||||
margin: 0 auto 8px auto;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.progress-bar-fg {
|
||||
height: 100%;
|
||||
background: #6fdc8c;
|
||||
border-radius: 5px;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
.progress-text {
|
||||
font-size: 15px;
|
||||
color: #222;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.progress-desc {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
.info-section {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding: 16px;
|
||||
}
|
||||
.info-item {
|
||||
flex: 1;
|
||||
}
|
||||
.info-title {
|
||||
font-size: 13px;
|
||||
color: #222;
|
||||
font-weight: 600;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.info-content {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
.info-desc {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-bottom: 18px;
|
||||
line-height: 1.5;
|
||||
text-align: left;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.order-section {
|
||||
border-radius: 10px;
|
||||
padding: 0 16px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.order-title {
|
||||
font-size: 14px;
|
||||
color: #222;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.order-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.order-size {
|
||||
font-size: 15px;
|
||||
color: #222;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.order-free {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-right: 16px;
|
||||
}
|
||||
.order-ctrl {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
}
|
||||
.order-btn {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border: none;
|
||||
background: #e8e8e8;
|
||||
color: #bbb;
|
||||
font-size: 18px;
|
||||
border-radius: 4px;
|
||||
margin: 0 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.order-btn:disabled {
|
||||
background: #f2f2f2;
|
||||
color: #ddd;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.order-count {
|
||||
font-size: 15px;
|
||||
color: #222;
|
||||
width: 22px;
|
||||
text-align: center;
|
||||
}
|
||||
.confirm-box {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
z-index: 10;
|
||||
padding: 0 16px 16px 16px;
|
||||
border-top: 1px solid #e6e6e6;
|
||||
}
|
||||
.action-section {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
margin: 0 4px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
color: #222;
|
||||
font-size: 13px;
|
||||
padding: 8px 0;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
}
|
||||
.action-img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.action-btn:hover {
|
||||
background: #e6f7ea;
|
||||
}
|
||||
.btn-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.confirm-btn {
|
||||
width: 80vw;
|
||||
background: linear-gradient(90deg, #D1ED8E 0%, #55E668 100%);
|
||||
color: #000;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
border-radius: 24px;
|
||||
padding: 12px 0;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 8px rgba(111,220,140,0.08);
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.confirm-btn:active {
|
||||
background: linear-gradient(90deg, #5ccf7a 0%, #8fdca0 100%);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="header" @click="goBack">
|
||||
<span class="back-icon"><van-icon name="arrow-left" size="16px" /> 返回</span>
|
||||
</div>
|
||||
<div class="record-container">
|
||||
<div class="record-note">
|
||||
注：可点击效果图进行下单打印
|
||||
</div>
|
||||
<div class="record-images">
|
||||
<div
|
||||
v-for="(item, idx) in images"
|
||||
:key="idx"
|
||||
@click="onImageClick(item)"
|
||||
class="record-image-item"
|
||||
>
|
||||
<img :src="item" class="record-image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router';
|
||||
const router = useRouter();
|
||||
function goBack() {
|
||||
router.push('/badge');
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
padding: 16px 16px 0 16px;
|
||||
}
|
||||
.back-icon {
|
||||
margin-right: 8px;
|
||||
color: #222;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.record-container {
|
||||
max-width: 500px;
|
||||
margin: 24px auto;
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.record-note {
|
||||
color: #888;
|
||||
font-size: 14px;
|
||||
margin-bottom: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.record-images {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.record-image-item {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
background: #f7f7f7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.record-image-item:hover {
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.14);
|
||||
}
|
||||
|
||||
.record-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user