sf

jiangping

2025-04-30 dcdb0231034810232f2542f3865666ebf72daf11

 h5/pages/index_2/index.vue

@@ -1,14 +1,14 @@
<template>
   <view class="box">
      <view class="box_bg" :style="{backgroundImage: 'url(' + Config.resourcePath + Config.bgImg + ')'}"></view>
      <view class="box_user">
         <text>{{User.username}}</text>
         <image src="@/static/ic_logout@2x.png" mode="widthFix" @click="loginOut"></image>
      </view>
      <view class="box_content" :style="{maxWidth: Config.rangeSize + 'px', minWidth: Config.rangeSize + 'px'}">
      <view class="box_bg" v-if="configuration && bgImg && configuration.bgImg.isShow !== 0" :style="{backgroundImage: 'url(' + bgImg + ')'}"></view>
      <view class="box_bg" v-else-if="configuration" :style="{background: configuration.main.bgColor ? percentage(configuration.main.bgColor, configuration.main.alpha) : ''}"></view>
      <view class="box_bg" v-else :style="{backgroundImage: 'url(' + require('@/static/mb.png') + ')'}"></view>
		
      <view class="box_content" :style="{maxWidth: configuration ? configuration.rangeSize + 'px' : '750px', minWidth: configuration ? configuration.rangeSize + 'px' : '750px'}">
         <!-- 广告图 -->
         <view class="advertisement">
            <image :src="Config.resourcePath + Config.topImg" mode="widthFix"></image>
            <image v-if="configuration" :src="topImg" mode="widthFix"></image>
            <image v-else :src="require('@/static/banner.png')" mode="widthFix"></image>
         </view>
         
         <view class="box_content_left" v-if="status > 0" @click="fanhuiPage">
@@ -23,17 +23,22 @@
            一键清空
         </view>
         
         <view class="box_user">
            <text>{{User.username}}</text>
            <image src="@/static/ic_logout@2x.png" mode="widthFix" @click="loginOut"></image>
         </view>
			
         <!-- 首页 -->
         <template v-if="status === 0">
            <view class="commodityFrom" v-if="shopList && shopList.length > 0">
               <view class="commodityFrom_head">
                  <view class="commodityFrom_head_item">类别</view>
                  <view class="commodityFrom_head_item">品牌</view>
                  <view class="commodityFrom_head_item">型号</view>
                  <view class="commodityFrom_head_item">指导价</view>
                  <view class="commodityFrom_head_item">入手价</view>
               <view class="commodityFrom_head" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 0 ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 1 ? percentage(configuration.header.bgColor, configuration.header.bgAlpha) : `linear-gradient(180deg, ${percentage(configuration.header.bgColor, configuration.header.bgAlpha)} 0%, ${percentage(configuration.header.bgColor2, configuration.header.bgAlpha2)} 100%)`}">
                  <view class="commodityFrom_head_item" :style="{color: !configuration ? '#ffffff' : configuration.header.type === 1 ? percentage(configuration.header.color, configuration.header.alpha) : '#ffffff'}">类别</view>
                  <view class="commodityFrom_head_item" :style="{color: !configuration ? '#ffffff' : configuration.header.type === 1 ? percentage(configuration.header.color, configuration.header.alpha) : '#ffffff'}">品牌</view>
                  <view class="commodityFrom_head_item" :style="{color: !configuration ? '#ffffff' : configuration.header.type === 1 ? percentage(configuration.header.color, configuration.header.alpha) : '#ffffff'}">型号</view>
                  <view class="commodityFrom_head_item" :style="{color: !configuration ? '#ffffff' : configuration.header.type === 1 ? percentage(configuration.header.color, configuration.header.alpha) : '#ffffff'}">指导价</view>
                  <view class="commodityFrom_head_item" :style="{color: !configuration ? '#ffffff' : configuration.header.type === 1 ? percentage(configuration.header.color, configuration.header.alpha) : '#ffffff'}">入手价</view>
               </view>
               <view class="commodityFrom_body">
               <view class="commodityFrom_body" :style="{background: !configuration ? 'rgba(0,0,0,0)' : percentage(configuration.list.bgColor, configuration.list.bgAlpha)}">
                  <view class="commodityFrom_body_content">
                     <view class="commodityFrom_body_content_item" v-for="(item, index) in shopList" :key="index">
                        <view class="commodityFrom_body_content_item_num">
@@ -41,35 +46,40 @@
                              <image :src="item.categoryImgurl" mode="widthFix"></image>
                           </view>
                           <text>{{item.categoryName}}</text>
                           <!-- {{stringOperations(item.categoryName, 4)}} -->
                        <!--    {{stringOperations(item.categoryName, 3)}} -->
                        </view>
                         <!-- @click="open(index, 1)" -->
                         <!-- @click="open(index, 1)" -->   
                        <view class="commodityFrom_body_content_item_num" @mouseenter.stop="mouseenterP(index, item.categoryId)" @mouseleave.stop="mouseleaveP(index)">
                           <!-- {{stringOperations(item.brandName, 4)}}  brandData -->
                           <text>{{item.brandName}}</text> 
                           <view class="drop-down" :style="{ opacity: item.ppShow ? opacity : '0', zIndex: item.ppShow ? zIndex : '-1' }">
                              <view class="drop-down-item" v-for="(child, i) in item.ppData" :key="i" @click.stop="clickBrand(item, child, index)">
                                 <text>{{child.name}}</text>
                           {{stringOperations(item.brandName, 4)}}
                           <view class="drop-down" :style="{ opacity: item.ppShow ? opacity : '0', zIndex: item.ppShow ? zIndex : '-1', background: !configuration ? 'rgba(108, 130, 170, 1)' : percentage(configuration.pull.bgColor, configuration.pull.bgAlpha) }">
                              <view class="drop-down-search">
                                 <input type="text" placeholder="请输入" v-model="item.brandVal" @input="searchBrand($event, item)" />
                              </view>
                              <!-- brandData -->
                              <view class="drop-down-item" v-for="(child, i) in item.brandVal ? item.brandSearchList : item.brandList" :key="i" @click.stop="clickBrand(item, child, index)"  @mouseenter="aaa(i)" @mouseleave="bbb">
										 
                                 <text :style="{color: fontColorIndex === i ? fontColor : ''}">{{child.name}}</text>
                              </view>
                           </view>
                        </view>
                         <!-- @click="open(index, 2)" -->
                        <view class="commodityFrom_body_content_item_num" @mouseenter.stop="mouseenterX(index)" @mouseleave.stop="mouseleaveX(index)">
                           <!-- {{stringOperations(item.name, 16)}} -->
                           <text>{{item.name}}</text>
									
								 
                           {{stringOperations(item.name, 18)}}
                           <view class="drop-top" v-show="item.name">
                              {{item.name}}
                           </view>
                           <view class="drop-down" :style="{ opacity: item.xhShow ? opacity : '0', zIndex: item.xhShow ? zIndex : '-1' }">
                              <view class="drop-down-item" v-for="(data, s) in item.xhData" :key="s" @click.stop="clickXH(data, index)">
                                 <!-- {{ stringOperations(data.name, 7)}} -->
                                 <text>{{data.name}}</text>
                           <view class="drop-down" :style="{ opacity: item.xhShow ? opacity : '0', zIndex: item.xhShow ? zIndex : '-1', background: !configuration ? 'rgba(108, 130, 170, 1)' : configuration.pull.bgType === 1 ? percentage(configuration.pull.bgColor, configuration.pull.bgAlpha) : 'rgba(108, 130, 170, 1)' }">
                              <view class="drop-down-search">
                                 <input type="text" placeholder="请输入" v-model="item.modelVal" @input="searchModel($event, item)" />
                              </view>
                              <view class="drop-down-item" v-for="(data, s) in item.modelVal ? item.modelSearchList : item.xhData" :key="s" @click.stop="clickXH(data, index)"  @mouseenter="aaa(s)" @mouseleave="bbb">
                                 <text :style="{color: fontColorIndex === s ? fontColor : ''}">{{data.name}}</text>
                              </view>
                           </view>
                        </view>
                        <view class="commodityFrom_body_content_item_num">
                           <text>{{ item.zdPrice }}</text>
                           {{ item.zdPrice }}
                        </view>
                        <view class="commodityFrom_body_content_item_num">
                           <input
@@ -82,31 +92,30 @@
                           <image src="@/static/ic_img@2x.png" mode="widthFix" @click="openImg(index)"></image>
                           <image src="@/static/ic_copy@2x.png" mode="widthFix" @click="copyItem(item)"></image>
                           <image src="@/static/ic_delete@2x.png" mode="widthFix" @click="deleItem(index)"></image>
                           <image src="@/static/ic_pk2@2x.png" mode="widthFix" @click="clickItem(-1, item.categoryId, item.categoryName,2,item)"></image>
                        </view>
                     </view>
                  </view>
                  <view class="commodityFrom_body_total">
                     <view class="commodityFrom_body_total_item">总计：</view>
                     <view class="commodityFrom_body_total_item">
                     <view class="commodityFrom_body_total_item" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 2 ? `linear-gradient(180deg, ${percentage(configuration.header.bgColor, configuration.header.bgAlpha)} 0%, ${percentage(configuration.header.bgColor2, configuration.header.bgAlpha2)} 100%)` : configuration.header.backgroundType === 1 ? percentage(configuration.header.bgColor, configuration.header.bgAlpha) : 'rgba(13, 30, 65, 1)', color: !configuration ? 'rgba(255, 255, 255, 1)' : configuration.header.type === 1 ? percentage(configuration.header.color, configuration.header.alpha) : '#ffffff', textAlign: 'left'}">合计：</view>
                     <view class="commodityFrom_body_total_item" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 2 ? `linear-gradient(180deg, ${percentage(configuration.header.bgColor, configuration.header.bgAlpha)} 0%, ${percentage(configuration.header.bgColor2, configuration.header.bgAlpha2)} 100%)` : configuration.header.backgroundType === 1 ? percentage(configuration.header.bgColor, configuration.header.bgAlpha) : 'rgba(13, 30, 65, 1)', color: !configuration ? 'rgba(255, 220, 108, 1)' : configuration.pull.selType === 1 ? percentage(configuration.pull.selColor, configuration.pull.selAlpha) : '#FFDC6C'}">
                        {{simplifyNum(zdj)}}
                        <!-- {{unitConvert(zdTotalPrice).num}}{{unitConvert(zdTotalPrice).unit}} -->
                     </view>
                     <view class="commodityFrom_body_total_item">
                     <view class="commodityFrom_body_total_item" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 2 ? `linear-gradient(180deg, ${percentage(configuration.header.bgColor, configuration.header.bgAlpha)} 0%, ${percentage(configuration.header.bgColor2, configuration.header.bgAlpha2)} 100%)` : configuration.header.backgroundType === 1 ? percentage(configuration.header.bgColor, configuration.header.bgAlpha) : 'rgba(13, 30, 65, 1)', color: !configuration ? 'rgba(255, 220, 108, 1)' : configuration.pull.selType === 1 ? percentage(configuration.pull.selColor, configuration.pull.selAlpha) : '#FFDC6C'}">
                        {{simplifyNum(totalPrices)}}
                        <!-- {{unitConvert(totalPrice).num}}{{unitConvert(totalPrice).unit}} -->
                     </view>
                  </view>
               </view>
            </view>
            <view class="productCategory">
            <view class="productCategory_list">
            <view class="productCategory_list" :style="{background: !configuration ? 'rgba(137, 159, 197, 1)' : configuration.category.bgType === 1 ? percentage(configuration.category.bgColor, configuration.category.bgAlpha) : '#899FC5'}">
               <view
               class="productCategory_list_item"
               v-for="(item, index) in category"
               :key="index"
               @click="clickItem(index, item.id, item.name)">
               @click="clickItem(index, item.id, item.name,1)">
                  <image :src="item.imgurl ? item.prefixUrl + item.imgurl : ''" mode="widthFix"></image>
                  <text>{{item.name}}</text>
                  <text :style="{'font-size': !configuration&&!configuration.listname ?'16px':((configuration.listname.fontSize||16)   +'px'),color: !configuration &&!configuration.listname? '#ffffff' : configuration.listname.selType === 1 ? percentage(configuration.listname.selColor, configuration.listname.selAlpha) : '#ffffff'}">{{item.name}}</text>
               </view>
               <view class="productCategory_list_zw"></view>
               <view class="productCategory_list_zw"></view>
@@ -120,22 +129,22 @@
         <!-- 商品列表 -->
         <template v-if="status === 1 || status === 2">
            <view class="productPage">
               <view class="productPage_head">
                  <view class="productPage_head_item" v-if="attrFirstList && attrFirstList.length > 0">
               <view class="productPage_head" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 2 ? `linear-gradient(180deg, ${percentage(configuration.header.bgColor, configuration.header.bgAlpha)} 0%, ${percentage(configuration.header.bgColor2, configuration.header.bgAlpha2)} 100%)` : percentage(configuration.header.bgColor, configuration.header.bgAlpha)}">
                  <view class="productPage_head_item" v-if="attrFirstName">
                     <text>{{attributeOne.name ? attributeOne.name : attrFirstName}}</text>
                     <image src="@/static/ar_open@2x.png" mode="widthFix"></image>
                     <view class="productPage_xl" v-if="attrFirstList.length > 0">
                        <view class="productPage_xl_iten" v-for="(item, index) in attrFirstList" :key="index" @click="clickShopPageCheck(item, 1)">
                           <text>{{item.name}}</text>
                     <view class="productPage_xl" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.pull.bgType === 1 ? percentage(configuration.pull.bgColor, configuration.pull.bgAlpha) : '#0D1E41'}" v-if="attrFirstList.length > 0">
                        <view class="productPage_xl_iten" v-for="(item, index) in attrFirstList" :key="index" @click="clickShopPageCheck(item, 1)" @mouseenter="aaa(index)" @mouseleave="bbb">	 
                           <text :style="{color: fontColorIndex === index ? fontColor : ''}">{{item.name}}</text>
                        </view>
                     </view>
                  </view>
                  <view class="productPage_head_item" v-if="attrSecondList && attrSecondList.length > 0">
                  <view class="productPage_head_item" v-if="attrSecondName">
                     <text>{{attributeTwo.name ? attributeTwo.name : attrSecondName}}</text>
                     <image src="@/static/ar_open@2x.png" mode="widthFix"></image>
                     <view class="productPage_xl" v-if="attrSecondList.length > 0">
                        <view class="productPage_xl_iten" v-for="(item, index) in attrSecondList" :key="index" @click="clickShopPageCheck(item, 2)">
                           <text>{{item.name}}</text>
                     <view class="productPage_xl" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.pull.bgType === 1 ? percentage(configuration.pull.bgColor, configuration.pull.bgAlpha) : '#0D1E41'}" v-if="attrSecondList.length > 0">
                        <view class="productPage_xl_iten" v-for="(item, index) in attrSecondList" :key="index" @click="clickShopPageCheck(item, 2)" @mouseenter="aaa(index)" @mouseleave="bbb">
                           <text :style="{color: fontColorIndex === index ? fontColor : ''}">{{item.name}}</text>
                        </view>
                     </view>
                  </view>
@@ -143,13 +152,14 @@
                     <text v-if="budget.type == 1 || budget.type == 2">{{budget.name}}</text>
                     <text v-else>{{budget.max && budget.min ? budget.min + '~' + budget.max : '预算'}}</text>
                     <image src="@/static/ar_open@2x.png" mode="widthFix"></image>
                     <view class="productPage_xl" v-if="budgetList.length > 0">
                        <view class="productPage_xl_iten" v-for="(item, index) in budgetList" :key="index" @click="clickShopPageCheck(item, 3)">
                     <view class="productPage_xl" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.pull.bgType === 1 ? percentage(configuration.pull.bgColor, configuration.pull.bgAlpha) : '#0D1E41'}" v-if="budgetList.length > 0">
                        <view class="productPage_xl_iten" v-for="(item, index) in budgetList" :key="index" @click="clickShopPageCheck(item, 3)" @mouseenter="aaa(index)" @mouseleave="bbb">
                           <template v-if="!item.name">
                              <text>{{item.minamount}}~{{item.maxamount}}</text>
										
                              <text :style="{color: fontColorIndex === index ? fontColor : ''}">{{item.minamount}}~{{item.maxamount}}</text>
                           </template>
                           <template v-else>
                              <text>{{item.name}}</text>
                              <text :style="{color: fontColorIndex === index ? fontColor : ''}">{{item.name}}</text>
                           </template>
                        </view>
                     </view>
@@ -157,68 +167,68 @@
                  <view class="productPage_head_item">
                     <text>{{shopPageBrand.name ? shopPageBrand.name : '品牌'}}</text>
                     <image src="@/static/ar_open@2x.png" mode="widthFix"></image>
                     <view class="productPage_xl" v-if="brandData1.length > 0">
                        <view class="productPage_xl_iten" v-for="(item, index) in brandData1" :key="index" @click="clickShopPageCheck(item, 4)">
                           <text>{{item.name}}</text>
                     <view class="productPage_xl" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.pull.bgType === 1 ? percentage(configuration.pull.bgColor, configuration.pull.bgAlpha) : '#0D1E41'}" v-if="brandData.length > 0">
                        <view class="productPage_xl_iten" v-for="(item, index) in brandData1" :key="index" @click="clickShopPageCheck(item, 4)" @mouseenter="aaa(index)" @mouseleave="bbb">
                           <text :style="{color: fontColorIndex === index ? fontColor : ''}">{{item.name}}</text>
                        </view>
                     </view>
                  </view>
               </view>
               <view class="productPage_pk" v-if="isPK || status === 2">
                  <view class="productPage_pk_shop">
                     <view class="productPage_pk_shop_sp" @click="openSearch('left')" v-if="JSON.stringify(leftShop) == '{}'">
                        <image src="@/static/ic_add@2x.png" mode="widthFix"></image>
                     <view class="productPage_pk_shop_sp" @click="openSearch('left')" v-if="JSON.stringify(leftShop) == '{}'" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 0 ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 1 ? percentage(configuration.header.bgColor, configuration.header.bgAlpha) : `linear-gradient(180deg, ${percentage(configuration.header.bgColor, configuration.header.bgAlpha)} 0%, ${percentage(configuration.header.bgColor2, configuration.header.bgAlpha2)} 100%)`}">
                        <!-- <image src="@/static/ic_add@2x.png" mode="widthFix"></image> -->
                        <span>+</span>
                     </view>
                     <view class="productPage_pk_shop_sp1" @click="clickPKshop(leftShop)" v-else>
                     <view class="productPage_pk_shop_sp1" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 2 ? `linear-gradient(180deg, ${percentage(configuration.header.bgColor, configuration.header.bgAlpha)} 0%, ${percentage(configuration.header.bgColor2, configuration.header.bgAlpha2)} 100%)` : percentage(configuration.header.bgColor, configuration.header.bgAlpha)}" @click="clickPKshop(leftShop)" v-else>
                        <view class="productPage_pk_shop_sp1_img">
                           <image :src="leftShop.imgurl ? leftShop.prefixUrl + leftShop.imgurl : ''" mode="widthFix"></image>
                        </view>
                        <!-- <text>{{stringOperations(leftShop.name, 20)}}</text> -->
                        <text>{{leftShop.name}}</text>
                     </view>
                     <view class="productPage_pk_shop_t">
                        <image :src="Config.resourcePath + Config.pkImg" mode="widthFix"></image>
                        <image :src="!configuration ? require('@/static/ic_pktai@2x.png') : configuration.pkImg.type === 0 ? require('@/static/ic_pktai@2x.png') : configuration.pkImg.imgurl" mode="widthFix"></image>
                     </view>
                  </view>
                  <view class="productPage_pk_z" @click="jumpPK">
                     <image src="@/static/ic_pk@2x.png" mode="widthFix"></image>
                  </view>
                  <view class="productPage_pk_shop">
                     <view class="productPage_pk_shop_sp" @click="openSearch('right')" v-if="JSON.stringify(rightShop) == '{}'">
                        <image src="@/static/ic_add@2x.png" mode="widthFix"></image>
                     <view class="productPage_pk_shop_sp" @click="openSearch('right')" v-if="JSON.stringify(rightShop) == '{}'" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 0 ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 1 ? percentage(configuration.header.bgColor, configuration.header.bgAlpha) : `linear-gradient(180deg, ${percentage(configuration.header.bgColor, configuration.header.bgAlpha)} 0%, ${percentage(configuration.header.bgColor2, configuration.header.bgAlpha2)} 100%)`}">
                        <!-- <image src="@/static/ic_add@2x.png" mode="widthFix"></image> -->
                        <span>+</span>
                     </view>
                     <view class="productPage_pk_shop_sp1" @click="clickPKshop(rightShop)" v-else>
                     <view class="productPage_pk_shop_sp1" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 2 ? `linear-gradient(180deg, ${percentage(configuration.header.bgColor, configuration.header.bgAlpha)} 0%, ${percentage(configuration.header.bgColor2, configuration.header.bgAlpha2)} 100%)` : percentage(configuration.header.bgColor, configuration.header.bgAlpha)}" @click="clickPKshop(rightShop)" v-else>
                        <view class="productPage_pk_shop_sp1_img">
                           <image :src="rightShop.imgurl ? rightShop.prefixUrl + rightShop.imgurl : ''" mode="widthFix"></image>
                        </view>
                        <text>{{rightShop.name}}</text>
                        <!-- <text>{{stringOperations(rightShop.name, 6)}}</text> -->
                     </view>
                     <view class="productPage_pk_shop_t">
                        <image :src="Config.resourcePath + Config.pkImg" mode="widthFix"></image>
                        <image :src="!configuration ? require('@/static/ic_pktai@2x.png') : configuration.pkImg.type === 0 ? require('@/static/ic_pktai@2x.png') : configuration.pkImg.imgurl" mode="widthFix"></image>
                     </view>
                  </view>
               </view>
               <view class="productPage_shop" v-if="status === 1 && !pkcontent">
                  <noData v-if="shopPageData.length === 0 && shopPageDataSou.length === 0" />
                  <template v-else>
                     <view class="productPage_shop_item" v-for="(item, index) in isSOU ? shopPageDataSou : shopPageData" :key="index" @click="clickshoppageItem(item)">
                        <view class="productPage_shop_item_img">
                           <image :src="item.imgurl ? item.prefixUrl + item.imgurl : ''" mode="widthFix"></image>
                        </view>
                        <!-- stringOperations(item.name, 6) -->
                        <text>{{item.name}}</text>
                  <view class="productPage_shop_item" :style="{background: !configuration ? 'rgba(137, 159, 197, 1)' : percentage(configuration.list.bgColor, configuration.list.bgAlpha)}" v-for="(item, index) in isSOU ? shopPageDataSou : shopPageData" :key="index" @click="clickshoppageItem(item)">
                     <view class="productPage_shop_item_img">
                        <image :src="item.imgurl ? item.prefixUrl + item.imgurl : ''" mode="widthFix"></image>
                     </view>
                     <view class="productPage_shop_zw"></view>
                     <view class="productPage_shop_zw"></view>
                     <view class="productPage_shop_zw"></view>
                  </template>
                     <text :style="{'font-size': !configuration &&!configuration.listproname?'16px':((configuration.listproname.fontSize||16)   +'px'),color: !configuration&&!configuration.listproname ? '#ffffff' : configuration.listproname.selType === 1 ? percentage(configuration.listproname.selColor, configuration.listproname.selAlpha) : '#ffffff',color: !configuration ? '#ffffff' : configuration.listproname.selType === 1 ? percentage(configuration.listproname.selColor, configuration.listproname.selAlpha) : '#ffffff'}">{{item.name}}</text>
                  </view>
                  <view class="productPage_shop_zw"></view>
                  <view class="productPage_shop_zw"></view>
                  <view class="productPage_shop_zw"></view>
               </view>
                <!-- v-if="status === 2" -->
               <view class="productPage_parameter" v-if="isPK && pkcontent">
                  <view class="productPage_parameter_item" v-for="(item, index) in [leftShop, rightShop]" :key="index">
                     <view class="productPage_parameter_item_head">
                     <view class="productPage_parameter_item_head" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 2 ? `linear-gradient(180deg, ${percentage(configuration.header.bgColor, configuration.header.bgAlpha)} 0%, ${percentage(configuration.header.bgColor2, configuration.header.bgAlpha2)} 100%)` : percentage(configuration.header.bgColor, configuration.header.bgAlpha), color: !configuration ? 'rgba(255, 255, 255, 1)' : configuration.header.type === 1 ? percentage(configuration.header.color, configuration.header.alpha) : 'rgba(255, 255, 255, 1)'}">
                        <text>{{item.name}}</text>
                     </view>
                     <view class="productPage_parameter_item_content">
                     <view class="productPage_parameter_item_content" :style="{background: !configuration ? 'rgba(137, 159, 197, 1)' : configuration.list.bgType === 1 ? percentage(configuration.list.bgColor, configuration.list.bgAlpha) : 'rgba(137, 159, 197, 1)'}">
                        <view class="productPage_parameter_item_content_price">
                           <view class="zdj">
                              <text>指导价：</text>
@@ -230,7 +240,7 @@
                           </view>
                        </view>
                        <view class="productPage_parameter_item_content_nr">
                           <view class="item" v-if="item.param1"  v-for="(child, i) in item.param1" :key="child.index">
                           <view class="item" v-if="item.param1" v-for="(child, i) in item.param1" :key="child.index">
                              <view class="label">{{child.name}}：</view>
                              <view class="value">{{child.val}}</view>
                           </view>
@@ -246,29 +256,44 @@
            </view>
         </template>
         
         <!-- 搜索组件 -->
         <!-- 查看大图 -->
         <bigImg
            ref="bigImg"
            :imgList="imgList"/>
				
         <!-- 搜索 -->
         <search
            ref="search"
            :search="configuration ? configuration.search : null"
            :conMark="configuration ? configuration : null"
            :fontColor="fontColor"
            :categoryList="category"
            :shopList="shopData"
            :categoryid="categoryId"
            :status="status"
            :categoryName="categoryName"
            :categoryid="categoryId"
            @result="result" /> 
            @result="result" />
         <!-- 搜索商品列表标题 -->
         <searchShopList
            ref="searchShopListRef"
            :search="configuration ? configuration.search : null"
            @getTitle="getVal"
          />
      </view>
   </view>
</template>

<script>
   import bigImg from '@/components/bigImg.vue'
   import search from '@/components/search.vue'
   import noData from '@/components/noData.vue'
   import searchShopList from '@/components/searchShopList.vue'
   import { categoryList, goodsList, brandList, h5Image, logout, getByLoginNew, listForH5 } from '@/apis/index.js'
   import { mapState } from 'vuex'
   import { categoryList, goodsList, brandList, h5Image, goodsPage, listForH5, logout } from '@/apis/index.js'
   export default {
      data() {
         return {
            status: 0,   // 0首页 1商品列表 2pk页
				
            backPageNum:1,//返回页数
            img: '',
            
            opacity: 1,
@@ -326,88 +351,110 @@
            zdj: 0,
            
            select: [],   // 已选
            configuration: null,
            bgImg: '',
            topImg: '',
            pkImg: '',
            
            model: {      // 商品查询数据
               attrFirst: '',
               attrSecond: '',
               brandId: '',
               categoryId: '',
               eprice: '',
               sprice: '',
               keyword: ''
            },
				
            page: 1
            title: '',
            fontColor: 'rgba(255, 220, 108, 1)',
            fontColorIndex: ''
         }
      },
      components: { search, noData },
      components: { bigImg, search, searchShopList },
      onLoad() {
         getByLoginNew({})
            .then(res => {
               if (!res.data) {
                  return
               }
               this.configuration = JSON.parse(res.data.newParam)
               this.fontColor = this.configuration.pull.selType === 1 ? this.percentage(this.configuration.pull.selColor, this.configuration.pull.selAlpha) : 'rgba(255, 220, 108, 1)'
               if (this.configuration.bgImg.type === 0) {
                  this.bgImg = require('@/static/mb.png')
               } else {
                  this.bgImg = this.configuration.bgImg.imgurl
               }
               if (this.configuration.topImg.type === 0) {
                  this.topImg = require('@/static/banner.png')
               } else {
                  this.topImg = this.configuration.topImg.imgurl
               }
               if (this.configuration.pkImg.type === 0) {
                  this.pkImg = require('@/static/ic_pktai@2x.png')
               } else {
                  this.pkImg = this.configuration.pkImg.imgurl
               }
            })
         var that = this
         // 监听键盘组合键
         document.onkeydown = function(e) {
            var keyCode = e.keyCode || e.which || e.charCode;
            var ctrlKey = e.ctrlKey || e.metaKey;
            if (!that.$refs.search.show) {
               if (ctrlKey && keyCode == 70) {
                  if (that.status === 0) {
                     that.$refs.search.index = 0
                     that.$refs.search.open()
                  }
                  e.preventDefault();
                  return false;
               } else if (keyCode === 37) {
                  that.fanhuiPage()
                  e.preventDefault();
                  return false;
               } else if (keyCode === 39) {
                  that.xiaPage()
                  e.preventDefault();
                  return false;
            if(ctrlKey && keyCode == 70) {
               if (that.status === 0) {
                  that.$refs.search.open()
               } else if (that.status === 1) {
                  that.$refs.searchShopListRef.open()
               }
            } else {
               console.log('已经打开搜索框', keyCode)
               if (keyCode === 38) {
                  that.$refs.search.changeTop()
               } else if (keyCode === 40) {
                  that.$refs.search.changeBottom()
               } else if (keyCode === 13) {
                  that.$refs.search.confirm()
               }
               e.preventDefault();
               return false;
            } else if (keyCode === 37) {
               that.fanhuiPage()
               e.preventDefault();
               return false;
            } else if (keyCode === 39) {
               that.xiaPage()
               e.preventDefault();
               return false;
            }
         }
         this.getCategoryList()
         // this.getGoodsList()
         this.getbrandList()
         this.getGoodsList()
         // this.getbrandList()
         this.h5Images()
      },
      onReady() {
         var that = this
			
         let divs = document.getElementsByClassName('box')
			
         let start = 0
			
         divs[0].onmousedown = function(ev){
				
            if (that.status === 1) {
					
               start = ev.pageY
								 
               //event的兼容性
               var ev = ev || event;
								 
               //获取鼠标按下的坐标
               var x1 = ev.clientX;
               var y1 = ev.clientY;
								 
               //获取元素的left，top值
               var l = divs.offsetLeft;
               var t = divs.offsetTop;
								 
               //给可视区域添加鼠标的移动事件
               document.onmousemove = function(ev) {
                   //event的兼容性
                   var ev = ev || event;
								 
                   //获取鼠标移动时的坐标
                   var x2 = ev.clientX;
                   var y2 = ev.clientY;
								 
                   //计算出鼠标的移动距离
                   var x = x2 - x1;
                   var y = y2 - y1;
								 
                   //移动的数值与元素的left，top相加，得出元素的移动的距离
                   var lt = y + t;
                   var ls = x + l;
						
                  let num = start - ev.pageY
                  if (num < -100) {
                     that.isPK = true
@@ -421,24 +468,16 @@
               document.onmouseup = function(ev){
                   document.onmousemove = null;
               }
					
            }
         }
      },
      onUnload() {
         //清除
         document.onmouseup = function(ev){
             document.onmousemove = null;
         }
         //清除
         document.onkeydown = null
      },
      computed: {
         // 指导价总计
         zdTotalPrice() {
            let num = 0
            this.shopList.forEach(item => {
               // num = num + Number(item.zdPrice)
               num = this.addPrice(num, Number(item.zdPrice))
               num = num + Number(item.zdPrice)
            })
            return num || 0
         },
@@ -446,8 +485,7 @@
         totalPrice() {
            let num = 0
            this.shopList.forEach(item => {
               // num = num + Number(item.price)
               num = this.addPrice(num, Number(item.price))
               num = num + Number(item.price)
            })
            return num || 0
         },
@@ -457,10 +495,7 @@
         status: {
            handler(news, old) {
               if (news === 0) {
                  this.page = 1
                  this.categoryName = ''
                  this.categoryId = ''
                  this.shopPageData = []
               }
            }
         },
@@ -470,37 +505,44 @@
               let rsj = 0
               let zdj = 0
               this.shopList.forEach(item => {
                  // rsj = rsj + Number(item.price)
                  rsj = this.addPrice(rsj, Number(item.price))
                  // zdj = zdj + Number(item.zdPrice)
                  zdj = this.addPrice(zdj, Number(item.zdPrice))
                  rsj = rsj + Number(item.price)
                  zdj = zdj + Number(item.zdPrice)
               })
               // console.log('rsj', rsj)
               // console.log('zdj', zdj)
               this.totalPrices = rsj
               this.zdj = zdj
            }
         }
      },
      methods: {
         jumpPKNew(){
            this.status = 1
         },
         aaa(index) {
            this.fontColorIndex = index
         },
         bbb() {
            this.fontColorIndex = ''
         },
         // 鼠标移如品牌
         async mouseenterP(index, categoryId) {
            this.shopList[index].ppShow = true
            if (!this.shopList[index].ppData || this.shopList[index].ppData.length == 0) {
            if (!this.shopList[index].brandList || this.shopList[index].brandList.length == 0) {
               let res = await brandList({ categoryId })
               if (res.code === 200) {
                  this.shopList[index].ppData = res.data
                  // this.shopList[index].ppData = res.data
                  this.shopList[index].brandList = res.data
               }
            }
				
            this.$forceUpdate()
         },
         mouseleaveP(index) {
            this.shopList[index].ppShow = false
            this.$forceUpdate()
         },
         async mouseenterX(index) {
            this.shopList[index].xhShow = true
         // 鼠标移如型号
         async mouseenterX(index, type = 2) {
            if (this.shopList[index].xhData && this.shopList[index].xhData.length > 0) {
					
               this.$forceUpdate()
            } else {
               let res = await listForH5({
@@ -509,66 +551,60 @@
               })
               if (res.code === 200) {
                  this.shopList[index].xhData = res.data;
                  // this.shopList[index].xhShow = true
                  this.$forceUpdate()
               }
            }
            // this.shopList[index].xhShow = true
            // this.$forceUpdate()
            this.shopList[index].xhShow = true
            this.$forceUpdate()
         },
         mouseleaveX(index) {
            this.shopList[index].xhShow = false
            this.$forceUpdate()
            // listForH5({
            //    categoryId: this.shopList[index].categoryId,
            //    brandId: this.shopList[index].brandId
            // }).then(res => {
            //    this.shopList[index].xhData = res.data;
            //    this.shopList[index].xhShow = false
            //    this.$forceUpdate()
            // })
            // this.shopList[index].ppShow = false
            // this.$forceUpdate()
         },
         addPrice (arg1, arg2) {
            let r1, r2, m;
            try {
               r1 = arg1.toString().split('.')[1].length; // 获取arg1小数位的长度
            } catch (e) {
               r1 = 0;
            }
            try {
               r2 = arg2.toString().split('.')[1].length; // 获取arg2小数位的长度
            } catch (e) {
               r2 = 0;
            }
            m = Math.pow(10, Math.max(r1, r2)); // max()函数是选出小数点位最大的参数的长度，保证将两个参数都化为整数，pow()函数是将10做指数幂操作,将参数都化为整数
            return (arg1 * m + arg2 * m )/m;
         },
         // 退出
         loginOut() {
            logout({})
               .then(res => {
                  this.$store.commit('clean')
                  uni.redirectTo({ url: '/pages/login/login' });
               })
         },
         // 查询商品数据
         getShopList(type) {
            if (type === 1) {
               this.page = 1
               this.shopPageData = []
            }
            goodsPage({
               capacity: 20,
               page: this.page,
               model: this.model
            }).then(res => {
               if (this.shopPageData.length === res.data.total) return
               let arr = [...this.shopPageData, ...res.data.records]
               this.shopPageData = arr
               this.page = this.page + 1
         // 已选商品列表搜索品牌
         searchBrand(e, item) {
            item.brandSearchList = item.brandList.filter(item => {
               if (item.name.indexOf(e.detail.value) > -1) {
                  return item
               }
            })
            this.$forceUpdate()
         },
         // 已选商品列表搜索型号
         searchModel(e, item) {
            item.modelSearchList = item.xhData.filter(item => {
               if (item.name.indexOf(e.detail.value) !== -1) {
                  return item
               }
            })
            this.$forceUpdate()
         },
         // 获取搜索的标题
         getVal(val) {
            this.title = val
            this.leftShop = {}
            this.rightShop = {}
            this.isSOU = true
            this.shopPageDataSou = []
            this.shopPageData.forEach(item => {
               if (
               (this.attributeOne.id ? item.attrFirstIds.indexOf(String(this.attributeOne.id)) !== -1 : true) &&
               (this.attributeTwo.id ? item.attrSecodIds.indexOf(String(this.attributeTwo.id)) !== -1 : true) &&
               (this.budget.type == 3 ? (item.price <= Number(this.budget.max)) && (item.price >= Number(this.budget.min)) : true) &&
               (this.budget.type == 1 ? (item.price <= Number(this.budget.max)) : true) &&
               (this.budget.type == 2 ? (item.price >= Number(this.budget.min)) : true) &&
               (this.shopPageBrand.id ? item.brandId === this.shopPageBrand.id : true) && 
               (item.name.indexOf(this.title) !== -1) // 标题搜索
               ) {
                  this.shopPageDataSou.push(item)
               }
            })
         },
         empty() {
            this.shopList = []
         },
         percentage(bgColor, alpha) {
            let res = +(alpha * 2.55).toFixed(0)
            return bgColor + res.toString(16)
         },
         checkInput(_this) {
           if (_this.value != '' && _this.value.substr(0, 1) == '.') {
@@ -595,7 +631,6 @@
         },
         changePrice(price, index) {
            if (price.indexOf('-') !== -1) {
               console.log('-')
               this.shopList[index].price = ''
               return
            }
@@ -607,13 +642,11 @@
            this.shopList.forEach(item => {
               rsj = rsj + Number(item.price)
            })
            console.log('rsj', rsj)
            this.totalPrices = rsj
         },
         simplifyNum(number) {
            if (!number && number != 0) return number;
            let test = number.toFixed(0)
            // console.log(test)
            if(test.length >= 7){
               const moneys = number / 10000
               const realVal = parseFloat(moneys).toFixed(0);
@@ -621,6 +654,14 @@
            } else {
               return number
            }
         },
         // 退出
         loginOut() {
            logout({})
               .then(res => {
                  this.$store.commit('clean')
                  uni.redirectTo({ url: '/pages/login/login' });
               })
         },
         // 获取海报图
         h5Images() {
@@ -632,11 +673,15 @@
         xiaPage() {
            if (this.status === 2 || this.status === 0) return
            this.status = this.status + 1
            this.$refs.search.close()
            this.$refs.searchShopListRef.close()
         },
         // 返回上一页
         fanhuiPage() {
            if (this.status === 0) return
            this.status = this.status - 1
            this.$refs.search.close()
            this.$refs.searchShopListRef.close()
            this.status = this.status -(this.backPageNum>0?this.backPageNum:1)
            if (this.status === 0) {
               this.leftShop = {}
               this.rightShop = {}
@@ -669,23 +714,14 @@
         // 点击型号
         clickXH(item, index) {
            let obj = JSON.parse(JSON.stringify(this.shopList[index]))
            obj.modelSearchList = []
            obj.modelVal = ''
            obj.name = JSON.parse(JSON.stringify(item.name))
            obj.zdPrice = JSON.parse(JSON.stringify(item.zdPrice))
            obj.price = JSON.parse(JSON.stringify(item.price))
            obj.multifileList = JSON.parse(JSON.stringify(item.multifileList))
            this.shopList.splice(index, 1, obj)
            obj.xhShow = false
            // this.shopList.splice(index, 1)
            this.shopList[index] = JSON.parse(JSON.stringify(obj))
            console.log(this.shopList[index])
            console.log(JSON.parse(JSON.stringify(obj)))
            let rsj = 0
            let zdj = 0
            this.shopList.forEach(item => {
               rsj = this.addPrice(rsj, Number(item.price))
               zdj = this.addPrice(zdj, Number(item.zdPrice))
            })
            this.totalPrices = rsj
            this.zdj = zdj
            // this.shopList[index] = JSON.parse(JSON.stringify(obj))
            this.$forceUpdate()
         },
         // 点击pk商品带回首页
@@ -711,9 +747,7 @@
            this.$viewerApi({
              images: this.imgList,
            })
         },
         empty() {
            this.shopList = []
            // this.$refs.bigImg.open(i)
         },
         // 跳转pk
         jumpPK() {
@@ -725,43 +759,25 @@
         },
         // 点击加入pk商品
         openSearch(type) {
            if (type === 'left') {
            this.$refs.search.open(type)
            /* if (type === 'left') {
               this.$refs.search.open('left')
            } else if (type === 'right') {
               this.$refs.search.open('right')
            }
            } */
         },
         // 点击商品列表页面查询
         clickShopPageCheck(item, type) {
            this.leftShop = {}
            this.rightShop = {}
            // this.isSOU = true
            // this.shopPageDataSou = []
            this.isSOU = true
            if (type === 1) {
               this.attributeOne.name = item.name  === '全部' ? '' : item.name
               this.attributeOne.id = item.id
					
               if (item.name === '全部') {
                  this.model.attrFirst = ''
               } else {
                  this.model.attrFirst = item.id
               }
					
               this.getShopList(1)
					
            } else if (type === 2) {
               this.attributeTwo.name = item.name === '全部' ? '' : item.name
               this.attributeTwo.id = item.id
					
               if (item.name === '全部') {
                  this.model.attrSecond = ''
               } else {
                  this.model.attrSecond = item.id
               }
					
               this.getShopList(1)
            } else if (type === 3) {
               console.log(item)
               this.budget.id = item.id
               this.budget.max = item.maxamount
               this.budget.min = item.minamount
@@ -769,46 +785,48 @@
               if (item.name) {
                  this.budget.name = item.name
               }
               if (item.name === '全部') {
                  this.model.sprice = ''
                  this.model.eprice = ''
               } else {
                  this.model.sprice = item.minamount || 0
                  this.model.eprice = item.maxamount || 99999
               }
					
               this.getShopList(1)
            } else if (type === 4) {
               this.shopPageBrand.id = item.id
               this.shopPageBrand.name = item.name === '全部' ? '' : item.name
					
               if (item.name === '全部') {
                  this.model.brandId = ''
               } else {
                  this.model.brandId = item.id
               }
					
               this.getShopList(1)
            }
            this.isPK = false
            this.pkcontent = false
            this.status = 1
            this.shopPageData.forEach(item => {
            this.shopPageDataSou = this.shopPageData.filter(item1 => {
               console.log(item1.attrFirstIds, this.attributeOne.id)
               if (
               (this.attributeOne.id ? item.attrFirstIds.indexOf(String(this.attributeOne.id)) !== -1 : true) &&
               (this.attributeTwo.id ? item.attrSecodIds.indexOf(String(this.attributeTwo.id)) !== -1 : true) &&
               (this.budget.type == 3 ? (item.price <= Number(this.budget.max)) && (item.price >= Number(this.budget.min)) : true) &&
               (this.budget.type == 1 ? (item.price <= Number(this.budget.max)) : true) &&
               (this.budget.type == 2 ? (item.price >= Number(this.budget.min)) : true) &&
               (this.shopPageBrand.id ? item.brandId === this.shopPageBrand.id : true)
               (this.attributeOne.id ? item1.attrFirstIds.indexOf(String(this.attributeOne.id)) !== -1 : true) &&
               (this.attributeTwo.id ? item1.attrFirstIds.indexOf(String(this.attributeTwo.id)) !== -1 : true) &&
               (this.budget.type == 3 ? (item1.price <= Number(this.budget.max)) && (item1.price >= Number(this.budget.min)) : true) &&
               (this.budget.type == 1 ? (item1.price <= Number(this.budget.max)) : true) &&
               (this.budget.type == 2 ? (item1.price >= Number(this.budget.min)) : true) &&
               (this.shopPageBrand.id ? item1.brandId === this.shopPageBrand.id : true) && 
               (item1.name.indexOf(this.title) !== -1)
               ) {
                  this.shopPageDataSou.push(item)
                  return item1
               }
            })
         },
         deepCopyArray(arr) {
           var copy = [];
			  
           for (var i = 0; i < arr.length; i++) {
             // 判断每个元素的类型
             if (Array.isArray(arr[i])) {
               // 如果是数组，递归调用深拷贝函数
               copy[i] = deepCopyArray(arr[i]);
             } else {
               // 如果是其他类型，直接赋值给新数组
               copy[i] = arr[i];
             }
           }
			  
           return copy;
         },
         // 点击商品列表页面商品
         clickshoppageItem(item) {
            this.shopList.push(item)
            this.shopList.push(...this.deepCopyArray([{ ...item, brandVal: '', modelVal: '', modelSearchList: [], brandSearchList: [], brandList: this.brandData }]))
            console.log(this.shopList)
            this.attrFirstList = []
            this.attrSecondList = []
            this.budgetList = []
@@ -827,32 +845,28 @@
         },
         // 选择品牌
         clickBrand(item, val, index) {
            // let res = await listForH5({
            //    categoryId: this.shopList[index].categoryId,
            //    brandId: this.shopList[index].brandId
            // })
            // if (res.code === 200) {
            //    this.shopList[index].xhData = res.data;
            // }
            this.shopList[index].brandName = JSON.parse(JSON.stringify(val.name))
            this.shopList[index].brandId = JSON.parse(JSON.stringify(val.id))
            this.shopList[index].name = ''
            this.shopList[index].zdPrice = ''
            this.shopList[index].price = ''
            this.shopList[index].xhData = []
            this.shopList[index].multifileList = []
            this.shopList[index].ppShow = false
				
            this.shopList[index].xhData = []
				
            this.shopList[index].brandSearchList = []
            this.shopList[index].brandVal = ''
            this.$forceUpdate()
         },
         // 品牌
         getbrandList() {
            // brandList({})
            //    .then(res => {
            //       this.brandData = JSON.parse(JSON.stringify(res.data))
            //       this.brandData1 = JSON.parse(JSON.stringify(res.data))
            //       this.brandData1.unshift({ name: '全部', id: '' })
            //    })
         },
         // getbrandList() {
         //    brandList({})
         //       .then(res => {
         //          this.brandData = JSON.parse(JSON.stringify(res.data))
         //          this.brandData1 = JSON.parse(JSON.stringify(res.data))
         //          this.brandData1.unshift({ name: '全部', id: '' })
         //       })
         // },
         // 获取选中商品
         result(val) {
            val.ppShow = false
@@ -909,6 +923,8 @@
            } else {
               this.shopList.push(JSON.parse(JSON.stringify(val)))
            }
            console.log(this.leftShop)
            console.log(this.rightShop)
         },
         // 获取全部商品
         getGoodsList() {
@@ -934,15 +950,12 @@
         },
         copyItem(item) {
            let obj = JSON.parse(JSON.stringify(item))
            obj.multifileList = []
            obj.xhData = []
            obj.brandId = ''
            obj.brand = ''
            obj.brandName = ''
            obj.name = ''
            obj.zdPrice = ''
            obj.price = ''
            console.log(obj)
            this.shopList.push(obj)
         },
         deleItem(i) {
@@ -954,54 +967,42 @@
               item.ppShow = false
               item.xhShow = false
            })
				
            this.shopList.forEach((item, i) => {
               if (i === index) {
                  if (type === 1) {
                     item.ppShow = true
                  } else {
                     listForH5({
                        categoryId: this.shopList[index].categoryId,
                        brandId: this.shopList[index].brandId
                     }).then(res => {
                        this.shopList[index].xhData = res.data;
                        item.xhShow = true
                        this.$forceUpdate()
                     let arr = []
                     this.shopData.forEach(element => {
                        if (
                        (item.categoryId ? element.categoryId === item.categoryId : true) &&
                        (item.brandId ? element.brandId === item.brandId : true)) {
                           arr.push(JSON.parse(JSON.stringify(element)))
                        }
                     })
							
                     // let arr = []
                     // this.shopData.forEach(element => {
                     //    // console.log(element.categoryId === item.categoryId && element.brandId === item.brandId)
                     //    if (
                     //    (item.categoryId ? element.categoryId === item.categoryId : true) &&
                     //    (item.brandId ? element.brandId === item.brandId : true)) {
                     //       arr.push(JSON.parse(JSON.stringify(element)))
                     //    }
                     // })
                     // this.shopList[index].xhData = arr;
                     // item.xhShow = true
                     this.shopList[index].xhData = arr;
                     item.xhShow = true
                  }
               }
            })
            this.$forceUpdate()
         },
         // 点击类别
         clickItem(index, id, name) {
         clickItem(index, id, name,status,proItem) {
            this.categoryId = id
            this.model.categoryId = id
            this.categoryName = name
				
            this.getShopList()
            this.isSOU = false
            this.title = ''
            
            brandList({ categoryId: id })
               .then(res => {
                  this.brandData = JSON.parse(JSON.stringify(res.data))
                  this.brandData1 = JSON.parse(JSON.stringify(res.data))
                  this.brandData1.unshift({ name: '全部', id: '' })
                  console.log(this.brandData1)
               })
            
            this.category.forEach((item, num) => {
               if (index === num) {
               if (item.id === id) {
                  item.active = true
                  
                  this.attrSecondList = []
@@ -1051,12 +1052,21 @@
                  })
                  arr.unshift({ name: '全部', id: '' })
                  this.budgetList = arr
                  // console.log(this.budgetList)
               } else {
                  item.active = false
               }
            })
            // this.shopPageData = []
            this.shopPageData = this.shopData.filter(item => {
               return item.categoryId === id
            })
            if(status ==2){
               this.leftShop=proItem
               this.backPageNum =2
            }else{
               this.backPageNum=1
            }
            console.log(this.shopPageData)
            // this.shopData.forEach(item => {
            //    if (item.categoryId === id) {
            //       this.shopPageData.push(JSON.parse(JSON.stringify(item)))
@@ -1079,16 +1089,11 @@
               id: '',
               name: ''
            },
            this.status = 1
            this.status = status || 1
         },
         mousemove(e) {
            if (e === this.index) return
            this.index = e
         }
      },
      onReachBottom() {
         if (this.status == 1) {
            this.getShopList()
         }
      }
   }
@@ -1096,6 +1101,13 @@

<style lang="scss" scoped>
   .box {
      // width: 100vw;
      // min-height: 100vh;
      // display: flex;
      // justify-content: center;
      // background-image: url('@/static/bg.jpg');
      // background-repeat: no-repeat;
      // background-size: 100% 100%;
      width: 100vw;
      min-height: 100vh;
      display: flex;
@@ -1110,32 +1122,32 @@
         background-repeat: no-repeat;
         background-size: 100% 100%;
      }
      .box_user {
         z-index: 9;
         position: fixed;
         top: 30px;
         right: 40px;
         display: flex;
         align-items: center;
         text {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
         }
         image {
            width: 18px;
            height: 18px;
            cursor: pointer;
            margin-left: 10px;
         }
      }
      .box_content {
         // max-width: 750px;
         // min-width: 750px;
         .box_user {
            z-index: 9;
            position: fixed;
            top: 30px;
            right: 40px;
            display: flex;
            align-items: center;
            text {
               font-size: 16px;
               font-family: PingFangSC-Medium, PingFang SC;
               font-weight: 500;
               color: #FFFFFF;
            }
            image {
               width: 18px;
               height: 18px;
               cursor: pointer;
               margin-left: 10px;
            }
         }
         .box_content_left {
            position: fixed;
            left: 80px;
            left: 50px;
            top: 50%;
            cursor: pointer;
            transform: translate(-50%, 0);
@@ -1149,13 +1161,13 @@
         }
         .box_content_right {
            position: fixed;
            right: 0px;
            right: -30px;
            top: 50%;
            cursor: pointer;
            transform: translate(-50%, 0);
            width: 80px;
            height: 80px;
            z-index: 9;
            z-index: 999;
            image {
               width: 100%;
               height: 100%;
@@ -1170,7 +1182,7 @@
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: rgba(0, 224, 255, 0.18);
            background-color: rgba(0, 0, 0, 0.40);
            color: #FFFFFF;
            font-size: 16px;
            display: flex;
@@ -1179,7 +1191,6 @@
         }
         .advertisement {
            width: 100%;
            // height: 300px;
            image {
               width: 100%;
               height: 100%;
@@ -1263,7 +1274,7 @@
                        height: 45px;
                        display: flex;
                        align-items: center;
                        background: rgba(0,224,255,0.3);
                        background: #ffffff;
                        border-radius: 8px;
                        image {
                           width: 32px;
@@ -1274,11 +1285,13 @@
                     .commodityFrom_body_content_item_num {
                        width: 126px;
                        height: 100%;
                        padding: 0 15px;
                        box-sizing: border-box;
                        background: #FFFFFF;
                        border-radius: 8px;
                        margin-right: 6px;
                        font-size: 16px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #111111;
                        display: flex;
                        align-items: center;
                        justify-content: center;
@@ -1303,17 +1316,6 @@
                           cursor: pointer;
                           flex: 1 !important;
                        }
                        text {
                           text-align: center;
                           width: 100%;
                           font-size: 16px;
                           font-family: PingFangSC-Medium, PingFang SC;
                           font-weight: 500;
                           color: #111111;
                           overflow: hidden;
                           white-space: nowrap;
                           text-overflow: ellipsis;
                        }
                        .drop-top {
                           transition: .5s;
                           z-index: -2;
@@ -1325,7 +1327,7 @@
                           transform: translate(0, -100%);
                           padding: 5px 15px;
                           box-sizing: border-box;
                           line-height: 40px;
                           line-height: 50px;
                           background: rgba(0, 0, 0, 0.8);
                           border-radius: 10px;
                           color: #FFFFFF;
@@ -1377,24 +1379,43 @@
                           // display: flex;
                           // flex-direction: column;
                           transition: .5s;
                           .drop-down-search {
                              width: 100%;
                              height: 50px;
                              padding: 10px;
                              box-sizing: border-box;
                              position: sticky;
                              background: rgb(108, 130, 170);
                              top: 0;
                              left: 0;
                              input {
                                 width: 100%;
                                 height: 100%;
                                 border: none;
                                 background-color: #FFFFFF;
                                 font-size: 14px;
                                 color: #000000;
                                 border-radius: 5px;
                              }
                           }
                           .drop-down-item {
                              width: 100%;
                              height: 52px;
                              // padding: 0 10px;
                              // box-sizing: border-box;
                              // overflow: hidden;
                              // white-space: nowrap;
                              // text-overflow: ellipsis;
                              overflow: hidden;
                              white-space: nowrap;
                              text-overflow: ellipsis;
                              cursor: pointer;
                              display: flex;
                              align-items: center;
                              justify-content: center;
                              padding: 0 10px;
                              box-sizing: border-box;
                              font-size: 16px;
                              font-family: PingFangSC-Regular, PingFang SC;
                              font-weight: 400;
                              color: #FFFFFF;
                              &:hover {
                                 text {
                                    color: #FFF200;
                                 }
                                 color: #FFF200;
                              }
                              text {
                                 width: 100%;
@@ -1441,7 +1462,9 @@
                        flex: 1;
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        justify-content: flex-start;
                        padding: 0 15px;
                        box-sizing: border-box;
                        font-size: 16px;
                        font-family: SourceHanSansSC-Medium, SourceHanSansSC;
                        font-weight: 500;
@@ -1479,7 +1502,7 @@
                  border-radius: 8px !important;
               }
               .productCategory_list_item {
                  width: 20%   ;
                  width: 20%;
                  height: 108px;
                  display: flex;
                  transition: .5s;
@@ -1506,6 +1529,7 @@
               }
            }
         }
			
         .productPage {
            width: 100%;
            padding: 0 22px;
@@ -1527,8 +1551,9 @@
                  cursor: pointer;
                  position: relative;
                  &:hover {
                     border-radius: 8px 8px 0px 0px;
                     background: linear-gradient(360deg, #025170 0%, #529DB9 100%) !important;
                     background: rgba(255, 255, 255, 0.16) !important;
                     // border-radius: 8px 8px 0px 0px;
                     // background: linear-gradient(360deg, #025170 0%, #529DB9 100%) !important;
                  }
                  &:hover image {
                     transform: rotate(180deg);
@@ -1574,27 +1599,20 @@
                     border-radius: 0px 0px 8px 8px;
                     .productPage_xl_iten {
                        width: 100%;
                        height: 40px;
                        line-height: 40px;
                        padding: 5rpx 0;
                        box-sizing: border-box;
                        // height: 56px;
                        line-height: 25px;
                        // white-space: nowrap;
                        // overflow: hidden;
                        // text-overflow: ellipsis;
                        text-align: center;
                        cursor: pointer;
                        padding: 0 10px;
                        box-sizing: border-box;
                        font-size: 16px;
                        font-weight: 400;
                        color: #FFFFFF;
                        &:hover {
                           text {
                              color: #FFF200;
                           }
                        }
                        text {
                           width: 100%;
                           text-align: center;
                           font-size: 16px;
                           font-family: PingFangSC-Regular, PingFang SC;
                           font-weight: 400;
                           color: #FFFFFF;
                           overflow: hidden;
                           white-space: nowrap;
                           text-overflow: ellipsis;
                           color: #FFF200;
                        }
                     }
                  }
@@ -1628,12 +1646,15 @@
                  .productPage_pk_shop_sp {
                     width: 100px;
                     height: 100px;
                     line-height: 100px;
                     text-align: center;
                     margin-top: 84px;
                     cursor: pointer;
                     margin-bottom: 52px;
                     image {
                        width: 100%;
                        height: 100%;
                     border-radius: 50%;
                     span {
                        font-size: 60px;
                        color: #FFFFFF;
                     }
                  }
                  .productPage_pk_shop_sp1 {
@@ -1649,11 +1670,14 @@
                     justify-content: center;
                     flex-direction: column;
                     margin-bottom: 12px;
                     margin-top: 24px;
                     margin-top: 16px;
                     cursor: pointer;
                     .productPage_pk_shop_sp1_img {
                        width: 100px;
                        height: 100px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        image {
                           width: 100%;
                           height: 100%;
@@ -1662,12 +1686,11 @@
                     text {
                        width: 100%;
                        font-size: 16px;
                        font-family: SourceHanSansSC-Medium, SourceHanSansSC;
                        font-weight: 500;
                        color: #FFFFFF;
                        margin-top: 18px;
                        overflow: hidden;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                     }
                  }
@@ -1682,8 +1705,8 @@
               }
               .productPage_pk_z {
                  flex-shrink: 0;
                  width: 100px;
                  height: 50px;
                  width: 140px;
                  height: 90px;
                  cursor: pointer;
                  image {
                     width: 100%;
@@ -1695,6 +1718,7 @@
               width: 100%;
               margin-top: 12px;
               display: flex;
               align-items: center;
               justify-content: space-between;
               flex-wrap: wrap;
               .productPage_shop_zw {
@@ -1703,7 +1727,6 @@
               }
               .productPage_shop_item {
                  width: 168px;
                  // height: 204px;
                  margin-bottom: 12px;
                  cursor: pointer;
                  background: rgba(0,224,255,0.18);
@@ -1713,7 +1736,6 @@
                  padding: 15px;
                  box-sizing: border-box;
                  flex-direction: column;
                  // justify-content: center;
                  align-items: center;
                  box-sizing: border-box;
                  white-space: pre-wrap;
@@ -1766,7 +1788,7 @@
                  .productPage_parameter_item_head {
                     width: 100%;
                     height: 40px;
                     background: rgba(0,224,255,0.34) linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(0,0,0,0.21) 100%);
                     // background: rgba(0,224,255,0.34) linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(0,0,0,0.21) 100%);
                     border-radius: 8px 8px 0px 0px;
                     display: flex;
                     align-items: center;
@@ -1820,7 +1842,7 @@
                                 font-family: SourceHanSansSC-Bold, SourceHanSansSC;
                                 font-weight: bold;
                                 color: #222222;
                                 margin-top: 10px;
                                 margin-top: 14px;
                              }
                           }
                        }
@@ -1842,7 +1864,7 @@
                                 font-family: SourceHanSansSC-Bold, SourceHanSansSC;
                                 font-weight: bold;
                                 color: #F10000;
                                 margin-top: 10px;
                                 margin-top: 14px;
                              }
                           }
                        }