archives.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. <template>
  2. <view class="common_page adffc" :style="{'height':h+'px', 'padding-top':mt+'px'}">
  3. <cus-header title="我的档案" bgColor="#FFFFFF"></cus-header>
  4. <view class="member" v-if="!isFamilyMember">
  5. <scroll-view class="scroll-view_H" scroll-x="true" scroll-with-animation="true" :scroll-left="scrollLeft">
  6. <view class="scroll-view-item_H" :id="'svih_'+index" v-for="(item,index) in memberList" :key="index" @click="changeMember(item,index)">
  7. <view class="cl_item" :class="{'active':midx===index}">
  8. <text>{{item.name}}</text>
  9. </view>
  10. </view>
  11. </scroll-view>
  12. </view>
  13. <view class="list" v-if="list.length">
  14. <up-list @scrolltolower="scrolltolower" style="height: 100%;">
  15. <up-list-item v-for="(item, index) in list" :key="index">
  16. <ArchivesBox :item="item" @handleReviewFile="handleReview"></ArchivesBox>
  17. </up-list-item>
  18. </up-list>
  19. </view>
  20. <view class="dataEmpty" v-else>
  21. <page-empty text="暂无档案记录"></page-empty>
  22. </view>
  23. </view>
  24. </template>
  25. <script setup name="">
  26. import CusHeader from '@/components/CusHeader/index.vue'
  27. import ArchivesBox from '@/components/pages/archivesBox/index.vue'
  28. import PageEmpty from '@/components/pageEmpty/index.vue'
  29. import { ref, getCurrentInstance, onMounted } from 'vue'
  30. const { proxy } = getCurrentInstance()
  31. const midx = ref(0)
  32. const scrollLeft = ref(0)
  33. const memberList = ref([])
  34. const isOver = ref(false)
  35. const isFamilyMember = ref(false)
  36. const queryParams = ref({
  37. page:1,
  38. limit:10,
  39. memberId:'',
  40. userId:''
  41. })
  42. const list = ref([])
  43. const initList = () => {
  44. queryParams.value.page = 1;
  45. isOver.value = false;
  46. list.value = [];
  47. }
  48. const changeMember = (item,index) => {
  49. midx.value = index;
  50. queryParams.value.memberId = item.id;
  51. initList()
  52. getList()
  53. }
  54. const getMemberList = () => {
  55. let query = JSON.parse(JSON.stringify(queryParams.value))
  56. query.limit = -1;
  57. proxy.$api.get('/core/family/member/page',query).then(({data:res})=>{
  58. if(res.code!==0) return proxy.$showToast(res.msg)
  59. memberList.value = [{id:'',name:'全部'}].concat(res.data.list||[]);
  60. })
  61. }
  62. const getList = () => {
  63. proxy.$api.get('/core/activity/signup/memberProfileList',queryParams.value).then(({data:res})=>{
  64. if(res.code!==0) return proxy.$showToast(res.msg)
  65. list.value = [...list.value,...res.data.list];
  66. list.value.forEach(l=>{
  67. l.age = getAge(l.idCard)
  68. l.activityStartTime = l.activityStartTime?new Date(l.activityStartTime).Format('yyyy.MM.dd'):''
  69. l.activityEndTime = l.activityEndTime?new Date(l.activityEndTime).Format('yyyy.MM.dd'):''
  70. })
  71. queryParams.value.page++;
  72. if(res.data.list.length===0) isOver.value = true;
  73. })
  74. }
  75. const isValid = (idCard) => {
  76. // 正则表达式校验18位身份证号码(最后一位可以是数字或X/x)
  77. const regex = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
  78. return typeof idCard === 'string' && regex.test(idCard);
  79. }
  80. const getAge = (idCard) => {
  81. if (!isValid(idCard)) return 0
  82. // 从身份证的第7位开始,截取8位作为出生日期字符串 (YYYYMMDD)
  83. const birthDateStr = idCard.substring(6, 14);
  84. const birthYear = parseInt(birthDateStr.substring(0, 4), 10);
  85. const birthMonth = parseInt(birthDateStr.substring(4, 6), 10);
  86. const birthDay = parseInt(birthDateStr.substring(6, 8), 10);
  87. const today = new Date();
  88. const currentYear = today.getFullYear();
  89. const currentMonth = today.getMonth() + 1; // getMonth() 返回 0-11
  90. const currentDay = today.getDate();
  91. // 计算周岁
  92. let age = currentYear - birthYear;
  93. // 如果当前月份小于出生月份,或者月份相同但日期小于出生日期,说明今年的生日还没过
  94. if (currentMonth < birthMonth || (currentMonth === birthMonth && currentDay < birthDay)) {
  95. age--;
  96. }
  97. return age < 0 ? 0 : age;
  98. }
  99. const scrolltolower = () => {
  100. if(isOver.value) return
  101. getList()
  102. }
  103. const handleReview = (data) => {
  104. uni.navigateTo({
  105. url:'/pagesMy/archivesDetail?activityId='+data?.activityId+'&memberId='+data?.memberId
  106. })
  107. }
  108. onMounted(()=>{
  109. try{
  110. isFamilyMember.value = uni.getStorageSync('isFamilyMember')?true:false;
  111. queryParams.value.userId = uni.getStorageSync('userInfo')&&JSON.parse(uni.getStorageSync('userInfo')).id;
  112. if(uni.getStorageSync('familyMemberInfo')) queryParams.value.memberId = JSON.parse(uni.getStorageSync('familyMemberInfo')).id;
  113. getMemberList()
  114. getList()
  115. }catch(e){
  116. //TODO handle the exception
  117. }
  118. })
  119. </script>
  120. <style scoped lang="scss">
  121. .scroll-view_H {
  122. white-space: nowrap;
  123. width: 100%;
  124. }
  125. .scroll-view-item_H {
  126. display: inline-block;
  127. height: 100%;
  128. margin-left: 30rpx;
  129. &:first-child{
  130. margin-left: 0;
  131. }
  132. }
  133. .common_page{
  134. padding: 0 0 40rpx;
  135. box-sizing: border-box;
  136. .member{
  137. width: 100%;
  138. height: 56rpx;
  139. padding: 0 30rpx;
  140. margin-top: 20rpx;
  141. box-sizing: border-box;
  142. .cl_item{
  143. padding: 0 26rpx;
  144. height: 56rpx;
  145. background: #FFFFFF;
  146. border-radius: 10rpx;
  147. font-family: PingFangSC, PingFang SC;
  148. font-weight: 400;
  149. font-size: 26rpx;
  150. color: #252525;
  151. line-height: 56rpx;
  152. text-align: center;
  153. &.active{
  154. background: #B7F358;
  155. }
  156. }
  157. }
  158. .list{
  159. padding: 0 24rpx;
  160. flex: 1;
  161. overflow-y: auto;
  162. margin-top: 4rpx;
  163. }
  164. }
  165. </style>