mine.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625
  1. <!-- 我的 -->
  2. <template>
  3. <view id="mine">
  4. <view class="top-max-big-box" v-if="pageType">
  5. <!--老师-->
  6. <view class="top-max-box-two" v-if="userType==1&&certification.auditStatus">
  7. <view class="user-img-box" @click="selectImage">
  8. <img v-if="userData.avatar" :src="userData.avatarUrl">
  9. <img v-else src="@/images/icon_01.png">
  10. <view>{{userData.avatar?'编辑':'未上传'}}</view>
  11. </view>
  12. <view class="name-box">
  13. <view>{{userData.userName}}</view>
  14. <view>{{userData.professional}}丨{{userData.deptName}}</view>
  15. </view>
  16. </view>
  17. <!--学生-->
  18. <view class="user-top-max-box-one" v-if="userType==2">
  19. <view class="back-posi"></view>
  20. <view class="top-max-box-one">
  21. <view class="user-img-box" @click="selectImage">
  22. <img v-if="userData.avatar" :src="userData.avatar">
  23. <img v-else src="@/images/icon_01.png">
  24. <view>{{userData.avatar?'编辑':'未上传'}}</view>
  25. </view>
  26. <view class="name-box">
  27. <view class="name-box-min">
  28. <view>{{userData.userName}}</view>
  29. <view :class="userData.status == 2?'view-color-one':(userData.status == 3?'view-color-two':(userData.status == 1?'view-color-tree':''))">{{userData.status == 2?'负面清单':(userData.status == 3?'黑名单':(userData.status == 1?'正常':''))}}</view>
  30. </view>
  31. <view class="name-box-user">{{userData.professional}}丨{{userData.deptName}}</view>
  32. </view>
  33. </view>
  34. <view class="num-max-box">
  35. <view class="min-num-box" @click="goUserPage(1)">
  36. <view class="min-num-view color-one">{{creditScore}}</view>
  37. <view class="bottom-min-num-view">
  38. <img class="img-one" src="@/images/icon_wd_xyf.png">
  39. <view>信用分</view>
  40. </view>
  41. </view>
  42. <view class="null-p"></view>
  43. <view class="min-num-box" @click="goUserPage(2)">
  44. <view class="min-num-view color-two">{{bonusPoints}}</view>
  45. <view class="bottom-min-num-view">
  46. <img class="img-two" src="@/images/icon_wd_jlf.png">
  47. <view>奖励分</view>
  48. </view>
  49. </view>
  50. <view class="null-p"></view>
  51. <view class="min-num-box" @click="goUserPage(3)">
  52. <view class="min-num-view">扫一扫</view>
  53. <view class="bottom-min-num-view">
  54. <img class="img-two" src="@/images/icon_wd_dh.png">
  55. <view>兑换礼品</view>
  56. </view>
  57. </view>
  58. </view>
  59. </view>
  60. <view class="button-max-big-box">
  61. <view class="button-max-box" @click="goPage('alarm')" v-if="userType==1">
  62. <img class="left-img" src="@/images/icon_003.png">
  63. <view>安全警报</view>
  64. <view class="view-three-one" v-if="securityAlertNum>0">{{securityAlertNum}}</view>
  65. <img class="right-img" src="@/images/icon_04.png">
  66. </view>
  67. <view class="button-max-box" @click="goPage('laboratory')" v-if="userType==1">
  68. <img class="left-img" src="@/images/icon_002.png">
  69. <view>我的实验室</view>
  70. <view class="view-three-two" v-if="adminSubCount>0">{{adminSubCount}}</view>
  71. <img class="right-img" src="@/images/icon_04.png">
  72. </view>
  73. <view class="button-max-box" @click="goPage('record')" v-if="userType==1">
  74. <img class="left-img" src="@/images/icon_004.png">
  75. <view>预案执行记录</view>
  76. <view class="view-three-two" v-if="wranDoCount>0">{{wranDoCount}}</view>
  77. <img class="right-img" src="@/images/icon_04.png">
  78. </view>
  79. <view class="button-max-box" @click="goPage('faceImage')">
  80. <img class="left-img" src="@/images/icon_001.png">
  81. <view>人脸图像</view>
  82. <view class="view-three-type" :class="!ifFaceFeature?'colorA':'marginType'">{{!ifFaceFeature?'去认证':'已认证'}}</view>
  83. <img class="right-img" src="@/images/icon_04.png">
  84. </view>
  85. <view class="button-max-box" @click="goPage('signature')">
  86. <img class="left-img" src="@/images/icon_wd_dzqm.png">
  87. <view>电子签名</view>
  88. <view class="view-three-type" :class="!isUpload?'colorA':'marginType'">{{!isUpload?'未上传':'已上传'}}</view>
  89. <img class="right-img" src="@/images/icon_04.png">
  90. </view>
  91. <view class="button-max-box" @click="goPage('upStudentCard')" v-if="userType==2&&certification.auditStatus">
  92. <img class="left-img" src="@/images/icon_03.png">
  93. <view>学生卡绑定</view>
  94. <view class="view-three-type" :class="certification.auditStatus.code == 2 || certification.auditStatus.code == 3?'colorA':'marginType'">
  95. {{certification.auditStatus.code == 0?'待审核':(certification.auditStatus.code == 1?'已绑定':(certification.auditStatus.code == 2?'未通过':(certification.auditStatus.code == 3?'去绑定':'')))}}
  96. </view>
  97. <img class="right-img" v-if="certification.auditStatus.code == 2 || certification.auditStatus.code == 3" src="@/images/icon_04.png">
  98. </view>
  99. </view>
  100. </view>
  101. <view class="out-button" @click="clickOut">退出登录</view>
  102. <tab-bar></tab-bar>
  103. </view>
  104. </template>
  105. <script>
  106. import { config } from '@/api/request/config.js'
  107. import { logout,studentinfoFacemy,simpleInfo,getSafeWarnList,getMyPointsLogInfo,querySignature} from '@/api/index.js'
  108. import { tabBar } from '@/component/tabBar.vue'
  109. export default {
  110. components: {
  111. tabBar
  112. },
  113. data() {
  114. return {
  115. //页面状态
  116. pageType:false,
  117. //认证数据
  118. certification:{
  119. },
  120. userType:0,
  121. userData:{
  122. deptName: "",
  123. professional: "",
  124. userName: "",
  125. },
  126. securityAlertNum:0,
  127. adminSubCount:0,
  128. wranDoCount:0,
  129. //奖励分
  130. bonusPoints:0,
  131. //信用分
  132. creditScore:0,
  133. //用户签名
  134. signatureUrl:'',
  135. // 人脸
  136. ifFaceFeature:"",
  137. //签名
  138. isUpload:"",
  139. }
  140. },
  141. onLoad() {
  142. },
  143. onShow(){
  144. if(uni.getStorageSync('token')&&uni.getStorageSync('userId')&&uni.getStorageSync('userType')){
  145. this.userType = uni.getStorageSync('userType')
  146. this.studentinfoFacemy();
  147. this.simpleInfo();
  148. this.querySignature();
  149. }else{
  150. uni.removeStorageSync('token');
  151. uni.removeStorageSync('userId');
  152. uni.removeStorageSync('userType');
  153. uni.redirectTo({
  154. url: '/pages/login',
  155. });
  156. }
  157. },
  158. methods: {
  159. //学生端-信用分/奖励分/扫一扫按钮
  160. goUserPage(type){
  161. let self = this;
  162. if(type == 1){
  163. uni.navigateTo({
  164. url: '/pages_student/mine/creditPoints',
  165. });
  166. }else if(type == 2){
  167. uni.navigateTo({
  168. url: '/pages_student/mine/rewardPoints',
  169. });
  170. }else if(type == 3){
  171. uni.scanCode({
  172. onlyFromCamera: true,
  173. success: function (res) {
  174. uni.navigateTo({
  175. url: '/pages_student/mine/codeSuccess?q='+encodeURIComponent(JSON.stringify(res.result))
  176. });
  177. }
  178. });
  179. }
  180. },
  181. //获取个人信息
  182. async simpleInfo(){
  183. const {data} = await simpleInfo();
  184. if(data.code == 200){
  185. this.userData = data.data;
  186. this.userData.avatar=data.data.avatar;
  187. this.userData.avatarUrl=config.base_url+data.data.avatar;
  188. if(this.userType == 1){
  189. this.getSafeWarnList();
  190. }else if(this.userType == 2){
  191. this.getMyPointsLogInfo();
  192. }
  193. if(data.data.count){
  194. this.adminSubCount = data.data.count.adminSubCount;
  195. this.wranDoCount = data.data.count.wranDoCount;
  196. }
  197. this.pageType = true;
  198. }
  199. },
  200. //查询用户电子签名
  201. async querySignature(){
  202. let _this=this;
  203. const {data} = await querySignature();
  204. if(data.code == 200){
  205. _this.isUpload=data.data.isUpload;
  206. _this.signatureUrl=data.data.signature;
  207. console.log(_this.certification.isUpload)
  208. }
  209. },
  210. //获取个人奖励分/信用分
  211. async getMyPointsLogInfo(){
  212. const {data} = await getMyPointsLogInfo();
  213. if(data.code == 200){
  214. this.bonusPoints = data.data.bonusPoints;
  215. this.creditScore = data.data.creditScore;
  216. }
  217. },
  218. //获取报警信息列表
  219. async getSafeWarnList(){
  220. let obj = {
  221. pageNum:1,
  222. pageSize:1,
  223. count:0,
  224. groupStatus:1,
  225. };
  226. const {data} = await getSafeWarnList(obj);
  227. if(data.code == 200){
  228. if(data.rows[0]){
  229. this.securityAlertNum = data.rows[0].todayHappenCount;
  230. }else{
  231. this.securityAlertNum = 0;
  232. }
  233. }
  234. },
  235. //获取当前身份人脸验证状态与学生卡上传状态
  236. async studentinfoFacemy(){
  237. let obj = {
  238. studentsId:uni.getStorageSync('userId')
  239. }
  240. const {data} = await studentinfoFacemy(obj)
  241. if(data.code == 200){
  242. this.certification = data.data;
  243. this.ifFaceFeature = data.data.ifFaceFeature;
  244. }
  245. },
  246. //退出按钮
  247. clickOut(){
  248. let self = this;
  249. uni.showModal({
  250. // title: '确认要退出吗?',
  251. content: '确认要退出吗',
  252. cancelColor:"#999",
  253. confirmColor:"#0183FA",
  254. success: function (res) {
  255. if (res.confirm) {
  256. self.logout();
  257. console.log('用户点击确定');
  258. } else if (res.cancel) {
  259. console.log('用户点击取消');
  260. }
  261. }
  262. });
  263. },
  264. //退出登录
  265. async logout() {
  266. let self = this;
  267. const {data} = await logout();
  268. if(data.code == 200){
  269. uni.removeStorageSync('token');
  270. uni.removeStorageSync('userId');
  271. uni.removeStorageSync('userType');
  272. uni.redirectTo({
  273. url: '/pages/login',
  274. });
  275. }
  276. },
  277. //页面跳转
  278. goPage(type){
  279. if(type == 'upStudentCard'){//学生卡上传
  280. // if(this.certification.auditStatus.code == 2||this.certification.auditStatus.code == 3){
  281. uni.navigateTo({
  282. url: '/pages_student/mine/upStudentCard',
  283. });
  284. // }
  285. }else if(type == 'pointsRecord'){//积分记录
  286. uni.navigateTo({
  287. url: '/pages_student/mine/pointsRecord',
  288. });
  289. }else if(type == 'faceImage'){//人脸图像
  290. uni.navigateTo({
  291. url: '/pages/faceImage',
  292. });
  293. }else if(type == 'laboratory'){
  294. uni.navigateTo({
  295. url: '/pages_manage/workbench/laboratory/meLaboratory',//我的实验室
  296. });
  297. }else if(type == 'alarm'){
  298. uni.navigateTo({
  299. url: '/pages_manage/workbench/securityAlert/securityAlertList',//安全警报
  300. });
  301. }else if(type == 'record'){
  302. uni.navigateTo({
  303. url: '/pages_manage/workbench/plan/planList',//预案执行记录
  304. });
  305. }else if(type == 'signature'){
  306. uni.navigateTo({
  307. url: '/pages_manage/workbench/signature/signature?item='+this.signatureUrl,//电子签名
  308. });
  309. }
  310. },
  311. // 头像上传
  312. selectImage() {
  313. let self = this;
  314. wx.chooseImage({
  315. count: 1,
  316. sizeType: ["original", "compressed"],
  317. sourceType: ["album", "camera"],
  318. success: function(res) {
  319. console.log("res1",res)
  320. let tempFilePaths = res.tempFilePaths[0];
  321. self.uploadImg(tempFilePaths);
  322. }
  323. });
  324. },
  325. async uploadImg(tempFilePaths){
  326. var self = this;
  327. uni.showLoading({
  328. title: '上传中',
  329. mask: true
  330. });
  331. uni.uploadFile({
  332. url: config.base_url+'/file/upload', //仅为示例,非真实的接口地址
  333. header:{'Authorization':uni.getStorageSync('token')},
  334. filePath: tempFilePaths,
  335. name: 'file',
  336. formData: {
  337. 'user': 'test'
  338. },
  339. success: (uploadFileRes) => {
  340. let res = JSON.parse(uploadFileRes.data);
  341. if(res.code == 200){
  342. uni.navigateTo({
  343. url: '/pages/avatar?src='+config.base_url+res.data.url,//预案执行记录
  344. });
  345. }else{
  346. uni.showToast({
  347. title: res.msg,
  348. icon:"none",
  349. mask:true,
  350. duration: 2000
  351. });
  352. }
  353. },
  354. fail: err => {},
  355. complete: () => {
  356. uni.hideLoading()
  357. }
  358. });
  359. },
  360. },
  361. }
  362. </script>
  363. <style lang="stylus" scoped>
  364. #mine{
  365. height:100%;
  366. .top-max-big-box{
  367. /*background:#ffffff;*/
  368. .user-top-max-box-one{
  369. overflow hidden
  370. background url("@/images/img_wd_bg.png") no-repeat
  371. background-size:100%;
  372. height:350rpx;
  373. .top-max-box-one{
  374. background #fff
  375. margin:40rpx 40rpx 0;
  376. z-index:1;
  377. height:180rpx;
  378. border-top-right-radius 20rpx
  379. border-top-left-radius 20rpx
  380. display flex
  381. overflow hidden
  382. .user-img-box{
  383. height:120rpx;
  384. width:100rpx;
  385. margin:30rpx 53rpx 0 22rpx;
  386. img{
  387. height:100rpx;
  388. width:100rpx;
  389. border-radius:50%;
  390. }
  391. view{
  392. font-size:22rpx;
  393. color:#666666;
  394. text-align center
  395. line-height:22rpx;
  396. margin-top:10rpx;
  397. }
  398. }
  399. .name-box{
  400. margin-top:30rpx;
  401. .name-box-min{
  402. display flex
  403. overflow hidden
  404. margin-bottom:11rpx;
  405. view:nth-child(1){
  406. height:48rpx;
  407. line-height:48rpx;
  408. font-size: 30rpx;
  409. color: #333;
  410. }
  411. view:nth-child(2){
  412. height:30rpx;
  413. line-height:30rpx;
  414. font-size:20rpx;
  415. padding:0 20rpx;
  416. margin:9rpx 0 9rpx 20rpx;
  417. }
  418. view-color-one{
  419. background #FDD255;
  420. }
  421. view-color-two{
  422. background #A2A2A2;
  423. }
  424. view-color-tree{
  425. background #0183FA;
  426. }
  427. }
  428. .name-box-user{
  429. line-height:41rpx;
  430. font-size: 22rpx;
  431. color: #333;
  432. }
  433. }
  434. }
  435. .num-max-box{
  436. width:670rpx;
  437. background #fff
  438. border-bottom-right-radius 20rpx
  439. border-bottom-left-radius 20rpx
  440. height:130rpx;
  441. margin:0 40rpx;
  442. display flex
  443. .min-num-box{
  444. flex:1;
  445. .min-num-view{
  446. margin-top:30rpx;
  447. height:30rpx;
  448. line-height:30rpx;
  449. font-size:22rpx;
  450. text-align center
  451. }
  452. .color-one{
  453. font-weight:700;
  454. font-size:26rpx;
  455. color:#2B99FE;
  456. }
  457. .color-two{
  458. font-weight:700;
  459. font-size:26rpx;
  460. color:#FDD255;
  461. }
  462. .bottom-min-num-view{
  463. display flex
  464. margin-top:20rpx;
  465. .img-one{
  466. width:25rpx;
  467. height:28rpx;
  468. margin: 0 10rpx 0 58rpx;
  469. }
  470. .img-two{
  471. width:28rpx;
  472. height:26rpx;
  473. margin: 0 10rpx 0 59rpx;
  474. }
  475. view{
  476. font-size:22rpx;
  477. }
  478. }
  479. }
  480. }
  481. .null-p{
  482. background #dedede
  483. height:30rpx;
  484. width:2rpx;
  485. margin:50rpx 0 0;
  486. }
  487. }
  488. .top-max-box-two{
  489. background url("@/images/img_wd_bg.png")
  490. background-size:100%;
  491. height:245rpx;
  492. display flex
  493. overflow hidden
  494. .user-img-box{
  495. height:120rpx;
  496. width:100rpx;
  497. margin:50rpx 53rpx 0 22rpx;
  498. img{
  499. height:100rpx;
  500. width:100rpx;
  501. border-radius:50%;
  502. }
  503. view{
  504. font-size:22rpx;
  505. color:#fff;
  506. text-align center
  507. line-height:22rpx;
  508. margin-top:10rpx;
  509. }
  510. }
  511. .name-box{
  512. margin-top:50rpx;
  513. view:nth-child(1){
  514. line-height:48rpx;
  515. margin-bottom:11rpx;
  516. font-size: 30rpx;
  517. color: #fff;
  518. }
  519. view:nth-child(2){
  520. line-height:41rpx;
  521. font-size: 22rpx;
  522. color: #fff;
  523. }
  524. }
  525. }
  526. .button-max-big-box{
  527. background #fff
  528. padding:0 20rpx;
  529. margin-top:30rpx;
  530. .button-max-box{
  531. height:100rpx;
  532. display flex
  533. border-top:1rpx solid #e0e0e0;
  534. .left-img{
  535. height:30rpx;
  536. width:30rpx;
  537. margin:34rpx 44rpx 0 0;
  538. }
  539. view{
  540. line-height:100rpx;
  541. }
  542. view:nth-child(2){
  543. flex:1;
  544. color:#333333;
  545. font-size: 30rpx;
  546. }
  547. .right-img{
  548. height:24rpx;
  549. width:12rpx;
  550. margin:39rpx 0 0 0;
  551. }
  552. .colorA{
  553. color:#E45656!important;
  554. }
  555. .marginType{
  556. margin-right:12rpx;
  557. }
  558. .view-three-one{
  559. width:30rpx;
  560. height:30rpx;
  561. text-align center
  562. background #FF4552
  563. border-radius:50%;
  564. font-size:20rpx;
  565. line-height:30rpx;
  566. color:#fff;
  567. margin:36rpx 20rpx;
  568. }
  569. .view-three-two{
  570. width:30rpx;
  571. height:30rpx;
  572. text-align center
  573. border-radius:50%;
  574. font-size:20rpx;
  575. line-height:30rpx;
  576. color:#999;
  577. margin:36rpx 20rpx;
  578. }
  579. .view-three-type{
  580. width:120rpx;
  581. text-align center;
  582. color:#CCCCCC;
  583. font-size: 26rpx;
  584. }
  585. }
  586. .button-max-box:nth-child(1){
  587. border:none;
  588. }
  589. }
  590. }
  591. .out-button{
  592. position absolute
  593. bottom:140rpx;
  594. left:25rpx;
  595. width:700rpx;
  596. height:100rpx;
  597. line-height:100rpx;
  598. border-radius:10rpx;
  599. text-align center
  600. background #E0E0E0
  601. color:#0183FA;
  602. font-size: 30rpx;
  603. margin:0 auto;
  604. }
  605. }
  606. </style>