367 lines
8.5 KiB
Vue
367 lines
8.5 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- 占位符导航栏 -->
|
||
<navseat class="navbar" :opacity='opacitys' :title='titlename'></navseat>
|
||
<view class="onecontent">
|
||
<view :style="[{'padding-top':HeighT.customBar +44+'px'}]"></view>
|
||
<view class="onecontentabsolute flex-center">
|
||
<image class="onecontentabsoluteimage"
|
||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/dui.png" mode="aspectFill"></image>
|
||
<view class="onecontentabsolutebox flex-colum-start">
|
||
<text>支付成功！</text>
|
||
<text style="margin-top: 16rpx;font-size: 24rpx;">感谢您的购买</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="towcontent">
|
||
<view class="towcontentone">
|
||
￥75.00
|
||
</view>
|
||
<view class="towcontentow flex-between">
|
||
<view class="towcontentow_O">
|
||
订单编号：
|
||
</view>
|
||
<view class="towcontentow_T">
|
||
94789546123301
|
||
</view>
|
||
</view>
|
||
<view class="towcontentow flex-between">
|
||
<view class="towcontentow_O">
|
||
下单时间：
|
||
</view>
|
||
<view class="towcontentow_T">
|
||
2023-05-16 13:20:12
|
||
</view>
|
||
</view>
|
||
<view class="towcontentow flex-between">
|
||
<view class="towcontentow_O">
|
||
支付方式：
|
||
</view>
|
||
<view class="towcontentow_T">
|
||
微信支付
|
||
</view>
|
||
</view>
|
||
<view class="towcontenthere flex-colum">
|
||
<view class="towcontentherebox flex-center">
|
||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/yhj.png" mode=""></image>
|
||
<text>恭喜获得优惠券</text>
|
||
</view>
|
||
<view class="towcontenthereimage flex-colum">
|
||
<view class="towcontenthereimageone">
|
||
<text style="font-size:28rpx; color: #FF7C0D;">￥</text>
|
||
30.00
|
||
</view>
|
||
<view class="towcontenthereimagetow">
|
||
通用红包券
|
||
</view>
|
||
<view class="towcontenthereimagethere">
|
||
有效至 2024 07 11
|
||
</view>
|
||
<view class="towcontenthereimagefour">
|
||
限时红包变大 快来领取
|
||
</view>
|
||
<view class="towcontenthereimagefive flex-between">
|
||
<view class="towcontenthereimagefiveone">
|
||
我在想想
|
||
</view>
|
||
<view class="towcontenthereimagefivetow">
|
||
马上翻倍
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import navseat from '@/components/navseat.vue'
|
||
export default {
|
||
components: {
|
||
navseat
|
||
},
|
||
data() {
|
||
return {
|
||
titlename: '支付详情',
|
||
opacitys: false,
|
||
towcontentclickindex: 0,
|
||
windowHeight: '',
|
||
seighT: '',
|
||
customheighttop: '', //top高度
|
||
isFixedTop: false,
|
||
Topdistance: 3000, //吸顶初始距离
|
||
listbox: [{
|
||
name: '全部'
|
||
},
|
||
{
|
||
name: '美食正餐'
|
||
},
|
||
{
|
||
name: '饮品小吃'
|
||
}
|
||
],
|
||
form: {
|
||
address: '', //地址
|
||
type: '', //品类
|
||
orderBy: '', //1.理我最近 2.销量优先 3.价格优先
|
||
distance: '', //附近1KM 1选中 0不选中
|
||
page: 1, //页数
|
||
size: 10, //页容量
|
||
status: 'loadmore'
|
||
},
|
||
};
|
||
},
|
||
onPageScroll(e) {
|
||
if (e.scrollTop <= 44) { //搜索导航栏
|
||
this.opacitys = false
|
||
} else {
|
||
this.opacitys = true
|
||
}
|
||
if (e.scrollTop >= this.Topdistance) { //类别导航栏
|
||
this.isFixedTop = true
|
||
} else {
|
||
this.isFixedTop = false
|
||
}
|
||
},
|
||
onLoad() {
|
||
setTimeout(() => {
|
||
this.GetTop()
|
||
}, 1000)
|
||
},
|
||
computed: {
|
||
HeighT() { //手机类型的尺寸
|
||
return this.$store.getters.is_BarHeight
|
||
},
|
||
},
|
||
methods: {
|
||
//G滚动底部
|
||
loadMore(e) {
|
||
console.log(e)
|
||
},
|
||
//获取元素距离顶部的距离
|
||
GetTop() {
|
||
uni.getSystemInfo({
|
||
success: (data) => {
|
||
console.log(data)
|
||
this.windowHeight = data.windowHeight - data.statusBarHeight //总高度
|
||
// #ifdef MP-WEIXIN
|
||
const custom = wx.getMenuButtonBoundingClientRect()
|
||
this.seighT = data.windowHeight - custom.height - custom.top;
|
||
console.log(custom)
|
||
this.customheighttop = custom.height + custom.top
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
this.customheighttop = data.statusBarHeight / 2
|
||
this.seighT = data.windowHeight - data.statusBarHeight / 2
|
||
// #endif
|
||
this.$u.getRect('.towcontentlistxitembt').then(res => {
|
||
this.seighT = this.seighT - res.height //高度
|
||
})
|
||
this.$u.getRect('.towcontentlistxitem').then(res => {
|
||
this.Topdistance = res.top - this.HeighT.heightBar //滚动距离 //滚动距离
|
||
this.seighT = this.seighT - res.height //高度
|
||
console.log(res)
|
||
})
|
||
|
||
}
|
||
})
|
||
},
|
||
towcontentclick(index) {
|
||
this.towcontentclickindex = index
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
page {}
|
||
|
||
.content {
|
||
|
||
|
||
.onecontent {
|
||
position: relative;
|
||
z-index: 99;
|
||
width: 100%;
|
||
// #ifdef APP-PLUS || H5
|
||
height: 498.1rpx;
|
||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/successful.png) no-repeat;
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/successfules.png) no-repeat;
|
||
height: 586rpx;
|
||
// #endif
|
||
background-size: cover;
|
||
|
||
.onecontentabsolute {
|
||
position: absolute;
|
||
width: 100%;
|
||
margin-top: 50rpx;
|
||
|
||
.onecontentabsoluteimage {
|
||
width: 98.53rpx;
|
||
height: 93.63rpx;
|
||
}
|
||
|
||
.onecontentabsolutebox {
|
||
margin-left: 42rpx;
|
||
|
||
text {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.towcontent {
|
||
position: relative;
|
||
z-index: 100;
|
||
top: -148rpx;
|
||
margin: 0 auto;
|
||
width: 630rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 0rpx 0rpx 24rpx 24rpx;
|
||
padding: 0 24rpx;
|
||
|
||
.towcontentone {
|
||
padding-top: 26rpx;
|
||
width: 100%;
|
||
text-align: center;
|
||
font-family: Roboto, Roboto;
|
||
font-weight: bold;
|
||
font-size: 44rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.towcontentow {
|
||
margin-top: 16rpx;
|
||
|
||
.towcontentow_O {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.towcontentow_T {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: bold;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.towcontenthere {
|
||
margin-top: 32rpx;
|
||
border-top: 1rpx dashed #E5E5E5;
|
||
|
||
.towcontentherebox {
|
||
margin-top: 48rpx;
|
||
|
||
image {
|
||
width: 38.48rpx;
|
||
height: 38.42rpx;
|
||
}
|
||
|
||
text {
|
||
margin-left: 16rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.towcontenthereimage {
|
||
margin-top: 48rpx;
|
||
width: 540rpx;
|
||
height: 498rpx;
|
||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/yhjs.png) no-repeat;
|
||
background-size: cover;
|
||
justify-content: flex-start;
|
||
|
||
.towcontenthereimageone {
|
||
margin-top: 54rpx;
|
||
font-family: Roboto, Roboto;
|
||
font-weight: bold;
|
||
font-size: 48rpx;
|
||
color: #FF7C0D;
|
||
}
|
||
|
||
.towcontenthereimagetow {
|
||
margin-top: 28rpx;
|
||
width: 184rpx;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
text-align: center;
|
||
background: rgba(255, 219, 151, 0.33);
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: bold;
|
||
font-size: 24rpx;
|
||
color: #C7620E;
|
||
}
|
||
|
||
.towcontenthereimagethere {
|
||
margin-top: 8rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: bold;
|
||
font-size: 20rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.towcontenthereimagefour {
|
||
margin-top: 74rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.towcontenthereimagefive {
|
||
margin-top: 40rpx;
|
||
|
||
.towcontenthereimagefiveone {
|
||
padding: 12rpx 28rpx;
|
||
background: #FFF6D8;
|
||
border-radius: 46rpx 46rpx 46rpx 46rpx;
|
||
border: 2rpx solid #FFE18F;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.towcontenthereimagefivetow {
|
||
margin-left: 16rpx;
|
||
padding: 12rpx 28rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
background: linear-gradient(178deg, #FFFF81 0%, rgba(255, 76, 59, 0.56) 100%);
|
||
box-shadow: 0rpx 4rpx 6rpx 2rpx rgba(222, 91, 43, 0.65);
|
||
border-radius: 46rpx 46rpx 46rpx 46rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.towcontent::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: -14rpx;
|
||
left: -32rpx;
|
||
width: 694rpx;
|
||
height: 14rpx;
|
||
background: #FFA556;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
}
|
||
|
||
}
|
||
</style> |