You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
215 lines
4.8 KiB
215 lines
4.8 KiB
<template> |
|
<view> |
|
<Head title='订单详情' isfanhui='true' /> |
|
<view class="title_box"> |
|
<image :src='titleimg'></image> |
|
<text>{{title}}</text> |
|
<text v-if="types==1">剩余支付时间: {{min}}分{{sec}}秒</text> |
|
</view> |
|
<view class="shang_box"> |
|
<image src="../../static/bcimg/bc.jpeg"></image> |
|
<view> |
|
<text>2022龙门新城限量</text> |
|
<view> |
|
<view> |
|
<image src="../../static/tx.jpg"></image> |
|
</view> |
|
<text>琅琊天上</text> |
|
</view> |
|
<text>￥12800</text> |
|
</view> |
|
</view> |
|
<view class="xingxi"> |
|
<view v-for="item in school"> |
|
<view>{{item.typename}}</view> |
|
<text>{{item.value}}</text> |
|
</view> |
|
</view> |
|
<view v-if="types==1" class="button" @click="goumai"> |
|
继续支付 |
|
</view> |
|
<view v-if="types==1" class="quxiao"> |
|
取消订单 |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import Head from '@/components/head/head.vue' |
|
export default { |
|
components:{ |
|
Head |
|
}, |
|
data() { |
|
return { |
|
min: 30, |
|
sec: 0, |
|
now: "", |
|
end: "", |
|
school:[ |
|
{typename:'订单金额',value:'200元'}, |
|
{typename:'交易数量',value:'1'}, |
|
{typename:'创建时间',value:'2022-03-12 15:00:00'}, |
|
// {typename:'订单金额',value:'200元'}, |
|
// {typename:'订单金额',value:'200元'}, |
|
// {typename:'订单金额',value:'200元'}, |
|
// {typename:'订单金额',value:'200元'}, |
|
], |
|
types:1, |
|
title:'待付款', |
|
titleimg:'../../static/daifukuan.png' |
|
} |
|
}, |
|
onLoad:function(op){ |
|
//获取上一个页面传过来的值 |
|
// this.types=op.type |
|
//如果传过来的type是1则云端获取时间戳 |
|
this.end = new Date().getTime() + 5 * 60 * 1000; |
|
this.timeDown(); |
|
}, |
|
methods: { |
|
//倒计时 |
|
timeDown() { |
|
this.now = new Date().getTime(); |
|
if (this.now >= this.end) { |
|
this.min = 0; |
|
this.sec = 0; |
|
alert("已经超时，订单已经取消"); |
|
this.$router.back(); |
|
return; |
|
} |
|
// 用结束时间戳减去当前时间 |
|
const msec = this.end - this.now; |
|
let min = parseInt(msec / 1000 / 60); //算出分钟数 |
|
let sec = parseInt((msec / 1000) % 60); //算出秒数 |
|
// 给数据赋值 |
|
this.min = min > 9 ? min : "0" + min; |
|
this.sec = sec > 9 ? sec : "0" + sec; |
|
//定义this指向 |
|
const that = this; |
|
// 使用定时器 然后使用递归 让每一次函数能调用自己达到倒计时效果 |
|
setTimeout(function() { |
|
that.timeDown(); |
|
}, 1000); |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
.quxiao{ |
|
width: 690rpx; |
|
height: 80rpx; |
|
border: 1rpx solid #484848; |
|
border-radius:80rpx; |
|
margin: auto; |
|
margin-top: 30rpx; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
color: #bcbcbc; |
|
} |
|
.button{ |
|
width: 690rpx; |
|
height: 80rpx; |
|
margin: auto; |
|
margin-top: 50rpx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
font-weight: 500; |
|
border-radius: 40rpx; |
|
background: #77A1D3; /* fallback for old browsers */ |
|
background: -webkit-linear-gradient(to right, #e4b3e8, #5dfef4); /* Chrome 10-25, Safari 5.1-6 */ |
|
background: linear-gradient(to right, #e4b3e8, #5dfef4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ |
|
} |
|
.xingxi{ |
|
width: 690rpx; |
|
margin: auto; |
|
margin-top: 30rpx; |
|
padding: 0 30rpx; |
|
box-sizing: border-box; |
|
background-color: #262626; |
|
border-radius: 15rpx; |
|
color: #ffffff; |
|
>view{ |
|
display: flex; |
|
padding: 30rpx 0; |
|
border-bottom: 1rpx solid #3c3c3c; |
|
>view{ |
|
width: 150rpx; |
|
color: #ababab; |
|
} |
|
>text{ |
|
margin-left: 50rpx; |
|
} |
|
} |
|
>view:last-child{ |
|
border-bottom: none; |
|
} |
|
} |
|
.shang_box{ |
|
margin: auto; |
|
margin-top: 30rpx; |
|
padding: 30rpx; |
|
width: 690rpx; |
|
box-sizing: border-box; |
|
display: flex; |
|
background-color: #262626; |
|
border-radius:15rpx; |
|
>image{ |
|
width: 220rpx; |
|
height: 220rpx; |
|
border-radius: 15rpx; |
|
} |
|
>view{ |
|
color: #ffffff; |
|
margin-left: 30rpx; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: space-between; |
|
>view{ |
|
display: flex; |
|
color: #999999; |
|
>view{ |
|
width: 58rpx; |
|
height: 58rpx; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
border-radius: 50%; |
|
border: 1rpx solid #727171; |
|
margin-right: 15rpx; |
|
>image{ |
|
width: 48rpx; |
|
height: 48rpx; |
|
border-radius: 50%; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.title_box{ |
|
width: 100%; |
|
color: #ffffff; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
margin-top: 180rpx; |
|
>image{ |
|
width: 120rpx; |
|
height: 120rpx; |
|
} |
|
>text:nth-of-type(1){ |
|
margin-top: 20rpx; |
|
} |
|
>text:nth-of-type(2){ |
|
font-size: 27rpx; |
|
margin-top: 20rpx; |
|
color: #a8a8a8; |
|
} |
|
} |
|
page{ |
|
background-color: #1a1a1a; |
|
} |
|
</style>
|
|
|