From de76f9f6d15f4e0688b961452d180b94d4cdded3 Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期五, 25 十月 2024 09:37:03 +0800
Subject: [PATCH] 优化样式
---
h5/pages/index_2/index.vue | 911 ++++++++++++++++++++++++--------------------------------
1 files changed, 385 insertions(+), 526 deletions(-)
diff --git a/h5/pages/index_2/index.vue b/h5/pages/index_2/index.vue
index 4ac7cd0..f7654d4 100644
--- a/h5/pages/index_2/index.vue
+++ b/h5/pages/index_2/index.vue
@@ -1,14 +1,14 @@
<template>
<view class="box">
- <view class="box_bg" :style="{backgroundImage: 'url(' + Config.resourcePath + Config.bgImg + ')'}"></view>
- <view class="box_user">
- <text>{{User.username}}</text>
- <image src="@/static/ic_logout@2x.png" mode="widthFix" @click="loginOut"></image>
- </view>
- <view class="box_content" :style="{maxWidth: Config.rangeSize + 'px', minWidth: Config.rangeSize + 'px'}">
+ <view class="box_bg" v-if="configuration && bgImg && configuration.bgImg.isShow !== 0" :style="{backgroundImage: 'url(' + bgImg + ')'}"></view>
+ <view class="box_bg" v-else-if="configuration" :style="{background: configuration.main.bgColor ? percentage(configuration.main.bgColor, configuration.main.alpha) : ''}"></view>
+ <view class="box_bg" v-else :style="{backgroundImage: 'url(' + require('@/static/mb.png') + ')'}"></view>
+
+ <view class="box_content" :style="{maxWidth: configuration ? configuration.rangeSize + 'px' : '750px', minWidth: configuration ? configuration.rangeSize + 'px' : '750px'}">
<!-- 骞垮憡鍥� -->
<view class="advertisement">
- <image :src="Config.resourcePath + Config.topImg" mode="widthFix"></image>
+ <image v-if="configuration" :src="topImg" mode="widthFix"></image>
+ <image v-else :src="require('@/static/banner.png')" mode="widthFix"></image>
</view>
<view class="box_content_left" v-if="status > 0" @click="fanhuiPage">
@@ -23,53 +23,58 @@
涓�閿竻绌�
</view>
+ <view class="box_user">
+ <text>{{User.username}}</text>
+ <image src="@/static/ic_logout@2x.png" mode="widthFix" @click="loginOut"></image>
+ </view>
+
<!-- 棣栭〉 -->
<template v-if="status === 0">
<view class="commodityFrom" v-if="shopList && shopList.length > 0">
- <view class="commodityFrom_head">
- <view class="commodityFrom_head_item">绫诲埆</view>
- <view class="commodityFrom_head_item">鍝佺墝</view>
- <view class="commodityFrom_head_item">鍨嬪彿</view>
- <view class="commodityFrom_head_item">鎸囧浠�</view>
- <view class="commodityFrom_head_item">鍏ユ墜浠�</view>
+ <view class="commodityFrom_head" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 0 ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 1 ? percentage(configuration.header.bgColor, configuration.header.bgAlpha) : `linear-gradient(180deg, ${percentage(configuration.header.bgColor, configuration.header.bgAlpha)} 0%, ${percentage(configuration.header.bgColor2, configuration.header.bgAlpha2)} 100%)`}">
+ <view class="commodityFrom_head_item" :style="{color: !configuration ? '#ffffff' : configuration.header.type === 1 ? percentage(configuration.header.color, configuration.header.alpha) : '#ffffff'}">绫诲埆</view>
+ <view class="commodityFrom_head_item" :style="{color: !configuration ? '#ffffff' : configuration.header.type === 1 ? percentage(configuration.header.color, configuration.header.alpha) : '#ffffff'}">鍝佺墝</view>
+ <view class="commodityFrom_head_item" :style="{color: !configuration ? '#ffffff' : configuration.header.type === 1 ? percentage(configuration.header.color, configuration.header.alpha) : '#ffffff'}">鍨嬪彿</view>
+ <view class="commodityFrom_head_item" :style="{color: !configuration ? '#ffffff' : configuration.header.type === 1 ? percentage(configuration.header.color, configuration.header.alpha) : '#ffffff'}">鎸囧浠�</view>
+ <view class="commodityFrom_head_item" :style="{color: !configuration ? '#ffffff' : configuration.header.type === 1 ? percentage(configuration.header.color, configuration.header.alpha) : '#ffffff'}">鍏ユ墜浠�</view>
</view>
- <view class="commodityFrom_body">
+ <view class="commodityFrom_body" :style="{background: !configuration ? 'rgba(0,0,0,0)' : percentage(configuration.list.bgColor, configuration.list.bgAlpha)}">
<view class="commodityFrom_body_content">
<view class="commodityFrom_body_content_item" v-for="(item, index) in shopList" :key="index">
<view class="commodityFrom_body_content_item_num">
<view class="commodityFrom_body_content_item_num_img">
<image :src="item.categoryImgurl" mode="widthFix"></image>
</view>
- <text>{{item.categoryName}}</text>
- <!-- {{stringOperations(item.categoryName, 4)}} -->
+ {{stringOperations(item.categoryName, 3)}}
</view>
- <!-- @click="open(index, 1)" -->
- <view class="commodityFrom_body_content_item_num" @mouseenter.stop="mouseenterP(index, item.categoryId)" @mouseleave.stop="mouseleaveP(index)">
- <!-- {{stringOperations(item.brandName, 4)}} brandData -->
- <text>{{item.brandName}}</text>
- <view class="drop-down" :style="{ opacity: item.ppShow ? opacity : '0', zIndex: item.ppShow ? zIndex : '-1' }">
- <view class="drop-down-item" v-for="(child, i) in item.ppData" :key="i" @click.stop="clickBrand(item, child, index)">
- <text>{{child.name}}</text>
+ <view class="commodityFrom_body_content_item_num" @click="open(index, 1)">
+ {{stringOperations(item.brandName, 4)}}
+ <view class="drop-down" :style="{ opacity: item.ppShow ? opacity : '0', zIndex: item.ppShow ? zIndex : '-1', background: !configuration ? 'rgba(108, 130, 170, 1)' : percentage(configuration.pull.bgColor, configuration.pull.bgAlpha) }">
+ <view class="drop-down-search">
+ <input type="text" placeholder="璇疯緭鍏�" v-model="item.brandVal" @input="searchBrand($event, item)" />
+ </view>
+ <!-- brandData -->
+ <view class="drop-down-item" v-for="(child, i) in item.brandVal ? item.brandSearchList : item.brandList" :key="i" @click.stop="clickBrand(item, child, index)">
+ {{child.name}}
</view>
</view>
</view>
- <!-- @click="open(index, 2)" -->
- <view class="commodityFrom_body_content_item_num" @mouseenter.stop="mouseenterX(index)" @mouseleave.stop="mouseleaveX(index)">
- <!-- {{stringOperations(item.name, 16)}} -->
- <text>{{item.name}}</text>
-
+ <view class="commodityFrom_body_content_item_num" @click="open(index, 2)">
+ {{item.name}}
<view class="drop-top" v-show="item.name">
{{item.name}}
</view>
- <view class="drop-down" :style="{ opacity: item.xhShow ? opacity : '0', zIndex: item.xhShow ? zIndex : '-1' }">
- <view class="drop-down-item" v-for="(data, s) in item.xhData" :key="s" @click.stop="clickXH(data, index)">
- <!-- {{ stringOperations(data.name, 7)}} -->
- <text>{{data.name}}</text>
+ <view class="drop-down" :style="{ opacity: item.xhShow ? opacity : '0', zIndex: item.xhShow ? zIndex : '-1', background: !configuration ? 'rgba(108, 130, 170, 1)' : configuration.pull.bgType === 1 ? percentage(configuration.pull.bgColor, configuration.pull.bgAlpha) : 'rgba(108, 130, 170, 1)' }">
+ <view class="drop-down-search">
+ <input type="text" placeholder="璇疯緭鍏�" v-model="item.modelVal" @input="searchModel($event, item)" />
+ </view>
+ <view class="drop-down-item" v-for="(data, s) in item.modelVal ? item.modelSearchList : item.xhData" :key="s" @click.stop="clickXH(data, index)">
+ {{data.name}}
</view>
</view>
</view>
<view class="commodityFrom_body_content_item_num">
- <text>{{ item.zdPrice }}</text>
+ {{ item.zdPrice }}
</view>
<view class="commodityFrom_body_content_item_num">
<input
@@ -86,20 +91,18 @@
</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'}">鎬昏锛�</view>
+ <view class="commodityFrom_body_total_item" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 2 ? `linear-gradient(180deg, ${percentage(configuration.header.bgColor, configuration.header.bgAlpha)} 0%, ${percentage(configuration.header.bgColor2, configuration.header.bgAlpha2)} 100%)` : configuration.header.backgroundType === 1 ? percentage(configuration.header.bgColor, configuration.header.bgAlpha) : 'rgba(13, 30, 65, 1)', color: !configuration ? 'rgba(255, 220, 108, 1)' : configuration.pull.selType === 1 ? percentage(configuration.pull.selColor, configuration.pull.selAlpha) : '#FFDC6C'}">
{{simplifyNum(zdj)}}
- <!-- {{unitConvert(zdTotalPrice).num}}{{unitConvert(zdTotalPrice).unit}} -->
</view>
- <view class="commodityFrom_body_total_item">
+ <view class="commodityFrom_body_total_item" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 2 ? `linear-gradient(180deg, ${percentage(configuration.header.bgColor, configuration.header.bgAlpha)} 0%, ${percentage(configuration.header.bgColor2, configuration.header.bgAlpha2)} 100%)` : configuration.header.backgroundType === 1 ? percentage(configuration.header.bgColor, configuration.header.bgAlpha) : 'rgba(13, 30, 65, 1)', color: !configuration ? 'rgba(255, 220, 108, 1)' : configuration.pull.selType === 1 ? percentage(configuration.pull.selColor, configuration.pull.selAlpha) : '#FFDC6C'}">
{{simplifyNum(totalPrices)}}
- <!-- {{unitConvert(totalPrice).num}}{{unitConvert(totalPrice).unit}} -->
</view>
</view>
</view>
</view>
<view class="productCategory">
- <view class="productCategory_list">
+ <view class="productCategory_list" :style="{background: !configuration ? 'rgba(137, 159, 197, 1)' : configuration.category.bgType === 1 ? percentage(configuration.category.bgColor, configuration.category.bgAlpha) : '#899FC5'}">
<view
class="productCategory_list_item"
v-for="(item, index) in category"
@@ -120,22 +123,22 @@
<!-- 鍟嗗搧鍒楄〃 -->
<template v-if="status === 1 || status === 2">
<view class="productPage">
- <view class="productPage_head">
- <view class="productPage_head_item" v-if="attrFirstList && attrFirstList.length > 0">
+ <view class="productPage_head" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 2 ? `linear-gradient(180deg, ${percentage(configuration.header.bgColor, configuration.header.bgAlpha)} 0%, ${percentage(configuration.header.bgColor2, configuration.header.bgAlpha2)} 100%)` : percentage(configuration.header.bgColor, configuration.header.bgAlpha)}">
+ <view class="productPage_head_item" v-if="attrFirstName">
<text>{{attributeOne.name ? attributeOne.name : attrFirstName}}</text>
<image src="@/static/ar_open@2x.png" mode="widthFix"></image>
- <view class="productPage_xl" v-if="attrFirstList.length > 0">
+ <view class="productPage_xl" :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)">
- <text>{{item.name}}</text>
+ {{item.name}}
</view>
</view>
</view>
- <view class="productPage_head_item" v-if="attrSecondList && attrSecondList.length > 0">
+ <view class="productPage_head_item" v-if="attrSecondName">
<text>{{attributeTwo.name ? attributeTwo.name : attrSecondName}}</text>
<image src="@/static/ar_open@2x.png" mode="widthFix"></image>
- <view class="productPage_xl" v-if="attrSecondList.length > 0">
+ <view class="productPage_xl" :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)">
- <text>{{item.name}}</text>
+ {{item.name}}
</view>
</view>
</view>
@@ -143,13 +146,13 @@
<text v-if="budget.type == 1 || budget.type == 2">{{budget.name}}</text>
<text v-else>{{budget.max && budget.min ? budget.min + '~' + budget.max : '棰勭畻'}}</text>
<image src="@/static/ar_open@2x.png" mode="widthFix"></image>
- <view class="productPage_xl" v-if="budgetList.length > 0">
+ <view class="productPage_xl" :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)">
<template v-if="!item.name">
- <text>{{item.minamount}}~{{item.maxamount}}</text>
+ {{item.minamount}}~{{item.maxamount}}
</template>
<template v-else>
- <text>{{item.name}}</text>
+ {{item.name}}
</template>
</view>
</view>
@@ -157,68 +160,68 @@
<view class="productPage_head_item">
<text>{{shopPageBrand.name ? shopPageBrand.name : '鍝佺墝'}}</text>
<image src="@/static/ar_open@2x.png" mode="widthFix"></image>
- <view class="productPage_xl" v-if="brandData1.length > 0">
+ <view class="productPage_xl" :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)">
- <text>{{item.name}}</text>
+ {{item.name}}
</view>
</view>
</view>
</view>
<view class="productPage_pk" v-if="isPK || status === 2">
<view class="productPage_pk_shop">
- <view class="productPage_pk_shop_sp" @click="openSearch('left')" v-if="JSON.stringify(leftShop) == '{}'">
- <image src="@/static/ic_add@2x.png" mode="widthFix"></image>
+ <view class="productPage_pk_shop_sp" @click="openSearch('left')" v-if="JSON.stringify(leftShop) == '{}'" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 0 ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 1 ? percentage(configuration.header.bgColor, configuration.header.bgAlpha) : `linear-gradient(180deg, ${percentage(configuration.header.bgColor, configuration.header.bgAlpha)} 0%, ${percentage(configuration.header.bgColor2, configuration.header.bgAlpha2)} 100%)`}">
+ <!-- <image src="@/static/ic_add@2x.png" mode="widthFix"></image> -->
+ <span>+</span>
</view>
- <view class="productPage_pk_shop_sp1" @click="clickPKshop(leftShop)" v-else>
+ <view class="productPage_pk_shop_sp1" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 2 ? `linear-gradient(180deg, ${percentage(configuration.header.bgColor, configuration.header.bgAlpha)} 0%, ${percentage(configuration.header.bgColor2, configuration.header.bgAlpha2)} 100%)` : percentage(configuration.header.bgColor, configuration.header.bgAlpha)}" @click="clickPKshop(leftShop)" v-else>
<view class="productPage_pk_shop_sp1_img">
<image :src="leftShop.imgurl ? leftShop.prefixUrl + leftShop.imgurl : ''" mode="widthFix"></image>
</view>
+ <!-- <text>{{stringOperations(leftShop.name, 20)}}</text> -->
<text>{{leftShop.name}}</text>
</view>
<view class="productPage_pk_shop_t">
- <image :src="Config.resourcePath + Config.pkImg" mode="widthFix"></image>
+ <image :src="!configuration ? require('@/static/ic_pktai@2x.png') : configuration.pkImg.type === 0 ? require('@/static/ic_pktai@2x.png') : configuration.pkImg.imgurl" mode="widthFix"></image>
</view>
</view>
<view class="productPage_pk_z" @click="jumpPK">
<image src="@/static/ic_pk@2x.png" mode="widthFix"></image>
</view>
<view class="productPage_pk_shop">
- <view class="productPage_pk_shop_sp" @click="openSearch('right')" v-if="JSON.stringify(rightShop) == '{}'">
- <image src="@/static/ic_add@2x.png" mode="widthFix"></image>
+ <view class="productPage_pk_shop_sp" @click="openSearch('right')" v-if="JSON.stringify(rightShop) == '{}'" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 0 ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 1 ? percentage(configuration.header.bgColor, configuration.header.bgAlpha) : `linear-gradient(180deg, ${percentage(configuration.header.bgColor, configuration.header.bgAlpha)} 0%, ${percentage(configuration.header.bgColor2, configuration.header.bgAlpha2)} 100%)`}">
+ <!-- <image src="@/static/ic_add@2x.png" mode="widthFix"></image> -->
+ <span>+</span>
</view>
- <view class="productPage_pk_shop_sp1" @click="clickPKshop(rightShop)" v-else>
+ <view class="productPage_pk_shop_sp1" :style="{background: !configuration ? 'rgba(13, 30, 65, 1)' : configuration.header.backgroundType === 2 ? `linear-gradient(180deg, ${percentage(configuration.header.bgColor, configuration.header.bgAlpha)} 0%, ${percentage(configuration.header.bgColor2, configuration.header.bgAlpha2)} 100%)` : percentage(configuration.header.bgColor, configuration.header.bgAlpha)}" @click="clickPKshop(rightShop)" v-else>
<view class="productPage_pk_shop_sp1_img">
<image :src="rightShop.imgurl ? rightShop.prefixUrl + rightShop.imgurl : ''" mode="widthFix"></image>
</view>
<text>{{rightShop.name}}</text>
+ <!-- <text>{{stringOperations(rightShop.name, 6)}}</text> -->
</view>
<view class="productPage_pk_shop_t">
- <image :src="Config.resourcePath + Config.pkImg" mode="widthFix"></image>
+ <image :src="!configuration ? require('@/static/ic_pktai@2x.png') : configuration.pkImg.type === 0 ? require('@/static/ic_pktai@2x.png') : configuration.pkImg.imgurl" mode="widthFix"></image>
</view>
</view>
</view>
<view class="productPage_shop" v-if="status === 1 && !pkcontent">
- <noData v-if="shopPageData.length === 0 && shopPageDataSou.length === 0" />
- <template v-else>
- <view class="productPage_shop_item" v-for="(item, index) in isSOU ? shopPageDataSou : shopPageData" :key="index" @click="clickshoppageItem(item)">
- <view class="productPage_shop_item_img">
- <image :src="item.imgurl ? item.prefixUrl + item.imgurl : ''" mode="widthFix"></image>
- </view>
- <!-- stringOperations(item.name, 6) -->
- <text>{{item.name}}</text>
+ <view class="productPage_shop_item" :style="{background: !configuration ? 'rgba(137, 159, 197, 1)' : percentage(configuration.list.bgColor, configuration.list.bgAlpha)}" v-for="(item, index) in isSOU ? shopPageDataSou : shopPageData" :key="index" @click="clickshoppageItem(item)">
+ <view class="productPage_shop_item_img">
+ <image :src="item.imgurl ? item.prefixUrl + item.imgurl : ''" mode="widthFix"></image>
</view>
- <view class="productPage_shop_zw"></view>
- <view class="productPage_shop_zw"></view>
- <view class="productPage_shop_zw"></view>
- </template>
+ <text>{{stringOperations(item.name, 6)}}</text>
+ </view>
+ <view class="productPage_shop_zw"></view>
+ <view class="productPage_shop_zw"></view>
+ <view class="productPage_shop_zw"></view>
</view>
<!-- v-if="status === 2" -->
<view class="productPage_parameter" v-if="isPK && pkcontent">
<view class="productPage_parameter_item" v-for="(item, index) in [leftShop, rightShop]" :key="index">
- <view class="productPage_parameter_item_head">
- <text>{{item.name}}</text>
+ <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)}}
</view>
- <view class="productPage_parameter_item_content">
+ <view class="productPage_parameter_item_content" :style="{background: !configuration ? 'rgba(137, 159, 197, 1)' : configuration.list.bgType === 1 ? percentage(configuration.list.bgColor, configuration.list.bgAlpha) : 'rgba(137, 159, 197, 1)'}">
<view class="productPage_parameter_item_content_price">
<view class="zdj">
<text>鎸囧浠凤細</text>
@@ -230,12 +233,7 @@
</view>
</view>
<view class="productPage_parameter_item_content_nr">
- <view class="item" v-if="item.param1" v-for="(child, i) in item.param1" :key="child.index">
- <view class="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="item" v-for="(child, i) in item.goodsParamList" :key="i">
<view class="label">{{child.name}}锛�</view>
<view class="value">{{child.val}}</view>
</view>
@@ -246,24 +244,37 @@
</view>
</template>
- <!-- 鎼滅储缁勪欢 -->
+ <!-- 鏌ョ湅澶у浘 -->
+ <bigImg
+ ref="bigImg"
+ :imgList="imgList"/>
+
+ <!-- 鎼滅储 -->
<search
ref="search"
+ :search="configuration ? configuration.search : null"
:categoryList="category"
:shopList="shopData"
+ :categoryid="categoryId"
:status="status"
:categoryName="categoryName"
- :categoryid="categoryId"
- @result="result" />
+ @result="result" />
+ <!-- 鎼滅储鍟嗗搧鍒楄〃鏍囬 -->
+ <searchShopList
+ ref="searchShopListRef"
+ :search="configuration ? configuration.search : null"
+ @getTitle="getVal"
+ />
</view>
</view>
</template>
<script>
+ import bigImg from '@/components/bigImg.vue'
import search from '@/components/search.vue'
- import noData from '@/components/noData.vue'
+ import searchShopList from '@/components/searchShopList.vue'
+ import { categoryList, goodsList, brandList, h5Image, logout, getByLoginNew } from '@/apis/index.js'
import { mapState } from 'vuex'
- import { categoryList, goodsList, brandList, h5Image, goodsPage, listForH5, logout } from '@/apis/index.js'
export default {
data() {
return {
@@ -326,88 +337,109 @@
zdj: 0,
select: [], // 宸查��
+ configuration: null,
+ bgImg: '',
+ topImg: '',
+ pkImg: '',
- model: { // 鍟嗗搧鏌ヨ鏁版嵁
- attrFirst: '',
- attrSecond: '',
- brandId: '',
- categoryId: '',
- eprice: '',
- sprice: '',
- keyword: ''
- },
-
- page: 1
+ title: ''
}
},
- components: { search, noData },
+ components: { bigImg, search, searchShopList },
onLoad() {
+ getByLoginNew({})
+ .then(res => {
+ 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) {
+ this.bgImg = require('@/static/mb.png')
+ } else {
+ this.bgImg = this.configuration.bgImg.imgurl
+ }
+ if (this.configuration.topImg.type === 0) {
+ this.topImg = require('@/static/banner.png')
+ } else {
+ this.topImg = this.configuration.topImg.imgurl
+ }
+ if (this.configuration.pkImg.type === 0) {
+ this.pkImg = require('@/static/ic_pktai@2x.png')
+ } else {
+ this.pkImg = this.configuration.pkImg.imgurl
+ }
+ })
var that = this
// 鐩戝惉閿洏缁勫悎閿�
document.onkeydown = function(e) {
var keyCode = e.keyCode || e.which || e.charCode;
var ctrlKey = e.ctrlKey || e.metaKey;
- if (!that.$refs.search.show) {
- if (ctrlKey && keyCode == 70) {
- if (that.status === 0) {
- that.$refs.search.index = 0
- that.$refs.search.open()
- }
- e.preventDefault();
- return false;
- } else if (keyCode === 37) {
- that.fanhuiPage()
- e.preventDefault();
- return false;
- } else if (keyCode === 39) {
- that.xiaPage()
- e.preventDefault();
- return false;
+ if(ctrlKey && keyCode == 70) {
+ if (that.status === 0) {
+ that.$refs.search.open()
+ } else if (that.status === 1) {
+ that.$refs.searchShopListRef.open()
}
- } else {
- console.log('宸茬粡鎵撳紑鎼滅储妗�', keyCode)
- if (keyCode === 38) {
- that.$refs.search.changeTop()
- } else if (keyCode === 40) {
- that.$refs.search.changeBottom()
- } else if (keyCode === 13) {
- that.$refs.search.confirm()
- }
+ e.preventDefault();
+ return false;
+ } else if (keyCode === 37) {
+ that.fanhuiPage()
+ e.preventDefault();
+ return false;
+ } else if (keyCode === 39) {
+ that.xiaPage()
+ e.preventDefault();
+ return false;
}
}
this.getCategoryList()
- // this.getGoodsList()
- this.getbrandList()
+ this.getGoodsList()
+ // this.getbrandList()
this.h5Images()
},
onReady() {
var that = this
+
let divs = document.getElementsByClassName('box')
+
let start = 0
+
divs[0].onmousedown = function(ev){
+
if (that.status === 1) {
+
start = ev.pageY
+
//event鐨勫吋瀹规��
var ev = ev || event;
+
//鑾峰彇榧犳爣鎸変笅鐨勫潗鏍�
var x1 = ev.clientX;
var y1 = ev.clientY;
+
//鑾峰彇鍏冪礌鐨刲eft锛宼op鍊�
var l = divs.offsetLeft;
var t = divs.offsetTop;
+
//缁欏彲瑙嗗尯鍩熸坊鍔犻紶鏍囩殑绉诲姩浜嬩欢
document.onmousemove = function(ev) {
//event鐨勫吋瀹规��
var ev = ev || event;
+
//鑾峰彇榧犳爣绉诲姩鏃剁殑鍧愭爣
var x2 = ev.clientX;
var y2 = ev.clientY;
+
//璁＄畻鍑洪紶鏍囩殑绉诲姩璺濈
var x = x2 - x1;
var y = y2 - y1;
+
//绉诲姩鐨勬暟鍊间笌鍏冪礌鐨刲eft锛宼op鐩稿姞锛屽緱鍑哄厓绱犵殑绉诲姩鐨勮窛绂�
var lt = y + t;
var ls = x + l;
+
let num = start - ev.pageY
if (num < -100) {
that.isPK = true
@@ -421,24 +453,16 @@
document.onmouseup = function(ev){
document.onmousemove = null;
}
+
}
}
- },
- onUnload() {
- //娓呴櫎
- document.onmouseup = function(ev){
- document.onmousemove = null;
- }
- //娓呴櫎
- document.onkeydown = null
},
computed: {
// 鎸囧浠锋�昏
zdTotalPrice() {
let num = 0
this.shopList.forEach(item => {
- // num = num + Number(item.zdPrice)
- num = this.addPrice(num, Number(item.zdPrice))
+ num = num + Number(item.zdPrice)
})
return num || 0
},
@@ -446,8 +470,7 @@
totalPrice() {
let num = 0
this.shopList.forEach(item => {
- // num = num + Number(item.price)
- num = this.addPrice(num, Number(item.price))
+ num = num + Number(item.price)
})
return num || 0
},
@@ -457,10 +480,7 @@
status: {
handler(news, old) {
if (news === 0) {
- this.page = 1
this.categoryName = ''
- this.categoryId = ''
- this.shopPageData = []
}
}
},
@@ -470,105 +490,60 @@
let rsj = 0
let zdj = 0
this.shopList.forEach(item => {
- // rsj = rsj + Number(item.price)
- rsj = this.addPrice(rsj, Number(item.price))
- // zdj = zdj + Number(item.zdPrice)
- zdj = this.addPrice(zdj, Number(item.zdPrice))
+ rsj = rsj + Number(item.price)
+ zdj = zdj + Number(item.zdPrice)
})
- // console.log('rsj', rsj)
- // console.log('zdj', zdj)
this.totalPrices = rsj
this.zdj = zdj
}
}
},
methods: {
- async mouseenterP(index, categoryId) {
- this.shopList[index].ppShow = true
- if (!this.shopList[index].ppData || this.shopList[index].ppData.length == 0) {
- let res = await brandList({ categoryId })
- if (res.code === 200) {
- this.shopList[index].ppData = res.data
+ // 宸查�夊晢鍝佸垪琛ㄦ悳绱㈠搧鐗�
+ searchBrand(e, item) {
+ item.brandSearchList = item.brandList.filter(item => {
+ if (item.name.indexOf(e.detail.value) > -1) {
+ return item
}
- }
- this.$forceUpdate()
- },
- mouseleaveP(index) {
- this.shopList[index].ppShow = false
- this.$forceUpdate()
- },
- async mouseenterX(index) {
- this.shopList[index].xhShow = true
- 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()
- }
- }
- // this.shopList[index].xhShow = true
- // this.$forceUpdate()
- },
- mouseleaveX(index) {
- this.shopList[index].xhShow = false
- this.$forceUpdate()
- // listForH5({
- // categoryId: this.shopList[index].categoryId,
- // brandId: this.shopList[index].brandId
- // }).then(res => {
- // this.shopList[index].xhData = res.data;
- // this.shopList[index].xhShow = false
- // this.$forceUpdate()
- // })
- // this.shopList[index].ppShow = false
- // this.$forceUpdate()
- },
- addPrice (arg1, arg2) {
- let r1, r2, m;
- try {
- r1 = arg1.toString().split('.')[1].length; // 鑾峰彇arg1灏忔暟浣嶇殑闀垮害
- } catch (e) {
- r1 = 0;
- }
- try {
- r2 = arg2.toString().split('.')[1].length; // 鑾峰彇arg2灏忔暟浣嶇殑闀垮害
- } catch (e) {
- r2 = 0;
- }
- m = Math.pow(10, Math.max(r1, r2)); // max()鍑芥暟鏄�夊嚭灏忔暟鐐逛綅鏈�澶х殑鍙傛暟鐨勯暱搴︼紝淇濊瘉灏嗕袱涓弬鏁伴兘鍖栦负鏁存暟锛宲ow()鍑芥暟鏄皢10鍋氭寚鏁板箓鎿嶄綔,灏嗗弬鏁伴兘鍖栦负鏁存暟
- return (arg1 * m + arg2 * m )/m;
- },
- // 閫�鍑�
- loginOut() {
- logout({})
- .then(res => {
- this.$store.commit('clean')
- uni.redirectTo({ url: '/pages/login/login' });
- })
- },
- // 鏌ヨ鍟嗗搧鏁版嵁
- getShopList(type) {
- if (type === 1) {
- this.page = 1
- this.shopPageData = []
- }
- goodsPage({
- capacity: 20,
- page: this.page,
- model: this.model
- }).then(res => {
- if (this.shopPageData.length === res.data.total) return
- let arr = [...this.shopPageData, ...res.data.records]
- this.shopPageData = arr
- this.page = this.page + 1
})
+ this.$forceUpdate()
+ },
+ // 宸查�夊晢鍝佸垪琛ㄦ悳绱㈠瀷鍙�
+ searchModel(e, item) {
+ item.modelSearchList = item.xhData.filter(item => {
+ if (item.name.indexOf(e.detail.value) !== -1) {
+ return item
+ }
+ })
+ this.$forceUpdate()
+ },
+ // 鑾峰彇鎼滅储鐨勬爣棰�
+ getVal(val) {
+ this.title = val
+ this.leftShop = {}
+ this.rightShop = {}
+ this.isSOU = true
+ this.shopPageDataSou = []
+ this.shopPageData.forEach(item => {
+ if (
+ (this.attributeOne.id ? item.attrFirstIds.indexOf(String(this.attributeOne.id)) !== -1 : true) &&
+ (this.attributeTwo.id ? item.attrSecodIds.indexOf(String(this.attributeTwo.id)) !== -1 : true) &&
+ (this.budget.type == 3 ? (item.price <= Number(this.budget.max)) && (item.price >= Number(this.budget.min)) : true) &&
+ (this.budget.type == 1 ? (item.price <= Number(this.budget.max)) : true) &&
+ (this.budget.type == 2 ? (item.price >= Number(this.budget.min)) : true) &&
+ (this.shopPageBrand.id ? item.brandId === this.shopPageBrand.id : true) &&
+ (item.name.indexOf(this.title) !== -1) // 鏍囬鎼滅储
+ ) {
+ this.shopPageDataSou.push(item)
+ }
+ })
+ },
+ empty() {
+ this.shopList = []
+ },
+ percentage(bgColor, alpha) {
+ let res = +(alpha * 2.55).toFixed(0)
+ return bgColor + res.toString(16)
},
checkInput(_this) {
if (_this.value != '' && _this.value.substr(0, 1) == '.') {
@@ -595,7 +570,6 @@
},
changePrice(price, index) {
if (price.indexOf('-') !== -1) {
- console.log('-')
this.shopList[index].price = ''
return
}
@@ -607,13 +581,11 @@
this.shopList.forEach(item => {
rsj = rsj + Number(item.price)
})
- console.log('rsj', rsj)
this.totalPrices = rsj
},
simplifyNum(number) {
if (!number && number != 0) return number;
let test = number.toFixed(0)
- // console.log(test)
if(test.length >= 7){
const moneys = number / 10000
const realVal = parseFloat(moneys).toFixed(0);
@@ -621,6 +593,14 @@
} else {
return number
}
+ },
+ // 閫�鍑�
+ loginOut() {
+ logout({})
+ .then(res => {
+ this.$store.commit('clean')
+ uni.redirectTo({ url: '/pages/login/login' });
+ })
},
// 鑾峰彇娴锋姤鍥�
h5Images() {
@@ -632,10 +612,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 = {}
@@ -669,23 +653,14 @@
// 鐐瑰嚮鍨嬪彿
clickXH(item, index) {
let obj = JSON.parse(JSON.stringify(this.shopList[index]))
+ obj.modelSearchList = []
+ obj.modelVal = ''
obj.name = JSON.parse(JSON.stringify(item.name))
obj.zdPrice = JSON.parse(JSON.stringify(item.zdPrice))
obj.price = JSON.parse(JSON.stringify(item.price))
- obj.multifileList = JSON.parse(JSON.stringify(item.multifileList))
+ this.shopList.splice(index, 1, obj)
obj.xhShow = false
- // this.shopList.splice(index, 1)
- this.shopList[index] = JSON.parse(JSON.stringify(obj))
- console.log(this.shopList[index])
- console.log(JSON.parse(JSON.stringify(obj)))
- let rsj = 0
- let zdj = 0
- this.shopList.forEach(item => {
- rsj = this.addPrice(rsj, Number(item.price))
- zdj = this.addPrice(zdj, Number(item.zdPrice))
- })
- this.totalPrices = rsj
- this.zdj = zdj
+ // this.shopList[index] = JSON.parse(JSON.stringify(obj))
this.$forceUpdate()
},
// 鐐瑰嚮pk鍟嗗搧甯﹀洖棣栭〉
@@ -707,13 +682,7 @@
})
}
})
- if (this.imgList.length === 0) return
- this.$viewerApi({
- images: this.imgList,
- })
- },
- empty() {
- this.shopList = []
+ this.$refs.bigImg.open(i)
},
// 璺宠浆pk
jumpPK() {
@@ -735,33 +704,14 @@
clickShopPageCheck(item, type) {
this.leftShop = {}
this.rightShop = {}
- // this.isSOU = true
- // this.shopPageDataSou = []
+ this.isSOU = true
if (type === 1) {
this.attributeOne.name = item.name === '鍏ㄩ儴' ? '' : item.name
this.attributeOne.id = item.id
-
- if (item.name === '鍏ㄩ儴') {
- this.model.attrFirst = ''
- } else {
- this.model.attrFirst = item.id
- }
-
- this.getShopList(1)
-
} else if (type === 2) {
this.attributeTwo.name = item.name === '鍏ㄩ儴' ? '' : item.name
this.attributeTwo.id = item.id
-
- if (item.name === '鍏ㄩ儴') {
- this.model.attrSecond = ''
- } else {
- this.model.attrSecond = item.id
- }
-
- this.getShopList(1)
} else if (type === 3) {
- console.log(item)
this.budget.id = item.id
this.budget.max = item.maxamount
this.budget.min = item.minamount
@@ -769,46 +719,48 @@
if (item.name) {
this.budget.name = item.name
}
- if (item.name === '鍏ㄩ儴') {
- this.model.sprice = ''
- this.model.eprice = ''
- } else {
- this.model.sprice = item.minamount || 0
- this.model.eprice = item.maxamount || 99999
- }
-
- this.getShopList(1)
} else if (type === 4) {
this.shopPageBrand.id = item.id
this.shopPageBrand.name = item.name === '鍏ㄩ儴' ? '' : item.name
-
- if (item.name === '鍏ㄩ儴') {
- this.model.brandId = ''
- } else {
- this.model.brandId = item.id
- }
-
- this.getShopList(1)
}
this.isPK = false
this.pkcontent = false
this.status = 1
- this.shopPageData.forEach(item => {
+ this.shopPageDataSou = this.shopPageData.filter(item1 => {
+ console.log(item1.attrFirstIds, this.attributeOne.id)
if (
- (this.attributeOne.id ? item.attrFirstIds.indexOf(String(this.attributeOne.id)) !== -1 : true) &&
- (this.attributeTwo.id ? item.attrSecodIds.indexOf(String(this.attributeTwo.id)) !== -1 : true) &&
- (this.budget.type == 3 ? (item.price <= Number(this.budget.max)) && (item.price >= Number(this.budget.min)) : true) &&
- (this.budget.type == 1 ? (item.price <= Number(this.budget.max)) : true) &&
- (this.budget.type == 2 ? (item.price >= Number(this.budget.min)) : true) &&
- (this.shopPageBrand.id ? item.brandId === this.shopPageBrand.id : true)
+ (this.attributeOne.id ? item1.attrFirstIds.indexOf(String(this.attributeOne.id)) !== -1 : true) &&
+ (this.attributeTwo.id ? item1.attrFirstIds.indexOf(String(this.attributeTwo.id)) !== -1 : true) &&
+ (this.budget.type == 3 ? (item1.price <= Number(this.budget.max)) && (item1.price >= Number(this.budget.min)) : true) &&
+ (this.budget.type == 1 ? (item1.price <= Number(this.budget.max)) : true) &&
+ (this.budget.type == 2 ? (item1.price >= Number(this.budget.min)) : true) &&
+ (this.shopPageBrand.id ? item1.brandId === this.shopPageBrand.id : true) &&
+ (item1.name.indexOf(this.title) !== -1)
) {
- this.shopPageDataSou.push(item)
+ return item1
}
})
},
+ deepCopyArray(arr) {
+ var copy = [];
+
+ for (var i = 0; i < arr.length; i++) {
+ // 鍒ゆ柇姣忎釜鍏冪礌鐨勭被鍨�
+ if (Array.isArray(arr[i])) {
+ // 濡傛灉鏄暟缁勶紝閫掑綊璋冪敤娣辨嫹璐濆嚱鏁�
+ copy[i] = deepCopyArray(arr[i]);
+ } else {
+ // 濡傛灉鏄叾浠栫被鍨嬶紝鐩存帴璧嬪�肩粰鏂版暟缁�
+ copy[i] = arr[i];
+ }
+ }
+
+ return copy;
+ },
// 鐐瑰嚮鍟嗗搧鍒楄〃椤甸潰鍟嗗搧
clickshoppageItem(item) {
- this.shopList.push(item)
+ this.shopList.push(...this.deepCopyArray([{ ...item, brandVal: '', modelVal: '', modelSearchList: [], brandSearchList: [], brandList: this.brandData }]))
+ console.log(this.shopList)
this.attrFirstList = []
this.attrSecondList = []
this.budgetList = []
@@ -827,32 +779,26 @@
},
// 閫夋嫨鍝佺墝
clickBrand(item, val, index) {
- // let res = await listForH5({
- // categoryId: this.shopList[index].categoryId,
- // brandId: this.shopList[index].brandId
- // })
- // if (res.code === 200) {
- // this.shopList[index].xhData = res.data;
- // }
this.shopList[index].brandName = JSON.parse(JSON.stringify(val.name))
this.shopList[index].brandId = JSON.parse(JSON.stringify(val.id))
this.shopList[index].name = ''
this.shopList[index].zdPrice = ''
this.shopList[index].price = ''
- this.shopList[index].xhData = []
- this.shopList[index].multifileList = []
this.shopList[index].ppShow = false
+
+ this.shopList[index].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
@@ -861,51 +807,6 @@
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)))
}
@@ -934,15 +835,12 @@
},
copyItem(item) {
let obj = JSON.parse(JSON.stringify(item))
- obj.multifileList = []
- obj.xhData = []
obj.brandId = ''
obj.brand = ''
obj.brandName = ''
obj.name = ''
obj.zdPrice = ''
obj.price = ''
- console.log(obj)
this.shopList.push(obj)
},
deleItem(i) {
@@ -954,32 +852,21 @@
item.ppShow = false
item.xhShow = false
})
-
this.shopList.forEach((item, i) => {
if (i === index) {
if (type === 1) {
item.ppShow = true
} else {
- listForH5({
- categoryId: this.shopList[index].categoryId,
- brandId: this.shopList[index].brandId
- }).then(res => {
- this.shopList[index].xhData = res.data;
- item.xhShow = true
- this.$forceUpdate()
+ let arr = []
+ this.shopData.forEach(element => {
+ if (
+ (item.categoryId ? element.categoryId === item.categoryId : true) &&
+ (item.brandId ? element.brandId === item.brandId : true)) {
+ arr.push(JSON.parse(JSON.stringify(element)))
+ }
})
-
- // let arr = []
- // this.shopData.forEach(element => {
- // // console.log(element.categoryId === item.categoryId && element.brandId === item.brandId)
- // if (
- // (item.categoryId ? element.categoryId === item.categoryId : true) &&
- // (item.brandId ? element.brandId === item.brandId : true)) {
- // arr.push(JSON.parse(JSON.stringify(element)))
- // }
- // })
- // this.shopList[index].xhData = arr;
- // item.xhShow = true
+ this.shopList[index].xhData = arr;
+ item.xhShow = true
}
}
})
@@ -988,16 +875,15 @@
// 鐐瑰嚮绫诲埆
clickItem(index, id, name) {
this.categoryId = id
- this.model.categoryId = id
this.categoryName = name
-
- this.getShopList()
+ this.isSOU = false
+ this.title = ''
brandList({ categoryId: id })
.then(res => {
+ this.brandData = JSON.parse(JSON.stringify(res.data))
this.brandData1 = JSON.parse(JSON.stringify(res.data))
this.brandData1.unshift({ name: '鍏ㄩ儴', id: '' })
- console.log(this.brandData1)
})
this.category.forEach((item, num) => {
@@ -1051,12 +937,15 @@
})
arr.unshift({ name: '鍏ㄩ儴', id: '' })
this.budgetList = arr
- // console.log(this.budgetList)
} else {
item.active = false
}
})
// this.shopPageData = []
+ this.shopPageData = this.shopData.filter(item => {
+ return item.categoryId === id
+ })
+ console.log(this.shopPageData)
// this.shopData.forEach(item => {
// if (item.categoryId === id) {
// this.shopPageData.push(JSON.parse(JSON.stringify(item)))
@@ -1085,17 +974,19 @@
if (e === this.index) return
this.index = e
}
- },
- onReachBottom() {
- if (this.status == 1) {
- this.getShopList()
- }
}
}
</script>
<style lang="scss" scoped>
.box {
+ // width: 100vw;
+ // min-height: 100vh;
+ // display: flex;
+ // justify-content: center;
+ // background-image: url('@/static/bg.jpg');
+ // background-repeat: no-repeat;
+ // background-size: 100% 100%;
width: 100vw;
min-height: 100vh;
display: flex;
@@ -1110,32 +1001,32 @@
background-repeat: no-repeat;
background-size: 100% 100%;
}
- .box_user {
- z-index: 9;
- position: fixed;
- top: 30px;
- right: 40px;
- display: flex;
- align-items: center;
- text {
- font-size: 16px;
- font-family: PingFangSC-Medium, PingFang SC;
- font-weight: 500;
- color: #FFFFFF;
- }
- image {
- width: 18px;
- height: 18px;
- cursor: pointer;
- margin-left: 10px;
- }
- }
.box_content {
// max-width: 750px;
// min-width: 750px;
+ .box_user {
+ z-index: 9;
+ position: fixed;
+ top: 30px;
+ right: 40px;
+ display: flex;
+ align-items: center;
+ text {
+ font-size: 16px;
+ font-family: PingFangSC-Medium, PingFang SC;
+ font-weight: 500;
+ color: #FFFFFF;
+ }
+ image {
+ width: 18px;
+ height: 18px;
+ cursor: pointer;
+ margin-left: 10px;
+ }
+ }
.box_content_left {
position: fixed;
- left: 80px;
+ left: 50px;
top: 50%;
cursor: pointer;
transform: translate(-50%, 0);
@@ -1149,13 +1040,13 @@
}
.box_content_right {
position: fixed;
- right: 0px;
+ right: -30px;
top: 50%;
cursor: pointer;
transform: translate(-50%, 0);
width: 80px;
height: 80px;
- z-index: 9;
+ z-index: 999;
image {
width: 100%;
height: 100%;
@@ -1170,7 +1061,7 @@
width: 80px;
height: 80px;
border-radius: 50%;
- background-color: rgba(0, 224, 255, 0.18);
+ background-color: rgba(0, 0, 0, 0.40);
color: #FFFFFF;
font-size: 16px;
display: flex;
@@ -1179,7 +1070,6 @@
}
.advertisement {
width: 100%;
- // height: 300px;
image {
width: 100%;
height: 100%;
@@ -1263,7 +1153,7 @@
height: 45px;
display: flex;
align-items: center;
- background: rgba(0,224,255,0.3);
+ background: #ffffff;
border-radius: 8px;
image {
width: 32px;
@@ -1274,11 +1164,13 @@
.commodityFrom_body_content_item_num {
width: 126px;
height: 100%;
- padding: 0 15px;
- box-sizing: border-box;
background: #FFFFFF;
border-radius: 8px;
margin-right: 6px;
+ font-size: 16px;
+ font-family: PingFangSC-Medium, PingFang SC;
+ font-weight: 500;
+ color: #111111;
display: flex;
align-items: center;
justify-content: center;
@@ -1303,17 +1195,6 @@
cursor: pointer;
flex: 1 !important;
}
- text {
- text-align: center;
- width: 100%;
- font-size: 16px;
- font-family: PingFangSC-Medium, PingFang SC;
- font-weight: 500;
- color: #111111;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
.drop-top {
transition: .5s;
z-index: -2;
@@ -1325,7 +1206,7 @@
transform: translate(0, -100%);
padding: 5px 15px;
box-sizing: border-box;
- line-height: 40px;
+ line-height: 50px;
background: rgba(0, 0, 0, 0.8);
border-radius: 10px;
color: #FFFFFF;
@@ -1333,11 +1214,8 @@
font-weight: 500;
}
.commodityFrom_body_content_item_num_img {
- width: 28px;
- height: 28px;
- display: flex;
- align-items: center;
- justify-content: center;
+ width: 16px;
+ height: 16px;
margin-right: 4px;
image {
width: 100%;
@@ -1377,35 +1255,43 @@
// display: flex;
// flex-direction: column;
transition: .5s;
+ .drop-down-search {
+ width: 100%;
+ height: 50px;
+ padding: 10px;
+ box-sizing: border-box;
+ position: sticky;
+ background: rgb(108, 130, 170);
+ top: 0;
+ left: 0;
+ input {
+ width: 100%;
+ height: 100%;
+ border: none;
+ background-color: #FFFFFF;
+ font-size: 14px;
+ color: #000000;
+ border-radius: 5px;
+ }
+ }
.drop-down-item {
width: 100%;
height: 52px;
// padding: 0 10px;
// box-sizing: border-box;
- // overflow: hidden;
- // white-space: nowrap;
- // text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
- padding: 0 10px;
- box-sizing: border-box;
+ font-size: 16px;
+ font-family: PingFangSC-Regular, PingFang SC;
+ font-weight: 400;
+ color: #FFFFFF;
&:hover {
- text {
- color: #FFF200;
- }
- }
- text {
- width: 100%;
- text-align: center;
- font-size: 16px;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: #FFFFFF;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
+ color: #FFF200;
}
}
}
@@ -1479,7 +1365,7 @@
border-radius: 8px !important;
}
.productCategory_list_item {
- width: 20% ;
+ width: 20%;
height: 108px;
display: flex;
transition: .5s;
@@ -1506,6 +1392,7 @@
}
}
}
+
.productPage {
width: 100%;
padding: 0 22px;
@@ -1527,8 +1414,9 @@
cursor: pointer;
position: relative;
&:hover {
- border-radius: 8px 8px 0px 0px;
- background: linear-gradient(360deg, #025170 0%, #529DB9 100%) !important;
+ background: rgba(255, 255, 255, 0.16) !important;
+ // border-radius: 8px 8px 0px 0px;
+ // background: linear-gradient(360deg, #025170 0%, #529DB9 100%) !important;
}
&:hover image {
transform: rotate(180deg);
@@ -1574,27 +1462,20 @@
border-radius: 0px 0px 8px 8px;
.productPage_xl_iten {
width: 100%;
- height: 40px;
- line-height: 40px;
+ padding: 5rpx 0;
+ box-sizing: border-box;
+ // height: 56px;
+ line-height: 25px;
+ // white-space: nowrap;
+ // overflow: hidden;
+ // text-overflow: ellipsis;
text-align: center;
cursor: pointer;
- padding: 0 10px;
- box-sizing: border-box;
+ font-size: 16px;
+ font-weight: 400;
+ color: #FFFFFF;
&:hover {
- text {
- color: #FFF200;
- }
- }
- text {
- width: 100%;
- text-align: center;
- font-size: 16px;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: #FFFFFF;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
+ color: #FFF200;
}
}
}
@@ -1628,12 +1509,15 @@
.productPage_pk_shop_sp {
width: 100px;
height: 100px;
+ line-height: 100px;
+ text-align: center;
margin-top: 84px;
cursor: pointer;
margin-bottom: 52px;
- image {
- width: 100%;
- height: 100%;
+ border-radius: 50%;
+ span {
+ font-size: 60px;
+ color: #FFFFFF;
}
}
.productPage_pk_shop_sp1 {
@@ -1649,11 +1533,14 @@
justify-content: center;
flex-direction: column;
margin-bottom: 12px;
- margin-top: 24px;
+ margin-top: 16px;
cursor: pointer;
.productPage_pk_shop_sp1_img {
width: 100px;
height: 100px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
image {
width: 100%;
height: 100%;
@@ -1662,12 +1549,11 @@
text {
width: 100%;
font-size: 16px;
- font-family: SourceHanSansSC-Medium, SourceHanSansSC;
font-weight: 500;
color: #FFFFFF;
margin-top: 18px;
- overflow: hidden;
white-space: nowrap;
+ overflow: hidden;
text-overflow: ellipsis;
}
}
@@ -1682,8 +1568,8 @@
}
.productPage_pk_z {
flex-shrink: 0;
- width: 100px;
- height: 50px;
+ width: 140px;
+ height: 90px;
cursor: pointer;
image {
width: 100%;
@@ -1695,6 +1581,7 @@
width: 100%;
margin-top: 12px;
display: flex;
+ align-items: center;
justify-content: space-between;
flex-wrap: wrap;
.productPage_shop_zw {
@@ -1703,27 +1590,21 @@
}
.productPage_shop_item {
width: 168px;
- // height: 204px;
+ 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;
+ 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;
@@ -1731,19 +1612,12 @@
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;
@@ -1756,10 +1630,9 @@
width: 100%;
display: flex;
align-items: flex-start;
- justify-content: space-between;
margin-bottom: 30px;
.productPage_parameter_item {
- width: 49%;
+ flex: 1;
&:first-child {
margin-right: 18px;
}
@@ -1771,20 +1644,10 @@
display: flex;
align-items: center;
justify-content: center;
- 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;
- }
+ font-size: 16px;
+ font-family: SourceHanSansSC-Medium, SourceHanSansSC;
+ font-weight: 500;
+ color: #FFFFFF;
}
.productPage_parameter_item_content {
width: 100%;
@@ -1820,7 +1683,7 @@
font-family: SourceHanSansSC-Bold, SourceHanSansSC;
font-weight: bold;
color: #222222;
- margin-top: 10px;
+ margin-top: 14px;
}
}
}
@@ -1842,27 +1705,23 @@
font-family: SourceHanSansSC-Bold, SourceHanSansSC;
font-weight: bold;
color: #F10000;
- margin-top: 10px;
+ margin-top: 14px;
}
}
}
}
.productPage_parameter_item_content_nr {
- padding: 16px 18px;
+ padding: 16px 32px;
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: flex-start;
- margin-bottom: 15px;
+ align-items: center;
+ margin-bottom: 28px;
&:last-child {
margin-bottom: 0 !important;
}
--
Gitblit v1.9.3