252 lines
6.6 KiB
Vue
252 lines
6.6 KiB
Vue
<template>
|
||
<view class="XBK-home-head">
|
||
<view class="XBK-home-head-b">
|
||
<view class="XBK-home-head-b-background">
|
||
<image class="XBK-home-head-b-background-img" :src="qnyurl('store_background.jpg','xbk')" mode="widthFix"></image>
|
||
<view class="XBK-home-head-b-background-content">
|
||
<view class="XBK-home-head-b-background-content-text1">
|
||
<image class="img" :src="qnyurl('icon.png','xbk')" mode=""></image>
|
||
<text>自助点餐，不支持外卖</text>
|
||
</view>
|
||
<view class="XBK-home-head-b-background-content-text2">
|
||
到店前10~15分钟在线点餐，到店后直接在“取品台”领取即可
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="XBK-home-head-x">
|
||
<view class="XBK-home-head-x-process">
|
||
<view class="XBK-home-head-x-process-item">
|
||
<image class="XBK-home-head-x-process-item-img" :src="qnyurl('choose_one.png','xbk')" mode=""></image>
|
||
<view class="XBK-home-head-x-process-item-text">
|
||
选择餐厅
|
||
<text class="XBK-home-head-x-process-item-text-choose">》</text>
|
||
</view>
|
||
</view>
|
||
<view class="XBK-home-head-x-process-item">
|
||
<image class="XBK-home-head-x-process-item-img" :src="qnyurl('choose_two.png','xbk')" mode=""></image>
|
||
<view class="XBK-home-head-x-process-item-text">
|
||
选择菜品
|
||
<text class="XBK-home-head-x-process-item-text-choose">》</text>
|
||
</view>
|
||
</view>
|
||
<view class="XBK-home-head-x-process-item">
|
||
<image class="XBK-home-head-x-process-item-img" :src="qnyurl('choose_three.png','xbk')" mode=""></image>
|
||
<view class="XBK-home-head-x-process-item-text">
|
||
等待取餐码
|
||
<text class="XBK-home-head-x-process-item-text-choose">》</text>
|
||
</view>
|
||
</view>
|
||
<view class="XBK-home-head-x-process-item">
|
||
<image class="XBK-home-head-x-process-item-img" :src="qnyurl('choose_four.png','xbk')" mode=""></image>
|
||
<view class="XBK-home-head-x-process-item-text">
|
||
到店取餐
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="XBK-home-head-x-search">
|
||
<view class="XBK-home-head-x-search-area-search">
|
||
<navigator url="/pages/restaurant/arealist/arealist" hover-class="none">
|
||
<view class="XBK-home-head-x-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="XBK-home-head-x-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-XBK',
|
||
mixins: [mixin, restaurantmixins],
|
||
data() {
|
||
return {
|
||
// 搜索
|
||
keyword: '',
|
||
// 顶部tabs
|
||
tabsconfig: {
|
||
// 当前激活索引
|
||
index: 0,
|
||
scrollable: false,
|
||
// 滑块宽度
|
||
lineWidth: '40',
|
||
list: [{
|
||
name: '附近门店',
|
||
}, {
|
||
name: '我的收藏',
|
||
}]
|
||
},
|
||
}
|
||
},
|
||
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 scoped lang="scss">
|
||
.XBK-home-head{
|
||
width: 100%;
|
||
height: auto;
|
||
background-color: #ffffff;
|
||
&-b{
|
||
&-background {
|
||
width: 100%;
|
||
height: auto;
|
||
position: relative;
|
||
&-img {
|
||
width: 100%;
|
||
display: block;
|
||
}
|
||
&-content{
|
||
color: #ffffff;
|
||
padding: 20rpx 20rpx 0 20rpx;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
&-text1{
|
||
font-size: 30rpx;
|
||
line-height: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
.img{
|
||
width: 20rpx;
|
||
height: 30rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
&-text2{
|
||
font-size: 24rpx;
|
||
opacity: 0.7;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
&-x{
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100rpx;
|
||
&-process {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 32rpx;
|
||
box-sizing: border-box;
|
||
position: absolute;
|
||
width: 94%;
|
||
height: 210rpx;
|
||
top: -110rpx;
|
||
left: 50%;
|
||
-webkit-transform: translateX(-50%);
|
||
transform: translateX(-50%);
|
||
border-radius: 15rpx;
|
||
overflow: hidden;
|
||
background-repeat: no-repeat;
|
||
box-shadow: -5px 0px 20px 0px rgba(101, 101, 101, 0.2400);
|
||
background-color: #ffffff;
|
||
|
||
&-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
font-size: $FONTSIZE25;
|
||
color: #333333;
|
||
|
||
&-img {
|
||
width: 84rpx;
|
||
height: 84rpx;
|
||
border-radius: 50%;
|
||
box-shadow: 0 0 20rpx rgba(255, 255, 255, 0.3);
|
||
margin-bottom: 13rpx;
|
||
}
|
||
|
||
&-text {
|
||
position: relative;
|
||
|
||
&-choose {
|
||
font-size: 25rpx;
|
||
position: absolute;
|
||
right: -60%;
|
||
top: -5%;
|
||
transform: translateX(-50%);
|
||
color: #a0a0a0;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
&-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>
|