MoeNovaClient/pages/my/job.vue

<template>
  <view class="page">
    <!-- 顶部黄色背景 -->
    <PageHeader class="PageHeader">
      <template slot="center"> 任务中心 </template>
      <template slot="right">
        <DropdownMenu
          :options="dropdownOptions"
          @select="handleDropdownSelect"
        />
      </template>
    </PageHeader>
    <view class="occupyHigh"></view>
    <!-- 内容区域 -->
    <view class="content-area">
      <!-- 星源余额展示区 -->
      <view class="person-info">
        <view class="person-info-left">
          <CircleAvatar
            class="avator"
            v-if="myinfo.avator"
            :src="myinfo.avator"
          ></CircleAvatar>
          <view class="title-area">
            <text class="my-bean-title">我的星源</text>
            <view class="bean-number">
              <image src="@/static/me/job/wd_icon_xingyuan.png"></image>
              {{ num_gmd }}
            </view>
          </view>
        </view>
        <view class="exchange-btn" @click="openNicknamePopUpWindow()"
          >兑换</view
        >
      </view>
      <!-- 星源余额展示区 -->
      <!-- <view class="bean-balance"  >
				<view class="balance-header">
					<view class="title-area">
						<view class="yellow-dot"></view>
						<text class="my-bean-title">我的星源</text>
					</view>
					<view class="exchange-btn" @click="showExchangePopup">兑换</view>
				</view>
				<view class="bean-number">{{ num_gmd }}</view>
			</view> -->
      <view class="starWishCheckIn">
        <image src="@/static/me/job/rw_wenzi_01.png" class="title"></image>
        <view class="card purple-card">
          <view class="card-title">初次见面礼</view>
          <view class="card-desc">完善个人资料达到{{ newer_bfb }}</view>
          <view class="card-btn card-reward">+100星源</view>
        </view>
        <view class="card yellow-card">
          <view class="card-title">每日签到</view>
          <view class="card-desc">签到领奖励，快来签到吧！</view>
          <view class="card-btn sign-btn" @click="opencheckInPopUpWindow()"
            >立即签到</view
          >
        </view>
      </view>
      <!-- 星愿打卡区域 -->
      <!-- <view class="sign-cards" v-if="false">
				<view class="card purple-card">
					<view class="card-title">初次见面礼</view>
					<view class="card-desc">完善个人资料可得</view>
					<view class="card-reward">奖励+100星源</view>
					<view class="card-progress">{{ newer_bfb }}</view>
				</view>
				<view class="card yellow-card">
					<view class="card-title">每日签到</view>
					<view class="card-desc">连续签到奖励更多</view>
					<view class="sign-btn" @click="showSignPopup">立即签到</view>
					<view class="sign-btn" @click="opencheckInPopUpWindow()">立即签到</view>
				</view>
			</view> -->

      <!-- 每日任务列表 -->
      <view class="task-list-box">
        <view class="task-header">
          <image src="@/static/me/job/rw_wenzi_02.png"></image>
          <text class="task-subtitle">(获取免费星源)</text>
        </view>

        <!-- 任务项列表 -->
        <view class="task-item" v-for="(item, index) in taskList" :key="index">
          <view class="task-info">
            <image :src="item.image"></image>
            <view>
              <view class="task-name one-omit">{{ item.name }}</view>
              <view class="task-desc one-omit">{{ item.content }}</view>
            </view>
          </view>
          <view class="task-reward">
            <image src="@/static/me/job/wd_icon_xingyuan.png"></image>+{{
              item.num
            }}
          </view>
          <view
            class="task-btn"
            :class="{ 'task-completed': item.status == 9 }"
            @click="claimReward(index)"
          >
            {{ item.status == 9 ? "已领取" : "领取" }}
          </view>
        </view>
      </view>

      <!-- 每日任务列表 
			<view class="task-list">
				<view class="task-header">
					<text class="task-title">每日任务</text>
					<text class="task-subtitle">获取免费星源</text>
				</view> 
				<view class="task-item" v-for="(item, index) in taskList" :key="index">
					<view class="task-info">
						<view class="task-name">{{ item.name }}</view>
						<view class="task-desc">{{ item.content }}</view>
					</view>
					<view class="task-reward">+{{ item.num }}星源</view>
					<view class="task-btn" :class="{ 'task-completed': item.status == 9 }" @click="claimReward(index)">
						{{ item.status == 9 ? "已领取" : "领取" }}
					</view>
				</view>
			</view>-->
    </view>

    <!-- 星源兑换弹窗 -->
    <view class="exchange-popup" v-if="showExchange">
      <view class="popup-mask" @click="hideExchangePopup"></view>
      <view class="popup-content">
        <!-- 弹窗顶部信息栏 -->
        <view class="popup-header">
          <text class="available-balance">可用M币: 14500</text>
          <text class="exchange-title">兑换星源</text>
        </view>

        <!-- 兑换区域主体 -->
        <view class="exchange-area">
          <view class="exchange-title-area">
            <text class="exchange-main-title">M币兑换星源数</text>
            <text class="exchange-subtitle">兑换星源数必须是10的倍数</text>
          </view>

          <view class="input-area">
            <view class="bean-icon"></view>
            <input
              type="number"
              class="exchange-input"
              placeholder="请输入兑换星源数量"
              v-model="exchangeAmount"
            />
          </view>

          <!-- 操作按钮 -->
          <view class="action-area">
            <view class="exchange-btn-large" @click="confirmExchange"
              >立即兑换星源</view
            >
            <text class="tips-text"
              >星源可用于创作（生成图片、音乐等AI创作功能）</text
            >
          </view>
        </view>
      </view>
    </view>

    <checkInPopUpWindow
      :checkInDays="6"
      :signInfo="signInfo"
      :signNotify="signNotify"
      @toggleSignNotify="toggleSignNotify"
      ref="checkInPopUpWindow"
      @confirmSign="confirmSign()"
    >
    </checkInPopUpWindow>

    <!-- 提示框 -->
    <DialogBox ref="DialogBox"></DialogBox>
    <!-- 兑换m币弹窗-->
    <view class="NicknamePopUpWindowBox">
      <NicknamePopup
        title=""
        subtitle=""
        class="NicknamePopUpWindow"
        ref="NicknamePopUpWindow"
      >
        <template slot="heard">
          <view class="nickname-heard">
            <view class="available-mCoin">可用M币：{{ myinfo.num_gmm }}</view>
            <view class="exchange-title">兑换星源</view>
          </view>
        </template>
        <template slot="content">
          <view class="content-box">
            <view class="prompt">
              M币兑换星源数<text>（兑换星源数必须是10的倍数）</text>
            </view>
            <view class="input-box">
              <image src="@/static/me/job/wd_icon_xingyuan.png"></image>
              <uv-input
                type="number"
                class="input"
                placeholder="请输入昵称"
                border="none"
                v-model="exchangeAmount"
                maxlength="20"
              ></uv-input>
            </view>
            <view class="btn-box" @click="showExchangeConfirm">立即兑换星源</view>
            <text class="tips-text"
              >星源可用于创作（生成图片、音乐等AI创作功能）</text
            >
          </view>
        </template>
      </NicknamePopup>
    </view>
  </view>
</template>

<script>
import checkInPopUpWindow from "@/components/checkIn-popUp-window/checkIn-popUp-window.vue";
import DropdownMenu from "@/components/DropdownMenu.vue";

export default {
  components: {
    checkInPopUpWindow,
    DropdownMenu,
  },
  data() {
    return {
      title: "任务中心",
      myinfo: {},
      realname: "",
      num_gmd: 0,
      newer_bfb: "",
      beanBalance: 2560,
      showExchange: false,
      exchangeAmount: "",
      mCoinBalance: 0,
      signNotify: true,
      signRewards: [
        {
          dayNum: "01",
          reward: "10星源",
          isVip: false,
        },
        {
          dayNum: "02",
          reward: "15星源",
          isVip: false,
        },
        {
          dayNum: "03",
          reward: "20星源",
          isVip: false,
        },
        {
          dayNum: "04",
          reward: "25星源",
          isVip: false,
        },
        {
          dayNum: "05",
          reward: "30星源",
          isVip: false,
        },
        {
          dayNum: "06",
          reward: "35星源",
          isVip: true,
        },
        {
          dayNum: "07",
          reward: "50星源",
          isVip: true,
        },
      ],
      signInfo: {
        signDay: 1,
        isSigned: false,
        reward: 0,
      },
      taskList: [],
      dropdownOptions: [{ label: "星源记录", type: "starSourceRecord" }],
      isRefreshing: false,
    };
  },
  onPullDownRefresh() {
    if (this.isRefreshing) return;
    
    this.isRefreshing = true;
    this.refreshData();
  },
  onLoad() {
    this.loadData();
    this.getSignInfo();
  },
  onShow() {},
  methods: {
    opencheckInPopUpWindow() {
      this.$refs.checkInPopUpWindow.open();
    },
    closecheckInPopUpWindow() {
      this.$refs.checkInPopUpWindow.close();
    },
    openNicknamePopUpWindow() {
      this.$refs.NicknamePopUpWindow.open();
    },
    closeNicknamePopUpWindow() {
      this.$refs.NicknamePopUpWindow.close();
    },
    onBack() {},

    loadData() {
      return new Promise((resolve, reject) => {
        uni.request({
          url: this.$apiHost + "/Job/getlist",
          data: {
            uuid: getApp().globalData.uuid,
          },
          header: {
            "content-type": "application/json",
            sign: getApp().globalData.headerSign,
          },
          success: (res) => {
            console.log("----:", res.data);
            this.num_gmd = res.data.num_gmd;
            this.newer_bfb = res.data.newer_bfb;
            this.taskList = res.data.list;
            resolve(res);
          },
          complete: (com) => {
            // uni.hideLoading();
          },
          fail: (e) => {
            console.log("----e:", e);
            reject(e);
          },
        });
      });
    },

    getSignInfo() {
      return new Promise((resolve, reject) => {
        uni.request({
          url: this.$apiHost + "/User/sign7Day",
          data: {
            uuid: getApp().globalData.uuid,
            action: "get",
          },
          header: {
            "content-type": "application/json",
            sign: getApp().globalData.headerSign,
          },
          success: (res) => {
            if (res.data.success === "yes") {
              this.signInfo = {
                signDay: res.data.data.sign_day,
                isSigned: res.data.data.is_signed,
                reward: res.data.data.reward || 0,
              };
            }
            resolve(res);
          },
          fail: (e) => {
            console.log("获取签到信息失败:", e);
            reject(e);
          },
        });
        
        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) => {
            this.myinfo = res.data;
            resolve(res);
          },
          complete: (com) => {},
          fail: (e) => {
            console.log("----e:", e);
            reject(e);
          },
        });
      });
    },

    showExchangePopup() {
      this.showExchange = true;
    },

    hideExchangePopup() {
      this.showExchange = false;
    },

    toggleSignNotify(falg) {
      this.signNotify = falg;
    },

    confirmSign() {
      if (this.signInfo.isSigned) {
        uni.showToast({
          title: "今日已签到",
          icon: "none",
        });
        return;
      }

      uni.request({
        url: this.$apiHost + "/User/sign7Day",
        data: {
          uuid: getApp().globalData.uuid,
          action: "sign",
        },
        header: {
          "content-type": "application/json",
          sign: getApp().globalData.headerSign,
        },
        success: (res) => {
          if (res.data.success === "yes") {
            uni.showToast({
              title: res.data.str,
              icon: "none",
            });
            this.getSignInfo();
            this.loadData();
          } else {
            uni.showToast({
              title: res.data.str,
              icon: "none",
            });
          }
        },
        fail: (e) => {
          console.log("签到失败:", e);
          uni.showToast({
            title: "签到失败，请稍后重试",
            icon: "none",
          });
        },
      });
    },

    confirmExchange() {
      if (!this.exchangeAmount) {
        uni.showToast({
          title: "请输入兑换数量",
          icon: "none",
        });
        return;
      }

      const amount = parseInt(this.exchangeAmount);

      if (isNaN(amount) || amount <= 0) {
        uni.showToast({
          title: "请输入有效数量",
          icon: "none",
        });
        return;
      }

      if (amount % 10 !== 0) {
        uni.showToast({
          title: "兑换数量必须是10的倍数",
          icon: "none",
        });
        return;
      }
      let that = this;
      uni.request({
        url: this.$apiHost + "/User/gmmToGMD",
        data: {
          uuid: getApp().globalData.uuid,
          num: amount,
        },
        header: {
          "content-type": "application/json",
          sign: getApp().globalData.headerSign,
        },
        success: (res) => {
          console.log("----:", res.data);
          uni.showToast({
            title: res.data.str,
            icon: "none",
          });
          if (res.data.success == "yes") {
            this.hideExchangePopup();
            this.exchangeAmount = "";
            setTimeout(function () {
              that.loadData();
            }, 900);
          }
        },
        complete: (com) => {
          this.closeNicknamePopUpWindow();
        },
        fail: (e) => {
          console.log("----e:", e);
        },
      });
    },

    claimReward(index) {
      if (this.taskList[index].status == 9) {
        uni.showToast({
          title: "已领取该奖励",
          icon: "none",
        });
        return;
      }
      let that = this;
      uni.request({
        url: this.$apiHost + "/Job/doAct",
        data: {
          uuid: getApp().globalData.uuid,
          id: this.taskList[index].id,
        },
        header: {
          "content-type": "application/json",
          sign: getApp().globalData.headerSign,
        },
        success: (res) => {
          console.log("----:", res.data);
          if (res.data.success == "yes") {
            uni.showToast({
              title: res.data.str,
              icon: "none",
            });
            setTimeout(function () {
              that.loadData();
            }, 900);
          }
        },
        complete: (com) => {
          // uni.hideLoading();
        },
        fail: (e) => {
          console.log("----e:", e);
        },
      });
    },

    handleDropdownSelect(item) {
      switch (item.type) {
        case "starSourceRecord":
          uni.navigateTo({
            url: "/pages/vip/record?type=star",
          });
          break;
      }
    },

    showExchangeConfirm() {
      this.$refs["DialogBox"]
        .confirm({
          title: "确认兑换",
          content: "确定要兑换" + this.exchangeAmount + "星源吗？",
          DialogType: "inquiry",
          btn1: "再考虑一下",
          btn2: "确认兑换",
          animation: 0,
        })
        .then((res) => {
          if (res.confirm) {
            this.confirmExchange();
          }
        });
    },

    refreshData() {
      Promise.all([
        this.loadData(),
        this.getSignInfo()
      ]).then(() => {
        this.isRefreshing = false;
        uni.stopPullDownRefresh();
      }).catch(() => {
        this.isRefreshing = false;
        uni.stopPullDownRefresh();
      });
    },
  },
};
</script>

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