MinNan/chuanCheng_fenbao/search.vue

<template>
	<view class="box">
		<u-navbar title="搜索" :placeholder="true" :autoBack="true" bgColor="rgba(255,255,255,0)" titleStyle="font-weight:bold;color:#121212"></u-navbar>
		<view class="box_search">
			<u-search :shape="square" v-model="val" bgColor="#efefef" borderColor="#cccccc" :showAction="false" height="70rpx"></u-search>
			<view @click="searchBtn" class="sousuo">搜索</view>
		</view>

		<view class="box_22" @click="recommendBtn(index)" v-for="(item, index) in list" :key="item.id">
			<view class="block_5">
				<image style="width: 100%; height: 100%; border-radius: 0 50rpx 0 20rpx" :src="item.thumbnail"></image>

				<view class="tag_1">
					<text lines="1" class="text_9">{{ item.type_text }}</text>
				</view>

				<view class="tag_2">
					<text lines="1" class="text_10">{{ item.title }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			val: '',
			main_body_id: '',
			model_id: '',
			list: []
		};
	},
	onLoad(o) {
		that = this;
		this.main_body_id = this.$db.get('main_body_id');
		this.model_id = o.id;
	},
	methods: {
		searchBtn() {
			this.$api.getContentList(
				{
					model_id: this.model_id,
					main_body_id: this.main_body_id,
					keywords: this.val,
					page: 1,
					pageSize: '10'
				},
				function (res) {
					that.list = res.data;
				}
			);
		},
		//精彩推荐内容
		recommendBtn(i) {
			this.$common.navigateTo(this.list[i].page);
		}
	}
};
</script>

<style>
.box {
	width: 100%;
	background-image: url('https://huli-app.wenlvti.net/app_static/wuyuan/static/shouhu/wyj-feiyi3-001.png');
	background-size: 100% 100%;
	background-attachment: fixed;
	background-repeat: repeat-y;
	height: 100%;
	padding-bottom: 50rpx;
}
.box_search {
	display: flex;
	margin: 40rpx 32rpx 0 46rpx;
	width: 650rpx;
	height: 80rpx;
}

.sousuo {
	width: 118rpx;
	height: 80rpx;
	text-align: center;
	color: #ffffff;
	line-height: 80rpx;
	background: #ca5642;
	border-radius: 10rpx;
}
.box_22 {
	height: 345rpx;
	display: flex;
	flex-direction: column;
	width: 686rpx;
	margin: 40rpx 0 0 47rpx;
}
.block_5 {
	position: relative;
	height: 345rpx;
	width: 645rpx;
	display: flex;
	flex-direction: column;
	margin-left: 9rpx;
}
.tag_1 {
	position: absolute;
	background-color: rgba(77, 113, 153, 1);
	border-radius: 9rpx 9rpx 32rpx 0rpx;
	height: 48rpx;
	display: flex;
	flex-direction: column;
	width: 86rpx;
}
.tag_2 {
	position: absolute;
	bottom: 36rpx;
	right: 20rpx;
}
.text_9 {
	width: 47rpx;
	height: 23rpx;
	overflow-wrap: break-word;
	color: rgba(255, 255, 255, 1);
	font-size: 24rpx;
	font-family: SourceHanSansCN-Bold;
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
	line-height: 24rpx;
	margin: 12rpx 0 0 19rpx;
}

.text_10 {
	width: 147rpx;
	height: 29rpx;
	overflow-wrap: break-word;
	color: #ffffff;
	font-size: 34rpx;
	font-family: Adobe Heiti Std R;
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	line-height: 30rpx;
}
</style>