177 lines
3.9 KiB
Vue
177 lines
3.9 KiB
Vue
<template>
|
||
<view class="RX-home-head">
|
||
<view class="RX-home-head-b">
|
||
<image class="img" :src="qnyurl('banner-1.jpg','rx')" mode=""></image>
|
||
</view>
|
||
<view class="RX-home-head-x-search">
|
||
<view class="RX-home-head-x-search-area-search">
|
||
<navigator url="/pages/restaurant/arealist/arealist" hover-class="none">
|
||
<view class="RX-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>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// 点餐混入
|
||
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
|
||
// 公用混入
|
||
import mixin from '@/static/js/mixin/mixin.js';
|
||
export default {
|
||
name:'Home-Head-RX',
|
||
mixins: [mixin, restaurantmixins],
|
||
data() {
|
||
return {
|
||
// 搜索
|
||
keyword: '',
|
||
// 顶部tabs
|
||
tabsconfig: {
|
||
// 当前激活索引
|
||
index: 0,
|
||
scrollable: false,
|
||
// 滑块宽度
|
||
lineWidth: '40',
|
||
list: [{
|
||
name: '附近门店',
|
||
}, {
|
||
name: '我的收藏',
|
||
}]
|
||
},
|
||
}
|
||
},
|
||
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">
|
||
.RX-home-head{
|
||
width: 100%;
|
||
height: auto;
|
||
background-color: #ffffff;
|
||
&-b{
|
||
width: 100%;
|
||
height: 314rpx;
|
||
.img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
&-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: 32rpx 0;
|
||
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>
|