【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.

274 lines
5.8 KiB

7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
  1. <template>
  2. <view class="home">
  3. <!-- 顶部背景 -->
  4. <view class="home-top">
  5. <image class="home-top-bg" src="https://tennis-oss.xzaiyp.top/2024-10-22/81f3569e-c60c-4945-bfc9-b0e976f26d8e.png" mode="widthFix"></image>
  6. </view>
  7. <!-- 卡片(地图) -->
  8. <view class="card">
  9. <view @click="openBroadside" class="team">
  10. <view class="change-icon">
  11. <image src="https://tennis-oss.xzaiyp.top/2024-10-22/4e624b94-e080-4ec4-86de-196ad83538a5.png" mode="widthFix"></image>
  12. </view>
  13. <view class="project">
  14. 高新区项目一队项目1
  15. </view>
  16. </view>
  17. <view class="map">
  18. <map style="width: 100%; height: 100%" :latitude="latitude" :longitude="longitude" :markers="covers" :scale="14">
  19. </map>
  20. </view>
  21. </view>
  22. <!-- 打卡按钮 -->
  23. <view class="punch-card">
  24. <view @click="callCard" class="circle">
  25. <view class="title">拍照打卡</view>
  26. <view class="time">2021-10-10 10:00:00</view>
  27. </view>
  28. </view>
  29. <!-- 签到记录 -->
  30. <div @click="toRecord" class="sign">
  31. <div class="sign-title">
  32. <image class="sign-title-img" src="https://tennis-oss.xzaiyp.top/2024-10-22/3d70c0d0-f298-4187-8b01-d809757f4049.png" mode="widthFix"></image>
  33. <div class="title">打卡记录</div>
  34. </div>
  35. <div class="project">
  36. <text class="project-name">高新区项目一队项目1</text>
  37. <uv-icon name="arrow-right" color="#000"></uv-icon>
  38. </div>
  39. </div>
  40. <!-- tab栏 -->
  41. <tabbar v-if="!broadsideShow" :select="0"></tabbar>
  42. <!-- 侧边栏 -->
  43. <broadside ref="broadside"></broadside>
  44. </view>
  45. </template>
  46. <script>
  47. import tabbar from '../../components/base/tabbar.vue'
  48. import broadside from '../../components/broadside/broadside.vue'
  49. export default {
  50. name: "Home",
  51. components: {
  52. tabbar,
  53. broadside
  54. },
  55. data() {
  56. return {
  57. broadsideShow: false, //是否显示遮罩层
  58. latitude: 39.909,
  59. longitude: 116.39742,
  60. covers: []
  61. }
  62. },
  63. onShow() {
  64. this.getLocation()
  65. },
  66. methods: {
  67. // 跳转签到记录
  68. toRecord() {
  69. uni.navigateTo({
  70. url: "/pages/subPack/record/record"
  71. })
  72. },
  73. //打开侧边栏
  74. openBroadside() {
  75. this.$refs.broadside.open()
  76. this.broadsideShow = true;
  77. },
  78. //获取用户位置
  79. getLocation() {
  80. let self = this;
  81. uni.getLocation({
  82. type: 'gcj02',
  83. success: function(res) {
  84. self.longitude = res.longitude;
  85. self.latitude = res.latitude;
  86. self.covers.push({
  87. id: 1,
  88. latitude: res.latitude,
  89. longitude: res.longitude,
  90. iconPath: 'https://tennis-oss.xzaiyp.top/2024-10-22/103fa1db-8524-45e6-8d00-c36a69977a5b.png',
  91. width: 30,
  92. height: 30
  93. })
  94. },
  95. fail() {
  96. self.checkAndRequestLocationPermission()
  97. }
  98. });
  99. },
  100. checkAndRequestLocationPermission() {
  101. let self = this;
  102. uni.getSetting({
  103. success: function(res) {
  104. if (!res.authSetting['scope.userLocation']) {
  105. // 用户未授权定位权限
  106. uni.showModal({
  107. title: '提示',
  108. content: '当前定位未开启,请点击确定手动开启定位',
  109. success: function(modalRes) {
  110. if (modalRes.confirm) {
  111. // 用户选择确认开启定位
  112. uni.openSetting({
  113. success: function(settingRes) {
  114. if (settingRes.authSetting[
  115. 'scope.userLocation']) {
  116. // 重新获取位置信息
  117. self.getLocation();
  118. } else {
  119. // 用户未开启定位权限
  120. console.log('用户未开启定位权限');
  121. }
  122. },
  123. fail: function(err) {
  124. console.log('打开设置页面失败:', err);
  125. }
  126. });
  127. } else {
  128. // 用户选择取消
  129. self.getLocation()
  130. }
  131. }
  132. });
  133. } else {
  134. // 用户已授权定位权限但获取位置失败(可能是设备未开启定位服务)
  135. console.log('用户已授权定位权限,但获取位置失败');
  136. // 可以提示用户检查设备定位服务是否开启
  137. }
  138. }
  139. });
  140. },
  141. //打卡(跳转人脸识别)
  142. callCard(){
  143. uni.navigateTo({
  144. url: "/pages/subPack/human/human"
  145. })
  146. }
  147. }
  148. }
  149. </script>
  150. <style lang="scss" scoped>
  151. .home {
  152. background: $bg-color;
  153. min-height: 100vh;
  154. // 顶部背景
  155. .home-top {
  156. height: 490rpx;
  157. overflow: hidden;
  158. .home-top-bg {
  159. width: 750rpx;
  160. }
  161. }
  162. // 卡片(地图)
  163. .card {
  164. width: 95%;
  165. margin: -340rpx auto 0rpx auto;
  166. position: relative;
  167. .team {
  168. display: flex;
  169. margin: 15rpx 0rpx;
  170. color: white;
  171. font-size: 34rpx;
  172. .change-icon {
  173. display: flex;
  174. align-items: center;
  175. width: 40rpx;
  176. margin-right: 10rpx;
  177. image {
  178. width: 100%;
  179. }
  180. }
  181. }
  182. .map {
  183. height: 350rpx;
  184. background: $main-color;
  185. border-radius: 20rpx;
  186. overflow: hidden;
  187. }
  188. }
  189. //打卡按钮
  190. .punch-card {
  191. display: flex;
  192. justify-content: center;
  193. margin: 60rpx 0rpx;
  194. .circle {
  195. display: flex;
  196. flex-direction: column;
  197. justify-content: center;
  198. align-items: center;
  199. width: 370rpx;
  200. height: 370rpx;
  201. border-radius: 50%;
  202. background: $main-color;
  203. color: white;
  204. .title {
  205. font-size: 36rpx;
  206. }
  207. .time {
  208. font-size: 30rpx;
  209. margin-top: 20rpx;
  210. }
  211. }
  212. }
  213. // 签到记录
  214. .sign {
  215. display: flex;
  216. flex-wrap: wrap;
  217. width: 90%;
  218. margin: 0rpx auto;
  219. background: white;
  220. border-radius: 15rpx;
  221. box-sizing: border-box;
  222. padding: 30rpx 30rpx 30rpx 20rpx;
  223. box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, .1);
  224. .sign-title {
  225. display: flex;
  226. width: 30%;
  227. .sign-title-img {
  228. width: 40rpx;
  229. margin-right: 15rpx;
  230. }
  231. .title {}
  232. }
  233. .project {
  234. display: flex;
  235. width: 70%;
  236. justify-content: space-between;
  237. .project-name {
  238. color: $main-color;
  239. }
  240. }
  241. }
  242. }
  243. </style>