|
- <template>
- <view :class="pageClass">
- <!-- 背景图 -->
- <!-- <image class="bgc" src="../../assets/img/avatar.png"></image> -->
- <!-- 头像 -->
- <!-- 毛玻璃 -->
- <view class="glass">
- <image src="../../assets/img/homeImg.png" mode="scaleToFill" />
- </view>
- <view class="avatarBox">
- <image
- class="avatar"
- src="../../assets/img/avatar.png"
- mode="scaleToFill"
- />
- <view @click="chooseAvatar" class="changeAvatar">
- <image src="../../assets/img/reset.png" mode="aspectFit" />
- </view>
- </view>
-
- <!-- 金币 -->
- <view class="coinBox">
- 我的金币: 30
- <image src="../../assets/icon/icon.png" mode="scaleToFill" />
- <text @click="goBuyCoin">购买金币</text></view
- >
- <!-- tab栏 -->
- <view class="tabsBox">
- <view
- class="tabItem"
- v-for="item in tabList"
- :key="item.id"
- :class="showListActive == item.id ? 'active' : ''"
- @click="clickTabHandle(item)"
- >
- {{ item.name }}</view
- >
- </view>
- <!-- 显示风格列表内容 -->
- <scroll-view
- :scroll-y="true"
- v-show="showListActive == 1"
- class="showStyleList"
- >
- <view v-for="item in 7" :key="item" class="showListItem">
- <view class="top">
- <text class="name">风格名称</text>
- <view class="time">
- <text>生成时间</text>
- <!-- 更多 -->
- <view class="moreBox">
- <image src="../../assets/icon/more.png" mode="widthFix" />
- </view>
- </view>
- </view>
- <scroll-view :scroll-x="true" class="imgListBox">
- <view v-for="item in 6" :key="item" class="item">
- <image
- src="../../assets/icon/uploadImg.png"
- class="cover"
- mode="aspectFill"
- ></image>
- </view>
- </scroll-view>
- </view>
- </scroll-view>
- <!-- 显示视频列表内容 -->
- <scroll-view
- :scroll-y="true"
- v-show="showListActive == 2"
- class="showVideoList"
- >
- <view v-for="item in 7" :key="item" class="showListItem">
- <image
- class="showImg"
- src="../../assets/img/avatar.png"
- mode="aspectFit"
- />
-
- <view class="videoInfo">
- <view class="name">视频名称</view>
- <view class="time">生成时间</view>
- </view>
- <!-- 播放按钮 -->
- <view class="playIcon">
- <image src="../../assets/icon/play.png" mode="aspectFit" />
- </view>
- <!-- 更多 -->
- <view class="moreBox">
- <image src="../../assets/icon/more.png" mode="widthFix" />
- </view>
- </view>
- </scroll-view>
- <!-- 显示邀请列表内容 -->
- <view class="InviteBox" v-show="showListActive == 3">
- <scroll-view :scroll-y="true" class="showInviteList">
- <view v-for="item in 9" class="InviteList">
- <up-avatar :src="avatarUrl" size="50"></up-avatar>
- <view class="info">
- <view class="name">猕猴桃</view>
- <view class="time">2023/7/29</view>
- </view>
- <view class="getCoin"> 金币+2 </view>
- </view>
- </scroll-view>
- <view class="inviteBtn">继续邀请好友</view>
- </view>
- <!-- 显示消费列表内容 -->
- <view v-show="showListActive == 4" class="showOrderList">
- <view class="top">
- <text>名称</text>
- <text>时间</text>
- <text>金币</text>
- </view>
- <scroll-view :scroll-y="true" class="bottom">
- <view class="OrderListItem" v-for="item in 16">
- <view class="name">大西瓜</view>
- <view class="time">2023/7/29 </view>
- <view class="coin">-2金币</view>
- </view>
- </scroll-view>
- </view>
- </view>
- </template>
-
- <script setup>
- //#region 导入
-
- import { ref, reactive, computed } from "vue";
- import { voiceTotalApi } from "../../api/login.js";
- import { userInfoModules } from "@/store/modules/userInfo";
- import imageCompression from "browser-image-compression"; //压缩图片插件
- //#endregion
-
- // 定义,杂项
- const userInfoModulesPinia = userInfoModules();
- const pageClass = computed(() => {
- if (userInfoModulesPinia.platForm == 1) {
- return "page pageH5";
- } else {
- return "page";
- }
- });
-
- //#endregion
- //#region 头像
- const avatarUrl = ref(null);
- function chooseAvatar() {
- uni.switchTab({
- url: "/pages/uploadPhoto/uploadPhoto",
- });
- return;
- uni.chooseImage({
- count: 1, // 最多可以选择的图片张数,这里设置为1,只选择一张图片
- success: async (res) => {
- // avatarUrl.value = res.tempFilePaths[0];
- // TODO: 在这里处理图片上传逻辑,你可以调用上传接口将图片上传到服务器
- // 示例代码:
- // uploadImageToServer(tempFilePaths[0]);
- // 图片压缩
- console.log(res.tempFiles[0].size);
- if (userInfoModulesPinia.platForm != 1) {
- uni.compressImage({
- src: res.tempFilePaths[0],
- quality: 20,
- success: (res2) => {
- avatarUrl.value = res2.tempFilePath;
- console.log(res2.tempFilePath);
- },
- });
- } else {
- const options = {
- maxSizeMB: 2, // 最大压缩大小为 4MB
- useWebWorker: true, // 使用 Web Worker 进行压缩,提高性能
- };
- const compressedFile = await imageCompression(
- res.tempFiles[0],
- options
- );
- //compressedFile是一个blob对象
- avatarUrl.value = URL.createObjectURL(compressedFile);
- console.log(compressedFile);
- // avatarUrl.value = compressedFile;
- console.log("压缩图片h5");
- }
- },
- fail: (err) => {
- console.error("选择图片失败", err);
- },
- });
- }
-
- function goBuyCoin() {
- uni.navigateTo({
- url: "buyCoin",
- });
- }
- //#endregion
-
- //#region tab
- const tabList = ref([
- { name: "我的写真", id: 1 },
- { name: "我的视频", id: 2 },
- { name: "我的邀请", id: 3 },
- { name: "消费记录", id: 4 },
- ]);
- const showListActive = ref(1);
- function clickTabHandle(e) {
- showListActive.value = e.id;
- }
- //#endregion
-
- //#region
-
- //#endregion
- </script>
-
- <style lang="scss">
- .page {
- position: relative;
- height: 100vh;
- background-color: rgba(0, 0, 0, 0.8);
- // background: url("../../assets/img/avatar.png");
- .bgc {
- position: absolute;
- width: 750rpx;
- height: 750rpx;
- transform: scale(1.5);
- top: 187rpx;
- left: 0;
- object-fit: cover;
- z-index: -2;
- backdrop-filter: blur(3px);
- // backdrop-filter: blur(20px);
- }
- }
- .pageH5 {
- height: calc(100vh - 44px);
- }
- .avatarBox {
- position: relative;
- width: 260rpx;
- height: 260rpx;
- .avatar {
- width: 260rpx;
- height: 260rpx;
- border-radius: 130rpx;
- }
- .changeAvatar {
- position: absolute;
- right: -20rpx;
- bottom: 0;
- width: 66rpx;
- height: 66rpx;
- image {
- width: 100%;
- height: 100%;
- }
- }
- }
- .coinBox {
- margin-top: 38rpx;
- line-height: 50rpx;
- image {
- width: 33rpx;
- height: 33rpx;
- vertical-align: middle;
- }
- text {
- margin-left: 28rpx;
- display: inline-block;
- width: 160rpx;
- height: 50rpx;
- border-radius: 50rpx;
- font-size: 26rpx;
- text-align: center;
- // font-weight: 700;
- background-color: rgba(255, 255, 255, 0.1);
- }
- }
- // tab栏样式
- .tabsBox {
- display: flex;
- justify-content: space-between;
- margin-top: 50rpx;
- .tabItem {
- margin: 0 9rpx;
- width: 160rpx;
- height: 80rpx;
- line-height: 80rpx;
- text-align: center;
- border-radius: 12rpx;
- background-color: rgba(255, 255, 255, 0.1);
- }
- .active {
- background-color: rgba(255, 79, 0, 1);
- }
- }
-
- // 风格列表
- .showStyleList {
- flex: 1;
- overflow: hidden;
- margin-top: 30rpx;
- width: 690rpx;
- .showListItem {
- margin-top: 10rpx;
- .top {
- display: flex;
- justify-content: space-between;
- padding: 0 30rpx;
- margin-bottom: 20rpx;
- .name {
- font-weight: 900;
- }
- .time {
- display: inline-block;
- font-size: 22rpx;
- font-weight: 100;
- line-height: 33rpx;
- text {
- margin-right: 50rpx;
- }
- .moreBox {
- display: inline-block;
- width: 8rpx;
- height: 33rpx;
- image {
- vertical-align: top;
- width: 100%;
- }
- }
- }
- }
- .imgListBox {
- white-space: nowrap;
- display: flex;
- justify-content: space-between;
- flex-wrap: nowrap;
- height: 200rpx;
- .item {
- width: 150rpx;
- height: 200rpx;
- border-radius: 30rpx;
- margin-right: 30rpx;
- display: inline-flex; // item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可
- flex-direction: column;
- align-items: center;
- .cover {
- width: 150rpx;
- height: 200rpx;
- border-radius: 30rpx;
- }
- }
- }
- }
- }
- // 视频列表
- .showVideoList {
- flex: 1;
- overflow: hidden;
- margin-top: 30rpx;
- width: 690rpx;
- padding: 15rpx;
- display: flex;
- flex-wrap: wrap;
- justify-content: flex-start;
- word-break: keep-all;
- .showListItem {
- position: relative;
- display: inline-block;
- width: 330rpx;
- height: 440rpx;
- background-color: #000;
- margin-bottom: 25rpx;
- border-radius: 25rpx;
- overflow: hidden;
- .showImg {
- position: absolute;
- top: 0;
- z-index: 1;
- width: 100%;
- }
- .videoInfo {
- position: absolute;
- bottom: 0;
- width: 100%;
- height: 100rpx;
- padding: 10rpx 20rpx;
- background-color: red;
- z-index: 2;
- .name {
- font-weight: 900;
- margin-bottom: 10rpx;
- }
- .time {
- font-size: 22rpx;
- font-weight: 100;
- }
- }
- .playIcon {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- z-index: 2;
- image {
- width: 72rpx;
- height: 72rpx;
- }
- }
- .moreBox {
- position: absolute;
- top: 23rpx;
- right: 26rpx;
- width: 8rpx;
- height: 33rpx;
- image {
- width: 100%;
- }
- }
- }
- .showListItem:nth-child(odd) {
- margin-right: 30rpx;
- }
- }
- // 邀请列表
- .InviteBox {
- width: 100%;
- position: relative;
- flex: 1;
- display: flex;
- flex-direction: column;
- align-items: center;
- overflow: hidden;
- .inviteBtn {
- position: absolute;
- bottom: 20rpx;
- left: 50%;
- transform: translate(-50%, 0);
- width: 520rpx;
- height: 100rpx;
- line-height: 100rpx;
- text-align: center;
- font-size: 30rpx;
- background-color: rgba(255, 79, 0, 1);
- border-radius: 50rpx;
- }
- }
- .showInviteList {
- position: relative;
- margin-top: 15rpx;
- flex: 1;
- overflow: hidden;
- width: 100%;
- .InviteList {
- display: flex;
- justify-content: flex-start;
- margin-bottom: 12rpx;
- width: 100%;
- height: 120rpx;
- border-radius: 24rpx;
- background-color: rgba(255, 255, 255, 0.1);
- .u-avatar {
- margin: 0 30rpx;
- height: 120rpx !important;
- }
- .info {
- flex: 1;
- display: flex;
- flex-direction: column;
- justify-content: space-evenly;
- .name {
- font-weight: bold;
- }
- .time {
- font-size: 22rpx;
- }
- }
- .getCoin {
- width: 145rpx;
- height: 120rpx;
- line-height: 120rpx;
- text-align: center;
- margin-right: 30rpx;
- }
- }
- .InviteList:last-child::after {
- content: "";
- width: 1rpx;
- height: 130rpx;
- padding-bottom: 130rpx;
- }
- }
- // 消费列表
- .showOrderList {
- position: relative;
- flex: 1;
- margin-top: 30rpx;
- background-color: rgba(255, 255, 255, 0.1);
- border-radius: 24rpx;
- width: 100%;
- box-sizing: border-box;
- padding: 15rpx 20rpx;
- // padding-top: 80rpx;
- overflow: hidden;
- display: flex;
- flex-direction: column;
- align-items: center;
- .top {
- width: 100%;
- padding: 0 50rpx;
- height: 64rpx;
- line-height: 64rpx;
- border-radius: 40rpx;
- display: flex;
- justify-content: space-between;
- background-color: rgba(0, 0, 0, 0.2);
- font-size: 22rpx;
- }
- .bottom {
- // flex: 1;
- width: 100%;
- overflow: hidden;
- .OrderListItem {
- display: flex;
- justify-content: space-between;
- padding: 0 20rpx;
- height: 65rpx;
- line-height: 65rpx;
- .name,
- .coin {
- font-weight: 900;
- }
- .time {
- font-weight: 100;
- }
- }
- }
- }
- </style>
|