|
- <template>
- <view class="page">
- <view class="title imgContenBox">
- <!-- 提示文字 -->
- <image
- v-show="uploadState == 1"
- src="../../assets/text/uploadText.png"
- mode="aspectFit" /><image
- aspectFit
- v-show="uploadState == 2"
- src="../../assets/text/uploadText2.png"
- mode="aspectFit" /><image
- v-show="uploadState == 3"
- src="../../assets/text/uploadText3.png"
- mode="aspectFit"
- /></view>
- <!-- 上传图片和展示 -->
- <view class="uploadBox imgContenBox scan">
- <view class="scan-line"></view>
- <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"
- text="上传我的照片"
- color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
- @click="toCloseStyle"
- ></up-button>
- <view class="tips">请按照样片上传您五官清晰的正面照片</view>
- <view class="demoImgBox">
- <view class="demoImg1"></view>
- <view class="demoImg2"></view>
- <view class="demoImg1"></view>
- </view>
- </view>
- </template>
-
- <script setup>
- //#region 导入
- import { ref, reactive } from "vue";
- import { voiceTotalApi } from "../../api/login.js";
- //#endregion
-
- //#region 上传
- 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);
- },
- });
- }
-
- function toCloseStyle() {
- if (showImgUrl.value) {
- uni.redirectTo({
- url: "/pages/closeStyle/closeStyle",
- });
- } else {
- uni.showToast({
- title: "请先上传图片",
- icon: "none",
- });
- }
- }
-
- //#endregion ---------------------
-
- //#region
-
- //#endregion ---------------------
- </script>
-
- <style lang="scss">
- .title {
- width: 100%;
- height: 80rpx;
- image {
- // min-width: 40%;
- height: 80rpx;
- }
- }
- .uploadBox {
- position: relative;
- width: 600rpx;
- height: 600rpx;
- border: 5rpx solid #000;
- border-radius: 50rpx;
- margin-bottom: 50rpx;
- image {
- 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 {
- overflow: hidden;
- .scan-line {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 40%;
- 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 {
- 0% {
- transform: translateY(-150%);
- }
- 100% {
- transform: translateY(150%);
- }
- }
- }
- // 上传
- .u-button {
- width: 70% !important;
- }
- .tips {
- margin-top: 20rpx;
- margin-bottom: 20rpx;
- }
- </style>
|