terminal.vue 15 KB

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