This commit is contained in:
xvv 2024-09-18 14:13:55 +08:00
parent 1efffbf82c
commit c5e6351aa8
8 changed files with 243 additions and 39 deletions

View File

@ -185,8 +185,8 @@
{
"path": "orderSuccess/index",
"style": {
"navigationBarTitleText": "支付完成页",
"navigationStyle": "custom"
"navigationBarTitleText": "支付结果"
}
}
]
@ -355,4 +355,4 @@
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {}
}
}

View File

@ -1,12 +1,176 @@
<template>
<view class="centenr">
<view class="Candywrapper">
<view class="card_box">
<view class="r-size">储值卡</view>
<view style="margin-bottom: 10px;">当前余额</view>
<view class="r-num">123456.98</view>
</view>
<view class="tab-bs">
<view class="w_box" @click="show1 = true">类型筛选 <u-icon name="arrow-down-fill"></u-icon> </view>
<view class="w_box" @click="show = true">全部时间 <u-icon name="arrow-down-fill"></u-icon> </view>
</view>
<view class="bai_box">
<view class="left-img">
<image src="../../static/icon/hyxf.png" mode=""></image>
</view>
<view style="width: 85%;">
<view class="right-box">
<view class="l-text">会员消费</view>
<view class="r-text">-199.00</view>
</view>
<view class="right-box">
<view class="">储值卡</view>
<view class="">余额123456.98</view>
</view>
<view class="right-box">
<view class="">中建锦绣二期站</view>
<view class="">2024-09-09 16:45:09</view>
</view>
</view>
</view>
<view class="bai_box">
<view class="left-img">
<image src="../../static/icon/hycz.png" mode=""></image>
</view>
<view style="width: 85%;">
<view class="right-box">
<view class="l-text">会员消费</view>
<view class="r-text">-199.00</view>
</view>
<view class="right-box">
<view class="">储值卡</view>
<view class="">余额123456.98</view>
</view>
<view class="right-box">
<view class="">中建锦绣二期站</view>
<view class="">2024-09-09 16:45:09</view>
</view>
</view>
</view>
<u-datetime-picker :show="show" v-model="value1" mode="datetime" @cancel="cancel1"></u-datetime-picker>
<u-picker :show="show1" :columns="columns" @cancel="cancel"></u-picker>
</view>
</view>
</template>
<script>
export default {
data() {
return {
show: false,
show1: false,
value1: Number(new Date()),
columns: [
['中国', '美国', '日本']
],
}
},
methods: {
cancel() {
this.show1 = false
},
cancel1() {
this.show = false
}
}
}
</script>
<style scoped lang="scss">
.centenr {}
.centenr {
width: 100%;
height: 100vh;
background: #F9F9F9;
}
.Candywrapper {
background: #F9F9F9;
box-sizing: border-box;
padding: 10px;
}
.card_box {
width: 100%;
height: 90px;
background: url('../../static/imgs/topback.png') no-repeat;
background-size: 100% 100%;
box-sizing: border-box;
padding: 10px;
color: #fff;
font-size: 14px;
}
.r-size {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
}
.r-num {
font-weight: 600;
font-size: 20px;
color: #FFFFFF;
}
.tab-bs {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
margin: 15px auto;
}
.w_box {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 15px;
}
.bai_box {
width: 100%;
box-sizing: border-box;
padding: 15px 10px;
background: #fff;
display: flex;
align-items: center;
justify-content: space-between;
}
.left-img {
margin-right: 10px;
image {
width: 40px;
height: 40px;
}
}
.right-box {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
color: #666666;
}
.l-text {
font-size: 16px;
color: #333333;
margin-bottom: 5px;
font-weight: bold;
}
.r-text {
font-size: 16px;
color: #333333;
margin-bottom: 5px;
font-weight: bold;
}
</style>

View File

@ -25,7 +25,7 @@
<view class="or-aniu">立即充值</view>
</view>
<view class="b_box">
<view class="g-box">
<view class="g-box" @click="godetail()">
<view class="d-s">
<image src="../../static/new/k1.png" style="width: 20px; height: 20px;margin-right: 5px; "></image>
<view class="">余额明细</view>
@ -131,6 +131,11 @@
},
setIndex(index) {
this.windex = index
},
godetail() {
uni.navigateTo({
url: '/pagesHome/cardDetails/detailed'
})
}
}
}

View File

@ -1,25 +1,40 @@
<template>
<view class="content">
<view class="container">
<view class="my-header">
<!-- <view class="my-header">
<view class="my-icons" @click="goBack"> <uni-icons type="left" size="16"></uni-icons> </view>
<view class="my-text">支付完成</view>
<view class="my-icons"></view>
</view>
</view> -->
<view style="text-align: center;margin-top: 20px;">
<view style="margin: 0 auto;">
<image style="width: 60%;" src="@/static/imgs/paymentSuccess.png"></image>
<image src="../../static/icon/zfcg.png" style="width: 80px; height: 80px; "></image>
</view>
<view style="margin: 20px auto;font-size: 20px;color: #30a1ff;">支付成功</view>
<view style="color: gray">
您已完成支付<br/>
谢谢您对来个油惠的支持
<view style="margin: 20px auto;font-size: 16px;color: #22AF5B;">支付成功</view>
<view class="m_num">190.00</view>
<view class="m_bs">
<view class="">门店名称</view>
<view class="">中建锦绣二期站</view>
</view>
<view v-if="orderNo" @click="goOrderInfo" style="border: solid 1px #30a1ff;border-radius: 50px;margin: 20px auto;width: 150px;
height: 40px;line-height: 40px;color: #30a1ff;">{{timestamp}}s后去评价</view>
<view v-else @click="goBack" style="border: solid 1px #30a1ff;border-radius: 50px;margin: 20px auto;width: 150px;
height: 40px;line-height: 40px;color: #30a1ff;">{{timestamp}}s后返回首页</view>
<view class="x_"></view>
<view class="m_bs">
<view class="">交易类型</view>
<view class="">油品</view>
</view>
<view class="m_bs">
<view class="">支付方式</view>
<view class="">会员储值卡</view>
</view>
<view class="m_bs">
<view class="">流水编号</view>
<view class="">xxxxxxxxxxxxxxxx</view>
</view>
<view v-if="orderNo" @click="goOrderInfo" style="border: solid 1px #FA6400;margin: 20px auto;width: 70%;
height: 40px;line-height: 40px;color: #FA6400;">{{timestamp}}s后去评价</view>
<view v-else @click="goBack" style="border: solid 1px #FA6400;margin: 20px auto;width: 70%;
height: 40px;line-height: 40px;color: #FA6400;">{{timestamp}}s后返回首页</view>
</view>
</view>
</view>
@ -29,41 +44,41 @@
export default {
data() {
return {
timestamp:3,
timer:{},
orderNo:"",
timestamp: 3,
timer: {},
orderNo: "",
}
},
onLoad(e) {
if (e.orderNo){
if (e.orderNo) {
this.orderNo = e.orderNo
}
this.countdown()
// this.countdown()
},
methods: {
goOrderInfo(){
goOrderInfo() {
clearInterval(this.timer)
uni.navigateTo({
url: '/pagesMy/details/details?orderNo=' + this.orderNo,
})
},
//
countdown(){
countdown() {
let _this = this
this.timer = setInterval(() => {
// countdown1
_this.timestamp--;
// 0
if(_this.timestamp === 0) {
if (_this.orderNo){
// countdown1
_this.timestamp--;
// 0
if (_this.timestamp === 0) {
if (_this.orderNo) {
_this.goOrderInfo()
}else{
} else {
_this.goBack()
}
clearInterval(this.timer)
_this.timestamp = 3
}
}
}, 1000);
},
goBack() {
@ -81,14 +96,14 @@
.content {
background: white;
}
.container {
width: 100%;
height: 100vh;
box-sizing: border-box;
padding-top: 88px;
}
.my-header {
width: 100%;
height: 88px;
@ -100,13 +115,33 @@
box-sizing: border-box;
padding: 0px 15px;
padding-top: 40px;
.my-icons {
width: 20px;
}
position: fixed;
top: 0px;
}
.m_num {
font-size: 30px;
color: #333333;
}
.m_bs {
width: 100%;
box-sizing: border-box;
padding: 5px 15px;
display: flex;
align-items: center;
justify-content: space-between;
}
.x_ {
width: 95%;
border-bottom: 1px solid #EEEEEE;
margin: 5px auto;
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB