邃芒智像(Uniapp : WX、TT、H5)
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 
 
 

542 行
13 KiB

  1. <template>
  2. <view :class="pageClass">
  3. <!-- 背景图 -->
  4. <!-- <image class="bgc" src="../../assets/img/avatar.png"></image> -->
  5. <!-- 头像 -->
  6. <!-- 毛玻璃 -->
  7. <view class="glass">
  8. <image src="../../assets/img/homeImg.png" mode="scaleToFill" />
  9. </view>
  10. <view class="avatarBox">
  11. <image
  12. class="avatar"
  13. src="../../assets/img/avatar.png"
  14. mode="scaleToFill"
  15. />
  16. <view @click="chooseAvatar" class="changeAvatar">
  17. <image src="../../assets/img/reset.png" mode="aspectFit" />
  18. </view>
  19. </view>
  20. <!-- 金币 -->
  21. <view class="coinBox">
  22. 我的金币:&nbsp; &nbsp;30
  23. <image src="../../assets/icon/icon.png" mode="scaleToFill" />
  24. <text @click="goBuyCoin">购买金币</text></view
  25. >
  26. <!-- tab栏 -->
  27. <view class="tabsBox">
  28. <view
  29. class="tabItem"
  30. v-for="item in tabList"
  31. :key="item.id"
  32. :class="showListActive == item.id ? 'active' : ''"
  33. @click="clickTabHandle(item)"
  34. >
  35. {{ item.name }}</view
  36. >
  37. </view>
  38. <!-- 显示风格列表内容 -->
  39. <scroll-view
  40. :scroll-y="true"
  41. v-show="showListActive == 1"
  42. class="showStyleList"
  43. >
  44. <view v-for="item in 7" :key="item" class="showListItem">
  45. <view class="top">
  46. <text class="name">风格名称</text>
  47. <view class="time">
  48. <text>生成时间</text>
  49. <!-- 更多 -->
  50. <view class="moreBox">
  51. <image src="../../assets/icon/more.png" mode="widthFix" />
  52. </view>
  53. </view>
  54. </view>
  55. <scroll-view :scroll-x="true" class="imgListBox">
  56. <view v-for="item in 6" :key="item" class="item">
  57. <image
  58. src="../../assets/icon/uploadImg.png"
  59. class="cover"
  60. mode="aspectFill"
  61. ></image>
  62. </view>
  63. </scroll-view>
  64. </view>
  65. </scroll-view>
  66. <!-- 显示视频列表内容 -->
  67. <scroll-view
  68. :scroll-y="true"
  69. v-show="showListActive == 2"
  70. class="showVideoList"
  71. >
  72. <view v-for="item in 7" :key="item" class="showListItem">
  73. <image
  74. class="showImg"
  75. src="../../assets/img/avatar.png"
  76. mode="aspectFit"
  77. />
  78. <view class="videoInfo">
  79. <view class="name">视频名称</view>
  80. <view class="time">生成时间</view>
  81. </view>
  82. <!-- 播放按钮 -->
  83. <view class="playIcon">
  84. <image src="../../assets/icon/play.png" mode="aspectFit" />
  85. </view>
  86. <!-- 更多 -->
  87. <view class="moreBox">
  88. <image src="../../assets/icon/more.png" mode="widthFix" />
  89. </view>
  90. </view>
  91. </scroll-view>
  92. <!-- 显示邀请列表内容 -->
  93. <view class="InviteBox" v-show="showListActive == 3">
  94. <scroll-view :scroll-y="true" class="showInviteList">
  95. <view v-for="item in 9" class="InviteList">
  96. <up-avatar :src="avatarUrl" size="50"></up-avatar>
  97. <view class="info">
  98. <view class="name">猕猴桃</view>
  99. <view class="time">2023/7/29</view>
  100. </view>
  101. <view class="getCoin"> 金币+2 </view>
  102. </view>
  103. </scroll-view>
  104. <view class="inviteBtn">继续邀请好友</view>
  105. </view>
  106. <!-- 显示消费列表内容 -->
  107. <view v-show="showListActive == 4" class="showOrderList">
  108. <view class="top">
  109. <text>名称</text>
  110. <text>时间</text>
  111. <text>金币</text>
  112. </view>
  113. <scroll-view :scroll-y="true" class="bottom">
  114. <view class="OrderListItem" v-for="item in 16">
  115. <view class="name">大西瓜</view>
  116. <view class="time">2023/7/29 </view>
  117. <view class="coin">-2金币</view>
  118. </view>
  119. </scroll-view>
  120. </view>
  121. </view>
  122. </template>
  123. <script setup>
  124. //#region 导入
  125. import { ref, reactive, computed } from "vue";
  126. import { voiceTotalApi } from "../../api/login.js";
  127. import { userInfoModules } from "@/store/modules/userInfo";
  128. import imageCompression from "browser-image-compression"; //压缩图片插件
  129. //#endregion
  130. // 定义,杂项
  131. const userInfoModulesPinia = userInfoModules();
  132. const pageClass = computed(() => {
  133. if (userInfoModulesPinia.platForm == 1) {
  134. return "page pageH5";
  135. } else {
  136. return "page";
  137. }
  138. });
  139. //#endregion
  140. //#region 头像
  141. const avatarUrl = ref(null);
  142. function chooseAvatar() {
  143. uni.switchTab({
  144. url: "/pages/uploadPhoto/uploadPhoto",
  145. });
  146. return;
  147. uni.chooseImage({
  148. count: 1, // 最多可以选择的图片张数,这里设置为1,只选择一张图片
  149. success: async (res) => {
  150. // avatarUrl.value = res.tempFilePaths[0];
  151. // TODO: 在这里处理图片上传逻辑,你可以调用上传接口将图片上传到服务器
  152. // 示例代码:
  153. // uploadImageToServer(tempFilePaths[0]);
  154. // 图片压缩
  155. console.log(res.tempFiles[0].size);
  156. if (userInfoModulesPinia.platForm != 1) {
  157. uni.compressImage({
  158. src: res.tempFilePaths[0],
  159. quality: 20,
  160. success: (res2) => {
  161. avatarUrl.value = res2.tempFilePath;
  162. console.log(res2.tempFilePath);
  163. },
  164. });
  165. } else {
  166. const options = {
  167. maxSizeMB: 2, // 最大压缩大小为 4MB
  168. useWebWorker: true, // 使用 Web Worker 进行压缩,提高性能
  169. };
  170. const compressedFile = await imageCompression(
  171. res.tempFiles[0],
  172. options
  173. );
  174. //compressedFile是一个blob对象
  175. avatarUrl.value = URL.createObjectURL(compressedFile);
  176. console.log(compressedFile);
  177. // avatarUrl.value = compressedFile;
  178. console.log("压缩图片h5");
  179. }
  180. },
  181. fail: (err) => {
  182. console.error("选择图片失败", err);
  183. },
  184. });
  185. }
  186. function goBuyCoin() {
  187. uni.navigateTo({
  188. url: "buyCoin",
  189. });
  190. }
  191. //#endregion
  192. //#region tab
  193. const tabList = ref([
  194. { name: "我的写真", id: 1 },
  195. { name: "我的视频", id: 2 },
  196. { name: "我的邀请", id: 3 },
  197. { name: "消费记录", id: 4 },
  198. ]);
  199. const showListActive = ref(1);
  200. function clickTabHandle(e) {
  201. showListActive.value = e.id;
  202. }
  203. //#endregion
  204. //#region
  205. //#endregion
  206. </script>
  207. <style lang="scss">
  208. .page {
  209. position: relative;
  210. height: 100vh;
  211. background-color: rgba(0, 0, 0, 0.8);
  212. // background: url("../../assets/img/avatar.png");
  213. .bgc {
  214. position: absolute;
  215. width: 750rpx;
  216. height: 750rpx;
  217. transform: scale(1.5);
  218. top: 187rpx;
  219. left: 0;
  220. object-fit: cover;
  221. z-index: -2;
  222. backdrop-filter: blur(3px);
  223. // backdrop-filter: blur(20px);
  224. }
  225. }
  226. .pageH5 {
  227. height: calc(100vh - 44px);
  228. }
  229. .avatarBox {
  230. position: relative;
  231. width: 260rpx;
  232. height: 260rpx;
  233. .avatar {
  234. width: 260rpx;
  235. height: 260rpx;
  236. border-radius: 130rpx;
  237. }
  238. .changeAvatar {
  239. position: absolute;
  240. right: -20rpx;
  241. bottom: 0;
  242. width: 66rpx;
  243. height: 66rpx;
  244. image {
  245. width: 100%;
  246. height: 100%;
  247. }
  248. }
  249. }
  250. .coinBox {
  251. margin-top: 38rpx;
  252. line-height: 50rpx;
  253. image {
  254. width: 33rpx;
  255. height: 33rpx;
  256. vertical-align: middle;
  257. }
  258. text {
  259. margin-left: 28rpx;
  260. display: inline-block;
  261. width: 160rpx;
  262. height: 50rpx;
  263. border-radius: 50rpx;
  264. font-size: 26rpx;
  265. text-align: center;
  266. // font-weight: 700;
  267. background-color: rgba(255, 255, 255, 0.1);
  268. }
  269. }
  270. // tab栏样式
  271. .tabsBox {
  272. display: flex;
  273. justify-content: space-between;
  274. margin-top: 50rpx;
  275. .tabItem {
  276. margin: 0 9rpx;
  277. width: 160rpx;
  278. height: 80rpx;
  279. line-height: 80rpx;
  280. text-align: center;
  281. border-radius: 12rpx;
  282. background-color: rgba(255, 255, 255, 0.1);
  283. }
  284. .active {
  285. background-color: rgba(255, 79, 0, 1);
  286. }
  287. }
  288. // 风格列表
  289. .showStyleList {
  290. flex: 1;
  291. overflow: hidden;
  292. margin-top: 30rpx;
  293. width: 690rpx;
  294. .showListItem {
  295. margin-top: 10rpx;
  296. .top {
  297. display: flex;
  298. justify-content: space-between;
  299. padding: 0 30rpx;
  300. margin-bottom: 20rpx;
  301. .name {
  302. font-weight: 900;
  303. }
  304. .time {
  305. display: inline-block;
  306. font-size: 22rpx;
  307. font-weight: 100;
  308. line-height: 33rpx;
  309. text {
  310. margin-right: 50rpx;
  311. }
  312. .moreBox {
  313. display: inline-block;
  314. width: 8rpx;
  315. height: 33rpx;
  316. image {
  317. vertical-align: top;
  318. width: 100%;
  319. }
  320. }
  321. }
  322. }
  323. .imgListBox {
  324. white-space: nowrap;
  325. display: flex;
  326. justify-content: space-between;
  327. flex-wrap: nowrap;
  328. height: 200rpx;
  329. .item {
  330. width: 150rpx;
  331. height: 200rpx;
  332. border-radius: 30rpx;
  333. margin-right: 30rpx;
  334. display: inline-flex; // item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可
  335. flex-direction: column;
  336. align-items: center;
  337. .cover {
  338. width: 150rpx;
  339. height: 200rpx;
  340. border-radius: 30rpx;
  341. }
  342. }
  343. }
  344. }
  345. }
  346. // 视频列表
  347. .showVideoList {
  348. flex: 1;
  349. overflow: hidden;
  350. margin-top: 30rpx;
  351. width: 690rpx;
  352. padding: 15rpx;
  353. display: flex;
  354. flex-wrap: wrap;
  355. justify-content: flex-start;
  356. word-break: keep-all;
  357. .showListItem {
  358. position: relative;
  359. display: inline-block;
  360. width: 330rpx;
  361. height: 440rpx;
  362. background-color: #000;
  363. margin-bottom: 25rpx;
  364. border-radius: 25rpx;
  365. overflow: hidden;
  366. .showImg {
  367. position: absolute;
  368. top: 0;
  369. z-index: 1;
  370. width: 100%;
  371. }
  372. .videoInfo {
  373. position: absolute;
  374. bottom: 0;
  375. width: 100%;
  376. height: 100rpx;
  377. padding: 10rpx 20rpx;
  378. background-color: red;
  379. z-index: 2;
  380. .name {
  381. font-weight: 900;
  382. margin-bottom: 10rpx;
  383. }
  384. .time {
  385. font-size: 22rpx;
  386. font-weight: 100;
  387. }
  388. }
  389. .playIcon {
  390. position: absolute;
  391. top: 50%;
  392. left: 50%;
  393. transform: translate(-50%, -50%);
  394. z-index: 2;
  395. image {
  396. width: 72rpx;
  397. height: 72rpx;
  398. }
  399. }
  400. .moreBox {
  401. position: absolute;
  402. top: 23rpx;
  403. right: 26rpx;
  404. width: 8rpx;
  405. height: 33rpx;
  406. image {
  407. width: 100%;
  408. }
  409. }
  410. }
  411. .showListItem:nth-child(odd) {
  412. margin-right: 30rpx;
  413. }
  414. }
  415. // 邀请列表
  416. .InviteBox {
  417. width: 100%;
  418. position: relative;
  419. flex: 1;
  420. display: flex;
  421. flex-direction: column;
  422. align-items: center;
  423. overflow: hidden;
  424. .inviteBtn {
  425. position: absolute;
  426. bottom: 20rpx;
  427. left: 50%;
  428. transform: translate(-50%, 0);
  429. width: 520rpx;
  430. height: 100rpx;
  431. line-height: 100rpx;
  432. text-align: center;
  433. font-size: 30rpx;
  434. background-color: rgba(255, 79, 0, 1);
  435. border-radius: 50rpx;
  436. }
  437. }
  438. .showInviteList {
  439. position: relative;
  440. margin-top: 15rpx;
  441. flex: 1;
  442. overflow: hidden;
  443. width: 100%;
  444. .InviteList {
  445. display: flex;
  446. justify-content: flex-start;
  447. margin-bottom: 12rpx;
  448. width: 100%;
  449. height: 120rpx;
  450. border-radius: 24rpx;
  451. background-color: rgba(255, 255, 255, 0.1);
  452. .u-avatar {
  453. margin: 0 30rpx;
  454. height: 120rpx !important;
  455. }
  456. .info {
  457. flex: 1;
  458. display: flex;
  459. flex-direction: column;
  460. justify-content: space-evenly;
  461. .name {
  462. font-weight: bold;
  463. }
  464. .time {
  465. font-size: 22rpx;
  466. }
  467. }
  468. .getCoin {
  469. width: 145rpx;
  470. height: 120rpx;
  471. line-height: 120rpx;
  472. text-align: center;
  473. margin-right: 30rpx;
  474. }
  475. }
  476. .InviteList:last-child::after {
  477. content: "";
  478. width: 1rpx;
  479. height: 130rpx;
  480. padding-bottom: 130rpx;
  481. }
  482. }
  483. // 消费列表
  484. .showOrderList {
  485. position: relative;
  486. flex: 1;
  487. margin-top: 30rpx;
  488. background-color: rgba(255, 255, 255, 0.1);
  489. border-radius: 24rpx;
  490. width: 100%;
  491. box-sizing: border-box;
  492. padding: 15rpx 20rpx;
  493. // padding-top: 80rpx;
  494. overflow: hidden;
  495. display: flex;
  496. flex-direction: column;
  497. align-items: center;
  498. .top {
  499. width: 100%;
  500. padding: 0 50rpx;
  501. height: 64rpx;
  502. line-height: 64rpx;
  503. border-radius: 40rpx;
  504. display: flex;
  505. justify-content: space-between;
  506. background-color: rgba(0, 0, 0, 0.2);
  507. font-size: 22rpx;
  508. }
  509. .bottom {
  510. // flex: 1;
  511. width: 100%;
  512. overflow: hidden;
  513. .OrderListItem {
  514. display: flex;
  515. justify-content: space-between;
  516. padding: 0 20rpx;
  517. height: 65rpx;
  518. line-height: 65rpx;
  519. .name,
  520. .coin {
  521. font-weight: 900;
  522. }
  523. .time {
  524. font-weight: 100;
  525. }
  526. }
  527. }
  528. }
  529. </style>