景徳镇旅游微信小程序
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.
 
 
 

294 lines
5.9 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, tabs)"
>
<view class="card-img">
<image :src="item.roleHead
|| item.amusementImage
|| item.experienceImage
|| item.waresImage" mode="aspectFill"></image>
</view>
<view class="iconx"
@click.stop="delModel(item)">
<uv-icon
name="close-circle-fill"
size="40rpx"
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"
v-if="item.collectionType != 6 &&
item.collectionType != 2 || item.isPay == 1"
@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: '遗产讲述',
type : 'tell',
},
{
name: '达人同游',
type : 'travel',
},
{
name: '遗产路径',
type : 'path',
},
{
name: '我要跟拍',
type : 'follow',
},
{
name: '非遗体验',
type : 'experience',
},
{
name: '我要研学',
type : 'Study',
},
{
name: '文创好物',
},
],
type : [],
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){
let type = this.tabs[item.collectionType].type
if([0, 1, 3].includes(item.collectionType)){
// 遗产讲述、达人同游、我要跟拍
uni.navigateTo({
url: `/pages_order/service/reservationDetail?type=${type}&id=` + item.id
})
}else if([2, 5].includes(item.collectionType)){
// 遗产路径、我要研学
uni.navigateTo({
url: `/pages_order/service/StudyAndPathDetail?type=${type}&id=` + item.id
})
}else if([4].includes(item.collectionType)){
// 非遗体验
uni.navigateTo({
url: `/pages_order/service/articleDetail?type=${type}&id=` + item.id
})
}else if([6].includes(item.collectionType)){
// 文创好物
uni.navigateTo({
url: `/pages_order/product/productDetail?&id=` + item.id
})
}
},
delModel(item){
let self = this
uni.showModal({
title: '确认删除吗?',
success(r) {
if(!r.confirm){
return
}
self.$api('deleteCollection', {
collectionId : item.id,
collectionType : item.collectionType
}, res => {
self.getData()
})
}
})
},
getData(){
let queryParams = JSON.parse(JSON.stringify(this.queryParams))
this.$api(this.mixinsListApi, queryParams,
res => {
uni.stopPullDownRefresh()
if(res.code == 200){
res.result.forEach(n => {
n.collectionType = queryParams.collectionType
})
this.list = res.result
}
})
},
toPayUrl(item){
let type = this.tabs[item.collectionType].type
uni.navigateTo({
url: `/pages_order/order/orderSubscribe?type=${type}&id=` + item.id
})
},
}
}
</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>