Jelajahi Sumber

启动中,关闭中新增 时钟倒计时, 进度条优化00:03

zhengkaixin 3 tahun lalu
induk
melakukan
a16c8f0a36
8 mengubah file dengan 76 tambahan dan 12 penghapusan
  1. 5 2
      .env.test.js
  2. 1 0
      App.vue
  3. 62 10
      pages/index/index.vue
  4. 1 0
      static/font/iconfont.css
  5. 7 0
      static/font/jptime.css
  6. TEMPAT SAMPAH
      static/font/jptime.otf
  7. TEMPAT SAMPAH
      static/img/charge0.png
  8. TEMPAT SAMPAH
      static/img/charge3.png

+ 5 - 2
.env.test.js

@@ -1,13 +1,16 @@
 const UNI_APP = {  
-	//BASE_URL: 'http://192.168.33.120:8087/smart-bus-server/' ,
-    BASE_URL: 'https://charging.xiaoxinda.com/charging-station-server/',
+    // BASE_URL: 'http://192.168.77.162:8080/charging-station/' ,
+   BASE_URL: 'https://charging.xiaoxinda.com/charging-station-server/',
 	NODE_ENV :"test",
 	SIMPLE_RUN:false,
 	//openId:"oHjCawigqi8SEAwutwkQ-VEgdp3k",//测试用openId
 	//openId:"oHjCawmHqG44pqUW54iBlenaHYB8",
 	//小鹏管家appid
 	VUE_APP_WXAPPID:"wx7e70eb62a8459869",
+	//zkx的测试openId
 	openId:"oHjCawigqi8SEAwutwkQ-VEgdp3k",
+	//zq的测试openId
+	//openId:"oHjCawsxTJkxixR74OVp7aCKahj8",
 }  
 
 module.exports = UNI_APP;

+ 1 - 0
App.vue

@@ -27,6 +27,7 @@
 	//
 	/*每个页面公共css */
 	//@import 'static/css/style.css';
+	
 	@import 'static/font/iconfont.css';
 	.uni-icon-success-no-circle:before {
 	    content: "" !important ;

+ 62 - 10
pages/index/index.vue

@@ -27,11 +27,13 @@
 					<img v-if="item.status==0" src="static/img/charge0.png" alt="">
 					<img v-if="item.status==1" src="static/img/charge1.png" alt="">
 					 <img v-if="item.status==2" src="static/img/charge2.png" alt=""> 
-					 <img v-if="item.status==3" src="static/img/charge1.png" alt="">
-					 
+					 <img v-if="item.status==3" src="static/img/charge3.png" alt="">
+					 <div class="JPTIME JPTIME1"  v-if="item.status==0||item.status==3" v-text="showtime[i]"></div>
+					  
 				</view>
 				<view class="chargeTime" v-if="item.status==3">
-					<h1>停止中...</h1>
+					<h1>关闭中...</h1>
+					
 				</view>
 				<view class="chargeTime" v-if="item.status==0">
 					<h1>启动中...</h1>
@@ -84,7 +86,8 @@
 					</view>
 				</view>
 				<view class="chargeBtn">
-					<view class="chargeBtn-item" v-if="item.status==1" @click="returnMoney(item)">终止并退款</view>
+					<view class="chargeBtn-item" v-if="item.status==1||item.status==0" @click="returnMoney(item)">终止并退款</view>
+					<view class="chargeBtn-item" v-if="item.status==2" @click="f5(true)">刷新</view>
 					<view class="chargeBtn-item" @click="showTips(item)">费用说明</view>
 				</view>
 				
@@ -104,7 +107,8 @@
 	</view>
 </template>
 
-<script>
+<script>
+	
 	import Tabbar from '@/components/Tabbar.vue'
 	import * as API from '@/apis/index.js'
 	import {secondsDistance,hourDistanceArr} from '@/utils'
@@ -117,6 +121,7 @@
 				showitem:[],
 				percent:0,
 				list:[],
+				showtime:{},
 				isReady:false,
 				isCharge:false,
 				detail: {
@@ -124,7 +129,8 @@
 				},
 				detailIng: {
 
-				},
+				},
+				setTimeoutId:""
 			}
 		},
 		onLoad(op) {
@@ -141,8 +147,43 @@
 				mask: true,
 			})
 			this.init(op.phone)
-		},
+			setInterval(this.formatDate, 500);
+
+		},
+		 beforeDestroy() {
+		    if (this.formatDate) {
+		      clearInterval(this.formatDate); // 在Vue实例销毁前,清除时间定时器
+		    }
+		  },
 		methods: {
+			formatDate(){
+				for(var i in this.list){
+					var obj=this.list[i];
+					var second=0;
+					
+					if(obj.status==0){
+						second=secondsDistance(obj.createTime);
+					}
+					if(obj.status==3){
+						second=secondsDistance(obj.updateTime);
+					}
+					//obj.showtime=this.getShowTime(obj);
+					var ms=60*2-second;
+					if(ms>0){
+						var Hour = parseInt(Math.floor(ms / (60 )));
+						var Fen = parseInt(Math.floor(ms %60 ));
+						this.showtime[i]=(Hour>9?"":"0")+Hour+":"+(Fen>9?"":"0")+Fen
+						
+						console.log(ms)				
+					}else{
+						this.showtime[i]="00:00";
+					}
+					
+					this.$forceUpdate()
+					
+				}
+			},
+			
 			getPercent(item){
 				var obj={
 					
@@ -157,7 +198,7 @@
 						if(ms>0){
 							var Hour = parseInt(Math.floor(ms / (60 * 60)));
 							var Fen = parseInt(Math.floor(ms % (60 * 60) / 60));
-							obj.value=Hour+":"+Fen
+							obj.value=(Hour>9?"":"0")+Hour+":"+(Fen>9?"":"0")+Fen
 						}
 					
 					}
@@ -240,11 +281,12 @@
 					}else{
 						uni.hideLoading()
 					}
-					if(this.list.length>0){
+					if(this.list.length>0&&this.setTimeoutId==""){
 						for(var i in this.list){
 							var item=this.list[i];
 							if(item.status==0||item.status==3){
-								setTimeout(()=>{
+								this.setTimeoutId=setTimeout(()=>{
+									this.setTimeoutId="";
 									this.f5()
 								},5*1000)
 							}
@@ -258,6 +300,7 @@
 				})
 			},
 			f5(bl) {
+				console.log("f5")
 				if(bl){
 					uni.showLoading({
 						title: "加载中",
@@ -280,6 +323,15 @@
 </script>
 
 <style lang="scss" scoped>
+	@import '@/static/font/jptime.css';
+	
+	.JPTIME1{
+		    position: relative;
+		    bottom: 170px;
+		    font-size: 40px;
+		    text-align: center;
+		    color: #eee;
+	}
 	.showmodel{
 		  margin-left: 20px;
 		   margin-right: 20px;

+ 1 - 0
static/font/iconfont.css

@@ -2,6 +2,7 @@
 	font-family: "custom-icon";
 	src:url('//at.alicdn.com/t/font_3140991_jqlw2xxtdk.woff2?t=1642217797275') format('woff2');
 }
+
 .custom-icon {
   font-family: "custom-icon" !important;
   font-size: 16px;

+ 7 - 0
static/font/jptime.css

@@ -0,0 +1,7 @@
+@font-face {
+	font-family: "JPTIME";
+	src:url("@/static/font/jptime.otf");
+}
+.JPTIME {
+    font-family: JPTIME
+}

TEMPAT SAMPAH
static/font/jptime.otf


TEMPAT SAMPAH
static/img/charge0.png


TEMPAT SAMPAH
static/img/charge3.png