177 lines
3.5 KiB
Vue
177 lines
3.5 KiB
Vue
<template>
|
|
<s-layout title="预约成功" :bgStyle="{ color: '#fff' }">
|
|
<view class="main">
|
|
<view class="main-t">
|
|
<view class="img-t">
|
|
<image
|
|
src="https://zysc.fjptzykj.com:3000/shangcheng/ab5eb1046be1b2d98fbab61cd1925301725b7a6d2d263fc22ea1a788e39df38d.png"
|
|
class="img"></image>
|
|
</view>
|
|
<view class="img-b">
|
|
预约成功
|
|
</view>
|
|
</view>
|
|
<view class="main-b">
|
|
<view class="list">
|
|
<view class="name">姓名</view>
|
|
<view class="name-value">{{ item.name }}</view>
|
|
</view>
|
|
<view class="list">
|
|
<view class="name">电话</view>
|
|
<view class="name-value">{{ item.phone }}</view>
|
|
</view>
|
|
<view class="list">
|
|
<view class="name">预约门店</view>
|
|
<view class="name-value">{{item.brandId}}</view>
|
|
</view>
|
|
<view class="list">
|
|
<view class="name">项目套餐</view>
|
|
<view class="name-value">{{item.projectId}} {{ item.technicianId }}</view>
|
|
</view>
|
|
<view class="list">
|
|
<view class="name">预约时间</view>
|
|
<view class="name-value">{{ item.projectdayId }} {{item.timeId}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="btn" @click="sheep.$router.go('/pages/index/user')">
|
|
确认
|
|
</view>
|
|
</s-layout>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
ref,
|
|
computed,
|
|
onMounted
|
|
} from 'vue';
|
|
import {
|
|
onLoad
|
|
} from '@dcloudio/uni-app';
|
|
import request from '@/sheep/request';
|
|
import {
|
|
baseUrl,
|
|
apiPath
|
|
} from '@/sheep/config';
|
|
import sheep from '@/sheep';
|
|
export default {
|
|
setup() {
|
|
// 使用 ref 创建响应式数据
|
|
const memberId = ref(null);
|
|
const reservationList = ref([]);
|
|
const page = ref(1);
|
|
const limit = ref(10);
|
|
const totalPages = ref(1);
|
|
const item = ref({});
|
|
|
|
// 使用 computed 创建计算属性
|
|
const userInfo = computed(() => sheep.$store('user').userInfo);
|
|
memberId.value = userInfo.value.id;
|
|
|
|
// 使用 onMounted 生命周期钩子
|
|
onMounted(() => {
|
|
getList();
|
|
});
|
|
onLoad((options) => {
|
|
if (options) {
|
|
item.value = options;
|
|
console.log(item.value,"-------------------")
|
|
}
|
|
});
|
|
// 定义方法
|
|
function getList() {
|
|
request({
|
|
url: `${baseUrl}${apiPath}/h5/reservation/reservationInfo`,
|
|
method: 'GET',
|
|
custom: {
|
|
showLoading: false,
|
|
},
|
|
}).then((res) => {
|
|
reservationList.value = res.data;
|
|
});
|
|
}
|
|
|
|
// 将响应式数据和方法暴露给模板
|
|
return {
|
|
memberId,
|
|
reservationList,
|
|
page,
|
|
limit,
|
|
totalPages,
|
|
getList,
|
|
sheep,
|
|
item
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scope lang="scss">
|
|
.main {
|
|
background: white;
|
|
margin: 15px 15px;
|
|
border-radius: 12px;
|
|
padding-bottom: 10px;
|
|
|
|
.main-t {
|
|
.img-t {
|
|
padding-bottom: 20px;
|
|
|
|
.img {
|
|
width: 143px;
|
|
height: 106px;
|
|
display: block;
|
|
margin: 10px auto;
|
|
padding-top: 25px;
|
|
}
|
|
}
|
|
|
|
.img-b {
|
|
text-align: center;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
border-bottom: 1px solid rgba(233, 233, 233);
|
|
padding-bottom: 15px;
|
|
}
|
|
}
|
|
|
|
.main-b {
|
|
margin: 10px auto;
|
|
width: 90%;
|
|
margin-top: 40px;
|
|
|
|
.list {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
margin:10px 0;
|
|
.name {
|
|
font-size: 17px;
|
|
color: rgba(101, 101, 101);
|
|
}
|
|
|
|
.name-value {
|
|
font-size: 17px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
position: absolute;
|
|
bottom: 60px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
border-radius: 16px;
|
|
background: rgba(0, 149, 248);
|
|
text-align: center;
|
|
color: white;
|
|
width: 89%;
|
|
padding: 10px 0;
|
|
}
|
|
</style> |