邃芒智像(Uniapp : WX、TT、H5)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

526 line
12 KiB

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