179 lines
3.8 KiB
Vue
179 lines
3.8 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="shopName">{{info.corpName}}</view>
|
||
<view class="baseInfo">
|
||
<image class="baseInfoIcon" src="../../static/icons/order-icon1.png" mode=""></image>
|
||
<!-- 济南市历下区福瑞达历下护理院东南门旁 -->
|
||
{{info.address}}
|
||
</view>
|
||
<view class="baseInfo">
|
||
<image class="baseInfoIcon" src="../../static/icons/order-icon2.png" mode=""></image>
|
||
<!-- 15726506879 -->
|
||
{{info.mobilePhone}}
|
||
</view>
|
||
<view class="baseInfo">
|
||
<image class="baseInfoIcon" src="../../static/icons/order-icon3.png" mode=""></image>
|
||
<!-- 汽车维修 -->
|
||
{{info.serviceName || "维修"}}
|
||
</view>
|
||
<view class="baseInfo" @click="callPhone(info.adviserMobile)">
|
||
服务顾问：{{info.adviserName}} 联系电话：{{info.adviserMobile}}
|
||
</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 {
|
||
info: {}
|
||
};
|
||
},
|
||
onLoad(data) {
|
||
this.info = JSON.parse(decodeURIComponent(data.info))
|
||
},
|
||
methods: {
|
||
back() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
},
|
||
showOrder() {
|
||
uni.redirectTo({
|
||
url: '/pages/myReservation/myReservation'
|
||
})
|
||
},
|
||
callPhone(phone){
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone //仅为示例
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</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> |