2025-10-27 13:21:43 +08:00
|
|
|
|
<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: [
|
2025-10-27 14:28:29 +08:00
|
|
|
|
{ name: "科伦普重工-酸轧机组", key: "acidity" },
|
|
|
|
|
|
{ name: "科伦普重工-彩涂机组", key: "paint" },
|
|
|
|
|
|
{ name: "科伦普重工-镀锌线一组", key: "zinc1" },
|
|
|
|
|
|
{ name: "科伦普重工-镀锌线二组", key: "zinc2" },
|
|
|
|
|
|
{ name: "科伦普重工-镀锌线三组", key: "zinc3" },
|
2025-10-27 13:21:43 +08:00
|
|
|
|
],
|
|
|
|
|
|
// 当前选中的产线索引（关联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>
|
