| | |
| | | </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"> |
| | |
| | | </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}} |
| | |
| | | </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> |
| | |
| | | <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"> |
| | |
| | | </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> |
| | |
| | | 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() { |
| | |
| | | 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) { |
| | |
| | | } |
| | | }, |
| | | 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 => { |
| | |
| | | this.shopList[index].price = '' |
| | | this.shopList[index].ppShow = false |
| | | |
| | | this.shopList[index].xhData = [] |
| | | |
| | | this.shopList[index].brandSearchList = [] |
| | | this.shopList[index].brandVal = '' |
| | | this.$forceUpdate() |
| | |
| | | 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() { |
| | |
| | | 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; |
| | |
| | | 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; |
| | | } |
| | |
| | | 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; |
| | | } |