mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-02 02:06:38 +08:00
1914 lines
59 KiB
Vue
1914 lines
59 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 @click="toMiniShop" 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 target="_blank" @click="diaoqi">
|
|
<picture>
|
|
<source
|
|
media="(max-width: 768px)"
|
|
srcset="/images/banner/three.jpg"
|
|
/>
|
|
<source
|
|
media="(min-width: 769px)"
|
|
srcset="/images/banner/pc-banner4.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"
|
|
:style="usermargin"
|
|
>
|
|
<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">
|
|
<div class="uservideo" @click="playMobileVideo(item)">
|
|
<img :src="item.catimage" />
|
|
</div>
|
|
<div
|
|
class="click-zone"
|
|
@click="selectproduce(item, index)"
|
|
>
|
|
<img :src="item.productimage" alt="" />
|
|
<span>{{ item.title }}</span>
|
|
<p>{{ item.detail }}</p>
|
|
<em>{{ item.price }}</em>
|
|
</div>
|
|
</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">
|
|
<div class="uservideo" @click="playMobileVideo(item)">
|
|
<img :src="item.catimage" />
|
|
</div>
|
|
<div
|
|
class="click-zone"
|
|
@click="selectproduce(item, index)"
|
|
>
|
|
<img :src="item.productimage" alt="" />
|
|
<span>{{ item.title }}</span>
|
|
<p>{{ item.detail }}</p>
|
|
<em>{{ item.price }}</em>
|
|
</div>
|
|
</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
|
|
class="ts-mask ts-mobile-player-container"
|
|
v-show="mobileVideoPlaying"
|
|
>
|
|
<div class="ts-mask-bg"></div>
|
|
<div class="ts-mask-close" @click="closeMobileVideo"></div>
|
|
<video controls="controls" ref="mobile-video-player"></video>
|
|
</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 ref="fixRightComponent"></FixRight>
|
|
<div v-if="!dataLoaded" class="ts-mask">
|
|
<div class="ts-mask-bg"></div>
|
|
<div class="userloding"></div>
|
|
<span>数据加载中</span>
|
|
</div>
|
|
<el-dialog :visible.sync="showMiniShopQr" :close-on-click-modal="false">
|
|
<div class="rc-headera">
|
|
<div class="rc-title">
|
|
<img src="images/qrcode-wxgroup.jpg" alt="" style="margin:0 auto;"/>
|
|
</div>
|
|
<div class="rc-logmain rc-text--center">
|
|
<h3>温馨提示</h3>
|
|
<span>请使用微信扫描小程序码</span>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
<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 { mapMutations } from "vuex";
|
|
import envData from "~/config/env-data.js";
|
|
import {
|
|
userquery,
|
|
postCourseId,
|
|
biaomessage,
|
|
userque,
|
|
searchchanpin,
|
|
} from "../ajax/getData";
|
|
import util from "@/ajax/util";
|
|
const settings = require("@/config");
|
|
export default {
|
|
middleware: "metaTitle",
|
|
// middleware: 'metaTitle',
|
|
meta: { title: "首页" },
|
|
data() {
|
|
return {
|
|
util,
|
|
showMiniShopQr:false,
|
|
fixedHeader: false,
|
|
dataLoaded: true,
|
|
usermargin: { marginTop: "0" },
|
|
useraindex: 0,
|
|
envData,
|
|
indexacindex:0,
|
|
mobileVideoPlaying: false,
|
|
usertitle: "明星猫粮",
|
|
dogtitle: "明星犬粮",
|
|
processinformation: [],
|
|
catshi: [],
|
|
userindex: 0,
|
|
userstype: "",
|
|
usertop: true,
|
|
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: [
|
|
|
|
|
|
],
|
|
|
|
doglistvideo: [
|
|
|
|
],
|
|
rccontair: [
|
|
{
|
|
title: "",
|
|
price: "",
|
|
ordernum: 1,
|
|
catimage: "",
|
|
},
|
|
],
|
|
|
|
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",
|
|
}
|
|
},
|
|
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;
|
|
},
|
|
click(Swiper) {},
|
|
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() {
|
|
console.log(this.realIndex);
|
|
},
|
|
click() {
|
|
console.log(this.realIndex);
|
|
},
|
|
},
|
|
},
|
|
};
|
|
},
|
|
components: {
|
|
Myheader,
|
|
Myfooter,
|
|
unlogin,
|
|
FixRight,
|
|
// userswiper
|
|
},
|
|
created() {
|
|
vm = this;
|
|
let curEnv = process.env.NODE_ENV;
|
|
this.catlistvideo = envData[curEnv].catlistvideo;
|
|
this.doglistvideo = envData[curEnv].doglistvideo;
|
|
},
|
|
watch: {},
|
|
mounted() {
|
|
let popupMessage = this.$route.query.msg;
|
|
if(popupMessage) {
|
|
this.$message({
|
|
type: 'success',
|
|
message: popupMessage,
|
|
});
|
|
}
|
|
this.checkIsLogin();
|
|
|
|
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: {
|
|
...mapMutations(["checkIsLogin"]),
|
|
diaoqi(){
|
|
this.$refs['fixRightComponent'].lianxi({title:'营养专家'});
|
|
},
|
|
toMiniShop(){
|
|
let isMobile = this.util.isMobile();
|
|
if(isMobile) {
|
|
_hmt.push([
|
|
"_trackCustomEvent",
|
|
"jump_to_crmMiniApp",
|
|
{
|
|
"type": "home_banner"
|
|
}
|
|
])
|
|
setTimeout(function(){
|
|
window.location.href="https://miniapp-product.royalcanin.com.cn/rcmini2020/admin/Voucher/urlRedirect.html";
|
|
},800);
|
|
} else {
|
|
this.showMiniShopQr=true;
|
|
// /images/qrcode-minishop.png
|
|
}
|
|
},
|
|
playMobileVideo(item) {
|
|
let videoPath = item.video;
|
|
let player = this.$refs["mobile-video-player"];
|
|
let _self = this;
|
|
player.src = videoPath;
|
|
player.play();
|
|
this.mobileVideoPlaying = true;
|
|
},
|
|
closeMobileVideo() {
|
|
this.mobileVideoPlaying = false;
|
|
let player = this.$refs["mobile-video-player"];
|
|
player.pause();
|
|
},
|
|
|
|
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.usermargin = {
|
|
marginTop: "0",
|
|
};
|
|
(this.usertop = false), (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.usertop = 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;
|
|
}
|
|
console.log(this.searchBar);
|
|
if (this.searchBar == false && this.usertop == true) {
|
|
this.usermargin = { marginTop: "290px" };
|
|
} else {
|
|
this.usermargin = { marginTop: "0px" };
|
|
}
|
|
},
|
|
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, 12);
|
|
} else {
|
|
data = await biaomessage(this.userserachlist, "", 1, 12);
|
|
}
|
|
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) {
|
|
let isRxGoods = false;
|
|
let productCode = [];
|
|
let mainProductCode = item.productCode;
|
|
if (!item.ecPrice && !item.price) {
|
|
isRxGoods = 1;
|
|
productCode = [item.productCode];
|
|
} else {
|
|
for (let i of item.productList) {
|
|
productCode.push(i.productCode);
|
|
}
|
|
}
|
|
this.$router.push({
|
|
path: "/productdetails/producted",
|
|
query: {
|
|
stype: 1,
|
|
isRxGoods: isRxGoods,
|
|
mainProductCode: mainProductCode,
|
|
productCode: productCode.join(","),
|
|
},
|
|
});
|
|
},
|
|
|
|
//请求处方量信息数据
|
|
async userchufang(item) {
|
|
if (!item) item = this.discounchufang[0].title;
|
|
this.dataLoaded = false;
|
|
let list = [];
|
|
let data = await userque(item, '', 1, 8);
|
|
if (data) {
|
|
list = data.slice(0, 8);
|
|
this.processinformation = list;
|
|
this.chufanlist = data;
|
|
this.dataLoaded = true;
|
|
}
|
|
},
|
|
//点击请求处方量标签信息数据
|
|
async userquery(item) {
|
|
this.dataLoaded = false;
|
|
let list = [];
|
|
let data = await userquery(item);
|
|
if (data) {
|
|
list = data.slice(0, 8);
|
|
this.processinformation = list;
|
|
this.dataLoaded = true;
|
|
}
|
|
},
|
|
//处方用粮筛选
|
|
userclick(item, index) {
|
|
this.userchufang(index);
|
|
},
|
|
//全价猫干粮筛选
|
|
catclickGan() {
|
|
this.userstype = 0;
|
|
this.maoganCurIndex = this.maoganCurIndex ? this.maoganCurIndex : 0;
|
|
let apiCatAgeType = this.discoun[this.maoganCurIndex].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> |