terminal.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500
  1. <template>
  2. <ax-body blank="0" hideIndicatorArea>
  3. <image src="@/static/img/page-bg01.png" class="page-background"></image>
  4. <view class="body" :class="{visit}">
  5. <!-- 主图 -->
  6. <view class="app-flex c-center host-graph">
  7. <image src="@/static/img/charging-01.png" mode="widthFix" class="image"></image>
  8. </view>
  9. <!-- 主参数 -->
  10. <view class="parameter">
  11. <view class="param">
  12. <view class="value">{{deviceInfo.current}}</view>
  13. <view class="name">电流A</view>
  14. </view>
  15. <view class="param">
  16. <view class="value">{{getVolt()}}</view>
  17. <view class="name">电压V</view>
  18. </view>
  19. <view class="param">
  20. <view class="value">{{deviceInfo.power}}</view>
  21. <view class="name">功率KW</view>
  22. </view>
  23. </view>
  24. <view v-if="!visit" class="block">
  25. <view class="card">
  26. <view class="title">
  27. <text>我的抵扣券</text>
  28. <view class="more" v-if="isEc">
  29. <view class="switch" :class="{'personal':personal==1}"><text
  30. @click="changeAccount(1)">个人</text><text @click="changeAccount(2)">集团</text></view>
  31. </view>
  32. </view>
  33. <view class="coupon-image-card"
  34. :style="{backgroundImage:`url(${personal==1?selectedImg:defaultImg})`}">
  35. <view class="coupon-title">充电抵扣券</view>
  36. <view class="price-info">
  37. <view class="price-numer">{{accountInfo.balance}}</view>
  38. <view class="price-text">剩余可抵扣充电余量</view>
  39. </view>
  40. <view class="shop-coupon-btn" :style="{backgroundColor: personal==1?'#FF6457':'#3EB6F8'}"
  41. @click="gotoCouponBuy">立即购券</view>
  42. </view>
  43. <!-- <view class="coupon" :class="{'personal':personal==1}">
  44. <view class="name">{{personal == 1?'充电抵扣券':'集团抵扣券'}}</view>
  45. <view class="feature"><view class="line"></view></view>
  46. <view class="info">
  47. <view class="value">{{accountInfo.balance}}</view>
  48. <view class="describe">剩余可抵扣充电费用 (元)</view>
  49. </view>
  50. </view> -->
  51. </view>
  52. </view>
  53. <view class="block">
  54. <view class="card">
  55. <view class="title">
  56. <text>费用信息</text>
  57. <view @click="$app.url.goto('/pages/site-more/site-more?show=1&stationId='+stationInfo.id)"
  58. class="more"><text>价格详情</text>
  59. <icon class="ax-iconline i-arrow-right icon"></icon>
  60. </view>
  61. </view>
  62. <view class="cell">
  63. <view class="lable">{{personal == 1?'当前电价':'集团折扣价'}}</view>
  64. <view class="contet app-flex middle">
  65. <view v-if="personal == 1"><text
  66. class="money">{{nowPriceTime.price?parseFloat(nowPriceTime.price).toFixed(4):"0.0000"}}</text><text>
  67. 元/度</text></view>
  68. <view v-else>
  69. <text class="obsolete">
  70. {{nowPriceTime.price?parseFloat(nowPriceTime.price).toFixed(4):"0.0000"}} 元/度
  71. </text>
  72. <text class="money">{{getCurrEcPrice()}}</text><text> 元/度</text>
  73. </view>
  74. </view>
  75. </view>
  76. <view class="cell" v-if="discountInfo&&personal == 1">
  77. <view class="lable">优惠</view>
  78. <view class="contet app-flex middle">
  79. <view>{{discountInfo.temp3}}<text
  80. class="money">{{discountInfo.discount?parseFloat(discountInfo.discount).toFixed(4):"0.0000"}}</text><text>
  81. 元/度</text></view>
  82. </view>
  83. </view>
  84. <view class="cell" v-if="nowPriceTime.firmPrice||$app.storage.get('USER_INFO').firmType===1">
  85. <view class="lable">企业专享价</view>
  86. <view class="contet app-flex middle">
  87. <view><text
  88. class="money">{{nowPriceTime.firmPrice?parseFloat(nowPriceTime.firmPrice).toFixed(4):"0.0000"}}</text><text>
  89. 元/度</text></view>
  90. </view>
  91. </view>
  92. <view class="cell">
  93. <view class="lable">当前时段</view>
  94. <view class="contet">{{getPriceLable(nowPriceTime.timeType)}} {{nowPriceTime.time}}</view>
  95. </view>
  96. <!-- <view class="cell" style="height: auto;"><view class="lable">停车参考</view><view class="contet" style="flex: 1;padding-left: 5px;" v-html="stationInfo.parkTips"></view></view> -->
  97. <view class="cell">
  98. <view class="lable">停车参考</view>
  99. <view class="contet">充电减免2小时停车费,超出时长部分计时收费</view>
  100. </view>
  101. </view>
  102. </view>
  103. <view class="block">
  104. <view class="card">
  105. <view class="title">终端信息</view>
  106. <view class="cell">
  107. <view class="lable">终端状态</view>
  108. <view class="contet">{{getDeviceStatusLable(deviceInfo.deviceStatus)}}</view>
  109. </view>
  110. <view class="cell">
  111. <view class="lable">终端编号</view>
  112. <view class="contet">{{deviceInfo.deviceNo}}</view>
  113. </view>
  114. <view class="cell">
  115. <view class="lable">充电电站</view>
  116. <view class="contet">{{deviceInfo.thirdPartyStationName}}</view>
  117. </view>
  118. <view class="cell">
  119. <view class="lable">充电终端</view>
  120. <view class="contet">{{deviceInfo.deviceName}}</view>
  121. </view>
  122. <view class="cell">
  123. <view class="lable">车位编号</view>
  124. <view class="contet">{{deviceInfo.parkNo ? deviceInfo.parkNo : "无"}}</view>
  125. </view>
  126. </view>
  127. </view>
  128. <!-- 信息 -->
  129. <view class="footer">
  130. <view class="tips">账单信息可能会有所延迟,具体以实际结算为准</view>
  131. <view>
  132. <button @click="startup()" class="startup">启动终端充电</button>
  133. <ax-ios-indicator min="10"></ax-ios-indicator>
  134. </view>
  135. </view>
  136. </view>
  137. <ax-popup ref="filter" position="" maskType="black" maskEnable>
  138. <view class="Modal-tips">
  139. <view class="tips-icon">!</view>
  140. <view class="icon-title">温馨提示</view>
  141. <view class="tips-text" v-if="amountOwed">您有一笔超充订单{{amountOwed}}元待补缴</view>
  142. <view class="tips-btn">
  143. <view class="cancel-btn" @click="$refs.filter.close()">取消</view>
  144. <view class="confirm-btn" @click="$app.url.goto('/pages/coupon-buy/coupon-buy')">购券并补缴</view>
  145. </view>
  146. </view>
  147. </ax-popup>
  148. </ax-body>
  149. </template>
  150. <script>
  151. export default {
  152. onLoad(opts) {
  153. console.log("参数信息:", opts)
  154. /**
  155. * 判断终端是否占用状态
  156. * 判断占用终端设备的是不是用户自己
  157. */
  158. this.deviceId = opts.deviceId
  159. this.deviceStatus = opts.deviceStatus
  160. },
  161. onShow() {
  162. this.queryInChange(this.deviceId, this.deviceStatus);
  163. /**
  164. * 刷新用户信息
  165. */
  166. this.userInfo = this.$app.storage.get(this.$config.keyname.userInfo);
  167. if (!this.userInfo.phone) {
  168. this.$app.url.goto('/pages/login/login')
  169. return;
  170. }
  171. this.$api.login({
  172. "checkStatus": 1
  173. }).then(() => {
  174. this.userInfo = this.$app.storage.get(this.$config.keyname.userInfo);
  175. if (this.userInfo.ecId) {
  176. //查询该集团账户是否正常使用。
  177. this.$api.base("post", "/chargeApi/queryEcInfo", {
  178. "ecId": this.userInfo.ecId
  179. }, {}).then(res => {
  180. if (res.ecInfo && res.ecInfo.ecStatus == 1) {
  181. this.isEc = true;
  182. }
  183. })
  184. }
  185. })
  186. },
  187. mounted() {
  188. if(this.amountOwed!==null){
  189. this.$refs.filter.open()
  190. }
  191. },
  192. data() {
  193. return {
  194. amountOwed:null,
  195. deviceId: 0,
  196. deviceStatus: 0,
  197. visit: '',
  198. personal: 1, // 1 个人订单 2 集团订单
  199. isEc: false, //是否集团的用户
  200. nowPriceTime: {}, //当前价格时间段信息
  201. deviceInfo: {}, //充电桩的信息
  202. accountInfo: { //账户信息
  203. balance: 0, //可用抵用券余额
  204. },
  205. userInfo: {},
  206. stationInfo: {}, //站点信息
  207. orderInfo: {}, //临时订单信息
  208. checkNum: 0, //检测订单状态次数
  209. ecInfo: {}, //集团信息
  210. discountInfo: null, //优惠信息
  211. selectedImg: 'https://hyxhsh.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/AwQTRxpEMqOG50293e26d86888b3e0f7324c429d2019.png/1.png',
  212. defaultImg: 'https://hyxhsh.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/SPh1u3KAqte830a107b2e3c5033b1d1027516d84d780.png/1.png'
  213. }
  214. },
  215. methods: {
  216. //通过用户id查询是否还有在充电中的订单
  217. queryInChange(deviceId, deviceStatus) {
  218. if (deviceStatus == 3 || deviceStatus == 4) {
  219. //占用充电状态;终端占用且不是自己,进入访问模式
  220. this.visit = true;
  221. }
  222. this.getDeviceInfo(deviceId); //获取设备、站的详情信息
  223. this.getAccountInfo(); //获取账户信息
  224. /* this.$api.base("post","/chargeApi/queryInChangeByUserId",{},{}).then(res=>{
  225. if(res.isChange == 1){
  226. this.orderInfo = res.orderInfo;
  227. //用户有充电中的订单
  228. //if(res.orderInfo.deviceId == deviceId){
  229. // 跳转
  230. this.$app.url.goto('/pages/charging/charging?orderId='+this.orderInfo.id+"&deviceId="+deviceId,false);
  231. //}
  232. }else{
  233. }
  234. }) */
  235. },
  236. //获取设备的详情信息
  237. getDeviceInfo(deviceId) {
  238. this.$api.base("post", "/chargeApi/getDevicesDetial", {
  239. "deviceId": deviceId
  240. }, {}).then(res => {
  241. this.deviceInfo = res.device;
  242. this.nowPriceTime = res.nowPriceTime;
  243. this.stationInfo = res.stationInfo;
  244. if (res.discountInfo) {
  245. this.discountInfo = res.discountInfo
  246. }
  247. if (this.deviceInfo.tipsStatus == 1) {
  248. this.$app.popup.alert(this.deviceInfo.tipsContent, "温馨提示");
  249. }
  250. })
  251. },
  252. //获取账户信息
  253. getAccountInfo() {
  254. if (this.personal == 1) {
  255. //获取个人账户信息
  256. this.$api.base("post", "/chargeApi/getUserAccount", {}, {}).then(res => {
  257. this.amountOwed=res.userAccount.amountOwed
  258. this.accountInfo.balance = res.userAccount.balance;
  259. })
  260. } else {
  261. //获取集团账户信息
  262. this.$api.base("post", "/chargeApi/getEcUserAccount", {}, {
  263. error: false
  264. }).then(res => {
  265. this.ecInfo = res.ecInfo;
  266. this.accountInfo.balance = res.ecUserAccount.balance;
  267. }).catch(err => {
  268. this.accountInfo.balance = 0;
  269. this.$app.popup.alert(err.msg, "温馨提示");
  270. })
  271. }
  272. },
  273. //切换账户
  274. changeAccount(type) {
  275. if (this.personal == type) {
  276. return;
  277. }
  278. this.personal = type;
  279. this.getAccountInfo();
  280. },
  281. //当前集团折扣价
  282. getCurrEcPrice() {
  283. if (!this.nowPriceTime) {
  284. return 0;
  285. }
  286. var currEcP = this.nowPriceTime.price;
  287. if (this.ecInfo && this.ecInfo.ecDiscount) {
  288. var realServicePrice = this.nowPriceTime.servicePrice
  289. if (this.stationInfo.contractServicePrice) {
  290. realServicePrice = this.stationInfo.contractServicePrice
  291. }
  292. currEcP = (this.nowPriceTime.electrovalence + realServicePrice + this.nowPriceTime.addServicePrice *
  293. this.ecInfo.ecDiscount / 100);
  294. }
  295. console.log("dddd", currEcP)
  296. if (currEcP) {
  297. currEcP = currEcP.toFixed(2);
  298. }
  299. return Number(currEcP).toFixed(4);
  300. },
  301. //转换出电压值
  302. getVolt() {
  303. if (!this.deviceInfo.power) {
  304. return 0;
  305. }
  306. var v = this.deviceInfo.power / this.deviceInfo.current * 1000;
  307. return v;
  308. },
  309. //映射 峰 平 谷
  310. getPriceLable(type) {
  311. //时间类型 1 谷 2 平 3 峰
  312. var str = "";
  313. switch (type) {
  314. case 1:
  315. str = "谷";
  316. break;
  317. case 2:
  318. str = "平";
  319. break;
  320. case 3:
  321. str = "峰";
  322. break;
  323. }
  324. return str;
  325. },
  326. //映射订单状态名称()
  327. getDeviceStatusLable(status) {
  328. //设备状态 0:离网1:空闲2:占用(未充电)3:占用(充电中)4:占用(预约锁定)255:故障
  329. var str = "";
  330. switch (status) {
  331. case 0:
  332. str = "离网";
  333. break;
  334. case 1:
  335. str = "空闲";
  336. break;
  337. case 2:
  338. str = "占用";
  339. break;
  340. case 3:
  341. str = "占用";
  342. break;
  343. case 4:
  344. str = "占用";
  345. break;
  346. case 255:
  347. str = "故障";
  348. break;
  349. }
  350. return str;
  351. },
  352. startup() {
  353. if (this.visit) {
  354. this.$app.popup.alert("该充电枪被占用或存在异常,请重新尝试或更换其他充电枪。", "温馨提示");
  355. return;
  356. }
  357. //判断账户余额是否大于两元
  358. if ((this.accountInfo.balance - 3) <= 0) {
  359. return this.$app.popup.confirm("无法启动充电,抵扣余量需大于3元,请先购买充电券!", "温馨提示!", {
  360. confirmText: "立即购券"
  361. }).then(confirm => {
  362. if (confirm) {
  363. this.$app.url.goto('/pages/coupon-buy/coupon-buy', true);
  364. }
  365. });
  366. }
  367. //统一下单并启动接口
  368. this.get_subMessage();
  369. },
  370. get_subMessage(){
  371. let _this=this
  372. uni.requestSubscribeMessage({
  373. tmplIds: ['03bv7QSrzH4DSjmNsI9P0lq0Vj3sBwpN5mgfZln7Rc4'],
  374. success (res) {
  375. _this.startChangeAndOrder();
  376. }
  377. })
  378. },
  379. // 主动发起购券操作
  380. gotoCouponBuy() {
  381. this.$app.url.goto('/pages/coupon-buy/coupon-buy', true);
  382. },
  383. //统一下单并启动接口
  384. startChangeAndOrder() {
  385. var obj = {
  386. userId: this.userInfo.id,
  387. deviceId: this.deviceInfo.id,
  388. orderType: this.personal == 2 ? 2 : 1, //订单类型 1 个人订单 2 集团订单
  389. }
  390. this.$api.base("post", "/chargeApi/startChangeAndOrder", obj, {}).then(res => {
  391. //下单成功,并进行了订单预充值
  392. this.orderInfo = res.orderInfo;
  393. if (res.flg && res.flg == 1) {
  394. //用户有充电中的订单
  395. this.$app.popup.confirm("您有一个进行中充电订单,不可再次启动。", null, {
  396. showCancel: false,
  397. confirmText: "查看订单"
  398. }).then(cres => {
  399. this.$app.url.goto('/pages/charging/charging?orderId=' + this.orderInfo.id +
  400. "&deviceId=" + this.deviceInfo.id, false);
  401. });
  402. } else {
  403. //正常启动充电订单
  404. this.$app.url.goto('/pages/charging/charging?orderId=' + this.orderInfo.id + "&deviceId=" +
  405. this.deviceInfo.id, false);
  406. }
  407. //this.$app.popup.loading(true,{title:"启动中...."})
  408. //延迟5s查询一下订单,看看是否真的启动成功
  409. //setTimeout(()=>this.checkedStartStatus(),5000);
  410. })
  411. },
  412. /* // 通过充电桩编号(sn)检测该设备是否插枪,是否可以进行后续的下单,启动操作
  413. checkDeviceReady(){
  414. this.$api.base("post","/chargeApi/checkDeviceReady",{"sn":this.deviceInfo.deviceNo},{}).then(res=>{
  415. if(res.code == 0){
  416. //充电桩已经插枪准备好了,可以进行下单充值操作
  417. this.chargeAndOrder();
  418. }
  419. })
  420. },
  421. // 进行下单,并进行接口充值,准备启动充电
  422. chargeAndOrder(){
  423. var obj = {
  424. userId : this.userInfo.id,
  425. deviceId : this.deviceInfo.id,
  426. orderType : this.personal == 2 ? 2 : 1,//订单类型 1 个人订单 2 集团订单
  427. }
  428. this.$api.base("post","/chargeApi/chargeAndOrder",obj,{}).then(res=>{
  429. if(res.code == 0){
  430. //下单成功,并进行了订单预充值
  431. this.orderInfo = res.orderInfo;
  432. //通知已经充值成功,可以进行设备充电的启动
  433. this.changePayAndStart();
  434. }
  435. })
  436. },
  437. // 支付成功启动充电通知
  438. changePayAndStart(){
  439. this.$api.base("post","/chargeApi/changePayAndStart",{"id":this.orderInfo.id},{}).then(res=>{
  440. if(res.code == 0){
  441. this.$app.popup.loading(ture,{title:"启动中...."})
  442. //延迟5s查询一下订单,看看是否真的启动成功
  443. setTimeout(()=>this.checkedStartStatus(),5000);
  444. }
  445. })
  446. }, */
  447. // 延迟5s查询一下订单,看看是否真的启动成功
  448. checkedStartStatus() {
  449. this.$api.base("post", "/chargeApi/checkedStartStatus", {
  450. "id": this.orderInfo.id
  451. }, {}).then(res => {
  452. if (res.code == 0) {
  453. var respObj = res.obj;
  454. if (respObj.code == 200) {
  455. if (respObj.status == 1) {
  456. uni.hideLoading();
  457. //状态为1说明正常启动
  458. this.$app.url.goto('/pages/charging/charging?orderId=' + this.orderInfo.id +
  459. "&deviceId=" + this.deviceInfo.id, false);
  460. } else {
  461. //其他状态,说明充电桩,未启动。或其他问题,需要再次进行进行验证
  462. if (this.checkNum < 20) {
  463. this.checkNum = this.checkNum + 1;
  464. //延迟2s查询一下订单,看看是否真的启动成功
  465. setTimeout(() => this.checkedStartStatus(), 2000);
  466. }
  467. }
  468. } else {
  469. uni.hideLoading();
  470. this.$app.popup.alert(respObj.msg, "温馨提示");
  471. }
  472. } else {
  473. uni.hideLoading();
  474. }
  475. })
  476. },
  477. }
  478. }
  479. </script>
  480. <style scoped>
  481. @import url("terminal.css");
  482. </style>