applyAuthorisation.vue 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489
  1. <template>
  2. <view>
  3. <view v-if="step">
  4. <u-navbar :title="title" title-color="#101010" :is-back="false" >
  5. </u-navbar>
  6. <view class="main2">
  7. <view class="item" v-for="(item,i) in meterListCk"
  8. :key="i" >
  9. <view class="item1">
  10. <view class="item11">{{item.name}}</view>
  11. <view class="item12">电源状态:<span>{{item.switchStatus?'开':'关'}}</span></view>
  12. </view>
  13. <view class="item2" >
  14. <span>关</span>
  15. <u-switch size="32" @change="switchBtnApi(item,$event)"
  16. v-model="item.switchStatus" inactive-color="#ff9900" ></u-switch >
  17. <span>开</span>
  18. </view>
  19. </view>
  20. <u-divider :isnone="meterListCk.length==0" v-if="!meterListCk.length"
  21. nonetext="暂无记录" border-color="rgba(119,119,119,1)">
  22. 已经到底了</u-divider>
  23. </view>
  24. <view class="bottom">
  25. <u-divider border-color=" rgba(119,119,119,1)">
  26. 温馨提示</u-divider>
  27. <view class="view">
  28. <img class="view1" src="@/assets/img/apply-look.png">
  29. <img class="view2" src="@/assets/img/apply-text.png">
  30. </view>
  31. </view>
  32. </view>
  33. <view v-if="!step">
  34. <u-navbar title="填写申请人信息" title-color="#101010" :is-back="false" >
  35. </u-navbar>
  36. <view class="main">
  37. <view class="item">
  38. <view class="title">
  39. 申请授权
  40. </view>
  41. <view class="value">
  42. {{title}}
  43. </view>
  44. </view>
  45. <view class="item" v-if="information.remark">
  46. <view class="title">
  47. 备注
  48. </view>
  49. <view class="value">
  50. {{information.remark}}
  51. </view>
  52. </view>
  53. <view class="item">
  54. <view class="title">
  55. 姓名<span>*</span>
  56. </view>
  57. <view class="value" v-if="!step3">
  58. <input type="text" v-model="name" placeholder="请填写姓名" />
  59. </view>
  60. <view class="value" v-if="step3">
  61. {{name}}
  62. </view>
  63. </view>
  64. <view class="item">
  65. <view class="title">
  66. 联系电话<span>*</span>
  67. </view>
  68. <view class="value" v-if="!step3">
  69. <input type="text" v-model="phone" placeholder="请填写手机号码" />
  70. </view>
  71. <view class="value" v-if="step3">
  72. {{phone}}
  73. </view>
  74. </view>
  75. <!-- <view class="item">
  76. <view class="title">
  77. <span></span> 备注
  78. </view>
  79. </view> -->
  80. <view class="item">
  81. <view class="valueInfo" style=" width: 100%;" >
  82. <span style=" color: #777777;font-size: 32rpx;" >备注信息</span>
  83. <textarea type="text" v-model="remark"
  84. style="background-color: #f5f5f5;height: 100rpx;width: 90%;padding: 20rpx;border-radius: 5px;"
  85. placeholder="请填写备注,便于管理员分配所需电表" /></textarea>
  86. </view>
  87. </view>
  88. </view>
  89. <button class="submit2" v-if="step2" >审批中</button>
  90. <!-- 提交 -->
  91. <button class="submit" v-else @click="submit" >提交</button>
  92. </view>
  93. <!-- 提交反馈 -->
  94. <u-modal v-model="show" :show-title="false" :show-cancel-button="true" cancel-text="关闭" :show-confirm-button="false" >
  95. <view class="modal">
  96. <view class="success-icon">
  97. <img src="@/assets/img/md-check_circle vRxbRvD@3x.png" alt="" />
  98. </view>
  99. <view class="success-text">
  100. 授权申请提交成功
  101. </view>
  102. <view class="wait">
  103. 请等待单位能源管理员审核通过
  104. </view>
  105. </view>
  106. </u-modal>
  107. </view>
  108. </template>
  109. <script>
  110. import * as API_energyManage from '@/apis/pagejs/energyManage.js'
  111. import * as API_user from '@/apis/pagejs/user.js'
  112. import * as API from '@/apis/pagejs/managementList.js'
  113. import {
  114. checkPhone
  115. } from '@/apis/utils'
  116. export default {
  117. data() {
  118. return {
  119. show:false,
  120. meterId:"",
  121. id:"",
  122. name:"",
  123. phone:"",
  124. title:"",
  125. step:false,
  126. step2:false,
  127. step3:false,
  128. meterList:[],
  129. regUser:{},
  130. remark:"",
  131. information:{},
  132. }
  133. },
  134. onLoad(op) {
  135. this.id=op.id
  136. this.getInformation()
  137. this.query()
  138. },
  139. computed:{
  140. meterListCk(){
  141. var sz=[]
  142. for(var i in this.meterList){
  143. var item=this.meterList[i]
  144. if(item.checked){
  145. sz.push(item)
  146. }
  147. }
  148. return sz
  149. }
  150. },
  151. methods: {
  152. query(){
  153. uni.showLoading({
  154. title: "加载中",
  155. mask: true,
  156. })
  157. API_user.findByOpenId({
  158. noerror:true,
  159. openId: this.carhelp.getOpenId(),
  160. }).then((response) => {
  161. if(response.result){
  162. this.step3=true
  163. var token = response ? response.data.token : '';
  164. this.carhelp.setToken(token);
  165. this.carhelp.setPersonInfo(response.data.regUser);
  166. this.carhelp.setPersonInfoPlus(response.data)
  167. this.regUser=response.data.regUser
  168. this.name=this.regUser.name
  169. this.phone=this.regUser.phone
  170. }
  171. }).catch(error => {
  172. uni.hideLoading();
  173. })
  174. },
  175. switchBtnApiMethod(node,key){
  176. uni.showLoading({
  177. title: "加载中",
  178. mask: true,
  179. })
  180. API_energyManage.remoteSwitch({
  181. meterId:node.id,
  182. enabled:key
  183. }).then((res) => {
  184. uni.hideLoading();
  185. node.switchStatus=key
  186. }).catch(error => {
  187. uni.showToast({
  188. title: error,
  189. icon: "none"
  190. })
  191. })
  192. },
  193. switchBtnApi(node,key){
  194. uni.showModal({
  195. confirmColor:`${key?'#3CC51F':'red'}`,
  196. confirmText:`${key?'开启':'关闭'}`,
  197. content: `确认是否要"${key?'开启':'关闭'}"${this.replaceLastTwoWords(node.name)}`, title: "提示",
  198. success:res=> {
  199. if(res.confirm){
  200. //this.switchBtnApiMethod(node,key);
  201. }else{
  202. node.switchStatus=!key
  203. }
  204. }
  205. })
  206. console.log(node,key)
  207. },
  208. getInformation(){
  209. if(!this.carhelp.getOpenId()){
  210. uni.showToast({
  211. icon: "none",
  212. title: "未获取到OpenId,请使用微信扫码"
  213. })
  214. return
  215. }
  216. uni.showLoading({
  217. title: "加载中",
  218. mask: true,
  219. })
  220. API.information({
  221. id:this.id,
  222. openId:this.carhelp.getOpenId(),
  223. }).then((res) => {
  224. this.title=res.data.information.title
  225. this.information=res.data.information;
  226. var allCheck=res.data.allCheck
  227. uni.hideLoading();
  228. //this.show=true
  229. var info=res.data.applicationInfo;
  230. if(allCheck){
  231. this.step=true
  232. this.meterList=res.data.meterList
  233. var img=require('@/assets/img/controlCover.png')
  234. var s='background:url('+img+') center fixed;background-size:cover;';
  235. console.log(s)
  236. document.getElementsByTagName("uni-page")[0].style=s
  237. }
  238. if(info&&info.status==0){
  239. this.step2=true
  240. }
  241. }).catch(error => {
  242. uni.showToast({
  243. title: error,
  244. icon: "none"
  245. })
  246. })
  247. },
  248. submit(){
  249. if(!this.carhelp.getOpenId()){
  250. uni.showToast({
  251. icon: "none",
  252. title: "未获取到OpenId,请使用微信扫码"
  253. })
  254. return
  255. }
  256. if(!this.name.length){
  257. uni.showToast({
  258. icon: "none",
  259. title: "请输入姓名"
  260. })
  261. return
  262. }
  263. var checkPhoneResult = checkPhone(this.phone);
  264. if (checkPhoneResult !== true) {
  265. uni.showToast({
  266. icon: "none",
  267. title: checkPhoneResult,
  268. })
  269. return;
  270. }
  271. uni.showLoading({
  272. title: "加载中",
  273. mask: true,
  274. })
  275. API.apply({
  276. id:this.id,
  277. name:this.name,
  278. phone:this.phone,
  279. remark:this.remark,
  280. openId:this.carhelp.getOpenId(),
  281. }).then((res) => {
  282. uni.hideLoading();
  283. if(res.result){
  284. this.show=true
  285. }
  286. this.getInformation()
  287. }).catch(error => {
  288. uni.showToast({
  289. title: error,
  290. icon: "none"
  291. })
  292. })
  293. }
  294. }
  295. }
  296. </script>
  297. <style lang="scss" scoped>
  298. page{
  299. //background: url('@/assets/img/controlCover.png') center fixed ;
  300. //background-size:cover;
  301. }
  302. .main2{
  303. margin: 24rpx 0;
  304. padding-bottom: 300rpx;
  305. .item{
  306. margin: 32rpx ;
  307. padding: 32rpx ;
  308. background-color: #fff;
  309. border-radius: 15px;
  310. display: flex;
  311. align-items: center;
  312. justify-content: space-between;
  313. .item11{
  314. font-size: 32rpx;
  315. color: rgba(51,51,51,1);
  316. font-weight: bold;
  317. }
  318. .item12{
  319. font-size: 24rpx;
  320. color:#777777 ;
  321. span{
  322. font-weight: bold;
  323. color: rgba(51,51,51,1);
  324. }
  325. }
  326. .item2{
  327. display: flex; align-items: center;
  328. }
  329. }
  330. }
  331. .main{
  332. margin: 24rpx 0;
  333. background-color: #fff;
  334. .item{
  335. padding: 24rpx 32rpx;
  336. display: flex;
  337. align-items: center;
  338. border-bottom: 1px solid rgba(221,221,221,1);
  339. .title{
  340. width: 30%;
  341. color: #777777;
  342. font-size: 32rpx;
  343. span{
  344. color: #EE3138;
  345. }
  346. }
  347. .value{
  348. img{
  349. width: 80rpx;
  350. }
  351. .uni-input-placeholder{
  352. color: rgba(204,204,204,1);;
  353. }
  354. }
  355. .icon{
  356. margin-left: auto;
  357. }
  358. }
  359. .item:last-of-type{
  360. border: none;
  361. }
  362. }
  363. // 提交
  364. .submit{
  365. background-color: rgba(22,119,255,1);
  366. color: rgba(255,255,255,1);
  367. margin: 0 32rpx;
  368. border-radius: 50px;
  369. }
  370. // 提交
  371. .submit2{
  372. background-color: #777777;
  373. color: rgba(255,255,255,1);
  374. margin: 0 32rpx;
  375. border-radius: 50px;
  376. }
  377. // 提交反馈
  378. .modal{
  379. text-align: center;
  380. .success-icon{
  381. margin-top: 24rpx;
  382. img{
  383. width: 132rpx;
  384. height: 132rpx;
  385. }
  386. }
  387. .success-text{
  388. color: rgba(16,16,16,1);
  389. font-size: 36rpx;
  390. margin-top: 16rpx;
  391. font-weight: bold;
  392. }
  393. .wait{
  394. margin-top: 10rpx;
  395. margin-bottom: 48rpx;
  396. }
  397. }
  398. .bottom{
  399. position: fixed;
  400. left: 0;
  401. right: 0;
  402. bottom: 0;
  403. padding: 20rpx 32rpx;
  404. .view{
  405. background-color: #fff;
  406. border-radius: 12px;
  407. background: linear-gradient(180deg, rgba(24,90,198,1) 0%,rgba(22,119,255,1) 100%);
  408. margin: 32rpx;
  409. padding: 24rpx 0;
  410. white-space: pre;
  411. display: flex;
  412. align-items: flex-end;
  413. justify-content: center;
  414. }
  415. .view1{
  416. height: 80rpx;
  417. }
  418. .view2{
  419. height: 56rpx;
  420. }
  421. }
  422. </style>