H5-ThreeDoorder/pages/restaurant/home/components/Home-Head-MDL/Home-Head-MDL.vue

<template>
	<view class="MDL-home-head">
		<view class="MDL-content-top-process">
			<view class="MDL-content-top-process-item">
				<image class="MDL-content-top-process-item-img" :src="qnyurl('mdl-1.png','mdl')" mode=""></image>
				<view class="MDL-content-top-process-item-text">
					选择餐厅
				</view>
			</view>
			<view class="MDL-content-top-process-item">
				<image class="MDL-content-top-process-item-img" :src="qnyurl('mdl-2.png','mdl')" mode=""></image>
				<view class="MDL-content-top-process-item-text">
					选择菜品
				</view>
			</view>
			<view class="MDL-content-top-process-item">
				<image class="MDL-content-top-process-item-img" :src="qnyurl('mdl-3.png','mdl')" mode=""></image>
				<view class="MDL-content-top-process-item-text">
					等待取餐码
				</view>
			</view>
			<view class="MDL-content-top-process-item">
				<image class="MDL-content-top-process-item-img" :src="qnyurl('mdl-4.png','mdl')" mode=""></image>
				<view class="MDL-content-top-process-item-text">
					到店取餐
				</view>
			</view>
		</view>
		<!-- 地址/搜索/选择 -->
		<view class="MDL-content-top-search">
			<view class="MDL-content-top-search-area-search">
				<navigator url="/pages/restaurant/arealist/arealist" hover-class="none">
					<view class="MDL-content-top-search-area-search-text">
						<!-- 第一次获取肯定是获取不到的，主要是动态显示用户改变的地址 -->
						{{UserArae1?UserArae1:UserArae2['city']}}
						<view style="transform: rotate(90deg);">
							<text class="icon iconfont icon-youjiantou"></text>
						</view>
					</view>
				</navigator>
				<u-search placeholder="输入门店名称查询" :showAction="false" v-model="keyword" @input="search" @search="search">
				</u-search>
			</view>
			<view class="MDL-content-top-search-tabs">
				<u-tabs @change="change" :list="tabsconfig['list']" :scrollable="tabsconfig['scrollable']"
					:lineColor="Brand()['ThemeColor']" :lineWidth="tabsconfig['lineWidth']"></u-tabs>
			</view>
		</view>
	</view>
</template>

<script>
	// 点餐混入
	import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
	// 公用混入
	import mixin from '@/static/js/mixin/mixin.js';
	export default {
		name:'Home-Head-MDL',
		mixins: [mixin, restaurantmixins],
		data() {
			return {
				// 搜索
				keyword: '',
				// 顶部tabs
				tabsconfig: {
					// 当前激活索引
					index: 0,
					scrollable: false,
					// 滑块宽度
					lineWidth: '40',
					list: [{
						name: '附近餐厅',
					}, {
						name: '我的关注',
					}]
				},
			}
		},
		computed: {
			brandColor() {
				switch (this['BrandInfor']['brand_id']) {
					case 1:
						return "#C63836";
					case 5:
						return "#FFBC0D"
				}
			}
		},
		mounted() {
			// this.$emit('_Change', this['tabsconfig']['index']);
		},
		methods: {
			// 输入框确认事件
			search() {
				let self = this;
				uni.$u.throttle(()=>{
					self.$emit('_Search', self['keyword']);
				}, 500)
			},

			// tabs切换事件
			change(e) {
				this['tabsconfig']['index'] = e['index'];
				this.$emit('_Change', this['tabsconfig']['index']);
			},

			SetTabnum(n, k) {
				console.log(n, k, '123123');
				let list = [{
					name: `附近餐厅（${n}）`,
				}, {
					name: `我的关注（${k}）`,
				}];
				this.$set(this['tabsconfig'], 'list', list)
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .uni-scroll-view-content {
		padding: 0 !important;
	}

	.MDL-content-top-process {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #F4F4F4;
		padding: 32rpx;
		box-sizing: border-box;

		&-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: $FONTSIZE28;
			color: #000000;

			&-img {
				width: 84rpx;
				height: 84rpx;
				border-radius: 50%;
				box-shadow: 0 0 20rpx rgba(255, 255, 255, 0.3);
				margin-bottom: 13rpx;
			}
		}
	}

	.MDL-content-top-search {
		background-color: #ffffff;
		padding-top: 32rpx;
		border-radius: 20rpx 20rpx 0 0;

		&-area-search {
			padding: 0 32rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			&-text {
				font-size: $FONTSIZE28;
				display: flex;
				align-items: center;

				.icon-youjiantou {
					font-size: $FONTSIZE25;
					color: #666666;
					margin: 0 15rpx;
				}
			}
		}
	}
</style>