邃芒智像(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.
 
 
 
 

928 line
23 KiB

  1. <template>
  2. <view :class="pageClass">
  3. <!-- 背景图 -->
  4. <!-- <image class="bgc" src="../../assets/img/avatar.png"></image> -->
  5. <!-- 毛玻璃 -->
  6. <view class="glass">
  7. <image src="../../assets/img/homeImg.png" mode="scaleToFill" />
  8. </view>
  9. <!-- 头像 -->
  10. <view class="avatarBox">
  11. <image
  12. v-if="userInfoModulesPinia.myAvatar"
  13. class="avatar"
  14. :src="userInfoModulesPinia.myAvatar"
  15. mode="aspectFill"
  16. />
  17. <image
  18. v-if="!userInfoModulesPinia.myAvatar"
  19. class="avatar"
  20. src="../../assets/img/logo-5.png"
  21. mode="aspectFill"
  22. />
  23. <view @click="chooseAvatar" class="changeAvatar">
  24. <image src="../../assets/img/reset.png" mode="aspectFit" />
  25. </view>
  26. </view>
  27. <!-- 金币 -->
  28. <view class="coinBox" v-if="userInfoModulesPinia.token">
  29. 我的金币:&nbsp; &nbsp;{{ userInfoModulesPinia.myGlod }}
  30. <image src="../../assets/icon/icon.png" mode="scaleToFill" />
  31. <text class="buyCoinText" @click="goOtherPage('buyCoin', 2)"
  32. >购买金币</text
  33. ></view
  34. >
  35. <view class="coinBox" v-if="!userInfoModulesPinia.token"
  36. >还未登录 ,
  37. <text class="goLogin" @click="goLoginHandel">去登录!</text></view
  38. >
  39. <!-- tab栏 -->
  40. <view class="tabsBox">
  41. <view
  42. class="tabItem"
  43. v-for="item in tabList"
  44. :key="item.id"
  45. :class="showListActive == item.id ? 'active' : ''"
  46. @click="clickTabHandle(item)"
  47. >
  48. {{ item.name }}</view
  49. >
  50. </view>
  51. <!-- 未登录 -->
  52. <view
  53. v-if="!userInfoModulesPinia.token"
  54. class="goLogin"
  55. style="margin-top: 30rpx"
  56. @click="goLoginHandel"
  57. >
  58. 登录体验更多功能
  59. </view>
  60. <!-- 显示写真列表内容 -->
  61. <scroll-view
  62. @scrolltolower="getMorePhotoList"
  63. :scroll-y="true"
  64. v-show="showListActive == 1 && userInfoModulesPinia.token"
  65. class="showStyleList"
  66. >
  67. <view
  68. v-for="item in PhotoList"
  69. :key="item.id"
  70. class="showListItem"
  71. @click="
  72. goOtherPage(`/pages/lookPhoto/index?id=${item.id}`, item.status)
  73. "
  74. >
  75. <view class="top">
  76. <text class="name">风格名称</text>
  77. <view class="time">
  78. <text
  79. >生成时间
  80. {{ dayjs(item.createDate).format("YYYY-MM-DD HH:mm:ss") }}</text
  81. >
  82. <!-- 更多 -->
  83. <view class="moreBox" @click.stop="clickDel(item)">
  84. <image src="../../assets/icon/more.png" mode="widthFix" />
  85. </view>
  86. </view>
  87. </view>
  88. <!-- 成功时 -->
  89. <scroll-view
  90. v-if="item.status == 2"
  91. :scroll-x="true"
  92. class="imgListBox"
  93. >
  94. <view v-for="item2 in item.photoList" :key="item2.id" class="item">
  95. <image :src="item2.image" class="cover" mode="aspectFill"></image>
  96. </view>
  97. </scroll-view>
  98. <!-- 生产中时 -->
  99. <scroll-view
  100. v-if="item.status != 2"
  101. :scroll-x="true"
  102. class="imgListBox"
  103. >
  104. <view class="creating">
  105. <image
  106. src="../../assets/img/logo-4.png"
  107. class="cover"
  108. mode="widthFix"
  109. ></image>
  110. <text>生成中,请稍后</text>
  111. </view>
  112. </scroll-view>
  113. </view>
  114. <!-- 空处理 -->
  115. <view v-show="PhotoList.length == 0" class="noData"
  116. >暂无数据 ,
  117. <text
  118. @click="goOtherPage('/pages/closeStyle/closeStyle', 2)"
  119. class="goCreate"
  120. >去生成!</text
  121. >
  122. </view>
  123. </scroll-view>
  124. <!-- 显示视频列表内容 -->
  125. <scroll-view
  126. :scroll-y="true"
  127. v-show="showListActive == 2 && userInfoModulesPinia.token"
  128. class="showVideoList"
  129. >
  130. <view v-for="item in 7" :key="item" class="showListItem">
  131. <image
  132. class="showImg"
  133. src="../../assets/img/avatar.png"
  134. mode="aspectFit"
  135. />
  136. <view class="videoInfo">
  137. <view class="name">视频名称</view>
  138. <view class="time">生成时间</view>
  139. </view>
  140. <!-- 播放按钮 -->
  141. <view class="playIcon">
  142. <image src="../../assets/icon/play.png" mode="aspectFit" />
  143. </view>
  144. <!-- 更多 -->
  145. <view class="moreBox">
  146. <image src="../../assets/icon/more.png" mode="widthFix" />
  147. </view>
  148. </view>
  149. </scroll-view>
  150. <!-- 显示邀请列表内容 -->
  151. <view
  152. class="InviteBox"
  153. v-show="showListActive == 3 && userInfoModulesPinia.token"
  154. >
  155. <scroll-view :scroll-y="true" class="showInviteList">
  156. <view v-for="item in 9" :key="item" class="InviteList">
  157. <up-avatar :src="avatarUrl" size="50"></up-avatar>
  158. <view class="info">
  159. <view class="name">猕猴桃</view>
  160. <view class="time">2023/7/29</view>
  161. </view>
  162. <view class="getCoin"> 金币+2 </view>
  163. </view>
  164. </scroll-view>
  165. <view class="inviteBtn">继续邀请好友</view>
  166. </view>
  167. <!-- 显示消费列表内容 -->
  168. <view
  169. v-show="showListActive == 4 && userInfoModulesPinia.token"
  170. class="showOrderList"
  171. >
  172. <view class="top">
  173. <text>名称</text>
  174. <text>时间</text>
  175. <text>金币</text>
  176. </view>
  177. <scroll-view
  178. :scroll-y="true"
  179. class="bottom"
  180. @scrolltolower="getMoreConsumeList"
  181. >
  182. <view class="OrderListItem" v-for="item in ConsumeList" :key="item.id">
  183. <view class="name">{{ getConsumeName(item.type) }}</view>
  184. <view class="time">{{
  185. dayjs(item.createDate).format("YYYY-MM-DD HH:mm:ss")
  186. }}</view>
  187. <view class="coin">{{ getSymbol(item.type) }}{{ item.goldNum }}</view>
  188. </view>
  189. <!-- 空处理 -->
  190. <view v-show="ConsumeList.length == 0" class="noData">暂无数据</view>
  191. </scroll-view>
  192. </view>
  193. <!-- 弹出层 -->
  194. <view v-if="showPopup" class="mask">
  195. <view class="myPopup">
  196. <image
  197. @click="showPopup = false"
  198. src="../../assets/icon/close.png"
  199. mode="scaleToFill"
  200. />
  201. <view class="text">确定要删除这个写真吗?</view>
  202. <view class="del" @click="deletePhoto">删除</view>
  203. <view class="cancel" @click="showPopup = false">取消</view>
  204. </view>
  205. </view>
  206. </view>
  207. </template>
  208. <script setup>
  209. //#region 导入
  210. import dayjs from "dayjs";
  211. import { onLoad, onShow } from "@dcloudio/uni-app";
  212. import { ref, reactive, computed, inject } from "vue";
  213. // import App from "../../App.vue";
  214. import {
  215. findImageApi,
  216. findGlodApi,
  217. getPhotoListApi,
  218. getConsumeListApi,
  219. deleteApi,
  220. } from "../../api/home.js";
  221. import { userInfoModules } from "@/store/modules/userInfo";
  222. import imageCompression from "browser-image-compression"; //压缩图片插件
  223. //#endregion
  224. //#region 定义,杂项
  225. const userInfoModulesPinia = userInfoModules();
  226. const pageClass = computed(() => {
  227. if (userInfoModulesPinia.platForm == 1) {
  228. return "page pageH5";
  229. } else {
  230. return "page";
  231. }
  232. });
  233. // console.log(userInfoModulesPinia.token, "token123123");
  234. //#endregion
  235. //#region 头像
  236. const avatarUrl = ref(null);
  237. function chooseAvatar() {
  238. uni.setStorageSync("action", 1);
  239. uni.switchTab({
  240. url: "/pages/uploadPhoto/uploadPhoto",
  241. });
  242. return;
  243. uni.chooseImage({
  244. count: 1, // 最多可以选择的图片张数,这里设置为1,只选择一张图片
  245. success: async (res) => {
  246. // avatarUrl.value = res.tempFilePaths[0];
  247. // TODO: 在这里处理图片上传逻辑,你可以调用上传接口将图片上传到服务器
  248. // 示例代码:
  249. // uploadImageToServer(tempFilePaths[0]);
  250. // 图片压缩
  251. console.log(res.tempFiles[0].size);
  252. if (userInfoModulesPinia.platForm != 1) {
  253. uni.compressImage({
  254. src: res.tempFilePaths[0],
  255. quality: 20,
  256. success: (res2) => {
  257. avatarUrl.value = res2.tempFilePath;
  258. console.log(res2.tempFilePath);
  259. },
  260. });
  261. } else {
  262. const options = {
  263. maxSizeMB: 2, // 最大压缩大小为 4MB
  264. useWebWorker: true, // 使用 Web Worker 进行压缩,提高性能
  265. };
  266. const compressedFile = await imageCompression(
  267. res.tempFiles[0],
  268. options
  269. );
  270. //compressedFile是一个blob对象
  271. avatarUrl.value = URL.createObjectURL(compressedFile);
  272. console.log(compressedFile);
  273. // avatarUrl.value = compressedFile;
  274. console.log("压缩图片h5");
  275. }
  276. },
  277. fail: (err) => {
  278. console.error("选择图片失败", err);
  279. },
  280. });
  281. }
  282. function goOtherPage(url, status) {
  283. if (status != 2) {
  284. uni.showToast({
  285. title: "正在生成,请稍后",
  286. icon: "none",
  287. });
  288. return;
  289. }
  290. uni.navigateTo({
  291. url: url,
  292. });
  293. }
  294. //#endregion
  295. //#region tab
  296. const tabList = ref([
  297. { name: "我的写真", id: 1 },
  298. // { name: "我的视频", id: 2 },
  299. // { name: "我的邀请", id: 3 },
  300. { name: "消费记录", id: 4 },
  301. ]);
  302. const showListActive = ref(1);
  303. function clickTabHandle(e) {
  304. if (!userInfoModulesPinia.token) {
  305. return;
  306. }
  307. showListActive.value = e.id;
  308. console.log(e.id, "id");
  309. if (e.id == 1) {
  310. getPhotoList(pageSize1.value, pageNum1.value);
  311. } else if (e.id == 2) {
  312. } else if (e.id == 3) {
  313. } else if (e.id == 4) {
  314. getConsumeList(pageSize2.value, pageNum2.value);
  315. }
  316. }
  317. //#endregion
  318. //#region 获取写真列表
  319. const pageSize1 = ref(8);
  320. const pageNum1 = ref(1);
  321. const PhotoList = ref(7);
  322. async function getPhotoList(pageSize, pageNum) {
  323. try {
  324. const res = await getPhotoListApi(pageSize, pageNum);
  325. PhotoList.value = res.data.list;
  326. } catch (error) {}
  327. }
  328. /**
  329. * @description:触底加载更多写真列表
  330. */
  331. async function getMorePhotoList() {
  332. try {
  333. pageNum1.value += 1;
  334. const res = await getPhotoListApi(pageSize1.value, pageNum1.value);
  335. if (res.data.list.length == 0) {
  336. pageNum1.value -= 1;
  337. }
  338. PhotoList.value.push(...res.data.list);
  339. } catch (error) {
  340. uni.showToast({
  341. title: "获取数据失败,请重试",
  342. icon: "none",
  343. });
  344. }
  345. }
  346. //#endregion 获取图片,金币,
  347. //#region 获取消费记录
  348. const pageSize2 = ref(20);
  349. const pageNum2 = ref(1);
  350. const ConsumeList = ref(20);
  351. async function getConsumeList(pageSize, pageNum) {
  352. try {
  353. const res = await getConsumeListApi(pageSize, pageNum);
  354. ConsumeList.value = res.data.list;
  355. } catch (error) {}
  356. }
  357. /**
  358. * @description:触底加载更多消费记录
  359. */
  360. async function getMoreConsumeList() {
  361. try {
  362. pageNum2.value += 1;
  363. const res = await getConsumeListApi(pageSize2.value, pageNum2.value);
  364. if (res.data && res.data.list && res.data.list.length == 0) {
  365. pageNum2.value -= 1;
  366. }
  367. ConsumeList.value.push(...res.data.list);
  368. } catch (error) {
  369. console.log(error, "error");
  370. uni.showToast({
  371. title: "获取数据失败,请重试",
  372. icon: "none",
  373. });
  374. }
  375. }
  376. // 判断消费名称
  377. function getConsumeName(type) {
  378. if (type == 1) {
  379. return "注 册";
  380. } else if (type == 2) {
  381. return "邀 请";
  382. } else if (type == 3) {
  383. return "充值金币";
  384. } else if (type == 10) {
  385. return "生成照片";
  386. } else if (type == 11) {
  387. return "照片超分";
  388. }
  389. }
  390. // 判断正负
  391. function getSymbol(type) {
  392. if ([1, 2, 3].includes(type)) {
  393. return "+";
  394. } else {
  395. return "-";
  396. }
  397. }
  398. //#endregion 获取图片,金币,
  399. const myAvatar = ref(
  400. "https://suimang.oss-accelerate.aliyuncs.com/capi/2023-08-25/03b58cd2f52c49829435addbf1ec435a.jpg?x-oss-process=image/resize,w_10000/quality,q_60"
  401. );
  402. const myGlod = ref(0);
  403. async function findImage() {
  404. try {
  405. const res = await findImageApi();
  406. myAvatar.value = res.data.image;
  407. } catch (error) {}
  408. }
  409. async function findGlod() {
  410. try {
  411. const res = await findGlodApi();
  412. if (!res.data) {
  413. myGlod.value = 0;
  414. } else {
  415. myGlod.value = res.data.digitalAvatarResidueGlod;
  416. userInfoModulesPinia.myGlod = res.data.digitalAvatarResidueGlod
  417. ? res.data.digitalAvatarResidueGlod
  418. : 0;
  419. }
  420. } catch (error) {}
  421. }
  422. //#region 跳转
  423. function goLoginHandel() {
  424. uni.navigateTo({
  425. url: "/pages/login/index",
  426. });
  427. }
  428. //#endregion ---------------------------
  429. //#region 删除弹出框
  430. const showPopup = ref(false);
  431. const temporarily = ref(null); //暂存的
  432. // const delModalContent = "确定要删除这个写真吗?";
  433. function clickDel(item) {
  434. showPopup.value = true;
  435. temporarily.value = item;
  436. }
  437. async function deletePhoto() {
  438. try {
  439. const data = {
  440. id: temporarily.value.id,
  441. };
  442. const res = await deleteApi(data);
  443. pageNum1.value = 1;
  444. await getPhotoList(pageSize1.value, pageNum1.value);
  445. showPopup.value = false;
  446. console.log(res);
  447. // if (res.data.code == 200) {
  448. // } else {
  449. // uni.showToast({
  450. // title: "删除失败,请重试",
  451. // icon: "none",
  452. // });
  453. // }
  454. } catch (error) {
  455. console.log(error, "删除失败");
  456. }
  457. }
  458. //#endregion ---------------------------
  459. //#region 初始化和卸载
  460. function init() {
  461. if (userInfoModulesPinia.token == 1) {
  462. getPhotoList(pageSize1.value, pageNum1.value);
  463. } else {
  464. setTimeout(init, 500); // 继续等待 0.5 秒后再次执行函数
  465. }
  466. }
  467. onLoad(async () => {
  468. if (userInfoModulesPinia.token) {
  469. findGlod();
  470. getPhotoList(pageSize1.value, pageNum1.value);
  471. getConsumeList(pageSize2.value, pageNum2.value);
  472. }
  473. // setTimeout(() => {
  474. // findImage();
  475. // findGlod();
  476. // getPhotoList();
  477. // }, 2000);
  478. });
  479. onShow(() => {
  480. if (userInfoModulesPinia.token) {
  481. findGlod();
  482. getPhotoList(pageSize1.value, pageNum1.value);
  483. getConsumeList(pageSize2.value, pageNum2.value);
  484. }
  485. });
  486. //#endregion ---------------------------
  487. //#region
  488. //#endregion ---------------------------
  489. </script>
  490. <style lang="scss">
  491. .page {
  492. position: relative;
  493. height: 100vh;
  494. background-color: rgba(0, 0, 0, 0.8);
  495. // background: url("../../assets/img/avatar.png");
  496. .bgc {
  497. position: absolute;
  498. width: 750rpx;
  499. height: 750rpx;
  500. transform: scale(1.5);
  501. top: 187rpx;
  502. left: 0;
  503. object-fit: cover;
  504. z-index: -2;
  505. backdrop-filter: blur(3px);
  506. // backdrop-filter: blur(20px);
  507. }
  508. }
  509. .pageH5 {
  510. height: calc(100vh - 44px);
  511. }
  512. .avatarBox {
  513. position: relative;
  514. width: 260rpx;
  515. height: 260rpx;
  516. .avatar {
  517. width: 260rpx;
  518. height: 260rpx;
  519. border-radius: 130rpx;
  520. }
  521. .changeAvatar {
  522. position: absolute;
  523. right: -20rpx;
  524. bottom: 0;
  525. width: 66rpx;
  526. height: 66rpx;
  527. image {
  528. width: 100%;
  529. height: 100%;
  530. }
  531. }
  532. }
  533. .coinBox {
  534. margin-top: 38rpx;
  535. line-height: 50rpx;
  536. image {
  537. width: 33rpx;
  538. height: 33rpx;
  539. vertical-align: middle;
  540. }
  541. .buyCoinText {
  542. margin-left: 28rpx;
  543. display: inline-block;
  544. width: 160rpx;
  545. height: 50rpx;
  546. border-radius: 50rpx;
  547. font-size: 26rpx;
  548. text-align: center;
  549. // font-weight: 700;
  550. background-color: rgba(255, 255, 255, 0.1);
  551. }
  552. }
  553. .goLogin {
  554. color: #ff4f00;
  555. text-decoration: underline;
  556. }
  557. // tab栏样式
  558. .tabsBox {
  559. display: flex;
  560. justify-content: space-between;
  561. margin-top: 50rpx;
  562. .tabItem {
  563. margin: 0 9rpx;
  564. width: 160rpx;
  565. height: 80rpx;
  566. line-height: 80rpx;
  567. text-align: center;
  568. border-radius: 12rpx;
  569. background-color: rgba(255, 255, 255, 0.1);
  570. }
  571. .active {
  572. background-color: rgba(255, 79, 0, 1);
  573. }
  574. }
  575. // 写真列表
  576. .showStyleList {
  577. flex: 1;
  578. overflow: hidden;
  579. margin-top: 30rpx;
  580. width: 690rpx;
  581. .showListItem {
  582. margin-top: 30rpx;
  583. .top {
  584. display: flex;
  585. justify-content: space-between;
  586. padding: 0 10rpx;
  587. margin-bottom: 20rpx;
  588. .name {
  589. font-weight: 900;
  590. }
  591. .time {
  592. display: inline-block;
  593. font-size: 22rpx;
  594. font-weight: 100;
  595. line-height: 33rpx;
  596. text {
  597. margin-right: 50rpx;
  598. }
  599. .moreBox {
  600. padding: 0 0 0 40rpx;
  601. display: inline-block;
  602. width: 48rpx;
  603. height: 33rpx;
  604. image {
  605. vertical-align: top;
  606. width: 100%;
  607. }
  608. }
  609. }
  610. }
  611. .imgListBox {
  612. white-space: nowrap;
  613. display: flex;
  614. justify-content: space-between;
  615. flex-wrap: nowrap;
  616. height: 200rpx;
  617. .item {
  618. width: 150rpx;
  619. height: 200rpx;
  620. border-radius: 30rpx;
  621. margin-right: 30rpx;
  622. display: inline-flex; // item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可
  623. flex-direction: column;
  624. align-items: center;
  625. .cover {
  626. width: 150rpx;
  627. height: 200rpx;
  628. border-radius: 30rpx;
  629. }
  630. }
  631. .creating {
  632. position: relative;
  633. width: 200rpx;
  634. height: 200rpx;
  635. border-radius: 30rpx;
  636. margin-right: 30rpx;
  637. display: inline-flex; // item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可
  638. flex-direction: column;
  639. align-items: center;
  640. .cover {
  641. width: 200rpx;
  642. height: 200rpx;
  643. border-radius: 30rpx;
  644. }
  645. text {
  646. position: absolute;
  647. top: 50%;
  648. left: 150%;
  649. transform: translate(-50%, -50%);
  650. width: 100%;
  651. font-weight: 900;
  652. text-align: center;
  653. color: #ff4f00;
  654. }
  655. }
  656. }
  657. }
  658. .noData {
  659. text-align: center;
  660. .goCreate {
  661. color: #ff4f00;
  662. text-decoration: underline;
  663. }
  664. }
  665. }
  666. // 视频列表
  667. .showVideoList {
  668. flex: 1;
  669. overflow: hidden;
  670. margin-top: 30rpx;
  671. width: 690rpx;
  672. padding: 15rpx;
  673. display: flex;
  674. flex-wrap: wrap;
  675. justify-content: flex-start;
  676. word-break: keep-all;
  677. .showListItem {
  678. position: relative;
  679. display: inline-block;
  680. width: 330rpx;
  681. height: 440rpx;
  682. background-color: #000;
  683. margin-bottom: 25rpx;
  684. border-radius: 25rpx;
  685. overflow: hidden;
  686. .showImg {
  687. position: absolute;
  688. top: 0;
  689. z-index: 1;
  690. width: 100%;
  691. }
  692. .videoInfo {
  693. position: absolute;
  694. bottom: 0;
  695. width: 100%;
  696. height: 100rpx;
  697. padding: 10rpx 20rpx;
  698. // background-color: red;
  699. // background-color: #393b3d;
  700. z-index: 2;
  701. .name {
  702. font-weight: 900;
  703. margin-bottom: 10rpx;
  704. }
  705. .time {
  706. font-size: 22rpx;
  707. font-weight: 100;
  708. }
  709. }
  710. .playIcon {
  711. position: absolute;
  712. top: 50%;
  713. left: 50%;
  714. transform: translate(-50%, -50%);
  715. z-index: 2;
  716. image {
  717. width: 72rpx;
  718. height: 72rpx;
  719. }
  720. }
  721. .moreBox {
  722. position: absolute;
  723. top: 23rpx;
  724. right: 26rpx;
  725. width: 8rpx;
  726. height: 33rpx;
  727. image {
  728. width: 100%;
  729. }
  730. }
  731. }
  732. .showListItem:nth-child(odd) {
  733. margin-right: 30rpx;
  734. }
  735. }
  736. // 邀请列表
  737. .InviteBox {
  738. width: 100%;
  739. position: relative;
  740. flex: 1;
  741. display: flex;
  742. flex-direction: column;
  743. align-items: center;
  744. overflow: hidden;
  745. .inviteBtn {
  746. position: absolute;
  747. bottom: 20rpx;
  748. left: 50%;
  749. transform: translate(-50%, 0);
  750. width: 520rpx;
  751. height: 100rpx;
  752. line-height: 100rpx;
  753. text-align: center;
  754. font-size: 30rpx;
  755. background-color: rgba(255, 79, 0, 1);
  756. border-radius: 50rpx;
  757. }
  758. }
  759. .showInviteList {
  760. position: relative;
  761. margin-top: 15rpx;
  762. flex: 1;
  763. overflow: hidden;
  764. width: 100%;
  765. .InviteList {
  766. display: flex;
  767. justify-content: flex-start;
  768. margin-bottom: 12rpx;
  769. width: 100%;
  770. height: 120rpx;
  771. border-radius: 24rpx;
  772. background-color: rgba(255, 255, 255, 0.1);
  773. .u-avatar {
  774. margin: 0 30rpx;
  775. height: 120rpx !important;
  776. }
  777. .info {
  778. flex: 1;
  779. display: flex;
  780. flex-direction: column;
  781. justify-content: space-evenly;
  782. .name {
  783. font-weight: bold;
  784. }
  785. .time {
  786. font-size: 22rpx;
  787. }
  788. }
  789. .getCoin {
  790. width: 145rpx;
  791. height: 120rpx;
  792. line-height: 120rpx;
  793. text-align: center;
  794. margin-right: 30rpx;
  795. }
  796. }
  797. .InviteList:last-child::after {
  798. content: "";
  799. width: 1rpx;
  800. height: 130rpx;
  801. padding-bottom: 130rpx;
  802. }
  803. }
  804. // 消费列表
  805. .showOrderList {
  806. position: relative;
  807. flex: 1;
  808. margin-top: 30rpx;
  809. background-color: rgba(255, 255, 255, 0.1);
  810. border-radius: 24rpx;
  811. width: 100%;
  812. box-sizing: border-box;
  813. padding: 15rpx 20rpx;
  814. // padding-top: 80rpx;
  815. overflow: hidden;
  816. display: flex;
  817. flex-direction: column;
  818. align-items: center;
  819. .top {
  820. width: 100%;
  821. padding: 0 50rpx;
  822. height: 64rpx;
  823. line-height: 64rpx;
  824. border-radius: 40rpx;
  825. display: flex;
  826. justify-content: space-between;
  827. background-color: rgba(0, 0, 0, 0.2);
  828. font-size: 22rpx;
  829. }
  830. .bottom {
  831. // flex: 1;
  832. width: 100%;
  833. overflow: hidden;
  834. .OrderListItem {
  835. display: flex;
  836. justify-content: space-between;
  837. padding: 0 50rpx;
  838. height: 65rpx;
  839. line-height: 65rpx;
  840. .name,
  841. .coin {
  842. font-weight: 900;
  843. }
  844. .time {
  845. font-weight: 100;
  846. }
  847. }
  848. }
  849. }
  850. // 弹出层遮罩层
  851. .mask {
  852. position: absolute;
  853. width: 100%;
  854. height: 100%;
  855. background-color: rgba(0, 0, 0, 0.3);
  856. z-index: 999;
  857. }
  858. // 弹出层
  859. .myPopup {
  860. display: flex;
  861. flex-direction: column;
  862. align-items: center;
  863. position: absolute;
  864. top: 50%;
  865. left: 50%;
  866. transform: translate(-50%, -50%);
  867. width: 600rpx;
  868. height: 500rpx;
  869. padding: 30rpx;
  870. background: #000000;
  871. border-radius: 24rpx;
  872. font-size: 30rpx;
  873. font-weight: bold;
  874. text-align: center;
  875. image {
  876. position: absolute;
  877. top: -20rpx;
  878. right: -20rpx;
  879. width: 70rpx;
  880. height: 70rpx;
  881. }
  882. .text {
  883. height: 250rpx;
  884. line-height: 250rpx;
  885. }
  886. .del {
  887. width: 70%;
  888. height: 80rpx;
  889. line-height: 80rpx;
  890. border-radius: 80rpx;
  891. background-color: #ff4f00;
  892. margin-bottom: 30rpx;
  893. }
  894. .cancel {
  895. width: 70%;
  896. height: 80rpx;
  897. line-height: 80rpx;
  898. border-radius: 80rpx;
  899. border: #ff4f00 2rpx solid;
  900. }
  901. }
  902. </style>