添加获奖

src/views/article-center/theory.tsx

@@ -32,7 +32,7 @@ export default defineComponent({
         page: 1,
         rows: 20
       },
-      theory:null as null
+      theory: null as null
     }
   },
   mounted() {
@@ -43,7 +43,6 @@ export default defineComponent({
       let activeNames = theory.activeNames.split(',').map(item => item * 1)
       this.activeNames = activeNames
       this.params.search = theory.search || ''
-
     }
     this.getList()
     useEventTracking('热门资讯')
@@ -112,7 +111,7 @@ export default defineComponent({
         //     id: item.id
         //   }
         // })
-        let client = state.platformType==='STUDENT'?'student':'teacher'
+        let client = state.platformType === 'STUDENT' ? 'student' : 'teacher'
         postMessage({
           api: 'openWebView',
           content: {
@@ -126,7 +125,7 @@ export default defineComponent({
   },
   render() {
     return (
-      <div class={[styles['theory'],'theory']}>
+      <div class={[styles['theory'], 'theory']}>
         <Sticky offsetTop={0} position="top" class={'mb12'}>
           <ColSearch onSearch={this.onSearch} modelValue={this.params.search} />
         </Sticky>

src/views/award-activity/index.module.less

@@ -32,3 +32,63 @@
     padding: 0 12px;
   }
 }
+
+.popup {
+  width: 82%;
+  border-radius: 12px;
+  overflow: hidden;
+  text-align: center;
+}
+.popupContainer {
+  padding: 34px 0 30px;
+  .cert {
+    width: 66px;
+    height: 62px;
+    padding-bottom: 30px;
+  }
+  .award {
+    width: 186px;
+    height: 106px;
+    padding-bottom: 14px;
+  }
+
+  h3 {
+    padding: 0 0 10px;
+    font-size: 18px;
+    font-weight: 600;
+    color: #333333;
+    line-height: 25px;
+  }
+
+  p {
+    font-size: 14px;
+    color: #666666;
+    padding-bottom: 40px;
+  }
+  .btnGroup {
+    display: flex;
+    justify-content: center;
+
+    .lastBtn {
+      border: 1px solid #999999;
+      background-color: #fff;
+      color: #666666;
+    }
+    :global {
+      .van-button {
+        border-radius: 10px;
+        width: 60%;
+      }
+    }
+  }
+  .btnMore {
+    :global {
+      .van-button {
+        width: 38%;
+      }
+      .van-button + .van-button {
+        margin-left: 15px;
+      }
+    }
+  }
+}

src/views/award-activity/index.tsx

@@ -1,41 +1,223 @@
-import { CellGroup, Cell, Image, Button } from 'vant'
+import { CellGroup, Cell, Image, Button, Popup, List } from 'vant'
 import { defineComponent } from 'vue'
 import styles from './index.module.less'
+import award from './images/award.png'
+import cert from './images/cert.png'
+import request from '@/helpers/request'
+import ColResult from '@/components/col-result'
+import { state } from '@/state'
+import dayjs from 'dayjs'
+import ColPopup from '@/components/col-popup'
+import UserAuth from '../order-detail/userAuth'
 
 export default defineComponent({
   name: 'award-activity',
+  data() {
+    return {
+      status: false,
+      type: 'auth',
+      list: [],
+      dataShow: true, // 判断是否有数据
+      loading: false,
+      finished: false,
+      params: {
+        // receive: 2,
+        page: 1,
+        rows: 20
+      },
+      exists: false,
+      popupShow: false,
+      receiveRewardId: null as any
+    }
+  },
+  //   /student-server/activity/receiveRewardList 学生端查看未领奖列表接口
+  // /student-server/activity/receiveReward/{receiveRewardId}  学生端领奖接口
+  // /teacher-server/activity/receiveRewardList 老师端查看未领奖列表接口
+  // /teacher-server/activity/receiveReward/{receiveRewardId} 学生端领奖接口
+  async mounted() {
+    this.getUserRegisterProtocol()
+    this.getList()
+  },
+  methods: {
+    async getUserRegisterProtocol() {
+      // 获取是否签署过《用户注册协议》
+      try {
+        const res = await request.get(
+          state.platformApi + '/sysUserContractRecord/checkContractSign',
+          {
+            params: {
+              contractType: 'REGISTER'
+            }
+          }
+        )
+        this.exists = res.data
+      } catch {
+        //
+      }
+    },
+    async onGetAward() {
+      try {
+        const users = state.user.data
+        // 判断是否需要实名认证, 姓名，卡号，是否签协议
+        if (!users?.realName || !users?.idCardNo || !this.exists) {
+          this.status = true
+          this.type = 'auth'
+          return
+        }
+        await request.post(
+          `${state.platformApi}/activity/receiveReward/${this.receiveRewardId}`
+        )
+        this.status = true
+        this.type = 'success'
+        this.receiveRewardId = null
+      } catch {
+        //
+      }
+    },
+    async onAuthSuccess() {
+      await this.getUserRegisterProtocol()
+      this.onGetAward()
+    },
+    async getList() {
+      try {
+        const params = this.params
+        const res = await request.post(
+          `${state.platformApi}/activity/receiveRewardList`,
+          {
+            data: {
+              ...params
+            }
+          }
+        )
+        this.loading = false
+        const result = res.data || {}
+        // 处理重复请求数据
+        if (this.list.length > 0 && result.pageNo === 1) {
+          return
+        }
+        this.list = this.list.concat(result.rows || [])
+        this.finished = result.pageNo >= result.totalPage
+        this.params.page = result.pageNo + 1
+        this.dataShow = this.list.length > 0
+      } catch {
+        this.dataShow = false
+        this.finished = true
+      }
+    }
+  },
   render() {
     return (
       <div class={styles.award}>
-        <CellGroup inset class={styles.cellGroup}>
-          <Cell
-            v-slots={{
-              icon: () => <Image class={styles.image} />,
-              title: () => <div class={styles.title}>小酷Ai会员</div>,
-              label: () => (
-                <div class={styles.label}>
-                  小酷Ai(季度)3个月会员；您的智能陪练，会员曲目免费学，练习评测智能选段评分，提升练习兴趣！
+        {this.dataShow ? (
+          <List
+            class={styles.videoList}
+            v-model:loading={this.loading}
+            finished={this.finished}
+            finishedText=" "
+            immediateCheck={false}
+            onLoad={this.getList}
+          >
+            {this.list.map((item: any) => (
+              <CellGroup inset class={styles.cellGroup}>
+                <Cell
+                  v-slots={{
+                    icon: () => (
+                      <Image src={item.imgUrl} class={styles.image} />
+                    ),
+                    title: () => (
+                      <div class={styles.title}>{item.rewardName}</div>
+                    ),
+                    label: () => (
+                      <div class={styles.label}>{item.rewardDescribe}</div>
+                    )
+                  }}
+                />
+                <Cell
+                  center
+                  title={`获奖时间：${dayjs(item.winningTime).format(
+                    'YYYY-MM-DD'
+                  )}`}
+                  titleClass={styles.cellTitle}
+                  v-slots={{
+                    value: () => (
+                      <Button
+                        color="linear-gradient(180deg, #FF8636 0%, #FF4E19 100%)"
+                        size="small"
+                        class={styles.button}
+                        onClick={() => {
+                          this.receiveRewardId = item.receiveRewardId
+                          this.onGetAward()
+                        }}
+                      >
+                        立即领取
+                      </Button>
+                    )
+                  }}
+                />
+              </CellGroup>
+            ))}
+          </List>
+        ) : (
+          <ColResult btnStatus={false} classImgSize="SMALL" tips="暂无数据" />
+        )}
+
+        <Popup v-model:show={this.status} class={styles.popup}>
+          <div class={styles.popupContainer}>
+            {this.type === 'auth' && (
+              <>
+                <Image src={cert} class={styles.cert} />
+                <h3>您还没有实名认证</h3>
+                <p>完成实名认证后即可领取奖品</p>
+                <div class={[styles.btnGroup, styles.btnMore]}>
+                  <Button
+                    type="primary"
+                    block
+                    class={styles.lastBtn}
+                    onClick={() => {
+                      this.status = false
+                    }}
+                  >
+                    以后在说
+                  </Button>
+                  <Button
+                    type="primary"
+                    block
+                    color="linear-gradient(180deg, #59E5D5 0%, #2DC7AA 100%)"
+                  >
+                    立即认证
+                  </Button>
+                </div>
+              </>
+            )}
+
+            {this.type === 'success' && (
+              <>
+                <Image src={award} class={styles.award} />
+                <h3>奖品领取成功！</h3>
+                <p>请耐心等待，活动奖品将会到达～</p>
+                <div class={[styles.btnGroup]}>
+                  <Button
+                    type="primary"
+                    block
+                    color="linear-gradient(180deg, #59E5D5 0%, #2DC7AA 100%)"
+                    onClick={() => {
+                      this.status = false
+                      this.list = []
+                      this.params.page = 1
+                      this.getList()
+                    }}
+                  >
+                    我知道了
+                  </Button>
                 </div>
-              )
-            }}
-          />
-          <Cell
-            center
-            title={'获奖时间：2022-12-12'}
-            titleClass={styles.cellTitle}
-            v-slots={{
-              value: () => (
-                <Button
-                  color="linear-gradient(180deg, #FF8636 0%, #FF4E19 100%)"
-                  size="small"
-                  class={styles.button}
-                >
-                  立即领取
-                </Button>
-              )
-            }}
-          />
-        </CellGroup>
+              </>
+            )}
+          </div>
+        </Popup>
+
+        <ColPopup v-model={this.popupShow}>
+          <UserAuth exists={this.exists} onSuccess={this.onAuthSuccess} />
+        </ColPopup>
       </div>
     )
   }