smart-admin/rc-busness/pages/usersearch/search.vue
2022-01-17 10:57:01 +08:00

750 lines
22 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>
<Myheader></Myheader>
<div class="rc-top"></div>
<div class="rc-max-width--xl rc-main">
<div class="usersearch">
<div class="form-search">
<van-search
v-model="value"
show-action
placeholder="请输入搜索关键词"
@search="onSearch"
class="rc-keyword"
>
<template #action>
<div @click="onSearch" class="rc-search">搜索</div>
</template>
</van-search>
</div>
<div class="rc-max-width--xl rc-title">
<strong>热门搜索</strong>
<span class="rc-change">换一批</span>
</div>
<div class="rc-max-width--xl rc-variety">
<ul>
<li v-for="(item, index) in searchdata" :key="index" @click="selectsearch(item, index)" :class="activeIndexa == index ? 'active' : 'unactive'">
{{ item.title }}
</li>
</ul>
</div>
<div class="usersearch">
<div class="usercontentshow" ref="usercontent">
<div class="usercontentshow rc-product">
<strong>我想搜</strong>
<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 class="rc-productcat userselect" @click="userselect" >
<img src="../../assets/image/rc-usericon.png" alt="" />
<span @click="usershow()">筛选</span>
</div>
</div>
</div>
<div class="ts-scrollable-container">
<strong>专区:</strong>
<ol class="ts-scrollable">
<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
{{ item.tagName }}
</li>
</ol>
</div>
<div class="ts-scrollable-container">
<strong>年龄:</strong>
<ol class="ts-scrollable">
<li v-for="(item, index) in catage" :key="index" @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
{{ item.tagName }}
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
<div class="online"></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>0.001{{item.price}}</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 v-if="isadrond" class="useronshow">
<div class="rc-mubu" v-if="isshow" @click="usershow()">
</div>
<div class="rc-bottom rc-full-width" v-if="isshow">
<div class="usersearch">
<div class="usercontentshow rc-column" ref="usercontent">
<div class="usercontentshow rc-product">
<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="ts-scrollable-container">
<strong>专区:</strong>
<ol class="ts-scrollable">
<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
{{ item.tagName }}
</li>
</ol>
</div>
<div class="ts-scrollable-container">
<strong>年龄:</strong>
<ol class="ts-scrollable">
<li v-for="(item, index) in catage" :key="index" @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
{{ item.tagName }}
</li>
</ol>
</div>
<div class="ts-scrollable-container">
<strong>功能:</strong>
<ol class="ts-scrollable">
<li v-for="(item, index) in catagea" :key="index" @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
{{ item.tagName }}
</li>
</ol>
</div>
<div class="ts-scrollable-container">
<strong>品种:</strong>
<ol class="ts-scrollable">
<li v-for="(item, index) in catageb" :key="index" @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
{{ item.tagName }}
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
<el-dialog
:visible.sync="dialogInfo1"
hegight="700px"
v-if="!isadrond"
>
<div class="usersearch">
<div class="usercontentshow" ref="usercontent">
<div class="usercontentshow rc-product">
<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="ts-scrollable-container">
<strong>专区:</strong>
<ol class="ts-scrollable">
<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
{{ item.tagName }}
</li>
</ol>
</div>
<div class="ts-scrollable-container">
<strong>年龄:</strong>
<ol class="ts-scrollable">
<li v-for="(item, index) in catage" :key="index" @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
{{ item.tagName }}
</li>
</ol>
</div>
<div class="ts-scrollable-container">
<strong>功能:</strong>
<ol class="ts-scrollable">
<li v-for="(item, index) in catagea" :key="index" @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
{{ item.tagName }}
</li>
</ol>
</div>
<div class="ts-scrollable-container">
<strong>品种:</strong>
<ol class="ts-scrollable">
<li v-for="(item, index) in catageb" :key="index" @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
{{ item.tagName }}
</li>
</ol>
</div>
</div>
</div>
<div class="rc-button">
<span @click="openclose()">取消</span>
<em>确认</em>
</div>
</el-dialog>
</div>
<!-- rc-main end -->
</div>
</template>
<script>
import Myheader from '~/components/header.vue'
import { biaome,userstype,searchchanpin } from "../../ajax/getData";
export default {
data() {
return {
value: "",
userserachlist:[
{
}
],
userstype:[],
activeIndex:0,
activeIndex1:0,
activeIndexa:0,
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"),
},
],
usercatlist:[],
userdoglisgt:[],
};
},
components: {
Myheader,
},
mounted(){
this.usetmessage();
this.userst();
},
methods: {
async usersearch(stype){
let data=await searchchanpin(stype);
console.log(data);
if(data){
this.rccontair=data;
}
},
async userst() {
let pinzhong=[];
let zhuanqu=[];
let age=[];
let gonneg=[];
let data = await userstype();
if(data){
this.userstype=data;
}
this.usercatlist=this.userstype.filter(item=>item.petType=='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=gonneg
}
})
this.userdoglisgt=this.userstype.filter(item=>item.petType=='1')
},
async usetmessage() {
this.$nextTick(() => {
this.$refs.userstandard[0].style.margin=0 + 'px'
})
let data = await biaome(this.value,10);
if(data){
this.rccontair=data;
}
console.log( this.rccontair);
},
selectproduce(item){
this.$router.push({
path: "/productdetails/producted",
query: {
stype: 1,
productCode:item.productList[0].productCode
},
});
},
userbuy(){
this.$router.push({
path: "/myorder/userrecord",
query: {
stype: 1,
},
});
},
openclose(){
this.dialogInfo1=false;
},
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;
})
}
},
//搜索
onSearch(e) {
this.usetmessage(this.value);
console.log(e);
},
selectGoods(item, index) {
this.activeIndex1=index;
let petType={
petType:this.activeIndex1,
}
for(let i =0;i<this.userserachlist.length;i++){
if(!this.userserachlist.includes(petType)){
this.userserachlist.push(petType)
}
console.log(this.userserachlist);
}
this.usersearch(this.userserachlist)
console.log(index);
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=gonneg
}
})
console.log(pinzhong);
}else if(this.activeIndex1==1){
this.userdoglisgt.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=gonneg
}
})
}
console.log(index);
console.log('----');
this.activeIndex=index;
console.log('----');
},
selectGoodsa(item, index) {
let pinzhong=[];
let zhuanqu=[];
let age=[];
let gonneg=[];
this.activeIndex1=index;
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=gonneg
}
})
console.log(pinzhong);
}else if(this.activeIndex1==1){
this.userdoglisgt.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=gonneg
}
})
}
console.log(index);
console.log('----');
},
userselect(){
this.$nextTick(() => {
this.ifadroind();
console.log( this.$refs.usercontent)
})
},
usershow(){
this.$nextTick(() => {
this.isshow=false;
// dom元素更新后执行因此这里能正确打印更改之后的值
// this.$refs.usercontent.style.display='block ';
})
},
selectsearch(item, index) {
console.log(item)
this.value=item.title;
this.activeIndexa=index;
},
selectage(item, index) {
console.log(item)
let tagUsedAge={
petType:this.activeIndex1,
tagUsedAge:item.tagName
}
for(let i =0;i<this.userserachlist.length;i++){
if(!this.userserachlist.includes(tagUsedAge)){
this.userserachlist.push(tagUsedAge)
}
console.log(this.userserachlist);
}
this.usersearch(this.userserachlist)
this.activeIndexc=index;
},
selectagc(item, index) {
console.log(item)
let tagFunction={
petType:this.activeIndex1,
tagFunction:item.tagName
}
for(let i =0;i<this.userserachlist.length;i++){
if(!this.userserachlist.includes(tagFunction)){
this.userserachlist.push(tagFunction)
}
console.log(this.userserachlist);
}
this.usersearch(this.userserachlist)
this.activeIndexd=index;
},
selectagd(item, index) {
console.log(item)
let tagBreed={
petType:this.activeIndex1,
tagBreed:item.tagName
}
for(let i =0;i<this.userserachlist.length;i++){
if(!this.userserachlist.includes(tagBreed)){
this.userserachlist.push(tagBreed)
}
console.log(this.userserachlist);
}
this.usersearch(this.userserachlist)
this.activeIndexe=index;
},
selectproduct(item, index){
console.log(item)
this.activeIndexb=index;
let categoryName={
petType:this.activeIndex1,
categoryName:item.tagName,
}
for(let i =0;i<this.userserachlist.length;i++){
if(!this.userserachlist.includes(categoryName)){
this.userserachlist.push(categoryName)
}
console.log(this.userserachlist);
}
this.usersearch(this.userserachlist)
},
// selectage(item, index) {
// this.activeIndexc=index;
// },
// selectage(item, index) {
// this.activeIndexc=index;
// },
//弹框的显示隐藏
},
};
</script>
<style lang="less" scoped >
@import url("../../assets/css/global.less");
@import url("../../assets/css/search.less");
</style>