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

pkg_product/views/heritage/details.vue

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

@@ -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> -->
+        </image>
-        <video :src="item.video" class="wiper-item" object-fit="cover"></video>
+        <!-- <video :src="item.video" class="wiper-item" object-fit="cover"></video> -->
-        <view class="title-link"  @click="toDetails(item)">
+        <view class="title-link"  @click="toDetails(item.ichContentId)">
           {{ item.name }}
-          <image
+          <u-icon name="arrow-right" color="#fff" size="14"></u-icon>
-            :src="webUrl + '/orderIcon/arrow.png'"
-            class="arrow-icon v12-ml-1"
-          ></image>
         </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
+              <u-icon name="arrow-right" color="#fff" size="14"></u-icon>
-                :src="webUrl + '/orderIcon/arrow.png'"
-                class="arrow-icon v12-ml-1"
-              ></image>  
             </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) {
+    toDetails(id) {
-      console.log(item);
       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;