主播端商品列表代码优化

liuleilei

2025-02-08 deeb762c202ed7d2eee2c9e0558e5f2ab466eec1

 h5/pages/index_2/index.vue

@@ -45,9 +45,10 @@
                           <view class="commodityFrom_body_content_item_num_img">
                              <image :src="item.categoryImgurl" mode="widthFix"></image>
                           </view>
                           {{stringOperations(item.categoryName, 3)}}
                           <text>{{item.categoryName}}</text>
                        <!--    {{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)}}
                           <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) }">
@@ -55,14 +56,16 @@
                                 <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)">
                                 {{child.name}}
                              <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)">
                           {{item.name}}
								 
                           {{stringOperations(item.name, 18)}}
                           <view class="drop-top" v-show="item.name">
                              {{item.name}}
                           </view>
@@ -70,8 +73,8 @@
                              <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)">
                                 {{data.name}}
                              <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>
@@ -93,7 +96,7 @@
                     </view>
                  </view>
                  <view class="commodityFrom_body_total">
                     <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, 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>
@@ -130,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>
@@ -139,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>
@@ -149,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>
@@ -163,8 +167,8 @@
                     <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>
@@ -211,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>
@@ -221,7 +225,7 @@
               <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" :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)'}">
                        {{item.name}}
                        <text>{{item.name}}</text>
                     </view>
                     <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">
@@ -260,6 +264,8 @@
         <search
            ref="search"
            :search="configuration ? configuration.search : null"
            :conMark="configuration ? configuration : null"
            :fontColor="fontColor"
            :categoryList="category"
            :shopList="shopData"
            :categoryid="categoryId"
@@ -349,7 +355,9 @@
            topImg: '',
            pkImg: '',
            
            title: ''
            title: '',
            fontColor: 'rgba(255, 220, 108, 1)',
            fontColorIndex: ''
         }
      },
      components: { bigImg, search, searchShopList },
@@ -505,8 +513,15 @@
         }
      },
      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) {
@@ -514,7 +529,7 @@
                  this.shopList[index].brandList = res.data
               }
            }
            this.shopList[index].ppShow = true
				
            this.$forceUpdate()
         },
         mouseleaveP(index) {
@@ -724,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() {
@@ -1305,8 +1324,11 @@
                           font-weight: 500;
                        }
                        .commodityFrom_body_content_item_num_img {
                           width: 16px;
                           height: 16px;
                           width: 28px;
                           height: 28px;
                           display: flex;
                           align-items: center;
                           justify-content: center;
                           margin-right: 4px;
                           image {
                              width: 100%;
@@ -1383,6 +1405,17 @@
                              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;
                              }
                           }
                        }
@@ -1683,21 +1716,25 @@
               }
               .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;
@@ -1705,12 +1742,19 @@
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     overflow: hidden;
                     image {
                        width: 100%;
                        height: 100%;
                     }
                  }
                  text {
                     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;
@@ -1723,16 +1767,17 @@
               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: 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;
@@ -1740,10 +1785,17 @@
                     overflow: hidden;
                     white-space: nowrap;
                     text-overflow: ellipsis;
                     text-align: center;
                     font-size: 16px;
                     font-weight: 500;
                     color: #FFFFFF;
                     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%;
@@ -1807,7 +1859,7 @@
                        }
                     }
                     .productPage_parameter_item_content_nr {
                        padding: 16px 32px;
                        padding: 16px 18px;
                        box-sizing: border-box;
                        background: #FFFFFF;
                        border-radius: 8px;