From 78b648fbf1f44061face21fa2511e791ccfbbdc2 Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期五, 25 十月 2024 11:26:34 +0800
Subject: [PATCH] 优化
---
h5/pages/index_2/index.vue | 122 +++++++++++++++++++++++++++++++++++++---
1 files changed, 111 insertions(+), 11 deletions(-)
diff --git a/h5/pages/index_2/index.vue b/h5/pages/index_2/index.vue
index f7654d4..d5826a8 100644
--- a/h5/pages/index_2/index.vue
+++ b/h5/pages/index_2/index.vue
@@ -47,7 +47,8 @@
</view>
{{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">
@@ -59,7 +60,8 @@
</view>
</view>
</view>
- <view class="commodityFrom_body_content_item_num" @click="open(index, 2)">
+ <!-- @click="open(index, 2)" -->
+ <view class="commodityFrom_body_content_item_num" @mouseenter.stop="mouseenterX(index)" @mouseleave.stop="mouseleaveX(index)">
{{item.name}}
<view class="drop-top" v-show="item.name">
{{item.name}}
@@ -91,7 +93,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'}">鎬昏锛�</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>
@@ -219,7 +221,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)'}">
- {{stringOperations(item.name, 25)}}
+ {{item.name}}
</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">
@@ -233,7 +235,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>
@@ -273,7 +280,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() {
@@ -352,7 +359,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) {
@@ -499,6 +505,42 @@
}
},
methods: {
+ // 榧犳爣绉诲鍝佺墝
+ async mouseenterP(index, categoryId) {
+ 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.shopList[index].ppShow = true
+ 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 => {
@@ -786,6 +828,8 @@
this.shopList[index].price = ''
this.shopList[index].ppShow = false
+ this.shopList[index].xhData = []
+
this.shopList[index].brandSearchList = []
this.shopList[index].brandVal = ''
this.$forceUpdate()
@@ -807,9 +851,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() {
@@ -1327,7 +1418,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;
@@ -1644,8 +1737,11 @@
display: flex;
align-items: center;
justify-content: center;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ text-align: center;
font-size: 16px;
- font-family: SourceHanSansSC-Medium, SourceHanSansSC;
font-weight: 500;
color: #FFFFFF;
}
@@ -1718,10 +1814,14 @@
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;
}
--
Gitblit v1.9.3