You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
2.7 KiB
100 lines
2.7 KiB
<template>
|
|
<view>
|
|
<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
|
|
<view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
|
|
<view class="padding-left">
|
|
<image class="margin-right-xs" v-for="(item, index) in leftImage" @click="btn('left', index)" :src="item"
|
|
mode="widthFix" style="width: 55rpx;"></image>
|
|
</view>
|
|
<view :style="[{top:StatusBar + 'px'}]">
|
|
<u-search placeholder="请输入课程名称..." :showAction="false" v-model="keyword" @search="searchWorking"></u-search>
|
|
</view>
|
|
<!-- 中间搜索 -->
|
|
<!-- #ifdef APP-PLUS || H5 -->
|
|
<view class="padding-right">
|
|
<image class="margin-left-xs" v-for="(item, index) in rightImage" @click="btn('right', index)" :src="item"
|
|
mode="widthFix" style="width: 55rpx;"></image>
|
|
</view>
|
|
<!--#endif -->
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<view>
|
|
<image class="margin-left-xs" v-for="(item, index) in rightImage" @click="btn('right', index)" :src="item" mode="widthFix"
|
|
style="width: 55rpx;"></image>
|
|
</view>
|
|
<!--#endif -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import list from '../../uni_modules/uview-ui/libs/config/props/list';
|
|
export default {
|
|
data() {
|
|
return {
|
|
StatusBar: this.StatusBar,
|
|
CustomBar: this.CustomBar,
|
|
keyword: null,
|
|
};
|
|
},
|
|
name: 'cu-custom',
|
|
computed: {
|
|
style() {
|
|
var StatusBar = this.StatusBar;
|
|
var CustomBar = this.CustomBar;
|
|
var bgImage = this.bgImage;
|
|
var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
|
|
if (this.bgImage) {
|
|
style = `${style}background-image:url(${bgImage});`;
|
|
}
|
|
return style
|
|
}
|
|
},
|
|
props: {
|
|
bgImage: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
// 默认背景色
|
|
bgColor: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
// 左侧图标
|
|
leftImage: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
// 右侧图标
|
|
rightImage: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
// 搜索默认值
|
|
searchParam: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
},
|
|
methods: {
|
|
btn(flay, index) {
|
|
this.$emit("customBtn", {
|
|
flay: flay,
|
|
index: index
|
|
})
|
|
},
|
|
searchWorking() {
|
|
this.$emit("searchWorking", this.keyword)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.center {
|
|
position: absolute;
|
|
left: 146upx;
|
|
width: calc(100% - 96upx - 60upx - 120upx - 20upx);
|
|
line-height: 1.6em;
|
|
}
|
|
</style>
|
|
|