1. 调试完成单页面类型页面 2.绘制完成产品查询页面的左侧菜单
This commit is contained in:
hejin
parent
5180c719bf
commit
0c936ca87b
@ -47,4 +47,20 @@ export const formOptionsApi = () => {
|
||||
**/
|
||||
export const submitFormApi = (data) => {
|
||||
return request.post('/web/inquirySave', data)
|
||||
}
|
||||
|
||||
/**
|
||||
* @function 获取分类详情信息
|
||||
* @param {string} id 分类id
|
||||
**/
|
||||
export const categoryInfoApi = (id) => {
|
||||
return request.get(`/web/categoryInfo?id=${id}`)
|
||||
}
|
||||
|
||||
/**
|
||||
* @function 获取产品新闻分类
|
||||
* @param {string} catgId 最上级id
|
||||
**/
|
||||
export const prodOrNewsCatgApi = (catgId) => {
|
||||
return request.get(`/web/prodCategory?catgId=${catgId}`)
|
||||
}
|
||||
@ -30,6 +30,15 @@ button {
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical; //盒子中内容竖直排列
|
||||
}
|
||||
.rich-text {
|
||||
margin-bottom: 1.25rem;
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
p {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.form-box {
|
||||
.label-box {
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
@ -44,7 +44,9 @@
|
||||
"Go": "Go",
|
||||
"Center": "Center",
|
||||
"Quick": "Quick",
|
||||
"viewmore": "view more"
|
||||
"viewmore": "view more",
|
||||
"ProductLabel": "Product",
|
||||
"keywords": "keywords"
|
||||
},
|
||||
"menu": {
|
||||
"Home": "Home",
|
||||
|
||||
@ -44,7 +44,9 @@
|
||||
"Go": "前往",
|
||||
"Center": "中心",
|
||||
"Quick": "快速",
|
||||
"viewmore": "查看更多"
|
||||
"viewmore": "查看更多",
|
||||
"ProductLabel": "产品",
|
||||
"keywords": "关键字"
|
||||
},
|
||||
"menu": {
|
||||
"Home": "首页",
|
||||
|
||||
@ -17,7 +17,8 @@
|
||||
{
|
||||
"path": "pages/products/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "Product"
|
||||
"navigationBarTitleText": "Product",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -29,7 +30,8 @@
|
||||
{
|
||||
"path": "pages/separate/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "About Us"
|
||||
"navigationBarTitleText": "About Us",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@ -191,6 +191,7 @@
|
||||
await getOrdinaryProduct()
|
||||
await getHotNews()
|
||||
} catch(err) {
|
||||
console.log(err)
|
||||
}
|
||||
uni.stopPullDownRefresh()
|
||||
})
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view class="pages">
|
||||
<CustomHeader title="Contact Us"></CustomHeader>
|
||||
<CustomHeader :title="$t('contactUs.contactUs')"></CustomHeader>
|
||||
|
||||
<view class="company-information">
|
||||
<view class="main-box">
|
||||
|
||||
@ -1,15 +1,182 @@
|
||||
<template>
|
||||
<view class="pages">
|
||||
产品栏目
|
||||
<CustomHeader :title="$t('common.ProductLabel')"></CustomHeader>
|
||||
|
||||
<view class="search-box">
|
||||
<uni-easyinput
|
||||
:inputBorder="false"
|
||||
:clearable="false"
|
||||
v-model="params.keywords"
|
||||
:placeholder="$t('common.keywords')"
|
||||
type="search"
|
||||
@confirm="init"
|
||||
>
|
||||
<template #right>
|
||||
<image
|
||||
class="search-icon"
|
||||
src="@/assets/images/icon/search.png"
|
||||
@click="init"
|
||||
>
|
||||
</image>
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
</view>
|
||||
|
||||
<view class="main">
|
||||
<scroll-view class="menu-box" :scroll-y="true" v-if="catgTree.length">
|
||||
<uni-collapse ref="collapseRef" v-model="collapseValue" accordion>
|
||||
<uni-collapse-item
|
||||
title-border="none"
|
||||
:border="false"
|
||||
:title="item.label"
|
||||
:show-arrow="false"
|
||||
v-for="(item,index) in catgTree"
|
||||
:key="item.id"
|
||||
:class="collapseValue === String(index) ? 'collapse-active' : ''"
|
||||
>
|
||||
<view
|
||||
class="level2-item"
|
||||
:class="level2 === child.id ? 'level2-item-active' : ''"
|
||||
v-for="child in item.children"
|
||||
:key="child.id"
|
||||
@click="level2 = child.id"
|
||||
>
|
||||
{{child.label}}
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
</scroll-view>
|
||||
|
||||
<scroll-view class="list-box" :scroll-y="true">
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { ref } from 'vue';
|
||||
import { prodOrNewsCatgApi } from '@/api';
|
||||
|
||||
const params = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
catgId: undefined,
|
||||
maxCatgId: '660179025d0e2e0e4263db0eec86a8cc',
|
||||
catgId: undefined,
|
||||
keywords: ''
|
||||
})
|
||||
const init = () => {
|
||||
|
||||
}
|
||||
|
||||
const collapseRef = ref()
|
||||
const collapseValue = ref('0')
|
||||
const level2 = ref('')
|
||||
const catgTree = ref([])
|
||||
const catgTreeInit = () => {
|
||||
return prodOrNewsCatgApi(params.value.maxCatgId).then(({data:res}) => {
|
||||
catgTree.value = res.data
|
||||
if (res.data.length) {
|
||||
params.value.catgId = res.data[0].children.length ? res.data[0].children[0].id : res.data[0].id
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
onLoad(() => {
|
||||
catgTreeInit()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.pages {
|
||||
/* #ifdef H5 */
|
||||
min-height: calc(100vh - 50px);
|
||||
/* #endif */
|
||||
.search-box {
|
||||
padding: 16rpx;
|
||||
padding-top: calc(var(--status-bar-height) + 60rpx);
|
||||
::v-deep .uni-easyinput {
|
||||
border-radius: 32rpx;
|
||||
border: 2rpx solid #015fe8 !important;
|
||||
overflow: hidden;
|
||||
.uni-easyinput__content-input {
|
||||
}
|
||||
.uni-easyinput__content {
|
||||
padding: 0 15rpx;
|
||||
}
|
||||
}
|
||||
.search-icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
}
|
||||
.main {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
.menu-box, .list-box {
|
||||
height: calc(100vh - 50px - (var(--status-bar-height)) - 34px);
|
||||
/* #ifdef H5 */
|
||||
height: calc(100vh - 50px - (var(--status-bar-height)) - 81px);
|
||||
/* #endif */
|
||||
}
|
||||
.menu-box {
|
||||
width: 32%;
|
||||
border-right: 2rpx solid #e5edf4;
|
||||
::v-deep .uni-collapse {
|
||||
background-color: transparent;
|
||||
.uni-collapse-item__title-box {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
.collapse-active {
|
||||
color: #015fe8;
|
||||
background-color: #ffffff;
|
||||
overflow: hidden;
|
||||
border-top-right-radius: 25rpx;
|
||||
border-bottom-right-radius: 25rpx;
|
||||
box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(148,159,176,0.25);
|
||||
::v-deep .uni-collapse-item__title-text {
|
||||
color: #015fe8;
|
||||
}
|
||||
|
||||
}
|
||||
.level2-item {
|
||||
width: 100%;
|
||||
padding: 22rpx 16rpx;
|
||||
position: relative;
|
||||
color: #77778b;
|
||||
&:first-child {
|
||||
&::before {
|
||||
content: '';
|
||||
width: 90%;
|
||||
height: 2rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background-color: #eceef0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.level2-item-active {
|
||||
color: #015fe8;
|
||||
&::after {
|
||||
content: '';
|
||||
width: 4rpx;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: #015fe8;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-box {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,15 +1,41 @@
|
||||
<template>
|
||||
<view class="pages">
|
||||
单页面
|
||||
<CustomHeader :title="$t('aboutUs.AboutUs')"></CustomHeader>
|
||||
<view class="rich-text" v-html="info.contentApp"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app';
|
||||
import { ref } from 'vue';
|
||||
import { categoryInfoApi } from '@/api/index.js';
|
||||
|
||||
const id = ref('66c10877ee325e7f5da316e69ceb2eb9')
|
||||
const info = ref({})
|
||||
const init = () => {
|
||||
return categoryInfoApi(id.value).then(({data:res}) => {
|
||||
info.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
onPullDownRefresh(async() => {
|
||||
try {
|
||||
await init()
|
||||
} catch(err) {
|
||||
console.log(err)
|
||||
}
|
||||
uni.stopPullDownRefresh()
|
||||
})
|
||||
|
||||
onLoad((options) => {
|
||||
init()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.pages {
|
||||
.rich-text {
|
||||
padding-top: calc(var(--status-bar-height) + 30rpx);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user