57600f66c2
refactor(klp-header): 更新产线列表显示名称 fix(login): 修正验证码启用条件判断 style(l3): 注释掉用户欢迎语区块 refactor(klp-shutdown-statistic): 为switch case添加break语句
130 lines
3.4 KiB
Vue
130 lines
3.4 KiB
Vue
<template>
|
||
<view class="custom-header">
|
||
<!-- 中间产线标题（带下拉选择） -->
|
||
<view class="header-title-container">
|
||
<picker
|
||
mode="selector"
|
||
:range="lineList"
|
||
range-key="name"
|
||
v-model="currentLineIndex"
|
||
@change="handleLineChange"
|
||
>
|
||
<view class="header-title">
|
||
<text class="line-name">{{ currentLine.name }}</text>
|
||
<uni-icons type="arrowdown" size="20" color="#666" class="arrow-icon" />
|
||
</view>
|
||
</picker>
|
||
<uni-icons type="down"></uni-icons>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
export default {
|
||
// 2. 组件接收的属性（可根据需求扩展）
|
||
props: {
|
||
// 可选：外部传入默认选中的产线索引（优先级高于内部默认）
|
||
defaultLineIndex: {
|
||
type: Number,
|
||
default: 0
|
||
}
|
||
},
|
||
// 3. 响应式数据
|
||
data() {
|
||
return {
|
||
// 产线列表（原Tab列表改造，可外部传入，此处保留默认值）
|
||
lineList: [
|
||
{ name: "科伦普重工-酸轧机组", key: "acidity" },
|
||
{ name: "科伦普重工-彩涂机组", key: "paint" },
|
||
{ name: "科伦普重工-镀锌线一组", key: "zinc1" },
|
||
{ name: "科伦普重工-镀锌线二组", key: "zinc2" },
|
||
{ name: "科伦普重工-镀锌线三组", key: "zinc3" },
|
||
],
|
||
// 当前选中的产线索引（关联picker）
|
||
currentLineIndex: 0,
|
||
// 当前选中的产线对象（方便模板渲染与回调传递）
|
||
currentLine: {}
|
||
};
|
||
},
|
||
// 4. 生命周期钩子：初始化当前产线
|
||
mounted() {
|
||
// 优先使用外部传入的默认索引，否则用内部默认0
|
||
this.currentLineIndex = this.defaultLineIndex;
|
||
// 初始化当前产线对象
|
||
this.currentLine = this.lineList[this.currentLineIndex];
|
||
},
|
||
// 5. 方法定义（交互逻辑与回调触发）
|
||
methods: {
|
||
// 产线切换逻辑（picker选择后触发）
|
||
handleLineChange(e) {
|
||
// 更新当前选中索引
|
||
this.currentLineIndex = e.detail.value;
|
||
// 更新当前选中的产线对象
|
||
this.currentLine = this.lineList[this.currentLineIndex];
|
||
// 触发外部回调，传递选中的产线信息（供父组件接收）
|
||
this.$emit("lineChange", {
|
||
index: this.currentLineIndex,
|
||
line: this.currentLine // 包含name和key的完整产线对象
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// 标题栏整体样式（padding:20rpx 符合需求）
|
||
.custom-header {
|
||
display: flex;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 9999;
|
||
align-items: center;
|
||
padding-top: 40px;
|
||
padding-bottom: 20px;
|
||
background-color: #fff;
|
||
border-bottom: 1rpx solid #eee; // 底部边框分隔，优化视觉
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
}
|
||
|
||
// 左侧返回按钮容器
|
||
.header-left {
|
||
width: 60rpx;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
// 中间产线标题容器（占满剩余宽度，居中对齐）
|
||
.header-title-container {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
// 产线标题文本与箭头容器
|
||
.header-title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
// 产线名称样式
|
||
.line-name {
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #333;
|
||
margin-right: 8rpx; // 与箭头保持间距
|
||
}
|
||
|
||
// 下拉箭头样式
|
||
.arrow-icon {
|
||
transition: transform 0.3s ease;
|
||
// 可选：选中时旋转箭头（如需扩展可加逻辑）
|
||
// &.active { transform: rotate(180deg); }
|
||
}
|
||
</style> |