smart-admin/rc-busness/pages/productdetails/productlist.vue
2022-01-20 19:22:35 +08:00

881 lines
26 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div>
<transition name="fade">
<div class="userloding" v-show="isLoading"></div>
</transition>
<Myheader></Myheader>
<div class="rc-top"></div>
<div class="rc-max-width--xl rc-main">
<div class="usersearch">
<div class="usercontentshow" ref="usercontent">
<div class="rc-product ts-scrollable-container">
<div class="rc-productcat ts-scrollable">
<ol>
<li
v-for="(item, index) in userproduct"
:key="index"
@click="selectGoods(item, index)"
:class="activeIndex == index ? 'active' : 'unactive'"
class="ts-standard-btn"
ref="userstandard"
>
<img :src="item.catimage" alt="" />
<span>{{ item.title }}</span>
</li>
</ol>
</div>
</div>
<div class="online rc-md-up"></div>
<div class="ts-scrollable-container">
<h2>专区:</h2>
<ol class="ts-scrollable">
<li
v-for="(item, index) in prefecture"
:key="index"
@click="selectproduct(item, index)"
:class="item.checked ? 'active' : 'unactive'"
ref="chosebox"
>
{{ item.tagName }}
</li>
</ol>
</div>
<div class="online rc-md-up"></div>
<div class="ts-scrollable-container">
<h2>年龄:</h2>
<ol class="ts-scrollable">
<li
v-for="(item, index) in catage"
:key="index"
@click="selectage(item, index)"
:class="item.checked ? 'active' : 'unactive'"
ref="chosebox1"
>
{{ item.tagName }}
</li>
</ol>
</div>
<div class="online rc-md-up"></div>
<div class="ts-scrollable-container">
<h2>功能:</h2>
<ol class="ts-scrollable">
<li
v-for="(item, index) in catagea"
:key="index"
@click="selectagc(item, index)"
:class="item.checked ? 'active' : 'unactive'"
ref="cgosebox4"
>
{{ item.tagName }}
</li>
</ol>
</div>
<div class="online rc-md-up"></div>
<div class="ts-scrollable-container">
<h2>品种:</h2>
<ol class="ts-scrollable">
<li
v-for="(item, index) in catageb"
:key="index"
@click="selectagd(item, index)"
:class="item.checked ? 'active' : 'unactive'"
ref="chosebox3"
>
{{ item.tagName }}
</li>
</ol>
</div>
<div class="online rc-md-up"></div>
</div>
</div>
</div>
<!-- rc-main end -->
<div class="online bold"></div>
<!-- rc-main start -->
<div class="rc-max-width--xl">
<div class="usersearch">
<div class="rc-contair">
<ul class="ts-product-list">
<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)"
>
<div class="rc-rccontair">
<img :src="item.picture" alt="" />
</div>
</div>
<div class="rc-column">
<div class="rc-click" @click="selectproduce(item)">
<span>{{ item.categoryName }}</span>
<i>¥{{ item.ecPrice }}</i>
</div>
<strong
class="
ts-standard-btn ts-standard-btn--two
rc-margin-y--md
center
"
@click="userbuy()"
>立即购买</strong
>
</div>
</li>
</ul>
</div>
<div class="usershow" v-if="openshow">
<div class="rc-show"></div>
</div>
</div>
</div>
<!-- rc-main end -->
<div v-if="isadrond">
<div class="rc-mubu" v-if="isshow" @click="usershow()"></div>
<div class="rc-bottom" v-if="isshow">
<div class="rc-bottoma">
<div class="rc-productcat ts-scrollable">
<div
class="rc-cat"
v-for="(item, index) in userproduct"
:key="index"
@click="selectGoodsa(item, index)"
:class="activeIndex1 == index ? 'active' : 'unactive'"
>
<img :src="item.catimage" alt="" />
<span>{{ item.tagName }}</span>
</div>
</div>
<div class="rc-prefecture">
<h2>专区:</h2>
<ol class="ts-scrollable">
<li
v-for="(item, index) in prefecture"
:key="index"
@click="selectproduct(item, index)"
:class="activeIndexb == index ? 'active' : 'unactive'"
ref="chosebox"
>
{{ item.tagName }}
</li>
</ol>
</div>
<div class="ts-scrollable-container rc-margin-y--md">
<h2>年龄:</h2>
<ol class="ts-scrollable">
<li
v-for="(item, index) in catage"
:key="index"
@click="selectage(item, index)"
:class="activeIndexc == index ? 'active' : 'unactive'"
ref="chosebox1"
>
{{ item.tagName }}
</li>
</ol>
</div>
<div class="ts-scrollable-container rc-margin-y--md">
<h2>功能:</h2>
<ol class="ts-scrollable">
<li
v-for="(item, index) in catagea"
:key="index"
@click="selectagc(item, index)"
:class="activeIndexd == index ? 'active' : 'unactive'"
ref="cgosebox4"
>
{{ item.tagName }}
</li>
</ol>
</div>
<div class="ts-scrollable-container">
<h2>品种:</h2>
<ol class="ts-scrollable">
<li
v-for="(item, index) in catageb"
:key="index"
@click="selectagd(item, index)"
:class="activeIndexe == index ? 'active' : 'unactive'"
ref="chosebox3"
>
{{ item.tagName }}
</li>
</ol>
</div>
</div>
<div class="rc-footer">
<span @click="usershow()">取消</span>
<em @click="usershow()">确定</em>
</div>
</div>
</div>
<el-dialog :visible.sync="dialogInfo1" hegight="700px" v-if="!isadrond">
<div class="rc-bottom">
<div class="rc-bottoma">
<div class="rc-productcat ts-scrollable">
<div
class="rc-cat"
v-for="(item, index) in userproduct"
:key="index"
@click="selectGoodsa(item, index)"
ref="usercliak"
:class="activeIndex1 == index ? 'active' : 'unactive'"
>
<img :src="item.name" alt="" />
<span>{{ item.title }}</span>
</div>
</div>
<div class="rc-prefecture">
<h2>专区:</h2>
<ol>
<li
v-for="(item, index) in prefecture"
:key="index"
@click="selectproduct(item, index)"
:class="activeIndexb == index ? 'active' : 'unactive'"
ref="chosebox"
>
{{ item.tagName }}
</li>
</ol>
</div>
<div class="ts-scrollable-container rc-margin-y--md">
<h2>年龄:</h2>
<ol>
<li
v-for="(item, index) in catage"
:key="index"
@click="selectage(item, index)"
:class="activeIndexc == index ? 'active' : 'unactive'"
ref="chosebox1"
>
{{ item.tagName }}
</li>
</ol>
</div>
<div class="ts-scrollable-container rc-margin-y--md">
<h2>功能:</h2>
<ol>
<li
v-for="(item, index) in catagea"
:key="index"
@click="selectagc(item, index)"
:class="activeIndexd == index ? 'active' : 'unactive'"
ref="cgosebox4"
>
{{ item.tagName }}
</li>
</ol>
</div>
<div class="ts-scrollable-container">
<h2>品种:</h2>
<ol>
<li
v-for="(item, index) in catageb"
:key="index"
@click="selectagd(item, index)"
:class="activeIndexe == index ? 'active' : 'unactive'"
ref="chosebox3"
>
{{ item.tagName }}
</li>
</ol>
</div>
</div>
</div>
<div class="rc-button">
<span @click="openclose()">取消</span>
<em>确认</em>
</div>
</el-dialog>
<MyFooter></MyFooter>
</div>
</template>
<script>
import Myheader from "~/components/header.vue";
import MyFooter from '~/components/rc-footer.vue'
import {
userstype,
biaome,
biaomessage,
searchchanpin,
} from "../../ajax/getData";
export default {
data() {
return {
value: "",
isLoading: true,
userstype: [],
activeIndex: "-1",
allacindex: 0,
userishwo: true,
userishwo1: true,
userishwo2: true,
userishwo3: true,
userishwo4: true,
userserachlist: [
{
categoryName: "", //专区
tagUsedAge: "", //年龄
tagFunction: "", //功能
tagBreed: "", //品种
},
],
activeIndex1: 0,
activeIndexa: "-1",
dialogInfo1: false,
activeIndexb: "-1",
activeIndexc: "-1",
activeIndexd: "-1",
activeIndexe: "-1",
activeIndexf: "-1",
isadrond: true,
isshow: false,
openshow: false,
direction: "btt",
searchdata: [
{
title: "猫罐头",
ordernum: "1",
},
{
title: "犬罐头",
ordernum: "2",
},
{
title: "布偶猫",
ordernum: "3",
},
{
title: "博美犬",
ordernum: "4",
},
],
userproduct: [
{
title: "猫产品",
ordernum: "1",
catimage: require("../../assets/image/rc-cat.png"),
},
{
title: "犬产品",
ordernum: "2",
catimage: require("../../assets/image/rc-dog.png"),
},
],
catproduct: [
{
title: "猫产品",
ordernum: "1",
catimage: require("../../assets/image/rc-cat.png"),
},
{
title: "犬产品",
ordernum: "2",
catimage: require("../../assets/image/rc-dog.png"),
},
],
prefecture: [
{
title: "猫湿粮",
ordernum: "2",
catimage: require("../../assets/image/rc-dog.png"),
},
{
title: "品种猫粮",
ordernum: "2",
catimage: require("../../assets/image/rc-dog.png"),
},
{
title: "营养猫粮",
ordernum: "2",
catimage: require("../../assets/image/rc-dog.png"),
},
{
title: "功能猫粮",
ordernum: "2",
catimage: require("../../assets/image/rc-dog.png"),
},
],
catage: [
{
title: "<4月龄",
ordernum: "1",
},
{
title: "4-12月龄",
ordernum: "2",
},
{
title: "1-7岁",
ordernum: "3",
},
{
title: ">7岁",
ordernum: "4",
},
],
catagea: [
{
title: "绝育呵护",
ordernum: "1",
},
{
title: "口腔呵护",
ordernum: "2",
},
{
title: "美毛呵护",
ordernum: "3",
},
{
title: "去毛球",
ordernum: "4",
},
],
catageb: [
{
title: "英短",
ordernum: "1",
},
{
title: "美短",
ordernum: "2",
},
{
title: "布偶",
ordernum: "3",
},
{
title: "暹罗",
ordernum: "4",
},
],
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-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"),
},
],
};
},
components: {
Myheader,
MyFooter
},
mounted() {
let stype = this.$route.query.stype;
this.$nextTick(() => {
this.$refs.userstandard[0].style.margin = 0 + "px";
});
this.userst();
// this.activeIndex = stype;
// if (stype !== "" && stype !== undefined) {
// this.onmessage(stype);
// } else {
// this.usetmessage();
// }
},
methods: {
async usersearch(stype, usertype) {
let data = await searchchanpin(stype, usertype, 1, 10);
if (data) {
this.rccontair = data;
}
},
async userst() {
this.isLoading = true;
let pinzhong = [];
let zhuanqu = [];
let age = [];
let gonneg = [];
let data = await userstype();
if (data) {
this.userstype = data;
this.isLoading = false;
}
this.usercatlist = this.userstype.filter((item) => item.petType == "0");
this.usercatlist.map((element) => {
if (element.name == "品种") {
pinzhong.push(element);
this.catageb = pinzhong;
this.catageb.forEach((element) => {
element.checked = false;
});
}
if (element.name == "功能") {
gonneg.push(element);
this.catagea = gonneg;
this.catagea.forEach((element) => {
element.checked = false;
});
}
if (element.name == "年龄") {
age.push(element);
this.catage = age;
this.catage.forEach((element) => {
element.checked = false;
});
}
if (element.name == "专区") {
zhuanqu.push(element);
this.prefecture = zhuanqu;
this.prefecture.forEach((element) => {
element.checked = false;
});
}
console.log(pinzhong);
// debugger
});
this.userdoglisgt = this.userstype.filter((item) => item.petType == "1");
},
async usetmessage() {
this.isLoading = true;
let data = await biaome(this.activeIndex1, "", 1, 10);
if (data) {
this.rccontair = data;
this.isLoading = false;
}
},
async onmessage(stype) {
this.isLoading = true;
let data = await biaomessage(stype, "", 1, 10);
if (data) {
this.rccontair = data;
this.isLoading = false;
}
},
userbuy() {
this.$router.push({
path: "/myorder/userrecord",
query: {
stype: 1,
},
});
},
openclose() {
this.dialogInfo1 = false;
},
selectproduce() {
this.$router.push({
path: "/productdetails/producted",
query: {
stype: 1,
},
});
},
ifadroind() {
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.$nextTick(() => {
this.isadrond = false;
this.dialogInfo1 = true;
this.isadrond = false;
this.isshow = false;
});
} else {
console.log("当前是手机打开");
this.$nextTick(() => {
this.isadrond = true;
this.isshow = true;
this.$refs.usercontent.style.display = "none ";
this.dialogInfo1 = false;
});
}
},
selectGoods(item, index) {
this.activeIndex1 = index;
this.activeIndex = index;
this.allacindex = index;
this.usersearch(this.userserachlist, this.activeIndex1);
// for (let i = 0; i < this.userserachlist.length; i++) {
// if (!this.userserachlist.includes(petType)) {
// this.userserachlist.push(petType);
// }
// }
this.userserachlist = [
{
categoryName: "", //专区
tagUsedAge: "", //年龄
tagFunction: "", //功能
tagBreed: "", //品种
},
];
let pinzhong = [];
let zhuanqu = [];
let age = [];
let gonneg = [];
if (this.activeIndex1 == 0) {
this.usercatlist.map((element) => {
if (element.name == "品种") {
pinzhong.push(element);
this.catageb = pinzhong;
}
if (element.name == "功能") {
gonneg.push(element);
this.catagea = gonneg;
}
if (element.name == "年龄") {
age.push(element);
this.catage = age;
}
if (element.name == "专区") {
zhuanqu.push(element);
this.prefecture = zhuanqu;
}
});
} else if (this.activeIndex1 == 1) {
this.userdoglisgt.map((element) => {
if (element.name == "品种") {
pinzhong.push(element);
this.catageb = pinzhong;
this.catageb.forEach((element) => {
element.checked = false;
});
}
if (element.name == "功能") {
gonneg.push(element);
this.catagea = gonneg;
this.catagea.forEach((element) => {
element.checked = false;
});
}
if (element.name == "年龄") {
age.push(element);
this.catage = age;
this.catage.forEach((element) => {
element.checked = false;
});
}
if (element.name == "专区") {
zhuanqu.push(element);
this.prefecture = zhuanqu;
this.prefecture.forEach((element) => {
element.checked = false;
});
}
});
}
this.activeIndex = index;
},
selectGoodsa(item, index) {
this.activeIndex1 = index;
},
userselect() {
this.$nextTick(() => {
this.ifadroind();
});
},
usershow() {
this.$nextTick(() => {
this.isshow = false;
// dom元素更新后执行因此这里能正确打印更改之后的值
this.$refs.usercontent.style.display = "block ";
});
},
selectsearch(item, index) {
this.activeIndexa = index;
},
selectage(item, index) {
if(this.activeIndex=='-1'){
this.activeIndex=0;
}
let tagUsedAge = {};
this.activeIndexc = index;
this.userishwo1 = !this.userishwo1;
console.log(this.userishwo1);
if (item.checked == false) {
item.checked = true;
this.userserachlist[0].tagUsedAge = item.tagName;
this.$refs.chosebox1[index].className = "active";
} else {
this.userserachlist[0].tagUsedAge = "";
item.checked = false;
this.$refs.chosebox1[index].className = "unactive";
}
// for (let i = 0; i < this.userserachlist.length; i++) {
// if (!this.userserachlist.includes(tagUsedAge)) {
// this.userserachlist.push(tagUsedAge);
// }
// }
this.usersearch(this.userserachlist, this.activeIndex1);
},
selectagc(item, index) {
// let tagFunction = {};
if(this.activeIndex=='-1'){
this.activeIndex=0;
}
this.activeIndexd = index;
this.userishwo2 = !this.userishwo2;
if (item.checked == false) {
item.checked = true;
this.$refs.cgosebox4[index].className = "active";
this.userserachlist[0].tagFunction = item.tagName;
} else {
item.checked = false;
this.$refs.cgosebox4[index].className = "unactive";
this.userserachlist[0].tagFunction = "";
}
// if (this.userishwo2 == false) {
// tagFunction = {
// petType: this.allacindex,
// tagFunction: item.tagName,
// };
// } else {
// console.log("这是false");
// tagFunction = {
// petType: this.allacindex,
// };
// }
// for (let i = 0; i < this.userserachlist.length; i++) {
// if (!this.userserachlist.includes(tagFunction)) {
// this.userserachlist.push(tagFunction);
// }
// }
this.usersearch(this.userserachlist, this.activeIndex1);
},
selectagd(item, index) {
if(this.activeIndex=='-1'){
this.activeIndex=0;
}
let tagBreed = {};
this.activeIndexe = index;
this.userishwo3 = !this.userishwo3;
if (item.checked == false) {
item.checked = true;
this.$refs.chosebox3[index].className = "active";
this.userserachlist[0].tagBreed = item.tagName;
} else {
item.checked = false;
this.$refs.chosebox3[index].className = "unactive";
this.userserachlist[0].tagBreed = "";
}
// this.$refs.chosebox3[index].className = "unactive";
// for (let i = 0; i < this.userserachlist.length; i++) {
// if (!this.userserachlist.includes(tagBreed)) {
// this.userserachlist.push(tagBreed);
// }
// }
this.usersearch(this.userserachlist, this.activeIndex1);
},
selectproduct(item, index) {
if(this.activeIndex=='-1'){
this.activeIndex=0;
}
this.activeIndexb = index;
// console.log(this.userishwo=!this.userishwo)
if (item.checked == false) {
item.checked = true;
this.$refs.chosebox[index].className = "active";
this.userserachlist[0].categoryName = item.tagName;
} else {
item.checked = false;
this.$refs.chosebox[index].className = "unactive";
this.userserachlist[0].categoryName = "";
}
// if (this.userishwo == false) {
// console.log("====");
// categoryName = {
// petType: this.allacindex,
// categoryName: item.tagName,
// };
// } else {
// categoryName = {
// petType: this.allacindex,
// };
// }
// this.$refs.chosebox[index].className = "unactive";
// for (let i = 0; i < this.userserachlist.length; i++) {
// if (!this.userserachlist.includes(categoryName)) {
// this.userserachlist.push(categoryName);
// }
// }
this.usersearch(this.userserachlist, this.activeIndex1);
},
//弹框的显示隐藏
},
};
</script>
<style lang="less" scoped >
@import url("../../assets/css/global.less");
@import url("../../assets/css/product-list.less");
</style>