jiazhipeng
4 months ago
8 changed files with 109 additions and 534 deletions
@ -0,0 +1,100 @@ |
|||
<template> |
|||
<view class="custom-tab-bar"> |
|||
<view class="tab-item" v-for="(item,i) in tabBarList" :key="i" @click="switchTab(i)"> |
|||
<text :style="{ 'color': currentTab === i?item.selectColor:'#fff' }">{{ item.text }}</text> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
currentTab: { |
|||
type: Number, |
|||
default: 0 |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
tabBarList: [ |
|||
{ |
|||
"pagePath": "pages/map/map", |
|||
"selectColor": "#00FF00", |
|||
"text": "首页" |
|||
}, |
|||
{ |
|||
"pagePath": "pages/coupon/coupon", |
|||
"selectColor": "#00FF00", |
|||
"text": "阅读体" |
|||
}, |
|||
{ |
|||
"pagePath": "pages/index/index", |
|||
"selectColor": "#00FF00", |
|||
"text": "有感商店" |
|||
}, |
|||
{ |
|||
"pagePath": "pages/cart/cart", |
|||
"selectColor": "#00FF00", |
|||
"text": "智能体" |
|||
}, |
|||
{ |
|||
"pagePath": "pages/user/user", |
|||
"selectColor": "#00FF00", |
|||
"text": "iSoul" |
|||
} |
|||
] |
|||
|
|||
}; |
|||
}, |
|||
onLoad() { |
|||
this.getCurrentTab(); |
|||
}, |
|||
methods: { |
|||
getCurrentTab() { |
|||
const pages = getCurrentPages(); |
|||
const currentPage = pages[pages.length - 1]; |
|||
const currentPath = currentPage.route; |
|||
tabBarList.forEach((item, index) => { |
|||
if (item.pagePath === currentPath) { |
|||
this.currentTab = index; |
|||
} |
|||
}); |
|||
}, |
|||
switchTab(index) { |
|||
if (this.currentTab === index) return; |
|||
uni.switchTab({ |
|||
url: '/' + tabBarList[index].pagePath |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.custom-tab-bar { |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
height: 123rpx; |
|||
z-index: 30; |
|||
background: #989898; |
|||
} |
|||
|
|||
.tab-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex: 1; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
|
|||
.tab-item text { |
|||
font-size: 24rpx; |
|||
} |
|||
</style> |
|||
@ -1,58 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<view class="searchBox flex-between"> |
|||
<view class="inputBox"> |
|||
<img src="https://static.ticket.sz-trip.com/taihu/images/scenic/searchGray.png" alt=""> |
|||
<view> |
|||
搜索你想要的产品 |
|||
</view> |
|||
</view> |
|||
<view class="btn"> |
|||
搜索 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.searchBox{ |
|||
width: 697rpx; |
|||
height: 67rpx; |
|||
background: rgba(242, 242, 242, .7); |
|||
border-radius: 33rpx; |
|||
margin: auto; |
|||
padding: 0 7rpx 0 29rpx; |
|||
box-sizing: border-box; |
|||
|
|||
.inputBox{ |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 31rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #999999; |
|||
|
|||
img{ |
|||
width: 28rpx; |
|||
height: 30rpx; |
|||
margin-right: 19rpx; |
|||
} |
|||
} |
|||
|
|||
.btn{ |
|||
width: 107rpx; |
|||
height: 53rpx; |
|||
background: #00D7ED; |
|||
border-radius: 27rpx; |
|||
text-align: center; |
|||
line-height: 53rpx; |
|||
font-size: 28rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,101 +0,0 @@ |
|||
<template> |
|||
<div class="title-header-box search" :style="{height:`${height}px`}"> |
|||
<div class="title-header" |
|||
:style="{height:`${height}px`,top:`${height+padHeight}px`,backgroundColor:bgColor || '#FFFFFF'}"> |
|||
<div class="search-box" :style="{backgroundColor:bgColor ? '#F2F2F2' : '#F2F2F2'}"> |
|||
<img src="https://static.ticket.sz-trip.com/taizhou/images/search.png" alt=""> |
|||
<input type="text" class="input" placeholder="请输入想要的产品或服务" v-model="keywords" @confirm="search" /> |
|||
<div class="btn" @click="search()">搜索</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "SearchHeader", |
|||
props: ['bgColor'], |
|||
data() { |
|||
return { |
|||
keywords: '', |
|||
padHeight: 0, |
|||
height: 88, |
|||
} |
|||
}, |
|||
methods: { |
|||
search() { |
|||
uni.$emit('search', { |
|||
keywords: this.keywords |
|||
}) |
|||
}, |
|||
}, |
|||
created() { |
|||
// #ifdef MP-WEIXIN |
|||
let systemInfo = uni.getSystemInfoSync(), |
|||
rect = uni.getMenuButtonBoundingClientRect(); |
|||
this.height = (rect.top - systemInfo.statusBarHeight) * 2 + rect.height |
|||
this.padHeight = systemInfo.statusBarHeight |
|||
// #endif |
|||
|
|||
// #ifdef APP-PLUS |
|||
let systemInfo = uni.getSystemInfoSync() |
|||
this.height = systemInfo.statusBarHeight*1.5 |
|||
this.padHeight = systemInfo.statusBarHeight |
|||
// #endif |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.title-header-box { |
|||
padding: 16rpx 0; |
|||
} |
|||
|
|||
.title-header { |
|||
padding: 16rpx 0; |
|||
width: 100%; |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
top: 0; |
|||
margin: auto; |
|||
z-index: 1000; |
|||
} |
|||
|
|||
.search-box { |
|||
width: 697rpx; |
|||
height: 68rpx; |
|||
margin: 0 auto; |
|||
border-radius: 60rpx; |
|||
padding: 6rpx 7rpx 6rpx 26rpx; |
|||
font-size: 26rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
background: #F2F2F2; |
|||
} |
|||
|
|||
.search-box img { |
|||
width: 28rpx; |
|||
height: 30rpx; |
|||
} |
|||
|
|||
.search-box .input { |
|||
flex: 1; |
|||
border: none; |
|||
outline: none; |
|||
background: none; |
|||
color: #000000; |
|||
margin: 0 20rpx; |
|||
background-color: #F2F2F2; |
|||
} |
|||
|
|||
.search-box .btn { |
|||
/* background-color: #FFC825; */ |
|||
border-radius: 27rpx; |
|||
font-size: 28rpx; |
|||
color: #FFFFFF; |
|||
padding: 10rpx 26rpx; |
|||
background-color: #00AAFF; |
|||
} |
|||
</style> |
|||
@ -1,99 +0,0 @@ |
|||
<template> |
|||
<view class="title-header-box" :style="{height:`${height+padHeight}px`}"> |
|||
<view class="title-header" :style="{paddingTop:`${padHeight}px`,height:`${height}px`}"> |
|||
<view class="left" @click="goBack" v-if="title !== '太湖'"><i class="iconfont"></i></view> |
|||
<view class="center">{{title ? title.substr(0,10) : '太湖'}}</view> |
|||
<view class="right"></view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "SearchHeader", |
|||
props: ['title', 'icon'], |
|||
watch: { |
|||
'title'(newVal, oldVal) { |
|||
this.title = newVal |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
keywords: '', |
|||
padHeight: 0, |
|||
height: 88 |
|||
} |
|||
}, |
|||
methods: { |
|||
search() { |
|||
uni.$emit('search', { |
|||
keywords: this.keywords |
|||
}) |
|||
}, |
|||
}, |
|||
created() { |
|||
let systemInfo = uni.getSystemInfoSync(), |
|||
rect = uni.getMenuButtonBoundingClientRect(); |
|||
let height = (rect.top - systemInfo.statusBarHeight) * 2 + rect.height |
|||
this.height = height |
|||
this.padHeight = systemInfo.statusBarHeight |
|||
this.right = (systemInfo.screenWidth - rect.right) + rect.width |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.title-header-box { |
|||
background-color: #F8F8F8; |
|||
color: #000000; |
|||
} |
|||
|
|||
.title-header { |
|||
/* background-color: #FFC825; */ |
|||
background: white; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
height: 88rpx; |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
top: 0; |
|||
z-index: 1000; |
|||
padding-top: 40rpx; |
|||
} |
|||
|
|||
.title-header .left { |
|||
padding-left: 30rpx; |
|||
width: 58rpx; |
|||
display: flex; |
|||
position: absolute; |
|||
left: 0; |
|||
} |
|||
|
|||
.title-header .search-box { |
|||
width: 502rpx; |
|||
height: 58rpx; |
|||
border-radius: 29rpx; |
|||
background: #F0F0F0; |
|||
padding: 0 26rpx; |
|||
font-size: 26rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.title-header .search-box .iconfont { |
|||
flex-shrink: 0; |
|||
color: #999999; |
|||
font-size: 30rpx; |
|||
margin-right: 10; |
|||
} |
|||
|
|||
.title-header .search-box .input { |
|||
flex: 1; |
|||
border: none; |
|||
outline: none; |
|||
background: none; |
|||
color: #666; |
|||
} |
|||
</style> |
|||
@ -1,260 +0,0 @@ |
|||
<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> |
|||
@ -1,12 +0,0 @@ |
|||
diff a/components/recommend.vue b/components/recommend.vue (rejected hunks) |
|||
@@ -142,9 +142,7 @@ |
|||
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){ |
|||
Loading…
Reference in new issue