【PT.SCC实名制管理系统】24.10.01 -30天,考勤打卡小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

152 lines
3.3 KiB

7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
  1. <!-- 人脸识别 -->
  2. <template>
  3. <view class="human-face">
  4. <!-- 自定义导航栏 -->
  5. <uni-nav-bar dark :fixed="true" shadow background-color="var(--main-color)" status-bar left-icon="left"
  6. title="人脸识别" @clickLeft="$utils.navigateBack" />
  7. <!-- 人脸识别说明标题 -->
  8. <view class="human-face-title">为保证本人操作请进行人脸验证</view>
  9. <!-- 人脸识别图片 -->
  10. <view class="human-face-img">
  11. <image src="https://tennis-oss.xzaiyp.top/2024-10-22/508376c5-64b2-472f-8e25-a2469b632a39.png" mode="widthFix"></image>
  12. </view>
  13. <!-- 人脸识别说明 -->
  14. <view class="human-face-desc">
  15. 人脸认证仅能由<text class="name">*</text>本人完成验证时请将镜头对准您的脸部
  16. </view>
  17. <!-- 说明 -->
  18. <view class="desc">
  19. <view class="desc-item">
  20. <image src="https://tennis-oss.xzaiyp.top/2024-10-22/a0bf2da9-c25a-4d5c-8c77-7318bd86227d.png" mode="widthFix"></image>
  21. <view class="text">避免遮挡</view>
  22. </view>
  23. <view class="desc-item">
  24. <image src="https://tennis-oss.xzaiyp.top/2024-10-22/feb72bfb-8271-4e48-8081-d72811543918.png" mode="widthFix"></image>
  25. <view class="text">光线充足</view>
  26. </view>
  27. <view class="desc-item">
  28. <image src="https://tennis-oss.xzaiyp.top/2024-10-22/5fd8a6a7-a13e-44d6-acf1-a7ada94c699d.png" mode="widthFix"></image>
  29. <view class="text">正对充足</view>
  30. </view>
  31. </view>
  32. <!-- 立即核验 -->
  33. <div @click="photo" class="btn">
  34. 立即核验
  35. </div>
  36. </view>
  37. </template>
  38. <script>
  39. export default {
  40. name: "HumanFace",
  41. data() {
  42. return {
  43. }
  44. },
  45. methods: {
  46. //返回首页
  47. toHome() {
  48. uni.navigateTo({
  49. url: "/pages/index/index"
  50. })
  51. },
  52. // 人脸认证通过后拍照
  53. photo() {
  54. uni.chooseImage({
  55. count: 1, //默认9
  56. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  57. sourceType: ['camera '], //从相册选择
  58. success: function(res) {
  59. console.log(JSON.stringify(res.tempFilePaths));
  60. //后续在这里上传文件
  61. uni.navigateTo({
  62. url: "/pages/subPack/punchCard/punchCard"
  63. })
  64. }
  65. });
  66. }
  67. }
  68. }
  69. </script>
  70. <style lang="scss" scoped>
  71. .human-face {
  72. min-height: 100vh;
  73. background: white;
  74. // 人脸识别说明标题
  75. .human-face-title {
  76. font-size: 35rpx;
  77. font-weight: bold;
  78. margin: 60rpx 0rpx;
  79. text-align: center;
  80. }
  81. // 人脸识别图片
  82. .human-face-img {
  83. display: flex;
  84. justify-content: center;
  85. image {
  86. width: 70%;
  87. }
  88. }
  89. // 人脸识别说明
  90. .human-face-desc {
  91. color: #707070;
  92. width: 55%;
  93. font-size: 30rpx;
  94. margin: 30rpx auto;
  95. text-align: center;
  96. .name {
  97. color: $main-color;
  98. }
  99. }
  100. // 说明
  101. .desc {
  102. width: 80%;
  103. display: flex;
  104. flex-wrap: wrap;
  105. margin: 100rpx auto;
  106. .desc-item {
  107. width: 33.33%;
  108. display: flex;
  109. flex-direction: column;
  110. align-items: center;
  111. justify-content: center;
  112. image {
  113. width: 50%;
  114. }
  115. .text {
  116. font-size: 30rpx;
  117. color: #707070;
  118. margin-top: 10rpx;
  119. }
  120. }
  121. }
  122. // 立即核验
  123. .btn {
  124. display: flex;
  125. align-items: center;
  126. justify-content: center;
  127. width: 83%;
  128. background: $main-color;
  129. color: white;
  130. height: 100rpx;
  131. border-radius: 50rpx;
  132. margin: 0rpx auto;
  133. }
  134. }
  135. </style>