649 lines
16 KiB
Vue
649 lines
16 KiB
Vue
<template>
|
||
<view class="b-page-home">
|
||
<view class="content-top">
|
||
<view class="store_background">
|
||
<image class="store_background-img" :src="qnyurl('store_background.jpg','xbk')" mode="widthFix"></image>
|
||
<view class="store_background-content">
|
||
<view class="store_background-content-text1">
|
||
<image class="img" :src="qnyurl('icon.png','xbk')" mode=""></image>
|
||
<text>自助点餐，不支持外卖</text>
|
||
</view>
|
||
<view class="store_background-content-text2">
|
||
到店前10~15分钟在线点餐，到店后直接在“取品台”领取即可
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 步骤 -->
|
||
<view class="content-top-process">
|
||
<view class="content-top-process-item">
|
||
<image class="content-top-process-item-img" :src="qnyurl('choose_one.png','xbk')" mode=""></image>
|
||
<view class="content-top-process-item-text">
|
||
选择餐厅
|
||
<text class="content-top-process-item-text-choose">》</text>
|
||
</view>
|
||
</view>
|
||
<view class="content-top-process-item">
|
||
<image class="content-top-process-item-img" :src="qnyurl('choose_two.png','xbk')" mode=""></image>
|
||
<view class="content-top-process-item-text">
|
||
选择菜品
|
||
<text class="content-top-process-item-text-choose">》</text>
|
||
</view>
|
||
</view>
|
||
<view class="content-top-process-item">
|
||
<image class="content-top-process-item-img" :src="qnyurl('choose_three.png','xbk')" mode=""></image>
|
||
<view class="content-top-process-item-text">
|
||
等待取餐码
|
||
<text class="content-top-process-item-text-choose">》</text>
|
||
</view>
|
||
</view>
|
||
<view class="content-top-process-item">
|
||
<image class="content-top-process-item-img" :src="qnyurl('choose_four.png','xbk')" mode=""></image>
|
||
<view class="content-top-process-item-text">
|
||
到店取餐
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 占位元素 -->
|
||
<view style="width: 100%;height: 100rpx;"></view>
|
||
<!-- 搜索店铺/地址选择 -->
|
||
<view class="content-top-search">
|
||
<view class="content-top-search-area-search">
|
||
<navigator url="/pages/restaurant/arealist/arealist" hover-class="none">
|
||
<view class="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" @search="search">
|
||
</u-search>
|
||
</view>
|
||
<view class="content-top-search-tabs">
|
||
<u-tabs @change="e=>{tabsconfig['index'] = e['index']}" :list="tabsconfig['list']"
|
||
:scrollable="tabsconfig['scrollable']" :lineColor="tabsconfig['lineColor']"
|
||
:lineWidth="tabsconfig['lineWidth']"></u-tabs>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="Store-List" :style="{height:`${height}rpx`,'background-color':loading? '#ffffff':'#F2F2F2'}">
|
||
<!-- 附近餐厅 -->
|
||
<view v-show="tabsconfig['index'] == 0">
|
||
<scroll-view scroll-y="true" class="scroll-Y" :style="{height:`${height}rpx`}"
|
||
@scrolltolower="scrolltolower">
|
||
<!-- 骨架屏占位元素 -->
|
||
<template v-for="(item,index) in StoreList[0]['list']">
|
||
<view class="Store-List-Item" @tap="PageShopHome(item)" :key="index">
|
||
<view class="Store-List-Item-Top">
|
||
<view class="Store-List-Item-Top-Name">
|
||
{{item['restaurant_name']}}
|
||
</view>
|
||
<view class="Store-List-Item-Top-distance">
|
||
{{item['distance']}}km
|
||
</view>
|
||
</view>
|
||
<view class="Store-List-Item-Area">
|
||
{{item['restaurant_address']}}
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<view style="width: 100%;height: 32rpx;"></view>
|
||
<view class="default" v-if="StoreList[0]['list']['length'] <= 0">
|
||
<img class="img" :src="qnyurl('default.png','rx')" alt="">
|
||
<text>该地区暂无门店信息</text>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<!-- 我的收藏 -->
|
||
<view v-show="tabsconfig['index'] == 1">
|
||
<scroll-view scroll-y="true" class="scroll-Y" :style="{height:`${height}rpx`}"
|
||
@scrolltolower="scrolltolower">
|
||
<template v-for="(item,index) in StoreList[1]['list']">
|
||
<view class="Store-List-Item" @tap="PageShopHome(item)" :key="index">
|
||
<view class="Store-List-Item-Top">
|
||
<view class="Store-List-Item-Top-Name">
|
||
{{item['restaurant_name']}}
|
||
</view>
|
||
<view class="Store-List-Item-Top-distance">
|
||
{{item['distance']}}m
|
||
</view>
|
||
</view>
|
||
<view class="Store-List-Item-Area">
|
||
{{item['restaurant_address']}}
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<view style="width: 100%;height: 32rpx;"></view>
|
||
<view class="default" v-if="StoreList[1]['list']['length'] <= 0">
|
||
<img class="img" :src="qnyurl('default.png','rx')" alt="">
|
||
<text>该地区暂无门店信息</text>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<!-- 加载状态 -->
|
||
<b-load :show="loading && height>0" position="absolute" width="79" height="80" color="#000000"></b-load>
|
||
<!-- 必须先确保scoll有高度 -->
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* @肯德基首页
|
||
* */
|
||
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
|
||
import mixin from '@/static/js/mixin/mixin.js';
|
||
// 请求接口
|
||
import {
|
||
restaurantQueryAPI,
|
||
storeCollectionListAPI
|
||
} from '@/request/restaurant/index.js';
|
||
|
||
// vuex
|
||
import {
|
||
mapGetters,
|
||
mapMutations
|
||
} from 'vuex';
|
||
export default {
|
||
mixins: [mixin,restaurantmixins],
|
||
name: "b-page-home",
|
||
data() {
|
||
return {
|
||
// 就餐方式
|
||
eattypeShow: false,
|
||
eat_type: 'EAT_IN',
|
||
// 店铺接口数据用于分页
|
||
temporaryData: [],
|
||
// 收藏接口数据用于分页
|
||
CollectiontemporaryData: [],
|
||
// 餐厅列表/收藏列表
|
||
StoreList: [{
|
||
page: 1,
|
||
count: 0,
|
||
list: []
|
||
},
|
||
{
|
||
page: 1,
|
||
count: 0,
|
||
list: []
|
||
},
|
||
],
|
||
// 餐厅列表scroll高度
|
||
height: 0,
|
||
// 搜索值
|
||
keyword: '',
|
||
// 滑动tabs配置参数参数
|
||
tabsconfig: {
|
||
// 当前激活索引
|
||
index: 0,
|
||
scrollable: false,
|
||
// 滑块宽度
|
||
lineWidth: '40',
|
||
// 滑块颜色
|
||
lineColor: "#00AF66",
|
||
list: [{
|
||
name: '附近餐厅',
|
||
}, {
|
||
name: '我的关注',
|
||
}]
|
||
},
|
||
// 加载状态
|
||
loading: true,
|
||
// 暂无门店
|
||
Show:false
|
||
};
|
||
},
|
||
computed: {
|
||
tabindex() {
|
||
return this['tabsconfig']['index']
|
||
},
|
||
// islist(){
|
||
// return this['StoreList'][0]['list']['length'] <= 0;
|
||
// }
|
||
},
|
||
watch: {
|
||
GetCityCode(val) {
|
||
console.log(val, '监听器');
|
||
// 用户自主切换地址时更换列表
|
||
this['StoreList'][0]['list'] = [];
|
||
this.GetList();
|
||
},
|
||
tabindex(val) {
|
||
if (val == 1) {
|
||
console.log(this['StoreList'][1]['list']);
|
||
this['StoreList'][1]['list'] = [];
|
||
this.GetstoreCollectionList();
|
||
}
|
||
},
|
||
},
|
||
mounted() {
|
||
console.log('进入选店组件');
|
||
// 获取列表
|
||
this.GetList();
|
||
},
|
||
methods: {
|
||
...mapMutations({
|
||
SETSHOPDETAIL: 'shopping/SETSHOPDETAIL',
|
||
SETMODE: 'shopping/SETMODE'
|
||
}),
|
||
|
||
/**
|
||
* @搜索
|
||
* */
|
||
search() {
|
||
if (this['tabsconfig']['index'] == 0) {
|
||
this['StoreList'][0]['page'] = 1;
|
||
this['StoreList'][0]['list'] = [];
|
||
this.GetList();
|
||
return
|
||
}
|
||
this['StoreList'][1]['page'] = 1;
|
||
this['StoreList'][1]['list'] = [];
|
||
this.GetstoreCollectionList();
|
||
},
|
||
/**
|
||
* @获取餐厅列表
|
||
* */
|
||
GetList() {
|
||
let self = this;
|
||
// 每次进入设置加载状态显示
|
||
self['loading'] = true;
|
||
// 每次进入隐藏暂无门店状态
|
||
self['Show'] = false;
|
||
// 延迟获取元素信息给渲染足够的时间
|
||
setTimeout(()=>{
|
||
self.initScrollView({
|
||
el: 'content-top',
|
||
}).then(eres => {
|
||
console.log(eres,'resresresres');
|
||
self['height'] = eres;
|
||
let parameters = {
|
||
brand_id: this['BrandInfor']['brand_id'],
|
||
city_code: this.GetCityCode,
|
||
address: this['keyword'],
|
||
}
|
||
restaurantQueryAPI(parameters).then(res => {
|
||
console.log(res,'餐厅列表');
|
||
self['loading'] = false;
|
||
// 后端未按照分页数据格式返回所以前端自行分页
|
||
if (res['data']['data']['length'] > 0) {
|
||
// 赋值总长度
|
||
self['StoreList'][0]['count'] = res['count'];
|
||
// 辅助临时数据
|
||
self['temporaryData'] = res['data']['data'];
|
||
self['StoreList'][0]['page'] += 1;
|
||
// 取出数据
|
||
self.arrObtain('temporaryData', 0);
|
||
} else {
|
||
self['Show'] = true;
|
||
console.log('没数');
|
||
};
|
||
|
||
})
|
||
});
|
||
},800)
|
||
},
|
||
|
||
/**
|
||
* @获取关注冽表
|
||
* */
|
||
|
||
GetstoreCollectionList() {
|
||
// 每次进入设置加载状态显示
|
||
this['loading'] = true;
|
||
// 每次进入隐藏暂无门店状态
|
||
this['Show'] = false;
|
||
let parameters = {
|
||
brand_id: this['BrandInfor']['brand_id'],
|
||
address: this['keyword'],
|
||
}
|
||
|
||
storeCollectionListAPI(parameters).then(data => {
|
||
this['loading'] = false;
|
||
if (data['data']['data']['length'] > 0) {
|
||
// 赋值总长度
|
||
this['StoreList'][1]['count'] = data['data']['count'];
|
||
// 辅助临时数据
|
||
this['CollectiontemporaryData'] = data['data']['data'];
|
||
this['StoreList'][1]['page'] += 1;
|
||
// 取出数据
|
||
this.arrObtain('CollectiontemporaryData', 1);
|
||
} else {
|
||
this['Show'] = false;
|
||
console.log('没数');
|
||
};
|
||
})
|
||
},
|
||
|
||
/**
|
||
* @进入餐厅
|
||
* */
|
||
InforPage(type) {
|
||
// 设置用户选择的就餐方式
|
||
this.SETMODE(type);
|
||
uni.navigateTo({
|
||
url: `/pages/restaurant/home/shop_home/shop_home?restaurant_id=${this['GetShopInfor']['restaurant_id']}`,
|
||
success: () => {
|
||
this['eattypeShow'] = false;
|
||
}
|
||
})
|
||
},
|
||
|
||
/**
|
||
* @scroll触底事件
|
||
* */
|
||
scrolltolower() {
|
||
// 触底防抖
|
||
uni.$u.debounce(() => {
|
||
// 是否是餐厅列表并且待取数组中的长度大于0
|
||
if (this['tabsconfig']['index'] == 0 && this['temporaryData']['length'] > 0) {
|
||
this.arrObtain('temporaryData', 0);
|
||
} else {
|
||
this.arrObtain('CollectiontemporaryData', 1);
|
||
};
|
||
}, 800, true)
|
||
|
||
},
|
||
|
||
/**
|
||
* @获取数据前十个
|
||
* */
|
||
arrObtain(key, index) {
|
||
let arr = this[key].splice(0, 9);
|
||
this['StoreList'][index]['list'].push(...arr);
|
||
},
|
||
|
||
/**
|
||
* @进入店铺
|
||
* */
|
||
PageShopHome(item){
|
||
this.SETSHOPDETAIL(item);
|
||
uni.navigateTo({
|
||
url: `/pages/restaurant/home/shop_home/shop_home?restaurant_id=${this['GetShopInfor']['restaurant_id']}`,
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page{
|
||
background-color: #ffffff;
|
||
};
|
||
|
||
// 顶部步骤/筛选/查询样式
|
||
.content-top {
|
||
width: 100%;
|
||
height: auto;
|
||
background-color: #ffffff;
|
||
position: relative;
|
||
.store_background {
|
||
width: 100%;
|
||
height: auto;
|
||
&-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;
|
||
}
|
||
}
|
||
}
|
||
|
||
// &-process {
|
||
// position: relative;
|
||
// width: 100%;
|
||
// height: 210rpx;
|
||
|
||
// .img {
|
||
// width: 100%;
|
||
// height: 100%;
|
||
// position: absolute;
|
||
// top: 0;
|
||
// left: 0;
|
||
// }
|
||
// }
|
||
|
||
&-process {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 32rpx;
|
||
box-sizing: border-box;
|
||
position: absolute;
|
||
width: 94%;
|
||
height: 210rpx;
|
||
top: 150rpx;
|
||
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;
|
||
|
||
&-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;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
// 列表样式
|
||
.Store-List {
|
||
padding: 0 32rpx;
|
||
position: relative;
|
||
&-Item {
|
||
width: 100%;
|
||
height: auto;
|
||
background-color: #ffffff;
|
||
border-radius: 15rpx;
|
||
min-height: 155rpx;
|
||
padding: 32rpx;
|
||
margin-top: 20rpx;
|
||
|
||
&-Top {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
margin-bottom: 30rpx;
|
||
|
||
&-Name {
|
||
font-size: $FONTSIZE30;
|
||
color: $THEMECOLOR4;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
&-distance {
|
||
font-size: $FONTSIZE26;
|
||
color: $THEMECOLOR5;
|
||
flex: 1;
|
||
text-align: right;
|
||
}
|
||
}
|
||
|
||
&-Area {
|
||
font-size: $FONTSIZE26;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 就餐方式弹框
|
||
.poupconten {
|
||
width: 100%;
|
||
height: 656rpx;
|
||
background-color: #ffffff;
|
||
padding: 32rpx;
|
||
|
||
.shop-inofr {
|
||
margin-bottom: 50rpx;
|
||
|
||
&-name {
|
||
font-size: $FONTSIZE32;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
|
||
.icon {
|
||
width: 33rpx;
|
||
height: 30rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
|
||
&-area {
|
||
font-size: $FONTSIZE24;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
.hint {
|
||
font-size: $FONTSIZE24;
|
||
line-height: 45rpx;
|
||
|
||
.text1 {
|
||
color: #DA2F35;
|
||
}
|
||
|
||
.text2 {
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
// 方式
|
||
.Way {
|
||
width: 100%;
|
||
|
||
&-title {
|
||
font-size: $FONTSIZE24;
|
||
color: #333333;
|
||
line-height: 40rpx;
|
||
}
|
||
|
||
&-type {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 32rpx;
|
||
|
||
&-rightactivation {
|
||
color: #FFFFFF !important;
|
||
border-color: #DE393F !important;
|
||
background-color: #DE393F !important;
|
||
}
|
||
|
||
&-item {
|
||
width: 320rpx;
|
||
height: 130rpx;
|
||
border: 1rpx solid #E3E3E3;
|
||
border-radius: 6rpx;
|
||
text-align: center;
|
||
color: #666666;
|
||
border-radius: 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
|
||
&-img {
|
||
width: 74rpx;
|
||
height: 61rpx;
|
||
|
||
.img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
&-right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
|
||
&-text1 {
|
||
font-size: $FONTSIZE30;
|
||
}
|
||
|
||
&-text2 {
|
||
font-size: $FONTSIZE24;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|