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