earn-points.vue 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408
  1. <template>
  2. <view class="earn-points">
  3. <!-- 顶部导航栏 -->
  4. <view class="header">
  5. <view class="back-icon" @click="handleBack"></view>
  6. <text class="header-title">赚取积分</text>
  7. <view class="header-right"></view>
  8. </view>
  9. <!-- 当前积分 -->
  10. <view class="current-points">
  11. <text class="label">当前积分</text>
  12. <text class="value">{{ balance }}</text>
  13. </view>
  14. <!-- 积分规则列表 -->
  15. <view class="rules-section">
  16. <view class="section-title">积分获取方式</view>
  17. <view class="rule-list">
  18. <view class="rule-item" v-for="(rule, index) in rules" :key="index">
  19. <view class="rule-icon">{{ getIcon(rule.ruleType) }}</view>
  20. <view class="rule-info">
  21. <view class="rule-name">{{ rule.ruleName }}</view>
  22. <view class="rule-desc">{{ getDesc(rule.ruleType) }}</view>
  23. </view>
  24. <view class="rule-points">+{{ rule.pointValue }}</view>
  25. <view class="rule-action" :class="{ disabled: rule.ruleType === 1 && isSignedToday }" @click="handleAction(rule)">
  26. {{ rule.ruleType === 1 && isSignedToday ? '已签到' : getActionText(rule.ruleType) }}
  27. </view>
  28. </view>
  29. </view>
  30. </view>
  31. <!-- 积分说明 -->
  32. <view class="tips-section">
  33. <view class="section-title">积分说明</view>
  34. <view class="tips-content">
  35. <view class="tip-item">1. 积分可在积分商城兑换精美礼品</view>
  36. <view class="tip-item">2. 每日签到可获得积分奖励</view>
  37. <view class="tip-item">3. 上传优质线索可获得额外积分</view>
  38. <view class="tip-item">4. 撮合成功可获得大量积分奖励</view>
  39. <view class="tip-item">5. 积分永久有效,请放心使用</view>
  40. </view>
  41. </view>
  42. </view>
  43. </template>
  44. <script>
  45. import api from '@/utils/api.js'
  46. export default {
  47. name: 'earn-points',
  48. data() {
  49. return {
  50. balance: 0,
  51. rules: [],
  52. makerId: null,
  53. userId: null, // 用户ID,用于签到
  54. isSignedToday: false // 今日是否已签到
  55. }
  56. },
  57. onLoad() {
  58. this.initData()
  59. },
  60. onShow() {
  61. // 每次显示页面时刷新数据,确保数据同步
  62. if (this.makerId) {
  63. this.loadBalance()
  64. this.checkSignInStatus()
  65. }
  66. },
  67. methods: {
  68. async initData() {
  69. const userInfo = uni.getStorageSync('userInfo')
  70. // 保存userId用于签到
  71. if (userInfo && userInfo.userId) {
  72. this.userId = userInfo.userId
  73. }
  74. if (userInfo && userInfo.matchmakerId) {
  75. this.makerId = userInfo.matchmakerId
  76. } else if (userInfo && userInfo.userId) {
  77. // 如果没有matchmakerId,通过API获取
  78. try {
  79. const res = await api.matchmaker.getByUserId(userInfo.userId)
  80. let matchmaker = res
  81. if (res && res.data) {
  82. matchmaker = res.data
  83. }
  84. if (matchmaker && (matchmaker.matchmakerId || matchmaker.matchmaker_id)) {
  85. this.makerId = matchmaker.matchmakerId || matchmaker.matchmaker_id
  86. // 保存到userInfo中
  87. userInfo.matchmakerId = this.makerId
  88. uni.setStorageSync('userInfo', userInfo)
  89. }
  90. } catch (e) {
  91. }
  92. }
  93. await Promise.all([
  94. this.loadBalance(),
  95. this.loadRules(),
  96. this.checkSignInStatus()
  97. ])
  98. },
  99. // 检查今日签到状态
  100. async checkSignInStatus() {
  101. if (!this.makerId) return
  102. try {
  103. const res = await api.matchmaker.checkinStatus(this.makerId)
  104. // 解析返回数据
  105. let data = res
  106. if (res && res.data !== undefined) {
  107. data = res.data
  108. }
  109. this.isSignedToday = data === true || data?.isCheckedIn === true || data?.checked === true
  110. } catch (e) {
  111. }
  112. },
  113. async loadBalance() {
  114. if (!this.makerId) return
  115. try {
  116. const res = await api.pointsMall.getBalance(this.makerId)
  117. this.balance = res.balance || 0
  118. } catch (e) {
  119. }
  120. },
  121. async loadRules() {
  122. try {
  123. const res = await api.pointsMall.getRules()
  124. this.rules = res || []
  125. } catch (e) {
  126. }
  127. },
  128. handleBack() {
  129. uni.navigateBack()
  130. },
  131. getIcon(ruleType) {
  132. const icons = {
  133. 1: '📅', // 签到
  134. 2: '📤', // 上传线索
  135. 3: '💕', // 撮合成功
  136. 4: '📚', // 完成培训
  137. 5: '🎁' // 活动奖励
  138. }
  139. return icons[ruleType] || '⭐'
  140. },
  141. getDesc(ruleType) {
  142. const descs = {
  143. 1: '每日签到即可获得积分',
  144. 2: '上传优质客户线索',
  145. 3: '成功撮合一对情侣',
  146. 4: '完成红娘培训课程',
  147. 5: '参与平台活动获得'
  148. }
  149. return descs[ruleType] || '完成任务获得积分'
  150. },
  151. getActionText(ruleType) {
  152. const texts = {
  153. 1: '去签到',
  154. 2: '去上传',
  155. 3: '去撮合',
  156. 4: '去学习',
  157. 5: '查看'
  158. }
  159. return texts[ruleType] || '去完成'
  160. },
  161. async handleAction(rule) {
  162. if (rule.ruleType === 1) {
  163. // 签到 - 先检查是否已签到
  164. if (this.isSignedToday) {
  165. uni.showToast({ title: '今日已签到', icon: 'none' })
  166. return
  167. }
  168. await this.doSignIn(rule)
  169. } else if (rule.ruleType === 2) {
  170. // 上传资源 - 跳转到我的资源的信息录入页面
  171. uni.navigateTo({
  172. url: '/pages/matchmaker-workbench/resource-input'
  173. })
  174. } else if (rule.ruleType === 3) {
  175. // 撮合成功 - 跳转到撮合成功审核页面
  176. uni.navigateTo({
  177. url: '/pages/matchmaker-workbench/success-case-upload'
  178. })
  179. } else if (rule.ruleType === 4) {
  180. // 培训课程
  181. uni.navigateTo({
  182. url: '/pages/courses/list'
  183. })
  184. } else {
  185. uni.showToast({
  186. title: '功能开发中',
  187. icon: 'none'
  188. })
  189. }
  190. },
  191. async doSignIn(rule) {
  192. if (!this.userId) {
  193. uni.showToast({ title: '请先登录', icon: 'none' })
  194. return
  195. }
  196. try {
  197. // 使用userId进行签到(后端会根据userId查询matchmaker并添加积分)
  198. const res = await api.matchmaker.doCheckin(this.userId)
  199. // 检查签到结果
  200. let success = false
  201. if (res === true || res?.data === true) {
  202. success = true
  203. } else if (res?.msg === '今日已签到') {
  204. this.isSignedToday = true
  205. uni.showToast({ title: '今日已签到', icon: 'none' })
  206. return
  207. }
  208. if (success) {
  209. // 签到成功后更新状态
  210. this.isSignedToday = true
  211. // 刷新积分余额
  212. await this.loadBalance()
  213. uni.showToast({
  214. title: `签到成功,+${rule.pointValue}积分`,
  215. icon: 'success'
  216. })
  217. }
  218. } catch (e) {
  219. // 如果是已签到的错误,更新状态
  220. if (e.message && e.message.includes('已签到') || e.msg && e.msg.includes('已签到')) {
  221. this.isSignedToday = true
  222. uni.showToast({ title: '今日已签到', icon: 'none' })
  223. } else {
  224. uni.showToast({
  225. title: e.message || e.msg || '签到失败',
  226. icon: 'none'
  227. })
  228. }
  229. }
  230. }
  231. }
  232. }
  233. </script>
  234. <style lang="scss" scoped>
  235. .earn-points {
  236. min-height: 100vh;
  237. background: #F5F5F5;
  238. }
  239. .header {
  240. display: flex;
  241. align-items: center;
  242. justify-content: space-between;
  243. padding: 25rpx 30rpx;
  244. padding-top: calc(25rpx + env(safe-area-inset-top));
  245. background: #FFFFFF;
  246. .back-icon {
  247. width: 44rpx;
  248. height: 44rpx;
  249. display: flex;
  250. align-items: center;
  251. justify-content: center;
  252. font-size: 32rpx;
  253. color: #333;
  254. &::before { content: '‹'; }
  255. }
  256. .header-title {
  257. font-size: 36rpx;
  258. font-weight: bold;
  259. color: #333;
  260. }
  261. .header-right {
  262. width: 44rpx;
  263. }
  264. }
  265. .current-points {
  266. background: linear-gradient(135deg, #9C27B0 0%, #E91E63 100%);
  267. margin: 30rpx;
  268. padding: 40rpx;
  269. border-radius: 20rpx;
  270. display: flex;
  271. align-items: center;
  272. justify-content: space-between;
  273. .label {
  274. font-size: 30rpx;
  275. color: rgba(255, 255, 255, 0.8);
  276. }
  277. .value {
  278. font-size: 56rpx;
  279. font-weight: bold;
  280. color: #FFFFFF;
  281. }
  282. }
  283. .rules-section {
  284. background: #FFFFFF;
  285. margin: 0 30rpx 30rpx;
  286. border-radius: 20rpx;
  287. padding: 30rpx;
  288. .section-title {
  289. font-size: 30rpx;
  290. font-weight: bold;
  291. color: #333;
  292. margin-bottom: 30rpx;
  293. }
  294. }
  295. .rule-list {
  296. .rule-item {
  297. display: flex;
  298. align-items: center;
  299. padding: 25rpx 0;
  300. border-bottom: 1rpx solid #F0F0F0;
  301. &:last-child {
  302. border-bottom: none;
  303. }
  304. .rule-icon {
  305. font-size: 48rpx;
  306. margin-right: 20rpx;
  307. }
  308. .rule-info {
  309. flex: 1;
  310. .rule-name {
  311. font-size: 28rpx;
  312. font-weight: bold;
  313. color: #333;
  314. margin-bottom: 8rpx;
  315. }
  316. .rule-desc {
  317. font-size: 24rpx;
  318. color: #999;
  319. }
  320. }
  321. .rule-points {
  322. font-size: 32rpx;
  323. font-weight: bold;
  324. color: #FF9800;
  325. margin-right: 20rpx;
  326. }
  327. .rule-action {
  328. padding: 12rpx 24rpx;
  329. background: linear-gradient(135deg, #9C27B0 0%, #E91E63 100%);
  330. color: #FFFFFF;
  331. font-size: 24rpx;
  332. border-radius: 30rpx;
  333. &.disabled {
  334. background: #CCCCCC;
  335. color: #FFFFFF;
  336. }
  337. }
  338. }
  339. }
  340. .tips-section {
  341. background: #FFFFFF;
  342. margin: 0 30rpx 30rpx;
  343. border-radius: 20rpx;
  344. padding: 30rpx;
  345. .section-title {
  346. font-size: 30rpx;
  347. font-weight: bold;
  348. color: #333;
  349. margin-bottom: 20rpx;
  350. }
  351. .tips-content {
  352. .tip-item {
  353. font-size: 26rpx;
  354. color: #666;
  355. line-height: 2;
  356. }
  357. }
  358. }
  359. </style>