xinyin025/smart-admin
1
0
Fork 0
mirror of https://gitee.com/lab1024/smart-admin.git synced 2025-10-02 02:06:38 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Resentation page added : rx goods

Browse Source
This commit is contained in:
Vion 2022-02-14 12:28:38 +08:00
parent 4ef3c32ef3
commit 0fe1ff7065
10 changed files with 401 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
rc-busness/config/env-data.js
View File

@ -343,6 +343,84 @@ let devData={
],
},
]
},
rxgoods:{
dog:[
{
title: "皇家成犬肠道全价处方粮",
productimage: "/images/rxgoods/dog-1.png",
detail: "帮助维持消化系统健康 满足爱宠能量需求 满足爱宠食欲减退",
ecPrice: "",
productCode:'22',
productList: [
{
productCode: "22",
},
],
},
{
title: "皇家成犬泌尿道全价处方粮",
productimage: "/images/rxgoods/dog-2.png",
detail: "高品质高易消化蛋白质 优化尿液PH值和 尿液离子浓度",
ecPrice: "",
productCode:'19',
productList: [
{
productCode: "19",
},
],
},
{
title: "皇家成犬皮肤全价处方粮",
productimage: "/images/rxgoods/dog-3.png",
detail: "抗氧化复合物协同作用帮助中和自由基 添加必须脂肪酸EPA和DHA 帮助维持肠道菌群支持消化系统健康",
ecPrice: "",
productCode:'27',
productList: [
{
productCode: "27",
},
],
},
],
cat:[
{
title: "皇家成猫泌尿道全价处方粮",
productimage: "/images/rxgoods/cat-1.png",
detail: "控制镁、钙及磷含量 促进尿液达到理想离子浓度及PH值 有助于猫咪适应环境带来的新挑战",
ecPrice: "",
productCode:'5',
productList: [
{
productCode: "5",
},
],
},
{
title: "皇家成猫肠道全价处方粮",
productimage: "/images/rxgoods/cat-2.png",
detail: "高易消化成分配以均衡的电解质 含有EPA、DHA、维生素E支持消化健康 益生元帮助促进肠道菌群平衡",
ecPrice: "",
productCode:'12',
productList: [
{
productCode: "12",
},
],
},
{
title: "皇家成猫皮肤被毛全价处方粮",
productimage: "/images/rxgoods/cat-3.png",
detail: "添加皮肤屏障复合物 添加必须脂肪酸EPA和DHA 帮助减少鸟粪石和草酸钙结石形成",
ecPrice: "",
productCode:'8',
productList: [
{
productCode: "8",
},
],
},
]
}
};
@ -693,6 +771,84 @@ let prdData={
],
},
]
},
rxgoods:{
dog:[
{
title: "皇家成犬肠道全价处方粮",
productimage: "/images/rxgoods/dog-1.png",
detail: "帮助维持消化系统健康 满足爱宠能量需求 满足爱宠食欲减退",
ecPrice: "",
productCode:'22',
productList: [
{
productCode: "22",
},
],
},
{
title: "皇家成犬泌尿道全价处方粮",
productimage: "/images/rxgoods/dog-2.png",
detail: "高品质高易消化蛋白质 优化尿液PH值和 尿液离子浓度",
ecPrice: "",
productCode:'19',
productList: [
{
productCode: "19",
},
],
},
{
title: "皇家成犬皮肤全价处方粮",
productimage: "/images/rxgoods/dog-3.png",
detail: "抗氧化复合物协同作用帮助中和自由基 添加必须脂肪酸EPA和DHA 帮助维持肠道菌群支持消化系统健康",
ecPrice: "",
productCode:'27',
productList: [
{
productCode: "27",
},
],
},
],
cat:[
{
title: "皇家成猫泌尿道全价处方粮",
productimage: "/images/rxgoods/cat-1.png",
detail: "控制镁、钙及磷含量 促进尿液达到理想离子浓度及PH值 有助于猫咪适应环境带来的新挑战",
ecPrice: "",
productCode:'5',
productList: [
{
productCode: "5",
},
],
},
{
title: "皇家成猫肠道全价处方粮",
productimage: "/images/rxgoods/cat-2.png",
detail: "高易消化成分配以均衡的电解质 含有EPA、DHA、维生素E支持消化健康 益生元帮助促进肠道菌群平衡",
ecPrice: "",
productCode:'12',
productList: [
{
productCode: "12",
},
],
},
{
title: "皇家成猫皮肤被毛全价处方粮",
productimage: "/images/rxgoods/cat-3.png",
detail: "添加皮肤屏障复合物 添加必须脂肪酸EPA和DHA 帮助减少鸟粪石和草酸钙结石形成",
ecPrice: "",
productCode:'8',
productList: [
{
productCode: "8",
},
],
},
]
}
};
//Production data end

245
rc-busness/pages/resentation/rxgoods.vue Normal file
View File

@ -0,0 +1,245 @@
<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>

BIN
rc-busness/static/images/rxgoods/banner-mobile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 241 KiB

BIN
rc-busness/static/images/rxgoods/banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 349 KiB

BIN
rc-busness/static/images/rxgoods/cat-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
rc-busness/static/images/rxgoods/cat-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
rc-busness/static/images/rxgoods/cat-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
rc-busness/static/images/rxgoods/dog-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
rc-busness/static/images/rxgoods/dog-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
rc-busness/static/images/rxgoods/dog-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB