init
This commit is contained in:
283
pages/index/index - 副本.vue
Normal file
283
pages/index/index - 副本.vue
Normal file
@@ -0,0 +1,283 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user