移动端页面重绘

jialh

2024-12-11 cb5ecb1d5e80fe0b510e5dc229c02bd25a89153b

 pages/index/index.vue

@@ -2,67 +2,96 @@
   <view class="container">
      <header>
         <view class="left" @click="chooseLocation">
            <u-icon name="arrow-down" color="#fff"></u-icon>
            <text class="location">{{ address }}</text>
            <u-icon name="arrow-down" color="#fff"></u-icon>
         </view>
         <u-input class="search" placeholder="请输入感兴趣的政策内容" type="text" v-model="search" /> <u-button type="primary" shape="circle"
         <view class="logo">
            <image src="/static/index/rczd.png" mode=""></image>
         </view>
         <view class="search-box">
            <image src="/static/index/search.png" mode=""></image>
            <input class="search" placeholder="请输入感兴趣的政策内容" type="text" v-model="search"
               @confirm="getArticleDataList" />
            <!-- 在 UniApp 中，<input> 标签的 @keyup.enter 不会触发，使用 @confirm 事件替代。 -->
         </view>
         <view class="hot">
            <image src="/static/index/hot.png" alt="" />
            <view class="hot-msg">
               热搜：
               <text v-for="item in hotSearch" @click="chooseItem(item)" style="line-height: 30px;">
                  {{ item.length > 10 ? item.slice(0, 10) + '...' : item }}
               </text>
            </view>
         </view>
         <!-- <u-input class="search" 
               placeholder="请输入感兴趣的政策内容" 
               type="text" 
               v-model="search"  /> 
         <u-button type="primary" shape="circle"
            style="width: 100upx;margin-top: 20upx;" size="normal" text="搜索"
            @click="getArticleDataList()"></u-button>
            @click="getArticleDataList()"></u-button> -->
      </header>
      <view class="cate-section">
         <view class="cate-item" @click="gooriginalText()">
            <image src="/static/temp/c3.png"></image>
            <image src="/static/index/zcyw.png"></image>
            <text>政策原文</text>
         </view>
         <view class="cate-item" @click="goproject()">
            <image src="/static/temp/c5.png"></image>
            <image src="/static/index/zcxm.png"></image>
            <text>政策项目</text>
         </view>
         <view class="cate-item" @click="gofastMatch()">
            <image src="/static/temp/c6.png"></image>
            <image src="/static/index/zndc.png"></image>
            <text>智能洞察</text>
         </view>
         <view class="cate-item" @click="goprecise()">
            <image src="/static/temp/c7.png"></image>
            <image src="/static/index/zcbt.png"></image>
            <text>政策补贴</text>
         </view>
      </view>
      <view
         style="padding: 40upx;background-color: #fff;margin-top: 20upx;display: flex;justify-content: space-between;">
         <u-tabs :list="tabsList" @click="chooseArticleType" style="padding-left: 4px;" lineWidth="30"
            lineColor="#f56c6c" :activeStyle="{
               color: '#303133',
               fontWeight: 'bold',
               transform: 'scale(1.05)'
            }" :inactiveStyle="{
               color: '#606266',
               transform: 'scale(1)'
            }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
         </u-tabs>
         <view style="line-height: 70upx;color: #969799;font-size: 32upx;font-weight: 600;" @click="gooriginalText">
            更多</view>
      <view class="posters">
         <image src="/static/index/haibao.png" mode=""></image>
      </view>
      <view v-if="!loading &&  goodsList.length > 0"
         style="padding: 40upx;background-color: #fff;margin-top: 20upx;display: flex;justify-content: space-between;color: #969799;font-size: 28upx;">
         <view>
            <view class="goods-item" v-for="(item, index) in goodsList" :key="index"
               style="height: 80upx;line-height: 80upx;" @click="godetail(item)">
               <view>{{ item.ArticleTitle.length > 15 ? item.ArticleTitle.slice(0, 15) + '...' : item.ArticleTitle
                  }}</view>
      <view class="information">
         <view class="tabs">
            <u-tabs :list="tabsList" @click="chooseArticleType" style=" flex:1" lineWidth="30" lineColor="#6190E8"
               :activeStyle="{
                  color: '#6190E8',
                  fontWeight: 'bold',
                  transform: 'scale(1.05)'
               }" :inactiveStyle="{
                  color: '#606266',
                  transform: 'scale(1)'
               }" itemStyle="height: 34px;">
            </u-tabs>
            <view style="color: #969799;display: flex;align-items: center;" @click="gooriginalText">更多<u-icon
                  name="arrow-right"></u-icon></view>
         </view>
         <view v-if="!loading &&  goodsList.length > 0"
            style="padding:10upx 40upx;background-color: #fff;display: flex;justify-content: space-between;font-size: 28upx;">
            <view>
               <view class="goods-item" v-for="(item, index) in goodsList" :key="index"
                  style="height: 80upx;line-height: 80upx;" @click="godetail(item)">
                  <view>{{ item.ArticleTitle.length > 15 ? item.ArticleTitle.slice(0, 15) + '...' : item.ArticleTitle
                     }}</view>
               </view>
            </view>
            <view>
               <view class="goods-item" v-for="(item, index) in goodsList" :key="index"
                  style="height: 80upx;line-height: 80upx; color: #969799;" @click="godetail(item)">
                  <view>{{ item.PubTime ? item.PubTime.split(' ')[0] : item.PubTime }}</view>
               </view>
            </view>
         </view>
         <view>
            <view class="goods-item" v-for="(item, index) in goodsList" :key="index"
               style="height: 80upx;line-height: 80upx;" @click="godetail(item)">
               <view>{{ item.PubTime ? item.PubTime.split(' ')[0] : item.PubTime }}</view>
            </view>
         <view v-if="loading" style="margin-top: 100upx;">
            <u-loading-icon></u-loading-icon>
         </view>
         <u-empty v-if="!loading && goodsList.length == 0" mode="data"
            icon="http://cdn.uviewui.com/uview/empty/car.png">
         </u-empty>
      </view>
      <view v-if="loading" style="margin-top: 100upx;">
         <u-loading-icon></u-loading-icon>
      </view>
      <u-empty v-if="!loading && goodsList.length == 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/car.png">
      </u-empty>

      <!-- 筛地点 -->
      <u-popup :show="showLocation" :round="10" mode="bottom" @close="closeLocation" :closeable="true">
         <view style="padding: 40upx;display: flex;flex-wrap: wrap;">
            <view class="u-page__tag-item" v-for="(item, index) in locationList" :key="index">
@@ -76,212 +105,334 @@
</template>

<script>
export default {
   components: {
   },
   data() {
      return {
         search: '',
         titleNViewBackground: '',
         swiperCurrent: 0,
         swiperLength: 0,
         carouselList: [],
         goodsList: [],
         address: '上海市',
         showLocation: false,
         locationList: ['上海市', "苏州市"],
         tabsList: [
            {
               name: '综合',
               ArticleType: '',
            },
            {
               name: '申报通知',
               ArticleType: '申报通知'
   export default {
      components: {},
      data() {
         return {
            search: '',
            titleNViewBackground: '',
            swiperCurrent: 0,
            swiperLength: 0,
            carouselList: [],
            hotSearch: [],
            goodsList: [],
            address: '上海',
            showLocation: false,
            locationList: ['上海', "苏州"],
            tabsList: [{
                  name: '综合',
                  ArticleType: '',
               },
               {
                  name: '申报通知',
                  ArticleType: '申报通知'

            },
            {
               name: '公示公告',
               ArticleType: '公示公告'
            },
         ],
         ArticleType: '',
         loading: false,
               },
               {
                  name: '公示公告',
                  ArticleType: '公示公告'
               },
               {
                  name: '政策',
                  ArticleType: '政策'
               },
               {
                  name: '法规',
                  ArticleType: '法规'
               },
            ],
            ArticleType: '',
            loading: false,

      };
   },
   onLoad() {
      if (uni.getStorageSync('location')) {
         this.address = uni.getStorageSync('location')
      }
      this.getArticleDataList()
   },
   methods: {
      //选择地区 弹窗
      chooseLocation() {
         this.showLocation = true
         };
      },
      locationClick(name) {
         this.address = name
         uni.setStorageSync('location', name)
         this.getArticleDataList()
         this.showLocation = false
      },
      chooseArticleType(e) {
         console.log('item', e);
         this.ArticleType = e.ArticleType
         this.getArticleDataList()
      },
      // 
      getArticleDataList() {
         this.loading = true
         let data = {
            Platform: this.address,
            ArticleType: this.ArticleType,
            Scope: '',
            Keyword: this.search,
            PageNumber: 1,
            PageSize: 10,
            UserId: uni.getStorageSync('userId')
      onLoad() {
         if (uni.getStorageSync('location')) {
            this.address = uni.getStorageSync('location')
         }
         this.$http.post('/ArticleData/GetArticleDataList', data).then(res => {
            if (res.Check) {
               this.goodsList = res.Data.Data
               this.loading = false
            } else {
               this.$msg(res.Msg)
               this.goodsList = []
               this.loading = false
         this.getArticleDataList()
         this.GetSearchInfoListAll()
      },
      methods: {
         //选择地区 弹窗
         chooseLocation() {
            this.showLocation = true
         },
         locationClick(name) {
            this.address = name
            uni.setStorageSync('location', name)
            this.getArticleDataList()
            this.showLocation = false
         },
         chooseArticleType(e) {
            console.log('item', e);
            this.ArticleType = e.ArticleType
            this.getArticleDataList()
         },
         chooseItem(item) {
            this.search = item
            this.getArticleDataList()
         },
         //热搜
         GetSearchInfoListAll() {
            // this.loadingHot = false
            this.hotSearch = []
            let data = {
               UserId: -1
            }
         })
      },
      gooriginalText() {
         uni.navigateTo({
            url: '/pages/checkPolicies/originalText'
         })
      },
      godetail(item) {
         // 手机浏览器跳转
         window.open(item.ArticleUrl, "_blank");
      },
      goproject() {
         uni.navigateTo({
            url: '/pages/checkPolicies/project'
         })
      },
      gofastMatch() {
         uni.navigateTo({
            url: '/pages/policyMatching/fastMatch'
         })
      },
      goprecise() {
         uni.navigateTo({
            url: '/pages/policyMatching/precise'
         })
      },
      closeLocation() {
         this.showLocation = false;
            this.$http.post('/SearchInfo/GetSearchPolicyList', data).then(res => {
               if (res.Check) {
                  console.log("热搜===", res.Data);
                  this.hotSearch = res.Data
                  // this.loadingHot = true
               } else {
                  this.hotSearch = []
                  // this.loadingHot = true
               }
            }).catch(err => {
               this.hotSearch = []
               // this.loadingHot = true
            })
         },
         // 
         getArticleDataList() {
            this.loading = true
            console.log("搜索===");
            let data = {
               Platform: this.address,
               ArticleType: this.ArticleType,
               Scope: '',
               Keyword: this.search,
               PageNumber: 1,
               PageSize: 10,
               UserId: uni.getStorageSync('userId') || -1
            }
            this.$http.post('/ArticleData/GetArticleDataList', data).then(res => {
               if (res.Check) {
                  this.goodsList = res.Data.Data
                  this.loading = false
               } else {
                  this.$msg(res.Msg)
                  this.goodsList = []
                  this.loading = false
               }
            })
         },
         gooriginalText() {
            uni.navigateTo({
               url: '/pages/checkPolicies/originalText'
            })
         },
         godetail(item) {
            // 手机浏览器跳转
            window.open(item.ArticleUrl, "_blank");
         },
         goproject() {
            uni.navigateTo({
               url: '/pages/checkPolicies/project'
            })
         },
         gofastMatch() {
            if (uni.getStorageSync('userId')) {
               uni.navigateTo({
                  url: '/pages/policyMatching/fastMatch'
               })
            } else {
               uni.navigateTo({
                  url: '/pages/public/quick'
               });
            }

         },
         goprecise() {
            if (uni.getStorageSync('userId')) {
               uni.navigateTo({
                  url: '/pages/policyMatching/precise'
               })
            } else {
               uni.navigateTo({
                  url: '/pages/public/quick'
               });
            }

         },
         closeLocation() {
            this.showLocation = false;
         }
      }
   }
}
</script>

<style lang="scss" scoped>
page {
   background-color: #F7F7F7;
}

.mp-search-box {
   position: absolute;
   left: 0;
   top: 30upx;
   z-index: 9999;
   width: 100%;
   padding: 0 80upx;

   .ser-input {
      flex: 1;
      height: 56upx;
      line-height: 56upx;
      text-align: center;
      font-size: 28upx;
      color: $font-color-base;
      border-radius: 20px;
      background: rgba(255, 255, 255, .6);
   page {
      background-color: #F7F7F7;
   }
}

header {
   padding: 0 30upx;
   height: 120upx;
   background-color: #236AF0;
   display: flex;
   color: #fff;
   font-size: 14px;
   .mp-search-box {
      position: absolute;
      left: 0;
      top: 30upx;
      z-index: 9999;
      width: 100%;
      padding: 0 80upx;

   .left {
      width: 150upx;
      height: 120upx;
      line-height: 120upx;
      text-align: left;
      display: flex;

      i {
         font-size: 36upx;
      .ser-input {
         flex: 1;
         height: 56upx;
         line-height: 56upx;
         text-align: center;
         font-size: 28upx;
         color: $font-color-base;
         border-radius: 20px;
         background: rgba(255, 255, 255, .6);
      }
   }

   .search {
      flex: 1;
      height: 80upx;
      line-height: 80upx;
      border-radius: 40upx;
      background-color: #fff;
      padding: 0 20upx;
      margin: 20upx 0;
      color: #236AF0;
   header {
      padding: 0 30upx 30upx;
      color: #fff;
      font-size: 14px;
      // height: 391upx;
      // background: linear-gradient( 180deg, #314ABB 0%, #5277E0 100%);
      background: url('/static/index/beijing.png') center no-repeat;
      background-size: cover;
      /* 背景图片覆盖整个区域 */

      i {
         font-size: 26upx;
         color: #ccc;
      .left {
         width: 150upx;
         height: 80upx;
         line-height: 80upx;
         text-align: left;
         display: flex;

         i {
            font-size: 36upx;
         }
      }

      .logo {
         text-align: center;

         image {
            width: 275upx;
            height: 144upx;
         }
      }

      .search-box {
         height: 80upx;
         line-height: 80upx;
         border-radius: 40upx;
         background-color: #fff;
         padding: 0 10upx;
         margin: 20upx 0;
         color: #236AF0;
         display: flex;
         align-items: center;

         image {
            width: 28upx;
            height: 28upx;
            margin-right: 10upx;
         }

         input {
            flex: 1;
            font-size: 24upx;
            color: #999999;
         }
      }

      .hot {
         font-size: 24upx;
         color: #FFFFFF;
         padding-left: 10upx;
         display: flex;
         align-items: center;

         image {
            height: 34upx;
            width: 34upx;
         }

         .hot-msg {
            flex: 1;
            line-height: 1;
            white-space: nowrap;
            /* 强制文本不换行 */
            overflow: hidden;
            /* 隐藏超出部分 */
            text-overflow: ellipsis;

            /* 超出部分显示省略号 */
            text {
               margin-right: 10upx;
            }
         }
      }
   }

}

/* 分类 */
.cate-section {
   display: flex;
   justify-content: space-around;
   align-items: center;
   flex-wrap: wrap;
   padding: 30upx 22upx;
   background: #fff;

   .cate-item {
   /* 分类 */
   .cate-section {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      font-size: $font-sm + 2upx;
      color: $font-color-dark;
      flex-wrap: wrap;
      padding: 30upx 22upx;
      background: #fff;

      .cate-item {
         display: flex;
         flex-direction: column;
         align-items: center;
         font-size: $font-sm + 2upx;
         color: $font-color-dark;
      }

      /* 原图标颜色太深,不想改图了,所以加了透明度 */
      image {
         width: 88upx;
         height: 88upx;
         margin-bottom: 14upx;
         border-radius: 50%;
         opacity: .7;
         box-shadow: 4upx 4upx 20upx rgba(73, 148, 239, 0.3);
      }
   }

   /* 原图标颜色太深,不想改图了,所以加了透明度 */
   image {
      width: 88upx;
      height: 88upx;
      margin-bottom: 14upx;
      border-radius: 50%;
      opacity: .7;
      box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
   }
}
   // 海报
   .posters {
      padding: 20upx;

.u-page__tag-item {
   height: 40upx;
   line-height: 40upx;
   min-width: 50upx;
   text-align: center;
   margin: 10upx;
}
</style>
      image {
         width: 100%;
         height: 200upx;
      }
   }

   .information {
      margin: 0 20upx 20upx;
      border-radius: 20upx;
      overflow: hidden;

      .tabs {
         padding: 20upx 20upx 0;
         background-color: #fff;
         display: flex;
         justify-content: space-between;
         border-bottom: 1px solid #E7E7E7;
      }

      /deep/.u-tabs__wrapper__nav__line {
         bottom: 0;
      }
   }

   .u-page__tag-item {
      height: 40upx;
      line-height: 40upx;
      min-width: 50upx;
      text-align: center;
      margin: 10upx;
   }
</style>