mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-02 02:06:38 +08:00
1639 lines
46 KiB
Vue
1639 lines
46 KiB
Vue
<template>
|
|
<div>
|
|
<Myheader></Myheader>
|
|
<div class="rc-top"></div>
|
|
<!-- Suppose in header end -->
|
|
<div class="ts-banner-swiper-container">
|
|
<swiper :options="headerSwiperOption">
|
|
<swiper-slide>
|
|
<a href="#" target="_blank">
|
|
<picture>
|
|
<source media="(max-width: 768px)" srcset="/images/banner/one.jpg">
|
|
<source media="(min-width: 769px)" srcset="/images/banner/pc-banner1.png">
|
|
<img src="/images/banner/one.jpg">
|
|
</picture>
|
|
</a>
|
|
</swiper-slide>
|
|
|
|
<swiper-slide>
|
|
<a href="#" target="_blank">
|
|
<picture>
|
|
<source media="(max-width: 768px)" srcset="/images/banner/two.jpg">
|
|
<source media="(min-width: 769px)" srcset="/images/banner/pc-banner2.png">
|
|
<img src="/images/banner/two.jpg">
|
|
</picture>
|
|
</a>
|
|
</swiper-slide>
|
|
|
|
<swiper-slide>
|
|
<a href="#" target="_blank">
|
|
<picture>
|
|
<source media="(max-width: 768px)" srcset="/images/banner/three.jpg">
|
|
<source media="(min-width: 769px)" srcset="/images/banner/pc-banner3.png">
|
|
<img src="/images/banner/three.jpg">
|
|
</picture>
|
|
</a>
|
|
</swiper-slide>
|
|
|
|
<swiper-slide>
|
|
<a href="#" target="_blank">
|
|
<picture>
|
|
<source media="(max-width: 768px)" srcset="/images/banner/four.jpg">
|
|
<source media="(min-width: 769px)" srcset="/images/banner/pc-banner4.png">
|
|
<img src="/images/banner/four.jpg">
|
|
</picture>
|
|
</a>
|
|
</swiper-slide>
|
|
</swiper>
|
|
<div id="homeBannerSwiperPagnation" class="swiper-pagination ts-carousel-indicator center"></div>
|
|
</div>
|
|
|
|
<div class="online bold rc-md-down"></div>
|
|
<div id="fixed-catbar-seperator"></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--md">
|
|
<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 ts-position-identifier" data-rel="明星猫粮">
|
|
<!-- <h2>明星猫粮</h2> -->
|
|
<div class="pageFullScreen" id="xxxFullScreen" v-show="catproduct" ref="mingxing">
|
|
<!-- 内容 -->
|
|
<div class="rc-full-width rc-padding-y--md" id="swiper1">
|
|
<h2 class="rc-beta rc-text--center">{{usertitle}}</h2>
|
|
<!-- 轮播图 -->
|
|
<div class="ts-carousel-container">
|
|
<swiper class="rc-padding-bottom--md" :options="catStarProductswiperOption">
|
|
<swiper-slide v-for="(item, index) in catlistvideo" :key="index">
|
|
<div class="rc-video">
|
|
<div class="uservideo">
|
|
<video controls="" :poster=item.catimage preload="none">
|
|
<source :src=item.video type="video/mp4">
|
|
</video>
|
|
</div>
|
|
|
|
<div class="rc-right">
|
|
<img :src=item.productimage alt="">
|
|
<span>{{item.title}}</span>
|
|
<p>{{item.detail}}</p>
|
|
<em>{{item.price}}</em>
|
|
<strong class="ts-standard-btn ts-standard-btn--two center" @click="selectproduce(item,index)">立即购买</strong>
|
|
</div>
|
|
</div>
|
|
<div class="sw-center" >
|
|
<div class="rc-click" @click="selectproduce(item,index)">
|
|
<div class="uservideo">
|
|
<video controls="controls" :poster=item.catimage preload="none">
|
|
<source :src= item.video type="video/ogg">
|
|
</video>
|
|
</div>
|
|
|
|
<img :src=item.productimage 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="selectproduce(item,index)" class="ts-standard-btn ts-standard-btn--two center">立即购买</i>
|
|
</div>
|
|
</div>
|
|
</swiper-slide>
|
|
</swiper>
|
|
<div id="catStarSwiperPagnation" class="swiper-pagination ts-carousel-indicator center"></div>
|
|
</div>
|
|
</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 ts-position-identifier" data-rel="猫湿粮" >全价猫湿粮</h2>
|
|
<van-tabs @click='catclickShi' class="van-tabs" v-if="onemao" v-model="maoshiCurIndex">
|
|
<van-tab v-for="(item,index) in discoun" :key="index" :title="item.title">
|
|
<div class="rc-contair">
|
|
<div class="ts-no-data" v-if="!catshi.length">暂未发现相关记录</div>
|
|
<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>￥{{item.ecPrice}}</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/?stype=0&tagStatus=2`">
|
|
<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="">
|
|
<div class="ts-no-data" v-if="!rccontair.length">暂未发现相关记录</div>
|
|
<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>￥{{item.ecPrice}}</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/?stype=0&tagStatus=2`">
|
|
<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 ts-position-identifier" data-rel="猫干粮">全价猫干粮</h2>
|
|
<van-tabs @click='catclickGan' class="van-tabs" v-if="twomao" v-model="maoganCurIndex">
|
|
<van-tab v-for="(item,index) in discoun" :key="index" :title="item.title">
|
|
<div class="rc-contair">
|
|
<div class="ts-no-data" v-if="!catgan.length">暂未发现相关记录</div>
|
|
<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>￥{{item.ecPrice}}</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/?stype=0&tagStatus=1`">
|
|
<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">
|
|
<div class="ts-no-data" v-if="!rccontair.length">暂未发现相关记录</div>
|
|
<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>￥{{item.ecPrice}}</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/?stype=0&tagStatus=1`">
|
|
<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="swiper2">
|
|
<div class="oc-top">
|
|
<h2 class="rc-beta rc-text--center ts-position-identifier" data-rel="明星犬粮">{{dogtitle}}</h2>
|
|
</div>
|
|
<!-- 轮播图 -->
|
|
<div class="ts-carousel-container">
|
|
<swiper class="rc-padding-bottom--md" :options="dogStarProductswiperOption" v-if="dogshow">
|
|
<swiper-slide v-for="(item, key) in doglistvideo" :key="key">
|
|
<div class="rc-video">
|
|
<div class="uservideo">
|
|
<video controls="" :poster=item.catimage preload="none">
|
|
<source :src=item.video type="video/mp4">
|
|
</video>
|
|
</div>
|
|
|
|
<div class="rc-right">
|
|
<img :src=item.productimage alt="">
|
|
<span>{{item.title}}</span>
|
|
<p>{{item.detail}}</p>
|
|
<em>{{item.price}}</em>
|
|
<strong class="ts-standard-btn ts-standard-btn--two center" @click="selectproduce(item,index)">立即购买</strong>
|
|
</div>
|
|
</div>
|
|
<div class="sw-center" >
|
|
<div class="rc-click" @click="selectproduce(item,index)">
|
|
<div class="uservideo">
|
|
<video controls="controls" preload="none" :poster="item.catimage">
|
|
<source :src= item.video type="video/ogg">
|
|
</video>
|
|
</div>
|
|
|
|
<img :src=item.productimage 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="selectproduce(item,index)" class="ts-standard-btn ts-standard-btn--two center">立即购买</i>
|
|
</div>
|
|
</div>
|
|
|
|
</swiper-slide>
|
|
</swiper>
|
|
<div id="dogStarSwiperPagnation" class="swiper-pagination ts-carousel-indicator center"></div>
|
|
</div>
|
|
</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 ts-position-identifier" data-rel="犬湿粮">全价犬湿粮</h2>
|
|
<van-tabs @click='userdogShi' class="van-tabs" v-if="threemao" v-model="quanshiCurIndex">
|
|
<van-tab v-for="(item,index) in dogtype" :key="index" :title="item.title">
|
|
<div class="online bold rc-md-up" v-show="threemao"></div>
|
|
<div class="usermain">
|
|
<ul class="ul-dog usermain">
|
|
<li
|
|
v-for="(dogListitem, dogListIndex) in userdoglist"
|
|
:key="dogListIndex"
|
|
@click="quanshi(dogListitem, dogListIndex)"
|
|
:class="activeIndex5 == dogListIndex ? 'active' : 'unactive'"
|
|
>
|
|
<img :src="dogListitem.catimage" alt="">
|
|
<span>{{ dogListitem.title }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="rc-contair">
|
|
<div class="ts-no-data" v-if="!dogshi.length">暂未发现相关记录</div>
|
|
<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>￥{{item.ecPrice}}</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/?stype=1&tagStatus=2`">
|
|
<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">
|
|
<div class="ts-no-data" v-if="!rccontair.length">暂未发现相关记录</div>
|
|
<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>￥{{item.ecPrice}}</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/?stype=1&tagStatus=2`">
|
|
<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 ts-position-identifier" data-rel="犬干粮">全价犬干粮</h2>
|
|
<van-tabs @click='userdogGan' class="van-tabs" v-if="fourmao" v-model="quanganCurIndex">
|
|
<div class="online bold rc-md-up" 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="(userDogListItem, userDogListIndex) in userdoglist"
|
|
:key="userDogListIndex"
|
|
@click="userdoghot(userDogListItem, userDogListIndex)"
|
|
:class="activeIndex6 == userDogListIndex ? 'active' : 'unactive'"
|
|
>
|
|
<img :src="userDogListItem.catimage" alt="">
|
|
<span>{{ userDogListItem.title }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="rc-contair">
|
|
<div class="ts-no-data" v-if="!doggan.length">暂未发现相关记录</div>
|
|
<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>￥{{item.ecPrice}}</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/?stype=1&tagStatus=1`">
|
|
<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">
|
|
<div class="ts-no-data" v-if="!rccontair.length">暂未发现相关记录</div>
|
|
<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>￥{{item.ecPrice}}</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/?stype=1&tagStatus=1`">
|
|
<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 ts-position-identifier" data-rel="处方用粮">处方用粮</h2>
|
|
<van-tabs @click='userclick' class="van-tabs" v-if="fivemao">
|
|
<van-tab v-for="(item,index) in discounchufang" :key="index" :title="item.title">
|
|
<div class="rc-contair">
|
|
<div class="ts-no-data" v-if="!processinformation.length">暂未发现相关记录</div>
|
|
<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="`${item.picture}`">
|
|
</div>
|
|
</div>
|
|
<div class="rc-column">
|
|
<div class="rc-click" @click="selectproduce(item,index)">
|
|
<span>{{item.name}}</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
<nuxt-link :to="`/productdetails/productlist/?stype=1&rxgoods=1`">
|
|
<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">
|
|
<div class="ts-no-data" v-if="!rccontair.length">暂未发现相关记录</div>
|
|
<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> -->
|
|
|
|
<FixRight></FixRight>
|
|
<div v-if="!dataLoaded" class="ts-mask">
|
|
<div class="ts-mask-bg"></div>
|
|
<div class="userloding"></div>
|
|
<span>数据加载中</span>
|
|
</div>
|
|
<Myfooter></Myfooter>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
let vm=null;
|
|
import Myheader from "~/components/header.vue";
|
|
import FixRight from "~/components/fixed-right.vue";
|
|
import Myfooter from "~/components/rc-footer.vue";
|
|
import unlogin from "~/components/unlogin.vue";
|
|
import { userquery,postCourseId,biaomessage,userque,searchchanpin } from "../ajax/getData";
|
|
const settings = require("@/config");
|
|
export default {
|
|
middleware: 'metaTitle',
|
|
// middleware: 'metaTitle',
|
|
meta: {title: '首页'},
|
|
data(){
|
|
return{
|
|
fixedHeader:false,
|
|
dataLoaded:true,
|
|
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: "成年",
|
|
},
|
|
{
|
|
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:{
|
|
'mobile':[
|
|
{src:"/images/banner/one.jpg",link:""},
|
|
{src:"/images/banner/two.jpg",link:""},
|
|
{src:"/images/banner/three.jpg",link:""},
|
|
{src:"/images/banner/four.jpg",link:""}
|
|
],
|
|
'pc':[
|
|
{src:"/images/banner/pc-banner1.png",link:""},
|
|
{src:"/images/banner/pc-banner2.png",link:""},
|
|
{src:"/images/banner/pc-banner3.png",link:""},
|
|
{src:"/images/banner/pc-banner4.png",link:""}
|
|
]
|
|
},
|
|
showingBanners:[],
|
|
maoganCurIndex:0,
|
|
maoshiCurIndex:0,
|
|
quanshiCurIndex:0,
|
|
quanganCurIndex:0,
|
|
userdoglist: [
|
|
{
|
|
title: "小型犬",
|
|
catimage: "/images/dog/small.png",
|
|
},
|
|
{
|
|
title: "中型犬",
|
|
catimage: "/images/dog/medium.png",
|
|
},
|
|
{
|
|
title: "大型犬",
|
|
catimage: "/images/dog/big.png",
|
|
},
|
|
],
|
|
discoun: [
|
|
{
|
|
title: "<4月龄",
|
|
},
|
|
{
|
|
title: "4-12月龄",
|
|
},
|
|
{
|
|
title: "1-7岁",
|
|
},
|
|
{
|
|
title: ">7岁"
|
|
}
|
|
],
|
|
|
|
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:"/images/cat/one.mp4",
|
|
catimage: "/images/cat/one.jpg",
|
|
productimage: "/images/cat/star-1.png",
|
|
detail:'为10柔软细腻慕斯 适合离乳期幼猫舔食',
|
|
price:'¥77',
|
|
},
|
|
{
|
|
title: "幼猫成长专属",
|
|
video:"/images/cat/two.mp4",
|
|
catimage: "/images/cat/two.jpg",
|
|
productimage: "/images/cat/star-2.png",
|
|
detail:'支持幼猫自身保护力 为快速生长提供足够能量',
|
|
price:'¥147',
|
|
},
|
|
{
|
|
title: "室内成猫专属",
|
|
video:"/images/cat/three.mp4",
|
|
catimage: "/images/cat/three.jpg",
|
|
productimage: "/images/cat/star-3.png",
|
|
detail:'高易消化蛋白 减少粪便量和异味',
|
|
price:'¥140',
|
|
},
|
|
{
|
|
title: "英短成猫专属",
|
|
video:"/images/cat/four.mp4",
|
|
catimage: "/images/cat/four.jpg",
|
|
productimage: "/images/cat/star-4.png",
|
|
detail:'增强肌肉质量 支持骨骼与关节健康',
|
|
price:'¥183',
|
|
},
|
|
|
|
],
|
|
|
|
doglistvideo: [
|
|
{
|
|
title: "主食级狗湿粮",
|
|
video:"/images/dog/one.mp4",
|
|
catimage: "/images/dog/one.jpg",
|
|
productimage: "/images/dog/star-1.png",
|
|
detail:'柔软细腻慕斯 适合离乳期幼犬舔食',
|
|
price:'¥77',
|
|
},
|
|
{
|
|
title: "贵宾成犬专属",
|
|
video:"/images/dog/two.mp4",
|
|
catimage: "/images/dog/two.jpg",
|
|
productimage: "/images/cat/star-2.png",
|
|
detail:'护肤靓毛 理想体态',
|
|
price:'¥241',
|
|
},
|
|
{
|
|
title: "小型犬成犬专属",
|
|
video:"/images/dog/three.mp4",
|
|
catimage: "/images/dog/three.jpg",
|
|
productimage: "/images/cat/star-3.png",
|
|
detail:'亮泽被毛 呵护牙齿',
|
|
price:'¥121',
|
|
},
|
|
{
|
|
title: "离乳期全价奶糕",
|
|
video:"/images/dog/four.mp4",
|
|
catimage: "/images/dog/four.jpg",
|
|
productimage: "/images/cat/star-4.png",
|
|
detail:'高易再水合颗粒 帮助增强保护健康成长',
|
|
price:'¥88',
|
|
},
|
|
|
|
],
|
|
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"),
|
|
// },
|
|
],
|
|
|
|
headerSwiperOption: {
|
|
loop: true,
|
|
slidesPerView: 'auto',
|
|
centeredSlides: true,
|
|
speed:1000,
|
|
spaceBetween: 0,
|
|
autoplay: {
|
|
delay: 3000,
|
|
stopOnLastSlide: false,
|
|
disableOnInteraction: false,
|
|
},
|
|
pagination: {
|
|
el: '#homeBannerSwiperPagnation',
|
|
clickable:true
|
|
},
|
|
paginationClickable: true,
|
|
loopAdditionalSlides: 100,
|
|
navigation: {
|
|
nextEl: '.swiper-button-next',
|
|
prevEl: '.swiper-button-prev'
|
|
},
|
|
on: {
|
|
slideChange(Swiper) {
|
|
|
|
},
|
|
tap() {
|
|
|
|
}
|
|
}
|
|
},
|
|
catStarProductswiperOption: {
|
|
loop: true,
|
|
slidesPerView: 'auto',
|
|
centeredSlides: true,
|
|
speed:1000,
|
|
spaceBetween: 30,
|
|
// autoplay: true,
|
|
loopAdditionalSlides: 100,
|
|
pagination: {
|
|
el: '#catStarSwiperPagnation',
|
|
clickable:true
|
|
},
|
|
navigation: {
|
|
nextEl: '.swiper-button-next',
|
|
prevEl: '.swiper-button-prev'
|
|
},
|
|
on: {
|
|
slideChange(Swiper) {
|
|
vm.useraindex=this.realIndex;
|
|
},
|
|
tap() {
|
|
}
|
|
}
|
|
},
|
|
dogStarProductswiperOption: {
|
|
loop: true,
|
|
slidesPerView: 'auto',
|
|
centeredSlides: true,
|
|
speed:1000,
|
|
spaceBetween: 30,
|
|
// autoplay: true,
|
|
loopAdditionalSlides: 100,
|
|
pagination: {
|
|
el: '#dogStarSwiperPagnation',
|
|
clickable:true
|
|
},
|
|
navigation: {
|
|
nextEl: '.swiper-button-next',
|
|
prevEl: '.swiper-button-prev'
|
|
},
|
|
on: {
|
|
slideChange(Swiper) {},
|
|
tap() {}
|
|
}
|
|
},
|
|
}
|
|
},
|
|
components:{
|
|
Myheader,
|
|
Myfooter,
|
|
unlogin,
|
|
FixRight
|
|
// userswiper
|
|
},
|
|
created(){
|
|
vm=this;
|
|
},
|
|
watch:{
|
|
|
|
},
|
|
mounted(){
|
|
const that = this
|
|
this.ifAdoid();
|
|
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.catclickGan();
|
|
this.catclickShi();
|
|
|
|
this.dogmessage();//查询狗的信息
|
|
this.userdogShi();
|
|
this.userdogGan();
|
|
},
|
|
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)
|
|
|
|
this.catproduct=true;
|
|
this.onemao=false;
|
|
this.twomao=false;
|
|
this.threemao=false;
|
|
this.fourmao=false;
|
|
this.fivemao=false;
|
|
this.sixmao=false;
|
|
this.dogshow=false
|
|
this.showingBanners=this.banners.pc;
|
|
}
|
|
else
|
|
{
|
|
console.log("当前是手机打开")
|
|
this.showingBanners=this.banners.mobile;
|
|
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);
|
|
|
|
let positionIdentifier=document.querySelectorAll('.ts-position-identifier');
|
|
let tmpTitle='';
|
|
let scrollToTop=0;
|
|
let _self=this;
|
|
let transition = 230;
|
|
positionIdentifier.forEach(function(ele,index){
|
|
tmpTitle = ele.getAttribute("data-rel");
|
|
if(item.title==tmpTitle)
|
|
{
|
|
if(_self.fixedHeader && item.title!='明星猫粮')
|
|
{
|
|
transition+=130;
|
|
}
|
|
scrollToTop = _self.heightToTop(positionIdentifier[index]) - transition;
|
|
//positionIdentifier[index].scrollIntoView(true);
|
|
window.scrollTo({
|
|
top:scrollToTop,
|
|
behavior:'smooth'
|
|
})
|
|
//document.body.scrollTop = oPos;
|
|
}
|
|
})
|
|
/*
|
|
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("当前是手机打开")
|
|
*/
|
|
}
|
|
},
|
|
heightToTop(ele){
|
|
//ele为指定跳转到该位置的DOM节点
|
|
let root = document.body;
|
|
let height = 0;
|
|
do{
|
|
height += ele.offsetTop;
|
|
ele = ele.offsetParent;
|
|
}while( ele !== root )
|
|
return height;
|
|
},
|
|
userdogShi(){
|
|
this.activeIndex5=(this.activeIndex5?this.activeIndex5:0);
|
|
let apiDogSize=this.userdoglist[this.activeIndex5].title;
|
|
let apiDogAgeType=this.dogtype[this.quanshiCurIndex].title;
|
|
|
|
this.userstype=1;
|
|
let petType={
|
|
petType:1,
|
|
tagStatus:2,
|
|
tagUsedAge:apiDogAgeType,
|
|
name:apiDogSize
|
|
}
|
|
for(let i =0;i<this.userserachlist.length;i++){
|
|
if(!this.userserachlist.includes(petType)){
|
|
this.userserachlist.push(petType)
|
|
}
|
|
}
|
|
//TODO how to combine "apiName" here?
|
|
this.dogmessage(this.userserachlist,"Shi");
|
|
},
|
|
userdogGan(){
|
|
this.activeIndex6=(this.activeIndex6?this.activeIndex6:0);
|
|
let apiDogSize=this.userdoglist[this.activeIndex6].title;
|
|
let apiDogAgeType=this.dogtype[this.quanganCurIndex].title;
|
|
|
|
this.userstype=1;
|
|
let petType={
|
|
petType:1,
|
|
tagStatus:1,
|
|
tagUsedAge:apiDogAgeType,
|
|
name:apiDogSize
|
|
}
|
|
for(let i =0;i<this.userserachlist.length;i++){
|
|
if(!this.userserachlist.includes(petType)){
|
|
this.userserachlist.push(petType)
|
|
}
|
|
}
|
|
//TODO how to combine "apiName" here?
|
|
this.dogmessage(this.userserachlist,"Gan");
|
|
},
|
|
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
|
|
}
|
|
},
|
|
handleScroll(e)
|
|
{
|
|
let fixedCatbarSeperator = document.getElementById("fixed-catbar-seperator");
|
|
if(!fixedCatbarSeperator)
|
|
{
|
|
return;
|
|
}
|
|
let scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
|
|
if((scrolltop-fixedCatbarSeperator.offsetTop)>0)
|
|
{
|
|
this.fixedHeader=false;
|
|
this.gotop = true
|
|
this.searchBar=false
|
|
}
|
|
else
|
|
{
|
|
this.fixedHeader=true;
|
|
this.gotop = false;
|
|
this.searchBar=true
|
|
}
|
|
},
|
|
async courseId(item) {
|
|
this.dataLoaded=false;
|
|
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;
|
|
this.dataLoaded=true;
|
|
}
|
|
},
|
|
//请求猫
|
|
async catmessage(stype,dataType) {
|
|
this.dataLoaded=false;
|
|
let data=[];
|
|
if(stype==undefined||stype==null){
|
|
data = await biaomessage(0,'',1,6);
|
|
}else{
|
|
data = await biaomessage(this.userserachlist,'',1,6);
|
|
}
|
|
if(data){
|
|
let userlist=[];
|
|
//userlist=data.slice(0,6);
|
|
if(dataType)
|
|
{
|
|
if(dataType=='Shi')
|
|
this.catshi=data;
|
|
else if(dataType=='Gan')
|
|
this.catgan=data;
|
|
}
|
|
else
|
|
{
|
|
this.catlist=data;
|
|
//this.catgan=userlist;
|
|
//this.catshi=userlist;
|
|
}
|
|
this.dataLoaded=true;
|
|
}
|
|
},
|
|
|
|
//请求犬
|
|
async dogmessage(stype,dataType) {
|
|
this.dataLoaded=false;
|
|
let data=[];
|
|
if(stype==undefined||stype==null){
|
|
data = await biaomessage(1,'',1,6);
|
|
}else{
|
|
data = await biaomessage(this.userserachlist,'',1,6);
|
|
}
|
|
if(data){
|
|
let userlist=[];
|
|
//userlist=data.slice(0,6);
|
|
if(dataType)
|
|
{
|
|
if(dataType=='Shi')
|
|
this.dogshi=data;
|
|
else if(dataType=='Gan')
|
|
this.doggan=data;
|
|
}
|
|
else
|
|
{
|
|
this.doglist=data;
|
|
//this.doggan=userlist;
|
|
//this.dogshi=userlist;
|
|
}
|
|
this.dataLoaded=true;
|
|
}
|
|
},
|
|
|
|
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() {
|
|
this.dataLoaded=false;
|
|
let list=[];
|
|
let data = await userque();
|
|
if(data){
|
|
list=data.slice(0,6);
|
|
this.processinformation=list;
|
|
this.chufanlist=data;
|
|
this.dataLoaded=true;
|
|
}
|
|
},
|
|
//点击请求处方量标签信息数据
|
|
async userquery(item) {
|
|
this.dataLoaded=false;
|
|
let data = await userquery(item);
|
|
if(data){
|
|
this.processinformation=data;
|
|
this.dataLoaded=true;
|
|
}
|
|
},
|
|
//处方用粮筛选
|
|
userclick(item,index){
|
|
this.userquery(index)
|
|
},
|
|
//全价猫干粮筛选
|
|
catclickGan(){
|
|
this.userstype=0;
|
|
this.maoganCurIndex=this.maoganCurIndex?this.maoganCurIndex:0;
|
|
let apiCatAgeType=this.discoun[this.maoshiCurIndex].title;
|
|
let petType={
|
|
petType:0,
|
|
tagStatus:1,//干
|
|
tagUsedAge:apiCatAgeType,
|
|
}
|
|
for(let i =0;i<this.userserachlist.length;i++){
|
|
if(!this.userserachlist.includes(petType)){
|
|
this.userserachlist.push(petType)
|
|
}
|
|
}
|
|
this.catmessage(this.userserachlist,'Gan')
|
|
},
|
|
catclickShi(){
|
|
this.userstype=0;
|
|
this.maoshiCurIndex=this.maoshiCurIndex?this.maoshiCurIndex:0;
|
|
let apiCatAgeType=this.discoun[this.maoshiCurIndex].title;
|
|
let petType={
|
|
petType:0,
|
|
tagStatus:2,//湿
|
|
tagUsedAge:apiCatAgeType,
|
|
}
|
|
for(let i =0;i<this.userserachlist.length;i++){
|
|
if(!this.userserachlist.includes(petType)){
|
|
this.userserachlist.push(petType)
|
|
}
|
|
}
|
|
this.catmessage(this.userserachlist,'Shi')
|
|
},
|
|
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){
|
|
this.activeIndex5=index;
|
|
this.userdogShi();
|
|
},
|
|
userdoghot(item,index){
|
|
this.activeIndex6=index;
|
|
this.userdogGan();
|
|
},
|
|
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> |