fix bug

xuxueyang

2024-07-25 e998d551df1c96572838bbf661be938aa79d1be8

 pages/home/home.vue

@@ -1,275 +1,282 @@
<template>
   <view class="main-container user-home">
      <view class="bg-top-green"></view>
      <!-- 顶部，可能 -->
      <view class="school" :style="{'padding-top':(StatusBar)+'px'
      ,height:CustomBar+'rpx','line-height':CustomBar+'rpx' }">
         <picker @change="PickerChangeSchool" :value="areaIndex" :range="schools" range-key="name">
            <view class="picker flex">
               <uni-icons type="location" class="m-r-5" size="18"></uni-icons>
               <view>
                  {{ areaIndex>=0&&schools[areaIndex].name ? schools[areaIndex].name : '选择位置' }}
               </view>
            </view>
         </picker>
      </view>
      <view class="search-container m-t-12 flex">
         <view class="flex1 input">
            <u--input placeholder="请输入花名" v-model="search_flow" @confirm="buttonSearchFlow" suffixIcon="search"
               :suffixIconStyle="{'font-size':'24px','color': '#20613D'}" >
            </u--input>
         </view>
      </view>

      <!-- banner -->
      <uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="currentBanner"
         :mode="'dot'" :dots-styles="dotsStyles[0]" field="content">
         <swiper class="swiper-box" @change="changeBanner" :interval="10000" :circular="true" :current="0"
            v-if="banners&&banners.length>0" :autoplay="true">
            <swiper-item v-for="(item, index) in banners" :key="index">
               <view class="swiper-item" :class="'swiper-item' + index">
                  <image @click="previewImg(item.imageSmall||item.image)" class="home-banner-image"
                     mode="aspectFit" :src="item.imageSmall||item.image">
                  </image>
               </view>
            </swiper-item>
         </swiper>
         <swiper class="swiper-box" @change="changeBanner" :current="0" v-if="!banners||banners.length==0">
            <swiper-item v-for="(item, index) in 1" :key="index">
               <view class="swiper-item" :class="'swiper-item' + index">
                  <image class="home-banner-image" mode="scaleToFill"
                     src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/62/62ddac6297104e369aba646be704064dbanner@2x.png">
                  </image>
               </view>
            </swiper-item>
         </swiper>
      </uni-swiper-dot>
      <!-- tip -->
      <view class="m-t-12" @click="getNoticeMore">
         <uni-notice-bar class="notice-bar" color="#333" background-color="#fff" show-get-more show-icon
            :scrollable="scrollable" :text="currentNotice.title" :key="currentNotice.id" />
         <span v-if="!currentNotice||!currentNotice.id">&nbsp;</span>
      </view>
      <!-- 当前分类 -->
      <home-category></home-category>
      <!-- 特别的几个公告图片 -->
      <home-banner-imgs></home-banner-imgs>
      <!-- 均价情况 -->
      <home-price></home-price>
      <!-- 几个专区 -->
      <home-zones></home-zones>
      <!-- 置顶的花列表 -->
      <home-top-flow></home-top-flow>

      <view style="min-height:200rpx">
      </view>
      <common-footer flg="0"></common-footer>

   </view>
</template>

<script>
   import homePrice from './components/home-price.vue'
   import homeBannerImgs from './components/home-banner-imgs.vue'
   import homeZones from './components/home-zones.vue'
   import homeTopFlow from './components/home-top-flow.vue'
   import homeCategory from './components/home-category.vue'

   export default {
      components: {
         homeCategory,
         homePrice,
         homeBannerImgs,
         homeZones,
         homeTopFlow
      },

      data() {
         return {
            search_flow: '',
            CustomBar: uni.getStorageSync('CustomBar'),
            StatusBar: uni.getStorageSync('StatusBar'),
            // StatusBar:0,
            color: '#fff',
            schools: [],
            areaIndex: -1,
            scrollable: false,

            info: [{
                  colorClass: 'uni-bg-red',
                  url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
                  content: '内容 A'
               },
               {
                  colorClass: 'uni-bg-green',
                  url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
                  content: '内容 B'
               },
               {
                  colorClass: 'uni-bg-blue',
                  url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
                  content: '内容 C'
               }
            ],
            dotStyle: [{
                  backgroundColor: 'rgba(0, 0, 0, .3)',
                  border: '1px rgba(0, 0, 0, .3) solid',
                  color: '#fff',
                  selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
                  selectedBorder: '1px rgba(0, 0, 0, .9) solid'
               },
               {
                  backgroundColor: 'rgba(255, 90, 95,0.3)',
                  border: '1px rgba(255, 90, 95,0.3) solid',
                  color: '#fff',
                  selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
                  selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
               },
               {
                  backgroundColor: 'rgba(83, 200, 249,0.3)',
                  border: '1px rgba(83, 200, 249,0.3) solid',
                  color: '#fff',
                  selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
                  selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
               }
            ],
            currentBanner: 0,
            banners: [],
            tripList: [],
            tuangouList: [],
            hide_footer: false,
            noticeList: [],
            currentNoticeIndex: 0,
            currentNotice: {

            }
         };
      },
      // onShareAppMessage() {
      // let that = this;
      // var url =
      //    `/pages/home/home?shareId=${this.currentInfo&&this.currentInfo.id||''}&shareName=${this.currentInfo&&this.currentInfo.nickName||''}`; //你的转发页面路径拼接参数
      // return {
      //    title: "校购GO小狗狗",
      //    path: url,
      // }
      // },
      // onShareTimeline() {
      //    let that = this;
      //    var url = "/pages/home/home" //你的分享页面路径
      //    return {
      //       title: '校购GO小狗狗',
      //       path: url,
      //       query: `shareId=${this.currentInfo&&this.currentInfo.id||''}&shareName=${this.currentInfo&&this.currentInfo.nickName||''}`, //你的参数拼接，注意：不需要加?
      //       // imageUrl: 'https://cdn.uviewui.com/uview/swiper/1.jpg' //你分享的封面
      //    };
      // },

      onLoad() {
         // console.log('home created')
         //这里进行一次初始化即可
         // this.$http.request('get', '/api/school/area/list', {

         // }).then(res => {
         //    if (res.code == 0) {
         //       this.schools = res.data || []
         //    }
         // })
         //获取banner图
         this.$http.request('get', '/api/ua/banner/list', {

         }).then(res => {
            if (res.code == 0) {
               this.banners = res.data.records || []
            }
         })

         var areaIndex = uni.getStorageSync('areaIndex')
         if (!areaIndex && areaIndex !== 0) {

         } else {
            this.areaIndex = areaIndex
         }



         //公告
         this.$http.request('get', '/api/ua/announcement/list', {
            params: {
               size: 5,
               status: 'A'
            }
         }).then(res => {
            if (res.code == 0) {
               this.noticeList = (res.data && res.data.records || [])
               console.log('this.noticeList', this.noticeList)
               if (this.noticeList.length > 0) {
                  this.currentNotice = this.noticeList[0]
                  if (this.currentNotice.title && this.currentNotice.title.length >= 30) {
                     this.scrollable = true
                  } else {
                     this.scrollable = false
                  }
                  let that = this
                  if (this.noticeList.length >= 1) {
                     setInterval(() => {
                        console.log('interval,1')
                        that.currentNoticeIndex += 1
                        that.currentNoticeIndex %= that.noticeList.length
                        that.currentNotice = that.noticeList[that.currentNoticeIndex]
                        that.scrollable = false
                        that.$nextTick(() => {
                           if (that.currentNotice.title && that.currentNotice.title
                              .length >= 30) {
                              that.scrollable = true
                           } else {
                              that.scrollable = false
                           }
                        })

                     }, 8000)
                  }

               }
            }
         })


      },
      methods: {
         buttonSearchFlow() {
            console.log('buttonSearchFlow')
         },
         pop(status) {
            this.hide_footer = !!status
         },
         changeBanner(e) {
            this.currentBanner = e.detail.current
         },

         getNoticeMore() {
            uni.navigateTo({
               url: '/pages/notice/list?id=' + this.currentNotice.id
            })
         },
         PickerChangeSchool(e) {
            if (e.detail.value == '-1') {
               this.$message.showToast('未选择位置')
               return
            }
            console.log(' this.schools', this.schools, parseInt(e.detail.value), e);


            this.areaIndex = parseInt(e.detail.value)
            uni.setStorageSync('areaId', this.schools[parseInt(e.detail.value)].id);
            uni.setStorageSync('areaIndex', parseInt(e.detail.value));

         },

      }
   }
</script>

<style lang="scss" scoped>
   @import "./home.scss";
<template>

   <view class="main-container user-home">

      <view class="bg-top-green"></view>

      <!-- 顶部，可能 -->

      <view class="school" :style="{'padding-top':(StatusBar)+'px'

      ,height:CustomBar+'rpx','line-height':CustomBar+'rpx' }">

         <picker @change="PickerChangeSchool" :value="areaIndex" :range="schools" range-key="name">

            <view class="picker flex">

               <uni-icons type="location" class="m-r-5" size="18"></uni-icons>

               <view>

                  {{ areaIndex>=0&&schools[areaIndex].name ? schools[areaIndex].name : '选择位置' }}

               </view>

            </view>

         </picker>

      </view>

      <view class="search-container m-t-12 flex">

         <view class="flex1 input">

            <u-input placeholder="请输入花名" v-model="search_flow">

               <template slot="suffix">

                  <uni-icons color="#20613D" type="search" size="24" @tap="buttonSearchFlow"></uni-icons>

               </template>

            </u-input>

         </view>

      </view>



      <!-- banner -->

      <uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="currentBanner"

         :mode="'dot'" :dots-styles="dotsStyles[0]" field="content">

         <swiper class="swiper-box" @change="changeBanner" :interval="10000" :circular="true" :current="0"

            v-if="banners&&banners.length>0" :autoplay="true">

            <swiper-item v-for="(item, index) in banners" :key="index">

               <view class="swiper-item" :class="'swiper-item' + index">

                  <image @click="previewImg(item.imageSmall||item.image)" class="home-banner-image"

                     mode="aspectFit" :src="item.imageSmall||item.image">

                  </image>

               </view>

            </swiper-item>

         </swiper>

         <swiper class="swiper-box" @change="changeBanner" :current="0" v-if="!banners||banners.length==0">

            <swiper-item v-for="(item, index) in 1" :key="index">

               <view class="swiper-item" :class="'swiper-item' + index">

                  <image class="home-banner-image" mode="scaleToFill"

                     src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/62/62ddac6297104e369aba646be704064dbanner@2x.png">

                  </image>

               </view>

            </swiper-item>

         </swiper>

      </uni-swiper-dot>

      <!-- tip -->

      <view class="m-t-12" @click="getNoticeMore">

         <uni-notice-bar class="notice-bar" color="#333" background-color="#fff" show-get-more show-icon

            :scrollable="scrollable" :text="currentNotice.title" :key="currentNotice.id" />

         <span v-if="!currentNotice||!currentNotice.id">&nbsp;</span>

      </view>

      <!-- 当前分类 -->

      <home-category></home-category>

      <!-- 特别的几个公告图片 -->

      <home-banner-imgs></home-banner-imgs>

      <!-- 均价情况 -->

      <home-price></home-price>

      <!-- 几个专区 -->

      <home-zones></home-zones>

      <!-- 置顶的花列表 -->

      <home-top-flow></home-top-flow>



      <view style="min-height:200rpx">

      </view>

      <common-footer flg="0"></common-footer>



   </view>

</template>



<script>

   import homePrice from './components/home-price.vue'

   import homeBannerImgs from './components/home-banner-imgs.vue'

   import homeZones from './components/home-zones.vue'

   import homeTopFlow from './components/home-top-flow.vue'

   import homeCategory from './components/home-category.vue'



   export default {

      components: {

         homeCategory,

         homePrice,

         homeBannerImgs,

         homeZones,

         homeTopFlow

      },



      data() {

         return {

            search_flow: '',

            CustomBar: uni.getStorageSync('CustomBar'),

            StatusBar: uni.getStorageSync('StatusBar'),

            // StatusBar:0,

            color: '#fff',

            schools: [],

            areaIndex: -1,

            scrollable: false,



            info: [{

                  colorClass: 'uni-bg-red',

                  url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',

                  content: '内容 A'

               },

               {

                  colorClass: 'uni-bg-green',

                  url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',

                  content: '内容 B'

               },

               {

                  colorClass: 'uni-bg-blue',

                  url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',

                  content: '内容 C'

               }

            ],

            dotStyle: [{

                  backgroundColor: 'rgba(0, 0, 0, .3)',

                  border: '1px rgba(0, 0, 0, .3) solid',

                  color: '#fff',

                  selectedBackgroundColor: 'rgba(0, 0, 0, .9)',

                  selectedBorder: '1px rgba(0, 0, 0, .9) solid'

               },

               {

                  backgroundColor: 'rgba(255, 90, 95,0.3)',

                  border: '1px rgba(255, 90, 95,0.3) solid',

                  color: '#fff',

                  selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',

                  selectedBorder: '1px rgba(255, 90, 95,0.9) solid'

               },

               {

                  backgroundColor: 'rgba(83, 200, 249,0.3)',

                  border: '1px rgba(83, 200, 249,0.3) solid',

                  color: '#fff',

                  selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',

                  selectedBorder: '1px rgba(83, 200, 249,0.9) solid'

               }

            ],

            currentBanner: 0,

            banners: [],

            tripList: [],

            tuangouList: [],

            hide_footer: false,

            noticeList: [],

            currentNoticeIndex: 0,

            currentNotice: {



            }

         };

      },

      // onShareAppMessage() {

      // let that = this;

      // var url =

      //    `/pages/home/home?shareId=${this.currentInfo&&this.currentInfo.id||''}&shareName=${this.currentInfo&&this.currentInfo.nickName||''}`; //你的转发页面路径拼接参数

      // return {

      //    title: "校购GO小狗狗",

      //    path: url,

      // }

      // },

      // onShareTimeline() {

      //    let that = this;

      //    var url = "/pages/home/home" //你的分享页面路径

      //    return {

      //       title: '校购GO小狗狗',

      //       path: url,

      //       query: `shareId=${this.currentInfo&&this.currentInfo.id||''}&shareName=${this.currentInfo&&this.currentInfo.nickName||''}`, //你的参数拼接，注意：不需要加?

      //       // imageUrl: 'https://cdn.uviewui.com/uview/swiper/1.jpg' //你分享的封面

      //    };

      // },



      onLoad() {

         // console.log('home created')

         //这里进行一次初始化即可

         // this.$http.request('get', '/api/school/area/list', {



         // }).then(res => {

         //    if (res.code == 0) {

         //       this.schools = res.data || []

         //    }

         // })

			
         // uni.navigateTo({

         //    url: '/sub_pages/customer/trade/detail'

         // })



         //获取banner图

         this.$http.request('get', '/api/pub/banner/list', {



         }).then(res => {

            if (res.code == 0) {

               this.banners = res.data.records || []

            }

         })



         var areaIndex = uni.getStorageSync('areaIndex')

         if (!areaIndex && areaIndex !== 0) {



         } else {

            this.areaIndex = areaIndex

         }







         //公告

         this.$http.request('get', '/api/announcement/page', {

            params: {

               size: 5,

               status: 'A'

            }

         }).then(res => {

            if (res.code == 0) {

               this.noticeList = (res.data && res.data.records || [])

               console.log('this.noticeList', this.noticeList)

               if (this.noticeList.length > 0) {

                  this.currentNotice = this.noticeList[0]

                  if (this.currentNotice.title && this.currentNotice.title.length >= 30) {

                     this.scrollable = true

                  } else {

                     this.scrollable = false

                  }

                  let that = this

                  if (this.noticeList.length >= 1) {

                     setInterval(() => {

                        console.log('interval,1')

                        that.currentNoticeIndex += 1

                        that.currentNoticeIndex %= that.noticeList.length

                        that.currentNotice = that.noticeList[that.currentNoticeIndex]

                        that.scrollable = false

                        that.$nextTick(() => {

                           if (that.currentNotice.title && that.currentNotice.title

                              .length >= 30) {

                              that.scrollable = true

                           } else {

                              that.scrollable = false

                           }

                        })



                     }, 8000)

                  }



               }

            }

         })





      },

      methods: {

         buttonSearchFlow() {

            console.log('buttonSearchFlow')

         },

         pop(status) {

            this.hide_footer = !!status

         },

         changeBanner(e) {

            this.currentBanner = e.detail.current

         },



         getNoticeMore() {

            uni.navigateTo({

               url: '/pages/notice/list?id=' + this.currentNotice.id

            })

         },

         PickerChangeSchool(e) {

            if (e.detail.value == '-1') {

               this.$message.showToast('未选择位置')

               return

            }

            console.log(' this.schools', this.schools, parseInt(e.detail.value), e);





            this.areaIndex = parseInt(e.detail.value)

            uni.setStorageSync('areaId', this.schools[parseInt(e.detail.value)].id);

            uni.setStorageSync('areaIndex', parseInt(e.detail.value));



         },



      }

   }

</script>



<style lang="scss" scoped>

   @import "./home.scss";

</style>