liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: 非遗文化封面字段对接

Browse Source
This commit is contained in:
linxi
2024-11-15 17:53:13 +08:00
parent 5f9a6b358d
commit 43b81b5430
2 changed files with 57 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pkg_product/views/heritage/details.vue
+14 -4
View File
@@ -3,7 +3,10 @@
<view class="top-img">
<video class="top-img" :src="details.video"></video>
</view>
<view class="title-img"></view>
<view class="title-img">
<view></view>
<view class="v12-font-26 v12-font-bold v12-dark-text">{{ details.intro }}</view>
</view>
<view class="tabs v12-my-3 v12-font-32 v12-font-bold">
<view class="tab-btn" :class="{ 'v12-primary': actived === 1, 'v12-white-text': actived === 1 }" @click="handleTab(1)">{{details.pageA.title}}</view>
<view class="tab-btn v12-ml-3" :class="{ 'v12-primary': actived === 2, 'v12-white-text': actived === 2 }" @click="handleTab(2)">{{details.pageB.title}}</view>
@@ -25,7 +28,7 @@
</view>
<view class="pageB" v-if="actived === 2">
<view class="v12-d-grid-columns-2 card-wrap v12-mt-3">
<view class="card-item v12-white v12-radius-20" v-for="(item, index) in details.pageB.hotels" :key="index">
<view class="card-item v12-white v12-radius-20" v-for="(item, index) in details.pageB.hotels" :key="index" @click="toStore(item)">
<image class="card-item-img" :src="item.cover" mode="aspectFit|aspectFill|widthFix" lazy-load="false"></image>
<view class="more-t v12-font-28 v12-font-bold v12-px-2" style="height: 76rpx">
{{ item.hotelName }}
@@ -63,6 +66,11 @@ export default {
this.details = res.data || {}
})
},
toStore(item) {
uni.navigateTo({
url: '/pagesInn/inn/innHome?id=' + item.hotelId
})
}
}
}
</script>
@@ -92,7 +100,6 @@ export default {
.card-item-img{
width: 100%;
height: 320rpx;
background: rgba(73,16,16,0.39);
border-radius: 20rpx;
}
.intro{
@@ -114,9 +121,10 @@ export default {
justify-content: center;
}
.tab-btn{
width: 140rpx;
width: fit-content;
height: 66rpx;
border-radius: 36rpx;
padding: 0 20rpx;
text-align: center;
line-height: 66rpx;
background: rgba(221,210,190,0.39);
@@ -138,5 +146,7 @@ export default {
border-radius: 146rpx;
margin-top: 24rpx;
background: rgba(255,255,255,0.39);
padding: 60rpx;
box-sizing: border-box;
}
</style>
pkg_product/views/heritage/index.vue
+43 -23
View File
@@ -7,7 +7,18 @@
</swiper-item>
</swiper>
<view class="search-input"></view>
<view class="search-input">
<u-search
:showAction="false"
v-model="keyword"
placeholder="搜索"
searchIconColor="#C52733"
:customStyle="{
backgroundColor: 'rgba(255,255,255,0.7)',
borderRadius: '100rpx'
}"
@search="searchClick"></u-search>
</view>
</view>
<view class="v12-mt-6 tab-wrap">
<view class="tab-item" v-for="(item, index) in ichData.categories" :key="index" @click="handleTab(index, item)">
@@ -17,16 +28,13 @@
</view>
<view class="wiper-wrap v12-mt-3">
<view class="wiper-item" v-for="(item, index) in contents" :key="index">
<!-- <image class="" :src="" mode="aspectFit|aspectFill|widthFix" lazy-load="false" @error="" @load="">
<image class="wiper-item" :src="item.cover" mode="aspectFit|aspectFill|widthFix" lazy-load="false">
</image> -->
<video :src="item.video" class="wiper-item" object-fit="cover"></video>
<view class="title-link" @click="toDetails(item)">
</image>
<!-- <video :src="item.video" class="wiper-item" object-fit="cover"></video> -->
<view class="title-link" @click="toDetails(item.ichContentId)">
{{ item.name }}
<image
:src="webUrl + '/orderIcon/arrow.png'"
class="arrow-icon v12-ml-1"
></image>
<u-icon name="arrow-right" color="#fff" size="14"></u-icon>
</view>
</view>
</view>
@@ -45,16 +53,13 @@
</view>
<view class="v12-d-grid-columns-2 v12-mt-3">
<view class="recommend-item" v-for="(item, index) in recommendList" :key="index">
<image class="recommend-item image" :src="item.recommendImage" mode="heightFix|widthFix" lazy-load="false"> </image>
<image class="recommend-item image" :src="item.recommendImage" mode="aspectFit|aspectFill|widthFix" lazy-load="false"> </image>
<view class="recommend-item flex-item">
<view class="v12-font-24 v12-white-text"></view>
<view>
<view @click="toDetails(item)" class="item-name one-t v12-px-2 v12-white-border v12-white-text v12-font-32 v12-radius-100 v12-mb-3">
<view @click="toDetails(item.id)" class="item-name one-t v12-px-2 v12-white-border v12-white-text v12-font-32 v12-radius-100 v12-mb-3">
{{ item.name }}
<image
:src="webUrl + '/orderIcon/arrow.png'"
class="arrow-icon v12-ml-1"
></image>
<u-icon name="arrow-right" color="#fff" size="14"></u-icon>
</view>
<view class="v12-white-text v12-font-26 one-t">{{ item.intro }}</view>
</view>
@@ -74,7 +79,8 @@ export default {
id: '',
actived: 0,
contents: [],
recommendList: []
recommendList: [],
keyword: ''
}
},
onLoad(opts) {
@@ -82,6 +88,9 @@ export default {
this.getIchData()
},
methods: {
searchClick() {
this.getRecommend()
},
getIchData() {
getIch(this.id).then(res => {
this.ichData = res.data
@@ -92,7 +101,7 @@ export default {
getRecommend() {
const params = {
ichDataId: this.ichData.id,
keyword: ''
keyword: this.keyword
}
getIchRecommend(params).then(res => {
this.recommendList = res.data || []
@@ -102,10 +111,9 @@ export default {
this.actived = index
this.contents = item.contents
},
toDetails(item) {
console.log(item);
toDetails(id) {
uni.navigateTo({
url: '/pkg_product/views/heritage/details?id=' + item.ichContentId
url: '/pkg_product/views/heritage/details?id=' + id
})
}
}
@@ -113,6 +121,16 @@ export default {
</script>
<style lang="less" scoped>
.search-top{
position: relative;
}
.search-input{
position: absolute;
width: 100%;
bottom: 20rpx;
padding: 0 40rpx;
box-sizing: border-box;
}
.arrow-icon{
width: 24rpx;
height: 24rpx;
@@ -121,6 +139,8 @@ export default {
width: fit-content;
max-width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
}
.flex-item{
display: flex;
@@ -131,7 +151,7 @@ export default {
.recommend-item{
width: 342rpx;
height: 400rpx;
background: rgba(255,255,255,0.39);
// background: rgba(255,255,255,0.39);
border-radius: 20rpx;
position: relative;
box-sizing: border-box;
@@ -144,7 +164,7 @@ export default {
.title-link{
position: absolute;
width: fit-content;
background: rgba(255,255,255,0.4);
background: rgba(255,255,255,0.5);
border-radius: 100rpx;
bottom: 20rpx;
left: 0;
@@ -153,6 +173,7 @@ export default {
padding: 10rpx 20rpx;
color: #fff;
font-size: 28rpx;
display: flex;
}
.wiper-wrap{
display: flex;
@@ -161,7 +182,6 @@ export default {
.wiper-item{
width: 280rpx;
height: 400rpx;
background: rgba(255,255,255,0.39);
border-radius: 20rpx;
position: relative;
margin-right: 20rpx;