app-AgricultureSmart/uniapp/pages/index/index.vue

<template>
<!--	<view class="content">-->
<!--		<image class="logo" src="/static/logo.png"></image>-->
<!--		<view class="text-area">-->
<!--			<text class="title">{{title}}</text>-->
<!--		</view>-->
<!--    <button @click="test">测试按钮</button>-->

<!--    <van-button type="primary">van的button</van-button>-->
<!--	</view>-->




  <view class="content">
    <van-search
        :value="value"
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
        @change="onChange"
        @click="gotoSearch"
    />
    <!-- show-action -->
    <!-- 		<scroll-view scroll-x="true">
          <view>1</view>
        </scroll-view> -->


    <!-- <view class="uni-margin-wrap">
           <swiper :autoplay="true">
             <swiper-item item-id="A">
               <view class="swiper-item uni-bg-red"><text class="swiper-item-Text">A</text></view>
             </swiper-item>
             <swiper-item item-id="B">
               <view class="swiper-item uni-bg-green"><text class="swiper-item-Text">B</text></view>
             </swiper-item>
             <swiper-item item-id="C">
               <view class="swiper-item uni-bg-blue"><text class="swiper-item-Text">C</text></view>
             </swiper-item>
           </swiper>
         </view> -->

    <!-- 轮播图区域 -->

    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true" class="swiper">
      <swiper-item v-for="(item, i) in swiperList" :key="i" class="swiper-item">
        <navigator class="swiper-image" :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id">
          <img :src="item.image_src" alt="">
        </navigator>
        <view class="shop-info-container">
          <text class="shop-name" @click="navigateToDetail(item)" style="font-size: 28rpx;  color: #fff;">{{ item.shop_name }}</text>
        </view>
      </swiper-item>
    </swiper>

    <!-- <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
      <text class="title">{{title}}</text>
    </view> -->
    <!-- 123 -->
<!--    <my-grid :shops="getShowShops()"></my-grid>-->
<!--    <shop-card></shop-card>-->
    <view v-if="flag===0">
    <view v-for="(item,i) in getShowShops()" :key="i">
       <shop-card :shop-id="item.id" :shop-name="item.storeName" :shop-icon="item.storePicUrl" @click="nevigateToDetail(item.id)" :shop-info="200" :shopdistance="800" :tag="tags[i]" :coupon="[{desc:'满20减2',full:20,count:2},{desc:'满50减8',full:50,count:8}]" :mark="4.5"></shop-card>
    </view>
    </view>
    <view v-else>
      <shop-card :shop-id="getShowShops()[flag-1].id" :shop-name="getShowShops()[flag-1].storeName" :shop-icon="getShowShops()[flag-1].storePicUrl" @click="nevigateToDetail(getShowShops()[flag-1].id)" :shop-info="200" :shopdistance="0.8" :tag="tags[i]" :coupon="[{desc:'满20减2',full:20,count:2},{desc:'满50减8',full:50,count:8}]" :mark="4.5"></shop-card>
    </view>
  </view>
</template>

<script >
import {mapState,mapMutations,mapGetters} from'vuex'
console.log(uni.$http)
	export default {
		data() {
			return {
        tags:[['应季水果综合榜TOP1'],['无公害绿色蔬菜'],['0添加糖分色素']],
        coupon:[
            [{desc:'满20减2',full:20,count:2},{desc:'满50减8',full:50,count:8}],
          [{desc:'满20减2',full:20,count:2},{desc:'满50减8',full:50,count:8}],
          [{desc:'满20减2',full:20,count:2},{desc:'满50减8',full:50,count:8}]],
        title: 'Hello',
        value:"",
        flag:0,
        //这是轮播图的数据列表
        swiperList:[{goods_id: 123,
          image_src: "../../static/lunbo/1.jpg",
          shop_name: "清甜多汁的鲜果,来源自淮铺肥沃的土地!我们严格把关每一个果品的品质,为您带来全季新鲜的水果体验。",id:1},{goods_id: 124,
          image_src: "../../static/lunbo/2.jpg",
          shop_name: "淮铺这片富饶之地孕育了各种营养蔬菜,丰富的维生素和矿物质滋养着您的健康。品尝大自然的馈赠,尽在淮铺蔬菜。",id:2},{goods_id: 125,
          image_src: "../../static/lunbo/3.jpg",
          shop_name: "酸甜可口的天然果汁,新鲜压榨而来!没有任何添加剂,只有纯正的水果滋味。让您随时随地补充果汁元气!",id:3}],
			}
		},
		onLoad() {
      // this.getShowShops()
		},
		methods: {
      ...mapGetters('m_shop',['getShowShops']),
      nevigateToDetail(item){
        uni.navigateTo({
          url: `/subpkg/shopdetail/shopdetail?shopID=${JSON.stringify(item.id)}`
        })
      },
      test() {
        console.log(1, "test");
      },
      onSearch() {
        if (this.value==="水果") {
          this.flag=1
        }
        else if (this.value==="蔬菜") {
          this.flag=2
        }
        else {
          this.flag=0
        }
        uni.reLaunch({
          url: '/pages//pages/index/index'
        });
        console.log(this.flag)
        console.log(this.value)
        console.log('查询了');
      },

      onCancel(){
        console.log('取消了');
      },
      gotoSearch(){
        console.log('去了');
        uni.navigateTo({
          url:"/subpkg/search/search"
        })
      },
      onChange(target){
        console.log('修改了',target);
        this.value=target.detail
      },
      navigateToDetail(item) {
        console.log(item)
        uni.navigateTo({
          url: `/subpkg/shopdetail/shopdetail?shopID=${JSON.stringify(item.id)}`
        })
      }

    },
	}
</script>

<style lang="scss">
  //swiper{
  //  height: 330rpx;
  //  width: 95%;
  //  .swiper-item,
  //  image{
  //    width: 100%;
  //    height: 100%;
  //  }
  //}
  //.content {
  //  display: flex;
  //  flex-direction: column;
  //  align-items: center;
  //  justify-content: center;
  //}

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }



  .swiper {
    position: relative;
  }
  //
  .swiper-item {
    position: relative;
  }

  .swiper-image {
    display: block;
  }

  .shop-info-container {
    position: absolute;
    height: 40px;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10rpx;
    text-align: center;
  }
  //
  //.shop-name {
  //  font-size: 28rpx;
  //  color: #fff;
  //}


</style>