diff --git a/src/api/index.js b/src/api/index.js index 64743b5..e481f30 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -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}`) } \ No newline at end of file diff --git a/src/application/product-details.vue b/src/application/product-details.vue index 09e8025..1c454c9 100644 --- a/src/application/product-details.vue +++ b/src/application/product-details.vue @@ -165,6 +165,18 @@ + + + + + + {{$t('common.sendInquiry')}} + + + {{$t('common.chatNow')}} + + + @@ -288,8 +300,9 @@ \ No newline at end of file diff --git a/src/components/apps.vue b/src/components/apps.vue new file mode 100644 index 0000000..761160d --- /dev/null +++ b/src/components/apps.vue @@ -0,0 +1,44 @@ + + + + + \ No newline at end of file diff --git a/src/locale/en.json b/src/locale/en.json index e8d369f..9c3d03f 100644 --- a/src/locale/en.json +++ b/src/locale/en.json @@ -48,7 +48,9 @@ "ProductLabel": "Product", "keywords": "keywords", "Quickcontact": "Quick contact", - "sending": "sending" + "sending": "sending", + "Reset": "Reset", + "Sure": "Sure" }, "menu": { "Home": "Home", diff --git a/src/locale/zh.json b/src/locale/zh.json index e43406b..df1b7dc 100644 --- a/src/locale/zh.json +++ b/src/locale/zh.json @@ -48,7 +48,9 @@ "ProductLabel": "产品", "keywords": "关键字", "Quickcontact": "快速联系", - "sending": "发送" + "sending": "发送", + "Reset": "重置", + "Sure": "确认" }, "menu": { "Home": "首页", diff --git a/src/main.js b/src/main.js index ff2b5ee..a0716b4 100644 --- a/src/main.js +++ b/src/main.js @@ -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, }; diff --git a/src/pages/products/index.vue b/src/pages/products/index.vue index b48cef4..197416f 100644 --- a/src/pages/products/index.vue +++ b/src/pages/products/index.vue @@ -9,13 +9,13 @@ v-model="params.text" :placeholder="$t('common.keywords')" type="search" - @confirm="init" + @confirm="init()" > @@ -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}} @@ -53,17 +53,40 @@ - + {{item.label}} + + + + + {{item.label}} + + + + + {{$t('common.Reset')}} + + + {{$t('common.Sure')}} + + + + 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);