1427 lines
38 KiB
Vue
1427 lines
38 KiB
Vue
<template>
|
||
<view class="page-content">
|
||
|
||
<z-paging ref="paging" :refresher-enabled="false" :auto-clean-list-when-reload="false"
|
||
:auto-scroll-to-top-when-reload="false" v-model="dataList" @query="queryList">
|
||
<!-- <template #top> -->
|
||
|
||
|
||
<IndexCustomNavigationbar :statusBarHeight="statusBarHeight" :windowWidth="windowWidth"
|
||
:navbarHeight="navbarHeight" :title="shopName" :desc="shopDesc" />
|
||
|
||
|
||
<view style="z-index: 10000;position: sticky;" :style="'top:' + (statusBarHeight + navbarHeight) + 'px'">
|
||
<nut-noticebar :text="bulletinTxt" :background="`rgba(251, 248, 220, 1)`"
|
||
:custom-color="`#D9500B`"></nut-noticebar>
|
||
<view>
|
||
<z-tabs :list="tabList" active-color="rgba(233, 100, 67, 1)" @change="tabsChange" />
|
||
</view>
|
||
|
||
<view v-if="tabIndex==0">
|
||
<nut-searchbar placeholder="请输入商品名称" clearable v-model="house_state.search_val"
|
||
input-background="#eee" @search="onSearch" @clear="onClear">
|
||
<template #rightout>
|
||
<nut-button type="primary" @click="onSearch">搜索</nut-button>
|
||
</template>
|
||
</nut-searchbar>
|
||
|
||
<nut-menu title-class="titleClass">
|
||
<!-- 价格排序 -->
|
||
<nut-menu-item :title="house_state.price_sort_name" ref="selectPriceSortRef">
|
||
<view style="display: flex;flex-direction: column;width: 100%;padding: 0px 12px;">
|
||
<view class="degree-inner">
|
||
<view class="degree-item" :class="{active: house_state.price_sort === item.value}"
|
||
v-for="(item,idx) in house_state.price_sort_params" :key="idx"
|
||
@click="selectPriceSort(item)">
|
||
<text>{{item.text}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</nut-menu-item>
|
||
<!-- 价格排序 -->
|
||
<!-- 机型选择 -->
|
||
<nut-menu-item :title="house_state.product_name" ref="selectProductRef">
|
||
<view style="display: flex;flex-direction: column;width: 100%;padding: 0px 0px;">
|
||
<view class="filter-types">
|
||
<view class="filter-type-inner" v-for="(type,idx) in house_state.type_params"
|
||
:key="idx" @click="selectType(type)"
|
||
:class="{active: house_state.type_id == type.type_id}">
|
||
<text>{{type.name}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="tabs-container">
|
||
<scroll-view :show-scrollbar="false" scroll-y class="tabs-inner" enable-flex>
|
||
<view class="tab-inner"
|
||
v-for="(item,idx) in house_state?.drop_down_options[house_state.type_id]?.children"
|
||
:key="idx" @click="selectBrand(item)"
|
||
:class="{'tab-inner-active':item.value == house_state.brand_id}">
|
||
<view class="line"></view>
|
||
<text>{{item.label}}</text>
|
||
</view>
|
||
</scroll-view>
|
||
<scroll-view scroll-y class="tab-pane-inner" enable-flex>
|
||
<view style="display: flex;flex-direction: column;width: 100%;padding: 10rpx;">
|
||
<view class="degree-inner">
|
||
<view class="degree-item" v-for="(item,idx) in productOptions"
|
||
:key="idx"
|
||
:class="{active: house_state.product_ids.includes(item.value)}"
|
||
@click="selectProduct(item)">
|
||
<text>{{item.label}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<view class="product-btns">
|
||
<view class="reset">
|
||
<nut-button plain @click="onResetProduct()" type="default">重置</nut-button>
|
||
</view>
|
||
<view class="confirm">
|
||
<nut-button block @click="onConfirmProduct()" type="primary">确认</nut-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</nut-menu-item>
|
||
<!-- 机型选择 -->
|
||
<!-- 成色选择 -->
|
||
<nut-menu-item :title="house_state.degree_name" ref="selectDegreeRef">
|
||
<view style="display: flex;flex-direction: column;width: 100%;padding: 0px 12px;">
|
||
<view class="degree-inner">
|
||
<view class="degree-item"
|
||
:class="{active: house_state.degree_ids.includes(item.value)}"
|
||
v-for="(item,idx) in house_state.degree_params" :key="idx"
|
||
@click="selectDegree(item)">
|
||
<text>{{item.text}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="degree-btns">
|
||
<view class="reset">
|
||
<nut-button plain @click="onResetDegree()" type="default">重置</nut-button>
|
||
</view>
|
||
<view class="confirm">
|
||
<nut-button block @click="onConfirmDegree()" type="primary">确认</nut-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</nut-menu-item>
|
||
<!-- 成色选择 -->
|
||
</nut-menu>
|
||
</view>
|
||
|
||
|
||
<view v-if="tabIndex==1">
|
||
<nut-searchbar placeholder="请输入商品名称" clearable v-model="state.search_val" input-background="#eee"
|
||
@search="onSearch" @clear="onClear">
|
||
<template #rightout>
|
||
<nut-button type="primary" @click="onSearch">搜索</nut-button>
|
||
</template>
|
||
</nut-searchbar>
|
||
<nut-menu title-class="titleClass">
|
||
<!-- 价格排序 -->
|
||
<nut-menu-item :title="state.price_sort_name" ref="selectPriceSortRef">
|
||
<view style="display: flex;flex-direction: column;width: 100%;padding: 0px 12px;">
|
||
<view class="degree-inner">
|
||
<view class="degree-item" :class="{active: state.price_sort === item.value}"
|
||
v-for="(item,idx) in state.price_sort_params" :key="idx"
|
||
@click="selectPriceSort(item)">
|
||
<text>{{item.text}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</nut-menu-item>
|
||
<!-- 价格排序 -->
|
||
<!-- 机型选择 -->
|
||
<nut-menu-item :title="state.product_name" ref="selectProductRef">
|
||
<view style="display: flex;flex-direction: column;width: 100%;padding: 0px 0px;">
|
||
<view class="filter-types">
|
||
<view class="filter-type-inner" v-for="(type,idx) in state.type_params" :key="idx"
|
||
@click="selectType(type)" :class="{active: state.type_id == type.type_id}">
|
||
<text>{{type.name}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="tabs-container">
|
||
<scroll-view :show-scrollbar="false" scroll-y class="tabs-inner" enable-flex>
|
||
<view class="tab-inner"
|
||
v-for="(item,idx) in state?.drop_down_options[state.type_id]?.children"
|
||
:key="idx" @click="selectBrand(item)"
|
||
:class="{'tab-inner-active':item.value == state.brand_id}">
|
||
<view class="line"></view>
|
||
<text>{{item.label}}</text>
|
||
</view>
|
||
</scroll-view>
|
||
<scroll-view scroll-y class="tab-pane-inner" enable-flex>
|
||
<view style="display: flex;flex-direction: column;width: 100%;padding: 10rpx;">
|
||
<view class="degree-inner">
|
||
<view class="degree-item" v-for="(item,idx) in productOptions"
|
||
:key="idx" :class="{active: state.product_ids.includes(item.value)}"
|
||
@click="selectProduct(item)">
|
||
<text>{{item.label}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<view class="product-btns">
|
||
<view class="reset">
|
||
<nut-button plain @click="onResetProduct()" type="default">重置</nut-button>
|
||
</view>
|
||
<view class="confirm">
|
||
<nut-button block @click="onConfirmProduct()" type="primary">确认</nut-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</nut-menu-item>
|
||
<!-- 机型选择 -->
|
||
<!-- 成色选择 -->
|
||
<nut-menu-item :title="state.degree_name" ref="selectDegreeRef">
|
||
<view style="display: flex;flex-direction: column;width: 100%;padding: 0px 12px;">
|
||
<view class="degree-inner">
|
||
<view class="degree-item" :class="{active: state.degree_ids.includes(item.value)}"
|
||
v-for="(item,idx) in state.degree_params" :key="idx"
|
||
@click="selectDegree(item)">
|
||
<text>{{item.text}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="degree-btns">
|
||
<view class="reset">
|
||
<nut-button plain @click="onResetDegree()" type="default">重置</nut-button>
|
||
</view>
|
||
<view class="confirm">
|
||
<nut-button block @click="onConfirmDegree()" type="primary">确认</nut-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</nut-menu-item>
|
||
<!-- 成色选择 -->
|
||
</nut-menu>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<view class="goods-item" v-for="(item, index) in dataList" :key="index" v-if="tabIndex==0">
|
||
<view class="goods-item-image" @click="navigateTo('/pages/mall/houseDetail?id=' + item.goods_id)">
|
||
<image class="goods-item-image-img" :src="getImg(item)" mode="scaleToFill">
|
||
</image>
|
||
</view>
|
||
<view class="goods-item-content">
|
||
<view class="goods-item-content-header"
|
||
@click="navigateTo('/pages/mall/houseDetail?id=' + item.goods_id)">
|
||
<nut-tag custom-color="#1a1a1a">{{ item?.goods_house?.degree?.degree_name }}</nut-tag>
|
||
<!-- <nut-ellipsis :content="item.goods_house.goods_name" direction="end" rows="1" />-->
|
||
<view>{{item?.goods_house?.goods_name}}</view>
|
||
</view>
|
||
<view class="goods-item-content-body"
|
||
@click="navigateTo('/pages/mall/houseDetail?id=' + item.goods_id)">
|
||
<view class="goods-item-content-body-desc">
|
||
{{item?.goods_house?.content}}
|
||
<!-- <nut-ellipsis :content="item.goods_house.content" direction="end" rows="1" /> -->
|
||
</view>
|
||
</view>
|
||
|
||
<view class="goods-item-content-footer">
|
||
<!-- <nut-price :price="item?.goods_house?.goods_price" /> -->
|
||
<nut-price :price="getPrice(item)" />
|
||
|
||
<view class="goods-item-content-footer-btn" v-if="!audit">
|
||
<!-- <nut-button size="small" type="primary" v-if="!goods_cart_ids.includes(item.goods_id)"
|
||
@click="addGoodsCart(item.goods_id)">立即购买</nut-button> -->
|
||
<nut-button size="small" plain v-if="goods_cart_ids.includes(item.goods_id)">已锁定</nut-button>
|
||
<button class="share-btn" open-type="share" size="small" :data-goods="item"
|
||
plain>分享</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="goods-item" v-for="(item, index) in dataList" :key="index" v-else="tabIndex==1">
|
||
<view class="goods-item-image" @click="navigateTo('/pages/mall/detail?id=' + item.goods_id)">
|
||
<image class="goods-item-image-img" :src="getImg(item)" mode="scaleToFill">
|
||
</image>
|
||
</view>
|
||
<view class="goods-item-content">
|
||
<view class="goods-item-content-header"
|
||
@click="navigateTo('/pages/mall/detail?id=' + item.goods_id)">
|
||
<nut-tag custom-color="#1a1a1a">{{ item?.degree?.degree_name }}</nut-tag>
|
||
<!-- <nut-ellipsis :content="item.goods_house.goods_name" direction="end" rows="1" />-->
|
||
<view>{{item.goods_name}}</view>
|
||
</view>
|
||
<view class="goods-item-content-body" @click="navigateTo('/pages/mall/detail?id=' + item.goods_id)">
|
||
<view class="goods-item-content-body-desc">
|
||
{{item.content}}
|
||
<!-- <nut-ellipsis :content="item.goods_house.content" direction="end" rows="1" /> -->
|
||
</view>
|
||
</view>
|
||
|
||
<view class="goods-item-content-footer">
|
||
<nut-price :price="item.goods_price" />
|
||
<view class="goods-item-content-footer-btn" v-if="!audit">
|
||
<!-- <nut-button size="small" type="primary"
|
||
@click="navigateTo('/pages/order/preview?ids=' + item.goods_id+'&from=list')">立即购买</nut-button> -->
|
||
<button class="share-btn" open-type="share" size="small" :data-goods="item"
|
||
plain>分享</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
</z-paging>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import IndexCustomNavigationbar from '@/components/index-custom-navigationbar/index.vue';
|
||
import {
|
||
ref,
|
||
reactive,
|
||
onMounted,
|
||
computed
|
||
} from 'vue'
|
||
|
||
|
||
import {
|
||
onLoad,
|
||
onShow,
|
||
onShareAppMessage
|
||
} from '@dcloudio/uni-app'
|
||
|
||
|
||
import {
|
||
houseFetchGoodsList,
|
||
houseFetchFilterParmas,
|
||
fetchAddCart,
|
||
} from '@/api/house_goods';
|
||
import {
|
||
fetchFilterParmas,
|
||
fetchGoodsList,
|
||
} from '@/api/goods';
|
||
|
||
|
||
import {
|
||
fetchGetConfig,
|
||
fetchGetPriceRules,
|
||
} from '@/api/config';
|
||
|
||
import {
|
||
navigateTo,
|
||
switchTab,
|
||
goToOtherMiniProgram
|
||
} from '@/utils/helper';
|
||
|
||
|
||
|
||
|
||
const statusBarHeight = uni.getWindowInfo().statusBarHeight;
|
||
const windowWidth = uni.getWindowInfo().windowWidth;
|
||
const menu_top = ref(0);
|
||
const menu_bottom = ref(0);
|
||
// #ifdef MP
|
||
const menu_button_info = uni.getMenuButtonBoundingClientRect();
|
||
menu_top.value = menu_button_info.top;
|
||
menu_bottom.value = menu_button_info.bottom;
|
||
// #endif
|
||
const navbarHeight = menu_bottom.value - statusBarHeight + (menu_top.value - statusBarHeight);
|
||
|
||
|
||
// 获取图片
|
||
const getImg = (goods) => {
|
||
console.log("====>tabIndex", tabIndex.value);
|
||
if (tabIndex.value === 0) {
|
||
const url = goods?.goods_house?.image?.[0]?.file_path
|
||
return url ? url + '?imageView2/1/w/200/h/200' : ''
|
||
} else {
|
||
const url = goods?.image?.[0]?.file_path
|
||
return url ? url + '?imageView2/1/w/200/h/200' : ''
|
||
}
|
||
}
|
||
|
||
|
||
|
||
// 审核模式
|
||
const audit = ref(true);
|
||
|
||
// 店铺名称
|
||
const shopName = ref('')
|
||
// 店铺描述
|
||
const shopDesc = ref('')
|
||
// 公告
|
||
const bulletinTxt = ref('')
|
||
// 是否开启整仓调价
|
||
const isWarehouse = ref(false)
|
||
|
||
|
||
|
||
// 获取配置
|
||
const getConfig = () => {
|
||
fetchGetConfig().then(res => {
|
||
console.log('getConfig=====>', res)
|
||
audit.value = res.appConfig.is_audit == 1
|
||
shopName.value = res.appConfig.shop_name
|
||
shopDesc.value = res.appConfig.shop_desc
|
||
bulletinTxt.value = res.appConfig.bulletin_txt
|
||
isWarehouse.value = res.appConfig.is_warehouse == 1
|
||
})
|
||
}
|
||
|
||
|
||
// 单个商品规则列表
|
||
const singleRule = ref([])
|
||
// 价格区间规则列表
|
||
const rangeRule = ref([])
|
||
// 整仓规则
|
||
const warehouseRule = reactive({
|
||
val: 0,
|
||
val_type: 1,
|
||
})
|
||
|
||
|
||
// 获取全部调价规则
|
||
const GetPriceRules = () => {
|
||
fetchGetPriceRules().then(res => {
|
||
console.log('res', res);
|
||
// 区间调价
|
||
rangeRule.value = res?.range ?? [];
|
||
// 单机调价
|
||
singleRule.value = res?.single ?? [];
|
||
// 整仓调价
|
||
Object.assign(warehouseRule, res?.warehouse?.[0] ?? {
|
||
val: 0,
|
||
val_type: 1,
|
||
})
|
||
})
|
||
}
|
||
|
||
|
||
|
||
// 获取价格
|
||
const getPrice = (goods) => {
|
||
// 判断是否开启整仓调价
|
||
if (isWarehouse.value) {
|
||
console.log("开启整仓调价");
|
||
// 查找单机器加价规则
|
||
const list = singleRule.value || singleRule; // 兼容 ref 和 reactive
|
||
// 根据 product_id == goods_id 找对应规则
|
||
const rule = list.find(item => item.product_id === goods.goods_id);
|
||
if (rule) {
|
||
// 存在单机加价规则
|
||
const basePrice = Number(goods.goods_price);
|
||
const val = Number(rule.val);
|
||
let finalPrice = basePrice;
|
||
// val_type 处理
|
||
if (rule.val_type == 1) {
|
||
finalPrice = basePrice + val; // 固定加价
|
||
} else if (rule.val_type == 2) {
|
||
finalPrice = basePrice + (basePrice * val / 100); // 按百分比加
|
||
}
|
||
return finalPrice.toFixed(2); // 保留两位小数
|
||
} else {
|
||
// 不存在则使用整仓加价
|
||
const basePrice = Number(goods.goods_price);
|
||
const val = Number(warehouseRule.val);
|
||
let finalPrice = basePrice;
|
||
// val_type 处理
|
||
if (warehouseRule.val_type == 1) {
|
||
finalPrice = basePrice + val; // 固定加价
|
||
} else if (warehouseRule.val_type == 2) {
|
||
finalPrice = basePrice + (basePrice * val / 100); // 按百分比加
|
||
}
|
||
return finalPrice.toFixed(2); // 保留两位小数
|
||
}
|
||
} else {
|
||
console.log("未开启整仓调价");
|
||
// 查找单机器加价规则
|
||
const singleRuleList = singleRule.value || singleRule; // 兼容 ref 和 reactive
|
||
// 根据 product_id == goods_id 找对应规则
|
||
const oneRule = singleRuleList.find(item => item.product_id === goods.goods_id);
|
||
if (oneRule) {
|
||
// 存在单机加价规则
|
||
const basePrice = Number(goods.goods_price);
|
||
const val = Number(oneRule.val);
|
||
let finalPrice = basePrice;
|
||
// val_type 处理
|
||
if (oneRule.val_type == 1) {
|
||
finalPrice = basePrice + val; // 固定加价
|
||
} else if (oneRule.val_type == 2) {
|
||
finalPrice = basePrice + (basePrice * val / 100); // 按百分比加
|
||
}
|
||
return finalPrice.toFixed(2); // 保留两位小数
|
||
} else {
|
||
// 不存在则使用区间加价
|
||
const basePrice = Number(goods.goods_price)
|
||
// // 查找区间加价规则
|
||
const rangeRulelist = rangeRule.value || rangeRule; // 兼容 ref 和 reactive
|
||
const quRule = rangeRulelist.find(item => {
|
||
const min = Number(item.min_price)
|
||
const max = Number(item.max_price)
|
||
return basePrice >= min && basePrice < max
|
||
}) || null
|
||
if (quRule) {
|
||
// 存在区间加价
|
||
const val = Number(quRule.val);
|
||
let finalPrice = basePrice;
|
||
// val_type 处理
|
||
if (quRule.val_type == 1) {
|
||
finalPrice = basePrice + val; // 固定加价
|
||
} else if (quRule.val_type == 2) {
|
||
finalPrice = basePrice + (basePrice * val / 100); // 按百分比加
|
||
}
|
||
return finalPrice.toFixed(2); // 保留两位小数
|
||
} else {
|
||
// 不存在区间加价
|
||
return basePrice
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
// TAB 选项
|
||
const tabList = ref(['仓库现货', '店内现货'])
|
||
const tabIndex = ref(0)
|
||
|
||
|
||
// 切换tab
|
||
const tabsChange = (index) => {
|
||
tabIndex.value = index;
|
||
console.log(tabIndex.value);
|
||
// 切换tab 重置选中
|
||
console.log("切换tab 重置选中排序");
|
||
console.log("切换tab 重置选中产品");
|
||
console.log("切换tab 重置选中成色");
|
||
if (tabIndex.value === 0) {
|
||
|
||
|
||
|
||
dataList.value = []
|
||
|
||
house_state.price_sort_name = '默认排序'
|
||
house_state.price_sort = ''
|
||
|
||
house_state.type_id = 1
|
||
house_state.type_name = '手机'
|
||
house_state.brand_id = 0
|
||
house_state.brand_name = '全部'
|
||
house_state.product_ids = [0]
|
||
house_state.product_name = '机型'
|
||
|
||
house_state.degree_ids = [];
|
||
house_state.degree_name = '成色'
|
||
} else {
|
||
dataList.value = []
|
||
|
||
state.price_sort_name = '默认排序'
|
||
state.price_sort = ''
|
||
|
||
state.type_id = 1
|
||
state.type_name = '手机'
|
||
state.brand_id = 0
|
||
state.brand_name = '全部'
|
||
state.product_ids = [0]
|
||
state.product_name = '机型'
|
||
|
||
state.degree_ids = [];
|
||
state.degree_name = '成色'
|
||
}
|
||
paging.value.reload();
|
||
// 当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
|
||
// this.$refs.paging.reload();
|
||
}
|
||
|
||
// const store = reactive({})
|
||
// const store_qr_code = ref([])
|
||
// const store_mini_program_code = ref([])
|
||
|
||
// const showWechatImg = (type) => {
|
||
// let imgs = [];
|
||
// if (type === 'store') {
|
||
// imgs = store_qr_code.value;
|
||
// } else {
|
||
// imgs = parts_qr_code.value;
|
||
// }
|
||
// uni.previewImage({
|
||
// urls: imgs
|
||
// })
|
||
// }
|
||
|
||
// const showMiniProgramImg = (type) => {
|
||
// let imgs = [];
|
||
// if (type === 'store') {
|
||
// imgs = store_mini_program_code.value;
|
||
// } else {
|
||
// imgs = store_mini_program_code.value;
|
||
// }
|
||
// console.log(imgs);
|
||
// if (imgs.length === 0) {
|
||
// uni.showToast({
|
||
// title: '暂无图片',
|
||
// icon: 'none'
|
||
// });
|
||
// return;
|
||
// }
|
||
// uni.previewImage({
|
||
// urls: imgs
|
||
// })
|
||
// }
|
||
|
||
|
||
// zp
|
||
const paging = ref(null);
|
||
// 商品列表
|
||
const dataList = ref([]);
|
||
// 用户购物车商品列表
|
||
const user_goods_cart_ids = ref([]);
|
||
// 全部购物车商品列表
|
||
const goods_cart_ids = ref([]);
|
||
|
||
// 价格排序
|
||
const selectPriceSortRef = ref(null);
|
||
// 成色选择
|
||
const selectDegreeRef = ref(null);
|
||
// 机型选择
|
||
const selectProductRef = ref(null)
|
||
|
||
|
||
// 仓库筛选
|
||
const house_state = reactive({
|
||
type_params: [], // 产品类型
|
||
drop_down_options: [], // 产品类型下的品牌列表
|
||
o_drop_down_options: [],
|
||
// 价格排序
|
||
price_sort_params: [{
|
||
text: '默认排序',
|
||
value: ''
|
||
},
|
||
{
|
||
text: '价格升序',
|
||
value: 'ascend'
|
||
},
|
||
{
|
||
text: '价格降序',
|
||
value: 'descend'
|
||
}
|
||
],
|
||
// 成色所有选项
|
||
degree_params: [],
|
||
price_sort: '',
|
||
price_sort_name: "默认排序",
|
||
degree_ids: [],
|
||
degree_name: "成色",
|
||
product_name: "机型",
|
||
type_id: 1, // 产品类型id 默认 1 手机
|
||
type_name: '手机',
|
||
brand_id: 0, // 品牌id // 默认 0 全部
|
||
brand_name: '全部',
|
||
product_ids: [0], // 机型ids 默认 0 全部
|
||
search_val: '', // 搜索
|
||
});
|
||
|
||
|
||
// 本地筛选
|
||
const state = reactive({
|
||
type_params: [], // 产品类型
|
||
drop_down_options: [], // 产品类型下的品牌列表
|
||
o_drop_down_options: [],
|
||
// 价格排序
|
||
price_sort_params: [{
|
||
text: '默认排序',
|
||
value: ''
|
||
},
|
||
{
|
||
text: '价格升序',
|
||
value: 'ascend'
|
||
},
|
||
{
|
||
text: '价格降序',
|
||
value: 'descend'
|
||
}
|
||
],
|
||
// 成色所有选项
|
||
degree_params: [],
|
||
price_sort: '',
|
||
price_sort_name: "默认排序",
|
||
degree_ids: [],
|
||
degree_name: "成色",
|
||
product_name: "机型",
|
||
type_id: 1, // 产品类型id 默认 1 手机
|
||
type_name: '手机',
|
||
brand_id: 0, // 品牌id // 默认 0 全部
|
||
brand_name: '全部',
|
||
product_ids: [0], // 机型ids 默认 0 全部
|
||
search_val: '', // 搜索
|
||
});
|
||
|
||
|
||
|
||
|
||
|
||
// 加入购物车
|
||
const addGoodsCart = (id) => {
|
||
fetchAddCart(id).then(res => {
|
||
user_goods_cart_ids.value = res.user_cart_goods_ids;
|
||
goods_cart_ids.value = res.cart_goods_ids;
|
||
uni.setTabBarBadge({
|
||
index: 1,
|
||
text: user_goods_cart_ids.value.length.toString()
|
||
})
|
||
})
|
||
}
|
||
// 搜索
|
||
const onSearch = () => {
|
||
console.log("搜索：", state.search_val);
|
||
paging.value.reload();
|
||
|
||
}
|
||
// 清空搜索框
|
||
const onClear = () => {
|
||
console.log("搜索：", state.search_val);
|
||
paging.value.reload();
|
||
}
|
||
|
||
|
||
|
||
// 机型重置
|
||
const onResetProduct = () => {
|
||
console.log("====>tabIndex", tabIndex.value);
|
||
if (tabIndex.value === 0) {
|
||
console.log("重置产品");
|
||
house_state.type_id = 1
|
||
house_state.type_name = '手机'
|
||
house_state.brand_id = 0
|
||
house_state.brand_name = '全部'
|
||
house_state.product_ids = [0]
|
||
house_state.product_name = '机型'
|
||
} else {
|
||
console.log("重置产品");
|
||
state.type_id = 1
|
||
state.type_name = '手机'
|
||
state.brand_id = 0
|
||
state.brand_name = '全部'
|
||
state.product_ids = [0]
|
||
state.product_name = '机型'
|
||
}
|
||
|
||
}
|
||
// 机型确定
|
||
const onConfirmProduct = () => {
|
||
console.log("====>tabIndex", tabIndex.value);
|
||
if (tabIndex.value === 0) {
|
||
console.log("当前仓库产品类型", {
|
||
"type_id": house_state.type_id,
|
||
"type_name": house_state.type_name,
|
||
"brand_id": house_state.brand_id,
|
||
"brand_name": house_state.brand_name,
|
||
"product_ids": house_state.product_ids,
|
||
});
|
||
} else {
|
||
console.log("当前自营产品类型", {
|
||
"type_id": state.type_id,
|
||
"type_name": state.type_name,
|
||
"brand_id": state.brand_id,
|
||
"brand_name": state.brand_name,
|
||
"product_ids": state.product_ids,
|
||
});
|
||
}
|
||
selectProductRef.value?.toggle(false);
|
||
// 4. 刷新数据
|
||
paging.value.reload();
|
||
}
|
||
|
||
|
||
|
||
// 选择机型
|
||
const selectProduct = (product) => {
|
||
console.log("====>tabIndex", tabIndex.value);
|
||
if (tabIndex.value === 0) {
|
||
if (product.value === 0) {
|
||
house_state.product_ids = [0]
|
||
} else {
|
||
house_state.product_ids = house_state.product_ids.filter(e => e != 0)
|
||
// 判断是否存在
|
||
const index = house_state.product_ids.indexOf(product.value);
|
||
if (index > -1) {
|
||
house_state.product_ids.splice(index, 1); // 存在则删除
|
||
if (house_state.product_ids.length === 0) {
|
||
house_state.product_ids = [0]
|
||
}
|
||
} else {
|
||
house_state.product_ids.push(product.value); // 新增
|
||
}
|
||
}
|
||
} else {
|
||
if (product.value === 0) {
|
||
state.product_ids = [0]
|
||
} else {
|
||
state.product_ids = state.product_ids.filter(e => e != 0)
|
||
// 判断是否存在
|
||
const index = state.product_ids.indexOf(product.value);
|
||
if (index > -1) {
|
||
state.product_ids.splice(index, 1); // 存在则删除
|
||
if (state.product_ids.length === 0) {
|
||
state.product_ids = [0]
|
||
}
|
||
} else {
|
||
state.product_ids.push(product.value); // 新增
|
||
}
|
||
}
|
||
}
|
||
console.log(product);
|
||
}
|
||
|
||
const productOptions = computed(() => {
|
||
console.log("====>tabIndex", tabIndex.value);
|
||
if (tabIndex.value === 0) {
|
||
return house_state?.o_drop_down_options[house_state.type_id]?.children[house_state.brand_id].children
|
||
} else {
|
||
return state?.o_drop_down_options[state.type_id]?.children[state.brand_id].children
|
||
}
|
||
})
|
||
|
||
// 选择品牌
|
||
const selectBrand = (brand) => {
|
||
console.log("====>tabIndex", tabIndex.value);
|
||
console.log("====>brand", brand);
|
||
// console.log(brand);
|
||
if (tabIndex.value === 0) {
|
||
// 选中的品牌id
|
||
house_state.brand_id = brand.value;
|
||
house_state.brand_name = brand.label
|
||
// 品牌下的产品ids
|
||
house_state.product_ids = [0];
|
||
house_state.product_name = brand.label
|
||
} else {
|
||
// 选中的品牌id
|
||
state.brand_id = brand.value;
|
||
state.brand_name = brand.label
|
||
// 品牌下的产品ids
|
||
state.product_ids = [0];
|
||
state.product_name = brand.label
|
||
}
|
||
}
|
||
// 选择type
|
||
const selectType = (type) => {
|
||
console.log("====>tabIndex", tabIndex.value);
|
||
console.log("====>type", type);
|
||
if (tabIndex.value === 0) {
|
||
// 选中产品类型id
|
||
house_state.type_id = type.type_id;
|
||
house_state.type_name = type.name;
|
||
// 选中的品牌id
|
||
house_state.brand_id = 0;
|
||
house_state.brand_name = '全部';
|
||
// 品牌下的产品ids
|
||
house_state.product_ids = [0];
|
||
} else {
|
||
// 选中产品类型id
|
||
state.type_id = type.type_id;
|
||
state.type_name = type.name;
|
||
// 选中的品牌id
|
||
state.brand_id = 0;
|
||
state.brand_name = '全部';
|
||
// 品牌下的产品ids
|
||
state.product_ids = [0];
|
||
}
|
||
}
|
||
|
||
// 选择价格排序
|
||
const selectPriceSort = (item) => {
|
||
console.log("====>tabIndex", tabIndex.value);
|
||
if (tabIndex.value === 0) {
|
||
if (house_state.price_sort !== item.value) {
|
||
house_state.price_sort = item.value
|
||
house_state.price_sort_name = item.text
|
||
} else {
|
||
house_state.price_sort_name = '默认排序'
|
||
house_state.price_sort = ''
|
||
}
|
||
} else {
|
||
if (state.price_sort !== item.value) {
|
||
state.price_sort = item.value
|
||
state.price_sort_name = item.text
|
||
} else {
|
||
state.price_sort_name = '默认排序'
|
||
state.price_sort = ''
|
||
}
|
||
}
|
||
selectPriceSortRef.value?.toggle(false);
|
||
// 4. 刷新数据
|
||
paging.value.reload();
|
||
};
|
||
|
||
// 选择成色
|
||
const selectDegree = (item) => {
|
||
console.log("====>tabIndex", tabIndex.value);
|
||
if (tabIndex.value === 0) {
|
||
const index = house_state.degree_ids.indexOf(item.value);
|
||
if (index > -1) {
|
||
house_state.degree_ids.splice(index, 1);
|
||
} else {
|
||
house_state.degree_ids.push(item.value);
|
||
}
|
||
if (house_state.degree_ids.length > 0) {
|
||
house_state.degree_name = '已选' + house_state.degree_ids.length.toString() + '项'
|
||
} else {
|
||
house_state.degree_name = '成色'
|
||
}
|
||
} else {
|
||
const index = state.degree_ids.indexOf(item.value);
|
||
if (index > -1) {
|
||
state.degree_ids.splice(index, 1);
|
||
} else {
|
||
state.degree_ids.push(item.value);
|
||
}
|
||
if (state.degree_ids.length > 0) {
|
||
state.degree_name = '已选' + state.degree_ids.length.toString() + '项'
|
||
} else {
|
||
state.degree_name = '成色'
|
||
}
|
||
}
|
||
}
|
||
|
||
// 重置选择成色
|
||
const onResetDegree = () => {
|
||
console.log("====>tabIndex", tabIndex.value);
|
||
if (tabIndex.value === 0) {
|
||
house_state.degree_ids = [];
|
||
house_state.degree_name = '成色'
|
||
} else {
|
||
state.degree_ids = [];
|
||
state.degree_name = '成色'
|
||
}
|
||
selectDegreeRef.value?.toggle(false);
|
||
// 4. 刷新数据
|
||
paging.value.reload();
|
||
}
|
||
// 确认选择成色
|
||
const onConfirmDegree = () => {
|
||
console.log("====>tabIndex", tabIndex.value);
|
||
if (tabIndex.value === 0) {
|
||
if (house_state.degree_ids.length > 0) {
|
||
house_state.degree_name = '已选' + house_state.degree_ids.length.toString() + '项'
|
||
} else {
|
||
house_state.degree_name = '成色'
|
||
}
|
||
} else {
|
||
if (state.degree_ids.length > 0) {
|
||
state.degree_name = '已选' + state.degree_ids.length.toString() + '项'
|
||
} else {
|
||
state.degree_name = '成色'
|
||
}
|
||
}
|
||
selectDegreeRef.value?.toggle(false);
|
||
// 4. 刷新数据
|
||
paging.value.reload();
|
||
}
|
||
|
||
|
||
// 获取列表
|
||
const queryList = (pageNo, pageSize) => {
|
||
|
||
console.log("====>tabIndex", tabIndex.value);
|
||
if (tabIndex.value === 0) {
|
||
const params = {
|
||
pageSize,
|
||
page: pageNo,
|
||
price_sort: house_state.price_sort,
|
||
degree_ids: house_state.degree_ids,
|
||
type_id: house_state.type_id,
|
||
brand_id: house_state.brand_id,
|
||
product_ids: house_state.product_ids,
|
||
search: house_state.search_val,
|
||
}
|
||
houseFetchGoodsList(params).then(res => {
|
||
console.log(res);
|
||
paging.value.complete(res.list);
|
||
user_goods_cart_ids.value = res.user_cart_goods_ids;
|
||
goods_cart_ids.value = res.cart_goods_ids;
|
||
|
||
|
||
|
||
}).catch(res => {
|
||
paging.value.complete(false);
|
||
user_goods_cart_ids.value = [];
|
||
goods_cart_ids.value = [];
|
||
});
|
||
} else {
|
||
const params = {
|
||
pageSize,
|
||
page: pageNo,
|
||
price_sort: state.price_sort,
|
||
degree_ids: state.degree_ids,
|
||
type_id: state.type_id,
|
||
brand_id: state.brand_id,
|
||
product_ids: state.product_ids,
|
||
search: state.search_val,
|
||
}
|
||
fetchGoodsList(params).then(res => {
|
||
console.log(res);
|
||
paging.value.complete(res.list);
|
||
user_goods_cart_ids.value = res.user_cart_goods_ids;
|
||
goods_cart_ids.value = res.cart_goods_ids;
|
||
|
||
}).catch(res => {
|
||
paging.value.complete(false);
|
||
user_goods_cart_ids.value = [];
|
||
goods_cart_ids.value = [];
|
||
});
|
||
}
|
||
|
||
|
||
};
|
||
|
||
|
||
|
||
// 分享
|
||
onShareAppMessage((obj) => {
|
||
console.log("====>tabIndex", tabIndex.value);
|
||
console.log(obj)
|
||
if (tabIndex.value === 0) {
|
||
if (obj.from == 'button') {
|
||
let goods = obj.target.dataset.goods
|
||
console.log(goods);
|
||
return {
|
||
title: goods.goods_house.goods_name,
|
||
imageUrl: goods.goods_house.image[0].file_path,
|
||
path: '/pages/mall/houseDetail?id=' + goods.goods_id
|
||
}
|
||
}
|
||
} else {
|
||
if (obj.from == 'button') {
|
||
let goods = obj.target.dataset.goods
|
||
console.log(goods);
|
||
return {
|
||
title: goods.goods_name,
|
||
imageUrl: goods.image[0].file_path,
|
||
path: '/pages/mall/detail?id=' + goods.goods_id
|
||
}
|
||
}
|
||
}
|
||
})
|
||
|
||
|
||
const makePhoneCall = (phoneNumber) => {
|
||
console.log(123);
|
||
uni.makePhoneCall({
|
||
phoneNumber: phoneNumber,
|
||
success: () => {
|
||
console.log('拨打电话成功');
|
||
},
|
||
fail: (err) => {
|
||
console.error('拨打电话失败:', err);
|
||
}
|
||
});
|
||
}
|
||
|
||
// onShow(() => {
|
||
|
||
// // fetchGoodsCartList().then(res => {
|
||
// // in_goods_cart_ids.value = res.list.map(e => e.goods_id)
|
||
|
||
// // })
|
||
// })
|
||
|
||
|
||
const init = () => {
|
||
console.log('init');
|
||
// 获取配置
|
||
getConfig()
|
||
|
||
GetPriceRules()
|
||
// fetchConfig().then(res => {
|
||
// console.log('config', res);
|
||
// audit.value = (res.audit === "true");
|
||
// console.log('audit', audit.value);
|
||
|
||
// Object.assign(store, res)
|
||
// store_qr_code.value = [res.qr_code?.url]
|
||
// if (res.go_to_app_code) {
|
||
// store_mini_program_code.value = [res.go_to_app_code]
|
||
// } else {
|
||
// store_mini_program_code.value = []
|
||
// }
|
||
// })
|
||
|
||
// 加载仓库默认筛选项内容
|
||
houseFetchFilterParmas().then(res => {
|
||
console.log('仓库默认筛选项目====>', res);
|
||
// 处理成色
|
||
let degree_params = res.degree_list;
|
||
house_state.degree_params = degree_params.reduce((it, cit) => {
|
||
it.push({
|
||
text: cit.degree_name,
|
||
value: cit.degree_id
|
||
});
|
||
return it;
|
||
}, house_state.degree_params) || [];
|
||
// 产品类型
|
||
house_state.type_params = res.type_list
|
||
// 产品下品牌列表
|
||
house_state.drop_down_options = res.drop_down_options
|
||
house_state.o_drop_down_options = res.o_drop_down_options
|
||
})
|
||
|
||
// 加载本地默认筛选项内容
|
||
fetchFilterParmas().then(res => {
|
||
console.log('本地默认筛选项目====>', res);
|
||
// 处理成色
|
||
let degree_params = res.degree_list;
|
||
state.degree_params = degree_params.reduce((it, cit) => {
|
||
it.push({
|
||
text: cit.degree_name,
|
||
value: cit.degree_id
|
||
});
|
||
return it;
|
||
}, state.degree_params) || [];
|
||
// 产品类型
|
||
state.type_params = res.type_list
|
||
// 产品下品牌列表
|
||
state.drop_down_options = res.drop_down_options
|
||
state.o_drop_down_options = res.o_drop_down_options
|
||
})
|
||
|
||
}
|
||
|
||
onShow(() => {
|
||
console.log("onshow---");
|
||
getConfig()
|
||
GetPriceRules()
|
||
// init();
|
||
console.log('paging.value', paging.value);
|
||
if (paging.value) {
|
||
// paging.value.pageNo = 1;
|
||
paging.value.refresh();
|
||
// paging.value.refreshToPage(1)
|
||
// paging.value.reload();
|
||
}
|
||
|
||
});
|
||
|
||
onMounted(() => {
|
||
init();
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.page-content {
|
||
min-height: 100vh;
|
||
background-color: #f2f3f5;
|
||
--nut-menu-bar-box-shadow: none;
|
||
--nut-menu-item-content-padding: 20rpx;
|
||
--nut-menu-item-content-max-height: 900rpx;
|
||
|
||
|
||
|
||
// --nut-searchbar-input-padding:5px 0 5px 13px;
|
||
--nut-searchbar-input-height: 40px;
|
||
|
||
|
||
// --nut-menu-item-font-size:18px;
|
||
|
||
}
|
||
|
||
:deep(.titleClass) .nut-menu__title-text {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: black;
|
||
}
|
||
|
||
|
||
|
||
.goods-item {
|
||
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx;
|
||
background-color: #ffffff;
|
||
// border-radius: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
gap: 20rpx;
|
||
|
||
.goods-item-image {
|
||
width: 170rpx;
|
||
height: 170rpx;
|
||
|
||
.goods-item-image-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.goods-item-content {
|
||
// width: 100%;
|
||
display: flex;
|
||
flex: 1;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
/* 首尾贴边，中间均分 */
|
||
|
||
// gap: 15px;
|
||
.goods-item-content-header {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 10rpx 0;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.goods-item-content-body {
|
||
padding: 10rpx 0;
|
||
|
||
.goods-item-content-body-desc {
|
||
color: #7c7c7c;
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
|
||
.goods-item-content-footer {
|
||
padding: 10rpx 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
// width: 100%;
|
||
// flex-direction: row;
|
||
|
||
.goods-item-content-footer-btn {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
|
||
.share-btn {
|
||
border-radius: 50rpx;
|
||
border: 2rpx solid red;
|
||
font-size: 26rpx;
|
||
align-items: center;
|
||
height: 54rpx;
|
||
color: red;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.filter-types {
|
||
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
overflow: auto;
|
||
gap: 10rpx;
|
||
padding: 10rpx;
|
||
// position: fixed;
|
||
// top: 0;
|
||
height: 60rpx;
|
||
// z-index: 9999;
|
||
background-color: #fff;
|
||
border-bottom: 2rpx solid gainsboro;
|
||
border-top: 2rpx solid gainsboro;
|
||
|
||
.filter-type-inner {
|
||
align-items: center;
|
||
background-color: rgba(0, 0, 0, .05);
|
||
border-radius: 16rpx;
|
||
box-sizing: border-box;
|
||
display: -webkit-flex;
|
||
display: -ms-flexbox;
|
||
display: flex;
|
||
flex: 0 0 auto;
|
||
font-size: 28rpx;
|
||
gap: 15rpx;
|
||
padding: 10rpx 20rpx;
|
||
|
||
// image {
|
||
// height: 22px;
|
||
// width: 22px;
|
||
// }
|
||
}
|
||
|
||
.filter-type-inner.active {
|
||
background-color: rgba(250, 44, 25, .1);
|
||
color: var(--nutui-color-primary);
|
||
}
|
||
}
|
||
|
||
.tabs-container {
|
||
display: flex;
|
||
|
||
.tab-pane-inner {
|
||
height: 600rpx;
|
||
}
|
||
|
||
.tabs-inner {
|
||
overflow-y: scroll;
|
||
height: 600rpx;
|
||
width: 160rpx;
|
||
background-color: #F5F5F5;
|
||
|
||
.tab-inner {
|
||
display: flex;
|
||
height: 60rpx;
|
||
padding: 10rpx;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
background: #F5F5F5;
|
||
|
||
text {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.tab-inner-active {
|
||
// background: #FFF;
|
||
background-color: rgba(250, 44, 25, .1);
|
||
color: var(--nutui-color-primary);
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.degree-inner {
|
||
display: flex;
|
||
flex: 1;
|
||
flex-wrap: wrap;
|
||
// gap: 20rpx;
|
||
gap: 10rpx;
|
||
// padding: 11px;
|
||
width: 100%;
|
||
margin-bottom: 60rpx;
|
||
}
|
||
|
||
.degree-item {
|
||
align-items: center;
|
||
background-color: rgba(0, 0, 0, .05);
|
||
border-radius: 10rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex: 0 0 auto;
|
||
font-size: 26rpx;
|
||
gap: 10rpx;
|
||
justify-content: center;
|
||
min-height: 80rpx;
|
||
width: calc(50% - 10rpx);
|
||
}
|
||
|
||
.degree-item.active {
|
||
background-color: rgba(250, 44, 25, .1);
|
||
color: var(--nutui-color-primary);
|
||
}
|
||
|
||
.product-btns {
|
||
display: flex;
|
||
width: 100%;
|
||
padding: 20rpx 0;
|
||
|
||
// border-bottom: 2rpx solid gainsboro;
|
||
// border-top: 2rpx solid gainsboro;
|
||
|
||
.reset {
|
||
flex: 1;
|
||
|
||
}
|
||
|
||
.confirm {
|
||
flex: 2;
|
||
|
||
}
|
||
|
||
}
|
||
|
||
.degree-btns {
|
||
display: flex;
|
||
width: 100%;
|
||
|
||
.reset {
|
||
flex: 1;
|
||
/* 重置按钮占 1 份 */
|
||
}
|
||
|
||
.confirm {
|
||
flex: 2;
|
||
/* 确认按钮占 2 份 */
|
||
}
|
||
|
||
}
|
||
|
||
|
||
.main-nav-container {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
background-color: #fff;
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.nav-button {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 45%;
|
||
height: 160rpx;
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
padding: 0 10rpx;
|
||
}
|
||
|
||
.phone-button {
|
||
background: linear-gradient(135deg, #6a5ae0, #8d7bfb);
|
||
color: white;
|
||
}
|
||
|
||
.parts-button {
|
||
background: linear-gradient(135deg, #ff6b6b, #ee5253);
|
||
color: white;
|
||
}
|
||
|
||
.nav-button-bg {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
height: 100%;
|
||
width: 50%;
|
||
opacity: 0.2;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.nav-button-icon {
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
margin-right: 20rpx;
|
||
// border-radius: 20rpx;
|
||
z-index: 2;
|
||
}
|
||
|
||
.nav-button-content {
|
||
z-index: 2;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.nav-button-title {
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.nav-button-desc {
|
||
font-size: 24rpx;
|
||
opacity: 0.85;
|
||
}
|
||
</style> |