<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"
|
|
@click="clickTabs"></uv-tabs>
|
|
</view>
|
|
|
|
<view class="subscribe-list">
|
|
<view class="item"
|
|
v-for="(item, index) in list">
|
|
|
|
<!-- 主题 -->
|
|
<uv-cell :title="item.orderTitle"
|
|
:border="false">
|
|
<template #icon>
|
|
<text class="text">主题</text>
|
|
</template>
|
|
<template #value>
|
|
<text class="price">¥{{ item.orderPrice }}</text>
|
|
</template>
|
|
</uv-cell>
|
|
|
|
<!-- 日期 -->
|
|
<uv-cell
|
|
:border="false">
|
|
<template #icon>
|
|
<text class="text">日期</text>
|
|
</template>
|
|
<template #title>
|
|
<text class="time">{{ item.orderDate }}</text>
|
|
</template>
|
|
</uv-cell>
|
|
|
|
<!-- 时间 -->
|
|
<uv-cell
|
|
:border="false">
|
|
<template #icon>
|
|
<text class="text">时间</text>
|
|
</template>
|
|
<template #title>
|
|
<text class="time">{{ item.orderTime }}</text>
|
|
</template>
|
|
</uv-cell>
|
|
|
|
<!-- 电话 -->
|
|
<uv-cell
|
|
:border="false">
|
|
<template #icon>
|
|
<text class="text">电话</text>
|
|
</template>
|
|
<template #title>
|
|
<text class="phone">{{ item.orderPhone }}</text>
|
|
</template>
|
|
</uv-cell>
|
|
|
|
<view class="btns">
|
|
<view class="btn">
|
|
再次预约
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import mixinsList from '@/mixins/list.js'
|
|
export default {
|
|
mixins : [mixinsList],
|
|
data() {
|
|
return {
|
|
tabs: [
|
|
{
|
|
name: '路径定制'
|
|
},
|
|
{
|
|
name: '遗产讲述'
|
|
},
|
|
{
|
|
name: '达人同游'
|
|
},
|
|
{
|
|
name: '我要跟拍'
|
|
},
|
|
{
|
|
name: '非遗体验'
|
|
},
|
|
{
|
|
name: '我要研学'
|
|
},
|
|
],
|
|
mixinsListApi : 'queryOrderList',
|
|
list : [],
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.queryParams.orderType = 0
|
|
},
|
|
onShow() {
|
|
this.getData()
|
|
},
|
|
methods: {
|
|
//点击tab栏
|
|
clickTabs({index}) {
|
|
this.queryParams.orderType = index;
|
|
this.getData()
|
|
},
|
|
}
|
|
}
|
|
</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>
|