earn-points.vue 10 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. console.error('获取红娘信息失败:', e)
  92. }
  93. }
  94. await Promise.all([
  95. this.loadBalance(),
  96. this.loadRules(),
  97. this.checkSignInStatus()
  98. ])
  99. },
  100. // 检查今日签到状态
  101. async checkSignInStatus() {
  102. if (!this.makerId) return
  103. try {
  104. const res = await api.matchmaker.checkinStatus(this.makerId)
  105. // 解析返回数据
  106. let data = res
  107. if (res && res.data !== undefined) {
  108. data = res.data
  109. }
  110. this.isSignedToday = data === true || data?.isCheckedIn === true || data?.checked === true
  111. } catch (e) {
  112. console.error('检查签到状态失败:', e)
  113. }
  114. },
  115. async loadBalance() {
  116. if (!this.makerId) return
  117. try {
  118. const res = await api.pointsMall.getBalance(this.makerId)
  119. this.balance = res.balance || 0
  120. } catch (e) {
  121. console.error('获取积分余额失败:', e)
  122. }
  123. },
  124. async loadRules() {
  125. try {
  126. const res = await api.pointsMall.getRules()
  127. this.rules = res || []
  128. } catch (e) {
  129. console.error('获取积分规则失败:', e)
  130. }
  131. },
  132. handleBack() {
  133. uni.navigateBack()
  134. },
  135. getIcon(ruleType) {
  136. const icons = {
  137. 1: '📅', // 签到
  138. 2: '📤', // 上传线索
  139. 3: '💕', // 撮合成功
  140. 4: '📚', // 完成培训
  141. 5: '🎁' // 活动奖励
  142. }
  143. return icons[ruleType] || '⭐'
  144. },
  145. getDesc(ruleType) {
  146. const descs = {
  147. 1: '每日签到即可获得积分',
  148. 2: '上传优质客户线索',
  149. 3: '成功撮合一对情侣',
  150. 4: '完成红娘培训课程',
  151. 5: '参与平台活动获得'
  152. }
  153. return descs[ruleType] || '完成任务获得积分'
  154. },
  155. getActionText(ruleType) {
  156. const texts = {
  157. 1: '去签到',
  158. 2: '去上传',
  159. 3: '去撮合',
  160. 4: '去学习',
  161. 5: '查看'
  162. }
  163. return texts[ruleType] || '去完成'
  164. },
  165. async handleAction(rule) {
  166. if (rule.ruleType === 1) {
  167. // 签到 - 先检查是否已签到
  168. if (this.isSignedToday) {
  169. uni.showToast({ title: '今日已签到', icon: 'none' })
  170. return
  171. }
  172. await this.doSignIn(rule)
  173. } else if (rule.ruleType === 2) {
  174. // 上传资源 - 跳转到我的资源的信息录入页面
  175. uni.navigateTo({
  176. url: '/pages/matchmaker-workbench/resource-input'
  177. })
  178. } else if (rule.ruleType === 3) {
  179. // 撮合成功 - 跳转到撮合成功审核页面
  180. uni.navigateTo({
  181. url: '/pages/matchmaker-workbench/success-case-upload'
  182. })
  183. } else if (rule.ruleType === 4) {
  184. // 培训课程
  185. uni.navigateTo({
  186. url: '/pages/courses/list'
  187. })
  188. } else {
  189. uni.showToast({
  190. title: '功能开发中',
  191. icon: 'none'
  192. })
  193. }
  194. },
  195. async doSignIn(rule) {
  196. if (!this.userId) {
  197. uni.showToast({ title: '请先登录', icon: 'none' })
  198. return
  199. }
  200. try {
  201. // 使用userId进行签到(后端会根据userId查询matchmaker并添加积分)
  202. const res = await api.matchmaker.doCheckin(this.userId)
  203. // 检查签到结果
  204. let success = false
  205. if (res === true || res?.data === true) {
  206. success = true
  207. } else if (res?.msg === '今日已签到') {
  208. this.isSignedToday = true
  209. uni.showToast({ title: '今日已签到', icon: 'none' })
  210. return
  211. }
  212. if (success) {
  213. // 签到成功后更新状态
  214. this.isSignedToday = true
  215. // 刷新积分余额
  216. await this.loadBalance()
  217. uni.showToast({
  218. title: `签到成功,+${rule.pointValue}积分`,
  219. icon: 'success'
  220. })
  221. }
  222. } catch (e) {
  223. console.error('签到失败:', e)
  224. // 如果是已签到的错误,更新状态
  225. if (e.message && e.message.includes('已签到') || e.msg && e.msg.includes('已签到')) {
  226. this.isSignedToday = true
  227. uni.showToast({ title: '今日已签到', icon: 'none' })
  228. } else {
  229. uni.showToast({
  230. title: e.message || e.msg || '签到失败',
  231. icon: 'none'
  232. })
  233. }
  234. }
  235. }
  236. }
  237. }
  238. </script>
  239. <style lang="scss" scoped>
  240. .earn-points {
  241. min-height: 100vh;
  242. background: #F5F5F5;
  243. }
  244. .header {
  245. display: flex;
  246. align-items: center;
  247. justify-content: space-between;
  248. padding: 25rpx 30rpx;
  249. padding-top: calc(25rpx + env(safe-area-inset-top));
  250. background: #FFFFFF;
  251. .back-icon {
  252. width: 44rpx;
  253. height: 44rpx;
  254. display: flex;
  255. align-items: center;
  256. justify-content: center;
  257. font-size: 32rpx;
  258. color: #333;
  259. &::before { content: '‹'; }
  260. }
  261. .header-title {
  262. font-size: 36rpx;
  263. font-weight: bold;
  264. color: #333;
  265. }
  266. .header-right {
  267. width: 44rpx;
  268. }
  269. }
  270. .current-points {
  271. background: linear-gradient(135deg, #9C27B0 0%, #E91E63 100%);
  272. margin: 30rpx;
  273. padding: 40rpx;
  274. border-radius: 20rpx;
  275. display: flex;
  276. align-items: center;
  277. justify-content: space-between;
  278. .label {
  279. font-size: 30rpx;
  280. color: rgba(255, 255, 255, 0.8);
  281. }
  282. .value {
  283. font-size: 56rpx;
  284. font-weight: bold;
  285. color: #FFFFFF;
  286. }
  287. }
  288. .rules-section {
  289. background: #FFFFFF;
  290. margin: 0 30rpx 30rpx;
  291. border-radius: 20rpx;
  292. padding: 30rpx;
  293. .section-title {
  294. font-size: 30rpx;
  295. font-weight: bold;
  296. color: #333;
  297. margin-bottom: 30rpx;
  298. }
  299. }
  300. .rule-list {
  301. .rule-item {
  302. display: flex;
  303. align-items: center;
  304. padding: 25rpx 0;
  305. border-bottom: 1rpx solid #F0F0F0;
  306. &:last-child {
  307. border-bottom: none;
  308. }
  309. .rule-icon {
  310. font-size: 48rpx;
  311. margin-right: 20rpx;
  312. }
  313. .rule-info {
  314. flex: 1;
  315. .rule-name {
  316. font-size: 28rpx;
  317. font-weight: bold;
  318. color: #333;
  319. margin-bottom: 8rpx;
  320. }
  321. .rule-desc {
  322. font-size: 24rpx;
  323. color: #999;
  324. }
  325. }
  326. .rule-points {
  327. font-size: 32rpx;
  328. font-weight: bold;
  329. color: #FF9800;
  330. margin-right: 20rpx;
  331. }
  332. .rule-action {
  333. padding: 12rpx 24rpx;
  334. background: linear-gradient(135deg, #9C27B0 0%, #E91E63 100%);
  335. color: #FFFFFF;
  336. font-size: 24rpx;
  337. border-radius: 30rpx;
  338. &.disabled {
  339. background: #CCCCCC;
  340. color: #FFFFFF;
  341. }
  342. }
  343. }
  344. }
  345. .tips-section {
  346. background: #FFFFFF;
  347. margin: 0 30rpx 30rpx;
  348. border-radius: 20rpx;
  349. padding: 30rpx;
  350. .section-title {
  351. font-size: 30rpx;
  352. font-weight: bold;
  353. color: #333;
  354. margin-bottom: 20rpx;
  355. }
  356. .tips-content {
  357. .tip-item {
  358. font-size: 26rpx;
  359. color: #666;
  360. line-height: 2;
  361. }
  362. }
  363. }
  364. </style>