zhangqi
/
kuailelunwen_new_houtai
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改布局、修改侧边栏高亮逻辑

pull/97/head
zq 2 months ago
parent
f19732d8f5
commit
3da5de8ff2
4 changed files with 488 additions and 396 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      src/components/SliderMenu.vue
  2. 48
      src/components/SliderScond.vue
  3. 4
      src/store/index.js
  4. 123
      src/views/agent/siteServiceAdd.vue

3
src/components/SliderMenu.vue
View File

@ -282,4 +282,5 @@ export default {
// .el-menu--collapse .el-submenu.is-opened > .el-menu {
// opacity: 0;
// height: 0;
// }</style>
// }
</style>

48
src/components/SliderScond.vue
View File

@ -77,11 +77,23 @@ export default {
GuipToolTip
},
watch: {
menuList(newVal) {
let subtitle = this.renderKeyNew.subtitle;
this.activeFloor = newVal[this.curIndex]?.list?.[0][subtitle];
this.componentsName = newVal[this.curIndex]?.list?.[0]?.componentsName || '';
store.commit('SET_CURRENTMENUITEM', newVal[this.curIndex]?.list?.[0]);
menuList:{
handler(newVal, oldVal) {
// 初次加载或强制刷新时，oldVal为空
if (!oldVal || oldVal.length === 0) {
this.setDefaultActive(newVal);
return;
}
console.log(newVal,'newVal===');
// 检查当前高亮的菜单项是否仍然存在于新的menuList中
const currentItemExists = this.checkCurrentItem(newVal);
console.log(currentItemExists,'currentItemExists--');
// 不存在默认高亮第一项
if (!currentItemExists) {
this.setDefaultActive(newVal);
}
},
immediate: true
}
},
mounted() {
@ -105,6 +117,32 @@ export default {
}
},
methods: {
checkCurrentItem(newMenuList) {
const subtitle = this.renderKeyNew.subtitle;
// 如果当前没有高亮的菜单项，返回
if (!this.activeFloor) return false;
// 遍历新的menuList，先检查高亮的菜单项是否存在
for (const item of newMenuList) {
if (item.list) {
const found = item.list.some(subItem =>
subItem[subtitle] === this.activeFloor ||
subItem.componentsName === this.activeFloor
);
if (found) return true;
}
}
return false;
},
setDefaultActive(menuList) {
// 设置默认高亮项
if (menuList && menuList.length > 0 && menuList[0].list && menuList[0].list.length > 0) {
const subtitle = this.renderKeyNew.subtitle;
this.activeFloor = menuList[0].list[0][subtitle] || menuList[0].list[0]?.componentsName || '';
this.componentsName = menuList[0].list[0]?.componentsName || '';
store.commit('SET_CURRENTMENUITEM', menuList[0].list[0]);
this.curIndex = 0;
}
},
handleChange(val) {
console.log("面板状态变化:", val);
},

4
src/store/index.js
View File

@ -567,7 +567,7 @@ export default new Vuex.Store({
},
mutations: {
SET_CURRENTMENUITEM(state,data){
state.currentMenuItem = JSON.parse(JSON.stringify(data));
state.currentMenuItem = data && JSON.parse(JSON.stringify(data));
},
SET_COMPONENTS_NAME(state,name){
state.componentsName = name;
@ -576,7 +576,7 @@ export default new Vuex.Store({
state.slidermenu = state[type]
},
SET_SECOND_MENU(state,data){
state.secondMenu = JSON.parse(JSON.stringify(data))
state.secondMenu = data && JSON.parse(JSON.stringify(data))
},
SET_CUSTOMIZE(state,show) {
state.customize = show

123
src/views/agent/siteServiceAdd.vue
View File

@ -1,5 +1,6 @@
<template>
<div class="pb80 ml12 mr12">
<div class="serviceAdd-wrap">
<div class="ml12 mr12 overFlow-wrap">
<PromptText text="如何添加服务？" :type="1" class="add-info">
<template #next_desc>
<div class="alert-more flex gap12" :class="alertShow ? '' : 'alert-more-hide'" @click="handleAlert">
@ -10,7 +11,8 @@
</template>
<template #desc>
<div class="alert-more-info mt12" v-show="alertShow">
<div class="flex mb10 gap10">1.点击左侧导航进入设置页，开启所需服务（<img src="@/assets/site/open_success_menu.svg" alt="">图标表示已开启）。</div>
<div class="flex mb10 gap10">1.点击左侧导航进入设置页，开启所需服务（<img src="@/assets/site/open_success_menu.svg"
alt="">图标表示已开启）。</div>
<div class="flex mb10 gap10">2.可开启多个服务。</div>
<div class="flex gap10">3.全部开启后，点击底部 [添加完成] 。</div>
</div>
@ -33,13 +35,16 @@
<el-form class="el-row demo-ruleForm" ref="formRef">
<div class="price-top">
<span class="title">网页支付与售价</span>
<span class="desc" v-if="serviceAddInfo.supply_price">供货价：{{serviceAddInfo.supply_price}}{{serviceAddInfo.supply_price_warning}}</span>
<span class="desc"
v-if="serviceAddInfo.supply_price">供货价：{{ serviceAddInfo.supply_price }}{{ serviceAddInfo.supply_price_warning }}</span>
</div>
<PromptText v-if="serviceAddInfo.prompt.title" :text='serviceAddInfo.prompt.title' :type="1" class="mb12">
<PromptText v-if="serviceAddInfo.prompt.title" :text='serviceAddInfo.prompt.title' :type="1"
class="mb12">
<template #desc v-if="serviceAddInfo.prompt.content">
<div class="alert-more-info mt12">
<div class="flex mb10" v-for="item in serviceAddInfo.prompt.content" :key="item">{{item}}</div>
<div class="flex mb10" v-for="item in serviceAddInfo.prompt.content" :key="item">
{{ item }}</div>
</div>
</template>
</PromptText>
@ -51,19 +56,24 @@
</div>
<div class="flex-between">
<div class="short-width">
<GuipSelect width="100%" v-model="serviceInfo.unit" placeholder="选择计费方式" :options="serviceAddInfo.set_units"/>
<GuipSelect width="100%" v-model="serviceInfo.unit" placeholder="选择计费方式"
:options="serviceAddInfo.set_units" />
</div>
<div class="short-width" v-if="serviceInfo.unit > 0">
<GuipInput v-if="serviceInfo.unit === '1'" v-model="serviceInfo.price" width="100%" ref="GuipInput" unit="元/篇"></GuipInput>
<GuipInput v-if="serviceInfo.unit === '2'" v-model="serviceInfo.price" width="100%" ref="GuipInput" unit="元/页"></GuipInput>
<GuipInput v-if="serviceInfo.unit === '1'" v-model="serviceInfo.price" width="100%"
ref="GuipInput" unit="元/篇"></GuipInput>
<GuipInput v-if="serviceInfo.unit === '2'" v-model="serviceInfo.price" width="100%"
ref="GuipInput" unit="元/页"></GuipInput>
</div>
</div>
<div class="flex-between mt12" v-if="serviceInfo.unit === '0'">
<div class="short-width">
<GuipInput width="100%" v-model="serviceInfo.price" ref="GuipInput" unit="元"></GuipInput>
<GuipInput width="100%" v-model="serviceInfo.price" ref="GuipInput" unit="元">
</GuipInput>
</div>
<div class="short-width">
<GuipInput width="100%" v-model="serviceInfo.unit_num" ref="GuipInput" unit="字符"></GuipInput>
<GuipInput width="100%" v-model="serviceInfo.unit_num" ref="GuipInput" unit="字符">
</GuipInput>
</div>
</div>
</div>
@ -76,13 +86,15 @@
</div>
<div class="flex-between">
<div class="third-width">
<GuipInput width="100%" v-model="serviceInfo.base_unit_num" ref="GuipInput" unit="字符内"></GuipInput>
<GuipInput width="100%" v-model="serviceInfo.base_unit_num" ref="GuipInput"
unit="字符内"></GuipInput>
</div>
<div class="w85">
用户需支付
</div>
<div class="third-width">
<GuipInput width="100%" v-model="serviceInfo.base_unit_price" ref="GuipInput" unit="元"></GuipInput>
<GuipInput width="100%" v-model="serviceInfo.base_unit_price" ref="GuipInput"
unit="元"></GuipInput>
</div>
</div>
</div>
@ -110,19 +122,24 @@
</div>
<div class="flex-between">
<div class="short-width">
<GuipSelect width="100%" v-model="serviceInfo.unit" placeholder="选择计费方式" :options="serviceAddInfo.set_units"/>
<GuipSelect width="100%" v-model="serviceInfo.unit" placeholder="选择计费方式"
:options="serviceAddInfo.set_units" />
</div>
<div class="short-width" v-if="serviceInfo.unit > 0">
<GuipInput v-if="serviceInfo.unit === '1'" v-model="serviceAddInfo.unit_piece" width="100%" ref="GuipInput" unit="件/篇"></GuipInput>
<GuipInput v-if="serviceInfo.unit === '2'" v-model="serviceAddInfo.unit_piece" width="100%" ref="GuipInput" unit="件/页"></GuipInput>
<GuipInput v-if="serviceInfo.unit === '1'" v-model="serviceAddInfo.unit_piece"
width="100%" ref="GuipInput" unit="件/篇"></GuipInput>
<GuipInput v-if="serviceInfo.unit === '2'" v-model="serviceAddInfo.unit_piece"
width="100%" ref="GuipInput" unit="件/页"></GuipInput>
</div>
</div>
<div class="flex-between mt12" v-if="serviceInfo.unit === '0'">
<div class="short-width">
<GuipInput width="100%" v-model="serviceInfo.unit_piece" ref="GuipInput" unit="件"></GuipInput>
<GuipInput width="100%" v-model="serviceInfo.unit_piece" ref="GuipInput" unit="件">
</GuipInput>
</div>
<div class="short-width">
<GuipInput width="100%" v-model="serviceInfo.unit_num" ref="GuipInput" unit="字符"></GuipInput>
<GuipInput width="100%" v-model="serviceInfo.unit_num" ref="GuipInput" unit="字符">
</GuipInput>
</div>
</div>
</div>
@ -135,13 +152,15 @@
</div>
<div class="flex-between">
<div class="third-width">
<GuipInput width="100%" v-model="serviceInfo.base_unit_num" ref="GuipInput" unit="字符内"></GuipInput>
<GuipInput width="100%" v-model="serviceInfo.base_unit_num" ref="GuipInput"
unit="字符内"></GuipInput>
</div>
<div class="w85">
用户需支付
</div>
<div class="third-width">
<GuipInput width="100%" v-model="serviceInfo.base_unit_piece" ref="GuipInput" unit="件"></GuipInput>
<GuipInput width="100%" v-model="serviceInfo.base_unit_piece" ref="GuipInput"
unit="件"></GuipInput>
</div>
</div>
</div>
@ -171,15 +190,20 @@
<div class="bind-item" v-for="(row, key) in bindList" :key="key">
<img :src="row.pic_url ? row.pic_url : require('@/assets/site/invalid.png')" alt="">
<div class="bind-goods-info">
<div class="bind-goods-title"><el-link :href="row.link" target="_blank">{{row.title}}</el-link></div>
<div class="bind-goods-title"><el-link :href="row.link"
target="_blank">{{ row.title }}</el-link>
</div>
<div class="flex-between gap12">
<div class="flex gap12">
<span v-if="row.price">￥{{ row.price }}</span>
<span v-if="row.sec_title">{{ row.sec_title }}</span>
</div>
<div class="flex gap12">
<span class="bind-btn bind-delete" @click="handleDelBindClick(row, key)">删除</span>
<span class="bind-btn" :class="row.is_default === '1' ? 'bind-default-active' : 'bind-default' " @click="handleDefaultConfirm(row.id)">默认商品</span>
<span class="bind-btn bind-delete"
@click="handleDelBindClick(row, key)">删除</span>
<span class="bind-btn"
:class="row.is_default === '1' ? 'bind-default-active' : 'bind-default'"
@click="handleDefaultConfirm(row.id)">默认商品</span>
</div>
</div>
</div>
@ -187,23 +211,28 @@
</div>
</el-form>
<bindGoods :showBind="showBind" :uid="uid" :type="type" :pati="pati" :pageCode="pageCode" @handleBind="handleBind"></bindGoods>
<bindGoods :showBind="showBind" :uid="uid" :type="type" :pati="pati" :pageCode="pageCode"
@handleBind="handleBind">
</bindGoods>
<GuipDialog :dialogVisible="dialogDelBindConfim" title="提示" :show-close-button="false" @confirm="handleDelBindConfirm"
@cancel="handleDelBindCancel">
<GuipDialog :dialogVisible="dialogDelBindConfim" title="提示" :show-close-button="false"
@confirm="handleDelBindConfirm" @cancel="handleDelBindCancel">
您确定要删除吗？删除后所有绑定都会删除
</GuipDialog>
</div>
<GuipDialog :dialogVisible="dialogDelServiceConfim" title="提示" :show-close-button="false" @confirm="handleDelServiceConfirm"
@cancel="handleDelServiceCancel">
<GuipDialog :dialogVisible="dialogDelServiceConfim" title="提示" :show-close-button="false"
@confirm="handleDelServiceConfirm" @cancel="handleDelServiceCancel">
确定要移除服务吗?
</GuipDialog>
</div>
<div class="register-btns">
<GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="jumpStep">添加完成</GuipButton>
<GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="jumpStep">添加完成
</GuipButton>
</div>
</div>
</template>
<script>
import store from '@/store';
@ -578,9 +607,19 @@ export default {
}
</script>
<style lang="scss" scoped>
.serviceAdd-wrap{
height: 100%;
display: flex;
flex-direction: column;
.overFlow-wrap{
flex: 1;
overflow-y: auto;
}
}
.pb80 {
padding-bottom: 80px;
}
.ml12 {
margin-left: 12px;
}
@ -602,16 +641,22 @@ export default {
color: #006AFF;
letter-spacing: 0.08em;
cursor: pointer;
user-select: none; /* 标准语法 */
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none;
/* 标准语法 */
-webkit-user-select: none;
/* Safari */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* IE/Edge */
}
.alert-more-hide {
img {
transform: rotate(180deg);
}
}
.alert-more-info {
color: #1E2226;
letter-spacing: 0.08em;
@ -647,6 +692,7 @@ export default {
background-size: 16px 16px;
margin-right: 12px;
}
.service-status-close {
cursor: pointer;
color: #8A9099;
@ -661,21 +707,25 @@ export default {
.price-set {
letter-spacing: 0.08em;
.price-top {
display: flex;
align-items: center;
margin-bottom: 16px;
.title {
font-size: 14px;
font-weight: bold;
color: #1E2226;
}
.desc {
font-size: 14px;
color: #626573;
margin-left: 12px;
}
}
.el-form-item {
margin-bottom: 0;
}
@ -731,9 +781,11 @@ export default {
.bind-goods-title {
text-align: left;
a {
color: #1E2226;
}
a:hover {
color: #006AFF;
}
@ -773,9 +825,9 @@ export default {
}
.register-btns {
position: fixed;
left: 0;
bottom: 0;
// position: absolute;
// left: 0;
// bottom: 0;
width: 100%;
display: flex;
flex-direction: row;
@ -785,6 +837,7 @@ export default {
/* 蓝色阴影_常规 */
box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12);
z-index: 999;
button:nth-child(1) {
margin-right: 56px;
}

Write Preview
Loading…
Cancel
Save