chenkainan
5 months ago
17 changed files with 1764 additions and 12 deletions
@ -0,0 +1,58 @@ |
|||||
|
<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> |
||||
@ -0,0 +1,101 @@ |
|||||
|
<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> |
||||
@ -0,0 +1,99 @@ |
|||||
|
<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> |
||||
@ -0,0 +1,260 @@ |
|||||
|
<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> |
||||
@ -0,0 +1,12 @@ |
|||||
|
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){ |
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,8 @@ |
|||||
|
<template> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
</style> |
||||
@ -0,0 +1,45 @@ |
|||||
|
// #ifdef H5
|
||||
|
export default { |
||||
|
name: 'Keypress', |
||||
|
props: { |
||||
|
disable: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
} |
||||
|
}, |
||||
|
mounted () { |
||||
|
const keyNames = { |
||||
|
esc: ['Esc', 'Escape'], |
||||
|
tab: 'Tab', |
||||
|
enter: 'Enter', |
||||
|
space: [' ', 'Spacebar'], |
||||
|
up: ['Up', 'ArrowUp'], |
||||
|
left: ['Left', 'ArrowLeft'], |
||||
|
right: ['Right', 'ArrowRight'], |
||||
|
down: ['Down', 'ArrowDown'], |
||||
|
delete: ['Backspace', 'Delete', 'Del'] |
||||
|
} |
||||
|
const listener = ($event) => { |
||||
|
if (this.disable) { |
||||
|
return |
||||
|
} |
||||
|
const keyName = Object.keys(keyNames).find(key => { |
||||
|
const keyName = $event.key |
||||
|
const value = keyNames[key] |
||||
|
return value === keyName || (Array.isArray(value) && value.includes(keyName)) |
||||
|
}) |
||||
|
if (keyName) { |
||||
|
// 避免和其他按键事件冲突
|
||||
|
setTimeout(() => { |
||||
|
this.$emit(keyName, {}) |
||||
|
}, 0) |
||||
|
} |
||||
|
} |
||||
|
document.addEventListener('keyup', listener) |
||||
|
this.$once('hook:beforeDestroy', () => { |
||||
|
document.removeEventListener('keyup', listener) |
||||
|
}) |
||||
|
}, |
||||
|
render: () => {} |
||||
|
} |
||||
|
// #endif
|
||||
File diff suppressed because it is too large
Loading…
Reference in new issue