congzc 1 year ago
parent
commit
d9c4939a65
2 changed files with 75 additions and 14 deletions
  1. +21
    -9
      src/pages/index/index.vue
  2. +54
    -5
      src/pages/uploadPhoto/uploadPhoto.vue

+ 21
- 9
src/pages/index/index.vue View File

@@ -1,11 +1,14 @@
<template> <template>
<view class="page"> <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 <up-button
type="primary" type="primary"
text="开始制作我的数字分身" text="开始制作我的数字分身"
@@ -75,9 +78,18 @@ function handleLogin() {
</script> </script>
<style lang="scss"> <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 { button {
margin-top: 50rpx; margin-top: 50rpx;


+ 54
- 5
src/pages/uploadPhoto/uploadPhoto.vue View File

@@ -1,6 +1,7 @@
<template> <template>
<view class="page"> <view class="page">
<view class="title imgContenBox"> <view class="title imgContenBox">
<!-- 提示文字 -->
<image <image
v-show="uploadState == 1" v-show="uploadState == 1"
src="../../assets/text/uploadText.png" src="../../assets/text/uploadText.png"
@@ -13,9 +14,23 @@
src="../../assets/text/uploadText3.png" src="../../assets/text/uploadText3.png"
mode="aspectFit" mode="aspectFit"
/></view> /></view>
<!-- 上传图片和展示 -->
<view class="uploadBox imgContenBox scan"> <view class="uploadBox imgContenBox scan">
<view class="scan-line"></view> <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> </view>
<up-button <up-button
type="primary" type="primary"
@@ -39,7 +54,26 @@ import { voiceTotalApi } from "../../api/login.js";
//#endregion //#endregion
//#region 上传 //#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 --------------------- //#endregion ---------------------
@@ -58,8 +92,9 @@ const uploadState = ref(3);
} }
} }
.uploadBox { .uploadBox {
width: 80%;
aspect-ratio: 1/1;
position: relative;
width: 600rpx;
height: 600rpx;
border: 5rpx solid #000; border: 5rpx solid #000;
border-radius: 50rpx; border-radius: 50rpx;
margin-bottom: 50rpx; margin-bottom: 50rpx;
@@ -67,9 +102,21 @@ const uploadState = ref(3);
max-width: 30%; max-width: 30%;
max-height: 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 { .scan {
position: relative;
overflow: hidden; overflow: hidden;
.scan-line { .scan-line {
position: absolute; position: absolute;
@@ -80,6 +127,7 @@ const uploadState = ref(3);
background: linear-gradient(180deg, rgba(0, 255, 51, 0) 50%, #00ff33 300%); background: linear-gradient(180deg, rgba(0, 255, 51, 0) 50%, #00ff33 300%);
border-bottom: 2px solid #00ff33; border-bottom: 2px solid #00ff33;
animation: scanAnimation 2s linear infinite; animation: scanAnimation 2s linear infinite;
z-index: 9;
} }
@keyframes scanAnimation { @keyframes scanAnimation {
@@ -91,6 +139,7 @@ const uploadState = ref(3);
} }
} }
} }
// 上传
.u-button { .u-button {
width: 70% !important; width: 70% !important;
} }


Loading…
Cancel
Save