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.
260 lines
6.6 KiB
260 lines
6.6 KiB
<template>
|
|
<view class="bg" :style="{backgroundColor:bgColor || '#F5F5F5'}">
|
|
<view class="titles">为您推荐</view>
|
|
<view class="goodBox" v-if="type == 0 && (list && list.length>0)">
|
|
<view>
|
|
<view class="goodItem" v-for="(item,index) in leftList" :key="item.id" @click="gotoDetail(item.id)">
|
|
<image :src="showImg(item.image)" mode="widthFix"></image>
|
|
<view class="goodContent">
|
|
<view class="title">
|
|
{{item.title}}
|
|
</view>
|
|
<view class="tags" v-if="item.label">
|
|
<view v-for="(tagItem,tagIndex) in item.label.split(',').slice(0,2)" :key="tagIndex" class="text-overflow">
|
|
{{tagItem}}
|
|
</view>
|
|
</view>
|
|
<view class="price">{{showPrice(item.price)}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<view class="goodItem" v-for="(item,index) in rightList" :key="item.id" @click="gotoDetail(item.id)">
|
|
<image :src="showImg(item.image)" mode="widthFix"></image>
|
|
<view class="goodContent">
|
|
<view class="title">
|
|
{{item.title}}
|
|
</view>
|
|
<view class="tags" v-if="item.label">
|
|
<view v-for="(tagItem,tagIndex) in item.label.split(',').slice(0,2)" :key="tagIndex" class="text-overflow">
|
|
{{tagItem}}
|
|
</view>
|
|
</view>
|
|
<view class="price">{{showPrice(item.price)}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="goodBox" v-if="type == 1 && (list && list.length>0)">
|
|
<view>
|
|
<view class="goodItem" v-for="(item,index) in leftList" :key="item.id" @click="gotoDetail(item.goods.id)">
|
|
<image :src="showImg(item.goods.image)" mode="widthFix"></image>
|
|
<view class="goodContent">
|
|
<view class="title">
|
|
{{item.goods.title}}
|
|
</view>
|
|
<view class="tags" v-if="item.goods.label">
|
|
<view v-for="(tagItem,tagIndex) in item.goods.goods_new_tag.split(',').slice(0,2)" :key="tagIndex" class="text-overflow">
|
|
{{tagItem}}
|
|
</view>
|
|
</view>
|
|
<view class="price">{{showPrice(item.goods.price)}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<view class="goodItem" v-for="(item,index) in rightList" :key="item.id" @click="gotoDetail(item.goods.id)">
|
|
<image :src="showImg(item.goods.image)" mode="widthFix"></image>
|
|
<view class="goodContent">
|
|
<view class="title">
|
|
{{item.goods.title}}
|
|
</view>
|
|
<view class="tags" v-if="item.goods.label">
|
|
<view v-for="(tagItem,tagIndex) in item.goods.goods_new_tag.split(',').slice(0,2)" :key="tagIndex" class="text-overflow">
|
|
{{tagItem}}
|
|
</view>
|
|
</view>
|
|
<view class="price">{{showPrice(item.goods.price)}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="finished-text" v-if="finished">没有更多数据了</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import Base from "@/components/Base";
|
|
export default{
|
|
extends: Base,
|
|
// type:0,scenic_type_id:1景点,5酒店11民宿12美食;type:1,文创特产,tag_id:6=邮寄,7=自提
|
|
props: ['scenic_type_id','tag_id','type','bgColor','exclude_id'],
|
|
data(){
|
|
return {
|
|
list: [],
|
|
leftList: [],
|
|
rightList: [],
|
|
finished: false
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
getList(){
|
|
if(this.type == 0){
|
|
this.Post({
|
|
method: 'POST',
|
|
scenic_type_id: this.scenic_type_id,
|
|
exclude_id: this.exclude_id,
|
|
offset: this.list.length,
|
|
limit: 6
|
|
},'/api/scenic/getScenicByType').then(res => {
|
|
res.data.forEach((item,index)=>{
|
|
if(index%2 == 0){
|
|
this.leftList.push(item)
|
|
}else{
|
|
this.rightList.push(item)
|
|
}
|
|
})
|
|
this.list = [...this.list, ...res.data];
|
|
if (res.data.length < 6) {
|
|
this.finished = true
|
|
}
|
|
})
|
|
}else{
|
|
this.Post({
|
|
method: 'POST',
|
|
type_id: 5,
|
|
exclude_id: this.exclude_id,
|
|
offset: this.list.length,
|
|
limit: 6,
|
|
tag_id: this.tag_id
|
|
},'/api/tag/getGoodsByTagId').then(res => {
|
|
res.data.forEach((item,index)=>{
|
|
if(index%2 == 0){
|
|
this.leftList.push(item)
|
|
}else{
|
|
this.rightList.push(item)
|
|
}
|
|
})
|
|
this.list = [...this.list, ...res.data];
|
|
if (res.data.length < 6) {
|
|
this.finished = true
|
|
}
|
|
})
|
|
}
|
|
},
|
|
gotoDetail(id){
|
|
if(this.scenic_type_id == 1){
|
|
uni.navigateTo({
|
|
url: '/subPackages/details/scenicDetails?id='+id
|
|
})
|
|
}else if(this.scenic_type_id == 5){
|
|
uni.navigateTo({
|
|
url: '/subPackages1/hotel/hotelDetails?id='+id
|
|
})
|
|
}else if(this.scenic_type_id == 11){
|
|
|
|
}else if(this.scenic_type_id == 12){
|
|
uni.navigateTo({
|
|
url: '/subPackages/details/eateryDetails?id='+id
|
|
})
|
|
}else if(this.tag_id == 6){
|
|
uni.navigateTo({
|
|
url: '/subPackages/details/goodDetails?type=1&id='+id
|
|
})
|
|
}else if(this.tag_id == 7){
|
|
uni.navigateTo({
|
|
url: '/subPackages/details/goodDetails?type=0&id='+id
|
|
})
|
|
}
|
|
}
|
|
},
|
|
onReachBottom() {
|
|
setTimeout(() => {
|
|
if (!this.finished) this.getList()
|
|
},1000)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.bg{
|
|
padding: 0 27rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.titles{
|
|
font-size: 36rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #000000;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
.goodBox{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.goodItem{
|
|
margin-bottom: 28rpx;
|
|
|
|
image{
|
|
width: 340rpx;
|
|
border-radius: 20rpx 20rpx 0px 0px;
|
|
box-shadow: 0px 0px 41rpx 0px rgba(51,51,51,0.1);
|
|
display: block;
|
|
}
|
|
|
|
.goodContent{
|
|
width: 340rpx;
|
|
height: 150rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 0 0 20rpx 20rpx;
|
|
padding: 13rpx;
|
|
box-sizing: border-box;
|
|
box-shadow: 0px 0px 20rpx 0px rgba(51,51,51,0.1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.title{
|
|
width: 286rpx;
|
|
font-size: 27rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #000000;
|
|
overflow-x: hidden;
|
|
overflow-y: inherit;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tags{
|
|
display: flex;
|
|
|
|
view{
|
|
max-width: 115rpx;
|
|
padding: 0 10rpx;
|
|
height: 30rpx;
|
|
border: 1rpx solid #00D7ED;
|
|
border-radius: 7rpx;
|
|
font-size: 23rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
color: #00D7ED;
|
|
text-align: center;
|
|
line-height: 30rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
}
|
|
|
|
.price{
|
|
font-size: 32rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #FF2D3B;
|
|
text-align: right;
|
|
}
|
|
.price::before{
|
|
content: "￥";
|
|
font-size: 20rpx;
|
|
}
|
|
.price::after{
|
|
content: "起";
|
|
font-size: 20rpx;
|
|
color: #8D8D8D;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|