<template>
<view class="page">
<u-navbar title="订单详情" :border-bottom="false" :background="bgc" title-color='#3D3D3D' back-icon-color="#3D3D3D"
title-size='36' height='44'></u-navbar>
<view class="shengyu">
剩余时长
</view>
<view class="time">
{{formattedTime}}
</view>
<view class="setmeal">
<view class="lt">
<image src="https://api.ccttiot.com/smartmeter/img/static/ujJcBAlIiMjakFEBQV8O" mode=""></image>
<view class="quan">
<view class="one">
{{detailobj.suitTime == undefined ? '--' : detailobj.suitTime}}小时
</view>
<view class="two">
套餐时长
</view>
</view>
</view>
<view class="cen"></view>
<view class="rt">
<image src="https://api.ccttiot.com/smartmeter/img/static/u9hyl89RRMfuvTFnuVbi" mode=""></image>
<view class="quan">
<view class="one">
{{detailobj.money == undefined ? '--' : detailobj.money}}元
</view>
<view class="two">
实付金额
</view>
</view>
</view>
</view>
<view class="list_item">
<view class="top">
<view class="bh">
设备编号：{{detailobj.deviceNo == undefined ? '--' : detailobj.deviceNo}}
</view>
<!-- <view class="wc">
已完成
</view> -->
</view>
<view class="item_xx">
<view class="">
订单号
</view>
<view class="">
{{detailobj.billNo == undefined ? '--' : detailobj.billNo}}
</view>
</view>
<view class="item_xx">
<view class="">
购买套餐：
</view>
<view class="">
{{detailobj.suitName == undefined ? '--' : detailobj.suitName}}
</view>
</view>
<view class="item_xx">
<view class="">
金额
</view>
<view class="">
￥{{detailobj.money == undefined ? '--' : detailobj.money}}
</view>
</view>
<view class="item_xx">
<view class="">
租借店铺：
</view>
<view class="">
{{detailobj.storeName == undefined ? '--' : detailobj.storeName}}
</view>
</view>
<view class="item_xx">
<view class="">
支付时间：
</view>
<view class="">
{{detailobj.payTime == undefined ? '--' : detailobj.payTime}}
</view>
</view>
</view>
<view class="guangg" @click="btnad">
<image :src="imgad" mode=""></image>
</view>
<view class="" style="position: fixed;top: 0;left: 0;width: 100%;height: 100vh;z-index: -1;">
<image style="width: 100%;height: 100vh;" src="https://api.ccttiot.com/smartmeter/img/static/u5AWkMT3khOhGPKrUPMH" mode=""></image>
</view>
</view>
</template>
<script>
export default {
data() {
return {
imgad:'',
detailobj:{},
billId:'',
timeday: '',
}
},
onLoad(option) {
if(option.billId){
this.billId = option.billId
this.getlist()
this.getad()
}else{
this.billId = option.id
this.getlist()
this.getad()
}
},
// 分享到好友（会话）
onShareAppMessage: function () {
return {
title: '创亿康',
path: '/pages/index/index'
}
},
// 分享到朋友圈
onShareTimeline: function () {
return {
title: '创亿康',
query: '',
path: '/pages/index/index'
}
},
computed: {
formattedTime() {
if (this.timeday.days > 0) {
// 只展示天和小时
return `${this.timeday.days}天${this.timeday.hours}小时`
} else if (this.timeday.hours > 0) {
// 展示小时和分钟
return `${this.timeday.hours}小时${this.timeday.minutes}分钟`
} else if (this.timeday.minutes > 0) {
// 展示分钟和秒
return `${this.timeday.minutes}分钟${this.timeday.seconds}秒`
} else {
// 展示秒或0（如果秒也为0）
return this.timeday.seconds > 0 ? `${this.timeday.seconds}秒` : '0'
}
}
},
methods: {
// 请求详情
getlist(){
this.$u.get(`/app/bill/${this.billId}`).then((res) => {
if (res.code == 200) {
this.detailobj = res.data
if (this.detailobj.suitExpireTime == null) {
this.timeday = 0
} else {
let expireTimeStr = this.detailobj.suitExpireTime
let expireTimeParts = expireTimeStr.split(" ")
let expireDateParts = expireTimeParts[0].split("-")
let expireTimePartsTime = expireTimeParts[1].split(":")
let expireDate = new Date(expireDateParts[0], expireDateParts[1] - 1, expireDateParts[
2], expireTimePartsTime[0], expireTimePartsTime[1], expireTimePartsTime[2])
let now = new Date()
let differenceInMs = expireDate - now;
if (differenceInMs <= 0) {
this.timeday = 0
} else {
if(this.timeday == ''){
this.timeday = this.formatMilliseconds(differenceInMs)
this.startTimer()
}
}
}
}
})
},
startTimer() {
this.timer = setInterval(() => {
if (this.timeday.seconds > 0) {
this.timeday.seconds--
} else if (this.timeday.minutes > 0) {
this.timeday.seconds = 59 // 重置秒数为59
this.timeday.minutes--
} else if (this.timeday.hours > 0) {
this.timeday.minutes = 59 // 重置分钟数为59
this.timeday.hours--
this.timeday.seconds = 0 // 同时重置秒数为0
} else if (this.timeday.days > 0) {
this.timeday.hours = 23 // 重置小时数为23
this.timeday.minutes = 59 // 重置分钟数为59
this.timeday.seconds = 0 // 重置秒数为0
this.timeday.days--
} else {
// 所有时间单位都已减为0，停止定时器
clearInterval(this.timer)
this.timer = null;
console.log('时间已到期')
}
}, 1000); // 每秒执行一次
},
formatMilliseconds(milliseconds) {
// 计算天数
let days = Math.floor(milliseconds / (1000 * 60 * 60 * 24))
// 计算剩余的小时数
let hours = Math.floor((milliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
// 计算剩余的分钟数
let minutes = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60))
// 计算剩余的秒数
let seconds = Math.floor((milliseconds % (1000 * 60)) / 1000)
// 返回一个对象，包含天、小时、分钟和秒
return {
days: days,
hours: hours,
minutes: minutes,
seconds: seconds
}
},
btnad() {
this.$u.get("/app/ad").then((res) => {
if (res.code == 200) {
if (res.data.urlType == 1) {
uni.navigateTo({
url: '/pages/webview?url=' + res.data.url
})
} else {
uni.navigateTo({
url: res.data.url
})
}
}
})
},
getad() {
this.$u.get("/app/ad").then((res) => {
if (res.code == 200) {
this.imgad = res.data.picture
}
})
},
}
}
</script>
<style lang="scss">
/deep/ .u-title {
padding-bottom: 15rpx;
}
/deep/ .u-icon__icon {
padding-bottom: 15rpx;
}
page {
background: #F4F5F7;
}
.page {
width: 750rpx;
height: 100vh;
overflow: hidden;
padding: 0 46rpx;
box-sizing: border-box;
.guangg {
margin-top: 30rpx;
margin-bottom: 10rpx;
image {
border-radius: 30rpx;
width: 100%;
height: 218rpx;
}
}
.list_item{
width: 658rpx;
height: 380rpx;
background: #FFFFFF;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
border-radius: 24rpx 24rpx 24rpx 24rpx;
margin: auto;
margin-top: 30rpx;
padding: 24rpx 30rpx;
box-sizing: border-box;
.top{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #D8D8D8;
padding-bottom: 20rpx;
box-sizing: border-box;
.bh{
font-size: 28rpx;
color: #3D3D3D;
}
.wc{
font-size: 28rpx;
color: #8883F0;
}
}
.bot{
margin-top: 22rpx;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 28rpx;
padding-top: 20rpx;
box-sizing: border-box;
border-top: 1px solid #D8D8D8;
.time{
font-size: 24rpx;
color: #808080;
}
.pagexq{
width: 142rpx;
height: 48rpx;
background: #8883F0;
border-radius: 26rpx 26rpx 26rpx 26rpx;
text-align: center;
line-height: 48rpx;
font-size: 24rpx;
color: #FFFFFF;
border-radius: 20rpx;
}
}
.item_xx{
margin-top: 22rpx;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 24rpx;
color: #3D3D3D;
}
}
.shengyu{
font-size: 40rpx;
color: #3D3D3D;
margin-top: 46rpx;
}
.time{
font-size: 48rpx;
color: #8883F0;
margin-top: 12rpx;
}
.setmeal{
margin-top: 38rpx;
width: 658rpx;
height: 150rpx;
background: rgba(136,131,240,0.1);
border-radius: 24rpx 24rpx 24rpx 24rpx;
border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.07999999821186066), rgba(156.31499379873276, 140.25000303983688, 255, 0.23999999463558197)) 2 2;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 42rpx;
box-sizing: border-box;
.cen{
width: 2rpx;
height: 108rpx;
border: 2rpx solid #8883F0;
opacity: 0.5;
}
.lt{
display: flex;
align-items: center;
text-align: center;
image{
width: 84rpx;
height: 84rpx;
margin-right: 30rpx;
}
.one{
font-size: 32rpx;
color: #3D3D3D;
}
.two{
font-size: 24rpx;
color: #3D3D3D;
margin-top: 8rpx;
}
}
.rt{
display: flex;
align-items: center;
text-align: center;
image{
width: 84rpx;
height: 84rpx;
margin-right: 30rpx;
}
.one{
font-size: 32rpx;
color: #3D3D3D;
}
.two{
font-size: 24rpx;
color: #3D3D3D;
margin-top: 8rpx;
}
}
}
}
</style>