邃芒智像(Uniapp : WX、TT、H5)
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
 
 
 
 

164 linhas
3.8 KiB

  1. <template>
  2. <view class="page">
  3. <view class="title imgContenBox">
  4. <!-- 提示文字 -->
  5. <image
  6. v-show="uploadState == 1"
  7. src="../../assets/text/uploadText.png"
  8. mode="aspectFit" /><image
  9. aspectFit
  10. v-show="uploadState == 2"
  11. src="../../assets/text/uploadText2.png"
  12. mode="aspectFit" /><image
  13. v-show="uploadState == 3"
  14. src="../../assets/text/uploadText3.png"
  15. mode="aspectFit"
  16. /></view>
  17. <!-- 上传图片和展示 -->
  18. <view class="uploadBox imgContenBox scan">
  19. <view class="scan-line"></view>
  20. <image
  21. v-show="!showImgUrl"
  22. src="../../assets/icon/uploadImg.png"
  23. alt=""
  24. @click="chooseImage"
  25. />
  26. <image
  27. class="showImg"
  28. v-show="showImgUrl"
  29. :src="showImgUrl"
  30. alt=""
  31. @click="chooseImage"
  32. mode="aspectFit"
  33. />
  34. </view>
  35. <up-button
  36. type="primary"
  37. text="上传我的照片"
  38. color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
  39. @click="toCloseStyle"
  40. ></up-button>
  41. <view class="tips">请按照样片上传您五官清晰的正面照片</view>
  42. <view class="demoImgBox">
  43. <view class="demoImg1"></view>
  44. <view class="demoImg2"></view>
  45. <view class="demoImg1"></view>
  46. </view>
  47. </view>
  48. </template>
  49. <script setup>
  50. //#region 导入
  51. import { ref, reactive } from "vue";
  52. import { voiceTotalApi } from "../../api/login.js";
  53. //#endregion
  54. //#region 上传
  55. const uploadState = ref(3); //上传状态
  56. const showImgUrl = ref(null);
  57. function chooseImage() {
  58. // 调用uni.chooseImage方法选择图片
  59. uni.chooseImage({
  60. count: 1, // 最多可以选择的图片张数,这里设置为1,只选择一张图片
  61. success: (res) => {
  62. // 选择成功,返回的res.tempFilePaths是一个数组,包含选择的图片的临时文件路径
  63. const tempFilePaths = res.tempFilePaths;
  64. console.log(tempFilePaths);
  65. showImgUrl.value = tempFilePaths[0];
  66. // TODO: 在这里处理图片上传逻辑,你可以调用上传接口将图片上传到服务器
  67. // 示例代码:
  68. // uploadImageToServer(tempFilePaths[0]);
  69. },
  70. fail: (err) => {
  71. console.error("选择图片失败", err);
  72. },
  73. });
  74. }
  75. function toCloseStyle() {
  76. if (showImgUrl.value) {
  77. uni.redirectTo({
  78. url: "/pages/closeStyle/closeStyle",
  79. });
  80. } else {
  81. uni.showToast({
  82. title: "请先上传图片",
  83. icon: "none",
  84. });
  85. }
  86. }
  87. //#endregion ---------------------
  88. //#region
  89. //#endregion ---------------------
  90. </script>
  91. <style lang="scss">
  92. .title {
  93. width: 100%;
  94. height: 80rpx;
  95. image {
  96. // min-width: 40%;
  97. height: 80rpx;
  98. }
  99. }
  100. .uploadBox {
  101. position: relative;
  102. width: 600rpx;
  103. height: 600rpx;
  104. border: 5rpx solid #000;
  105. border-radius: 50rpx;
  106. margin-bottom: 50rpx;
  107. image {
  108. max-width: 30%;
  109. max-height: 30%;
  110. }
  111. .showImg {
  112. max-width: 90%;
  113. max-height: 90%;
  114. }
  115. .u-upload {
  116. position: absolute;
  117. top: 0;
  118. left: 0;
  119. width: 600rpx;
  120. height: 600rpx;
  121. opacity: 0;
  122. }
  123. }
  124. // 扫描
  125. .scan {
  126. overflow: hidden;
  127. .scan-line {
  128. position: absolute;
  129. top: 0;
  130. left: 0;
  131. width: 100%;
  132. height: 40%;
  133. background: linear-gradient(180deg, rgba(0, 255, 51, 0) 50%, #00ff33 300%);
  134. border-bottom: 2px solid #00ff33;
  135. animation: scanAnimation 2s linear infinite;
  136. z-index: 9;
  137. }
  138. @keyframes scanAnimation {
  139. 0% {
  140. transform: translateY(-150%);
  141. }
  142. 100% {
  143. transform: translateY(150%);
  144. }
  145. }
  146. }
  147. // 上传
  148. .u-button {
  149. width: 70% !important;
  150. }
  151. .tips {
  152. margin-top: 20rpx;
  153. margin-bottom: 20rpx;
  154. }
  155. </style>