397 lines
10 KiB
Vue
397 lines
10 KiB
Vue
<template>
|
||
<view class="b-page-home">
|
||
<view class="content-top">
|
||
<view class="content-top-banner">
|
||
<image class="img" :src="qnyurl('banner-1.jpg','rx')" mode=""></image>
|
||
</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="width: 50rpx;height: 30rpx;display: flex;justify-content: center;align-items: center;">
|
||
<image style="width: 15rpx;height: 12rpx;" class="img" :src="qnyurl('xiala.jpg','rx')">
|
||
</image>
|
||
</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>
|
||
|
||
<!-- 店铺列表 -->
|
||
<!-- 因为骨架屏的颜色和UI设置背景色冲突所以在没有列表元素时先将背景色设置为白色 -->
|
||
<view class="Store-List" :style="{height:`${height}rpx`,'background-color':'#F2F2F2'}">
|
||
<!-- 附近餐厅 -->
|
||
<view v-show="tabsconfig['index'] == 0">
|
||
<scroll-view scroll-y="true" class="scroll-Y" :style="{height:`${height}rpx`,'position': 'relative'}"
|
||
@scrolltolower="scrolltolower">
|
||
<!-- 骨架屏占位元素 -->
|
||
<template v-if="StoreList[0]['list']['length'] > 0">
|
||
<!-- 组件内部会获取到品牌类型,从而显示对应类型的店铺列表样式 -->
|
||
<view style="padding-bottom: 32rpx;" v-for="(item,index) in StoreList[0]['list']">
|
||
<!-- 店铺列表样式 -->
|
||
<b-shop-list-item :item="item" :key="index" @itemclick="SETSHOPDETAIL(item);eattypeShow = true">
|
||
</b-shop-list-item>
|
||
</view>
|
||
</template>
|
||
<template v-else>
|
||
<!-- 必须先确保scoll有高度 -->
|
||
<!-- 缺省图 -->
|
||
<view class="default" v-if="Show == 1">
|
||
<img class="img" :src="qnyurl('default.png','rx')" alt="">
|
||
<text>该地区暂无门店信息</text>
|
||
</view>
|
||
<!-- 加载中 -->
|
||
<b-load :show="Show == 2" position="absolute" background="transparent" width="79" height="80" color="#000000"></b-load>
|
||
</template>
|
||
|
||
<!-- <b-shop-load type="load" width="79" height="74" :show="loading"></b-shop-load> -->
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
<u-modal :show="eattypeShow" title="温馨提示" width="580rpx">
|
||
<template v-slot:default>
|
||
<view class="slot-content">
|
||
<view class="slot-content-Tips">
|
||
瑞幸咖啡点餐为<text class="text1">第三方提供的点餐服务</text>，该服务与瑞幸官方无关，有问题请联系在线客服。
|
||
</view>
|
||
<view class="slot-content-Tips2">
|
||
<view>
|
||
● 优惠点餐，不支持开发票!
|
||
</view>
|
||
<view>
|
||
● 出餐后不支持退款！
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template v-slot:confirmButton>
|
||
<view class="confirmButton" @tap="InforPage">
|
||
我知道了
|
||
</view>
|
||
</template>
|
||
</u-modal>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import mixin from '@/static/js/mixin/mixin.js';
|
||
import restaurantmixins from '@/static/js/mixin/restaurantmixins.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: "#C63836",
|
||
list: [{
|
||
name: '附近餐厅',
|
||
}, {
|
||
name: '我的关注',
|
||
}]
|
||
},
|
||
// 加载状态
|
||
loading: true,
|
||
};
|
||
},
|
||
computed: {
|
||
tabindex() {
|
||
return this['tabsconfig']['index']
|
||
},
|
||
|
||
Show(){
|
||
console.log(this['StoreList'][0]['list']['length'],'length');
|
||
console.log(this['loading'],'loading');
|
||
// 显示没地区门店
|
||
if(this['StoreList'][0]['list']['length'] <= 0 && !this['loading'] && this['height'] > 0){
|
||
return 1;
|
||
};
|
||
// 显示正在加载
|
||
if(this['loading'] && this['height'] > 0){
|
||
return 2
|
||
}
|
||
}
|
||
// 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: {
|
||
|
||
|
||
/**
|
||
* @搜索
|
||
* */
|
||
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;
|
||
this['loading'] = true;
|
||
// 预留足够的时间让DOM渲染完毕
|
||
setTimeout(()=>{
|
||
self.initScrollView({
|
||
el: 'content-top',
|
||
}).then(eres => {
|
||
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,'ressssssss');
|
||
self['loading'] = false;
|
||
if (res['data']['data']['length'] <= 0) {
|
||
uni.showToast({
|
||
title: '该区域暂无数据',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
// 后端未按照分页数据格式返回所以前端自行分页
|
||
if (res['data']['data']['length'] > 0) {
|
||
// 赋值总长度
|
||
self['StoreList'][0]['count'] = res['data']['count'];
|
||
// 辅助临时数据
|
||
self['temporaryData'] = res['data']['data'];
|
||
self['StoreList'][0]['page'] += 1;
|
||
// 取出数据
|
||
self.arrObtain('temporaryData', 0);
|
||
} else {
|
||
console.log('没数1');
|
||
}
|
||
}).catch(err=>{
|
||
self['loading'] = false;
|
||
})
|
||
})
|
||
},1000)
|
||
},
|
||
|
||
/**
|
||
* @获取关注冽表
|
||
* */
|
||
|
||
GetstoreCollectionList() {
|
||
let parameters = {
|
||
brand_id: this['BrandInfor']['brand_id'],
|
||
address: this['keyword'],
|
||
}
|
||
|
||
storeCollectionListAPI(parameters).then(data => {
|
||
if (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 {
|
||
console.log('没数');
|
||
}
|
||
})
|
||
},
|
||
|
||
/**
|
||
* @进入餐厅
|
||
* */
|
||
InforPage(item) {
|
||
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);
|
||
console.log(this['StoreList'][index]['list'], 'list');
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
// 顶部步骤/筛选/查询样式
|
||
.content-top {
|
||
width: 100%;
|
||
height: auto;
|
||
background-color: #ffffff;
|
||
|
||
&-banner {
|
||
width: 100%;
|
||
height: 314rpx;
|
||
|
||
.img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
|
||
&-search {
|
||
background-color: #ffffff;
|
||
padding: 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;
|
||
}
|
||
|
||
// 就餐方式弹框
|
||
.slot-content-Tips {
|
||
font-size: 30rpx;
|
||
line-height: 40rpx;
|
||
.text1 {
|
||
color: #DB9F5E;
|
||
}
|
||
}
|
||
|
||
.slot-content-Tips2 {
|
||
width: 100%;
|
||
background-color: #FFF9F3;
|
||
margin-top: 20rpx;
|
||
color: #FF7910;
|
||
font-size: 26rpx;
|
||
line-height: 49rpx;
|
||
padding: 15rpx 32rpx;
|
||
}
|
||
.confirmButton{
|
||
background: linear-gradient(-77deg, #4A6FE7, #83ACFF);
|
||
border-radius: 43px;
|
||
color: #ffffff;
|
||
font-size: 30rpx;
|
||
text-align: center;
|
||
line-height: 80rpx;
|
||
}
|
||
</style>
|