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

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