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.
250 lines
4.4 KiB
250 lines
4.4 KiB
<template>
|
|
<view>
|
|
<navbar title="我的收藏" leftClick @leftClick="leftClick" />
|
|
|
|
<view style="background-color: #fff;">
|
|
<uv-tabs :list="tabs"
|
|
lineColor="#B12026"
|
|
lineHeight="8rpx"
|
|
lineWidth="50rpx"
|
|
@click="clickTabs"></uv-tabs>
|
|
</view>
|
|
|
|
<hList :list="list">
|
|
<template
|
|
v-slot="{item,index}"
|
|
>
|
|
<view class="card"
|
|
@click="toUrl(item)"
|
|
>
|
|
<view class="card-img">
|
|
<image :src="item.roleHead
|
|
|| item.amusementImage
|
|
|| item.experienceImage
|
|
|| item.waresImage" mode="aspectFill"></image>
|
|
</view>
|
|
|
|
<view class="iconx">
|
|
<uv-icon
|
|
name="close-circle-fill"
|
|
size="40rpx"
|
|
@click="delModel(item)"
|
|
color="#B12026"></uv-icon>
|
|
</view>
|
|
|
|
<view class="card-content">
|
|
<view style="display: flex; align-items: center;">
|
|
<view class="title text-ellipsis">{{ item.roleName
|
|
|| item.amusementTitle
|
|
|| item.experienceTitle
|
|
|| item.waresTitle }}</view>
|
|
</view>
|
|
<view class="card-content-tag"
|
|
v-if="item.preTime || item.experienceOpentime">
|
|
{{ item.preTime
|
|
|| item.experienceOpentime
|
|
|| '提前一周预约' }}
|
|
</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
|
|
|| item.amusementPrice
|
|
|| item.experiencePrice
|
|
|| item.waresPrice}}起
|
|
</view>
|
|
<view class="card-content-bottom-one"
|
|
@click.stop="toPayUrl(item)">
|
|
￥线上预约
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</hList>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import mixinsList from '@/mixins/list.js'
|
|
import hList from '@/components/list/h-list.vue'
|
|
export default {
|
|
components : {
|
|
hList
|
|
},
|
|
mixins : [mixinsList],
|
|
data() {
|
|
return {
|
|
tabs: [
|
|
// {
|
|
// name: '文化遗产'
|
|
// },
|
|
{
|
|
name: '遗产讲述'
|
|
},
|
|
{
|
|
name: '达人同游'
|
|
},
|
|
{
|
|
name: '遗产路径'
|
|
},
|
|
{
|
|
name: '我要跟拍'
|
|
},
|
|
{
|
|
name: '非遗体验'
|
|
},
|
|
{
|
|
name: '我要研学'
|
|
},
|
|
{
|
|
name: '文创好物'
|
|
},
|
|
],
|
|
mixinsListApi : 'queryCollectionList',
|
|
options: [
|
|
{
|
|
text: '删除',
|
|
style: {
|
|
backgroundColor: '#FA5A0A'
|
|
}
|
|
},
|
|
],
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.queryParams.collectionType = 0
|
|
},
|
|
onShow() {
|
|
this.getData()
|
|
},
|
|
computed : {
|
|
|
|
},
|
|
methods: {
|
|
leftClick(){
|
|
uni.navigateBack(-1)
|
|
},
|
|
clickTabs({ index }){
|
|
this.queryParams.collectionType = index
|
|
this.getData()
|
|
},
|
|
toUrl(item){
|
|
|
|
},
|
|
delModel(item){
|
|
let self = this
|
|
uni.showModal({
|
|
title: '确认删除吗？',
|
|
success(r) {
|
|
if(!r.confirm){
|
|
return
|
|
}
|
|
self.$api('deleteCollection', {
|
|
collectionId : item.id
|
|
}, res => {
|
|
self.getData()
|
|
})
|
|
}
|
|
})
|
|
},
|
|
getData(){
|
|
this.$api(this.mixinsListApi, this.queryParams,
|
|
res => {
|
|
uni.stopPullDownRefresh()
|
|
if(res.code == 200){
|
|
this.list = res.result
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.card {
|
|
display: flex;
|
|
width: 710rpx;
|
|
margin: 40rpx 20rpx;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
.iconx{
|
|
position: absolute;
|
|
top: 0rpx;
|
|
right: 20rpx;
|
|
}
|
|
|
|
.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>
|