164 lines
3.2 KiB
Vue
164 lines
3.2 KiB
Vue
<template>
|
|
<view class="container">
|
|
<v-navigation-bar background-color="rgba(0,0,0,0)" title-color="#333" title="预约成功"></v-navigation-bar>
|
|
<view class="body">
|
|
<view class="card">
|
|
<view class="success">
|
|
<image class="successIcon" src="../../static/icons/success.png" mode="aspectFit"></image>
|
|
<text>预约成功</text>
|
|
</view>
|
|
|
|
<view class="orderInfo">
|
|
<view class="shopName">顺捷汽车维修搭电救援补胎中心</view>
|
|
<view class="baseInfo">
|
|
<image class="baseInfoIcon" src="../../static/icons/order-icon1.png" mode=""></image>
|
|
济南市历下区福瑞达历下护理院东南门旁
|
|
</view>
|
|
<view class="baseInfo">
|
|
<image class="baseInfoIcon" src="../../static/icons/order-icon2.png" mode=""></image>
|
|
15726506879
|
|
</view>
|
|
<view class="baseInfo">
|
|
<image class="baseInfoIcon" src="../../static/icons/order-icon3.png" mode=""></image>
|
|
汽车维修
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="footer">
|
|
<view class="showOrder" @click="showOrder">查看订单</view>
|
|
|
|
<view class="back" @click="back">完成</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import VNavigationBar from '@/components/VNavigationBar.vue'
|
|
|
|
export default {
|
|
components: {
|
|
VNavigationBar,
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
methods: {
|
|
back() {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
},
|
|
showOrder() {
|
|
uni.redirectTo({
|
|
url: '/pages/myReservation/myReservation'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.container {
|
|
height: 100%;
|
|
|
|
background: linear-gradient(180deg, #C1DEFF 0%, rgba(193, 222, 255, 0) 100%);
|
|
background-size: 100% 500rpx;
|
|
background-repeat: no-repeat;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.body {
|
|
flex: 1;
|
|
height: 0;
|
|
overflow: auto;
|
|
position: relative;
|
|
z-index: 1;
|
|
background: linear-gradient(180deg, rgba(193, 222, 255, 0) 0%, #f1f1f1 100%);
|
|
|
|
}
|
|
|
|
.card {
|
|
margin: 40rpx 32rpx;
|
|
padding: 60rpx 30rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
}
|
|
|
|
.success {
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
padding-bottom: 60rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
row-gap: 30rpx;
|
|
border-bottom: 1rpx solid #DDDDDD;
|
|
}
|
|
|
|
.successIcon {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
}
|
|
|
|
.orderInfo {
|
|
padding: 40rpx 0 60rpx;
|
|
}
|
|
|
|
.shopName {
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.baseInfo {
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
margin-top: 30rpx;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 12rpx;
|
|
|
|
.baseInfoIcon {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
}
|
|
}
|
|
.footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
row-gap: 40rpx;
|
|
|
|
.showOrder, .back {
|
|
width: 510rpx;
|
|
height: 76rpx;
|
|
border-radius: 38rpx 38rpx 38rpx 38rpx;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.showOrder {
|
|
background: #0174F6;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
.back {
|
|
border-radius: 38rpx 38rpx 38rpx 38rpx;
|
|
border: 2rpx solid #0174F6;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #0174F6;
|
|
}
|
|
}
|
|
}
|
|
</style> |