From 28d72db591108c700e917253935dcc3bf538dca9 Mon Sep 17 00:00:00 2001
From: xuxueyang <xuxy@fengyuntec.com>
Date: 星期四, 11 七月 2024 17:30:37 +0800
Subject: [PATCH] ok商品的分类、列表，todo详情
---
pages/home/home.vue | 550 +++++++++++++++++++++++++++---------------------------
1 files changed, 276 insertions(+), 274 deletions(-)
diff --git a/pages/home/home.vue b/pages/home/home.vue
index 805733e..8fa256a 100644
--- a/pages/home/home.vue
+++ b/pages/home/home.vue
@@ -1,275 +1,277 @@
-<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"> </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"> </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";
</style>
\ No newline at end of file
--
Gitblit v1.9.3