支付成功
This commit is contained in:
魏啾
266
pages/order/successful.vue
Normal file
266
pages/order/successful.vue
Normal file
@@ -0,0 +1,266 @@
|
||||
<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>
|
||||
</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: 32rpx;
|
||||
image{
|
||||
width: 38.48rpx;
|
||||
height: 38.42rpx;
|
||||
}
|
||||
text{
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
.towcontenthereimage{
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.towcontent::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -14rpx;
|
||||
left: -32rpx;
|
||||
width: 694rpx;
|
||||
height: 14rpx;
|
||||
background: #FFA556;
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user