更新

MrShi

2024-10-24 333150446e8186563133de7169d429709dd2a71b

更新

 h5/apis/index.js

@@ -48,4 +48,9 @@
// é€€å‡ºç™»å½•
export function logout(data){
    return post('system/logout', data)
}

// èŽ·å–当前登录企业配置信息1.0.2
export function getByLoginNew() {
    return get('business/webParam/getByLoginNew')
}

 h5/components/searchShopList.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,118 @@
<template>
    <view class="search" v-if="show" @click="close">
        <view class="search_box" @click.stop="test">
            <view class="search_box_item" style="background: rgba(13, 30, 65, 0.70)">
                <view class="icon">
                    <image src="@/static/ic_search@2x.png" mode="widthFix"></image>
                </view>
                <view class="search_box_item_right">
                    <input type="text" focus v-model="title" placeholder-class="placeholder" placeholder="请输入标题搜索" />
                    <button @click="submit">搜索</button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { listForH5 } from '@/apis/index.js'
    export default {
        data() {
            return {
                show: false,
                title: ''
            }
        },
        methods: {
            open() {
                this.title = ''
                this.show = true
            },
            close() {
                this.show = false
            },
            test() {
                return false
            },
            submit() {
                this.$emit('getTitle', this.title)
                this.close()
            }
        }
    }
</script>

<style lang="scss" scoped>
    .search {
        position: fixed;
        z-index: 4;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        .search_box {
            width: 660px;
            height: auto;
            display: flex;
            flex-direction: column;
            .search_box_item {
                width: 100%;
                height: 72px;
                border-radius: 32px;
                display: flex;
                align-items: center;
                padding: 0 30px;
                box-sizing: border-box;
                margin-bottom: 16px;
                &:last-child {
                    margin-bottom: 0 !important;
                }
                .search_box_item_right {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    input {
                        flex: 1;
                        height: 100%;
                        font-size: 20px;
                        font-weight: 400;
                        color: #FFFFFF;
                    }
                    button {
                        flex-shrink: 0;
                        width: 100px;
                        height: 40px;
                        line-height: 40px;
                        text-align: center;
                        font-size: 16px;
                        color: #FFFFFF;
                        border-radius: 30rpx;
                        background-color: #5500ff;
                        margin-left: 30rpx;
                    }
                }
                .icon {
                    width: 20px;
                    height: 20px;
                    flex-shrink: 0;
                    margin-right: 18px;
                    image {
                        width: 100%;
                        height: 100%;
                    }
                }
                .placeholder {
                    height: 72px;
                    line-height: 72px;
                    font-size: 20px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(255,255,255,0.5);
                }
            }
        }
    }
</style>

 h5/pages.json

@@ -1,6 +1,14 @@
{
    "pages": [
        {
            "path": "pages/index_2/index",
            "style": {
                "navigationBarTitleText": "预选清单系统",
                "navigationStyle": "custom",
                "enablePullDownRefresh": true
            }
        },
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "预选清单系统",

 h5/pages/index_2/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1644 @@
<template>
    <view class="box">
        <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 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">
                <image src="@/static/ic_left@2x.png" mode="widthFix"></image>
            </view>
            <view class="box_content_right" @click="xiaPage" v-if="status > 0 && status !== 2">
                <image src="@/static/ic_right@2x.png" mode="widthFix"></image>
            </view>
			
            <!-- ä¸€é”®æ¸…空按钮 -->
            <view class="box_content_close" v-if="status === 0" @click="empty">
                ä¸€é”®æ¸…空
            </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" :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" :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 ? item.prefixUrl + item.categoryImgurl : ''" mode="widthFix"></image>
                                    </view>
                                    {{stringOperations(item.categoryName, 3)}}
                                </view>
                                <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">搜索</view>
                                        <view class="drop-down-item" v-for="(child, i) in brandData" :key="i" @click.stop="clickBrand(item, child, index)">
                                            {{child.name}}
                                        </view>
                                    </view>
                                </view>
                                <view class="commodityFrom_body_content_item_num" @click="open(index, 2)">
                                    {{stringOperations(item.name, 8)}}
                                    <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>
                                    </view>
                                </view>
                                <view class="commodityFrom_body_content_item_num">
                                    {{ item.zdPrice }}
                                </view>
                                <view class="commodityFrom_body_content_item_num">
                                    <input
                                        type="number"
                                        v-model="item.price"
                                        @onkeyup="checkInput(this)"
                                        @input="changePrice(item.price, index)" />
                                </view>
                                <view class="commodityFrom_body_content_item_tips">
                                    <image src="@/static/ic_img@2x.png" mode="widthFix" @click="openImg(index)"></image>
                                    <image src="@/static/ic_copy@2x.png" mode="widthFix" @click="copyItem(item)"></image>
                                    <image src="@/static/ic_delete@2x.png" mode="widthFix" @click="deleItem(index)"></image>
                                </view>
                            </view>
                        </view>
                        <view class="commodityFrom_body_total">
                            <view class="commodityFrom_body_total_item">总计：</view>
                            <view class="commodityFrom_body_total_item">
                                {{simplifyNum(zdj)}}
                            </view>
                            <view class="commodityFrom_body_total_item">
                                {{simplifyNum(totalPrices)}}
                            </view>
                        </view>
                    </view>
                </view>
                <view class="productCategory">
                <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"
                    :key="index"
                    @click="clickItem(index, item.id, item.name)">
                        <image :src="item.imgurl ? item.prefixUrl + item.imgurl : ''" mode="widthFix"></image>
                        <text>{{item.name}}</text>
                    </view>
                    <view class="productCategory_list_zw"></view>
                    <view class="productCategory_list_zw"></view>
                    <view class="productCategory_list_zw"></view>
                    <view class="productCategory_list_zw"></view>
                    <view class="productCategory_list_zw"></view>
                </view>
            </view>
            </template>
			
            <!-- å•†å“åˆ—表 -->
            <template v-if="status === 1 || status === 2">
                <view class="productPage">
                    <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" :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>
                            </view>
                        </view>
                        <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" :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>
                            </view>
                        </view>
                        <view class="productPage_head_item">
                            <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" :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">
                                        {{item.minamount}}~{{item.maxamount}}
                                    </template>
                                    <template v-else>
                                        {{item.name}}
                                    </template>
                                </view>
                            </view>
                        </view>
                        <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" :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>
                            </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>
                            <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>
                            </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>
                            </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>
                            <view class="productPage_pk_shop_sp1" @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>
                            </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>
                            </view>
                        </view>
                    </view>
                    <view class="productPage_shop" v-if="status === 1 && !pkcontent">
                        <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>
                            <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">
                                {{stringOperations(item.name, 11)}}
                            </view>
                            <view class="productPage_parameter_item_content">
                                <view class="productPage_parameter_item_content_price">
                                    <view class="zdj">
                                        <text>指导价：</text>
                                        <text>Â¥{{item.zdPrice}}</text>
                                    </view>
                                    <view class="rsj">
                                        <text>建议入手价：</text>
                                        <text>Â¥{{item.price}}</text>
                                    </view>
                                </view>
                                <view class="productPage_parameter_item_content_nr">
                                    <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>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </template>
			
            <!-- æŸ¥çœ‹å¤§å›¾ -->
            <bigImg
                ref="bigImg"
                :imgList="imgList"/>
				
            <!-- æœç´¢ -->
            <search
                ref="search"
                :categoryList="category"
                :shopList="shopData"
                :categoryid="categoryId"
                :status="status"
                :categoryName="categoryName"
                @result="result" />
            <!-- æœç´¢å•†å“åˆ—表标题 -->
            <searchShopList
                ref="searchShopListRef"
                @getTitle="getVal"
             />
        </view>
    </view>
</template>

<script>
    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 { mapState } from 'vuex'
    export default {
        data() {
            return {
                status: 0,    // 0首页 1商品列表 2pk页
				
                img: '',
				
                opacity: 1,
                zIndex: 2,
				
                index: '',
				
                val: '',
				
                isPK: false,
                pkcontent: false,
				
                imgList: [],  // æŸ¥çœ‹å›¾ç‰‡æ•°æ®é›†åˆ
                i: 0,
				
                categoryId: '',    // ç±»åˆ«id
                categoryName: '',    // ç±»åˆ«åç§°
                category: [],    // ç±»åˆ«æ•°æ®
                shopList: [],    // é¦–页已选商品
                shopData: [],    // å•†å“æ•°æ®
                brandData: [],    // å“ç‰Œæ•°æ®
                brandData1: [],        // å•†å“åˆ—表页查询搜索
				
                attrFirstName: '',
                attrSecondName: '',
                attrFirstList: [],    // å±žæ€§1
                attrSecondList: [],    // å±žæ€§2
                budgetList: [],    // é¢„ç®—
                isSOU: false,
                shopPageData: [],    // å•†å“åˆ—表页面数据
                shopPageDataSou: [],    // å•†å“åˆ—表页面搜索数据
                attributeOne: {        // å•†å“é¡µé¢å±žæ€§ä¸€
                    id: '',
                    name: ''
                },
                attributeTwo: {        // å•†å“é¡µé¢å±žæ€§äºŒ
                    id: '',
                    name: ''
                },
                budget: {        // å•†å“é¡µé¢é¢„ç®—
                    id: '',
                    max: '',
                    min: '',
                    type: ''
                },
                shopPageBrand: {        // å•†å“é¡µé¢å“ç‰Œ
                    id: '',
                    name: ''
                },
				
                leftShop: {},    // pk左侧商品
                rightShop: {},    // pk右侧商品
				
                totalPrices: 0,
                zdj: 0,
				
                select: [],    // å·²é€‰
                configuration: null,
                bgImg: '',
                topImg: '',
                pkImg: '',
				
                title: ''
            }
        },
        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(ctrlKey && keyCode == 70) {
                    if (that.status !== 1) {
                        that.$refs.search.open()
                    } else {
                        that.$refs.searchShopListRef.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;
                }
            }
            this.getCategoryList()
            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;
								 
                    //获取元素的left，top值
                    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;
								 
                        //移动的数值与元素的left，top相加，得出元素的移动的距离
                        var lt = y + t;
                        var ls = x + l;
						
                        let num = start - ev.pageY
                        if (num < -100) {
                            that.isPK = true
                        } else if (num > 100) {
                            that.leftShop = {}
                            that.rightShop = {}
                            that.isPK = false
                        }
                    }
                    //清除
                    document.onmouseup = function(ev){
                        document.onmousemove = null;
                    }
					
                }
            }
        },
        computed: {
            // æŒ‡å¯¼ä»·æ€»è®¡
            zdTotalPrice() {
                let num = 0
                this.shopList.forEach(item => {
                    num = num + Number(item.zdPrice)
                })
                return num || 0
            },
            // å…¥æ‰‹ä»·
            totalPrice() {
                let num = 0
                this.shopList.forEach(item => {
                    num = num + Number(item.price)
                })
                return num || 0
            },
            ...mapState(['Cookies', 'Config', 'User'])
        },
        watch: {
            status: {
                handler(news, old) {
                    if (news === 0) {
                        this.categoryName = ''
                    }
                }
            },
            shopList: {
                deep: true,
                handler(news, old) {
                    let rsj = 0
                    let zdj = 0
                    this.shopList.forEach(item => {
                        rsj = rsj + Number(item.price)
                        zdj = zdj + Number(item.zdPrice)
                    })
                    this.totalPrices = rsj
                    this.zdj = zdj
                }
            }
        },
        methods: {
            // èŽ·å–搜索的标题
            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) == '.') {
                _this.value = 0
              }
              if (_this.value == '') {
                _this.value = 0
              }
              _this.value = _this.value.replace(/^0*(0\.|[1-9])/, '$1') // ç¦æ­¢ç²˜è´´
              _this.value = _this.value.replace(/[^\d.]/g, '0.00') // ç¦æ­¢è¾“入非数字
              _this.value = _this.value.replace(/\.{2,}/g, '.') // åªä¿ç•™ç¬¬ä¸€ä¸ª. æ¸…除多余的
              _this.value = _this.value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
              _this.value = _this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3') // åªèƒ½è¾“入两个小数

              if (_this.value.indexOf('.') < 0 && _this.value != '') {
                // ä»¥ä¸Šå·²ç»è¿‡æ»¤ï¼Œæ­¤å¤„控制的是如果没有小数点，首位不能为类似于 01、02的金额
                if (_this.value.substr(0, 1) == '0' && _this.value.length == 2) {
                  _this.value = _this.value.substr(1, _this.value.length)
                }
              }
              if (!_this.value) {
                _this.value = 0
              }
            },
            changePrice(price, index) {
                if (price.indexOf('-') !== -1) {
                    this.shopList[index].price = ''
                    return
                }
                // if (!/^\d[0,9]$/.test(price)) {
                //     this.shopList[index].price = JSON.parse(JSON.stringify(price.replace(/-/g, '')))
                //     return
                // }
                let rsj = 0
                this.shopList.forEach(item => {
                    rsj = rsj + Number(item.price)
                })
                this.totalPrices = rsj
            },
            simplifyNum(number) {
                if (!number && number != 0) return number;
                let test = number.toFixed(0)
                if(test.length >= 7){
                    const moneys = number / 10000
                    const realVal = parseFloat(moneys).toFixed(0);
                    return realVal + "w"
                } else {
                    return number
                }
            },
            // é€€å‡º
            loginOut() {
                logout({})
                    .then(res => {
                        this.$store.commit('clean')
                        uni.redirectTo({ url: '/pages/login/login' });
                    })
            },
            // èŽ·å–海报图
            h5Images() {
                h5Image({})
                    .then(res => {
                        this.img = res.data
                    })
            },
            xiaPage() {
                if (this.status === 2 || this.status === 0) return
                this.status = this.status + 1
            },
            // è¿”回上一页
            fanhuiPage() {
                if (this.status === 0) return
                this.status = this.status - 1
                if (this.status === 0) {
                    this.leftShop = {}
                    this.rightShop = {}
                    this.isPK = false,
                    this.pkcontent = false
                    this.attributeOne = {
                        id: '',
                        name: ''
                    },
                    this.attributeTwo = {
                        id: '',
                        name: ''
                    },
                    this.budget = {
                        id: '',
                        max: '',
                        min: ''
                    }
                    this.shopPageBrand = {
                        id: '',
                        name: ''
                    }
                } else if (this.status === 1) {
                    this.leftShop = {}
                    this.rightShop = {}
                    this.isPK = false,
                    this.pkcontent = false
                }
            },
            // ç‚¹å‡»åž‹å·
            clickXH(item, index) {
                let obj = JSON.parse(JSON.stringify(this.shopList[index]))
                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.xhShow = false
                this.shopList.splice(index, 1)
                this.shopList[index] = JSON.parse(JSON.stringify(obj))
                this.$forceUpdate()
            },
            // ç‚¹å‡»pk商品带回首页
            clickPKshop(item) {
                this.shopList.push(item)
                this.status = 0
                this.isPK = false
                this.pkcontent = false
                this.leftShop = {}
                this.rightShop = {}
            },
            // æŸ¥çœ‹å¤§å›¾
            openImg(i) {
                this.imgList = []
                this.shopList.forEach((item, index) => {
                    if (index === i) {
                        item.multifileList.forEach(child => {
                            this.imgList.push(item.prefixUrl + child.fileurl)
                        })
                    }
                })
                this.$refs.bigImg.open(i)
            },
            // è·³è½¬pk
            jumpPK() {
                if (JSON.stringify(this.leftShop) !== '{}' && JSON.stringify(this.rightShop) !== '{}') {
                    this.isPK = true
                    this.pkcontent = true
                    this.status = 2
                }
            },
            // ç‚¹å‡»åŠ å…¥pk商品
            openSearch(type) {
                if (type === 'left') {
                    this.$refs.search.open('left')
                } else if (type === 'right') {
                    this.$refs.search.open('right')
                }
            },
            // ç‚¹å‡»å•†å“åˆ—表页面查询
            clickShopPageCheck(item, type) {
                this.leftShop = {}
                this.rightShop = {}
                this.isSOU = true
                this.shopPageDataSou = []
                if (type === 1) {
                    this.attributeOne.name = item.name  === '全部' ? '' : item.name
                    this.attributeOne.id = item.id
                } else if (type === 2) {
                    this.attributeTwo.name = item.name === '全部' ? '' : item.name
                    this.attributeTwo.id = item.id
                } else if (type === 3) {
                    this.budget.id = item.id
                    this.budget.max = item.maxamount
                    this.budget.min = item.minamount
                    this.budget.type = item.type
                    if (item.name) {
                        this.budget.name = item.name
                    }
                } else if (type === 4) {
                    this.shopPageBrand.id = item.id
                    this.shopPageBrand.name = item.name === '全部' ? '' : item.name
                }
                this.isPK = false
                this.pkcontent = false
                this.status = 1
                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)
                    }
                })
            },
            // ç‚¹å‡»å•†å“åˆ—表页面商品
            clickshoppageItem(item) {
                this.shopList.push(item)
                this.attrFirstList = []
                this.attrSecondList = []
                this.budgetList = []
                this.status = 0
                this.isPK = false
                this.pkcontent = false
            },
            // èŽ·å–搜索结果
            getSelectShop(categoryId, brandId) {
                this.select = []
                this.shopData.forEach(item => {
                    if (item.categoryId === categoryId && item.brandId === brandId) {
                        this.select.push(JSON.parse(JSON.stringify(item)))
                    }
                })
            },
            // é€‰æ‹©å“ç‰Œ
            clickBrand(item, val, index) {
                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].ppShow = false
                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: '' })
                    })
            },
            // èŽ·å–选中商品
            result(val) {
                val.ppShow = false
                val.xhShow = false
                if (this.$refs.search.typeName === 'left') {
                    this.leftShop = JSON.parse(JSON.stringify(val))
                } else if (this.$refs.search.typeName === 'right') {
                    this.rightShop = JSON.parse(JSON.stringify(val))
                } else {
                    this.shopList.push(JSON.parse(JSON.stringify(val)))
                }
            },
            // èŽ·å–全部商品
            getGoodsList() {
                goodsList({})
                    .then(res => {
                        this.shopData = res.data
                    })
            },
            // èŽ·å–全部品类
            getCategoryList() {
                categoryList({})
                    .then(res => {
                        res.data.forEach(item => {
                            item.active = false
                        })
                        this.category = res.data
                    })
            },
            stringOperations(val, num) {
                if (!val) return
                if (val.length <= num) return val
                return val.substring(0, num) + '...'
            },
            copyItem(item) {
                let obj = JSON.parse(JSON.stringify(item))
                obj.brandId = ''
                obj.brand = ''
                obj.brandName = ''
                obj.name = ''
                obj.zdPrice = ''
                obj.price = ''
                this.shopList.push(obj)
            },
            deleItem(i) {
                this.shopList.splice(i, 1)
            },
            // é¦–页已选列表品牌下拉
            open(index, type) {
                this.shopList.forEach((item, i) => {
                    item.ppShow = false
                    item.xhShow = false
                })
                this.shopList.forEach((item, i) => {
                    if (i === index) {
                        if (type === 1) {
                            item.ppShow = true
                        } else {
                            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)))
                                }
                            })
                            this.shopList[index].xhData = arr;
                            item.xhShow = true
                        }
                    }
                })
                this.$forceUpdate()
            },
            // ç‚¹å‡»ç±»åˆ«
            clickItem(index, id, name) {
                this.categoryId = id
                this.categoryName = name
                this.isSOU = false
                this.title = ''
                this.category.forEach((item, num) => {
                    if (index === num) {
                        item.active = true
						
                        this.attrSecondList = []
                        this.attrFirstList = []
                        this.budgetList = []
						
                        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: '' })
                        // this.budgetList = JSON.parse(JSON.stringify(item.budgetList))
                        let arr = []
                        item.budgetList.forEach(item => {
                            // æ²¡æœ‰æœ€å°é‡‘额
                            if (!item.minamount) {
                                arr.push({
                                    id: JSON.parse(JSON.stringify(item.id)),
                                    type: 1,
                                    maxamount: JSON.parse(JSON.stringify(item.maxamount)),
                                    minamount: JSON.parse(JSON.stringify(item.minamount)),
                                    name: `${JSON.parse(JSON.stringify(item.maxamount))}以内`
                                })
                            // æ²¡æœ‰æœ€å¤§é‡‘额
                            } else if (!item.maxamount) {
                                arr.push({
                                    id: JSON.parse(JSON.stringify(item.id)),
                                    type: 2,
                                    maxamount: JSON.parse(JSON.stringify(item.maxamount)),
                                    minamount: JSON.parse(JSON.stringify(item.minamount)),
                                    name: `${JSON.parse(JSON.stringify(item.minamount))}以上`
                                })
                            } else {
                                arr.push({
                                    id: JSON.parse(JSON.stringify(item.id)),
                                    type: 3,
                                    maxamount: JSON.parse(JSON.stringify(item.maxamount)),
                                    minamount: JSON.parse(JSON.stringify(item.minamount))
                                })
                            }
                        })
                        arr.unshift({ name: '全部', id: '' })
                        this.budgetList = arr
                    } 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)))
                //     }
                // })
                this.attributeOne = {
                    id: '',
                    name: ''
                },
                this.attributeTwo = {
                    id: '',
                    name: ''
                },
                this.budget = {
                    id: '',
                    max: '',
                    min: ''
                },
                this.shopPageBrand = {
                    id: '',
                    name: ''
                },
                this.status = 1
            },
            mousemove(e) {
                if (e === this.index) return
                this.index = e
            }
        }
    }
</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;
        justify-content: center;
        .box_bg {
            position: fixed;
            top: 0;
            left: 0;
            z-index: -1;
            width: 100vw;
            height: 100vh;
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        .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: 50px;
                top: 50%;
                cursor: pointer;
                transform: translate(-50%, 0);
                width: 80px;
                height: 80px;
                z-index: 9;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
            .box_content_right {
                position: fixed;
                right: 50px;
                top: 50%;
                cursor: pointer;
                transform: translate(-50%, 0);
                width: 80px;
                height: 80px;
                z-index: 999;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
            .box_content_close {
                position: fixed;
                right: 0;
                bottom: 30px;
                cursor: pointer;
                transform: translate(-50%, 0);
                width: 80px;
                height: 80px;
                border-radius: 50%;
                background-color: rgba(0, 0, 0, 0.40);
                color: #FFFFFF;
                font-size: 16px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .advertisement {
                width: 100%;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
            .commodityFrom {
                width: 100%;
                padding: 0 22px;
                box-sizing: border-box;
                margin-top: 16px;
                .commodityFrom_head {
                    width: 100%;
                    height: 60px;
                    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%);
                    border-radius: 8px 8px 0px 0px;
                    display: flex;
                    align-items: center;
                    .commodityFrom_head_item {
                        // flex: 1;
                        width: 126px;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 24px;
                        font-family: SourceHanSansSC-Medium, SourceHanSansSC;
                        font-weight: 500;
                        color: #FFFFFF;
                        margin-right: 6px;
                        &:last-child {
                            margin-right: 0 !important;
                        }
                        &:nth-child(3) {
                            flex: 1 !important;
                        }
                        &:nth-child(4) {
                            width: 100px !important;
                        }
                        &:nth-child(5) {
                            width: 100px !important;
                        }
                    }
                }
                .commodityFrom_body {
                    width: 100%;
                    padding: 10px 8px;
                    box-sizing: border-box;
                    background: rgba(0,224,255,0.3);
                    border-radius: 0 0 8px 8px;
                    display: flex;
                    flex-direction: column;
                    .commodityFrom_body_content {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        .commodityFrom_body_content_item {
                            width: 100%;
                            height: 56px;
                            display: flex;
                            align-items: center;
                            margin-bottom: 6px;
                            position: relative;
                            transition: .5s;
                            &:hover .commodityFrom_body_content_item_tips {
                                transform: translate(100%, 0%);
                                opacity: 1;
                                z-index: 1;
                            }
                            .commodityFrom_body_content_item_tips {
                                transition: .5s;
                                position: absolute;
                                padding: 0 4px;
                                box-sizing: border-box;
                                right: -16px;
                                top: 0;
                                opacity: 0;
                                transform: translate(0%, 0%);
                                z-index: -1;
                                height: 56px;
                                display: flex;
                                align-items: center;
                                background: rgba(0,224,255,0.3);
                                border-radius: 8px;
                                image {
                                    width: 32px;
                                    height: 32px;
                                    cursor: pointer;
                                }
                            }
                            .commodityFrom_body_content_item_num {
                                width: 126px;
                                height: 100%;
                                background: #FFFFFF;
                                border-radius: 8px;
                                margin-right: 6px;
                                font-size: 24px;
                                font-family: PingFangSC-Medium, PingFang SC;
                                font-weight: 500;
                                color: #111111;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                position: relative;
                                &:hover {
                                    .drop-top {
                                        z-index: 5;
                                        opacity: 1;
                                    }
                                }
                                &:nth-child(4) {
                                    width: 100px !important;
                                }
                                &:nth-child(5) {
                                    width: 100px !important;
                                    margin-right: 0 !important;
                                }
                                &:nth-child(2) {
                                    cursor: pointer;
                                }
                                &:nth-child(3) {
                                    cursor: pointer;
                                    flex: 1 !important;
                                }
                                .drop-top {
                                    transition: .5s;
                                    z-index: -2;
                                    opacity: 0;
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    white-space: nowrap;
                                    transform: translate(0, -100%);
                                    padding: 5px 15px;
                                    box-sizing: border-box;
                                    line-height: 50px;
                                    background: rgba(0, 0, 0, 0.8);
                                    border-radius: 10px;
                                    color: #FFFFFF;
                                    font-size: 24px;
                                    font-weight: 500;
                                }
                                .commodityFrom_body_content_item_num_img {
                                    width: 24px;
                                    height: 24px;
                                    margin-right: 4px;
                                    image {
                                        width: 100%;
                                        height: 100%;
                                    }
                                }
                                input {
                                    font-size: 24px;
                                    font-family: PingFangSC-Medium, PingFang SC;
                                    font-weight: 500;
                                    color: #111111;
                                    text-align: center;
                                }
                                .drop-down::-webkit-scrollbar {
                                    width: 6px;
                                    background: rgba(255,255,255,0.5);
                                    border-radius: 4px;
                                }
                                .drop-down::-webkit-scrollbar-thumb {
                                    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
                                    background: rgba(255,255,255,0.8);
                                }
                                .drop-down {
                                    position: absolute;
                                    bottom: 0;
                                    left: 0;
                                    width: 100%;
                                    min-height: 0;
                                    max-height: 260px;
                                    overflow-y: scroll;
                                    overflow-x: hidden;
                                    height: auto;
                                    transform: translate(0%, 100%);
                                    background: linear-gradient(180deg, #518198 0%, #033B58 100%);
                                    box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.19);
                                    border-radius: 0px 0px 8px 8px;
                                    // display: flex;
                                    // flex-direction: column;
                                    transition: .5s;
                                    .drop-down-item {
                                        width: 100%;
                                        height: 52px;
                                        // padding: 0 10px;
                                        // box-sizing: border-box;
                                        // overflow: hidden;
                                        // white-space: nowrap;
                                        // text-overflow: ellipsis;
                                        cursor: pointer;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        font-size: 24px;
                                        font-family: PingFangSC-Regular, PingFang SC;
                                        font-weight: 400;
                                        color: #FFFFFF;
                                        &:hover {
                                            color: #FFF200;
                                        }
                                    }
                                }
                            }
                        }
                    }
                    .commodityFrom_body_total {
                        width: 100%;
                        height: 56px;
                        display: flex;
                        align-items: center;
                        .commodityFrom_body_total_item {
                            width: 100px;
                            height: 100%;
                            background: rgba(255,255,255,0.4);
                            border-radius: 8px;
                            margin-right: 6px;
                            font-size: 24px;
                            font-family: SourceHanSansSC-Bold, SourceHanSansSC;
                            font-weight: bold;
                            color: #FFF200;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            input {
                                font-size: 24px;
                                font-family: SourceHanSansSC-Bold, SourceHanSansSC;
                                font-weight: bold;
                                color: #FFF200;
                                text-align: center;
                            }
                            &:first-child {
                                flex: 1;
                                display: flex;
                                align-items: center;
                                justify-content: flex-end;
                                font-size: 24px;
                                font-family: SourceHanSansSC-Medium, SourceHanSansSC;
                                font-weight: 500;
                                color: #FFFFFF;
                            }
                            &:last-child {
                                margin-right: 0 !important;
                            }
                        }
                    }
                }
            }
            .productCategory {
                width: 100%;
                padding: 0 22px;
                box-sizing: border-box;
                margin-top: 10px;
                .productCategory_list {
                    width: 100%;
                    padding: 10px 20px 0px 20px;
                    box-sizing: border-box;
                    background: rgba(0,224,255,0.18);
                    border-radius: 8px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    margin-bottom: 30px;
                    .productCategory_list_zw {
                        width: 20%;
                        height: 0;
                    }
                    .productCategory_active {
                        background: rgba(255,255,255,0.24) !important;
                        border-radius: 8px !important;
                    }
                    .productCategory_list_item {
                        width: 20%    ;
                        height: 108px;
                        display: flex;
                        transition: .5s;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        margin-bottom: 12px;
                        cursor: pointer;
                        &:hover {
                            background: rgba(255,255,255,0.24) !important;
                            border-radius: 8px !important;
                        }
                        image {
                            width: 52px;
                            height: 52px;
                            margin-bottom: 4px;
                        }
                        text {
                            font-size: 24px;
                            font-family: SourceHanSansSC-Normal, SourceHanSansSC;
                            font-weight: 400;
                            color: #FFFFFF;
                        }
                    }
                }
            }
			
            .productPage {
                width: 100%;
                padding: 0 22px;
                box-sizing: border-box;
                margin-top: 16px;
                .productPage_head {
                    width: 100%;
                    height: 60px;
                    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%);
                    border-radius: 8px 8px 0px 0px;
                    .productPage_head_item {
                        flex: 1;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        cursor: pointer;
                        position: relative;
                        &:hover {
                            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);
                        }
                        &:hover .productPage_xl {
                            transform: translate(0%, 100%);
                            display: block;
                            animation: move 0.5s 0s;
                        }
                        @keyframes move {
                            0%{
                                opacity: 0;
                            }
                            100%{
                                opacity: 1;
                            }
                        }
                        .productPage_xl::-webkit-scrollbar {
                            width: 6px;
                            background: rgba(255,255,255,0.5);
                            border-radius: 4px;
                        }
                        .productPage_xl::-webkit-scrollbar-thumb {
                            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
                            background: rgba(255,255,255,0.8);
                        }
                        .productPage_xl {
                            transition: .3s;
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            min-height: 0;
                            max-height: 260px;
                            overflow-y: scroll;
                            overflow-x: hidden;
                            height: auto;
                            display: none;
                            z-index: 3;
                            transform: translate(0%, 90%);
                            width: 100%;
                            background: linear-gradient(180deg, #518198 0%, #033B58 100%);
                            box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.19);
                            border-radius: 0px 0px 8px 8px;
                            .productPage_xl_iten {
                                width: 100%;
                                height: 56px;
                                line-height: 56px;
                                text-align: center;
                                cursor: pointer;
                                font-size: 24px;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 400;
                                color: #FFFFFF;
                                &:hover {
                                    color: #FFF200;
                                }
                            }
                        }
                        text {
                            font-size: 24px;
                            font-family: SourceHanSansSC-Regular, SourceHanSansSC;
                            font-weight: 400;
                            color: #FFFFFF;
                        }
                        image {
                            transition: .3s;
                            width: 14px;
                            height: 10px;
                            margin-left: 4px;
                            margin-top: 7px;
                            transform: rotate(0deg);
                        }
                    }
                }
                .productPage_pk {
                    width: 100%;
                    margin-bottom: 32px;
                    display: flex;
                    align-items: center;
                    .productPage_pk_shop {
                        flex: 1;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        flex-direction: column;
                        .productPage_pk_shop_sp {
                            width: 100px;
                            height: 100px;
                            margin-top: 84px;
                            cursor: pointer;
                            margin-bottom: 52px;
                            image {
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .productPage_pk_shop_sp1 {
                            width: 184px;
                            height: 200px;
                            background: linear-gradient(180deg, rgba(225,255,252,0.8) 0%, rgba(179,255,252,0.61) 36%, rgba(0,255,251,0.36) 100%);
                            border-radius: 8px;
                            border: 2px solid #FFFFFF;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            flex-direction: column;
                            margin-bottom: 12px;
                            margin-top: 24px;
                            cursor: pointer;
                            .productPage_pk_shop_sp1_img {
                                width: 100px;
                                height: 100px;
                                image {
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                            text {
                                font-size: 24px;
                                font-family: SourceHanSansSC-Medium, SourceHanSansSC;
                                font-weight: 500;
                                color: #FFFFFF;
                                margin-top: 18px;
                            }
                        }
                        .productPage_pk_shop_t {
                            width: 254px;
                            height: 76px;
                            image {
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                    .productPage_pk_z {
                        flex-shrink: 0;
                        width: 140px;
                        height: 90px;
                        cursor: pointer;
                        image {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
                .productPage_shop {
                    width: 100%;
                    margin-top: 12px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    .productPage_shop_zw {
                        width: 168px;
                        height: 0;
                    }
                    .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;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        box-sizing: border-box;
                        &: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;
                        }
                        .productPage_shop_item_img {
                            width: 136px;
                            height: 136px;
                            image {
                                width: 100%;
                                height: 100%;
                            }
                        }
                        text {
                            font-size: 24px;
                            font-family: SourceHanSansSC-Normal, SourceHanSansSC;
                            font-weight: 400;
                            color: #FFFFFF;
                            margin-top: 12px;
                        }
                    }
                }
                .productPage_parameter {
                    width: 100%;
                    display: flex;
                    align-items: flex-start;
                    margin-bottom: 30px;
                    .productPage_parameter_item {
                        flex: 1;
                        &: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%);
                            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;
                        }
                        .productPage_parameter_item_content {
                            width: 100%;
                            padding: 14px;
                            box-sizing: border-box;
                            background: rgba(0,224,255,0.3);
                            border-radius: 0px 0px 8px 8px;
                            display: flex;
                            flex-direction: column;
                            .productPage_parameter_item_content_price {
                                padding: 16px 0;
                                box-sizing: border-box;
                                background: #FFFFFF;
                                border-radius: 8px;
                                display: flex;
                                align-items: center;
                                .zdj {
                                    flex: 1;
                                    display: flex;
                                    flex-direction: column;
                                    align-items: flex-start;
                                    justify-content: center;
                                    margin-left: 20px;
                                    text {
                                        &:first-child {
                                            font-size: 24px;
                                            font-family: SourceHanSansSC-Regular, SourceHanSansSC;
                                            font-weight: 400;
                                            color: #333333;
                                        }
                                        &:last-child {
                                            font-size: 26px;
                                            font-family: SourceHanSansSC-Bold, SourceHanSansSC;
                                            font-weight: bold;
                                            color: #222222;
                                            margin-top: 14px;
                                        }
                                    }
                                }
                                .rsj {
                                    flex: 1;
                                    display: flex;
                                    flex-direction: column;
                                    align-items: flex-start;
                                    justify-content: center;
                                    text {
                                        &:first-child {
                                            font-size: 24px;
                                            font-family: SourceHanSansSC-Regular, SourceHanSansSC;
                                            font-weight: 400;
                                            color: #333333;
                                        }
                                        &:last-child {
                                            font-size: 26px;
                                            font-family: SourceHanSansSC-Bold, SourceHanSansSC;
                                            font-weight: bold;
                                            color: #F10000;
                                            margin-top: 14px;
                                        }
                                    }
                                }
                            }
                            .productPage_parameter_item_content_nr {
                                padding: 16px 32px;
                                box-sizing: border-box;
                                background: #FFFFFF;
                                border-radius: 8px;
                                margin-top: 12px;
                                display: flex;
                                flex-direction: column;
                                .item {
                                    display: flex;
                                    align-items: center;
                                    margin-bottom: 28px;
                                    &:last-child {
                                        margin-bottom: 0 !important;
                                    }
                                    .label {
                                        flex-shrink: 0;
                                        font-size: 24px;
                                        font-family: SourceHanSansSC-Normal, SourceHanSansSC;
                                        font-weight: 400;
                                        color: #222222;
                                    }
                                    .value {
                                        flex: 1;
                                        font-size: 24px;
                                        font-family: SourceHanSansSC-Normal, SourceHanSansSC;
                                        font-weight: 400;
                                        color: #222222;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>

 h5/pages/login/login.vue

@@ -51,7 +51,7 @@
                    let result = await getByLogin()
                    this.$store.commit('setConfig', result.data)
                    uni.showToast({ title: '登录成功', icon: 'success', duration: 2000 });
                    uni.redirectTo({ url: '/pages/index/index' });
                    uni.redirectTo({ url: '/pages/index_2/index' });
                })
            }
        }

 h5/static/banner.png

 h5/static/mb.png

 h5/utils/request.js

@@ -18,7 +18,7 @@
        // http://127.0.0.1:10024/   æµ‹è¯•
        // https://yx.ahapp.net/h5_interface/${url}
        uni.request({
            url: `https://yx.ahapp.net/h5_interface/${url}`,
            url: `http://192.168.0.112:10024/${url}`,
            method,
            data,
            header: {