job.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467
  1. <template>
  2. <view class="page">
  3. <!-- 顶部黄色背景 -->
  4. <view class="top-bg"></view>
  5. <!-- 内容区域 -->
  6. <view class="content-area">
  7. <!-- 彩豆余额展示区 -->
  8. <view class="bean-balance">
  9. <view class="balance-header">
  10. <view class="title-area">
  11. <view class="yellow-dot"></view>
  12. <text class="my-bean-title">我的彩豆</text>
  13. </view>
  14. <view class="exchange-btn" @click="showExchangePopup">兑换</view>
  15. </view>
  16. <view class="bean-number">{{ num_gmd }}</view>
  17. </view>
  18. <!-- 星愿打卡区域 -->
  19. <view class="sign-cards">
  20. <view class="card purple-card">
  21. <view class="card-title">初次见面礼</view>
  22. <view class="card-desc">完善个人资料可得</view>
  23. <view class="card-reward">奖励+100彩豆</view>
  24. <view class="card-progress">{{ newer_bfb }}</view>
  25. </view>
  26. <view class="card yellow-card">
  27. <view class="card-title">每日签到</view>
  28. <view class="card-desc">连续签到奖励更多</view>
  29. <view class="sign-btn" @click="showSignPopup">立即签到</view>
  30. </view>
  31. </view>
  32. <!-- 每日任务列表 -->
  33. <view class="task-list">
  34. <view class="task-header">
  35. <text class="task-title">每日任务</text>
  36. <text class="task-subtitle">获取免费彩豆</text>
  37. </view>
  38. <!-- 任务项列表 -->
  39. <view class="task-item" v-for="(item, index) in taskList" :key="index">
  40. <view class="task-info">
  41. <view class="task-name">{{ item.name }}</view>
  42. <view class="task-desc">{{ item.content }}</view>
  43. </view>
  44. <view class="task-reward">+{{ item.num }}彩豆</view>
  45. <view class="task-btn" :class="{ 'task-completed': item.status == 9 }" @click="claimReward(index)">
  46. {{ item.status == 9 ? "已领取" : "领取" }}
  47. </view>
  48. </view>
  49. </view>
  50. </view>
  51. <!-- 彩豆兑换弹窗 -->
  52. <view class="exchange-popup" v-if="showExchange">
  53. <view class="popup-mask" @click="hideExchangePopup"></view>
  54. <view class="popup-content">
  55. <!-- 弹窗顶部信息栏 -->
  56. <view class="popup-header">
  57. <text class="available-balance">可用M币: 14500</text>
  58. <text class="exchange-title">兑换彩豆</text>
  59. </view>
  60. <!-- 兑换区域主体 -->
  61. <view class="exchange-area">
  62. <view class="exchange-title-area">
  63. <text class="exchange-main-title">M币兑换彩豆数</text>
  64. <text class="exchange-subtitle">兑换彩豆数必须是10的倍数</text>
  65. </view>
  66. <view class="input-area">
  67. <view class="bean-icon"></view>
  68. <input type="number" class="exchange-input" placeholder="请输入兑换彩豆数量" v-model="exchangeAmount" />
  69. </view>
  70. <!-- 操作按钮 -->
  71. <view class="action-area">
  72. <view class="exchange-btn-large" @click="confirmExchange">立即兑换彩豆</view>
  73. <text class="tips-text">彩豆可用于创作(生成图片、音乐等AI创作功能)</text>
  74. </view>
  75. </view>
  76. </view>
  77. </view>
  78. <!-- 签到弹窗 -->
  79. <view class="sign-popup" v-if="showSign">
  80. <view class="popup-mask" @click="hideSignPopup"></view>
  81. <view class="sign-popup-content">
  82. <!-- 弹窗顶部 -->
  83. <view class="sign-popup-header">
  84. <text class="sign-popup-title">每日签到领好礼</text>
  85. <view class="sign-notify-switch">
  86. <text class="sign-notify-text">签到消息提醒</text>
  87. <switch class="sign-switch" color="#9C27B0" :checked="signNotify" @change="toggleSignNotify" />
  88. </view>
  89. <view class="sign-days-tag">已签到{{ signInfo.signDay }}天</view>
  90. </view>
  91. <!-- VIP特权区域 -->
  92. <view class="vip-area">
  93. <view class="vip-left">
  94. <text class="vip-text">VIP十通会员,签到享专属好礼</text>
  95. </view>
  96. <view class="vip-right">
  97. <text class="vip-offer">限时优惠 ></text>
  98. </view>
  99. </view>
  100. <!-- 签到奖励网格布局 -->
  101. <view class="sign-grid">
  102. <view class="sign-grid-item" v-for="(item, index) in signRewards" :key="index" :class="{
  103. 'sign-received':
  104. index < signInfo.signDay ||
  105. (index === signInfo.signDay - 1 && signInfo.isSigned),
  106. }">
  107. <view class="sign-day-num">{{ item.dayNum }}</view>
  108. <view class="sign-item-img"></view>
  109. <view class="sign-item-name">{{ item.reward }}</view>
  110. <view class="sign-vip-tag" v-if="item.isVip">VIP</view>
  111. <view class="sign-received-mask" v-if="
  112. index < signInfo.signDay ||
  113. (index === signInfo.signDay - 1 && signInfo.isSigned)
  114. ">
  115. <text class="received-text">已领取</text>
  116. </view>
  117. </view>
  118. </view>
  119. <!-- 底部签到按钮 -->
  120. <view class="sign-btn-large" :class="{ 'sign-btn-disabled': signInfo.isSigned }" @click="confirmSign">
  121. {{ signInfo.isSigned ? "今日已签到" : "签到领取奖励" }}
  122. </view>
  123. </view>
  124. </view>
  125. <checkInPopUpWindow ref="checkInPopUpWindow"></checkInPopUpWindow>
  126. <!-- 提示框 -->
  127. <DialogBox ref="DialogBox"></DialogBox>
  128. </view>
  129. </template>
  130. <script>
  131. import checkInPopUpWindow from "@/components/checkIn-popUp-window/checkIn-popUp-window.vue";
  132. export default {
  133. components: {
  134. checkInPopUpWindow
  135. },
  136. data() {
  137. return {
  138. title: "任务中心",
  139. myinfo: {},
  140. realname: "",
  141. num_gmd: 0,
  142. newer_bfb: "",
  143. beanBalance: 2560,
  144. showExchange: false,
  145. exchangeAmount: "",
  146. mCoinBalance: 14500,
  147. showSign: false,
  148. signNotify: true,
  149. signRewards: [{
  150. dayNum: "01",
  151. reward: "10彩豆",
  152. isVip: false,
  153. },
  154. {
  155. dayNum: "02",
  156. reward: "15彩豆",
  157. isVip: false,
  158. },
  159. {
  160. dayNum: "03",
  161. reward: "20彩豆",
  162. isVip: false,
  163. },
  164. {
  165. dayNum: "04",
  166. reward: "25彩豆",
  167. isVip: false,
  168. },
  169. {
  170. dayNum: "05",
  171. reward: "30彩豆",
  172. isVip: false,
  173. },
  174. {
  175. dayNum: "06",
  176. reward: "35彩豆",
  177. isVip: true,
  178. },
  179. {
  180. dayNum: "07",
  181. reward: "50彩豆",
  182. isVip: true,
  183. },
  184. ],
  185. signInfo: {
  186. signDay: 1,
  187. isSigned: false,
  188. reward: 0,
  189. },
  190. taskList: [],
  191. };
  192. },
  193. onLoad() {
  194. this.loadData();
  195. this.getSignInfo();
  196. },
  197. onShow() {
  198. setTimeout(() => {
  199. this.opencheckInPopUpWindow()
  200. }, 100)
  201. },
  202. methods: {
  203. opencheckInPopUpWindow() {
  204. this.$refs.checkInPopUpWindow.open();
  205. },
  206. closecheckInPopUpWindow() {
  207. this.$refs.checkInPopUpWindow.close();
  208. },
  209. onBack() {},
  210. loadData() {
  211. uni.request({
  212. url: this.$apiHost + "/Job/getlist",
  213. data: {
  214. uuid: getApp().globalData.uuid,
  215. },
  216. header: {
  217. "content-type": "application/json",
  218. sign: getApp().globalData.headerSign,
  219. },
  220. success: (res) => {
  221. console.log("----:", res.data);
  222. this.num_gmd = res.data.num_gmd;
  223. this.newer_bfb = res.data.newer_bfb;
  224. this.taskList = res.data.list;
  225. },
  226. complete: (com) => {
  227. // uni.hideLoading();
  228. },
  229. fail: (e) => {
  230. console.log("----e:", e);
  231. },
  232. });
  233. },
  234. // 获取签到信息
  235. getSignInfo() {
  236. uni.request({
  237. url: this.$apiHost + "/User/sign7Day",
  238. data: {
  239. uuid: getApp().globalData.uuid,
  240. action: "get",
  241. },
  242. header: {
  243. "content-type": "application/json",
  244. sign: getApp().globalData.headerSign,
  245. },
  246. success: (res) => {
  247. if (res.data.success === "yes") {
  248. this.signInfo = {
  249. signDay: res.data.data.sign_day,
  250. isSigned: res.data.data.is_signed,
  251. reward: res.data.data.reward || 0,
  252. };
  253. }
  254. },
  255. fail: (e) => {
  256. console.log("获取签到信息失败:", e);
  257. },
  258. });
  259. },
  260. // 显示兑换弹窗
  261. showExchangePopup() {
  262. this.showExchange = true;
  263. },
  264. // 隐藏兑换弹窗
  265. hideExchangePopup() {
  266. this.showExchange = false;
  267. },
  268. // 显示签到弹窗
  269. showSignPopup() {
  270. this.showSign = true;
  271. },
  272. // 隐藏签到弹窗
  273. hideSignPopup() {
  274. this.showSign = false;
  275. },
  276. // 切换签到通知开关
  277. toggleSignNotify(e) {
  278. this.signNotify = e.detail.value;
  279. },
  280. // 确认签到
  281. confirmSign() {
  282. if (this.signInfo.isSigned) {
  283. uni.showToast({
  284. title: "今日已签到",
  285. icon: "none",
  286. });
  287. return;
  288. }
  289. uni.request({
  290. url: this.$apiHost + "/User/sign7Day",
  291. data: {
  292. uuid: getApp().globalData.uuid,
  293. action: "sign",
  294. },
  295. header: {
  296. "content-type": "application/json",
  297. sign: getApp().globalData.headerSign,
  298. },
  299. success: (res) => {
  300. if (res.data.success === "yes") {
  301. uni.showToast({
  302. title: res.data.str,
  303. icon: "none",
  304. });
  305. // 更新签到信息
  306. this.getSignInfo();
  307. // 更新彩豆数量
  308. this.loadData();
  309. } else {
  310. uni.showToast({
  311. title: res.data.str,
  312. icon: "none",
  313. });
  314. }
  315. },
  316. fail: (e) => {
  317. console.log("签到失败:", e);
  318. uni.showToast({
  319. title: "签到失败,请稍后重试",
  320. icon: "none",
  321. });
  322. },
  323. });
  324. },
  325. // 确认兑换
  326. confirmExchange() {
  327. if (!this.exchangeAmount) {
  328. uni.showToast({
  329. title: "请输入兑换数量",
  330. icon: "none",
  331. });
  332. return;
  333. }
  334. const amount = parseInt(this.exchangeAmount);
  335. if (isNaN(amount) || amount <= 0) {
  336. uni.showToast({
  337. title: "请输入有效数量",
  338. icon: "none",
  339. });
  340. return;
  341. }
  342. if (amount % 10 !== 0) {
  343. uni.showToast({
  344. title: "兑换数量必须是10的倍数",
  345. icon: "none",
  346. });
  347. return;
  348. }
  349. let that = this;
  350. uni.request({
  351. url: this.$apiHost + "/User/gmmToGMD",
  352. data: {
  353. uuid: getApp().globalData.uuid,
  354. num: amount,
  355. },
  356. header: {
  357. "content-type": "application/json",
  358. sign: getApp().globalData.headerSign,
  359. },
  360. success: (res) => {
  361. console.log("----:", res.data);
  362. uni.showToast({
  363. title: res.data.str,
  364. icon: "none",
  365. });
  366. if (res.data.success == "yes") {
  367. this.hideExchangePopup();
  368. this.exchangeAmount = "";
  369. setTimeout(function() {
  370. that.loadData();
  371. }, 900);
  372. }
  373. },
  374. complete: (com) => {
  375. // uni.hideLoading();
  376. },
  377. fail: (e) => {
  378. console.log("----e:", e);
  379. },
  380. });
  381. // // 模拟兑换处理
  382. // uni.showToast({
  383. // title: "兑换成功,获得" + amount + "彩豆",
  384. // icon: 'none'
  385. // });
  386. // this.beanBalance += amount;
  387. // this.hideExchangePopup();
  388. // this.exchangeAmount = '';
  389. },
  390. claimReward(index) {
  391. if (this.taskList[index].status == 9) {
  392. uni.showToast({
  393. title: "已领取该奖励",
  394. icon: "none",
  395. });
  396. return;
  397. }
  398. let that = this;
  399. uni.request({
  400. url: this.$apiHost + "/Job/doAct",
  401. data: {
  402. uuid: getApp().globalData.uuid,
  403. id: this.taskList[index].id,
  404. },
  405. header: {
  406. "content-type": "application/json",
  407. sign: getApp().globalData.headerSign,
  408. },
  409. success: (res) => {
  410. console.log("----:", res.data);
  411. if (res.data.success == "yes") {
  412. uni.showToast({
  413. title: res.data.str,
  414. icon: "none",
  415. });
  416. setTimeout(function() {
  417. that.loadData();
  418. }, 900);
  419. }
  420. },
  421. complete: (com) => {
  422. // uni.hideLoading();
  423. },
  424. fail: (e) => {
  425. console.log("----e:", e);
  426. },
  427. });
  428. },
  429. },
  430. };
  431. </script>
  432. <style scoped lang="scss">
  433. @import "job.scss";
  434. </style>