邃芒智像(Uniapp : WX、TT、H5)
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
 
 
 
 

306 строки
7.1 KiB

  1. <template>
  2. <view class="page">
  3. <view class="title">
  4. <!-- 提示文字 -->
  5. <text class="tips">照片不符合规范,请重新上传</text>
  6. <text v-show="false" class="tips">添加一张正面照片</text>
  7. <text v-show="false" class="tips">数字形象生成中</text>
  8. </view>
  9. <!-- 上传图片和展示 -->
  10. <view class="uploadBox imgContenBox scan">
  11. <!-- 扫描线 -->
  12. <view class="scan-line"></view>
  13. <image
  14. class="scan-border"
  15. src="../../assets/img/scanBorder.png"
  16. mode="aspectFit"
  17. />
  18. <!-- 上传按钮 -->
  19. <image
  20. class="addImg"
  21. v-show="!showImgUrl"
  22. src="../../assets/icon/add.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. <view @click="toCloseStyle" class="uploadBtn">
  36. <text>上传我的照片</text>
  37. <view class="free">
  38. <image src="../../assets/icon/blackBG.png" mode="aspectFit" />
  39. <text>新用户免费制作</text>
  40. </view>
  41. </view>
  42. <!-- 底部盒子 -->
  43. <view class="bottomBox">
  44. <view class="tips2">请按照样片上传您五官清晰的正面照片</view>
  45. <view class="demoImgBox">
  46. <view class="imgBox">
  47. <image src="../../assets/img/img1.png" mode="aspectFit" />
  48. <view class="icon">
  49. <image src="../../assets/icon/error.png" mode="aspectFit" />
  50. </view>
  51. </view>
  52. <view class="imgBox">
  53. <image
  54. class="rightImg"
  55. src="../../assets/img/img2.png"
  56. mode="aspectFit"
  57. />
  58. <view class="icon">
  59. <image src="../../assets/icon/correct.png" mode="aspectFit" />
  60. </view>
  61. </view>
  62. <view class="imgBox">
  63. <image src="../../assets/img/img3.png" mode="aspectFit" />
  64. <view class="icon">
  65. <image src="../../assets/icon/error.png" mode="aspectFit" />
  66. </view>
  67. </view>
  68. </view>
  69. </view>
  70. </view>
  71. </template>
  72. <script setup>
  73. //#region 导入
  74. import { ref, reactive } from "vue";
  75. import { voiceTotalApi } from "../../api/login.js";
  76. import { userInfoModules } from "@/store/modules/userInfo";
  77. import imageCompression from "browser-image-compression"; //压缩图片插件
  78. //#endregion
  79. const userInfoModulesPinia = userInfoModules();
  80. //#region 上传
  81. const uploadState = ref(3); //上传状态
  82. const showImgUrl = ref(null);
  83. function chooseImage() {
  84. // 调用uni.chooseImage方法选择图片
  85. uni.chooseImage({
  86. count: 1, // 最多可以选择的图片张数,这里设置为1,只选择一张图片
  87. success: async (res) => {
  88. // 图片压缩
  89. console.log(res.tempFiles[0].size);
  90. if (userInfoModulesPinia.platForm != 1) {
  91. uni.compressImage({
  92. src: res.tempFilePaths[0],
  93. quality: 20,
  94. success: (res2) => {
  95. showImgUrl.value = res2.tempFilePath;
  96. console.log(res2.tempFilePath);
  97. },
  98. });
  99. } else {
  100. const options = {
  101. maxSizeMB: 2, // 最大压缩大小为 4MB
  102. useWebWorker: true, // 使用 Web Worker 进行压缩,提高性能
  103. };
  104. const compressedFile = await imageCompression(
  105. res.tempFiles[0],
  106. options
  107. );
  108. //compressedFile是一个blob对象
  109. showImgUrl.value = URL.createObjectURL(compressedFile);
  110. }
  111. },
  112. fail: (err) => {
  113. console.error("选择图片失败", err);
  114. },
  115. });
  116. }
  117. function toCloseStyle() {
  118. if (showImgUrl.value) {
  119. uni.redirectTo({
  120. url: "/pages/closeStyle/closeStyle",
  121. });
  122. } else {
  123. uni.showToast({
  124. title: "请先上传图片",
  125. icon: "none",
  126. });
  127. }
  128. }
  129. //#endregion ---------------------
  130. //#region
  131. //#endregion ---------------------
  132. </script>
  133. <style lang="scss">
  134. .page {
  135. position: relative;
  136. min-height: 100vh;
  137. background-color: rgba(0, 0, 0, 0.8);
  138. .bgc {
  139. position: absolute;
  140. width: 750rpx;
  141. height: 750rpx;
  142. transform: scale(1.5);
  143. top: 187rpx;
  144. left: 0;
  145. object-fit: cover;
  146. z-index: -2;
  147. backdrop-filter: blur(3px);
  148. }
  149. }
  150. .title {
  151. margin-bottom: 40rpx;
  152. .tips {
  153. margin-top: 20rpx;
  154. color: #fff;
  155. font-size: 44rpx;
  156. font-weight: 900;
  157. }
  158. }
  159. .uploadBox {
  160. position: relative;
  161. width: 420rpx;
  162. height: 560rpx;
  163. background-color: rgba(255, 255, 255, 0.1);
  164. border-radius: 50rpx;
  165. .scan-border {
  166. position: absolute;
  167. top: 50%;
  168. left: 50%;
  169. transform: translate(-50%, -50%);
  170. width: 360rpx;
  171. height: 480rpx;
  172. }
  173. .addImg {
  174. width: 80rpx;
  175. height: 80rpx;
  176. }
  177. .showImg {
  178. max-width: 90%;
  179. max-height: 90%;
  180. }
  181. .u-upload {
  182. position: absolute;
  183. top: 0;
  184. left: 0;
  185. width: 600rpx;
  186. height: 600rpx;
  187. opacity: 0;
  188. }
  189. }
  190. // 扫描
  191. .scan {
  192. overflow: hidden;
  193. .scan-line {
  194. position: absolute;
  195. top: 0;
  196. left: 0;
  197. width: 100%;
  198. height: 40%;
  199. background: linear-gradient(180deg, rgba(0, 255, 51, 0) 50%, #00ff33 300%);
  200. border-bottom: 2px solid #00ff33;
  201. animation: scanAnimation 2s linear infinite;
  202. z-index: 9;
  203. }
  204. @keyframes scanAnimation {
  205. 0% {
  206. transform: translateY(-150%);
  207. }
  208. 100% {
  209. transform: translateY(150%);
  210. }
  211. }
  212. }
  213. // 上传
  214. .uploadBtn {
  215. position: relative;
  216. margin-top: 75rpx;
  217. width: 520rpx;
  218. height: 100rpx;
  219. line-height: 100rpx;
  220. text-align: center;
  221. background: #ff4f00;
  222. border-radius: 50rpx;
  223. font-size: 30rpx;
  224. color: #fff;
  225. font-weight: 900;
  226. .free {
  227. position: absolute;
  228. top: -25rpx;
  229. right: -80rpx;
  230. width: 185rpx;
  231. height: 50rpx;
  232. image {
  233. position: absolute;
  234. top: 0;
  235. left: 0;
  236. width: 100%;
  237. height: 100%;
  238. z-index: 1;
  239. }
  240. text {
  241. position: absolute;
  242. top: -25rpx;
  243. left: 50%;
  244. transform: translate(-50%, 0);
  245. width: 100%;
  246. height: 100%;
  247. font-size: 22rpx;
  248. font-weight: 900;
  249. z-index: 2;
  250. }
  251. }
  252. }
  253. // 底部盒子
  254. .bottomBox {
  255. flex: 1;
  256. width: 100%;
  257. display: flex;
  258. flex-direction: column;
  259. align-items: center;
  260. justify-content: flex-end;
  261. padding: 0 0 90rpx 0;
  262. .tips2 {
  263. margin-top: 20rpx;
  264. margin-bottom: 15rpx;
  265. font-size: 22rpx;
  266. }
  267. .demoImgBox {
  268. display: flex;
  269. justify-content: space-between;
  270. align-items: flex-end;
  271. padding: 0 20rpx;
  272. width: 100%;
  273. .imgBox {
  274. position: relative;
  275. image {
  276. width: 180rpx;
  277. height: 180rpx;
  278. }
  279. .rightImg {
  280. width: 200rpx;
  281. height: 200rpx;
  282. }
  283. .icon {
  284. position: absolute;
  285. top: -8rpx;
  286. right: -8rpx;
  287. width: 36rpx;
  288. height: 36rpx;
  289. image {
  290. width: 100%;
  291. height: 100%;
  292. }
  293. }
  294. }
  295. }
  296. }
  297. </style>