主播端商品列表代码优化

liuleilei

2025-02-08 deeb762c202ed7d2eee2c9e0558e5f2ab466eec1

 h5/pages/index_2/index.vue

@@ -43,27 +43,38 @@
                     <view class="commodityFrom_body_content_item" v-for="(item, index) in shopList" :key="index">
                        <view class="commodityFrom_body_content_item_num">
                           <view class="commodityFrom_body_content_item_num_img">
                              <image :src="item.categoryImgurl ? item.prefixUrl + item.categoryImgurl : ''" mode="widthFix"></image>
                              <image :src="item.categoryImgurl" mode="widthFix"></image>
                           </view>
                           {{stringOperations(item.categoryName, 3)}}
                           <text>{{item.categoryName}}</text>
                        <!--    {{stringOperations(item.categoryName, 3)}} -->
                        </view>
                        <view class="commodityFrom_body_content_item_num" @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)}}
                           <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">搜索</view>
                              <view class="drop-down-item" v-for="(child, i) in brandData" :key="i" @click.stop="clickBrand(item, child, index)">
                                 {{child.name}}
                              <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>
                        <view class="commodityFrom_body_content_item_num" @click="open(index, 2)">
                           {{stringOperations(item.name, 8)}}
                         <!-- @click="open(index, 2)" -->
                        <view class="commodityFrom_body_content_item_num" @mouseenter.stop="mouseenterX(index)" @mouseleave.stop="mouseleaveX(index)">
								 
                           {{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', 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-item" v-for="(data, s) in item.xhData" :key="s" @click.stop="clickXH(data, index)">
                                 {{ stringOperations(data.name, 7)}}
                              <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>
@@ -85,11 +96,11 @@
                     </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)}}
                     </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)}}
                     </view>
                  </view>
@@ -122,8 +133,8 @@
                     <text>{{attributeOne.name ? attributeOne.name : attrFirstName}}</text>
                     <image src="@/static/ar_open@2x.png" mode="widthFix"></image>
                     <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)">
                           {{item.name}}
                        <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>
@@ -131,8 +142,8 @@
                     <text>{{attributeTwo.name ? attributeTwo.name : attrSecondName}}</text>
                     <image src="@/static/ar_open@2x.png" mode="widthFix"></image>
                     <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)">
                           {{item.name}}
                        <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>
@@ -141,12 +152,13 @@
                     <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" :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)">
                        <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">
                              {{item.minamount}}~{{item.maxamount}}
										
                              <text :style="{color: fontColorIndex === index ? fontColor : ''}">{{item.minamount}}~{{item.maxamount}}</text>
                           </template>
                           <template v-else>
                              {{item.name}}
                              <text :style="{color: fontColorIndex === index ? fontColor : ''}">{{item.name}}</text>
                           </template>
                        </view>
                     </view>
@@ -155,22 +167,24 @@
                     <text>{{shopPageBrand.name ? shopPageBrand.name : '品牌'}}</text>
                     <image src="@/static/ar_open@2x.png" mode="widthFix"></image>
                     <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)">
                           {{item.name}}
                        <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" :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, 6)}}</text>
                        <!-- <text>{{stringOperations(leftShop.name, 20)}}</text> -->
                        <text>{{leftShop.name}}</text>
                     </view>
                     <view class="productPage_pk_shop_t">
                        <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>
@@ -180,14 +194,16 @@
                     <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>{{stringOperations(rightShop.name, 6)}}</text>
                        <text>{{rightShop.name}}</text>
                        <!-- <text>{{stringOperations(rightShop.name, 6)}}</text> -->
                     </view>
                     <view class="productPage_pk_shop_t">
                        <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>
@@ -199,7 +215,7 @@
                     <view class="productPage_shop_item_img">
                        <image :src="item.imgurl ? item.prefixUrl + item.imgurl : ''" mode="widthFix"></image>
                     </view>
                     <text>{{stringOperations(item.name, 6)}}</text>
                     <text>{{item.name}}</text>
                  </view>
                  <view class="productPage_shop_zw"></view>
                  <view class="productPage_shop_zw"></view>
@@ -208,10 +224,10 @@
                <!-- 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">
                        {{stringOperations(item.name, 11)}}
                     <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>
@@ -223,7 +239,12 @@
                           </view>
                        </view>
                        <view class="productPage_parameter_item_content_nr">
                           <view class="item" v-for="(child, i) in item.goodsParamList" :key="i">
                           <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>
                           <view v-if="item.param2.length>0" class="paramline"></view>
                           <view class="item" v-if="item.param2" v-for="(child, j) in item.param2" :key="child.index">
                              <view class="label">{{child.name}}：</view>
                              <view class="value">{{child.val}}</view>
                           </view>
@@ -242,6 +263,9 @@
         <!-- 搜索 -->
         <search
            ref="search"
            :search="configuration ? configuration.search : null"
            :conMark="configuration ? configuration : null"
            :fontColor="fontColor"
            :categoryList="category"
            :shopList="shopData"
            :categoryid="categoryId"
@@ -251,6 +275,7 @@
         <!-- 搜索商品列表标题 -->
         <searchShopList
            ref="searchShopListRef"
            :search="configuration ? configuration.search : null"
            @getTitle="getVal"
          />
      </view>
@@ -261,7 +286,7 @@
   import bigImg from '@/components/bigImg.vue'
   import search from '@/components/search.vue'
   import searchShopList from '@/components/searchShopList.vue'
   import { categoryList, goodsList, brandList, h5Image, logout, getByLoginNew } from '@/apis/index.js'
   import { categoryList, goodsList, brandList, h5Image, logout, getByLoginNew, listForH5 } from '@/apis/index.js'
   import { mapState } from 'vuex'
   export default {
      data() {
@@ -330,7 +355,9 @@
            topImg: '',
            pkImg: '',
            
            title: ''
            title: '',
            fontColor: 'rgba(255, 220, 108, 1)',
            fontColorIndex: ''
         }
      },
      components: { bigImg, search, searchShopList },
@@ -340,7 +367,6 @@
               if (!res.data) {
                  return
               }
               console.log(JSON.parse(res.data.newParam))
               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) {
@@ -365,9 +391,9 @@
            var keyCode = e.keyCode || e.which || e.charCode;
            var ctrlKey = e.ctrlKey || e.metaKey;
            if(ctrlKey && keyCode == 70) {
               if (that.status !== 1) {
               if (that.status === 0) {
                  that.$refs.search.open()
               } else {
               } else if (that.status === 1) {
                  that.$refs.searchShopListRef.open()
               }
               e.preventDefault();
@@ -384,7 +410,7 @@
         }
         this.getCategoryList()
         this.getGoodsList()
         this.getbrandList()
         // this.getbrandList()
         this.h5Images()
      },
      onReady() {
@@ -487,6 +513,67 @@
         }
      },
      methods: {
         aaa(index) {
            this.fontColorIndex = index
         },
         bbb() {
            this.fontColorIndex = ''
         },
         // 鼠标移如品牌
         async mouseenterP(index, categoryId) {
            this.shopList[index].ppShow = true
            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].brandList = res.data
               }
            }
				
            this.$forceUpdate()
         },
         mouseleaveP(index) {
            this.shopList[index].ppShow = false
            this.$forceUpdate()
         },
         // 鼠标移如型号
         async mouseenterX(index, type = 2) {
            if (this.shopList[index].xhData && this.shopList[index].xhData.length > 0) {
               this.$forceUpdate()
            } else {
               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].xhShow = true
            this.$forceUpdate()
         },
         mouseleaveX(index) {
            this.shopList[index].xhShow = false
            this.$forceUpdate()
         },
         // 已选商品列表搜索品牌
         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
@@ -582,10 +669,14 @@
         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.$refs.search.close()
            this.$refs.searchShopListRef.close()
            this.status = this.status - 1
            if (this.status === 0) {
               this.leftShop = {}
@@ -619,12 +710,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))
            this.shopList.splice(index, 1, obj)
            obj.xhShow = false
            this.shopList.splice(index, 1)
            this.shopList[index] = JSON.parse(JSON.stringify(obj))
            // this.shopList[index] = JSON.parse(JSON.stringify(obj))
            this.$forceUpdate()
         },
         // 点击pk商品带回首页
@@ -646,7 +739,11 @@
                  })
               }
            })
            this.$refs.bigImg.open(i)
            if (this.imgList.length === 0) return
            this.$viewerApi({
              images: this.imgList,
            })
            // this.$refs.bigImg.open(i)
         },
         // 跳转pk
         jumpPK() {
@@ -669,7 +766,6 @@
            this.leftShop = {}
            this.rightShop = {}
            this.isSOU = true
            this.shopPageDataSou = []
            if (type === 1) {
               this.attributeOne.name = item.name  === '全部' ? '' : item.name
               this.attributeOne.id = item.id
@@ -691,23 +787,41 @@
            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) && 
               (item.name.indexOf(this.title) !== -1)
               (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 = []
@@ -732,17 +846,22 @@
            this.shopList[index].zdPrice = ''
            this.shopList[index].price = ''
            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
@@ -751,9 +870,56 @@
               this.leftShop = JSON.parse(JSON.stringify(val))
            } else if (this.$refs.search.typeName === 'right') {
               this.rightShop = JSON.parse(JSON.stringify(val))
               let leftParamList = this.leftShop.goodsParamList;
               let rightParamList = this.rightShop.goodsParamList;
               let leftList1 = new Array();
               let leftList2 =  new Array();
               let rightList1 = new Array();
               let rightList2 =  new Array();
               if(leftParamList && leftParamList.length>0){
                  leftParamList.forEach(item => {
                     let flag =0;
                     let rightTemp = null;
                     if(rightParamList && rightParamList.length>0){
                        rightParamList.forEach(item1 => {
                           if (item.name === item1.name ) {
                              flag =1;
                              rightTemp = item1;
                              return;
                           }
                        })	
                     }
                     if(flag === 1){
                        leftList1.push(item);
                        rightList1.push(rightTemp);
                     }else{
                        leftList2.push(item);
                     }
                  })	
               }
               if(rightParamList && rightParamList.length>0){
                  rightParamList.forEach(item=> {
                     let flag1 = 0;
                     rightList1.forEach(item1 => {
                        if (item.name === item1.name ) {
                           flag1 =1; 
                           //return;
                        }
                     })	
                     if(flag1 === 0){
                        rightList2.push(item);
                     }
                  })	
               }
               Reflect.set(this.leftShop, "param1",leftList1);
               Reflect.set(this.leftShop, "param2",leftList2);
               Reflect.set(this.rightShop, "param1",rightList1);
               Reflect.set(this.rightShop, "param2",rightList2);
            } else {
               this.shopList.push(JSON.parse(JSON.stringify(val)))
            }
            console.log(this.leftShop)
            console.log(this.rightShop)
         },
         // 获取全部商品
         getGoodsList() {
@@ -822,6 +988,14 @@
            this.categoryName = name
            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: '' })
               })
				
            this.category.forEach((item, num) => {
               if (index === num) {
                  item.active = true
@@ -832,11 +1006,16 @@
                  
                  this.attrFirstName = item.attrFirst
                  this.attrSecondName = item.attrSecond
                  this.attrFirstList = JSON.parse(JSON.stringify(item.attrFirstList)) || []
                  this.attrFirstList.unshift({ name: '全部', id: '' })
                  this.attrSecondList = JSON.parse(JSON.stringify(item.attrSecondList)) || []
                  this.attrSecondList.unshift({ name: '全部', id: '' })
                  if (item.cateParamFirstList) {
                     this.attrFirstList = JSON.parse(JSON.stringify(item.cateParamFirstList))
                     this.attrFirstList.unshift({ name: '全部', id: '' })
                  }
                  if (item.cateParamSecondList) {
                     this.attrSecondList = JSON.parse(JSON.stringify(item.cateParamSecondList))
                     this.attrSecondList.unshift({ name: '全部', id: '' })
                  }
                  // this.budgetList = JSON.parse(JSON.stringify(item.budgetList))
                  // console.log(item.budgetList)
                  let arr = []
                  item.budgetList.forEach(item => {
                     // 没有最小金额
@@ -971,7 +1150,7 @@
         }
         .box_content_right {
            position: fixed;
            right: 50px;
            right: -30px;
            top: 50%;
            cursor: pointer;
            transform: translate(-50%, 0);
@@ -1013,7 +1192,7 @@
            margin-top: 16px;
            .commodityFrom_head {
               width: 100%;
               height: 60px;
               height: 45px;
               padding: 10px 8px;
               box-sizing: border-box;
               background: rgba(0,224,255,0.24) linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(0,0,0,0.21) 100%);
@@ -1027,7 +1206,7 @@
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 24px;
                  font-size: 16px;
                  font-family: SourceHanSansSC-Medium, SourceHanSansSC;
                  font-weight: 500;
                  color: #FFFFFF;
@@ -1060,7 +1239,7 @@
                  flex-direction: column;
                  .commodityFrom_body_content_item {
                     width: 100%;
                     height: 56px;
                     height: 45px;
                     display: flex;
                     align-items: center;
                     margin-bottom: 6px;
@@ -1081,10 +1260,10 @@
                        opacity: 0;
                        transform: translate(0%, 0%);
                        z-index: -1;
                        height: 56px;
                        height: 45px;
                        display: flex;
                        align-items: center;
                        background: rgba(0,224,255,0.3);
                        background: #ffffff;
                        border-radius: 8px;
                        image {
                           width: 32px;
@@ -1098,7 +1277,7 @@
                        background: #FFFFFF;
                        border-radius: 8px;
                        margin-right: 6px;
                        font-size: 24px;
                        font-size: 16px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #111111;
@@ -1141,12 +1320,15 @@
                           background: rgba(0, 0, 0, 0.8);
                           border-radius: 10px;
                           color: #FFFFFF;
                           font-size: 24px;
                           font-size: 16px;
                           font-weight: 500;
                        }
                        .commodityFrom_body_content_item_num_img {
                           width: 24px;
                           height: 24px;
                           width: 28px;
                           height: 28px;
                           display: flex;
                           align-items: center;
                           justify-content: center;
                           margin-right: 4px;
                           image {
                              width: 100%;
@@ -1154,7 +1336,7 @@
                           }
                        }
                        input {
                           font-size: 24px;
                           font-size: 16px;
                           font-family: PingFangSC-Medium, PingFang SC;
                           font-weight: 500;
                           color: #111111;
@@ -1186,24 +1368,54 @@
                           // 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;
                              font-size: 24px;
                              font-size: 16px;
                              font-family: PingFangSC-Regular, PingFang SC;
                              font-weight: 400;
                              color: #FFFFFF;
                              &:hover {
                                 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;
                              }
                           }
                        }
@@ -1212,7 +1424,7 @@
               }
               .commodityFrom_body_total {
                  width: 100%;
                  height: 56px;
                  height: 45px;
                  display: flex;
                  align-items: center;
                  .commodityFrom_body_total_item {
@@ -1221,7 +1433,7 @@
                     background: rgba(255,255,255,0.4);
                     border-radius: 8px;
                     margin-right: 6px;
                     font-size: 24px;
                     font-size: 16px;
                     font-family: SourceHanSansSC-Bold, SourceHanSansSC;
                     font-weight: bold;
                     color: #FFF200;
@@ -1229,7 +1441,7 @@
                     align-items: center;
                     justify-content: center;
                     input {
                        font-size: 24px;
                        font-size: 16px;
                        font-family: SourceHanSansSC-Bold, SourceHanSansSC;
                        font-weight: bold;
                        color: #FFF200;
@@ -1239,8 +1451,10 @@
                        flex: 1;
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        font-size: 24px;
                        justify-content: flex-start;
                        padding: 0 15px;
                        box-sizing: border-box;
                        font-size: 16px;
                        font-family: SourceHanSansSC-Medium, SourceHanSansSC;
                        font-weight: 500;
                        color: #FFFFFF;
@@ -1277,7 +1491,7 @@
                  border-radius: 8px !important;
               }
               .productCategory_list_item {
                  width: 20%   ;
                  width: 20%;
                  height: 108px;
                  display: flex;
                  transition: .5s;
@@ -1296,7 +1510,7 @@
                     margin-bottom: 4px;
                  }
                  text {
                     font-size: 24px;
                     font-size: 16px;
                     font-family: SourceHanSansSC-Normal, SourceHanSansSC;
                     font-weight: 400;
                     color: #FFFFFF;
@@ -1312,7 +1526,7 @@
            margin-top: 16px;
            .productPage_head {
               width: 100%;
               height: 60px;
               height: 45px;
               display: flex;
               align-items: center;
               background: rgba(0,224,255,0.34) linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(0,0,0,0.21) 100%);
@@ -1374,12 +1588,16 @@
                     border-radius: 0px 0px 8px 8px;
                     .productPage_xl_iten {
                        width: 100%;
                        height: 56px;
                        line-height: 56px;
                        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;
                        font-size: 24px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-size: 16px;
                        font-weight: 400;
                        color: #FFFFFF;
                        &:hover {
@@ -1388,7 +1606,7 @@
                     }
                  }
                  text {
                     font-size: 24px;
                     font-size: 16px;
                     font-family: SourceHanSansSC-Regular, SourceHanSansSC;
                     font-weight: 400;
                     color: #FFFFFF;
@@ -1417,12 +1635,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 {
@@ -1432,26 +1653,34 @@
                     border-radius: 8px;
                     border: 2px solid #FFFFFF;
                     display: flex;
                     padding: 0 15px;
                     box-sizing: border-box;
                     align-items: center;
                     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%;
                        }
                     }
                     text {
                        font-size: 24px;
                        font-family: SourceHanSansSC-Medium, SourceHanSansSC;
                        width: 100%;
                        font-size: 16px;
                        font-weight: 500;
                        color: #FFFFFF;
                        margin-top: 18px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                     }
                  }
                  .productPage_pk_shop_t {
@@ -1487,32 +1716,46 @@
               }
               .productPage_shop_item {
                  width: 168px;
                  height: 204px;
                  margin-bottom: 12px;
                  cursor: pointer;
                  background: rgba(0,224,255,0.18);
                  border-radius: 8px;
                  display: flex;
                  transition: .5s;
                  padding: 15px;
                  box-sizing: border-box;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  box-sizing: border-box;
                  white-space: pre-wrap;
                  word-break: break-all;
                  text-align: center;
                  &:hover {
                     background: linear-gradient(180deg, rgba(0,224,255,0.3) 0%, rgba(255,255,255,0.41) 100%);
                     border-radius: 8px;
                     border: 2px solid #FFFFFF;
                     box-sizing: border-box;
                  }
                  .productPage_shop_item_img {
                     width: 136px;
                     height: 136px;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     overflow: hidden;
                     image {
                        width: 100%;
                        height: 100%;
                     }
                  }
                  text {
                     font-size: 24px;
                     width: 100%;
                     overflow: hidden;
                     text-overflow: ellipsis;
                     display: -webkit-box;
                     -webkit-line-clamp: 2;
                     -webkit-box-orient: vertical;
                     font-size: 16px;
                     font-family: SourceHanSansSC-Normal, SourceHanSansSC;
                     font-weight: 400;
                     color: #FFFFFF;
@@ -1524,24 +1767,35 @@
               width: 100%;
               display: flex;
               align-items: flex-start;
               justify-content: space-between;
               margin-bottom: 30px;
               .productPage_parameter_item {
                  flex: 1;
                  width: 49%;
                  &:first-child {
                     margin-right: 18px;
                  }
                  .productPage_parameter_item_head {
                     width: 100%;
                     height: 60px;
                     background: rgba(0,224,255,0.34) linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(0,0,0,0.21) 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%);
                     border-radius: 8px 8px 0px 0px;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     font-size: 26px;
                     font-family: SourceHanSansSC-Medium, SourceHanSansSC;
                     font-weight: 500;
                     color: #FFFFFF;
                     overflow: hidden;
                     white-space: nowrap;
                     text-overflow: ellipsis;
                     text {
                        width: 100%;
                        text-align: center;
                        font-size: 16px;
                        font-family: SourceHanSansSC-Medium, SourceHanSansSC;
                        font-weight: 500;
                        color: #FFFFFF;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                     }
                  }
                  .productPage_parameter_item_content {
                     width: 100%;
@@ -1567,13 +1821,13 @@
                           margin-left: 20px;
                           text {
                              &:first-child {
                                 font-size: 24px;
                                 font-size: 16px;
                                 font-family: SourceHanSansSC-Regular, SourceHanSansSC;
                                 font-weight: 400;
                                 color: #333333;
                              }
                              &:last-child {
                                 font-size: 26px;
                                 font-size: 16px;
                                 font-family: SourceHanSansSC-Bold, SourceHanSansSC;
                                 font-weight: bold;
                                 color: #222222;
@@ -1589,13 +1843,13 @@
                           justify-content: center;
                           text {
                              &:first-child {
                                 font-size: 24px;
                                 font-size: 16px;
                                 font-family: SourceHanSansSC-Regular, SourceHanSansSC;
                                 font-weight: 400;
                                 color: #333333;
                              }
                              &:last-child {
                                 font-size: 26px;
                                 font-size: 16px;
                                 font-family: SourceHanSansSC-Bold, SourceHanSansSC;
                                 font-weight: bold;
                                 color: #F10000;
@@ -1605,30 +1859,34 @@
                        }
                     }
                     .productPage_parameter_item_content_nr {
                        padding: 16px 32px;
                        padding: 16px 18px;
                        box-sizing: border-box;
                        background: #FFFFFF;
                        border-radius: 8px;
                        margin-top: 12px;
                        display: flex;
                        flex-direction: column;
                        .paramline{
                           border-bottom: #c7c9ce 2px dashed;
                           margin-bottom: 15px;
                        } 
                        .item {
                           display: flex;
                           align-items: center;
                           margin-bottom: 28px;
                           align-items: flex-start;
                           margin-bottom: 15px;
                           &:last-child {
                              margin-bottom: 0 !important;
                           }
                           .label {
                              flex-shrink: 0;
                              font-size: 24px;
                              font-size: 16px;
                              font-family: SourceHanSansSC-Normal, SourceHanSansSC;
                              font-weight: 400;
                              color: #222222;
                           }
                           .value {
                              flex: 1;
                              font-size: 24px;
                              font-size: 16px;
                              font-family: SourceHanSansSC-Normal, SourceHanSansSC;
                              font-weight: 400;
                              color: #222222;