congzc 1 rok temu
rodzic
commit
d9c4939a65
2 zmienionych plików z 75 dodań i 14 usunięć
  1. +21
    -9
      src/pages/index/index.vue
  2. +54
    -5
      src/pages/uploadPhoto/uploadPhoto.vue

+ 21
- 9
src/pages/index/index.vue Wyświetl plik

@@ -1,11 +1,14 @@
<template>
<view class="page">
<video
src="https://video.metavatar.cc/sv/d51a6f6-187fa2dff79/d51a6f6-187fa2dff79.mp4"
autoplay
muted
:controls="false"
/>
<view class="videoBox">
<video
src="https://video.metavatar.cc/sv/d51a6f6-187fa2dff79/d51a6f6-187fa2dff79.mp4"
autoplay
muted
loop
:controls="false"
/>
</view>
<up-button
type="primary"
text="开始制作我的数字分身"
@@ -75,9 +78,18 @@ function handleLogin() {
</script>
<style lang="scss">
video {
width: 100%;
aspect-ratio: 9/16;
.page {
padding: 0;
}
.videoBox {
width: 750rpx;
height: 1120rpx;
// aspect-ratio: 9/12;
video {
width: 100%;
height: 100%;
// aspect-ratio: 9/12;
}
}
button {
margin-top: 50rpx;


+ 54
- 5
src/pages/uploadPhoto/uploadPhoto.vue Wyświetl plik

@@ -1,6 +1,7 @@
<template>
<view class="page">
<view class="title imgContenBox">
<!-- 提示文字 -->
<image
v-show="uploadState == 1"
src="../../assets/text/uploadText.png"
@@ -13,9 +14,23 @@
src="../../assets/text/uploadText3.png"
mode="aspectFit"
/></view>
<!-- 上传图片和展示 -->
<view class="uploadBox imgContenBox scan">
<view class="scan-line"></view>
<image src="../../assets/icon/uploadImg.png" alt="" />
<image
v-show="!showImgUrl"
src="../../assets/icon/uploadImg.png"
alt=""
@click="chooseImage"
/>
<image
class="showImg"
v-show="showImgUrl"
:src="showImgUrl"
alt=""
@click="chooseImage"
mode="aspectFit"
/>
</view>
<up-button
type="primary"
@@ -39,7 +54,26 @@ import { voiceTotalApi } from "../../api/login.js";
//#endregion
//#region 上传
const uploadState = ref(3);
const uploadState = ref(3); //上传状态
const showImgUrl = ref(null);
function chooseImage() {
// 调用uni.chooseImage方法选择图片
uni.chooseImage({
count: 1, // 最多可以选择的图片张数,这里设置为1,只选择一张图片
success: (res) => {
// 选择成功,返回的res.tempFilePaths是一个数组,包含选择的图片的临时文件路径
const tempFilePaths = res.tempFilePaths;
console.log(tempFilePaths);
showImgUrl.value = tempFilePaths[0];
// TODO: 在这里处理图片上传逻辑,你可以调用上传接口将图片上传到服务器
// 示例代码:
// uploadImageToServer(tempFilePaths[0]);
},
fail: (err) => {
console.error("选择图片失败", err);
},
});
}
//#endregion ---------------------
@@ -58,8 +92,9 @@ const uploadState = ref(3);
}
}
.uploadBox {
width: 80%;
aspect-ratio: 1/1;
position: relative;
width: 600rpx;
height: 600rpx;
border: 5rpx solid #000;
border-radius: 50rpx;
margin-bottom: 50rpx;
@@ -67,9 +102,21 @@ const uploadState = ref(3);
max-width: 30%;
max-height: 30%;
}
.showImg {
max-width: 90%;
max-height: 90%;
}
.u-upload {
position: absolute;
top: 0;
left: 0;
width: 600rpx;
height: 600rpx;
opacity: 0;
}
}
// 扫描
.scan {
position: relative;
overflow: hidden;
.scan-line {
position: absolute;
@@ -80,6 +127,7 @@ const uploadState = ref(3);
background: linear-gradient(180deg, rgba(0, 255, 51, 0) 50%, #00ff33 300%);
border-bottom: 2px solid #00ff33;
animation: scanAnimation 2s linear infinite;
z-index: 9;
}
@keyframes scanAnimation {
@@ -91,6 +139,7 @@ const uploadState = ref(3);
}
}
}
// 上传
.u-button {
width: 70% !important;
}


Ładowanie…
Anuluj
Zapisz