景徳镇旅游微信小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

158 lines
2.9 KiB

<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>