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