<template>


<div>
	<Myheader></Myheader>

    <unlogin></unlogin>
	<!-- Suppose in header end -->
	<van-swipe :autoplay="3000">
		<van-swipe-item v-for="(banner, index) in banners" :key="index">
			<img :src="banner.src"  class="useraimg"/>
		</van-swipe-item>
	</van-swipe>
 
  
<div class="online bold rc-md-down" id="fixed-catbar-seperator"></div>
   <!-- <div v-swiper:mySwiper="swiperOption" class="swiperWrap">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(banner,index ) in banners" :key="index">
                <img :src="banner.src">
            </div>
        </div>
        <div class="swiper-pagination swiper-pagination-bullets"></div>
  </div> -->
<div class="rc-max-width--xl">
	<div class="usermain">
		<div :class="searchBar?'rc-ma':'rc-ma searchBara'">
			<div v-if="!searchBar" class="online bold rc-md-down"></div>
			<ul class="ul-zhuan rc-margin-y--xl">
				<li 
					v-for="(item, index) in discountlist"
					:key="index"
					@click="selectGoods(item, index)"
					:class="activeIndex == index ? 'active' : 'unactive'"
				>
					<img :src="item.catimage" alt="">
					<span>{{ item.title }}</span>
				</li>
			</ul>
		</div>
	</div>
</div>
<div class="online bold rc-md-up" v-show="catproduct"></div>

<div class="rc-full-width">
  <div class="rc-lunbo rc-full-width">
    <!-- <h2>明星猫粮</h2> -->
   <div class="pageFullScreen" id="xxxFullScreen" v-show="catproduct" ref="mingxing">
        <!-- 内容 -->
        <div class="swiper-container rc-full-width rc-padding-y--md" id="swiper1">
           <h2 class="rc-beta rc-text--center">{{usertitle}}</h2>
             <!-- 轮播图 -->
            <swiper :options="swiperOption">
                <swiper-slide class="swiper-slide" v-for="(item, key) in catlistvideo" :key="key" >
                  <div class="rc-video">
                    <div class="uservideo">
            
                    </div>
               
                   <div class="rc-right">
						<img :src=item.catimage alt="">
						<span>{{item.title}}</span>
						<p>{{item.detail}}</p>
						<em>{{item.price}}</em>
						<strong class="ts-standard-btn ts-standard-btn--two center" @click="userbuy(item,index)">立即购买</strong>
                   </div>
                   </div>
                         <div class="sw-center" >
							<div class="rc-click"  @click="selectproduce(item,index)">
								<div class="uservideo">
									<video width="300px" height="251" controls="controls">
										<source :src= item.video type="video/ogg" autoplay>
									</video>
								</div>
                    
								<img :src=item.catimage alt="">
								<span>{{item.title}}</span>
								<p>{{item.detail}}</p>
								<em>{{item.price}}</em>
							</div>
							<div class="rc-full-width rc-margin-y--md">
								<i @click="userbuy(item,index)" class="ts-standard-btn ts-standard-btn--two center">立即购买</i>
							</div>
                         </div>
       
                </swiper-slide>
            </swiper>
        </div>


</div>




 


<div class="online bold" v-show="onemao"></div>
 <div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" ref="usercontent" v-show="onemao">
   <h2 class="rc-beta rc-text--center" >全价猫湿粮</h2>
<van-tabs @change='catclick' class="van-tabs">
  <van-tab v-for="(item,index) in discoun" :key="index" :title="item.title">
       <div class="rc-contair">
         <ul class="ts-product-list rc-margin-bottom--lg">
             <li v-for="(item,index) in catshi" :key="index" class="rc-margin-top--md">
				 <div class="rc-click rc-margin-bottom--md" @click="selectproduce(item,index)">
					<div class="rc-rccontair">
						<img :src=item.picture alt="">   
					</div>
				</div>
				<div class="rc-column">
					<div class="rc-click" @click="selectproduce(item,index)">
						<span>{{item.name}}</span>
						<i>0.001{{item.price}}</i>
					</div>
					<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong>
				</div>
             </li>
         </ul>
          
      
   <nuxt-link :to="`/productdetails/productlist/`">
     <div class="userserlect">
	   <span class="ts-standard-btn center">查看更多</span>
	 </div>
	</nuxt-link>
    
       
     </div>

  </van-tab>
</van-tabs>
	<div class="rc-selection">
         <ol>
			<li 
			  v-for="(item, index) in selection"
					:key="index"
					@click="selectGo(item, index)"
					:class="activeInde2 == index ? 'userselection' : 'unselection'"
				  >
					<span>{{ item.title }}</span>
			</li>
		</ol>
	<div class="rc-maa">
  <ul>
    <li 
      v-for="(item, index) in doglist"
            :key="index"
            @click="selectGoo(item, index)"
            :class="activeInde3 == index ? 'active' : 'unactive'"
          >
          <img :src="item.catimage" alt="">
            <span>{{ item.title }}</span>
    </li>
  </ul>
  </div>
         <div class="">
			<ul class="ts-product-list rc-margin-bottom--lg">
			    <li v-for="(item,index) in rccontair" :key="index" class="rc-margin-top--md">
							 <div class="rc-click rc-margin-bottom--md" @click="selectproduce(item,index)">
								<div class="rc-rccontair">
									<img :src=item.catimage alt="">   
								</div>
							</div>
							<div class="rc-column">
								<div class="rc-click" @click="selectproduce(item,index)">
									<span>{{item.title}}</span>
									<i>0.001{{item.price}}</i>
								</div>
								<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong>
							</div>
			    </li>
			</ul>
         
      <nuxt-link :to="`/productdetails/productlist/`">
     <div class="userserlect">
           <span class="ts-standard-btn center">查看更多</span>
         </div>
        </nuxt-link>
       
         
     </div>

      </div>
 </div>
 <div class="online bold" v-show="twomao"></div>
  <div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" v-show="twomao" ref="catgan">
   <h2 class="rc-beta rc-text--center">全价猫干粮</h2>
<van-tabs @change='catclick' class="van-tabs">
  <van-tab v-for="(item,index) in discoun" :key="index" :title="item.title">
       <div class="rc-contair">
			<ul class="ts-product-list rc-margin-bottom--lg">
			    <li v-for="(item,index) in catgan" :key="index" class="rc-margin-top--md">
					 <div class="rc-click rc-margin-bottom--md" @click="selectproduce(item,index)">
						<div class="rc-rccontair">
							<img :src=item.picture alt="">   
						</div>
					</div>
					<div class="rc-column">
						<div class="rc-click" @click="selectproduce(item,index)">
							<span>{{item.name}}</span>
							<i>0.001{{item.price}}</i>
						</div>
						<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong>
					</div>
			    </li>
			</ul>
         
    
   <nuxt-link :to="`/productdetails/productlist/`">
     <div class="userserlect">
           <span class="ts-standard-btn center">查看更多</span>
         </div>
        </nuxt-link>
     </div>

  </van-tab>
</van-tabs>
      <div class="rc-selection">

         <ol>
    <li 
      v-for="(item, index) in selection"
            :key="index"
            @click="selectGo(item, index)"
            :class="activeInde2 == index ? 'userselection' : 'unselection'"
          >
      
            <span>{{ item.title }}</span>
    </li>
  </ol>
     <div class="rc-maa">
  <ul>
 
     
    <li 
      v-for="(item, index) in doglist"
            :key="index"
            @click="selectGoo(item, index)"
            :class="activeInde3 == index ? 'active' : 'unactive'"
          >
          <img :src="item.catimage" alt="">
            <span>{{ item.title }}</span>
    </li>

  </ul>
  </div>
         <div class="rc-contair">
			 <ul class="ts-product-list rc-margin-bottom--lg">
			     <li v-for="(item,index) in rccontair" :key="index" class="rc-margin-top--md">
			 		 <div class="rc-click rc-margin-bottom--md" @click="selectproduce(item,index)">
			 			<div class="rc-rccontair">
			 				<img :src=item.catimage alt="">   
			 			</div>
			 		</div>
			 		<div class="rc-column">
			 			<div class="rc-click" @click="selectproduce(item,index)">
			 				<span>{{item.title}}</span>
			 				<i>0.001{{item.price}}</i>
			 			</div>
			 			<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong>
			 		</div>
			     </li>
			 </ul>         
     <nuxt-link :to="`/productdetails/productlist/`">
     <div class="userserlect">
           <span class="ts-standard-btn center">查看更多</span>
         </div>
        </nuxt-link>
       
         
     </div>

      </div>



 </div>
  <div class="online bold" v-show="dogshow"></div>
     <div class="pageFullScreen" id="xxxFullScreen" v-show="dogshow" ref="mingxing">
        <!-- 内容 -->
        <div class="swiper-container rc-full-width rc-padding-y--md" id="swiper1">
          <div class="oc-top">
           <h2 class="rc-beta rc-text--center">{{dogtitle}}</h2>
           </div>
             <!-- 轮播图 -->
            <swiper :options="swiperOption">
                <swiper-slide class="swiper-slide" v-for="(item, key) in doglistvideo" :key="key" >
                  <div class="rc-video">
                    <div class="uservideo">
            
                    </div>
               
                   <div class="rc-right">
						<img :src=item.catimage alt="">
						<span>{{item.title}}</span>
						<p>{{item.detail}}</p>
						<em>{{item.price}}</em>
						<strong class="ts-standard-btn ts-standard-btn--two center" @click="userbuy(item,index)">立即购买</strong>
                   </div>
                   </div>
                         <div class="sw-center" >
							<div class="rc-click"  @click="selectproduce(item,index)">
								<div class="uservideo">
									<video width="300px" height="251" controls="controls">
										<source :src= item.video type="video/ogg" autoplay>
									</video>
								</div>
                    
								<img :src=item.catimage alt="">
								<span>{{item.title}}</span>
								<p>{{item.detail}}</p>
								<em>{{item.price}}</em>
							</div>
							<div class="rc-full-width rc-margin-y--md">
								<i @click="userbuy(item,index)" class="ts-standard-btn ts-standard-btn--two center">立即购买</i>
							</div>
                         </div>
       
                </swiper-slide>
            </swiper>
        </div>


</div>

<div class="online bold" v-show="threemao"></div>

   <div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" v-show="threemao" ref="doggshi">
   <h2 class="rc-beta rc-text--center">全价犬湿粮</h2>
<van-tabs @change='userdog' class="van-tabs">
  <div class="online bold rc-md-down" v-show="threemao"></div>
  <van-tab v-for="(item,index) in dogtype" :key="index" :title="item.title">
    <div class="online bold" v-show="threemao"></div>
	<div class="usermain">
			<ul class="ul-dog usermain">
				<li 
					v-for="(item, index) in userdoglist"
					:key="index"
					@click="quanshi(item, index)"
					:class="activeIndex5 == index ? 'active' : 'unactive'"
				>
					<img :src="item.catimage" alt="">
					<span>{{ item.title }}</span>
				</li>
			</ul>
	</div>

       <div class="rc-contair">
			<ul class="ts-product-list rc-margin-bottom--lg">
			    <li v-for="(item,index) in dogshi" :key="index" class="rc-margin-top--md">
					 <div class="rc-click rc-margin-bottom--md" @click="selectproduce(item,index)">
						<div class="rc-rccontair">
							<img :src=item.picture alt="">   
						</div>
					</div>
					<div class="rc-column">
						<div class="rc-click" @click="selectproduce(item,index)">
							<span>{{item.name}}</span>
							<i>0.001{{item.price}}</i>
						</div>
						<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong>
					</div>
			    </li>
			</ul>
         
      
<nuxt-link :to="`/productdetails/productlist/`">
     <div class="userserlect">
           <span class="ts-standard-btn center">查看更多</span>
         </div>
        </nuxt-link>
       
       
         
     </div>

  </van-tab>
</van-tabs>
      <div class="rc-selection">

         <ol>
    <li 
      v-for="(item, index) in selection"
            :key="index"
            @click="selectGo(item, index)"
            :class="activeInde2 == index ? 'userselection' : 'unselection'"
          >
      
            <span>{{ item.title }}</span>
    </li>
  </ol>
     <div class="rc-maa">
  <ul>
 
     
    <li 
      v-for="(item, index) in doglist"
            :key="index"
            @click="selectGoo(item, index)"
            :class="activeInde3 == index ? 'active' : 'unactive'"
          >
          <img :src="item.catimage" alt="">
            <span>{{ item.title }}</span>
    </li>

  </ul>
  </div>
         <div class="rc-contair">
			 <ul class="ts-product-list rc-margin-bottom--lg">
			     <li v-for="(item,index) in rccontair" :key="index" class="rc-margin-top--md">
			 		 <div class="rc-click rc-margin-bottom--md" @click="selectproduce(item,index)">
			 			<div class="rc-rccontair">
			 				<img :src=item.catimage alt="">   
			 			</div>
			 		</div>
			 		<div class="rc-column">
			 			<div class="rc-click" @click="selectproduce(item,index)">
			 				<span>{{item.title}}</span>
			 				<i>0.001{{item.price}}</i>
			 			</div>
			 			<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong>
			 		</div>
			     </li>
			 </ul>
			 
         
  <nuxt-link :to="`/productdetails/productlist/`">
     <div class="userserlect">
           <span class="ts-standard-btn center">查看更多</span>
         </div>
        </nuxt-link>
       
         
     </div>

      </div>



 </div>

 

 <div class="online bold" v-show="fourmao"></div>
   <div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" v-show="fourmao" ref="dogan">
   <h2 class="rc-beta rc-text--center">全价犬干粮</h2>
<van-tabs @change='userdog' class="van-tabs">
   <div class="online bold" v-show="fourmao"></div>
  <van-tab v-for="(item,index) in dogtype" :key="index" :title="item.title">
    	<div class="usermain">
			<ul class="ul-dog usermain">
				<li 
					v-for="(item, index) in userdoglist"
					:key="index"
					@click="userdoghot(item, index)"
					:class="activeIndex6 == index ? 'active' : 'unactive'"
				>
					<img :src="item.catimage" alt="">
					<span>{{ item.title }}</span>
				</li>
			</ul>
	</div>
       <div class="rc-contair">
			<ul class="ts-product-list rc-margin-bottom--lg">
			    <li v-for="(item,index) in doggan" :key="index" class="rc-margin-top--md">
					 <div class="rc-click rc-margin-bottom--md" @click="selectproduce(item,index)">
						<div class="rc-rccontair">
							<img :src=item.picture alt="">   
						</div>
					</div>
					<div class="rc-column">
						<div class="rc-click" @click="selectproduce(item,index)">
							<span>{{item.name}}</span>
							<i>0.001{{item.price}}</i>
						</div>
						<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong>
					</div>
			    </li>
			</ul>
         
    <nuxt-link :to="`/productdetails/productlist/`">
     <div class="userserlect">
           <span class="ts-standard-btn center">查看更多</span>
         </div>
        </nuxt-link>
       
       
         
     </div>

  </van-tab>
</van-tabs>
      <div class="rc-selection">

         <ol>
    <li 
      v-for="(item, index) in selection"
            :key="index"
            @click="selectGo(item, index)"
            :class="activeInde2 == index ? 'userselection' : 'unselection'"
          >
      
            <span>{{ item.title }}</span>
    </li>
  </ol>
     <div class="rc-maa">
  <ul>
 
     
    <li 
      v-for="(item, index) in doglist"
            :key="index"
            @click="selectGoo(item, index)"
            :class="activeInde3 == index ? 'active' : 'unactive'"
          >
          <img :src="item.catimage" alt="">
            <span>{{ item.title }}</span>
    </li>

  </ul>
  </div>
         <div class="rc-contair">
			 <ul class="ts-product-list rc-margin-bottom--lg">
			     <li v-for="(item,index) in rccontair" :key="index" class="rc-margin-top--md">
			 		 <div class="rc-click rc-margin-bottom--md" @click="selectproduce(item,index)">
			 			<div class="rc-rccontair">
			 				<img :src=item.catimage alt="">   
			 			</div>
			 		</div>
			 		<div class="rc-column">
			 			<div class="rc-click" @click="selectproduce(item,index)">
			 				<span>{{item.title}}</span>
			 				<i>0.001{{item.price}}</i>
			 			</div>
			 			<strong class="ts-standard-btn ts-standard-btn--two rc-margin-y--md center" @click="selectproduce(item,index)">立即购买</strong>
			 		</div>
			     </li>
			 </ul>
		
      <nuxt-link :to="`/productdetails/productlist/`">
     <div class="userserlect">
           <span class="ts-standard-btn center">查看更多</span>
         </div>
        </nuxt-link>
       
         
     </div>

      </div>



 </div>
 <div class="online bold" v-show="fivemao"></div>

   <div class="selectionswitch rc-full-width rc-max-width--xl rc-padding-y--md" v-show="fivemao" ref="chufang">
   <h2 class="rc-beta rc-text--center">处方用粮</h2>
<van-tabs @change='userclick' class="van-tabs">
  <van-tab v-for="(item,index) in discounchufang" :key="index" :title="item.title">
       <div class="rc-contair">
			<ul class="ts-product-list rc-margin-bottom--lg">
			    <li v-for="(item,index) in processinformation" :key="index" class="rc-margin-top--md rc-padding-bottom--lg">
					 <div class="rc-click rc-margin-bottom--md" @click="selectproduce(item,index)">
						<div class="rc-rccontair">
							<img :src="`${usersetting}/${item.picFile}`">
						</div>
					</div>
					<div class="rc-column">
						<div class="rc-click" @click="selectproduce(item,index)">
							<span>{{item.productName}}</span>
						</div>
					</div>
			    </li>
			</ul>
         
      
 <nuxt-link :to="`/productdetails/productlist/`">
     <div class="userserlect">
           <span class="ts-standard-btn center">查看更多</span>
         </div>
        </nuxt-link>
        
       
         
     </div>

  </van-tab>
</van-tabs>
      <div class="rc-selection">

         <ol>
    <li 
      v-for="(item, index) in selection"
            :key="index"
            @click="selectGo(item, index)"
            :class="activeInde2 == index ? 'userselection' : 'unselection'"
          >
      
            <span>{{ item.title }}</span>
    </li>
  </ol>
     <div class="rc-maa">
  <ul>
 
     
    <li 
      v-for="(item, index) in doglist"
            :key="index"
            @click="selectGoo(item, index)"
            :class="activeInde3 == index ? 'active' : 'unactive'"
          >
          <img :src="item.catimage" alt="">
            <span>{{ item.title }}</span>
    </li>

  </ul>
  </div>
         <div class="rc-contair">		 
		 <ul class="ts-product-list rc-margin-bottom--lg">
		     <li v-for="(item,index) in rccontair" :key="index" class="rc-margin-top--md rc-padding-bottom--lg">
		 		 <div class="rc-click rc-margin-bottom--md" @click="selectproduce(item,index)">
		 			<div class="rc-rccontair">
		 				<img :src=item.catimage alt="">
		 			</div>
		 		</div>
		 		<div class="rc-column">
		 			<div class="rc-click" @click="selectproduce(item,index)">
		 				<span>{{item.title}}</span>
		 			</div>
		 		</div>
		     </li>
		 </ul>
         
  <nuxt-link :to="`/productdetails/productlist/`">
     <div class="userserlect">
           <span class="ts-standard-btn center">查看更多</span>
         </div>
        </nuxt-link>
       
         
     </div>

      </div>
 </div>
 <div class="online bold"></div>

 <div class="rc-usermessage rc-padding--md rc-full-width rc-max-width--md">
  <h2 class="rc-beta rc-text--center">为每一种健康需求度身定制</h2>
  <span class="rc-text--center">每一只猫、每一只狗都是独一无二的，而他们的健康所需亦一样，需要专门度身定制。不过，这些健康需求
    通常是他们体型、品种或生活方式上的特征。邀请您探索我们的营养系列，了解我们如何协助每一只爱宠过
    得更健康。
  </span>
  <a href="https://royalcanin.com.cn/tailored-nutrition/details" class="ts-standard-btn ts-standard-btn--two center rc-margin-y--md">
	了解更多
  </a>
 </div>
 </div>




</div>

<!-- <div class="container">
      <nuxt-link :to="`/userlogin/login/`">
      <div class="userlogin">

          <span>登录/注册</span>

      </div>
        </nuxt-link>
           <nuxt-link :to="`/usersearch/search/`">
      <div class="userlogin">

          <span>搜索</span>

      </div>
        </nuxt-link>



      <nuxt-link :to="`/personal/mypersonal/`">
      <div class="userlogin">
          <span>个人中心</span>

      </div>
        </nuxt-link>
        </div> -->

        <div class="rc-fixright" >
			<ul >
				<li v-for="(userfixed,index) in fixedlist" :key="index" @click="lianxi(userfixed,index)">
					<img :src="userfixed.catimage" alt="">
					<span> {{userfixed.title}}</span>
				</li>
			</ul>
			<div class="tuntop" @click="toTop" v-show="gotop">
				<img src="../assets/image/turntop.png" alt="">
				<span>回到顶部</span>
			</div>
        </div>

          <Myfooter v-on:litentop='showmesg'></Myfooter>
        </div>
</template>
  <script>
  let vm=null;
  import $ from 'jquery'
  import Myheader from "~/components/header.vue";
  import Myfooter from "~/components/rc-footer.vue";
  import unlogin from "~/components/unlogin.vue";
  import '@vant/touch-emulator';
  import { userquery,postCourseId,biaomessage,userque,searchchanpin } from "../ajax/getData";
  const settings = require("@/config");
  export default {
       middleware: 'metaTitle',
    // middleware: 'metaTitle',
  meta: {title: '首页'},
     data(){
       return{
        useraindex:0,
        usertitle:'明星猫粮',
        dogtitle:'明星狗粮',
        processinformation:[],
        catshi:[],
        userindex:0,
        userstype:'',
        onemao:false,
        twomao:false,
        threemao:false,
        dogshow:false,
        fourmao:false,
        fivemao:false,
        sixmao:false,
        stypechange:true,
        userunlogin:false,
        searchBar:true,
        usermessage:[],
        catgan:[],
        userserachlist:[{}],
        doggan:[],
        dogtype:[
          {
          title: "幼犬",
            
        },
        {
          title: "成犬",
        },
        {
          title: "老年犬",
        },
    
        ],
        anchor:'',
        dogshi:[],
        catlist:[],
        chufanlist:[],
        doglist:[],
        gotop: false,
        usersetting: `${settings.rbs}`,
      activeIndex: 0,
      activeIndex5:0,
      activeIndex6:0,
      activeInde2: 0,
activeInde3:0,
      catproduct:true,
      catfood:false,


         selection:[
                   {
          title: "幼猫",
            
        },
        {
          title: "成猫",
        },
        {
          title: "老年猫",
        },
         {
          title: "品种猫",
          
        },
        {
          title: "亚健康",
          
        },
            ],

                     banners:[
                {src:require("../assets/image/one.jpg"),link:""},
                {src:require("../assets/image/two.jpg"),link:""},
                {src:require("../assets/image/three.jpg"),link:""},
                {src:require("../assets/image/four.jpg"),link:""},
            ],

                             userdoglist: [
        {
          title: "小型犬",
             catimage: require("../assets/cat.png"),
        },
        {
          title: "中型犬",
          catimage: require("../assets/four.png"),
        },
        {
          title: "大型犬",
           catimage: require("../assets/one.png"),
        },
 
      ],
                  discoun: [
        {
          title: "幼猫",
        },
        {
          title: "成猫",
        },
        {
          title: "老年猫",
        },
         {
          title: "品种猫",
           
          
        },
        {
          title: "亚健康猫",
         
          
        },
      
      ],

        discountlist: [
        {
          title: "明星猫粮",
          detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
            catimage: require("../assets/star-cat.png"),
             price:'￥2'
        },
        {
          title: "猫湿粮",
          detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
             price:'￥12',
          catimage: require("../assets/two.png"),
        },
        {
          title: "猫干粮",
          detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',

          price:'￥102',
           catimage: require("../assets/cat.png"),
        },
           {
          title: "明星狗粮",
          detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
             price:'￥112',
            catimage: require("../assets/six.png"),
          
        },

         {
          title: "犬湿粮",
          detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',

             price:'￥112',
            catimage: require("../assets/three.png"),
          
        },
        {
          title: "犬干粮",
          detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',

             price:'￥112',
            catimage: require("../assets/one.png"),
          
        },
        {
          title: "处方用粮",
          detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
             price:'￥112',
            catimage: require("../assets/four.png"),
        },
      ],

	discounchufang: [
        {
          title: "消化道",
             catimage: require("../assets/cat.png"),
        },
        {
          title: "泌尿道",
          catimage: require("../assets/four.png"),
        },
        {
          title: "皮肤",
           catimage: require("../assets/one.png"),
        },
         {
          title: "提升活力",
            catimage: require("../assets/two.png"),
          
        },
        {
          title: "体重管理",
            catimage: require("../assets/three.png"),
          
        },
     
      ],
                    catlistvideo: [
        {
          title: "明星猫粮",
            video:require("../assets/cat/one.mp4"),
             catimage: require("../assets/cat/one.jpg"),
             detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
             price:'¥123.45',
        },
        {
          title: "猫湿粮",
         video:require("../assets/cat/two.mp4"),
          catimage: require("../assets/cat/two.jpg"),
            detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
             price:'¥123.45',
        },
        {
          title: "猫干粮",
          video:require("../assets/cat/three.mp4"),
           catimage: require("../assets/cat/three.jpg"),
             detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
             price:'¥123.45',
        },
            {
          title: "猫干粮",
          video:require("../assets/cat/four.mp4"),
           catimage: require("../assets/cat/four.jpg"),
             detail:'为10月龄及以上英国短毛猫成猫量身打造的精准营养',
             price:'¥123.45',
        },
  
      ],

              doglistvideo: [
        {
          title: "明星狗粮",
            video:require("../assets/dog/one.mp4"),
             catimage: require("../assets/dog/one.jpg"),
             detail:'为10月龄及以上成犬量身打造的精准营养',
             price:'¥123.45',
        },
        {
          title: "狗湿粮",
         video:require("../assets/dog/two.mp4"),
          catimage: require("../assets/dog/two.jpg"),
            detail:'为10月龄及以上英国成犬量身打造的精准营养',
             price:'¥123.45',
        },
        {
          title: "狗干粮",
          video:require("../assets/dog/three.mp4"),
           catimage: require("../assets/dog/three.jpg"),
             detail:'为10月龄及以上英国犬成犬量身打造的精准营养',
             price:'¥123.45',
        },
            {
          title: "狗干粮",
          video:require("../assets/dog/four.mp4"),
           catimage: require("../assets/dog/four.jpg"),
             detail:'为10月龄及以上英国成犬量身打造的精准营养',
             price:'¥123.45',
        },
  
      ],
                   fixedlist: [
        {
          title: "购物车",
             catimage: require("../assets/buy.png"),
            
        },
        {
          title: "在线客服",
          catimage: require("../assets/service.png"),
            
        },
        {
          title: "营养专家",
           catimage: require("../assets/consult.png"),
           
        },
  
      ],
             rccontair: [
        {
          title: "皇家英国短毛猫全价湿粮",
          price:'￥123.45',
          ordernum: 1,

          catimage: require("../assets/image/rc-cat.png"),
        },

        {
          title: "皇家英国短毛猫全价湿粮",
           price:'￥123.45',
          ordernum: "2",
          catimage: require("../assets/image/rc-cat.png"),
        },
           {
          title: "皇家英国短毛猫全价湿粮",
           price:'￥123.45',
          ordernum: "2",
          catimage: require("../assets/image/rc-cat.png"),
        },
         {
          title: "皇家英国短毛猫全价湿粮",
           price:'￥123.45',
          ordernum: "2",
          catimage: require("../assets/image/rc-cat.png"),
        },
            {
          title: "皇家英国短毛猫全价湿粮",
           price:'￥123.45',
          ordernum: "2",
          catimage: require("../assets/image/rc-dog.png"),
        },
             {
          title: "皇家英国短毛猫全价湿粮",
           price:'￥123.45',
          ordernum: "2",
          catimage: require("../assets/image/rc-dog.png"),
        },
        //      {
        //   title: "皇家英国短毛猫全价湿粮",
        //    price:'￥123.45',
        //   ordernum: "2",
        //   catimage: require("../assets/image/rc-dog.png"),
        // },
        //      {
        //   title: "皇家英国短毛猫全价湿粮",
        //    price:'￥123.45',
        //   ordernum: "2",
        //   catimage: require("../assets/image/rc-dog.png"),
        // },
      ],

             swiperOption: {
                loop: true,
                slidesPerView: 'auto',
                centeredSlides: true,
                speed:1000,
                spaceBetween: 30,
                //  autoplay: true,
                   loopAdditionalSlides: 100,
                pagination: {
                    el: '.swiper-pagination',
                    dynamicBullets: true
                },
            navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
                on: {
                          slideChange(Swiper) {
                        console.log('onSlideChangeEnd',this);
                          // vm.ifadroind('','',this.realIndex);
                        vm.useraindex=this.realIndex;
                    },
                    tap() {
                        console.log('onTap', this);
                    }
                    // slideChange() {
                    //     console.log('onSlideChangeEnd', this);
                    // },
                    // tap() {
                    //     console.log('onTap', this);
                    // }
                }
            },
       }
     },
       components:{
    Myheader,
    Myfooter,
    unlogin,
    // userswiper
     },
     created(){
vm=this;
     },
     watch:{
},
      mounted(){
 const that = this
    this.ifAdoid()
      //          window.onresize = () => {
      //   setTimeout(() => {
      //         this.ifAdoid()
      //   }, 500);
    
      // }
             this.usermessage= JSON.parse(localStorage.getItem("userInfo"));
           
            if(this.usermessage==null ||this.usermessage==undefined){
                  this.userunlogin=true
            }
         window.addEventListener("scroll", this.handleScroll, true);
      this.userchufang();//查询处方粮商品信息
      this.catmessage();//查询猫的信息
      this.dogmessage();//查询狗的信息
      // this.usershi();//查询对应的标签
      // this.userhot();

     },
     destroyed () {
    window.removeEventListener('scroll', this.scrollToTop); 
},
     methods:{



    ifAdoid(item,index){
 console.log(index);
 this.userindex=index;
    var sUserAgent = navigator.userAgent.toLowerCase();
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    var bIsMidp = sUserAgent.match(/midp/i) == "midp";
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    var bIsAndroid = sUserAgent.match(/android/i) == "android";
    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
 
    if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
      console.log("当前是电脑打开")
     this.stypechange=false;
     console.log(this.usertitle)
     
    //  let catshiid=document.querySelectorAll('.selectionswitch');
    //  catshiid[this.userindex].style.display='none';
    //     catshiid[this.userindex].style.display='none';
    this.catproduct=true;
         this.onemao=false;
         this.twomao=false;
         this.threemao=false;
         this.fourmao=false;
         this.fivemao=false;
         this.sixmao=false;
         this.dogshow=false
      // console.log(catshiid);
    }else{
  console.log("当前是手机打开")
     this.stypechange=true;
        this.onemao=true;
          this.twomao=true;
          this.threemao=true;
          this.fourmao=true;
          this.fivemao=true;
             this.dogshow=true;
             this.catproduct=true
          this.sixmao=true;

}
  },

                ifadroind(item,index,order){
                console.log(item,index,order);
         
                
    var sUserAgent = navigator.userAgent.toLowerCase();
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    var bIsMidp = sUserAgent.match(/midp/i) == "midp";
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    var bIsAndroid = sUserAgent.match(/android/i) == "android";
    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";

    if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
      console.log("当前是电脑打开啊啊啊")
                if(item.title=='明星猫粮'){
                   this.catproduct=true;
                   this.twomao=false;
                   this.threemao=false;
                   this.fourmao=false;
                   this.fivemao=false;
                   this.dogshow=false;
                   this.sixmao=false;
                   this.onemao=false;
                }
                if(item.title=='猫湿粮'){
                    this.onemao=true;
                       this.dogshow=false;
                    console.log(this.onemao);
                   this.twomao=false;
                   this.threemao=false;
                   this.fourmao=false;
                   this.fivemao=false;
                   this.catproduct=false;

              

                }if(item.title=='猫干粮'){
                     this.onemao=false;
                   this.twomao=true;
                      this.dogshow=false;
                   this.threemao=false;
                   this.fourmao=false;
                   this.chufang=false;
                   this.catproduct=false;
                }
          
                    if(item.title=='犬干粮'){
                      this.onemao=false;
                   this.twomao=false;
                   this.threemao=false;
                   this.fourmao=true;
                   this.chufang=false;
                      this.dogshow=false;
                   this.catproduct=false;
                }

                        if(item.title=='犬湿粮'){
                           this.onemao=false;
                   this.twomao=false;
                   this.threemao=true;
                   this.fourmao=false;
                   this.chufang=false;
                   this.catproduct=false;
                      this.dogshow=false;
                }
                      if(item.title=='处方用粮'){
                           this.onemao=false;
                   this.twomao=false;
                   this.threemao=false;
                   this.fourmao=false;
                   this.fivemao=true;
                      this.dogshow=false;
                   this.catproduct=false;
                }
                       if(item.title=='明星狗粮'){
                           this.onemao=false;
                   this.twomao=false;
                   this.threemao=false;
                   this.fourmao=false;
                   this.fivemao=false;
                   this.dogshow=true;
                   this.catproduct=false;
                }
      // this.usertitle=item.title
        // this.catlistvideo[order]=item;      
        //   this.catproduct=true;  

    }else{
  this.catfood=true;
  // this.catproduct=false;  
     let userindex=index
  console.log(item,index);
   let mingxin=document.querySelector('.pageFullScreen');
   let dogtop=document.querySelector('.oc-top');
   console.log(dogtop);
console.log(mingxin.offsetTop);
if(item.title=='犬湿粮'||item.title=='犬干粮'||item.title=='处方用粮'){
  userindex=userindex-2
}else{
  userindex=userindex-1
}
if(item.title=='明星猫粮'){
    mingxin.scrollIntoView(true);
}else{
 let catshiid=document.querySelectorAll('.selectionswitch');
catshiid[userindex].scrollIntoView(true);
}
if(item.title=='明星狗粮')
dogtop.scrollIntoView(true);
  //  if(item.title=="猫湿粮"){
  //    this.catproduct=false;
  //    this.catfood=true;
  //  }else if(item.title=="明星猫粮"){
  //         this.catproduct=true;
  //    this.catfood=false;

  //  }
  console.log("当前是手机打开")
  
}
  },
         userdog(item,index){
             this.userstype=1;
              let petType={
          petType:1,
          name:index,
           }
                for(let i =0;i<this.userserachlist.length;i++){
                if(!this.userserachlist.includes(petType)){
                  this.userserachlist.push(petType)
                }
             }
           this.dogmessage(this.userserachlist)
       },

     
       userlook(order){
         if(order==0){
             this.catshi=this.catlist;
         }
         if(order==1){
         this.catgan=this.catlist;

         }else if(order==2){
           this.dogshi=this.doglist
         }
         else if(order==3){
           this.doggan=this.doglist
         }
           else if(order==4){
           this.processinformation=this.chufanlist
         }
        
       },
 

       showmesg(){
       this.toTop();
       },
    handleScroll(e) 
	{		
    let scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
		let fixedCatbarSeperator = document.querySelector("#fixed-catbar-seperator");
    // console.log(fixedCatbarSeperator.offsetTop,scrolltop);
    if(fixedCatbarSeperator!=='null' &&fixedCatbarSeperator!=='underfined'){
       console.log('-====');
     	if((scrolltop-fixedCatbarSeperator.offsetTop)>0)
		{
			this.gotop = true
			this.searchBar=false
		}
		else
		{
			this.gotop = false;
			this.searchBar=true
		}
    }

      
	
    },
     toTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果 
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 400;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
         async courseId(item) {
      let data = await postCourseId(this.productCode,1,this.usermessage.data.id,this.usermessage.data.mobile,item.picFile,item.name,item.basePrice,item.specifications);
      if(data){
        this.productlist=data;
      }
    },
     //请求猫
       async catmessage(stype) {
          let data=[];
          if(stype==undefined||stype==null){
             data = await biaomessage(0);
          }else{
              data = await biaomessage(this.userserachlist);
          }
      if(data){
        this.catlist=data;
        let userlist=[];
        userlist=data.slice(0,6);
        this.catshi=userlist;
        this.catgan=userlist;
        

      }

    },

         //请求犬
       async dogmessage(stype) {
         let data=[];
           if(stype==undefined||stype==null){
 
             data = await biaomessage(1);
          }else{
              data = await biaomessage(this.userserachlist);
          }
      if(data){
         let userlist=[];
        userlist=data.slice(0,6);
         this.doglist=data;
        this.doggan=userlist;
        this.dogshi=userlist;
      }
    },

       selectproduce(item,index){
         if(item.productList[0]==undefined){
           item.productlist[0].productCode=0;
         }
         if(item.productList[0]==undefined){
            item.productlist[0]=[];
         }
                  this.$router.push({
        path: "/productdetails/producted",
        query: {
          stype: 1,
          productCode:item.productList[0].productCode
        },
      });
       },

               //请求处方量信息数据
       async userchufang() {
      let list=[];
      let data = await userque();
      if(data){
        list=data.slice(0,6);
        this.processinformation=list;
        this.chufanlist=data;
       
      }

    },

               //点击请求处方量标签信息数据
       async userquery(item) {
      let data = await userquery(item);
      if(data){
        this.processinformation=data;
      }

    }, 
    //处方用粮筛选
       userclick(item,index){
           this.userquery(index)
       },
         //全价猫湿粮筛选
       catclick(item,index){
         this.userstype=0;
 let petType={
          petType:0,
          name:index,
           }
     for(let i =0;i<this.userserachlist.length;i++){
                if(!this.userserachlist.includes(petType)){
                  this.userserachlist.push(petType)
                }
             }
           this.catmessage(this.userserachlist)
       },


  
       lianxi(item,index){
             if(item.title=='在线客服'){
                 var option = {
    customer: {id: '', name: '', email: '', mobile: '', memberId: '999999'}
    }
    dis_livchat(option);
    }
    if(item.title=='购物车'){
       this.$router.push({
        path: "/myorder/userrecord",
       
      });
    }
        if(item.title=='营养专家'){
           var option = {
    customer: {id: '', name: '', email: '', mobile: '', memberId: '999999'}
    }
    dis_livchat(option);
    }

             },
             userbuy(item){
 let user= localStorage.getItem("userInfo");
   this.courseId(item)
         this.$router.push({
        path: "/myorder/userrecord",
       
      });
             },
       
selectGoods(item,index){
  console.log(item,index);
   this.activeIndex=index; 
   console.log(item.title);
 this.ifadroind(item,index,this.useraindex)
//  this.ifAdoid(item,index);

},
quanshi(item,index){
  console.log(item,index);
 this.activeIndex5=index
  console.log(this.activeIndex5);

},
userdoghot(item,index){
 this.activeIndex6=index

},
selectGo(item,index){
this.activeInde2=index;
},
selectGoo(item,index){

this.activeInde3=index;
}
     },
   
    
  }
  </script>
<style lang="less" scoped>
@import url("../assets/css/global.less");
@import url("../assets/css/index.less");

</style>
