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.
605 lines
13 KiB
605 lines
13 KiB
<template>
|
|
<view class="page1">
|
|
<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>
|
|
|
|
<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 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 class="order-btn" @tap="getorder">
|
|
<text>查看订单详情</text>
|
|
<uni-icons type="right" size="18" color="#103b31"></uni-icons>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="explore-head">
|
|
<view>
|
|
<view class="explore-title">下单后的校园下一站</view>
|
|
<view class="explore-subtitle">把常用功能放近一点，等单时随便看看</view>
|
|
</view>
|
|
<view class="explore-badge">随便看看</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>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
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) {
|
|
this.id = option.id
|
|
this.groupId = option.groupId
|
|
this.amount = option.amount
|
|
},
|
|
onShow() {
|
|
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect ? uni.getMenuButtonBoundingClientRect() : { top: 44 }
|
|
},
|
|
methods: {
|
|
getorder(){
|
|
uni.redirectTo({
|
|
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) {
|
|
uni.navigateBack();
|
|
} else {
|
|
uni.switchTab({ url: '/pages/index/index' });
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 24rpx;
|
|
background: #F5FCF7;
|
|
color: #00231C;
|
|
}
|
|
|
|
.page1 {
|
|
width: 100%;
|
|
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%);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
padding-left: 28rpx;
|
|
padding-right: 28rpx;
|
|
height: 168rpx;
|
|
}
|
|
|
|
.back-btn{
|
|
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{
|
|
font-size: 34rpx;
|
|
font-weight: 700;
|
|
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: -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;
|
|
letter-spacing: 1rpx;
|
|
}
|
|
|
|
.success-subtitle {
|
|
position: relative;
|
|
width: 520rpx;
|
|
max-width: 100%;
|
|
margin: 16rpx auto 0;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
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>
|