MoeNovaClient/pages/my/my.vue

<template>
  <view class="page"> 
    <view class="topBody">
      <view class="header">
        <view class="reserveASeat"></view> 
        <view class="card-box">
          <view class="card-top">
            <view class="top-box">
              <view class="hello-box"> Hello! </view>
              <view class="settingBtn-box">
                <image
                  @click="clickShare()"
                  src="@/static/me/wd_icon_fenxian.png"
                  mode=""
                ></image>
                <image
                  src="@/static/me/wd_icon_shezhi.png"
                  mode=""
                  @click="navigateToSettings"
                ></image>
              </view>
            </view>
            <view class="userinfo-box" @click="goPage('/pages/my/editInfo')">
              <view class="userinfo-left">
                <CircleAvatar
                  class="avator"
                  :src="myinfo.avator"
                ></CircleAvatar>
              </view>
              <view class="userinfo-right">
                <view class="nickname">
                  <text class="one-omit">{{ myinfo.nickname }}</text>
                  <image
                    src="../../static/icon/wd_icon_nan.png"
                    mode="widthFix"
                    v-if="myinfo.sex_id == 1"
                  ></image>
                  <image
                    src="../../static/icon/wd_icon_nv.png"
                    mode="widthFix"
                    v-else-if="myinfo.sex_id == 2"
                  ></image>
                  <view class="level">Lv{{ myinfo.my_level }}</view>
                </view>
                <view class="label">
                  <view v-for="(item, index) in aihao_tags" :key="index + item">
                    {{ item }}
                  </view>
                </view>
              </view>
            </view>
            <view class="intro_row">
              <block v-if="myinfo.content == ''">
                <text class="intro_text two-omit">添加简介</text>
                <image
                  src="@/static/icon/wd_icon_edit.png"
                  mode="widthFix"
                  class="add_icon"
                ></image>
              </block>
              <uv-text v-else class="intro_text two-omit">
                {{ myinfo.content }}
              </uv-text>
            </view>
            <view class="bom">
              <view class="follow_info" @click="navigateToFollow">
                <view class="follow-box">
                  <view class="num">{{ myinfo.num_attention }}</view>
                  <view class="label">关注</view>
                </view>
                <view class="separator"></view>
                <view class="follow-box">
                  <view class="num">{{ myinfo.num_fans }}</view>
                  <view class="label">粉丝</view>
                </view>
                <view class="separator"></view>
                <view class="follow-box">
                  <view class="num">{{ myinfo.num_like }}</view>
                  <view class="label">获赞</view>
                </view>
              </view>
              <view class="points-box" >
                <view class="points" @click="goPage('/pages/vip/M_purchase')">
                  <image src="@/static/icon/wd_icon_coin.png" mode=""></image>
                  {{ myinfo.num_gmm | formatNumberToK}}
                  <view class="money-add">+</view>
                </view>
                <view class="points" @click="goPage('/pages/my/job?type=recharge')">
                  <image
                    src="@/static/icon/wd_icon_xingyuan.png"
                    mode=""
                  ></image>
                  {{ myinfo.num_gmd | formatNumberToK}}
                  					 <view class="money-add">+</view>
                </view>
              </view>
            </view>
          </view>
          <view class="card-bom" @click="goPage('/pages/vip/index')">
            <view class="content-box">
              <image
                v-if="false"
                src="@/static/me/icon-vip2.png"
                mode=""
              ></image>
              <image
                v-else-if="0"
                src="@/static/me/icon-vip1.png"
                mode=""
              ></image>
              <image v-else src="@/static/me/icon-vip0.png" mode=""></image>
              <text v-if="true">开启专属会员权益</text>
              <text v-else>会员权益生效中</text>
            </view>
            <image src="@/static/me/wd_icon_jiantou.png" mode=""></image>
          </view>
        </view>
      </view>

      <view class="myinfo">
        <!-- <view class="line"></view> -->
        <view class="tablist">
          <view
            class="item"
            :class="{ active: firstLevelNavActive === 0 }"
            @click="firstLevelNavActiveSwitch(0)"
            >我的作品
            <view class="indicator-triangle"> </view>
          </view>
          <view
            class="item"
            :class="{ active: firstLevelNavActive === 1 }"
            @click="firstLevelNavActiveSwitch(1)"
            >我的帖子
            <view class="indicator-triangle"> </view>
          </view> 
        </view>
        <!-- 作品列表 -->
        <template v-if="firstLevelNavActive == 0">
          <view class="line"></view>
          <view class="subtitle">
            <view
              class="item"
              :class="{ active: activeTab === 0 }"
              @click="switchTab(0)"
            >
              作品
            </view>
            <view
              class="item"
              :class="{ active: activeTab === 1 }"
              @click="switchTab(1)"
            >
              生成中
            </view>
          </view>
          <view
            class="numlist1"
            v-if="activeTab === 0"
            style="margin-top: 30rpx"
          >
            <WorkItem
              v-for="(item, index) in worksList"
              :secrecy="true"
              :subtitle="true"
              :key="index"
              :item="item"
              @click="goWork(item)"
            />
            <!-- 暂无内容提示 -->
            <view v-if="worksList.length === 0" class="empty-state">
              <image 
                src="@/static/icon/xx_img_zanwuxiaoxi.png" 
                mode="aspectFit" 
                class="empty-image"
              ></image>
              <text class="empty-text">暂无作品</text>
              <text class="empty-subtext">快来创作你的第一个作品吧~</text>
            </view>
          </view>
          <view
            class="numlist2"
            v-if="activeTab === 1"
            style="margin-top: 30rpx"
          >
            <view
              class="item"
              v-for="(item, index) in worksList"
              :key="index"
              style="margin-bottom: 28rpx"
            >
              <view class="num" @click="goWork(item)">
                <WorkItem :item="item" style="margin-bottom: 12rpx" />

                <image
                  class="incomplete-bg"
                  v-if="item.status != 9"
                  src="@/static/me/wd_bg_zhizuozhong.png"
                ></image>
                <view class="maskLayer"></view>
                <!-- 当activeTab为1时显示队列状态 -->
                <view class="queue-status">
                  <!-- 排队中 -->
                  <view v-if="item.status === 1" class="status-text">
                    <image
                      class="state-img"
                      src="@/static/me/wd_icon_paiduizhong.png"
                    ></image>
                  </view>
                  <!-- 生成失败 -->
                  <view
                    v-if="item.status === 3 || item.status === 4"
                    class="status-text"
                  >
                    <image
                      class="state-img"
                      src="@/static/me/wd_icon_zhizuoshibai.png"
                    ></image>
                  </view>
                  <!-- 制作中 -->
                  <view v-else-if="item.status < 9" class="status-text">
                    <image
                      class="state-img"
                      src="@/static/me/wd_icon_zhizuozhong.png"
                    ></image>
                  </view>
                  <!-- 创作完成 -->
                  <view v-else-if="item.status === 9" class="status-text">
                    <image
                      class="state-img"
                      src="@/static/me/wd_icon_chuangzuowancheng.png"
                    ></image>
                  </view>
                </view>
                <view
                  class="name"
                  style="
                    font-family: 'PingFang SC-Medium';
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #1a4d2e;
                  "
                >
                  {{ item.title || item.description || "作品" + index }}</view
                >

                <!-- 显示任务类型标签 -->
                <view class="task-type-tag">
                  <image
                    style="width: 120rpx; height: 36rpx"
                    v-if="item.task_type === 1"
                    src="@/static/me/wd_icon_lingganchuangzuo.png"
                  ></image>
                  <image
                    style="width: 82rpx; height: 36rpx"
                    v-else-if="item.task_type === 2"
                    src="@/static/me/wd_icon_yinyue.png"
                  ></image>
                  <!-- <text v-if="item.task_type === 1">灵感创作</text>
                  <text v-else-if="item.task_type === 2">音乐</text> -->
                </view>
              </view>
            </view>
            <!-- 暂无内容提示 -->
            <view v-if="worksList.length === 0" class="empty-state">
              <image 
                src="@/static/icon/xx_img_zanwuxiaoxi.png" 
                mode="aspectFit" 
                class="empty-image"
              ></image>
              <text class="empty-text">暂无生成中的作品</text>
              <text class="empty-subtext">快去创作新作品吧~</text>
            </view>
          </view>
        </template>
        <template v-else>
          <view class="numlist2" style="margin-top: 30rpx">
            <view
              class="item"
              v-for="(item, index) in worksList"
              :key="index"
              style="margin-bottom: 15rpx"
            >
              <view class="num" @click="goWork2(item)">
                <WorkItem :item="item" style="margin-bottom: 20rpx" />

                <view class="incomplete-bg" style="background: #f8f9fa"></view>
                <image
                  class="incomplete-bg"
                  v-if="item.status != 1"
                  src="@/static/me/wd_bg_zhizuozhong.png"
                ></image>
                <image
                  class="incomplete-bg2"
                  v-else-if="item.status == 1"
                  :src="item.image"
                  mode="widthFix"
                ></image>

                <view class="maskLayer" v-if="item.status != 1"></view>
                <!-- 当activeTab为1时显示队列状态 -->
                <view class="queue-status">
                  <!-- 已发布 -->
                  <view v-if="item.status == 1" class="status-text">
                    <!-- <image class="state-img" src="@/static/me/wd_icon_paiduizhong.png"></image> -->
                    <!-- ({{ item.queue_position }}/{{ item.all_position }}) -->
                  </view>
                  <!-- 待审核 -->
                  <view
                    v-if="item.status == 2 || item.status === 4"
                    class="status-text"
                  >
                    <image
                      class="state-img"
                      src="@/static/me/wd_icon_shenhezhong.png"
                    ></image>
                  </view>
                  <!-- 审核失败 -->
                  <view v-else-if="item.status == 3" class="status-text">
                    <image
                      class="state-img"
                      src="@/static/me/wd_icon_fabushibai.png"
                    ></image>
                  </view>
                </view>
                <view
                  class="name"
                  style="
                    font-family: 'PingFang SC-Medium';
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #1a4d2e;
                  "
                >
                  {{ item.title || item.description || "作品" + index }}</view
                >
              </view>
            </view>
            <!-- 暂无内容提示 -->
            <view v-if="worksList.length === 0" class="empty-state">
              <image 
                src="@/static/icon/xx_img_zanwuxiaoxi.png" 
                mode="aspectFit" 
                class="empty-image"
              ></image>
              <text class="empty-text">暂无帖子</text>
              <text class="empty-subtext">快来发布你的第一个帖子吧~</text>
            </view>
          </view>
        </template>
        <!-- 加载更多提示 -->
        <!-- <view class="loading-more" v-if="isLoading">加载中...</view>
				<view class="no-more" v-if="!hasMore && worksList.length > 0">没有更多作品了</view>
				<view class="no-more" v-if="!hasMore && worksList.length === 0">暂无作品</view> -->
      </view>
      <view style="width: 100%; text-align: center; background: #fff"
        >杭州智潮创意科技有限公司</view
      >

      <view class="blankHeight"></view> 
    </view>
    <view class="reserveASeatBom"></view>
    <!-- 确认框 -->
    <CustomConfirm ref="customConfirm"></CustomConfirm>
    <!-- 提示框 -->
    <DialogBox ref="DialogBox"></DialogBox>
    <tabbar-view
      :tabbars="tabbars"
      :currentIndex="4"
      ref="tabbar"
    ></tabbar-view>
    <!-- SharePopup组件 --> 
    <SharePopup
      :visible="showShare"
      :share-url="shareUrl"
      :share-title="shareTitle"
      :share-desc="shareDesc"
      :share-img="shareImg"
      @close="showShare = false"
    />
 
  </view>
</template>

<script>
import tabbarView from "@/components/tabbar/tabbar.vue";
import tabbar from "@/mixins/tabbar";
import CustomConfirm from "@/components/custome-confirm/customeConfirm.vue";
import CircleAvatar from "@/components/CircleAvatar/CircleAvatar.vue";
import meCard from "@/components/meCard/meCard.vue";
import WorkItem from "@/components/WorkItem/WorkItem.vue";
export default {
  components: {
    tabbarView,
    CustomConfirm,
    CircleAvatar,
    meCard,
    WorkItem,
  },
  mixins: [tabbar],
  data() {
    return {
      title: "",
      sel: 1,
      firstLevelNavActive: 0,
      myinfo: {
        avator: "../../static/logo.png",
        nickname: "",
        join_name: "",
        num_1: 0,
        num_2: 0,
        num_3: 0,
        num_4: 0,
        is_login: "no",
        num_history: 0,
        num_collection: 0,
      },
      aihao_tags: [],
      menu_list: [],
      data_list: [  ],
      activeTab: 0,
      offset: 0,
      hasMore: true,
      isLoading: false,
      worksList: [],
      showShare: false,
      shareUrl: "https://your-share-url.com",
      shareTitle: "分享标题",
      shareDesc: "分享描述",
      shareImg: "https://your-share-image.com/image.jpg",
    };
  },
  onLoad() {
    // setTimeout(function() {
    // 	uni.setNavigationBarColor({
    // 		frontColor: '#ffffff',
    // 		backgroundColor: '#00000000',
    // 		animation: {
    // 			duration: 400,
    // 			timingFunc: 'easeIn'
    // 		}
    // 	})
    // }, 200);
  
  },
  onShow() {
    uni.$emit("check_login", () => {});
    // this.loadData();
    this.offset = 0;
    this.hasMore = true;
    this.worksList = [];
    this.loadInfo();
    this.loadWorksList();
  },
  onReachBottom() {
    if (this.hasMore && !this.isLoading) {
      this.loadMoreWorks();
    }
  },
  methods: {
    clickShare(item) {
      this.showShare = true;
    },
    async showConfirm() {
      let that = this;
      this.$refs["customConfirm"]
        .confirm({
          title: "确认解绑",
          content: "解绑微信账号后将无法继续使用它登录该App账号？",
          DialogType: "inquiry",
          btn1: "再考虑一下",
          btn2: "确认解绑",
          animation: 0,
        })
        .then((res) => {});
    },
    onBack() {},
    chkSel() {
      if (this.sel == 1) {
        this.sel = 0;
      } else {
        this.sel = 1;
      }
    },
    goPage(page) {
      if (page == "kefu") {
        let that = this;
        // #ifdef APP-PLUS
        plus.share.getServices((res) => {
          const wechat = res.find((i) => i.id === "weixin");
          if (wechat) {
            wechat.openCustomerServiceChat(
              {
                corpid: "wwbc06aa8311b6ac08",
                // url: 'https://work.weixin.qq.com/kfid/kfc4b0bcb4038d00a50'
                url: that.myinfo.wxkf,
              },
              (src) => {
                console.log("success:");
              },
              (err) => {
                console.log("error:");
              }
            );
          } else {
            uni.showToast({
              title: "没有检测到微信，请先安装",
              icon: "error",
            });
          }
        });
        // #endif
      } else if (page != "") {
        uni.navigateTo({
          url: page,
        });
      }
    },
    loadInfo() {
      console.log({
        uuid: getApp().globalData.uuid,
        skey: getApp().globalData.skey,
      });
      uni.request({
        url: this.$apiHost + "/User/getinfo",
        data: {
          uuid: getApp().globalData.uuid,
          skey: getApp().globalData.skey,
        },
        header: {
          "content-type": "application/json",
          sign: getApp().globalData.headerSign,
        },
        success: (res) => {
          console.log("----:", JSON.parse(JSON.stringify(res.data)));
          if (res.data.need_login == "yes") {
            // getApp().globalData.skey = "";
            // getApp().globalData.uuid = "";
            uni.removeStorageSync("wapptoken");
            uni.redirectTo({
              url: "/pages/login/login",
            });
            return;
          }
          if (res.data.aihao) {
            this.aihao_tags = res.data.aihao.split(",");
          }
          this.myinfo = res.data;
        },
        complete: (com) => {
          // uni.hideLoading();
        },
        fail: (e) => {
          console.log("----e:", e);
        },
      });
    },
    onLogout() {
      let that = this;
      this.$refs["DialogBox"]
        .confirm({
          title: "提示",
          content: "确定退出吗？",
          DialogType: "inquiry",
          btn1: "取消",
          btn2: "退出",
          animation: 0,
        })
        .then((res) => {
          uni.request({
            url: that.$apiHost + "/My/logout",
            data: {
              uuid: getApp().globalData.uuid,
              skey: getApp().globalData.skey,
            },
            header: {
              "content-type": "application/json",
              sign: getApp().globalData.headerSign,
            },
            success: (res) => {
              console.log("----:", res.data);
              // getApp().globalData.skey = "";
              // getApp().globalData.uuid = "";
              uni.removeStorageSync("wapptoken");
              uni.redirectTo({
                url: "/pages/login/login",
              });
            },
            complete: (com) => {
              // uni.hideLoading();
            },
            fail: (e) => {
              console.log("----e:", e);
            },
          });
        });
    },
    switchTab(index) {
      this.activeTab = index;
      this.offset = 0;
      this.hasMore = true;
      this.worksList = [];
      this.loadWorksList();
    },
    loadWorksList() {
      if (this.isLoading) return;
      this.isLoading = true;

      // 根据activeTab选择不同的API
      let apiUrl = "";
      if (this.firstLevelNavActive == 0) {
        if (this.activeTab === 0) {
          apiUrl = "/Work/getlist";
        } else {
          apiUrl = "/WorkAI/getMyQueueList";
        }
      } else if (this.firstLevelNavActive == 1) {
        apiUrl = "/Article/getlist";
      }
      uni.request({
        url: this.$apiHost + apiUrl,
        data: {
          uuid: getApp().globalData.uuid,
          skey: getApp().globalData.skey,
          type: "my", // 固定为my，表示获取自己的作品
          offset: this.offset,
          status: this.activeTab === 0 ? 1 : undefined, // 只有我的作品需要status参数
        },
        header: {
          "content-type": "application/json",
          sign: getApp().globalData.headerSign,
        },
        success: (res) => {
          console.log("列表数据:", JSON.parse(JSON.stringify(res.data)));
          if (res.data.success == "yes" && res.data.list) {
            if (res.data.list.length > 0) {
              this.worksList = [...this.worksList, ...res.data.list];
              this.offset += res.data.list.length;
            }

            if (res.data.list.length < 20) {
              this.hasMore = false;
            }
          } else {
            this.hasMore = false;
          }

          // 只有在"我的作品"标签下才更新data_list
          if (this.activeTab === 0) {
            this.updateDataList();
          }
          console.log("作品列表数据:", this.worksList);
        },
        complete: () => {
          this.isLoading = false;
        },
        fail: (e) => {
          console.log("请求列表失败:", e);
          this.isLoading = false;
        },
      });
    },
    firstLevelNavActiveSwitch(n) {
      this.firstLevelNavActive = n;
      this.offset = 0;
      this.hasMore = true;
      this.worksList = [];
      if (this.firstLevelNavActive == 0) {
        this.activeTab = 0;
      }
      this.loadWorksList();
    },

    loadMoreWorks() {
      if (this.hasMore && !this.isLoading) {
        this.loadWorksList();
      }
    },
    updateDataList() {
      this.data_list = this.worksList.map((item) => {
        return {
          url:
            item.images || item.img_url || item.url || "../../static/logo.png",
          title: item.title || item.description || "作品",
          id: item.id,
        };
      });
    },
    goWork(item) {
      uni.$emit("check_login", () => {});
      // , //任务状态(1:排队中,3:生成失败,4:生成失败,9:创作完成)
      if (this.activeTab == 0) {
        uni.navigateTo({
          // url: "/pages/index/workDetail?id=" + item.id,
          url:
            "/pages/makedetail/makeDetail?id=" +
            item.queue_id +
            "&queueId=" +
            item.id,
        });
      } else {
        if (item.status >= 9) {
          uni.navigateTo({
            url: "/pages/makedetail/makeDetail?id=" + item.id,
          });
        }
        if (item.status < 9 && item.status != 3 && item.status != 4) {
          // <!-- <text v-if="item.task_type === 1">灵感创作</text>
          // <text v-else-if="item.task_type === 2">音乐</text> -->
          var url = "";
          if (item.task_type === 1) {
            url = "/makedetail/makeImgDetail";
          }
          if (item.task_type === 2) {
            url = "/makedetail/makeMusicDetail";
          }
          if (url) {
            uni.navigateTo({
              url: "/pages" + url + "?id=" + item.id,
            });
          }
        }
      }
    },
    goWork2(item) {
      uni.navigateTo({
        // url: "/pages/index/workDetail?id=" + item.id,
        url: "/pages/index/articleDetail?id=" + item.id,
      });
    },
    navigateToSettings() {
      uni.$emit("check_login", () => {
        uni.navigateTo({
          url: "/pages/my/setting",
        });
      });
    },
    navigateToFollow() {
      uni.navigateTo({
        url: "/pages/my/follow",
      });
    },
  },
};
</script>

<style scoped lang="scss">
@import "my.scss";

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 0;
  margin-top: 40rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  width: 710rpx;
  .empty-image {
    width: 240rpx;
    height: 240rpx;
    margin-bottom: 30rpx;
  }
  
  .empty-text {
    font-size: 32rpx;
    color: #333333;
    margin-bottom: 16rpx;
    font-weight: 500;
  }
  
  .empty-subtext {
    font-size: 28rpx;
    color: #999999;
  }
}
</style>