<template>
|
|
<view class="page">
|
|
<!-- 我的预约 -->
|
|
<navbar title="我的预约" leftClick @leftClick="$utils.navigateBack" />
|
|
|
|
<view style="background-color: #fff;">
|
|
<uv-tabs :list="tabs"
|
|
lineColor="#B12026"
|
|
lineHeight="8rpx"
|
|
lineWidth="50rpx"
|
|
:scrollable="false"
|
|
@click="clickTabs"></uv-tabs>
|
|
</view>
|
|
|
|
<view class="subscribe-list">
|
|
<view class="item">
|
|
|
|
<!-- 主题 -->
|
|
<uv-cell title="景德镇一日游"
|
|
:border="false">
|
|
<template #icon>
|
|
<text class="text">主题</text>
|
|
</template>
|
|
<template #value>
|
|
<text class="price">¥199.0</text>
|
|
</template>
|
|
</uv-cell>
|
|
|
|
<!-- 时间 -->
|
|
<uv-cell
|
|
:border="false">
|
|
<template #icon>
|
|
<text class="text">时间</text>
|
|
</template>
|
|
<template #title>
|
|
<text class="time">2024-04-21</text>
|
|
</template>
|
|
</uv-cell>
|
|
|
|
<!-- 电话 -->
|
|
<uv-cell
|
|
:border="false">
|
|
<template #icon>
|
|
<text class="text">电话</text>
|
|
</template>
|
|
<template #title>
|
|
<text class="phone">15423451221</text>
|
|
</template>
|
|
</uv-cell>
|
|
|
|
<view class="btns">
|
|
<view class="btn">
|
|
再次预约
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
tabs: [{
|
|
name: '遗产路径'
|
|
},
|
|
{
|
|
name: '我要研学'
|
|
},
|
|
{
|
|
name: '文创好物'
|
|
},
|
|
],
|
|
}
|
|
},
|
|
methods: {
|
|
//点击tab栏
|
|
clickTabs(index) {
|
|
if (index == 0) {
|
|
this.state = -1;
|
|
} else {
|
|
this.state = index - 1;
|
|
}
|
|
this.getOrderList()
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.page {
|
|
.subscribe-list{
|
|
.item{
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
margin: 20rpx;
|
|
padding: 20rpx;
|
|
box-shadow: 0 0 16rpx 6rpx #00000011;
|
|
/deep/ text{
|
|
font-size: 26rpx;
|
|
color: #333333;
|
|
font-weight: 900;
|
|
}
|
|
/deep/ .text{
|
|
color: #B7BBC7;
|
|
margin-right: 20rpx;
|
|
font-size: 26rpx;
|
|
}
|
|
/deep/ .price{
|
|
color: #f40;
|
|
}
|
|
/deep/ .time{
|
|
color: $uni-color;
|
|
}
|
|
.btns{
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
.btn{
|
|
padding: 10px 30rpx;
|
|
font-size: 24rpx;
|
|
background-color: $uni-color;
|
|
color: #fff;
|
|
border-radius: 35rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|