For Baidu recommendation columns

This commit is contained in:
Vion
2022-02-08 18:25:56 +08:00
parent d9b3ddb7fd
commit 804a5cfc82
22 changed files with 791 additions and 256 deletions

View File

@@ -1,125 +0,0 @@
<template>
<div>
<van-address-edit
:area-list="areaList"
:address-info="{
name: editAddressData.name,
tel: editAddressData.tel,
addressDetail: editAddressData.detailAddress,
areaCode: areaCode,
}"
show-delete
show-set-default
show-search-result
:search-result="searchResult"
@save="onSave"
@delete="onDelete"
/>
</div>
</template>
<script>
import { Toast } from "vant";
import { areaList } from "@vant/area-data";
var _ = require("lodash");
import { memberAddress } from "../../ajax/getData";
export default {
data() {
return {
areaList,
searchResult: [],
areaCode: "",
};
},
props: ["editAddressData"],
computed: {},
methods: {
async onSave(content) {
// Toast('save');
let provinceId = Number(content.areaCode.substring(0, 2)); //省份id
let cityId = Number(content.areaCode.substring(2, 4)); //城市id
let districtId = Number(content.areaCode.substring(4, 7)); //区域编码
//id 详细地址 /收货人姓名 电话号码 省份id/城市id/区域编码
let memberId = JSON.parse(localStorage.getItem("userInfo")).data.id;
let postData = {
memberId,
provinceId: 25,
cityId: 36,
districtId: 418,
// provinceId,
// cityId,
// districtId,
detailAddress: content.addressDetail,
recipient: content.name,
recipientPhone: content.tel,
default: content.default,
};
let saveType = this.editAddressData.saveType ? "update" : "add";
let data = await memberAddress(saveType, postData);
if (data) {
this.$message({
type: "warning",
message: data.msg,
});
if (data.code == "0") {
this.$emit("isClose", false);
}
}
},
async onDelete() {
// Toast("delete");
let postData = {
ids: this.editAddressData.id,
memberId: this.editAddressData.memberId,
};
let data = await memberAddress("delete", postData);
if (data) {
this.$message({
type: "warning",
message: data.msg,
});
if (data.code == "0") {
this.$emit("isClose", false);
}
}
},
async areaCodeInit() {
var city = this.editAddressData.city;
var district = this.editAddressData.district;
this.areaCode = "1310001";
// _.forEach(this.areaList.city_list, (o, c) => {
// if (o == city) {
// // let cityId = String(_.take(c, 2));
// let cityId = c.substring(0, 4);
// _.forEach(this.areaList.county_list, (i, a) => {
// if (i == district) {
// // let districtId = String(_.take(a, 2));
// let districtId = a.substring(0, 4);
// if (cityId == districtId) {
// this.areaCode = a;
// }
// }
// });
// }
// });
},
},
mounted() {
this.areaCodeInit();
},
};
</script>
<style>
.van-area {
width: 400px;
margin: 0 auto;
border: 1px solid #808285;
}
.van-popup {
background-color: transparent;
}
.van-overlay {
background-color: transparent;
}
</style>

View File

@@ -0,0 +1,239 @@
<template>
<div class="ts-resentation rc-padding-y--lg">
<Myheader></Myheader>
<div class="rc-top"></div>
<div class="ts-banner-swiper-container">
<picture>
<source
media="(max-width: 768px)"
srcset="/images/breed/banner-mobile.png"
/>
<source
media="(min-width: 769px)"
srcset="/images/breed/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.breed.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.breed.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`">
<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.breed.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.breed.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`">
<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:{breed:{dog:[],cat:[]}},
swiperAOption: {
loop: false,
slidesPerView: "auto",
centeredSlides: true,
speed: 1000,
spaceBetween: 0,
pagination: {
el: "#swiperAPagnation",
clickable: true,
},
loopAdditionalSlides: 100,
navigation: {
nextEl: "#swiperAprev",
prevEl: "#swiperAnext",
}
},
swiperBOption: {
loop: false,
slidesPerView: "auto",
centeredSlides: true,
speed: 1000,
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>

View File

@@ -1,130 +0,0 @@
<template>
<div class="rc-padding-y--lg">
<Myheader></Myheader>
<div class="rc-top"></div>
<div class="ts-banner-swiper-container">
<picture>
<source
media="(max-width: 768px)"
srcset="/images/rc-phone.png"
/>
<source
media="(min-width: 769px)"
srcset="/images/userbanner.png"
/>
<img src="/images/banner/pc-weixin.png" />
</picture>
</div>
<div>
<ul class="ts-product-list rc-margin-bottom--lg">
<li
v-for="(item, index) in dataList.amature"
:key="index"
class="rc-margin-top--md"
>
<h2 class="rc-beta rc-margin-y--md">{{ index==1?'明星猫粮':'明星犬粮' }}</h2>
<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>
<div class="contair">
<nuxt-link :to="`/productdetails/productlist/`">
<span class="ts-standard-btn center">查看更多</span>
</nuxt-link>
</div>
</div>
</template>
<script>
import Myheader from "~/components/header.vue";
import envData from "~/config/env-data.js";
export default {
data() {
return {
envData,
dataList:{amature:[]}
};
},
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 >
.ts-banner-swiper-container {
img {
width: 100%;
height: auto;
object-fit: contain;
}
}
.ts-product-list li{
border:none;
max-width:22.75rem;
min-width:22.75rem;
width:22.75rem;
h2{
margin-left:auto;
margin-right:auto;
font-weight: bold;
}
.rc-column span {
height:auto;
}
.desc {
width:13rem;
height:auto;
}
}
</style>

View File

@@ -0,0 +1,239 @@
<template>
<div class="ts-resentation rc-padding-y--lg">
<Myheader></Myheader>
<div class="rc-top"></div>
<div class="ts-banner-swiper-container">
<picture>
<source
media="(max-width: 768px)"
srcset="/images/wet/banner-mobile.png"
/>
<source
media="(min-width: 769px)"
srcset="/images/wet/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.wet.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.wet.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`">
<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.wet.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.wet.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`">
<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:{wet:{dog:[],cat:[]}},
swiperAOption: {
loop: false,
slidesPerView: "auto",
centeredSlides: true,
speed: 1000,
spaceBetween: 0,
pagination: {
el: "#swiperAPagnation",
clickable: true,
},
loopAdditionalSlides: 100,
navigation: {
nextEl: "#swiperAprev",
prevEl: "#swiperAnext",
}
},
swiperBOption: {
loop: false,
slidesPerView: "auto",
centeredSlides: true,
speed: 1000,
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>