From a46be7373a3ace79168d4e9e55683ef59cd9db8d Mon Sep 17 00:00:00 2001
From: mkm <727897186@qq.com>
Date: Mon, 15 May 2023 22:46:19 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=9C=B0=E5=9D=80=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF=20=E4=BF=AE=E5=A4=8D=E4=BE=9B=E5=BA=94=E9=93=BE?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/zbpSwiper.vue              |  566 ++++++++------
 pages/home/index.vue                  | 1042 +++++++++++++------------
 pages/supply_chains/supply_chains.vue |   12 +-
 3 files changed, 876 insertions(+), 744 deletions(-)

diff --git a/components/zbpSwiper.vue b/components/zbpSwiper.vue
index 5a2a73b..87db119 100644
--- a/components/zbpSwiper.vue
+++ b/components/zbpSwiper.vue
@@ -1,245 +1,321 @@
-<template>
-  <view class="zbp-head-wrapper">
-    <view class="color-lump"></view>
-    <view class="bg-img">
-      <img :src="bgColor" alt="">
-    </view>
-    <view class="site-box flex_a_c_j_sb">
-      <view class="place_wrapper flex_a_c" @click="selectLocation">
-        <view class="iconfont icon-weizhi"></view>
-        <view class="town_name">{{street}}</view>
-      </view>
-      <navigator url="/pages/chat/customer_list/index?type=0" hover-class="none">
-        <view class="iconfont icon-xiaoxi" style="color:#fff;"></view>
-      </navigator>
-    </view>
-    <!-- 搜索栏 -->
-    <navigator url="/pages/columnGoods/goods_search/index" hover-class="none" class="search_content flex_a_c_j_sb">
-      <view class="flex_a_c">
-        <view class="iconfont icon-sousuo"></view>
-        <input type="text" v-model="keyword" placeholder="搜索产品或店铺">
-      </view>
-      <button class="search_btn">搜索</button>
-    </navigator>
-    <!-- 轮播图 -->
-    <view class="supply_chains-head">
-      <swiper class="swiper l_center" @change="swiperChange" :indicator-dots="swiper.indicatorDots"
-        :autoplay="swiper.autoplay" :interval="swiper.interval" :duration="swiper.duration"
-        indicator-active-color="#fff">
-        <block v-for="(item,index) in swiper['url']" :key="index">
-          <swiper-item class="swi_item">
-            <u--image radius="15" :showLoading="true" :src="item.img" width="694.74rpx" height="242.11rpx"
-              mode="aspectFill">
-            </u--image>
-          </swiper-item>
-        </block>
-      </swiper>
-    </view>
-    <u-picker :defaultIndex="[0,0]" :show="showPicker" ref="uPicker" :columns="columnData" @confirm="confirm"
-      @cancel="showPicker = false" @change="changeHandler" keyName="name"></u-picker>
-  </view>
-</template>
-
-<script>
-  import { getArea, getStreet } from '@/api/article.js';
-  import { getIndexData, getDiy } from '@/api/api.js'
-  import { mapGetters } from 'vuex'
-  export default {
-    props: {
-      isSelectPlace: {
-        type: Boolean,
-        default: false
-      }
-    },
-    data() {
-      return {
-        showPicker: false,
-        columnData: [],
-        keyword: '',
-        street: '',
-        bgColor: '',
-        swiper: {
-          url: [{
-            img: ''
-          }],
-          indicatorDots: true, // 显示面板指示点
-          vertical: false, // 滑动方向是否为纵向
-          autoplay: true, // 是否自动切换
-          interval: 2000, // 自动切换时间间隔
-          duration: 400 // 滑动动画时长
-        },
-      }
-    },
-    computed: mapGetters(['location']),
-    watch: {},
-    created() {
-      const loca = JSON.parse(this.location)
-      this.street = loca.address_component.street
-      this.getBanner()
-      this.Area()
-    },
-    methods: {
-      selectLocation() {
-        this.isSelectPlace ? this.showPicker = true : ''
-      },
-      confirm(e) {
-        this.showPicker = false
-        this.$emit('selectPlce', e)
-      },
-      changeHandler(e) {
-        const { columnIndex, value, values, index, picker = this.$refs.uPicker } = e;
-        if (columnIndex === 0) {
-          getStreet({ area_code: value[0]['code'] }).then(res => {
-            picker.setColumnValues(1, res.data);
-          });
-        }
-      },
-      Area() {
-        getArea({ city_code: 510500 }).then(res => {
-          this.$refs.uPicker.setColumnValues(0, res.data);
-          this.Street(res.data[0]['code']);
-        });
-      },
-      Street(code) {
-        getStreet({ area_code: code }).then(res => {
-          this.$refs.uPicker.setColumnValues(1, res.data);
-        });
-      },
-      swiperChange(e) {
-        let { current, source } = e.detail;
-        if (source === 'autoplay' || source === 'touch') {
-          this.bgColor = this.swiper.url[e.detail.current]['img']
-        }
-      },
-      async getBanner() {
-        const { data } = await getDiy({ id: 0 })
-        /* 对象转数组*/
-        let obj = Object.keys(data.value).sort();
-        let styleConfig = obj.map(key => data.value[key]);
-        /* 循环数组得到数据*/
-        styleConfig.forEach((item, index, arr) => {
-          if (item.name == 'headerSerch' || item.name == 'homeComb') {
-            item.name == 'homeComb' ? this.swiper.url = item.swiperConfig.list : '';
-          }
-        })
-        this.bgColor = this.swiper.url[0].img
-      },
-    }
-  }
-</script>
-
-<style lang="scss">
-  .zbp-head-wrapper {
-    position: relative;
-    padding-top: 78.95rpx;
-    overflow: hidden;
-
-    .color-lump {
-      z-index: 1;
-      position: absolute;
-      bottom: -86px;
-      left: 50%;
-      transform: translate(-50%, 0);
-      width: 102%;
-      height: 133px;
-      border-radius: 30px 30px 0 0;
-      background-color: #fff;
-    }
-
-    .bg-img {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      /* #ifdef MP || APP-PLUS */
-      z-index: -1;
-      /* #endif */
-      /* #ifdef H5 */
-      z-index: 0;
-      /* #endif */
-      z-index: 0;
-      filter: blur(0);
-      overflow: hidden;
-
-      img {
-        width: 100%;
-        height: 100%;
-        filter: blur(30rpx);
-        transform: scale(1.5);
-      }
-    }
-
-    .site-box {
-      margin: 0 auto;
-      width: 694.74rpx;
-      height: 66.67rpx;
-      margin-bottom: 26.32rpx;
-      position: relative;
-
-      // 位置
-      .place_wrapper {
-        color: #fff;
-        margin-right: 24.56rpx;
-        font-size: 31.58rpx;
-
-        .town_name {
-          margin-left: 10.53rpx;
-        }
-      }
-
-      .iconfont {
-        font-size: 35.09rpx;
-      }
-    }
-
-    .my-main {
-      transition: background-color .5s ease;
-    }
-
-    .search_content {
-      margin: 0 auto;
-      width: 694.74rpx;
-      height: 61.4rpx;
-      padding: 2px 2px 2px 21.05rpx;
-      border-radius: 100px;
-      background: #fff;
-      margin-bottom: 17.54rpx;
-      position: relative;
-      box-sizing: border-box;
-
-      .icon-sousuo {
-        font-size: 26.32rpx;
-        font-weight: bold;
-        color: #c8c7c6;
-        margin-right: 17.54rpx;
-      }
-
-      .search_btn {
-        color: #fff;
-        width: 105.26rpx;
-        height: 52.63rpx;
-        line-height: 52.63rpx;
-        background: #f84221;
-        border-radius: 100px;
-        font-size: 28.07rpx;
-      }
-    }
-
-    .supply_chains-head {
-      margin-bottom: 17.54rpx;
-      position: relative;
-      z-index: 2;
-
-      .swiper {
-        width: 694.74rpx;
-        height: 242.11rpx;
-        margin: 0 auto;
-
-        .swi_item {
-          width: 100%;
-          height: 242.11rpx;
-        }
-      }
-    }
-  }
-</style>
\ No newline at end of file
+<template>
+	<view class="zbp-head-wrapper">
+		<view class="color-lump"></view>
+		<view class="bg-img">
+			<img :src="bgColor" alt="">
+		</view>
+		<view class="site-box flex_a_c_j_sb">
+			<view class="place_wrapper flex_a_c" @click="selectLocation">
+				<view class="iconfont icon-weizhi"></view>
+				<view class="town_name">{{recommend_address}}</view>
+			</view>
+			<navigator url="/pages/chat/customer_list/index?type=0" hover-class="none">
+				<view class="iconfont icon-xiaoxi" style="color:#fff;"></view>
+			</navigator>
+		</view>
+		<!-- 搜索栏 -->
+		<navigator url="/pages/columnGoods/goods_search/index" hover-class="none" class="search_content flex_a_c_j_sb">
+			<view class="flex_a_c">
+				<view class="iconfont icon-sousuo"></view>
+				<input type="text" v-model="keyword" placeholder="搜索产品或店铺">
+			</view>
+			<button class="search_btn">搜索</button>
+		</navigator>
+		<!-- 轮播图 -->
+		<view class="supply_chains-head">
+			<swiper class="swiper l_center" @change="swiperChange" :indicator-dots="swiper.indicatorDots"
+				:autoplay="swiper.autoplay" :interval="swiper.interval" :duration="swiper.duration"
+				indicator-active-color="#fff">
+				<block v-for="(item,index) in swiper['url']" :key="index">
+					<swiper-item class="swi_item">
+						<u--image radius="15" :showLoading="true" :src="item.img" width="694.74rpx" height="242.11rpx"
+							mode="aspectFill">
+						</u--image>
+					</swiper-item>
+				</block>
+			</swiper>
+		</view>
+		<u-picker :defaultIndex="[0,0]" :show="showPicker" ref="uPicker" :columns="columnData" @confirm="confirm"
+			@cancel="showPicker = false" @change="changeHandler" keyName="name"></u-picker>
+	</view>
+</template>
+
+<script>
+	import {
+		getArea,
+		getStreet
+	} from '@/api/article.js';
+	import {
+		getIndexData,
+		getDiy
+	} from '@/api/api.js'
+	import {getGeocoder } from '@/api/store.js';
+	
+	import {
+		mapGetters
+	} from 'vuex'
+	export default {
+		props: {
+			isSelectPlace: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				showPicker: false,
+				styleConfig: [],
+				columnData: [],
+				homeCombData:[],
+				keyword: '',
+				recommend_address: '',
+				bgColor: '',
+				swiper: {
+					url: [{
+						img: ''
+					}],
+					indicatorDots: true, // 显示面板指示点
+					vertical: false, // 滑动方向是否为纵向
+					autoplay: true, // 是否自动切换
+					interval: 2000, // 自动切换时间间隔
+					duration: 400 // 滑动动画时长
+				},
+			}
+		},
+		// computed: mapGetters(['location']),
+		watch: {},
+		created() {
+			//#ifdef APP
+			this.selfLocation()
+			//#endif
+			// const loca = JSON.parse(this.location)
+			// this.street = loca.address_component.street
+			this.getBanner()
+			this.Area()
+		},
+		methods: {
+			selectLocation() {
+				this.isSelectPlace ? this.showPicker = true : ''
+			},
+			confirm(e) {
+				this.showPicker = false
+				this.$emit('selectPlce', e)
+			},
+			changeHandler(e) {
+				const {
+					columnIndex,
+					value,
+					values,
+					index,
+					picker = this.$refs.uPicker
+				} = e;
+				if (columnIndex === 0) {
+					getStreet({
+						area_code: value[0]['code']
+					}).then(res => {
+						picker.setColumnValues(1, res.data);
+					});
+				}
+			},
+			Area() {
+				getArea({
+					city_code: 510500
+				}).then(res => {
+					this.$refs.uPicker.setColumnValues(0, res.data);
+					this.Street(res.data[0]['code']);
+				});
+			},
+			Street(code) {
+				getStreet({
+					area_code: code
+				}).then(res => {
+					this.$refs.uPicker.setColumnValues(1, res.data);
+				});
+			},
+			selfLocation() {
+				let self = this
+				uni.getLocation({
+					type: 'gcj02',
+					success: (res) => {						
+						let latitude, longitude;
+						latitude = res.latitude.toString();
+						longitude = res.longitude.toString();
+						this.latitude = res.latitude
+						this.longitude = res.longitude
+						getGeocoder({
+							lat: latitude,
+							long: longitude
+						}).then(res => {
+							console.log(res)
+							this.detaile_address = res.data.address;
+							this.location_address = res.data.address;
+							this.recommend_address = res.data.formatted_addresses.recommend.length > 4 ? res.data.formatted_addresses.recommend.slice(0,7) + '...' : res.data.formatted_addresses.recommend
+						}).catch(err => {
+							uni.showToast({
+								title: err,
+								icon: 'none'
+							})
+						})
+					},
+					fail: (res) => {
+						uni.showToast({
+							title: res,
+							icon: 'none',
+							duration: 1000
+						});
+					},
+				});
+			},
+			swiperChange(e) {
+				let {
+					current,
+					source
+				} = e.detail;
+				if (source === 'autoplay' || source === 'touch') {
+					this.bgColor = this.swiper.url[e.detail.current]['img']
+				}
+			},
+			// 对象转数组
+			objToArr(data) {
+				let obj = Object.keys(data).sort();
+				let m = obj.map(key => data[key]);
+				return m;
+			},
+			async getBanner(id) {
+				let that = this;
+
+				const {
+					data
+				} = await getDiy({
+					id: 0
+				})
+				that.styleConfig = that.objToArr(data.value);
+				/* 循环数组得到数据*/
+				that.styleConfig.forEach((item, index, arr) => {
+					if (item.name == 'headerSerch' || item.name == 'homeComb') {
+						if (item.name == 'homeComb') {
+							that.swiper.url = item.swiperConfig.list
+						}
+					}
+				})
+				this.bgColor = this.swiper.url[0].img
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.zbp-head-wrapper {
+		position: relative;
+		padding-top: 78.95rpx;
+		overflow: hidden;
+
+		.color-lump {
+			z-index: 1;
+			position: absolute;
+			bottom: -86px;
+			left: 50%;
+			transform: translate(-50%, 0);
+			width: 102%;
+			height: 133px;
+			border-radius: 30px 30px 0 0;
+			background-color: #fff;
+		}
+
+		.bg-img {
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			top: 0;
+			/* #ifdef MP || APP-PLUS */
+			z-index: -1;
+			/* #endif */
+			/* #ifdef H5 */
+			z-index: 0;
+			/* #endif */
+			z-index: 0;
+			filter: blur(0);
+			overflow: hidden;
+
+			img {
+				width: 100%;
+				height: 100%;
+				filter: blur(30rpx);
+				transform: scale(1.5);
+			}
+		}
+
+		.site-box {
+			margin: 0 auto;
+			width: 694.74rpx;
+			height: 66.67rpx;
+			margin-bottom: 26.32rpx;
+			position: relative;
+
+			// 位置
+			.place_wrapper {
+				color: #fff;
+				margin-right: 24.56rpx;
+				font-size: 31.58rpx;
+
+				.town_name {
+					margin-left: 10.53rpx;
+				}
+			}
+
+			.iconfont {
+				font-size: 35.09rpx;
+			}
+		}
+
+		.my-main {
+			transition: background-color .5s ease;
+		}
+
+		.search_content {
+			margin: 0 auto;
+			width: 694.74rpx;
+			height: 61.4rpx;
+			padding: 2px 2px 2px 21.05rpx;
+			border-radius: 100px;
+			background: #fff;
+			margin-bottom: 17.54rpx;
+			position: relative;
+			box-sizing: border-box;
+
+			.icon-sousuo {
+				font-size: 26.32rpx;
+				font-weight: bold;
+				color: #c8c7c6;
+				margin-right: 17.54rpx;
+			}
+
+			.search_btn {
+				color: #fff;
+				width: 105.26rpx;
+				height: 52.63rpx;
+				line-height: 52.63rpx;
+				background: #f84221;
+				border-radius: 100px;
+				font-size: 28.07rpx;
+			}
+		}
+
+		.supply_chains-head {
+			margin-bottom: 17.54rpx;
+			position: relative;
+			z-index: 2;
+
+			.swiper {
+				width: 694.74rpx;
+				height: 242.11rpx;
+				margin: 0 auto;
+
+				.swi_item {
+					width: 100%;
+					height: 242.11rpx;
+				}
+			}
+		}
+	}
+</style>
diff --git a/pages/home/index.vue b/pages/home/index.vue
index b8272b3..8bb96b5 100644
--- a/pages/home/index.vue
+++ b/pages/home/index.vue
@@ -1,493 +1,549 @@
-<template>
-  <view class="Circle_friends">
-    <view class="circle_friends_wrapper">
-
-      <zbpSwiper></zbpSwiper>
-
-      <view class="tabs_wrapper">
-        <u-tabs :list="tabsData.list" @click="tabsChange" :activeStyle="tabsData.activeStyle"
-          :inactiveStyle="tabsData.inactiveStyle" lineHeight="0" keyName="cate_name"></u-tabs>
-      </view>
-
-      <view class="goods">
-        <block v-for="(item,index) in cateGoods" :key="index">
-          <view class="goods_item" @click="gogogo(item)">
-            <image class="goods_img" :src="item.image[0]" mode="aspectFill"></image>
-            <view class="botm">
-              <view class="title">{{item.title}}</view>
-              <view class="goods_info flex_a_c">
-                <view class="l_info flex_a_c">
-                  <image :src="(item.author && item.author.avatar) || '/static/images/f.png'" mode="aspectFill"
-                    class="g_img"></image>
-                  <view class="g_name">{{item.author && item.author.nickname}}</view>
-                </view>
-                <view class="nice_box" @click.stop="giveStart(item)">
-                  <text class="iconfont" :class="item.relevance_id ? 'icon-shoucang1' : 'icon-dianzan'"></text>
-                  <text class="collect">{{item.count_start}}</text>
-                </view>
-              </view>
-            </view>
-          </view>
-        </block>
-      </view>
-      <view class="empty_wrapper" v-if="emptyShow">
-        <u-empty :show="emptyShow" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
-      </view>
-    </view>
-
-    <u-picker :defaultIndex="[0,0]" :show="showPicker" ref="uPicker" :columns="columnData" @confirm="confirm"
-      @cancel="showPicker = false" @change="changeHandler" keyName="name"></u-picker>
-
-    <!-- <view class="bg_color"></view> -->
-
-    <!-- <m-tabbar native>
-      <template v-slot:tabbar_index_2>
-        <view class="custom_style">
-          <view class="custom_style_icon"></view>
-        </view>
-      </template>
-    </m-tabbar> -->
-  </view>
-</template>
-
-<script>
-  import mTabbar from '@/components/m-tabbar/m-tabbar.vue'
-  import zbpSwiper from '@/components/zbpSwiper'
-  import { getSlideAPI } from '@/api/lihai.js'
-  import { graphicLstApi, getTopicList, graphicStartApi } from '@/api/community.js'
-  import { getIndexData, getDiy } from '@/api/api.js'
-  import { getGeocoder, merClassifly } from '@/api/store.js';
-  import { getArea, getStreet } from '@/api/article.js';
-  import { Toast } from '@/libs/uniApi'
-  export default {
-    components: {
-      mTabbar,
-      zbpSwiper
-    },
-    data() {
-      return {
-        bgColor: '',
-        showPicker: false,
-        columnData: [],
-        show: false,
-        swiper: {
-          url: [{
-            img: ''
-          }],
-          indicatorDots: true, // 显示面板指示点
-          vertical: false, // 滑动方向是否为纵向
-          autoplay: true, // 是否自动切换
-          interval: 2000, // 自动切换时间间隔
-          duration: 500 // 滑动动画时长
-        },
-        tabsData: {
-          list: [],
-          tabsActive: 0,
-          activeStyle: {
-            color: '#fff',
-            fontWeight: 'bold',
-            borderRadius: '100px',
-            backgroundColor: '#F84221',
-            padding: '15.79rpx 21.05rpx'
-          },
-          inactiveStyle: {
-            color: '#000',
-            padding: '15.79rpx 21.05rpx',
-          }
-        },
-        where: {
-          category_id: 0,
-          page: 1,
-          limit: 30
-        },
-        currentItemId: 69, // 默认获取 社区的数据 0 表示推荐 || 69 社区
-        keyword: '',
-        location: '',
-        emptyShow: false,
-        street: '',
-        cateGoods: []
-      }
-    },
-    onLoad() {
-      this.getBanner()
-      this.getCateList()
-      this.getGoods()
-      this.selfLocation()
-      this.Area()
-    },
-    onShow() {},
-    methods: {
-      // 轮播图变化背景
-      swiperChange(e) {
-        let { current, source } = e.detail;
-        if (source === 'autoplay' || source === 'touch') {
-          this.bgColor = this.swiper.url[e.detail.current]['img']
-        }
-      },
-      confirm(e) {
-        this.where.street_id = e.value[1].code
-        this.showPicker = false
-      },
-      changeHandler(e) {
-        const { columnIndex, value, values, index, picker = this.$refs.uPicker } = e;
-        if (columnIndex === 0) {
-          getStreet({ area_code: value[0]['code'] }).then(res => {
-            this.$refs.uPicker.setColumnValues(1, res.data);
-          });
-        }
-      },
-      Area() {
-        getArea({ city_code: 510500 }).then(res => {
-          this.$refs.uPicker.setColumnValues(0, res.data);
-          this.Street(res.data[0]['code']);
-        });
-      },
-      Street(code) {
-        getStreet({ area_code: code }).then(res => {
-          this.$refs.uPicker.setColumnValues(1, res.data);
-        });
-      },
-      gogogo(item) {
-        if (this.tabsData.tabsActive == 1) {
-          uni.navigateTo({
-            url: '/pages/short_video/nvueSwiper/index?id=' + item.community_id
-          })
-        } else {
-          uni.navigateTo({
-            url: '/pages/plantGrass/plant_detail/index?id=' + item.community_id
-          })
-        }
-      },
-      giveStart(item) {
-        let status = item.relevance_id ? 0 : 1
-        graphicStartApi(item.community_id, { status: status }).then(res => {
-          Toast(res.message)
-          this.getGoods()
-        })
-      },
-      dianji() {
-        this.show = !this.show
-      },
-      // 获取发现商品
-      getGoods: function() {
-        // 数据写死：默认社区数据 category_id=69&page=1&limit=30
-        graphicLstApi(this.where).then(res => {
-          this.cateGoods = res.data.list
-          res.data.list.length <= 0 ? this.emptyShow = true : this.emptyShow = false
-        })
-      },
-      /*获取分类列表*/
-      async getCateList() {
-        const { data } = await getTopicList()
-        this.tabsData.list = [{
-          cate_name: "推荐",
-          category_id: 0
-        }, { cate_name: "视频", category_id: -1, children: [] }, ...data]
-      },
-      tabsChange(item) {
-        this.where.category_id = item.category_id
-        this.getGoods()
-        this.street_id = item.id
-        this.tabsData.tabsActive = item.index
-        if (item.index == 1) {
-          uni.navigateTo({
-            url: '/pages/short_video/nvueSwiper/index?id=' + '136'
-          })
-        }
-      },
-      async getBanner() {
-        const { data } = await getDiy({ id: 0 })
-        if (data.value['1683638943100000']) {
-          this.swiper.url = data.value['1683638943100000'].swiperConfig.list
-        } else {
-          this.swiper.url = data.value['1683875164005000'].swiperConfig.list
-        }
-        this.bgColor = this.swiper.url[0].img
-      },
-      selfLocation() {
-        uni.getLocation({
-          type: 'gcj02',
-          success: (res) => {
-            let latitude, longitude;
-            latitude = res.latitude.toString();
-            longitude = res.longitude.toString();
-            getGeocoder({ lat: latitude, long: longitude }).then(res => {
-              this.$store.commit('setLocation', res.data)
-              this.street = res.data.address_component.street
-            }).catch(err => {
-              uni.showToast({ title: err, icon: 'none' })
-            })
-          },
-          fail: (err) => {
-            uni.showToast({
-              title: err.errMsg,
-              icon: 'none',
-              duration: 1000
-            });
-          }
-        });
-      },
-    },
-    onPullDownRefresh() {
-      this.getBanner()
-      this.getCateList()
-      this.getGoods()
-      this.selfLocation()
-      this.Area()
-      uni.stopPullDownRefresh()
-    }
-  }
-</script>
-
-<style lang="scss">
-  page {
-    // background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 100%);
-  }
-
-  // 顶部
-  .head-wrapper {
-    position: relative;
-    padding-top: 78.95rpx;
-    overflow: hidden;
-
-    .color-lump {
-      z-index: 1;
-      position: absolute;
-      bottom: -86px;
-      left: 50%;
-      transform: translate(-50%, 0);
-      width: 102%;
-      height: 133px;
-      border-radius: 30px 30px 0 0;
-      background-color: #fff;
-    }
-
-    .bg-img {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      /* #ifdef MP || APP-PLUS */
-      z-index: -1;
-      /* #endif */
-      /* #ifdef H5 */
-      z-index: 0;
-      /* #endif */
-      z-index: 0;
-      filter: blur(0);
-      overflow: hidden;
-
-      img {
-        width: 100%;
-        height: 100%;
-        filter: blur(30rpx);
-        transform: scale(1.5);
-      }
-    }
-
-    .site-box {
-      margin: 0 auto;
-      width: 694.74rpx;
-      height: 66.67rpx;
-      margin-bottom: 26.32rpx;
-      position: relative;
-
-      // 位置
-      .place_wrapper {
-        color: #fff;
-        margin-right: 24.56rpx;
-        font-size: 31.58rpx;
-
-        .town_name {
-          margin-left: 10.53rpx;
-        }
-      }
-
-      .iconfont {
-        font-size: 35.09rpx;
-      }
-    }
-
-    .my-main {
-      transition: background-color .5s ease;
-    }
-
-    .search_content {
-      margin: 0 auto;
-      width: 694.74rpx;
-      height: 61.4rpx;
-      padding: 2px 2px 2px 21.05rpx;
-      border-radius: 100px;
-      background: #fff;
-      margin-bottom: 17.54rpx;
-      position: relative;
-      box-sizing: border-box;
-
-      .icon-sousuo {
-        font-size: 26.32rpx;
-        font-weight: bold;
-        color: #c8c7c6;
-        margin-right: 17.54rpx;
-      }
-
-      .search_btn {
-        color: #fff;
-        width: 105.26rpx;
-        height: 52.63rpx;
-        line-height: 52.63rpx;
-        background: #f84221;
-        border-radius: 100px;
-        font-size: 28.07rpx;
-      }
-    }
-
-    .supply_chains-head {
-      margin-bottom: 31.58rpx;
-      position: relative;
-      z-index: 2;
-
-      .swiper {
-        width: 694.74rpx;
-        height: 242.11rpx;
-        margin: 0 auto;
-
-        .swi_item {
-          width: 100%;
-          height: 242.11rpx;
-        }
-      }
-    }
-  }
-
-  .Circle_friends {
-    position: relative;
-    padding: 0 0 87.72rpx 0;
-    background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 100%);
-  }
-
-  .circle_friends_wrapper {
-    position: relative;
-    z-index: 2;
-  }
-
-
-
-  .bg_color {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
-    width: 100%;
-    height: 940.35rpx;
-    background: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/home_bg.png") no-repeat;
-    background-size: cover;
-  }
-
-  .search_wrapper {
-    width: 694.74rpx;
-    margin: 0 auto;
-  }
-
-  .tabs_wrapper {
-    width: 694.74rpx;
-    margin: 0 auto;
-    margin-top: 0;
-    margin-bottom: 21.05rpx;
-
-    ::v-deep .u-tabs__wrapper__nav__item {
-      padding: 0 !important;
-    }
-  }
-
-  .empty_wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .goods {
-    margin: 0 auto;
-    width: 694.74rpx;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-
-    .goods_item {
-      width: 342.11rpx;
-      height: 491.23rpx;
-      border-radius: 8px;
-      overflow: hidden;
-      background-color: #fff;
-      display: flex;
-      flex-direction: column;
-      margin-bottom: 10.53rpx;
-
-      .goods_img {
-        width: 100%;
-        height: 294.74rpx;
-      }
-
-      .botm {
-        flex: 1;
-        padding: 0 14.04rpx;
-        padding-bottom: 21.05rpx;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-
-        .title {
-          margin: 12px 0;
-          width: 100%;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: -webkit-box;
-          -webkit-line-clamp: 2;
-          -webkit-box-orient: vertical;
-        }
-
-        .goods_info {
-          justify-content: space-between;
-
-          .g_img {
-            width: 60rpx;
-            height: 60rpx;
-            border-radius: 50%;
-          }
-
-          .g_name {
-            margin-left: 8.77rpx;
-            width: 100.63rpx;
-            text-overflow: ellipsis;
-            /* 溢出显示省略号 */
-            overflow: hidden;
-            /* 溢出隐藏 */
-            white-space: nowrap;
-            /* 强制不换行 */
-          }
-
-          .nice_box {
-            display: flex;
-            align-items: center;
-
-            .isshow {
-              color: #FE3530 !important;
-            }
-
-            .iconfont {
-              font-size: 30rpx;
-            }
-
-            .icon-shoucang1 {
-              color: #F84221;
-            }
-
-            .collect {
-              font-size: 24rpx;
-              margin-left: 5rpx;
-            }
-          }
-        }
-      }
-    }
-  }
-</style>
\ No newline at end of file
+<template>
+	<view class="Circle_friends">
+		<view class="circle_friends_wrapper">
+
+			<zbpSwiper></zbpSwiper>
+
+			<view class="tabs_wrapper">
+				<u-tabs :list="tabsData.list" @click="tabsChange" :activeStyle="tabsData.activeStyle"
+					:inactiveStyle="tabsData.inactiveStyle" lineHeight="0" keyName="cate_name"></u-tabs>
+			</view>
+
+			<view class="goods">
+				<block v-for="(item,index) in cateGoods" :key="index">
+					<view class="goods_item" @click="gogogo(item)">
+						<image class="goods_img" :src="item.image[0]" mode="aspectFill"></image>
+						<view class="botm">
+							<view class="title">{{item.title}}</view>
+							<view class="goods_info flex_a_c">
+								<view class="l_info flex_a_c">
+									<image :src="(item.author && item.author.avatar) || '/static/images/f.png'"
+										mode="aspectFill" class="g_img"></image>
+									<view class="g_name">{{item.author && item.author.nickname}}</view>
+								</view>
+								<view class="nice_box" @click.stop="giveStart(item)">
+									<text class="iconfont"
+										:class="item.relevance_id ? 'icon-shoucang1' : 'icon-dianzan'"></text>
+									<text class="collect">{{item.count_start}}</text>
+								</view>
+							</view>
+						</view>
+					</view>
+				</block>
+			</view>
+			<view class="empty_wrapper" v-if="emptyShow">
+				<u-empty :show="emptyShow" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
+			</view>
+		</view>
+
+		<u-picker :defaultIndex="[0,0]" :show="showPicker" ref="uPicker" :columns="columnData" @confirm="confirm"
+			@cancel="showPicker = false" @change="changeHandler" keyName="name"></u-picker>
+
+		<!-- <view class="bg_color"></view> -->
+
+		<!-- <m-tabbar native>
+      <template v-slot:tabbar_index_2>
+        <view class="custom_style">
+          <view class="custom_style_icon"></view>
+        </view>
+      </template>
+    </m-tabbar> -->
+	</view>
+</template>
+
+<script>
+	import mTabbar from '@/components/m-tabbar/m-tabbar.vue'
+	import zbpSwiper from '@/components/zbpSwiper'
+	import {
+		getSlideAPI
+	} from '@/api/lihai.js'
+	import {
+		graphicLstApi,
+		getTopicList,
+		graphicStartApi
+	} from '@/api/community.js'
+	import {
+		getIndexData,
+		getDiy
+	} from '@/api/api.js'
+	import {
+		getGeocoder,
+		merClassifly
+	} from '@/api/store.js';
+	import {
+		getArea,
+		getStreet
+	} from '@/api/article.js';
+	import {
+		Toast
+	} from '@/libs/uniApi'
+	export default {
+		components: {
+			mTabbar,
+			zbpSwiper
+		},
+		data() {
+			return {
+				bgColor: '',
+				showPicker: false,
+				columnData: [],
+				show: false,
+				swiper: {
+					url: [{
+						img: ''
+					}],
+					indicatorDots: true, // 显示面板指示点
+					vertical: false, // 滑动方向是否为纵向
+					autoplay: true, // 是否自动切换
+					interval: 2000, // 自动切换时间间隔
+					duration: 500 // 滑动动画时长
+				},
+				tabsData: {
+					list: [],
+					tabsActive: 0,
+					activeStyle: {
+						color: '#fff',
+						fontWeight: 'bold',
+						borderRadius: '100px',
+						backgroundColor: '#F84221',
+						padding: '15.79rpx 21.05rpx'
+					},
+					inactiveStyle: {
+						color: '#000',
+						padding: '15.79rpx 21.05rpx',
+					}
+				},
+				where: {
+					category_id: 0,
+					page: 1,
+					limit: 30
+				},
+				currentItemId: 69, // 默认获取 社区的数据 0 表示推荐 || 69 社区
+				keyword: '',
+				location: '',
+				emptyShow: false,
+				street: '',
+				cateGoods: []
+			}
+		},
+		onLoad() {
+			this.getBanner()
+			this.getCateList()
+			this.getGoods()
+			this.selfLocation()
+			this.Area()
+		},
+		onShow() {},
+		methods: {
+			// 轮播图变化背景
+			swiperChange(e) {
+				let {
+					current,
+					source
+				} = e.detail;
+				if (source === 'autoplay' || source === 'touch') {
+					this.bgColor = this.swiper.url[e.detail.current]['img']
+				}
+			},
+			confirm(e) {
+				this.where.street_id = e.value[1].code
+				this.showPicker = false
+			},
+			changeHandler(e) {
+				const {
+					columnIndex,
+					value,
+					values,
+					index,
+					picker = this.$refs.uPicker
+				} = e;
+				if (columnIndex === 0) {
+					getStreet({
+						area_code: value[0]['code']
+					}).then(res => {
+						this.$refs.uPicker.setColumnValues(1, res.data);
+					});
+				}
+			},
+			Area() {
+				getArea({
+					city_code: 510500
+				}).then(res => {
+					this.$refs.uPicker.setColumnValues(0, res.data);
+					this.Street(res.data[0]['code']);
+				});
+			},
+			Street(code) {
+				getStreet({
+					area_code: code
+				}).then(res => {
+					this.$refs.uPicker.setColumnValues(1, res.data);
+				});
+			},
+			gogogo(item) {
+				if (this.tabsData.tabsActive == 1) {
+					uni.navigateTo({
+						//#ifdef APP
+						url: '/pages/short_video/appSwiper/index?id=' + item.community_id 
+						//#endif
+						//#ifndef APP
+						url: '/pages/short_video/nvueSwiper/index?id=' + item.community_id
+						//#endif
+					})
+				} else {
+					uni.navigateTo({
+						url: '/pages/plantGrass/plant_detail/index?id=' + item.community_id
+					})
+				}
+			},
+			giveStart(item) {
+				let status = item.relevance_id ? 0 : 1
+				graphicStartApi(item.community_id, {
+					status: status
+				}).then(res => {
+					Toast(res.message)
+					this.getGoods()
+				})
+			},
+			dianji() {
+				this.show = !this.show
+			},
+			// 获取发现商品
+			getGoods: function() {
+				// 数据写死：默认社区数据 category_id=69&page=1&limit=30
+				graphicLstApi(this.where).then(res => {
+					this.cateGoods = res.data.list
+					res.data.list.length <= 0 ? this.emptyShow = true : this.emptyShow = false
+				})
+			},
+			/*获取分类列表*/
+			async getCateList() {
+				const {
+					data
+				} = await getTopicList()
+				this.tabsData.list = [{
+					cate_name: "推荐",
+					category_id: 0
+				}, {
+					cate_name: "视频",
+					category_id: -1,
+					children: []
+				}, ...data]
+			},
+			tabsChange(item) {
+				this.where.category_id = item.category_id
+				this.getGoods()
+				this.street_id = item.id
+				this.tabsData.tabsActive = item.index
+				if (item.index == 1) {
+					uni.navigateTo({
+						url: '/pages/short_video/nvueSwiper/index?id=' + '136'
+					})
+				}
+			},
+			async getBanner() {
+				const {
+					data
+				} = await getDiy({
+					id: 0
+				})
+				if (data.value['1683638943100000']) {
+					this.swiper.url = data.value['1683638943100000'].swiperConfig.list
+				} else {
+					this.swiper.url = data.value['1683875164005000'].swiperConfig.list
+				}
+				this.bgColor = this.swiper.url[0].img
+			},
+			selfLocation() {
+				uni.getLocation({
+					type: 'gcj02',
+					success: (res) => {
+						let latitude, longitude;
+						latitude = res.latitude.toString();
+						longitude = res.longitude.toString();
+						getGeocoder({
+							lat: latitude,
+							long: longitude
+						}).then(res => {
+							this.$store.commit('setLocation', res.data)
+							this.street = res.data.address_component.street
+						}).catch(err => {
+							uni.showToast({
+								title: err,
+								icon: 'none'
+							})
+						})
+					},
+					fail: (err) => {
+						uni.showToast({
+							title: err.errMsg,
+							icon: 'none',
+							duration: 1000
+						});
+					}
+				});
+			},
+		},
+		onPullDownRefresh() {
+			this.getBanner()
+			this.getCateList()
+			this.getGoods()
+			this.selfLocation()
+			this.Area()
+			uni.stopPullDownRefresh()
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		// background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 100%);
+	}
+
+	// 顶部
+	.head-wrapper {
+		position: relative;
+		padding-top: 78.95rpx;
+		overflow: hidden;
+
+		.color-lump {
+			z-index: 1;
+			position: absolute;
+			bottom: -86px;
+			left: 50%;
+			transform: translate(-50%, 0);
+			width: 102%;
+			height: 133px;
+			border-radius: 30px 30px 0 0;
+			background-color: #fff;
+		}
+
+		.bg-img {
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			top: 0;
+			/* #ifdef MP || APP-PLUS */
+			z-index: -1;
+			/* #endif */
+			/* #ifdef H5 */
+			z-index: 0;
+			/* #endif */
+			z-index: 0;
+			filter: blur(0);
+			overflow: hidden;
+
+			img {
+				width: 100%;
+				height: 100%;
+				filter: blur(30rpx);
+				transform: scale(1.5);
+			}
+		}
+
+		.site-box {
+			margin: 0 auto;
+			width: 694.74rpx;
+			height: 66.67rpx;
+			margin-bottom: 26.32rpx;
+			position: relative;
+
+			// 位置
+			.place_wrapper {
+				color: #fff;
+				margin-right: 24.56rpx;
+				font-size: 31.58rpx;
+
+				.town_name {
+					margin-left: 10.53rpx;
+				}
+			}
+
+			.iconfont {
+				font-size: 35.09rpx;
+			}
+		}
+
+		.my-main {
+			transition: background-color .5s ease;
+		}
+
+		.search_content {
+			margin: 0 auto;
+			width: 694.74rpx;
+			height: 61.4rpx;
+			padding: 2px 2px 2px 21.05rpx;
+			border-radius: 100px;
+			background: #fff;
+			margin-bottom: 17.54rpx;
+			position: relative;
+			box-sizing: border-box;
+
+			.icon-sousuo {
+				font-size: 26.32rpx;
+				font-weight: bold;
+				color: #c8c7c6;
+				margin-right: 17.54rpx;
+			}
+
+			.search_btn {
+				color: #fff;
+				width: 105.26rpx;
+				height: 52.63rpx;
+				line-height: 52.63rpx;
+				background: #f84221;
+				border-radius: 100px;
+				font-size: 28.07rpx;
+			}
+		}
+
+		.supply_chains-head {
+			margin-bottom: 31.58rpx;
+			position: relative;
+			z-index: 2;
+
+			.swiper {
+				width: 694.74rpx;
+				height: 242.11rpx;
+				margin: 0 auto;
+
+				.swi_item {
+					width: 100%;
+					height: 242.11rpx;
+				}
+			}
+		}
+	}
+
+	.Circle_friends {
+		position: relative;
+		padding: 0 0 87.72rpx 0;
+		background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 100%);
+	}
+
+	.circle_friends_wrapper {
+		position: relative;
+		z-index: 2;
+	}
+
+
+
+	.bg_color {
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 1;
+		width: 100%;
+		height: 940.35rpx;
+		background: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/home_bg.png") no-repeat;
+		background-size: cover;
+	}
+
+	.search_wrapper {
+		width: 694.74rpx;
+		margin: 0 auto;
+	}
+
+	.tabs_wrapper {
+		width: 694.74rpx;
+		margin: 0 auto;
+		margin-top: 0;
+		margin-bottom: 21.05rpx;
+
+		::v-deep .u-tabs__wrapper__nav__item {
+			padding: 0 !important;
+		}
+	}
+
+	.empty_wrapper {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.goods {
+		margin: 0 auto;
+		width: 694.74rpx;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+
+		.goods_item {
+			width: 342.11rpx;
+			height: 491.23rpx;
+			border-radius: 8px;
+			overflow: hidden;
+			background-color: #fff;
+			display: flex;
+			flex-direction: column;
+			margin-bottom: 10.53rpx;
+
+			.goods_img {
+				width: 100%;
+				height: 294.74rpx;
+			}
+
+			.botm {
+				flex: 1;
+				padding: 0 14.04rpx;
+				padding-bottom: 21.05rpx;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+
+				.title {
+					margin: 12px 0;
+					width: 100%;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					display: -webkit-box;
+					-webkit-line-clamp: 2;
+					-webkit-box-orient: vertical;
+				}
+
+				.goods_info {
+					justify-content: space-between;
+
+					.g_img {
+						width: 60rpx;
+						height: 60rpx;
+						border-radius: 50%;
+					}
+
+					.g_name {
+						margin-left: 8.77rpx;
+						width: 100.63rpx;
+						text-overflow: ellipsis;
+						/* 溢出显示省略号 */
+						overflow: hidden;
+						/* 溢出隐藏 */
+						white-space: nowrap;
+						/* 强制不换行 */
+					}
+
+					.nice_box {
+						display: flex;
+						align-items: center;
+
+						.isshow {
+							color: #FE3530 !important;
+						}
+
+						.iconfont {
+							font-size: 30rpx;
+						}
+
+						.icon-shoucang1 {
+							color: #F84221;
+						}
+
+						.collect {
+							font-size: 24rpx;
+							margin-left: 5rpx;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>
diff --git a/pages/supply_chains/supply_chains.vue b/pages/supply_chains/supply_chains.vue
index 5e901a7..6d3dbaa 100644
--- a/pages/supply_chains/supply_chains.vue
+++ b/pages/supply_chains/supply_chains.vue
@@ -1,7 +1,7 @@
 <template>
   <view class="Circle_friends">
     <view class="circle_friends_wrapper">
-      <zbpSwiper :isSelectPlace="true" @selectPlce="selectPlce"></zbpSwiper>
+      <zbpSwiper></zbpSwiper>
       <view class="shop_wrapper">
         <navigator class="l_yun" hover-class="none"
           :url="`/pages/nongKe/supply_chain/supplier?type_id=10&street_id=${street_id}`">
@@ -162,7 +162,7 @@
   }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
   page {
     background-color: #F5F5F5;
   }
@@ -188,7 +188,7 @@
 
     .l_yun {
       width: 456.14rpx;
-      border-radius: 8px;
+      border-radius: 16rpx;
       background-image: url("@/static/images/zonghe.png");
       background-repeat: no-repeat;
       background-size: cover;
@@ -223,7 +223,7 @@
 
         .iconlihai {
           font-size: 24.56rpx;
-          margin-left: 8px;
+          margin-left: 16rpx;
         }
       }
 
@@ -250,7 +250,7 @@
       background: url("@/static/images/lihaiyun.png") no-repeat;
       background-size: cover;
       box-sizing: border-box;
-      border-radius: 8px;
+      border-radius: 16rpx;
       color: #fff;
       font-weight: bold;
 
@@ -271,7 +271,7 @@
     width: 694.74rpx;
     margin: 0 auto;
     background-color: #fff;
-    border-radius: 8px;
+    border-radius: 16rpx;
     padding: 0 24.56rpx;
     box-sizing: border-box;