smart-admin/rc-busness/pages/resentation/rxgoods.vue

<template>
  <div class="ts-resentation rc-padding-y--lg">
    <Myheader></Myheader>
    <div class="rc-top"></div>
    <div class="ts-banner-swiper-container rc-margin-bottom--lg--desktop">
		<picture>
		  <source
		    media="(max-width: 768px)"
		    srcset="/images/rxgoods/banner-mobile.png"
		  />
		  <source
		    media="(min-width: 769px)"
		    srcset="/images/rxgoods/banner.png"
		  />
		  <img src="/images/banner/pc-weixin.png" />
		</picture>
    </div>
	<div>
		<h2 class="rc-alpha rc-margin-y--md rc-text--center rc-margin-y--lg--mobile">明星犬粮</h2>
		<ul class="ts-product-list rc-margin-bottom--lg rc-md-up">
		  <li
		    v-for="(item, index) in dataList.rxgoods.dog"
		    :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.productimage" alt="" />
		      </div>
		    </div>
		    <div class="rc-column">
		      <div class="rc-click" @click="selectproduce(item, index)">
		        <span>{{ item.title }}</span>
				<div class="desc">{{ item.detail }}</div>
		      </div>
		      <strong
		        class="
		          ts-standard-btn ts-standard-btn--two
		          rc-margin-y--md
		          center
		        "
		        @click="selectproduce(item, index)"
		        >立即购买</strong
		      >
		    </div>
		  </li>
		</ul>
		<div class="rc-md-down ts-product-list">
			<swiper :options="swiperAOption">
				<swiper-slide
				  v-for="(item, index) in dataList.rxgoods.dog"
				  :key="index"
				>
					<div class="rc-click rc-margin-bottom--md" @click="selectproduce(item, index)">
					  <div class="rc-rccontair">
					    <img :src="item.productimage" alt="" />
					  </div>
					</div>
					<div class="rc-column">
					  <div class="rc-click" @click="selectproduce(item, index)">
					    <h2 class="rc-beta">{{ item.title }}</h2>
						<div class="desc">{{ item.detail }}</div>
					  </div>
					  <strong
					    class="
					      ts-standard-btn ts-standard-btn--two
					      rc-margin-y--md
					      center
					    "
					    @click="selectproduce(item, index)"
					    >立即购买</strong
					  >
					</div>
				</swiper-slide>
			</swiper>
			<div id="swiperAPagnation" class="swiper-pagination ts-carousel-indicator center"></div>
			<div id="swiperAprev" class="swiper-button-prev ts-swiper-arrow"></div>
			<div id="swiperAnext" class="swiper-button-next ts-swiper-arrow"></div>
		</div>
	</div>
	<div class="contair rc-margin-y--lg--mobile">
	  <nuxt-link :to="`/productdetails/productlist/?stype=1&rxgoods=1`">
	    <span class="ts-standard-btn center">查看更多</span>
	  </nuxt-link>
	</div>
	<!-- Dog end -->
	<div class="online bold rc-margin-y--lg"></div>
	<!-- Cat start -->
	<div>
		<h2 class="rc-alpha rc-margin-y--md rc-text--center rc-margin-y--lg--mobile">明星猫粮</h2>
		<ul class="ts-product-list rc-margin-bottom--lg rc-md-up">
		  <li
		    v-for="(item, index) in dataList.rxgoods.cat"
		    :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.productimage" alt="" />
		      </div>
		    </div>
		    <div class="rc-column">
		      <div class="rc-click" @click="selectproduce(item, index)">
		        <span>{{ item.title }}</span>
				<div class="desc">{{ item.detail }}</div>
		      </div>
		      <strong
		        class="
		          ts-standard-btn ts-standard-btn--two
		          rc-margin-y--md
		          center
		        "
		        @click="selectproduce(item, index)"
		        >立即购买</strong
		      >
		    </div>
		  </li>
		</ul>
		<div class="rc-md-down ts-product-list">
			<swiper :options="swiperBOption">
				<swiper-slide
				  v-for="(item, index) in dataList.rxgoods.cat"
				  :key="index"
				>
					<div class="rc-click rc-margin-bottom--md" @click="selectproduce(item, index)">
					  <div class="rc-rccontair">
					    <img :src="item.productimage" alt="" />
					  </div>
					</div>
					<div class="rc-column">
					  <div class="rc-click" @click="selectproduce(item, index)">
					    <h2 class="rc-beta">{{ item.title }}</h2>
						<div class="desc">{{ item.detail }}</div>
					  </div>
					  <strong
					    class="
					      ts-standard-btn ts-standard-btn--two
					      rc-margin-y--md
					      center
					    "
					    @click="selectproduce(item, index)"
					    >立即购买</strong
					  >
					</div>
				</swiper-slide>
			</swiper>
			<div id="swiperBPagnation" class="swiper-pagination ts-carousel-indicator center"></div>
			<div id="swiperBprev" class="swiper-button-prev ts-swiper-arrow"></div>
			<div id="swiperBnext" class="swiper-button-next ts-swiper-arrow"></div>
		</div>
	</div>
	<div class="contair rc-margin-y--lg--mobile">
	  <nuxt-link :to="`/productdetails/productlist/?stype=0&rxgoods=1`">
	    <span class="ts-standard-btn center">查看更多</span>
	  </nuxt-link>
	</div>
	<!-- Cat end-->
  </div>
</template>

<script>
import Myheader from "~/components/header.vue";
import envData from "~/config/env-data.js";
export default {
  data() {
    return {
		envData,
		dataList:{rxgoods:{dog:[],cat:[]}},
		swiperAOption: {
			loop: false,
			slidesPerView: "auto",
			centeredSlides: true,
			speed: 1000,
			autoplay: {
			    delay: 3000,
			},
			spaceBetween: 0,
			pagination: {
				el: "#swiperAPagnation",
				clickable: true,
			},
			loopAdditionalSlides: 100,
			navigation: {
				nextEl: "#swiperAprev",
				prevEl: "#swiperAnext",
			}
		},
		swiperBOption: {
			loop: false,
			slidesPerView: "auto",
			centeredSlides: true,
			speed: 1000,
			autoplay: {
			    delay: 3000,
			},
			spaceBetween: 0,
			pagination: {
				el: "#swiperBPagnation",
				clickable: true,
			},
			loopAdditionalSlides: 100,
			navigation: {
				nextEl: "#swiperBprev",
				prevEl: "#swiperBnext",
			}
		},
	}
  },
  components: {
    Myheader,
  },
  mounted(){
	  let env=process.env.NODE_ENV;
	  this.dataList=this.envData[env];
  },
  methods:{
      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(","),
          },
        });
      },
  }
};
</script>

<style lang="less" scoped >
 @import url("../../assets/css/resentation.less");
</style>