Refactor：非遗文化重构

api/heritage.js

@@ -0,0 +1,29 @@
+import request from "@/utils/request";
+
+
+/**
+ * 省份非遗数据
+ * @param {*} id 
+ * @returns 
+ */
+export function getIch(id) {
+  return request.get("/ich/v2/" + id);
+}
+
+/**
+ * 省份非遗专题数据
+ * @param {*} id 
+ * @returns 
+ */
+export function getIchContent(id) {
+  return request.get("/ich/v2/content/" + id);
+}
+
+/**
+ * 获取省份非遗推荐数据
+ * @param {*} params 
+ * @returns 
+ */
+export function getIchRecommend(params) {
+  return request.get("/ich/v2/recommend", params);
+}

pages.json

@@ -598,6 +598,20 @@
             "navigationBarTitleText": ""
           }
         },
+        {
+          "path": "views/heritage/index",
+          "style": {
+            "navigationBarTitleText": "非遗文化",
+            "navigationBarBackgroundColor": "#FAEED8"
+          }
+        },
+        {
+          "path": "views/heritage/details",
+          "style": {
+            "navigationBarTitleText": "非遗文化",
+            "navigationBarBackgroundColor": "#FAEED8"
+          }
+        },
         {
           "path": "views/heritageVideo",
           "style": {

pagesInn/inn/innHome.vue

@@ -1022,6 +1022,7 @@ export default {
       font-size: 26rpx;
       line-height: 36rpx;
       color: #333333;
+      height: 70rpx;
     }
 
     .price-line {

pkg_product/views/heritage.vue

@@ -44,15 +44,15 @@ export default {
       // 1-视频，2-图文(可配置商品)，3-商品+视频
       if (item.type === 1) {
         uni.navigateTo({
-          url: '/pkg_product/views/heritageVideo?id=' + item.id
+          url: '/pkg_product/views/heritage/index?id=' + item.id
         })
       } else if (item.type === 2) {
         uni.navigateTo({
-          url: '/pkg_product/views/heritageGoods?id=' + item.id
+          url: '/pkg_product/views/heritage/index?id=' + item.id
         })
       } else if (item.type === 3) {
         uni.navigateTo({
-          url: '/pkg_product/views/heritageGoodAndVideo?id=' + item.id
+          url: '/pkg_product/views/heritage/index?id=' + item.id
         })
       }
     }
@@ -68,7 +68,7 @@ export default {
       <view class="item" :style="{'left':item.gx+'rpx','top':item.gy+'rpx'}" v-for="(item,index) in contents"
             :key="index" @click="goDetails(item)">
         <image class="img-item" :src="item.image"/>
-        <view class="title flex jc-center">{{ item.title }}</view>
+        <view class=" v12-text-center v12-white-text v12-primary v12-radius-80 v12-px-1 title">{{ item.title }}</view>
       </view>
     </view>
   </view>
@@ -87,10 +87,12 @@ export default {
       position: absolute;
       width: 160rpx;
       font-size: 24rpx;
-
+      display: flex;
+      flex-direction: column;
+      align-items: center;
       .title {
         position: relative;
-        width: 100%;
+        width: fit-content;
         white-space: nowrap;
       }
     }

pkg_product/views/heritage/details.vue

@@ -0,0 +1,142 @@
+<template>
+  <view class="details">
+    <view class="top-img">
+      <video class="top-img" :src="details.video"></video>
+    </view>
+    <view class="title-img"></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>
+    </view>
+    <view class="pageA" v-if="actived === 1">
+      <view class="intro">{{ details.pageA.content }}</view>
+      <view class="v12-d-grid-columns-2 card-wrap v12-mt-3">
+        <view class="card-item" v-for="(item, index) in details.pageA.images" :key="index">
+          <image class="card-item-img" :src="item.image" mode="aspectFit|aspectFill|widthFix" lazy-load="false"></image>
+          <view class="v12-justify-center">
+            《
+            <view class="one-t p-name">
+              {{ item.imageText }}
+            </view>
+            》
+          </view>
+        </view>
+      </view>
+    </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">
+          <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 }}
+          </view>
+          <view class="card-footer v12-pa-2">
+            <image class="footer-logo v12-mr-3" :src="item.logo" mode="aspectFit|aspectFill|widthFix" lazy-load="false"> </image>
+            <view class="v12-font-28 one-t name">{{ item.hotelName }}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { getIchContent } from '@/api/heritage'
+export default {
+  data() {
+    return {
+      actived: 1,
+      id: '',
+      details: {}
+    }
+  },
+  onLoad(opts) {
+    this.id = opts.id
+    this.getDetails()
+  },
+  methods: {
+    handleTab(index) {
+      this.actived = index
+    },
+    getDetails() {
+      getIchContent(this.id).then(res => {
+        this.details = res.data || {}
+      })
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.p-name{
+  max-width: 200rpx;
+  text-align: center;
+}
+.card-footer{
+  display: flex;
+  align-items: center;
+  .name{
+    width: 200rpx;
+  }
+}
+.footer-logo{
+  width: 60rpx;
+  height: 60rpx;
+  background: rgba(255,255,255,0.39);
+  border-radius: 50%;
+  border: 2px solid #707070;
+}
+.card-wrap{
+  grid-gap: 20rpx 20rpx;
+}
+.card-item-img{
+  width: 100%;
+  height: 320rpx;
+  background: rgba(73,16,16,0.39);
+  border-radius: 20rpx;
+}
+.intro{
+  width: 100%;
+  background: #FAEED8;
+  border-radius: 20rpx;
+  padding: 20rpx;
+  box-sizing: border-box;
+}
+.pageA{
+  width: 100%;
+  background: rgba(255,255,255,1);
+  border-radius: 20rpx;
+  padding: 20rpx;
+  box-sizing: border-box;
+}
+.tabs{
+  display: flex;
+  justify-content: center;
+}
+.tab-btn{
+  width: 140rpx;
+  height: 66rpx;
+  border-radius: 36rpx;
+  text-align: center;
+  line-height: 66rpx;
+  background: rgba(221,210,190,0.39);
+}
+.details{
+  min-height: 100vh;
+  padding: 20rpx;
+  background: #FAEED8;
+}
+.top-img{
+  width: 100%;
+  height: 400rpx;
+  background: rgba(255,255,255,0.39);
+  border-radius: 20rpx;
+}
+.title-img{
+  height: 146rpx;
+  width: 100%;
+  border-radius: 146rpx;
+  margin-top: 24rpx;
+  background: rgba(255,255,255,0.39);
+}
+</style>

pkg_product/views/heritage/index.vue

@@ -0,0 +1,206 @@
+<template>
+  <view class="heritage">
+    <view class="search-top">
+      <swiper class="swiper" disable-touch="true" touchable="false" :current="current">
+        <swiper-item class="search-bg" v-for="(item, index) in ichData.banners" :key="index">
+          <image class="search-bg" :src="item.image" autoplay mode="aspectFit|aspectFill|widthFix" lazy-load="false"></image>
+
+        </swiper-item>
+      </swiper>
+      <view class="search-input"></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)">
+        {{ item.categoryName }}
+        <view :class="{ 'line': actived === index }"></view>
+      </view>
+    </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> -->
+        <video :src="item.video" class="wiper-item" object-fit="cover"></video>
+        <view class="title-link"  @click="toDetails(item)">
+          {{ item.name }}
+          <image
+            :src="webUrl + '/orderIcon/arrow.png'"
+            class="arrow-icon v12-ml-1"
+          ></image>
+        </view>
+      </view>
+    </view>
+    <!-- <swiper style="height: 400rpx;" class="v12-justify-between swap v12-mt-3" autoplay circular next-margin="400rpx" duration="10000" interval="3000" >
+      <swiper-item v-for="(item, index) in contents" :key="index" >
+        <view class="wiper-wrap">
+          <view>
+            <video :src="item.video" class="wiper-item" object-fit="cover"></video>
+            <view class="title-link">{{ item.name }}</view>
+          </view>
+        </view>
+      </swiper-item>
+    </swiper> -->
+    <view class="v12-font-36 v12-dark-text v12-font-bold v12-mt-3 tab-item">推荐
+      <view class="line"></view>
+    </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>
+        <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">
+              {{ item.name }}
+              <image
+                :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>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { getIch, getIchRecommend } from '@/api/heritage'
+export default {
+  data() {
+    return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+      ichData: {},
+      id: '',
+      actived: 0,
+      contents: [],
+      recommendList: []
+    }
+  },
+  onLoad(opts) {
+    this.id = opts.id
+    this.getIchData()
+  },
+  methods: {
+    getIchData() {
+      getIch(this.id).then(res => {
+        this.ichData = res.data
+        this.contents = res.data.categories[0] && res.data.categories[0].contents || []
+        this.getRecommend()
+      })
+    },
+    getRecommend() {
+      const params = {
+        ichDataId: this.ichData.id,
+        keyword: ''
+      }
+      getIchRecommend(params).then(res => {
+        this.recommendList = res.data || []
+      })
+    },
+    handleTab(index, item) {
+      this.actived = index
+      this.contents = item.contents
+    },
+    toDetails(item) {
+      console.log(item);
+      uni.navigateTo({
+        url: '/pkg_product/views/heritage/details?id=' + item.ichContentId
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.arrow-icon{
+  width: 24rpx;
+  height: 24rpx;
+}
+.item-name{
+  width: fit-content;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+.flex-item{
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 20rpx;
+}
+.recommend-item{
+  width: 342rpx;
+  height: 400rpx;
+  background: rgba(255,255,255,0.39);
+  border-radius: 20rpx;
+  position: relative;
+  box-sizing: border-box;
+  .image{
+    position: absolute;
+    left: 0;
+    right: 0;
+  }
+}
+.title-link{
+  position: absolute;
+  width: fit-content;
+  background: rgba(255,255,255,0.4);
+  border-radius: 100rpx;
+  bottom: 20rpx;
+  left: 0;
+  right: 0;
+  margin: auto;
+  padding: 10rpx 20rpx;
+  color: #fff;
+  font-size: 28rpx;
+}
+.wiper-wrap{
+  display: flex;
+  overflow-y: scroll;
+}
+.wiper-item{
+  width: 280rpx;
+  height: 400rpx;
+  background: rgba(255,255,255,0.39);
+  border-radius: 20rpx;
+  position: relative;
+  margin-right: 20rpx;
+}
+.tab-wrap{
+  display: flex;
+  justify-content: flex-start;
+  overflow-x: scroll;
+}
+.tab-item{
+  font-weight: bold;
+  display: flex;
+  white-space: nowrap;
+  margin-right: 50rpx;
+  font-size: 36rpx;
+  width: fit-content;
+  position: relative;
+  .line{
+    width: 100%;
+    position: absolute;
+    height: 6rpx;
+    border-radius: 16rpx;
+    background: linear-gradient(to right, #C52733 0%, rgba(202,56,67,0.92) 51%, rgba(255,255,255,0) 100%);
+    bottom: 5rpx;
+  }
+}
+.tab-item:last-child{
+  margin-right: 0rpx;
+
+}
+.heritage{
+  min-height: 100vh;
+  background: #FAEED8;
+  padding: 20rpx;
+}
+.search-bg{
+  width: 100%;
+  height: 360rpx;
+  background: rgba(255,255,255,0.39);
+  border-radius: 20rpx;
+}
+</style>