提交 e2313032 编写于 作者: Y yyt

运动模块计时完成,finish界面布局完成

上级 a95d1c7e
......@@ -14,26 +14,27 @@
"style": {
"navigationStyle": "custom"
}
},
{
}, {
"path": "pages/my/my-setting",
"style": {
"navigationStyle": "custom"
}
},
{
}, {
"path": "pages/my/my-resetpassword",
"style": {
"navigationStyle": "custom"
}
},
{
}, {
"path": "pages/my/my-running-record",
"style": {
"navigationStyle": "custom"
}
}, {
"path": "pages/post/post",
"style": {
"navigationStyle": "custom"
}
},
{
}, {
"path": "pages/discover/main",
"style": {
"navigationStyle": "custom"
......@@ -116,18 +117,11 @@
"navigationStyle": "custom"
}
}, {
"path": "pages/my/main",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/post/add-post",
"style": {
"navigationStyle": "custom"
}
},
{
}, {
"path": "pages/post/post-detial",
"style": {
"navigationStyle": "custom"
......@@ -145,14 +139,10 @@
"height": "60px",
"iconWidth": "30px",
"list": [{
"pagePath": "pages/sport/main",
"text": "运动",
"iconPath": "static/tabbar/运动.png",
"selectedIconPath": "static/tabbar/运动2.png"
},
{
"pagePath": "pages/discover/main",
......
<template>
<view>
<view class="main">
<view class="modify">
<image class="modify-icon" src="/static/my/main/modify-icon.png" @click="goToModify()"></image>
</view>
......@@ -20,7 +17,6 @@
<view class="team-icon"></view>
<view class="team-name">运动小队:{{teamName}}</view>
</view>
</view>
</view>
<view>
......@@ -43,8 +39,6 @@
</view>
</view>
</view>
</view>
</view>
</template>
......@@ -83,7 +77,7 @@
getData() {
uniCloud.callFunction({
name: 'fe-my-information',
data: {userId:'6450da43e1a35c371b3699cc'}
data: {userId:'644a643a0c801ca878983559'}
})
.then(res => {
this.headPortraitIcon=res.result.data.icon,
......
......@@ -86,9 +86,7 @@
}],
color: "#00aa00", //线的颜色
arrowLine: true,
// borderWidth: 2
// color: "#33c9FFDD",
width: 10,
width: 20,
dottedLine: true
}],
markers: [{
......@@ -96,20 +94,20 @@
longitude: 121.44577861,
latitude: 37.48205260,
iconPath: '/static/sport/location.png',
rotate: 0,
width: 5, //宽
height: 10, //高
title: '开始位置' //标注点名
// rotate: 0,
// width: 5, //宽
// height: 10, //高
// title: '开始位置' //标注点名
},
{
id: 1,
longitude: 121.44820869,
latitude: 37.48330837,
iconPath: '/static/sport/location.png',
rotate: 0,
width: 5, //宽
height: 10, //高
title: '结束位置' //标注点名
// rotate: 0,
// width: 5, //宽
// height: 10, //高
// title: '结束位置' //标注点名
}
]
}
......@@ -127,6 +125,16 @@
},
onLoad() {
//传从运动界面传数据过来
var data=uni.getStorageSync('info')
var res=JSON.parse(data)
console.log(res)
this.polyline=res.polyline
this.markers[0].latitude=this.polyline[0].points[0].latitude
this.markers[0].longitude=this.polyline[0].points[0].longitude
this.markers[1].latitude=this.polyline[0].points[res.duration-1].latitude
this.markers[1].longitude=this.polyline[0].points[res.duration-1].longitude
this.latitude=this.markers[1].latitude
this.longitude=this.markers[1].longitude
const subNVue = uni.getSubNVueById('popup'); // 通过 id 获取 nvue 子窗体
subNVue.show('slide-in-top', 250); // 打开 nvue 子窗体
},
......
......@@ -36,9 +36,11 @@
start() {
this.checkOpenGPSServiceByAndroid()
if (this.location) {
uni.navigateTo({
url: './start'
});
uni.reLaunch({
url: '/pages/sport/start',
animationType: 'pop-in',
animationDuration: 300
})
}
},
// 位置授权
......
<template>
<view class="content">
<view class="time"></view>
<view class="distance">
<view class="digit">{{info.distance.toFixed(2)}}</view>
<view class="km">公里</view>
</view>
<view class="time">
<view class="hms">
{{parseInt(info.duration/3600).toString().padStart(2,0)}}:{{parseInt(info.duration%3600/60).toString().padStart(2,0)}}:{{(info.duration%60).toString().padStart(2,0)}}
</view>
<view class="text">用时</view>
</view>
<view class="button">
<image v-if="!is" class="start" :src="start" @click="click(2)"></image>
<image v-if="!is" class="finish" :src="finish" @click="click(3)"></image>
......@@ -13,18 +22,30 @@
<script>
export default {
onLoad() {
plus.navigator.setStatusBarBackground('#505051');
this.run()
this.startTime = this.getTime()
this.info.startTime = this.getTime()
},
data() {
return {
type: '跑步',
userId: '644a643a0c801ca878983559',
startTime: '',
duration: 0,
distance: 0.0,
pace: 11.11,
info: {
id: '',
type: '跑步',
userId: '644a643a0c801ca878983559',
startTime: '',
duration: 0,
distance: 0.0,
pace: 11.11,
polyline: [{
points: [],
color: "#00aa00", //线的颜色
arrowLine: true,
// borderWidth: 2
// color: "#33c9FFDD",
width: 10,
dottedLine: true
}]
},
timer: null, //定时器
is: true,
......@@ -33,21 +54,14 @@
finish: '/static/sport/finish.png',
latitude: 23.099994,
longitude: 113.324520,
polyline: [{
points: [],
color: "#0000AA", //线的颜色
width: 1 //线的宽度
}],
}
},
methods: {
run() {
this.timer = setInterval(() => {
// this.duration++
this.getLocationInfo()
//计算配速
}, 2000)
}, 1000)
},
click(index) {
if (index === 1) {
......@@ -63,28 +77,30 @@
this.is = true
//向后端传数据
var url
if (this.type === '跑步') {
if (this.info.type === '跑步') {
url = 'fe-sport-run-save'
} else {
url = 'fe-sport-walk-save'
}
uniCloud.callFunction({
name: 'fe-sport-run-save',
name: url,
data: {
userId: this.userId,
startTime: this.startTime,
duration: this.duration,
distance: this.distance,
pace: this.distance/this.duration/60,
startPoint: this.polyline[0].points[0],
endPoint: this.polyline[0].points[this.duration/2 - 1],
pathLine: this.polyline[0].points
userId: this.info.userId,
startTime: this.info.startTime,
duration: this.info.duration,
distance: this.info.distance,
pace: this.info.distance / this.info.duration / 60,
startPoint: this.info.polyline[0].points[0],
endPoint: this.info.polyline[0].points[this.duration - 1],
pathLine: this.info.polyline[0].points
}
})
.then(res => {
console.log(res)
this.info.id = res.result.data.id
console.log(this.info.id)
})
//跳转到结束页面
let item = JSON.stringify(this.info)
uni.setStorageSync('info', item)
uni.reLaunch({
url: '/pages/sport/finish',
animationType: 'pop-in',
......@@ -102,31 +118,30 @@
second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
month >= 1 && month <= 9 ? (month = "0" + month) : "";
day >= 0 && day <= 9 ? (day = "0" + day) : "";
var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
return timer;
var time = year + '/' + month + '/' + day + ' ' + hour + ':' + minute + ':' + second;
return time;
},
// 获取地理位置
getLocationInfo() {
let that = this;
that.duration+=2
let that = this.info;
let that1 = this;
that.duration++
uni.getLocation({
type: 'gcj02',
success: function(res) {
that.latitude = res.latitude
that.longitude = res.longitude
that1.latitude = res.latitude
that1.longitude = res.longitude
that.polyline[0].points.push({
latitude: that.latitude,
longitude: that.longitude
latitude: that1.latitude,
longitude: that1.longitude
})
if (that.duration >= 5) {
that.distance += that.GetDistance(
that.polyline[0].points[that.duration/2 - 2].latitude,
that.polyline[0].points[that.duration/2 - 2].longitude,
that.polyline[0].points[that.duration/2 - 1].latitude,
that.polyline[0].points[that.duration/2 - 1].longitude
if (that.duration >= 4) {
that.distance += that1.GetDistance(
that.polyline[0].points[that.duration - 2].latitude,
that.polyline[0].points[that.duration - 2].longitude,
that.polyline[0].points[that.duration - 1].latitude,
that.polyline[0].points[that.duration - 1].longitude
)
}
// console.log(that.polyline);
}
});
},
......@@ -164,17 +179,69 @@
margin-right: auto;
}
.distance {
position: relative;
color: white;
width: 100%;
height: 20%;
margin-top: 20%;
font-weight: 600;
}
.digit {
position: absolute;
font-size: 85px;
left: 50%;
top: 10%;
transform: translate(-50%, 0%);
}
.km {
position: absolute;
font-size: 28px;
left: 50%;
top: 75%;
transform: translate(-50%, 0%);
}
.time {
position: relative;
color: white;
width: 100%;
height: 20%;
margin-top: 15%;
font-weight: 600;
}
.hms {
position: absolute;
font-size: 45px;
left: 50%;
top: 10%;
transform: translate(-50%, 0%);
}
.text {
position: absolute;
font-size: 28px;
left: 50%;
top: 50%;
transform: translate(-50%, 0%);
}
.button {
background-color: ;
position: absolute;
margin-top: 120%;
margin-top: 125%;
width: 100%;
height: 200px;
}
.stop {
position: absolute;
top: 30px;
left: 28%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: 150px;
}
......@@ -182,7 +249,7 @@
.start {
position: absolute;
top: 40px;
left: 30px;
left: 34px;
width: 130px;
height: 130px;
}
......
......@@ -6,19 +6,19 @@
<text class="text">运动数据</text>
</view>
<view class="distance">
<text class="digit">1.04</text>
<text class="digit">{{info.distance.toFixed(2)}}</text>
<text class="km">公里</text>
</view>
<view class="info">
<text class="username">不知道叫啥</text>
<text class="username">{{username}}</text>
<text class="start-time">2023/03/29 17:44</text>
</view>
<view class="time">
<text class="first">00:04:25</text>
<text class="first">{{parseInt(info.duration/3600).toString().padStart(2,0)}}:{{parseInt(info.duration%3600/60).toString().padStart(2,0)}}:{{(info.duration%60).toString().padStart(2,0)}}</text>
<text class="second">用时</text>
</view>
<view class="speed">
<text class="first">04'35''</text>
<text class="first">{{info.pace}}</text>
<text class="second">平均配速</text>
</view>
</view>
......@@ -41,8 +41,15 @@
export default {
data() {
return {
username: '不知道叫啥',
icon: '/static/sport/icon.jpg',
info:{
distance: 1.02,
duration: 1234,
pace: 123
},
choose: false,
icon: '/static/sport/icon.jpg',
good: '/static/sport/good.png',
normal: '/static/sport/normal.png',
bad: '/static/sport/bad.png'
......@@ -59,7 +66,7 @@
this.bad = '/static/sport/bad1.png'
}
this.choose = true
}
},
......@@ -75,10 +82,10 @@
.icon {
position: absolute;
right: 105px;
width: 120px;
height: 120px;
top: 30px;
right: 55px;
width: 68px;
height: 68px;
top: 50px;
border-radius: 60%;
}
......@@ -86,24 +93,24 @@
position: relative;
background-color: white;
padding: 10px;
margin-left: 25px;
margin-top: 95px;
width: 320px;
height: 210px;
border-radius: 15px;
margin-left: 12px;
margin-top: 85px;
width: 335px;
height: 195px;
border-radius: 8px;
}
.distance {
position: absolute;
width: 300px;
height: 110px;
left: 55px;
top: 110px;
width: 160px;
height: 60px;
left: 15px;
top: 40px;
}
.digit {
position: absolute;
font-size: 90px;
font-size: 42px;
font-weight: 800;
bottom: 0px;
left: 15px;
......@@ -112,57 +119,56 @@
.km {
position: absolute;
font-size: 30px;
font-size: 18px;
font-weight: 400;
left: 220px;
bottom: 18px;
left: 110px;
bottom: 8px;
display: inline;
}
.info {
position: absolute;
width: 240px;
height: 110px;
right: 55px;
top: 100px;
width: 140px;
height: 90px;
right: 22px;
top: 45px;
}
.username {
position: absolute;
font-size: 35px;
font-size: 17px;
font-weight: 600;
top: 15px;
top: 10px;
right: 10px;
}
.start-time {
position: absolute;
font-size: 24px;
font-size: 12px;
font-weight: 500;
color: #6c6c6d;
right: 10px;
top: 70px;
top: 37px;
}
.time {
position: absolute;
width: 300px;
height: 180px;
left: 40px;
top: 250px;
width: 150px;
height: 90px;
left: 20px;
top: 110px;
}
.speed {
position: absolute;
width: 300px;
height: 180px;
width: 140px;
height: 90px;
right: 10px;
top: 250px;
top: 110px;
}
.first {
font-size: 50px;
font-size: 24px;
color: #6c6c6d;
font-weight: 600;
margin-top: 15px;
......@@ -170,35 +176,35 @@
}
.second {
font-size: 26px;
font-size: 14px;
font-weight: 500;
color: #6c6c6d;
margin-top: 10px;
margin-top: 5px;
text-align: center;
}
.block2 {
background-color: white;
padding: 10px;
margin-left: 25px;
margin-top: 30px;
width: 690px;
height: 310px;
border-radius: 15px;
margin-left: 12px;
margin-top: 13px;
width: 335px;
height: 145px;
border-radius: 8px;
}
.feeling {
position: absolute;
width: 300px;
width: 130px;
height: 50px;
left: 10px;
top: 30px;
left: 0px;
top: 13px;
}
.dot {
position: absolute;
color: #f1992d;
font-size: 20px;
font-size: 16px;
font-weight: 800;
top: 2px;
left: 15px;
......@@ -208,34 +214,34 @@
.text {
color: #6c6c6d;
position: absolute;
font-size: 35px;
font-size: 16px;
font-weight: 600;
left: 54px;
left: 34px;
top: 0px;
display: inline;
}
.pic {
position: absolute;
width: 600px;
height: 180px;
left: 45px;
top: 90px;
width: 280px;
height: 90px;
left: 25px;
top: 42px;
}
.good,
.bad,
.normal {
position: absolute;
width: 180px;
height: 180px;
width: 90px;
height: 90px;
}
.normal {
left: 212px;
left: 95px;
}
.bad {
left: 424px
right: 0px;
}
</style>
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册