root
/
school_uni
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

1

master
wangfukang 1 month ago
parent
a6d864e557
commit
8716b90916
1 changed files with 528 additions and 57 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 581
      package1/order/orderConfirm.vue

581
package1/order/orderConfirm.vue
View File

@ -1,32 +1,71 @@
<template>
<!-- 订单详情中间页 -->
<view class="page1">
<view class="title">
<view class="title-sreach">
<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
<uni-icons type="left" size="28"></uni-icons>
</view>
<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
订单状态
</view>
<view class="bg-orb bg-orb--one"></view>
<view class="bg-orb bg-orb--two"></view>
<view class="bg-grid"></view>
<view class="nav-bar" :style="{'padding-top': menuButtonInfo.top + 'px'}">
<view class="back-btn" @tap="back">
<uni-icons type="left" size="24" color="#123c35"></uni-icons>
</view>
<view class="title-name">支付完成</view>
<view class="nav-placeholder"></view>
</view>
<view class="content">
<view class="box1">
<view style="height: 70rpx;line-height: 70rpx;text-align: center;">
支付完成
<scroll-view class="content" scroll-y :show-scrollbar="false">
<view class="success-card">
<view class="success-glow"></view>
<view class="success-mark">
<view class="success-mark-inner">
<uni-icons type="checkmarkempty" size="36" color="#103b31"></uni-icons>
</view>
</view>
<view style="height: 90rpx;line-height: 90rpx;text-align: center;font-weight: 700;font-size: 30rpx;">
￥<text style="font-size: 60rpx;">{{amount == null?0:amount}}</text>
<view class="success-title">这一单安排好了</view>
<view class="success-subtitle">可以先逛逛校园里的其他小事，订单状态随时能回来查看</view>
<view class="amount-card">
<text class="amount-label">本次支付</text>
<view class="amount-value">
<text class="amount-symbol">￥</text>
<text>{{displayAmount}}</text>
</view>
</view>
<view style="height: 40rpx;text-align: center;color: red;">
点击可查看订单详情
<view class="order-btn" @tap="getorder">
<text>查看订单详情</text>
<uni-icons type="right" size="18" color="#103b31"></uni-icons>
</view>
</view>
<view class="btn" @tap="getorder">
查看订单详情
<view class="explore-head">
<view>
<view class="explore-title">下单后的校园下一站</view>
<view class="explore-subtitle">把常用功能放近一点，等单时随便看看</view>
</view>
<view class="explore-badge">随便看看</view>
</view>
</view>
<view class="feature-grid">
<view
class="feature-card"
:class="['feature-card--' + item.tone, {'feature-card--wide': item.wide}]"
v-for="(item,index) in featureList"
:key="item.key"
:style="{'animation-delay': (index * 0.08) + 's'}"
@tap="goFeature(item)"
>
<view class="feature-light"></view>
<view class="feature-top">
<view class="feature-icon">{{item.icon}}</view>
<view class="feature-tag">{{item.tag}}</view>
</view>
<view class="feature-name">{{item.name}}</view>
<view class="feature-desc">{{item.desc}}</view>
<view class="feature-action">
<text>{{item.action}}</text>
<text class="feature-arrow">›</text>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
@ -34,10 +73,78 @@
export default {
data() {
return {
menuButtonInfo: {},
menuButtonInfo: { top: 44 },
id:'',
groupId:'',
amount:0,
featureList: [{
key: 'delivery',
name: '顺路赚点佣金',
desc: '有空时接一单，把校园路程变成零花钱',
tag: '兼职',
icon: '赚',
action: '去看看',
tone: 'mint',
type: 'homeTab',
tabIndex: 1,
wide: true
}, {
key: 'planet',
name: '白嫖星球',
desc: '每天领星球券，看看今晚的小惊喜',
tag: '每日',
icon: '星',
action: '收星球券',
tone: 'lime',
url: '/package5/planet/index'
}, {
key: 'adventure',
name: '学院排位赛',
desc: '给学院冲榜，顺便看看今日排名奖励',
tag: '排位',
icon: '榜',
action: '去冲榜',
tone: 'orange',
url: '/package5/planet/adventure'
}, {
key: 'ie',
name: 'i/e 思想漂流',
desc: '找个同频的人，聊聊今天的灵感和情绪',
tag: '同频',
icon: '聊',
action: '漂一下',
tone: 'blue',
url: '/package4/ieBrowser/index',
wide: true
}, {
key: 'release',
name: '校园新鲜事',
desc: '看看大家在聊什么，也可以顺手找搭子',
tag: '热榜',
icon: '圈',
action: '看热议',
tone: 'pink',
type: 'homeTab',
tabIndex: 2
}, {
key: 'postList',
name: '闲置二手',
desc: '课本、数码、生活好物，逛逛同校鱼塘',
tag: '鱼塘',
icon: '物',
action: '淘一淘',
tone: 'green',
type: 'homeTab',
tabIndex: 3
}]
}
},
computed: {
displayAmount() {
const value = this.amount == null || this.amount === '' ? 0 : this.amount
const num = Number(value)
if (isNaN(num)) return value
return num.toFixed(2).replace(/\.00$/, '')
}
},
onLoad(option) {
@ -46,7 +153,7 @@
this.amount = option.amount
},
onShow() {
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect ? uni.getMenuButtonBoundingClientRect() : { top: 44 }
},
methods: {
getorder(){
@ -54,6 +161,17 @@
url: '/package1/order/orderDetail?id=' + this.id + '&groupId=' + this.groupId
});
},
goFeature(item) {
if (item.type == 'homeTab') {
uni.reLaunch({
url: '/pages/index/index?tabIndex=' + item.tabIndex
})
return
}
uni.navigateTo({
url: item.url
})
},
back() {
const pages = getCurrentPages();
if (pages.length > 1) {
@ -72,7 +190,7 @@
width: 100%;
height: 100%;
font-size: 24rpx;
background: #F5F8F5;
background: #F5FCF7;
color: #00231C;
}
@ -81,54 +199,407 @@
height: 100%;
font-size: 24rpx;
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 12% 4%, rgba(155, 255, 223, 0.5) 0, rgba(155, 255, 223, 0) 260rpx),
radial-gradient(circle at 92% 18%, rgba(255, 234, 165, 0.56) 0, rgba(255, 234, 165, 0) 300rpx),
linear-gradient(180deg, #effff8 0%, #f9fff4 40%, #f6fbff 100%);
}
.title{
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
width: 100%;
height: 54%;
.bg-orb {
position: absolute;
border-radius: 50%;
filter: blur(2rpx);
opacity: .8;
pointer-events: none;
animation: orbFloat 5.5s ease-in-out infinite;
}
.bg-orb--one {
top: 210rpx;
left: -80rpx;
width: 230rpx;
height: 230rpx;
background: rgba(83, 218, 178, .2);
}
.title-sreach{
.bg-orb--two {
right: -90rpx;
bottom: 170rpx;
width: 280rpx;
height: 280rpx;
background: rgba(255, 191, 118, .18);
animation-delay: .8s;
}
.bg-grid {
position: absolute;
top: 170rpx;
right: 28rpx;
width: 132rpx;
height: 132rpx;
background-image:
radial-gradient(circle, rgba(0, 35, 28, .12) 2rpx, transparent 3rpx);
background-size: 28rpx 28rpx;
opacity: .65;
pointer-events: none;
}
.nav-bar {
position: relative;
z-index: 2;
width: 100%;
display: flex;
height: 200rpx;
position: relative;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding-left: 28rpx;
padding-right: 28rpx;
height: 168rpx;
}
.back-btn{
position: absolute;
bottom: 0;
left: 0;
width: 70rpx;
height: 70rpx;
border-radius: 24rpx;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, .78);
box-shadow: 0 14rpx 36rpx rgba(23, 91, 72, .12);
backdrop-filter: blur(12rpx);
transition: transform .18s ease, opacity .18s ease;
}
.back-btn:active {
transform: scale(.94);
opacity: .82;
}
.title-name{
padding-top: 110rpx;
font-size: 36rpx;
font-size: 34rpx;
font-weight: 700;
flex: 1;
text-align: center;
letter-spacing: 2rpx;
}
.nav-placeholder {
width: 70rpx;
height: 70rpx;
}
.content{
position: relative;
z-index: 1;
height: calc(100% - 168rpx);
box-sizing: border-box;
padding: 10rpx 28rpx 44rpx;
}
.success-card {
position: relative;
overflow: hidden;
padding: 42rpx 34rpx 34rpx;
border-radius: 42rpx;
background: rgba(255, 255, 255, .86);
box-shadow: 0 28rpx 80rpx rgba(36, 117, 89, .16);
border: 1rpx solid rgba(255, 255, 255, .9);
backdrop-filter: blur(18rpx);
animation: cardIn .42s ease-out both;
}
.success-glow {
position: absolute;
top: 200rpx;
width: 95%;
margin-left: 2.5%;
}
.box1{
width: 95%;
margin: 0 auto 20rpx;
background: #fff;
border-radius: 20rpx;
padding: 20rpx;
}
.btn {
width: 95%;
height: 100rpx;
font-size: 32rpx;
top: -120rpx;
left: 50%;
width: 360rpx;
height: 360rpx;
margin-left: -180rpx;
border-radius: 50%;
background: radial-gradient(circle, rgba(130, 255, 190, .34), rgba(130, 255, 190, 0) 68%);
animation: glowBreath 3.2s ease-in-out infinite;
}
.success-mark {
position: relative;
width: 136rpx;
height: 136rpx;
margin: 0 auto 24rpx;
border-radius: 50%;
background: linear-gradient(135deg, #d8ff83, #9fffe6);
box-shadow: 0 18rpx 46rpx rgba(56, 197, 143, .26);
display: flex;
align-items: center;
justify-content: center;
animation: successPop .5s cubic-bezier(.2, 1.4, .42, 1) both;
}
.success-mark-inner {
width: 94rpx;
height: 94rpx;
border-radius: 50%;
background: rgba(255, 255, 255, .7);
display: flex;
align-items: center;
justify-content: center;
}
.success-title {
position: relative;
text-align: center;
font-size: 42rpx;
font-weight: 700;
background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
border-radius: 100rpx;
line-height: 100rpx;
letter-spacing: 1rpx;
}
.success-subtitle {
position: relative;
width: 520rpx;
max-width: 100%;
margin: 16rpx auto 0;
line-height: 40rpx;
text-align: center;
margin: 40rpx auto;
color: #61746e;
font-size: 26rpx;
}
.amount-card {
position: relative;
margin: 32rpx auto 0;
padding: 24rpx 28rpx;
border-radius: 30rpx;
background: linear-gradient(135deg, rgba(246, 255, 229, .95), rgba(231, 255, 249, .95));
display: flex;
align-items: center;
justify-content: space-between;
}
.amount-label {
font-size: 25rpx;
color: #5f746e;
}
.amount-value {
font-size: 52rpx;
font-weight: 800;
color: #103b31;
line-height: 1;
}
.amount-symbol {
font-size: 28rpx;
margin-right: 4rpx;
}
.order-btn {
position: relative;
height: 96rpx;
margin-top: 28rpx;
border-radius: 999rpx;
background: linear-gradient(90deg, #e7ff92, #9effe8);
box-shadow: 0 16rpx 34rpx rgba(44, 199, 151, .22);
display: flex;
align-items: center;
justify-content: center;
gap: 8rpx;
font-size: 31rpx;
font-weight: 700;
transition: transform .18s ease, box-shadow .18s ease;
}
.order-btn:active {
transform: translateY(3rpx) scale(.98);
box-shadow: 0 8rpx 20rpx rgba(44, 199, 151, .2);
}
.explore-head {
margin: 38rpx 4rpx 22rpx;
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.explore-title {
font-size: 32rpx;
font-weight: 800;
color: #102d27;
}
.explore-subtitle {
margin-top: 8rpx;
font-size: 24rpx;
color: #7a8985;
}
.explore-badge {
flex-shrink: 0;
padding: 10rpx 18rpx;
border-radius: 999rpx;
background: rgba(255, 255, 255, .76);
color: #557067;
font-size: 22rpx;
box-shadow: 0 10rpx 28rpx rgba(24, 84, 69, .08);
}
.feature-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-bottom: 44rpx;
}
.feature-card {
position: relative;
overflow: hidden;
width: calc(50% - 12rpx);
min-height: 244rpx;
margin-bottom: 24rpx;
padding: 24rpx;
box-sizing: border-box;
border-radius: 34rpx;
background: rgba(255, 255, 255, .82);
border: 1rpx solid rgba(255, 255, 255, .88);
box-shadow: 0 20rpx 54rpx rgba(31, 91, 79, .12);
animation: featureFloat 4.6s ease-in-out infinite;
transition: transform .18s ease, box-shadow .18s ease;
}
.feature-card--wide {
width: 100%;
min-height: 214rpx;
}
.feature-card:active {
transform: scale(.97);
box-shadow: 0 12rpx 32rpx rgba(31, 91, 79, .1);
}
.feature-light {
position: absolute;
top: -70rpx;
right: -60rpx;
width: 220rpx;
height: 220rpx;
border-radius: 50%;
opacity: .7;
}
.feature-card--mint .feature-light { background: rgba(124, 255, 210, .42); }
.feature-card--lime .feature-light { background: rgba(221, 255, 128, .48); }
.feature-card--orange .feature-light { background: rgba(255, 198, 124, .46); }
.feature-card--blue .feature-light { background: rgba(142, 210, 255, .4); }
.feature-card--pink .feature-light { background: rgba(255, 174, 205, .38); }
.feature-card--green .feature-light { background: rgba(143, 235, 160, .38); }
.feature-top {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
}
.feature-icon {
width: 64rpx;
height: 64rpx;
border-radius: 22rpx;
background: rgba(255, 255, 255, .7);
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
font-weight: 800;
color: #133c34;
box-shadow: inset 0 0 0 1rpx rgba(255, 255, 255, .8);
}
.feature-tag {
padding: 8rpx 16rpx;
border-radius: 999rpx;
background: rgba(255, 255, 255, .62);
color: #61736d;
font-size: 21rpx;
}
.feature-name {
position: relative;
margin-top: 22rpx;
font-size: 31rpx;
font-weight: 800;
color: #102d27;
}
.feature-desc {
position: relative;
margin-top: 12rpx;
line-height: 34rpx;
font-size: 24rpx;
color: #6d7e79;
}
.feature-action {
position: relative;
margin-top: 18rpx;
display: flex;
align-items: center;
color: #14866c;
font-size: 24rpx;
font-weight: 700;
}
.feature-arrow {
margin-left: 8rpx;
font-size: 34rpx;
line-height: 24rpx;
}
@keyframes cardIn {
from {
opacity: 0;
transform: translateY(26rpx);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes successPop {
from {
opacity: 0;
transform: scale(.68);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes glowBreath {
0%, 100% {
transform: scale(.9);
opacity: .72;
}
50% {
transform: scale(1.08);
opacity: 1;
}
}
@keyframes featureFloat {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-8rpx);
}
}
@keyframes orbFloat {
0%, 100% {
transform: translate3d(0, 0, 0) scale(1);
}
50% {
transform: translate3d(20rpx, -18rpx, 0) scale(1.06);
}
}
</style>
Write Preview
Loading…
Cancel
Save