Feat：康养页面

pkg_product/views/healthList.vue

@@ -1,20 +1,20 @@
 <template>
   <view class="pkg-product-list">
     <view class="first-half">
-      <view class="search-box flex jc-between ai-center">
-        <input
-          v-model="keyword"
-          type="text"
-          placeholder="搜索内容"
-          placeholder-style="color:#949494"
-          @confirm="searchClick"
-        >
+      <view class="search-box flex v12-justify-start ai-center">
         <image
           :src="webUrl+'/20220903142935869059.png'"
-          class="icon"
+          class="icon v12-mr-3"
           mode="scaleToFill"
           @click="searchClick"
         />
+        <input
+          v-model="keyword"
+          type="text"
+          placeholder="搜索城市"
+          placeholder-style="color:#949494"
+          @confirm="searchClick"
+        >
       </view>
       <swiper
         v-if="bannerList.length > 0"
@@ -36,7 +36,7 @@
           />
         </swiper-item>
       </swiper>
-      <view
+      <!-- <view
         v-show="tabIndex === 0"
         class="tab-box flex jc-center ai-center"
       >
@@ -65,6 +65,10 @@
           class="active"
           @click="changeTab(1)"
         />
+      </view> -->
+      <view class="v12-justify-start v12-align-center news-wrap v12-radius-100">
+        <view class="v12-font-bold v12-primary v12-white-text v12-mr-2 v12-pa-2 v12-radius-100 news-title">最新展会</view>
+        <view class="v12-font-28 v12-dark-text one-t" @click="toExpo">中国昆明第九届国际大健康暨养生养老博览会</view>
       </view>
     </view>
     <view class="body-box">
@@ -72,15 +76,16 @@
         <view
           v-for="(item, index) in asideList"
           :key="index"
-          :class="index === asideIndex ? 'active' : ''"
-          class="item flex jc-center ai-center"
-          @click="asideTap(index)"
+          :class="index === asideIndex ? 'actived' : ''"
+          class="item flex jc-center ai-center "
+          @click="asideTap(index, item.label)"
         >
           <text class="one-t">{{ item.label }}</text>
         </view>
       </view>
       <view class="article-box">
-        <scroll-view
+          <view class="v12-mt-2 v12-ml-3 v12-px-1 v12-font-28 v12-dark-text v12-font-bold label-wrap">{{ label }}</view>
+          <scroll-view
           v-if="dataList.length > 0"
           :style="{'height':listHeight}"
           :enable-flex="true"
@@ -169,7 +174,8 @@ export default {
       asideList: [],
       asideIndex: 0,
       dataList: [],
-      pageKeyId: Object.freeze('wellnessFoodIndex')
+      pageKeyId: Object.freeze('wellnessFoodIndex'),
+      label: ''
     }
   },
   onLoad() {
@@ -182,9 +188,15 @@ export default {
       })
       fetchCity(4).then(({data}) => {
         this.asideList = data.group
+        this.label = this.asideList[this.asideIndex].label
         this.searchReq()
       })
     },
+    toExpo() {
+      uni.navigateTo({
+        url: '/pkg_product/views/expoDetails'
+      })
+    },
     changeTab(index) {
       if (this.asideList.length === 0) return
       if (index === this.tabIndex) return
@@ -239,10 +251,11 @@ export default {
         }
       })
     },
-    asideTap(index) {
+    asideTap(index, label) {
       this.asideIndex = index
       this.page = 1
       this.dataList = []
+      this.label = label
       this.searchReq()
     },
     goStore(id) {
@@ -261,6 +274,19 @@ export default {
 
 <style scoped lang="less">
 @import "@/assets/css/product.less";
+.news-title{
+  white-space: nowrap;
+}
+.actived, .label-wrap{
+  border-left: 6rpx solid #C52733;
+  color: #C52733;
+  font-weight: bold;
+}
+.news-wrap{
+  background: rgba(233,233,233,0.39);
+  width: 686rpx;
+  margin: 0 auto;
+}
 
 .pkg-product-list {
   height: 100vh;