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.
167 lines
3.4 KiB
167 lines
3.4 KiB
<template>
|
|
<view>
|
|
<view class="card"
|
|
@click="toUrl(type, item)"
|
|
v-for="(item, index) in list" :key="index">
|
|
<view class="card-img">
|
|
<image src="../../static/applyRelic/jdz.png" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="card-content">
|
|
<view style="display: flex; align-items: center;">
|
|
<view class="title text-ellipsis">{{ item.roleName }}</view>
|
|
<image
|
|
class="card-content-img"
|
|
v-if="showRoleLevel"
|
|
:src="`../../static/tell/goldMedal${item.roleLevel}.png`"></image>
|
|
</view>
|
|
<view class="card-content-tag"
|
|
v-if="item.preTime">
|
|
{{ item.preTime || '提前一周预约' }}
|
|
</view>
|
|
<view class="tips text-ellipsis-2"
|
|
v-if="item.preInfo">
|
|
{{ item.preInfo}}
|
|
<!-- 御窑厂、刘家弄、观音阁、观音阁观音阁观音阁陶瓷博物馆御窑博物馆...陶瓷博物馆御窑博物馆陶瓷博物馆御窑博物馆陶瓷博物馆御窑博物馆 -->
|
|
</view>
|
|
<view class="card-content-bottom">
|
|
<view style="color: #FF280C;">
|
|
￥{{ item.price }}起
|
|
</view>
|
|
<view class="card-content-bottom-one">
|
|
￥线上预约
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props : {
|
|
type : {
|
|
default : 0
|
|
},
|
|
height : {
|
|
default : 'auto'
|
|
},
|
|
showRoleLevel : {
|
|
default : false,
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
queryParams: {
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
},
|
|
total : 0,
|
|
list : [],
|
|
}
|
|
},
|
|
methods: {
|
|
// 1-遗产讲述，2-达人同游，3-我要跟拍
|
|
getList(){
|
|
this.queryParams.pageNo = 1
|
|
this.$api('queryRoleInfoList', {
|
|
...this.queryParams,
|
|
roleId : pin + 1,
|
|
}, res => {
|
|
uni.stopPullDownRefresh()
|
|
if(res.code == 200){
|
|
this.list = res.result.records
|
|
this.total = res.result.total
|
|
}
|
|
})
|
|
},
|
|
loadMoreList(){
|
|
if(this.queryParams.pageSize < this.total){
|
|
this.queryParams.pageSize += 10
|
|
this.getList()
|
|
}
|
|
},
|
|
toUrl(type, item){
|
|
console.log(item.id);
|
|
let url = `/pages_order/service/reservationDetail?type=${type}&id=` + item.id
|
|
this.$utils.navigateTo(url)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.card {
|
|
display: flex;
|
|
width: 94%;
|
|
margin: 40rpx 0 0 3%;
|
|
align-items: center;
|
|
|
|
.card-img {
|
|
height: 270rpx;
|
|
width: 240rpx;
|
|
flex-shrink: 0;
|
|
image {
|
|
height: 100%;
|
|
width: 100%;
|
|
border-radius: 20rpx;
|
|
}
|
|
}
|
|
|
|
.card-content {
|
|
margin-left: 3%;
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
width: 97%;
|
|
|
|
.title{
|
|
max-width: 260rpx;
|
|
}
|
|
|
|
.card-content-img {
|
|
display: flex;
|
|
margin-left: 10rpx;
|
|
width: 130rpx;
|
|
height: 50rpx;
|
|
}
|
|
|
|
.card-content-tag {
|
|
display: inline-block;
|
|
font-size: 24rpx;
|
|
padding: 2rpx 20rpx;
|
|
border: 2rpx solid #FBA21E;
|
|
background-color: #FFF1D2;
|
|
color: #FBAF35;
|
|
border-radius: 20rpx;
|
|
width: fit-content;
|
|
}
|
|
|
|
.tips{
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.card-content-bottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.card-content-bottom-one {
|
|
display: inline-block;
|
|
color: #FFFDF6;
|
|
background-color: #C83741;
|
|
margin-right: 4%;
|
|
padding: 12rpx 30rpx;
|
|
border-radius: 40rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
}
|
|
|
|
view {
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|