1
This commit is contained in:
hejin
parent
bf4e28d8d7
commit
89bd607864
@ -78,4 +78,12 @@ export const prodPageApi = (params) => {
|
||||
**/
|
||||
export const prodOrNewsInfoApi = (id) => {
|
||||
return request.get(`/web/prodNewsInfo?id=${id}`)
|
||||
}
|
||||
|
||||
/**
|
||||
* @function 获取公用页面的maxCataIg
|
||||
* @param {string} catgName 分类名称
|
||||
**/
|
||||
export const appMaxCatgIdApi = (catgName) => {
|
||||
return request.get(`/web/getCatgIdApp?catgName=${catgName}`)
|
||||
}
|
||||
@ -165,6 +165,18 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="footer-box">
|
||||
<Apps />
|
||||
<view class="operation-box">
|
||||
<view>
|
||||
{{$t('common.sendInquiry')}}
|
||||
</view>
|
||||
<view>
|
||||
{{$t('common.chatNow')}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -288,8 +300,9 @@
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pages {
|
||||
overflow: hidden;
|
||||
padding: 0 18rpx;
|
||||
padding-bottom: 200rpx;
|
||||
overflow: hidden;
|
||||
::v-deep .tabs {
|
||||
justify-content: space-around;
|
||||
.tabs-item {
|
||||
@ -377,5 +390,37 @@
|
||||
color: #292d2e;
|
||||
font-weight: bold;
|
||||
}
|
||||
.footer-box {
|
||||
width: 100%;
|
||||
height: min-content;
|
||||
padding: 18rpx;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: #fff;
|
||||
box-shadow: 0rpx -4rpx 8rpx 0rpx #EBEFF2;
|
||||
.operation-box {
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
view {
|
||||
flex: 1;
|
||||
height: 76rpx;
|
||||
line-height: 76rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
&:first-child {
|
||||
background: linear-gradient( 270deg, #6B98FE 0%, #0212FF 100%), #015FE8;
|
||||
border-top-left-radius: 10rpx;
|
||||
border-bottom-left-radius: 10rpx;
|
||||
}
|
||||
&:last-child {
|
||||
background: linear-gradient( 90deg, #FF8B07 0%, #FF3403 100%);
|
||||
border-top-right-radius: 10rpx;
|
||||
border-bottom-right-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
44
src/components/apps.vue
Normal file
44
src/components/apps.vue
Normal file
@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<view class="apps-box">
|
||||
<image
|
||||
:src="item.icon"
|
||||
v-for="(item,index) in list"
|
||||
:key="index"
|
||||
>
|
||||
</image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { ref } from 'vue';
|
||||
import faceBookImg from '@/assets/images/icon/facebook.png';
|
||||
import XImg from '@/assets/images/icon/X.png';
|
||||
import inImg from '@/assets/images/icon/in.png';
|
||||
import GoogleImg from '@/assets/images/icon/Google.png';
|
||||
import YouTobeImg from '@/assets/images/icon/YouTobe.png';
|
||||
import phoneAppImg from '@/assets/images/icon/phoneApp.png';
|
||||
|
||||
const list = [
|
||||
{ icon: faceBookImg },
|
||||
{ icon: XImg },
|
||||
{ icon: inImg },
|
||||
{ icon: GoogleImg },
|
||||
{ icon: YouTobeImg },
|
||||
{ icon: phoneAppImg },
|
||||
]
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.apps-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
image {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
margin-right: 34rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -48,7 +48,9 @@
|
||||
"ProductLabel": "Product",
|
||||
"keywords": "keywords",
|
||||
"Quickcontact": "Quick contact",
|
||||
"sending": "sending"
|
||||
"sending": "sending",
|
||||
"Reset": "Reset",
|
||||
"Sure": "Sure"
|
||||
},
|
||||
"menu": {
|
||||
"Home": "Home",
|
||||
|
||||
@ -48,7 +48,9 @@
|
||||
"ProductLabel": "产品",
|
||||
"keywords": "关键字",
|
||||
"Quickcontact": "快速联系",
|
||||
"sending": "发送"
|
||||
"sending": "发送",
|
||||
"Reset": "重置",
|
||||
"Sure": "确认"
|
||||
},
|
||||
"menu": {
|
||||
"Home": "首页",
|
||||
|
||||
@ -9,6 +9,7 @@ import CustomHeader from "@/components/custom-header.vue";
|
||||
import Tabs from "@/components/tabs.vue";
|
||||
import SuspensionBtn from "@/components/suspension-btn.vue";
|
||||
import OnlineModal from "@/components/online-modal.vue";
|
||||
import Apps from "@/components/apps.vue";
|
||||
|
||||
uni.$showTost = function (title='加载失败！',duration=1500,mask=false) {
|
||||
// 变成异步代码，处理一些特殊页面 必须等待消息提示结束后在做操作
|
||||
@ -46,6 +47,8 @@ export function createApp() {
|
||||
app.component('Tabs', Tabs)
|
||||
app.component('SuspensionBtn', SuspensionBtn)
|
||||
app.component('OnlineModal', OnlineModal)
|
||||
app.component('Apps', Apps)
|
||||
|
||||
return {
|
||||
app,
|
||||
};
|
||||
|
||||
@ -9,13 +9,13 @@
|
||||
v-model="params.text"
|
||||
:placeholder="$t('common.keywords')"
|
||||
type="search"
|
||||
@confirm="init"
|
||||
@confirm="init()"
|
||||
>
|
||||
<template #right>
|
||||
<image
|
||||
class="search-icon"
|
||||
src="@/assets/images/icon/search.png"
|
||||
@click="init"
|
||||
@click="init()"
|
||||
>
|
||||
</image>
|
||||
</template>
|
||||
@ -44,7 +44,7 @@
|
||||
:class="level2 === child.id ? 'level2-item-active' : ''"
|
||||
v-for="child in item.children"
|
||||
:key="child.id"
|
||||
@click="level2 = child.id"
|
||||
@click="level2Change(child)"
|
||||
>
|
||||
{{child.label}}
|
||||
</view>
|
||||
@ -53,17 +53,40 @@
|
||||
</scroll-view>
|
||||
|
||||
<view class="list-box">
|
||||
<scroll-view class="level3-box" :scroll-x="true" :show-scrollbar="false">
|
||||
<scroll-view class="level3-box" v-if="catgTreeLevel3.length > 1" :scroll-x="true" :show-scrollbar="false">
|
||||
<view
|
||||
class="level3-item"
|
||||
:class="level3 === item.id ? 'level3-active' : ''"
|
||||
v-for="(item,index) in catgTreeLevel3"
|
||||
:key="index"
|
||||
@click="level3 = item.id"
|
||||
@click="level3Change(item)"
|
||||
>
|
||||
{{item.label}}
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="level4-box" v-if="catgTreeLevel4Modal">
|
||||
<view class="level4-list">
|
||||
<view
|
||||
:class="item.id === level4 ? 'level4-item-active' : ''"
|
||||
class="level4-item"
|
||||
v-for="item in catgTreeLevel4"
|
||||
:key="item.id"
|
||||
@click="level4 = item.id"
|
||||
>
|
||||
{{item.label}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer-box">
|
||||
<view @click="Reset">
|
||||
{{$t('common.Reset')}}
|
||||
</view>
|
||||
<view @click="catgTreeLevel4Modal=false">
|
||||
{{$t('common.Sure')}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view
|
||||
class="list-scroll"
|
||||
:scroll-y="true"
|
||||
@ -93,7 +116,7 @@
|
||||
<script setup>
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
import { ref, computed, watch, nextTick } from 'vue';
|
||||
import { prodOrNewsCatgApi, prodPageApi } from '@/api';
|
||||
import { prodOrNewsCatgApi, prodPageApi, appMaxCatgIdApi } from '@/api';
|
||||
|
||||
const total = ref(0)
|
||||
const prodList = ref([])
|
||||
@ -125,6 +148,7 @@
|
||||
const collapseValue = ref('0')
|
||||
const level2 = ref('')
|
||||
const level3 = ref(undefined)
|
||||
const level4 = ref(undefined)
|
||||
const catgTree = ref([])
|
||||
const catgTreeLevel3 = computed(() => {
|
||||
let arr = []
|
||||
@ -134,8 +158,30 @@
|
||||
arr = findObj.children
|
||||
}
|
||||
}
|
||||
return [{id:undefined,label:'all'}, ...arr]
|
||||
return [{id:undefined,label:'all',children:[]}, ...arr]
|
||||
})
|
||||
const catgTreeLevel4 = ref([])
|
||||
const catgTreeLevel4Modal = ref(false)
|
||||
const level2Change = (row) => {
|
||||
level2.value = row.id
|
||||
level3.value = undefined
|
||||
level4.value = undefined
|
||||
catgTreeLevel4Modal.value = false
|
||||
}
|
||||
const level3Change = (row) => {
|
||||
catgTreeLevel4.value = []
|
||||
level3.value = row.id
|
||||
catgTreeLevel4Modal.value = false
|
||||
if (row.children.length) {
|
||||
catgTreeLevel4.value = row.children
|
||||
catgTreeLevel4Modal.value = true
|
||||
}
|
||||
}
|
||||
const Reset = () => {
|
||||
level4.value = undefined
|
||||
catgTreeLevel4Modal.value = false
|
||||
}
|
||||
|
||||
const finalCatgId = computed(() => {
|
||||
let id = undefined
|
||||
if(level3.value) {
|
||||
@ -149,10 +195,16 @@
|
||||
}
|
||||
return id
|
||||
})
|
||||
|
||||
watch(() => finalCatgId.value, (val) => {
|
||||
params.value.catgId = val
|
||||
init()
|
||||
}, {deep:true})
|
||||
const getMaxCatgId = () => {
|
||||
return appMaxCatgIdApi('Products').then(({data:res}) => {
|
||||
console.log(res)
|
||||
})
|
||||
}
|
||||
const catgTreeInit = () => {
|
||||
return prodOrNewsCatgApi(params.value.maxCatgId).then(({data:res}) => {
|
||||
catgTree.value = res.data
|
||||
@ -164,6 +216,8 @@
|
||||
const collapseChange = (e) => {
|
||||
level2.value = undefined
|
||||
level3.value = undefined
|
||||
level4.value = undefined
|
||||
Reset()
|
||||
}
|
||||
|
||||
const oldScrollTop = ref(0)
|
||||
@ -191,6 +245,7 @@
|
||||
|
||||
})
|
||||
onLoad(async() => {
|
||||
await getMaxCatgId()
|
||||
await catgTreeInit()
|
||||
init()
|
||||
})
|
||||
@ -281,6 +336,7 @@
|
||||
.list-box {
|
||||
width: 68%;
|
||||
padding-left: 16rpx;
|
||||
position: relative;
|
||||
.level3-box {
|
||||
height: 68rpx;
|
||||
white-space: nowrap;
|
||||
@ -306,6 +362,67 @@
|
||||
border: 2rpx solid #015fe8;
|
||||
}
|
||||
}
|
||||
.level4-box {
|
||||
width: 95%;
|
||||
height: 92%;
|
||||
padding: 18rpx;
|
||||
position: absolute;
|
||||
top: 80rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: #fff;
|
||||
z-index: 9999;
|
||||
box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(155,163,184,0.25);
|
||||
.level4-list {
|
||||
width: 100%;
|
||||
height: calc(100% - 72rpx);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow-y: auto;
|
||||
.level4-item {
|
||||
width: 48%;
|
||||
height: min-content;
|
||||
margin-right: 2%;
|
||||
padding: 10rpx 0;
|
||||
text-align: center;
|
||||
color: #77778b;
|
||||
border: 1rpx solid #e6e8ed;
|
||||
border-radius: 36rpx;
|
||||
font-size: 24rpx;
|
||||
&:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.level4-item-active {
|
||||
color: #292d2e;
|
||||
background-color: #eceef0;
|
||||
border-color: #d6dce2;
|
||||
}
|
||||
}
|
||||
.footer-box {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
view {
|
||||
flex: 1;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
&:first-child {
|
||||
color: #292d2e;
|
||||
background-color: #fff;
|
||||
box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(192,195,209,0.25);
|
||||
}
|
||||
&:last-child {
|
||||
color: #fff;
|
||||
background: linear-gradient( 270deg, #6B98FE 0%, #0212FF 100%), #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-scroll {
|
||||
width: 100%;
|
||||
height: calc(100vh - 50px - 68rpx - (var(--status-bar-height)) - 34px);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user