619 lines
15 KiB
Vue
619 lines
15 KiB
Vue
<template>
|
||
<view class="b-page-home-mdl">
|
||
<view class="content-top">
|
||
<view class="content-top-process">
|
||
<view class="content-top-process-item">
|
||
<image class="content-top-process-item-img" :src="qnyurl('mdl-1.png','mdl')"
|
||
mode=""></image>
|
||
<view class="content-top-process-item-text">
|
||
选择餐厅
|
||
</view>
|
||
</view>
|
||
<view class="content-top-process-item">
|
||
<image class="content-top-process-item-img" :src="qnyurl('mdl-2.png','mdl')"
|
||
mode=""></image>
|
||
<view class="content-top-process-item-text">
|
||
选择菜品
|
||
</view>
|
||
</view>
|
||
<view class="content-top-process-item">
|
||
<image class="content-top-process-item-img" :src="qnyurl('mdl-3.png','mdl')"
|
||
mode=""></image>
|
||
<view class="content-top-process-item-text">
|
||
等待取餐码
|
||
</view>
|
||
</view>
|
||
<view class="content-top-process-item">
|
||
<image class="content-top-process-item-img" :src="qnyurl('mdl-4.png','mdl')"
|
||
mode=""></image>
|
||
<view class="content-top-process-item-text">
|
||
到店取餐
|
||
</view>
|
||
</view>
|
||
</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>
|
||
<!-- 店铺列表 -->
|
||
<!-- 因为骨架屏的颜色和UI设置背景色冲突所以在没有列表元素时先将背景色设置为白色 -->
|
||
<view class="Store-List" :style="{height:`${height}rpx`}">
|
||
<!-- 附近餐厅 -->
|
||
<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" :key="index">
|
||
<view class="infot">
|
||
<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>
|
||
<view class="btn" @tap="SETSHOPDETAIL(item);eattypeShow = true;">
|
||
去点餐
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<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" :key="index">
|
||
<view class="infot">
|
||
<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>
|
||
<view class="btn" @tap="SETSHOPDETAIL(item);eattypeShow = true;">
|
||
去点餐
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<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>
|
||
</view>
|
||
<!-- 选择就餐方式弹框 -->
|
||
<u-popup :show="eattypeShow" @close="eattypeShow = false" closeable>
|
||
<view class="poupconten">
|
||
<view class="shop-inofr">
|
||
<view class="shop-inofr-name">
|
||
<image class="icon" :src="qnyurl('sopicon.png')" mode=""></image>
|
||
<text>{{GetShopInfor['restaurant_name']}}</text>
|
||
</view>
|
||
<view class="shop-inofr-area">
|
||
{{GetShopInfor['restaurant_address']}}
|
||
</view>
|
||
</view>
|
||
<view class="hint">
|
||
温馨提示：<text :class="`themeColor-${BrandInfor['brand_id']}`">肯德基点餐为第三方供应商提供的代下单服务（暂不支持外卖）</text>，<text
|
||
class="text2">出餐后可凭取餐码到店取餐。如有疑问请及时联系在线客服！</text>
|
||
</view>
|
||
<view class="Way">
|
||
<view class="Way-title">请选择就餐方式</view>
|
||
<view class="Way-type">
|
||
<view class="Way-type-item " :class="[GetMODE == 'EAT_IN'?`theme-Union-Class-${BrandInfor['brand_id']}-1`:'']"
|
||
@tap="InforPage('EAT_IN')">
|
||
<view class="Way-type-item-img">
|
||
<image class="img" :src="qnyurl('diannei.png')" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="Way-type-item-right">
|
||
<view class="Way-type-item-right-text1">
|
||
店内就餐
|
||
</view>
|
||
<view class="Way-type-item-right-text2">
|
||
Dine In
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="Way-type-item" :class="[GetMODE == 'TAKE_AWAY'?`theme-Union-Class-${BrandInfor['brand_id']}-1`:'']"
|
||
@tap="InforPage('TAKE_AWAY')">
|
||
<view class="Way-type-item-img">
|
||
<image class="img" :src="qnyurl('dabao.png')" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="Way-type-item-right">
|
||
<view class="Way-type-item-right-text1">
|
||
打包带走
|
||
</view>
|
||
<view class="Way-type-item-right-text2">
|
||
Take Away
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
|
||
</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';
|
||
export default {
|
||
mixins: [mixin,restaurantmixins],
|
||
name: "b-page-home-mdl",
|
||
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: "#FFBC0F",
|
||
list: [{
|
||
name: '附近餐厅',
|
||
}, {
|
||
name: '我的关注',
|
||
}]
|
||
},
|
||
// 加载状态
|
||
loading:true,
|
||
};
|
||
},
|
||
computed: {
|
||
tabindex() {
|
||
return this['tabsconfig']['index']
|
||
},
|
||
},
|
||
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.initScrollView({
|
||
el: 'content-top'
|
||
}).then(res => {
|
||
this['height'] = res;
|
||
console.log(this['height'],'height')
|
||
// 获取列表
|
||
this.GetList();
|
||
// 获取收藏列表
|
||
// this.GetstoreCollectionList();
|
||
})
|
||
},
|
||
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() {
|
||
this['loading'] = true;
|
||
let parameters = {
|
||
brand_id: this['BrandInfor']['brand_id'],
|
||
city_code: this.GetCityCode,
|
||
address: this['keyword'],
|
||
}
|
||
restaurantQueryAPI(parameters).then(res => {
|
||
this['loading'] = false;
|
||
console.log(res,'res')
|
||
if(res['data']['data']['length'] <= 0){
|
||
uni.showToast({
|
||
title:'该区域暂无数据',
|
||
icon:'none'
|
||
});
|
||
return;
|
||
}
|
||
// 后端未按照分页数据格式返回所以前端自行分页
|
||
if (res['data']['data']['length'] > 0) {
|
||
// 赋值总长度
|
||
this['StoreList'][0]['count'] = res['count'];
|
||
// 辅助临时数据
|
||
this['temporaryData'] = res['data']['data'];
|
||
this['StoreList'][0]['page'] += 1;
|
||
// 取出数据
|
||
this.arrObtain('temporaryData', 0);
|
||
} else {
|
||
console.log('没数');
|
||
}
|
||
})
|
||
},
|
||
|
||
/**
|
||
* @获取关注冽表
|
||
* */
|
||
|
||
GetstoreCollectionList() {
|
||
this['loading'] = true;
|
||
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 {
|
||
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);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
// 顶部步骤/筛选/查询样式
|
||
.content-top {
|
||
width: 100%;
|
||
height: auto;
|
||
background-color: #ffffff;
|
||
|
||
&-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;
|
||
background-color: #F4F4F4;
|
||
// background-image: url(https://img.agrimedia.cn/chwl/v2/choose.png);
|
||
// background-size: 100% 100%;
|
||
// background-repeat: no-repeat;
|
||
padding: 0 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;
|
||
}
|
||
}
|
||
}
|
||
|
||
&-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;
|
||
background-color: #ffffff;
|
||
&-Item {
|
||
width: 100%;
|
||
height: auto;
|
||
background-color: #ffffff;
|
||
border-radius: 15rpx;
|
||
min-height: 155rpx;
|
||
padding: 32rpx;
|
||
margin-top: 20rpx;
|
||
display: flex;
|
||
align-items:center;
|
||
.infot{
|
||
flex: 1;
|
||
}
|
||
.btn{
|
||
width: 146rpx;
|
||
height: 56rpx;
|
||
border: 2rpx solid #FFBC0F;
|
||
border-radius: 28rpx;
|
||
text-align: center;
|
||
line-height: 56rpx;
|
||
font-size: 28rpx;
|
||
color: #FFA200;
|
||
margin-left: 15rpx;
|
||
}
|
||
&-Top {
|
||
&-Name {
|
||
font-size: $FONTSIZE30;
|
||
color: $THEMECOLOR4;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
&-distance {
|
||
font-size: $FONTSIZE26;
|
||
color: $THEMECOLOR5;
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
&-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>
|