283 lines
7.1 KiB
Vue
283 lines
7.1 KiB
Vue
<template>
|
|
<page-meta :page-style="'overflow:'+(is_lock_scroll?'hidden':'visible')"></page-meta>
|
|
|
|
<IndexCustomNavigationbar :statusBarHeight="statusBarHeight" :windowWidth="windowWidth"
|
|
:navbarHeight="navbarHeight" :onIndexPageSearch="onIndexPageSearch" :onIndexPageClear="onIndexPageClear"/>
|
|
<view class="content">
|
|
<view class="index-content-inner"></view>
|
|
<view class="index-class-card-box">
|
|
<view class="index-class-card-body">
|
|
<view class="navbar-list-content">
|
|
<view v-for="(item,idx) in nav_list" :key="idx" class="navbar-item-content"
|
|
@click="navigateTo('/pages/mall/index/index?brand_id='+item.brand_id + '&type_id=' + item.type_id)">
|
|
<image class="navbar-item-content-img" :src='item.image?.file_path'></image>
|
|
<view class="navbar-item-content-name">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="index-kefu-card-box">
|
|
<view class="index-kefu-card-header">
|
|
<text class="index-kefu-card-header-title">远阳数码售后</text>
|
|
<text class="index-kefu-card-header-text">7天内有质量问题可退可换</text>
|
|
<text class="index-kefu-card-header-text">30天内有质量问题只换不修</text>
|
|
</view>
|
|
<view class="index-kefu-card-body">
|
|
<view class="index-kefu-item">
|
|
<view class="index-kefu-item-profile">
|
|
<image class="index-kefu-item-profile-avatar" @click="showWechatImg()" src="/static/wechat.jpg"
|
|
alt="陈汉彬" />
|
|
<view class="index-kefu-item-profile-info">
|
|
<view class="index-kefu-item-profile-info-name-phone">
|
|
<text class="index-kefu-item-profile-info-name-phone-name">陈一鸣</text>
|
|
<text class="index-kefu-item-profile-info-name-phone-phone">13156107870</text>
|
|
</view>
|
|
<view class="index-kefu-item-profile-info-address">山东省济南市天桥区凤凰广场B座803室</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="index-kefu-item">
|
|
<view class="index-kefu-item-profile">
|
|
<image class="index-kefu-item-profile-avatar" @click="showWechatImg()" src="/static/wechat.jpg"
|
|
alt="陈汉阳" />
|
|
<view class="index-kefu-item-profile-info">
|
|
<view class="index-kefu-item-profile-info-name-phone">
|
|
<text class="index-kefu-item-profile-info-name-phone-name">陈一鸣</text>
|
|
<text class="index-kefu-item-profile-info-name-phone-phone">13156107870</text>
|
|
</view>
|
|
<view class="index-kefu-item-profile-info-address">山东省济南市天桥区凤凰广场B座803室</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
<MallFilter :offset-top="topHeight" :is-lock-scroll="isLockScroll" ref="mall_filter" :offset="mall_offset" />
|
|
|
|
<!-- <TabBar v-model="currentTab" /> -->
|
|
</template>
|
|
|
|
<script setup>
|
|
// import TabBar from '@/components/TabBar/TabBar.vue';
|
|
|
|
import {
|
|
nextTick,
|
|
onMounted,
|
|
reactive,
|
|
ref
|
|
} from 'vue'
|
|
import IndexCustomNavigationbar from '@/components/index-custom-navigationbar/index.vue'
|
|
import MallFilter from '@/components/mall-filter/index.vue'
|
|
import {
|
|
fetchFilterParmas,
|
|
fetchNavList
|
|
} from '../../api'
|
|
import {
|
|
navigateTo,
|
|
showWechatImg
|
|
} from '@/utils/helper.ts'
|
|
import {
|
|
onPullDownRefresh,
|
|
onShareAppMessage
|
|
} from '@dcloudio/uni-app'
|
|
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 topHeight = navbarHeight + statusBarHeight + 50
|
|
// const topHeight = navbarHeight + statusBarHeight
|
|
const nav_list = reactive([])
|
|
const mall_filter = ref(null)
|
|
const mall_offset = ref(0)
|
|
|
|
// 默认选中第一个tab
|
|
const currentTab = ref(0);
|
|
|
|
|
|
onMounted(() => {
|
|
mall_offset.value = topHeight + 48
|
|
fetchNavList().then(res => {
|
|
Object.assign(nav_list, res.list)
|
|
})
|
|
})
|
|
onPullDownRefresh(async () => {
|
|
await mall_filter.value?.refresh()
|
|
uni.stopPullDownRefresh()
|
|
})
|
|
|
|
const onIndexPageSearch = (val) => {
|
|
mall_filter.value?.filterGoodsName(val)
|
|
}
|
|
|
|
const onIndexPageClear = () => {
|
|
mall_filter.value?.filterGoodsName('')
|
|
}
|
|
|
|
const is_lock_scroll = ref(false)
|
|
const isLockScroll = (e) => {
|
|
is_lock_scroll.value = e
|
|
/* uni.pageScrollTo({
|
|
scrollTop: uni.getWindowInfo().windowHeight - mall_filter.value.offsetTop,
|
|
duration: 0
|
|
}) */
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* align-items: center; */
|
|
justify-content: center;
|
|
background-color: #f2f3f5;
|
|
}
|
|
|
|
.index-content-inner {
|
|
padding-top: 10px
|
|
}
|
|
|
|
.index-class-card-box {
|
|
flex: 1;
|
|
border-radius: 10px;
|
|
margin: 0 10px 10px;
|
|
}
|
|
|
|
.index-class-card-body {
|
|
background-color: #fff;
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.navbar-list-content {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.navbar-item-content {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
width: 20%;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
|
|
.navbar-item-content-img {
|
|
width: 37px;
|
|
height: 37px;
|
|
}
|
|
|
|
.navbar-item-content-name {
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/*************客服******************/
|
|
|
|
.index-kefu-card-box {
|
|
flex: 1;
|
|
border-radius: 10px;
|
|
margin: 0 10px 10px;
|
|
overflow: hidden;
|
|
background-image: -webkit-gradient(linear, left top, right top, from(#8d7bfb), color-stop(30%, #8d7bfb), to(#8d7bfb));
|
|
background-image: -webkit-linear-gradient(left, #8d7bfb, #8d7bfb 30%, #8d7bfb);
|
|
background-image: linear-gradient(90deg, #8d7bfb 0, #8d7bfb 30%, #8d7bfb);
|
|
}
|
|
|
|
.index-kefu-card-header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
/* 垂直居中 */
|
|
padding: 5px 20px
|
|
}
|
|
|
|
.index-kefu-card-header-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: white;
|
|
}
|
|
|
|
.index-kefu-card-header-text {
|
|
flex: 1;
|
|
font-size: 13px;
|
|
color: #e7e8ea;
|
|
}
|
|
|
|
.index-kefu-card-body {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
overflow: hidden;
|
|
padding: 10px;
|
|
background-color: white;
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.index-kefu-item {
|
|
width: 49%;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #e7e8ea;
|
|
padding: 5px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.index-kefu-item-profile {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
}
|
|
|
|
.index-kefu-item-profile-avatar {
|
|
width: 45px;
|
|
height: 45px;
|
|
border-radius: 10%;
|
|
}
|
|
|
|
.index-kefu-item-profile-info {
|
|
text-align: left;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.index-kefu-item-profile-info-name-phone {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.index-kefu-item-profile-info-name-phone-name {
|
|
font-size: 13px;
|
|
color: #333;
|
|
margin-right: 3px;
|
|
}
|
|
|
|
.index-kefu-item-profile-info-name-phone-phone {
|
|
font-size: 11px;
|
|
color: #888;
|
|
}
|
|
|
|
.index-kefu-item-profile-info-address {
|
|
font-size: 10px;
|
|
color: #888;
|
|
}
|
|
|
|
/*************客服******************/
|
|
</style> |