From 4250e140336ac40e10ab4c3b650030f82098ca92 Mon Sep 17 00:00:00 2001 From: xuxy <1059738716@qq.com> Date: 星期六, 27 七月 2024 21:37:07 +0800 Subject: [PATCH] update bug和样式 --- pages/home/home.vue | 722 ++++++++++++++++++++++++------------------------------- 1 files changed, 318 insertions(+), 404 deletions(-) diff --git a/pages/home/home.vue b/pages/home/home.vue index 4273971..25f867a 100644 --- a/pages/home/home.vue +++ b/pages/home/home.vue @@ -1,405 +1,319 @@ -<template> - <view class="main-container home"> - <!-- 顶部,可能 --> - <view class="school" :style="{'background-color': color,'padding-top':(StatusBar)+'px' - ,height:CustomBar+'rpx','line-height':CustomBar+'rpx' }"> - <view class="home-logo"></view> - - <picker @change="PickerChangeSchool" :value="schoolIndex" :range="schools" range-key="name"> - <view class="picker flex"> - <!-- <text class="cuIcon-locationfill"></text> --> - <uni-icons type="location" class="m-l-15 m-r-5" size="18"></uni-icons> - <view> - {{ schoolIndex>=0&&schools[schoolIndex].name ? schools[schoolIndex].name : '选择校区' }} - </view> - <!-- <text class="cuIcon-unfold margin-left-xs"></text> --> - </view> - </picker> - </view> - <!-- <view :style="{'background-color': color,'padding-top':(StatusBar)+'px',height:CustomBar+'px'}"></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> - <animation-words :words="words" v-if="words&&words.length>0"></animation-words> - - </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://xy-go.oss-cn-beijing.aliyuncs.com/51/51abd2f29d104a78a5d6dcc27078716a位图@2x (4).png"> - </image> - </view> - </swiper-item> - <animation-words :words="words" v-if="words&&words.length>0"></animation-words> - - </swiper> - </uni-swiper-dot> - <!-- tip --> - <view class="p10"> - <uni-notice-bar @click="getNoticeMore" v-if="currentNotice&¤tNotice.id" 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"> </span> - </view> - - <!-- 各种按钮 --> - <home-buttons></home-buttons> - <!-- 推荐的成团的 --> - <view class="p15" style="padding-top: 0rpx;" v-if="tuangouList&&tuangouList.length>0"> - <view class="home-shop-top"> - <!-- <view>即将成团</view> --> - <image src="../../static/imgs/home/home-shop-top-txt.png" mode="aspectFit" class="title"></image> - <image src="../../static/imgs/home/home-shop-top-icon.png" mode="aspectFit" class="icon"></image> - - <card-list-item type='shop' :dto="tuangouList[0]" @pop="pop"></card-list-item> - </view> - </view> - <!-- 出去玩的 --> - <view class="p15" style="padding-top: 0rpx;padding-bottom: 0rpx;" v-if="tripList&&tripList.length>0"> - <view class="home-travel-top"> - <!-- <view>粗去玩</view> --> - <image src="../../static/imgs/home/home-travel-top-txt.png" mode="aspectFit" class="title"></image> - <image src="../../static/imgs/home/home-travel-top-icon.png" mode="aspectFit" class="icon"></image> - <card-list-item type='travel' :dto="tripList[0]"></card-list-item> - </view> - </view> - - <!-- 3个tab选项 --> - - <view class="p15" style="padding-bottom: 10rpx;"> - <!-- @change="changeTab" --> - <top-tabs :tabs="tabs" :flg.sync="tabIndex"></top-tabs> - - - - </view> - <!-- 根据不同的 --> - <view class="" style="padding-left: 30rpx;padding-right: 30rpx;"> - <view v-show="tabIndex==0" style="min-height: 400rpx;"> - <!-- 加载推荐位置的? --> - <no-data v-if="!tuangouList||tuangouList.length==0" style="width: 100%;"></no-data> - <view class="m-b-24" v-for="item of tuangouList"> - <card-list-item type='shop' :dto="item" @pop="pop"></card-list-item> - </view> - </view> - <view v-show="tabIndex==1" style="min-height: 400rpx;"> - <!-- 加载推荐位置的? --> - <no-data v-if="!tripList||tripList.length==0" style="width: 100%;"></no-data> - - <view class="m-b-24" v-for="item of tripList"> - <card-list-item type='travel' :dto="item" class="m-b-24"></card-list-item> - </view> - - </view> - </view> - <view v-show="tabIndex==2" style="margin-top: -10rpx;"> - <home-goods ref="homegoods"></home-goods> - - </view> - <view style="padding-bottom:200rpx"> - </view> - <farmer-footer flg="0"></farmer-footer> - - </view> -</template> - -<script> - import homeButtons from './components/home-buttons.vue' - import homeGoods from './components/home-goods.vue' - import animationWords from '@/components/animation-words' - - export default { - components: { - homeButtons, - homeGoods, - animationWords - }, - - data() { - return { - CustomBar: uni.getStorageSync('CustomBar'), - StatusBar: uni.getStorageSync('StatusBar'), - // StatusBar:0, - color: '#fff', - schools: [], - schoolIndex: -1, - scrollable: false, - tabs: [{ - name: '团购', - id: 'shop' - }, - { - name: '粗去玩', - id: 'travel' - }, - { - name: '挖宝商品', - id: 'good' - }, - ], - tabIndex: 2, - 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, - words: [], //弹幕 - 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 || [] - } - }) - // uni.setStorageSync('schoolId', this.school[parseInt(e.detail.value)].id); - // uni.setStorageSync('schoolIndex', parseInt(e.detail.value)); - var schoolIndex = uni.getStorageSync('schoolIndex') - if (!schoolIndex && schoolIndex !== 0) { - - } else { - this.schoolIndex = schoolIndex - } - this.changeTab(this.tabIndex) - this.changeTab(0) - this.changeTab(1) - - this.$http.request('get', '/api/brand/wish/list', { - params: { - size: 10, - show: true, - status: 'A' - } - }).then(res => { - if (res.code == 0) { - this.words = (res.data && res.data.records || []).map(item => { - return { - ...item, - randomnum: Math.floor(Math.random() * 10) + Math.floor(Math.random() * 30) - } - }) - } - }) - //公告 - 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: { - - pop(status) { - this.hide_footer = !!status - }, - changeBanner(e) { - this.currentBanner = e.detail.current - }, - changeTab(e) { - // this.tabIndex - if (e == 2) { - this.$nextTick(() => { - this.$refs.homegoods.updateGoods() - }) - } - if (e == 0) { - //团购 - // tripList:[], - // :[], - //可能没必要重复了先,todo - this.$http.request('get', '/api/buy/customer/group/list', { - params: { - size: 4, - status: 'A' - } - }).then(res => { - if (res.code == 0) { - this.tuangouList = res.data.records || [] - } - }) - } - if (e == 1) { - this.$http.request('get', '/api/trip/customer/list', { - params: { - size: 3, - status: 'J' - } - }).then(res => { - if (res.code == 0) { - this.tripList = res.data.records || [] - } - }) - } - // console.log('changeTab',e) - // updateGoods - // - }, - getNoticeMore() { - if (this.currentNotice.id) { - // uni.navigateTo({ - // url: '/pages/notice/notice?id=' + this.currentNotice.id - // }) - } - 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.setData({ - // index: e.detail.value, - // schoolInfo: this.school[parseInt(e.detail.value)], - // s_id: this.school[parseInt(e.detail.value)].s_id, - // current: 0 - // }); - - this.schoolIndex = parseInt(e.detail.value) - uni.setStorageSync('schoolId', this.schools[parseInt(e.detail.value)].id); - uni.setStorageSync('schoolIndex', parseInt(e.detail.value)); - // if (uni.getStorageSync('token')) { - // this.userChangeSchool(this.school[parseInt(e.detail.value)].s_id) - // } - // this.getSchoolInfo(this.school[parseInt(e.detail.value)].s_id); - // this.getSysparment(); //全局加载变量设置为真,信息圈的列表需要重新加载 - // // this.getOrderData(); - // // this.getHistoryList(); - // this.getRank(); - // this.setData({ - // dataList: [] - // }); - }, - - } - } -</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 class="picker flex" @click.stop="goToAddress"> + <uni-icons type="location" class="m-r-5" size="18"></uni-icons> + <view> + {{ address&&address.id?address.address: '选择地址' }} + </view> + </view> + </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"> </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 { + mapState + } from 'vuex' + 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 { + computed: { + ...mapState({ + address: state => { + return state.defaultaddress || {} + }, + currentInfo: state => { + return state.currentInfo || {} + }, + }), + }, + 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 + } + //如果已经登录,加载一下默认地址 + let that = this + setTimeout(()=>{ + if(that.currentInfo.id&&!that.address.id){ + that.$http.request('get', '/api/address/default/detail').then(res=>{ + if(res.data){ + that.$store.commit('setDefaultAddress', {...res.data}) + + } + }) + } + + },2000) + //公告 + 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: { + goToAddress() { + if (!this.currentInfo.id) { + this.$message.showToast('请先前往登录') + return + } + uni.navigateTo({ + url: '/pages/user/address/address?source=select' + }) + }, + buttonSearchFlow() { + console.log('buttonSearchFlow') + uni.navigateTo({ + url: '/sub_pages/trade/list?name=' + this.search_flow + }) + }, + 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> \ No newline at end of file -- Gitblit v1.9.3