1209 lines
32 KiB
Vue
1209 lines
32 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- 店铺 -->
|
||
<view class="Shop" v-show="Getnavindex == 0 && !iswx">
|
||
<!-- 店铺列表头部样式 -->
|
||
<view class="head" ref="head">
|
||
<!-- 肯德基顶部 -->
|
||
<HomeHeadKDJ v-if="BrandInfor['brand_id'] == 1" ref="Head" @_Change="_Change" @_Search="_Search">
|
||
</HomeHeadKDJ>
|
||
<!-- 麦当劳顶部 -->
|
||
<HomeHeadMDL v-if="BrandInfor['brand_id'] == 5" ref="Head" @_Change="_Change" @_Search="_Search">
|
||
</HomeHeadMDL>
|
||
<!-- 星巴克顶部 -->
|
||
<HomeHeadXBK v-if="BrandInfor['brand_id'] == 10" ref="Head" @_Change="_Change" @_Search="_Search">
|
||
</HomeHeadXBK>
|
||
<!-- 瑞幸顶部 -->
|
||
<HomeHeadRX v-if="BrandInfor['brand_id'] == 13" ref="Head" @_Search="_Search">
|
||
</HomeHeadRX>
|
||
<!-- 奈雪的茶顶部 -->
|
||
<HomeHeadNX v-if="BrandInfor['brand_id'] == 2" ref="Head" @_Change="_Change" @_Search="_Search">
|
||
</HomeHeadNX>
|
||
</view>
|
||
|
||
<!-- 店铺列表 -->
|
||
<view class="List-Conten" :class="[
|
||
BrandInfor['brand_id'] == 1 || BrandInfor['brand_id'] == 13?
|
||
'grey': (BrandInfor['brand_id'] == 5 || BrandInfor['brand_id'] == 10)?'MDLBACK':'']">
|
||
<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower"
|
||
:style="{'height':ScollViewHeight}">
|
||
<!-- 网传循环方法节省资源(尝试) -->
|
||
<view class="Store-List" v-for="(item,Tabindex) in (index == 0?ShopList:LikeList)" :key="Tabindex">
|
||
<!-- 肯德基 -->
|
||
<template v-if="BrandInfor['brand_id'] == 1">
|
||
<view class="Store-List-Shop-MDL" v-for="(item1,index1) in item" :key="index1"
|
||
@tap="HomePage(item1)">
|
||
<view class="Store-List-Shop-MDL-Top">
|
||
<view class="Store-List-Shop-MDL-Top-Name">
|
||
{{item1['restaurant_name']}}
|
||
</view>
|
||
<view class="Store-List-Shop-MDL-Top-State">
|
||
营业中
|
||
</view>
|
||
<!-- <view class="Store-List-Shop-MDL-Top-State2" v-else>
|
||
未营业
|
||
</view> -->
|
||
<view class="Store-List-Shop-MDL-Top-distance">
|
||
距离您{{item1['distance']}}千米
|
||
</view>
|
||
</view>
|
||
<view class="Store-List-Shop-MDL-Address">
|
||
{{item1['restaurant_address']}}
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<!-- 奈雪的茶 -->
|
||
<template v-if="BrandInfor['brand_id'] == 2">
|
||
<view class="Store-List-Shop-NX" @tap="HomePage(item1)" v-for="(item1,index1) in item"
|
||
:key="index1">
|
||
<view class="Store-List-Shop-NX-Top-NX">
|
||
<view class="Store-List-Shop-NX-Top-NX-Left">
|
||
<view class="Store-List-Shop-NX-Top-NX-Left-Title">
|
||
{{item1['restaurant_name']}}
|
||
</view>
|
||
<b-restaurant-state :item="item1"></b-restaurant-state>
|
||
</view>
|
||
<view class="Store-List-Shop-NX-Top-NX-Right">
|
||
<!-- @tap.stop="openLocation(item1['latitude'],item1['longitude'])" -->
|
||
<img class="img"
|
||
:src="qnyurl('Navigation.png','nx')" alt="">
|
||
<view class="Store-List-Shop-NX-Top-NX-Right-distance">
|
||
距离您{{item1['distance']}}千米
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="Store-List-Shop-NX-Area-NX">
|
||
<image class="img" :src="qnyurl('areaicon.png','rx')" mode=""></image>
|
||
<view class="Store-List-Item-Area-NX-text">
|
||
{{item1['restaurant_address']}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<!-- 麦当劳 -->
|
||
<template v-if="BrandInfor['brand_id'] == 5">
|
||
<view class="Store-List-Shop-KDJ" v-for="(item1,index1) in item" :key="index1">
|
||
<view class="Store-List-Shop-KDJ-Infot">
|
||
<view class="Store-List-Shop-KDJ-Top">
|
||
<view class="Store-List-Shop-KDJ-Top-Name">
|
||
{{item1['restaurant_name']}}
|
||
</view>
|
||
<view class="Store-List-Shop-KDJ-Top-distance">
|
||
距离您{{item1['distance']}}千米
|
||
</view>
|
||
</view>
|
||
<view class="Store-List-Shop-KDJ-Area">
|
||
{{item1['restaurant_address']}}
|
||
</view>
|
||
</view>
|
||
<view class="btn" @tap="HomePage(item1)">
|
||
去点餐
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<!-- 星巴克 -->
|
||
<template v-if="BrandInfor['brand_id'] == 10">
|
||
<view class="Store-List-Shop-XBK" @tap="HomePage(item1)" v-for="(item1,index1) in item"
|
||
:key="index1">
|
||
<view class="Store-List-Shop-XBK-Top">
|
||
<view class="Store-List-Shop-XBK-Top-Name">
|
||
{{item1['restaurant_name']}}
|
||
</view>
|
||
<view class="Store-List-Shop-XBK-Top-distance">
|
||
距离您{{item1['distance']}}千米
|
||
</view>
|
||
</view>
|
||
<view class="Store-List-Shop-XBK-Area">
|
||
{{item1['restaurant_address']}}
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<!-- 瑞幸 -->
|
||
<template v-if="BrandInfor['brand_id'] == 13">
|
||
<view class="Store-List-Shop-RX" @tap="HomePage(item1)" v-for="(item1,index1) in item"
|
||
:key="index1">
|
||
<view class="Store-List-Shop-RX-Top-RX">
|
||
<view class="Store-List-Shop-RX-Top-RX-Left">
|
||
<view class="Store-List-Shop-RX-Top-RX-Left-Title">
|
||
{{item1['restaurant_name']}}
|
||
</view>
|
||
<b-restaurant-state :item="item1"></b-restaurant-state>
|
||
</view>
|
||
<view class="Store-List-Shop-RX-Top-RX-Right">
|
||
<!-- @tap.stop="openLocation(item1['latitude'],item1['longitude'])" -->
|
||
<img class="img"
|
||
:src="qnyurl('Navigation.png','rx')" alt="">
|
||
<view class="Store-List-Shop-RX-Top-RX-Right-distance">
|
||
距离您{{item1['distance']}}千米
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="Store-List-Shop-RX-Area-RX">
|
||
<image class="img" :src="qnyurl('areaicon.png','rx')" mode=""></image>
|
||
<view class="Store-List-Item-Area-RX-text">
|
||
{{item1['restaurant_address']}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
</view>
|
||
<b-load :show="LoadType == 'store'" position="absolute" type='store' width="160" height="132"
|
||
:text="index?'暂无收藏':'该地区暂无门店信息'" color="#000000"></b-load>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 订单 -->
|
||
<view class="Orders" v-show=" Getnavindex == 1">
|
||
<view class="Orders-Toggle-Type" :style="{'background-color':`rgba(255,255,255,${backgroundcolor})`}">
|
||
<OrderStatus @commission="Typetoggle" :un_commission_count="count['un_commission_total']" :commission_count="count['commission_total']"></OrderStatus>
|
||
<!-- <view class="Orders-Toggle-Type-Item" @tap="Typetoggle(0)">
|
||
待结算{{count['un_commission_total']}}单
|
||
</view>
|
||
<view class="Orders-Toggle-Type-Item" @tap="Typetoggle(1)">
|
||
已结算{{count['commission_total']}}单
|
||
</view> -->
|
||
</view>
|
||
<!-- 占位元素 -->
|
||
<view style="width: 100%;height: 200rpx;"></view>
|
||
<!-- 订单列表 -->
|
||
<view class="Orders-List" :style="{paddingBottom:OrderBottonPadding}" v-if="orders['List']['length']">
|
||
<view class="Orders-List-Item" v-for="(item,index) in orders['List']" :key="index">
|
||
<OrderItemKDJ v-if="item1['brand_id'] == 1" :item="item1" v-for="(item1,index1) in item"
|
||
:key="index1"></OrderItemKDJ>
|
||
<OrderItemNX v-if="item1['brand_id'] == 2" :item="item1" v-for="(item1,index1) in item"
|
||
:key="index1"></OrderItemNX>
|
||
<OrderItemMDL v-if="item1['brand_id'] == 5" :item="item1" v-for="(item1,index1) in item"
|
||
:key="index1"></OrderItemMDL>
|
||
<OrderItemXBK v-if="item1['brand_id'] == 10" :item="item1" v-for="(item1,index1) in item"
|
||
:key="index1"></OrderItemXBK>
|
||
<OrderItemRX v-if="item1['brand_id'] == 13" :item="item1" v-for="(item1,index1) in item"
|
||
:key="index1"></OrderItemRX>
|
||
</view>
|
||
<!-- 加载更多状态 -->
|
||
<u-loadmore :status="orders['status']" />
|
||
</view>
|
||
<!-- 订单加载状态 -->
|
||
<b-load :show="LoadType == 'orders' && orders['List']['length'] <= 0" z-index="none" position="absolute" type='orders' width="160" height="132" color="#000000" background="transparent"></b-load>
|
||
</view>
|
||
<template v-if="!iswx">
|
||
<!-- 底部导航组件 -->
|
||
<view class="Nav" >
|
||
<restaurantNav ref="restaurantNav"></restaurantNav>
|
||
</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="text1"
|
||
:class="`themeColor-${BrandInfor['brand_id']}`">{{BrandInfor['brand_name']}}点餐为第三方供应商提供的代下单服务（暂不支持外卖）</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="SetEatMode('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="SetEatMode('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>
|
||
|
||
<!-- 瑞星/星巴克进入店铺首页时的温馨提示 -->
|
||
<u-modal :show="eattypeShow2" closeOnClickOverlay @close="eattypeShow2 = false" title="温馨提示" width="580rpx">
|
||
<template v-slot:default>
|
||
<view class="slot-content">
|
||
<view class="slot-content-Tips">
|
||
{{Brand()['BrandName']}}点餐为<text :style="{color:Brand()['ThemeColor']}">第三方提供的点餐服务</text>，该服务与{{Brand()['BrandName']}}官方无关，有问题请联系在线客服。
|
||
</view>
|
||
<view class="slot-content-Tips2">
|
||
<view>
|
||
● 优惠点餐，不支持开发票!
|
||
</view>
|
||
<view>
|
||
● 出餐后不支持退款！
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template v-slot:confirmButton>
|
||
<view class="confirmButton" :style="Brand()['customStyle']['BtnStyle'][0]">
|
||
<navigator url="/pages/restaurant/home/shop_home/shop_home" @tap="eattypeShow2 = false">
|
||
我知道了
|
||
</navigator>
|
||
</view>
|
||
</template>
|
||
</u-modal>
|
||
|
||
<b-load :show="LoadType == 'load'" position="absolute" type='load' width="79" height="80"
|
||
color="#ccc" background="rgba(0,0,0,0.05)"></b-load>
|
||
<!-- 没有店铺 -->
|
||
<!-- <b-load :show="LoadType == 'load'" position="absolute" type='load' width="79" height="80"
|
||
:color="Brand()['ThemeColor']" background="rgba(0,0,0,0.05)"></b-load> -->
|
||
</template>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapMutations
|
||
} from 'vuex';
|
||
// 肯德基店铺列表头部
|
||
import HomeHeadKDJ from './components/Home-Head-KDJ/Home-Head-KDJ.vue';
|
||
// 麦当劳店铺列表头部
|
||
import HomeHeadMDL from './components/Home-Head-MDL/Home-Head-MDL.vue';
|
||
// 星巴克店铺列表头部
|
||
import HomeHeadXBK from './components/Home-Head-XBK/Home-Head-XBK.vue';
|
||
// 瑞幸店铺列表头部
|
||
import HomeHeadRX from './components/Home-Head-RX/Home-Head-RX.vue';
|
||
//奈雪的茶店铺列表头部
|
||
import HomeHeadNX from './components/Home-Head-NX/Home-Head-NX.vue';
|
||
// 底部导航
|
||
import restaurantNav from './components/restaurant-nav/restaurant-nav.vue';
|
||
// 肯德基订单组件
|
||
import OrderItemKDJ from './components/Order-Item-KDJ/Order-Item-KDJ.vue';
|
||
// 麦当劳订单组件
|
||
import OrderItemMDL from './components/Order-Item-MDL/Order-Item-MDL.vue';
|
||
// 星巴克订单组件
|
||
import OrderItemXBK from './components/Order-Item-XBK/Order-Item-XBK.vue';
|
||
// 瑞幸订单组件
|
||
import OrderItemRX from './components/Order-Item-RX/Order-Item-RX.vue';
|
||
// 瑞幸订单组件
|
||
import OrderItemNX from './components/Order-Item-NX/Order-Item-NX.vue';
|
||
// 混入
|
||
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
|
||
import mixin from '@/static/js/mixin/mixin.js';
|
||
// 请求接口
|
||
import {
|
||
restaurantQueryAPI,
|
||
storeCollectionListAPI,
|
||
getPhoneAPI
|
||
} from '@/request/restaurant/index.js';
|
||
import {
|
||
orderListAPI,
|
||
agOrderPayAPI,
|
||
cancelOrderAPI,
|
||
paypayAPI
|
||
} from '@/request/restaurant/index.js';
|
||
|
||
// // 肯德基首页组件
|
||
// import bPageHomeKfc from '@/components/b-page-home/b-page-home-kfc.vue';
|
||
// // 瑞幸首页组件
|
||
// import bPageHomeRx from '@/components/b-page-home/b-page-home-rx.vue';
|
||
// // 星巴克首页组件
|
||
// import bPageHomeXbk from '@/components/b-page-home/b-page-home-xbk.vue';
|
||
|
||
let self;
|
||
export default {
|
||
mixins: [mixin, restaurantmixins],
|
||
components: {
|
||
HomeHeadKDJ,
|
||
HomeHeadMDL,
|
||
HomeHeadXBK,
|
||
HomeHeadRX,
|
||
HomeHeadNX,
|
||
OrderItemXBK,
|
||
restaurantNav,
|
||
OrderItemKDJ,
|
||
OrderItemMDL,
|
||
OrderItemRX,
|
||
OrderItemNX
|
||
},
|
||
data() {
|
||
return {
|
||
LoadType: 'load',
|
||
// 就餐方式
|
||
eattypeShow: false,
|
||
// 温馨提示
|
||
eattypeShow2: false,
|
||
list: [],
|
||
// 店铺列表
|
||
ShopList: [],
|
||
// 店铺总数量
|
||
ShopListCount: 0,
|
||
// 关注列表
|
||
like: [],
|
||
// 关注店铺列表
|
||
LikeList: [],
|
||
// 关注店铺总数量
|
||
SikeListCount: 0,
|
||
// scoll高度
|
||
ScollViewHeight: 0,
|
||
// 切换索引
|
||
index: 0,
|
||
// 订单部分数据
|
||
orders: {
|
||
page: 1,
|
||
type: '',
|
||
List: [],
|
||
last_page: 0,
|
||
last_time_toggle: '',
|
||
status: 'loading'
|
||
},
|
||
// 订单顶部晒筛选数据
|
||
count: {
|
||
un_commission_total: 0,
|
||
commission_total: 0
|
||
},
|
||
// 订单滑动时颜色
|
||
backgroundcolor: 0,
|
||
// 订单底部留白
|
||
OrderBottonPadding: '',
|
||
// 用于标识是否是从小程序跳进H5的
|
||
iswx:false
|
||
|
||
};
|
||
},
|
||
onReady() {
|
||
// setTimeout(() => {
|
||
// this.init();
|
||
// }, 500);
|
||
|
||
},
|
||
onLoad(para) {
|
||
// console.log(getApp()['globalData']['parameters']?.navindex,'para---');
|
||
self = this;
|
||
// 小程序点击点餐订单进入H5
|
||
if(getApp()['globalData']['parameters']?.navindex){
|
||
this.SETBRANDINFOR({ brand_id: '', brand_name: ''});
|
||
this.SETNAVINDEX(1);
|
||
this['iswx'] = true;
|
||
// this.GetorderList();
|
||
}else{
|
||
this.INIT_BUYCART();
|
||
};
|
||
// setTimeout(()=>{
|
||
// console.log(this['BrandInfor'],'BrandInfor')
|
||
// },1000)
|
||
},
|
||
onShow() {
|
||
if (this['Getnavindex'] == 1) {
|
||
this['orders']['page'] = 1;
|
||
this['orders']['List'] = [];
|
||
this['orders']['status'] = 'loading';
|
||
// 初始化高度-回调获取订单列表
|
||
this.init(()=>{
|
||
this.GetorderList();
|
||
});
|
||
} else {
|
||
if(!this['index'] && this['ShopList']['length'] <= 0 && this['list']['length'] <= 0){
|
||
setTimeout(() => {
|
||
this.init(()=>{
|
||
self.GetList();
|
||
});
|
||
}, 500);
|
||
}
|
||
if(this['index'] && this['like']['length'] <= 0 && this['LikeList']['length'] <= 0){
|
||
this.GetstoreCollectionList();
|
||
}
|
||
|
||
}
|
||
},
|
||
computed: {
|
||
// 加载状态
|
||
loadState() {
|
||
return (this['index'] == 0 && this['ShopList']['length'] <= 0) || (this['index'] == 1 && this['LikeList'][
|
||
'length'
|
||
] <= 0);
|
||
}
|
||
},
|
||
watch: {
|
||
GetCityCode(val) {
|
||
console.log(val, '用户切换位置4');
|
||
// 用户自主切换地址时更换列表
|
||
this.GetList();
|
||
},
|
||
Getnavindex(val) {
|
||
console.log('切换');
|
||
if (val == 1) {
|
||
self['orders']['page'] = 1;
|
||
self['orders']['status'] = 'loading';
|
||
this['orders']['List'] = [];
|
||
this.init(()=>{
|
||
this.GetorderList();
|
||
});
|
||
} else {
|
||
// 没有高度代表其他方式进入且没有加载第一个导航页需要初始化
|
||
if(!this['ScollViewHeight']){
|
||
setTimeout(() => {
|
||
this.init(()=>{
|
||
self.GetList();
|
||
});
|
||
}, 500);
|
||
return
|
||
}
|
||
if(!this['index'] && this['ShopList']['length'] <= 0 && this['list']['length'] <= 0){
|
||
this.GetList();
|
||
}
|
||
if(this['index'] && this['like']['length'] <= 0 && this['LikeList']['length'] <= 0){
|
||
this.GetstoreCollectionList();
|
||
}
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
// 支付宝支付测试
|
||
init(cabllback = ()=>{}) {
|
||
// 获取头部和底部高度然后计算出滚动区域高度
|
||
let height = 0;
|
||
uni.getSystemInfo({
|
||
success: async res => {
|
||
let headinfo = uni.createSelectorQuery().in(this).select(".head");
|
||
let Navinfo = uni.createSelectorQuery().in(this).select(".Nav");
|
||
await headinfo.boundingClientRect(function(data) {
|
||
height += data.height || 199;
|
||
console.log(data.height, '顶部');
|
||
}).exec();
|
||
await Navinfo.boundingClientRect(function(data) {
|
||
try{
|
||
height += data.height;
|
||
self['OrderBottonPadding'] = `${(data.height / (uni.upx2px(100) / 100)) + 40}rpx`;
|
||
}catch(e){
|
||
height += 0;
|
||
self['OrderBottonPadding'] = `${(0 / (uni.upx2px(100) / 100)) + 40}rpx`;
|
||
//TODO handle the exception
|
||
}
|
||
|
||
}).exec();
|
||
var rpx = `${(res.windowHeight - height) / (uni.upx2px(100) / 100)}rpx`;
|
||
this['ScollViewHeight'] = rpx;
|
||
// 因为需要获取到数量所以需要调用全部先获取数量再对数据经行处理
|
||
cabllback();
|
||
}
|
||
});
|
||
},
|
||
|
||
// 获取订单列表
|
||
GetorderList() {
|
||
uni.showLoading({
|
||
title: '加载中'
|
||
});
|
||
self['LoadType'] = 'load';
|
||
self['orders']['status'] = 'loading';
|
||
orderListAPI({
|
||
page: this['orders']['page'],
|
||
type: this['orders']['type'],
|
||
brand_id: this['BrandInfor']['brand_id']
|
||
}).then(res => {
|
||
if(self['orders']['page'] == 1){
|
||
self['orders']['List'] = [];
|
||
}
|
||
if (res['data']['data']['data']['length'] > 0 && res['data']['data']['total'] > 0) {
|
||
self['count'] = res['data']['count'];
|
||
self['orders']['List'].push(res['data']['data']['data']);
|
||
self['orders']['last_page'] = res['data']['data']['last_page'];
|
||
self['orders']['page'] += 1;
|
||
self['LoadType'] = '';
|
||
self['orders']['status'] = 'loadmore';
|
||
} else {
|
||
// if (self['orders']['page'] != 1) {
|
||
self['LoadType'] = 'orders';
|
||
self['orders']['status'] = 'nomore';
|
||
// }
|
||
};
|
||
if(self['orders']['List']['length'] >= self['orders']['last_page']){
|
||
self['orders']['status'] = 'nomore';
|
||
};
|
||
uni.hideLoading();
|
||
})
|
||
},
|
||
|
||
// 订单顶部选项
|
||
Typetoggle(type) {
|
||
// 如果上次切换与本次切换类型一致则代表用户点击了两次,此时需要将列表切换至所有列表
|
||
// if (this['orders']['last_time_toggle'] === type) {
|
||
// this['orders']['type'] = '';
|
||
// } else {
|
||
// this['orders']['type'] = type;
|
||
// }
|
||
this['orders']['type'] = type;
|
||
this['orders']['page'] = 1;
|
||
this.GetorderList();
|
||
|
||
},
|
||
|
||
// 获取餐厅列表
|
||
GetList(keyword = '') {
|
||
// 设置加载状态
|
||
this['LoadType'] = 'load';
|
||
let parameters = {
|
||
brand_id: this['BrandInfor']['brand_id'],
|
||
city_code: this.GetCityCode,
|
||
address: keyword,
|
||
}
|
||
restaurantQueryAPI(parameters).then(res => {
|
||
this['ShopList'] = [];
|
||
this['list'] = res['data']['data'];
|
||
this['ShopListCount'] = res['data']['count'];
|
||
console.log(this['list'],'list');
|
||
if (res?.data && res['data']['data'] != undefined) {
|
||
this['ShopList'].push(this.arrObtain('list'));
|
||
this['LoadType'] = '';
|
||
} else {
|
||
this['LoadType'] = 'store';
|
||
}
|
||
}).catch(res=>{
|
||
console.log(res,'列表');
|
||
if(res['code'] == 1005){
|
||
this['LoadType'] = '';
|
||
}
|
||
})
|
||
},
|
||
|
||
// 获取关注冽表
|
||
GetstoreCollectionList(keyword = '') {
|
||
this['LoadType'] = 'load';
|
||
let parameters = {
|
||
brand_id: this['BrandInfor']['brand_id'],
|
||
address: keyword,
|
||
}
|
||
storeCollectionListAPI(parameters).then(res => {
|
||
this['like'] = res['data']['data'];
|
||
// 切换时数量会改变,(切换时数量不应该改变)
|
||
// this['$refs']['Head'].SetTabnum(this['list']['length'], this['like']['length'])
|
||
this['SikeListCount'] = res['data']['count'];
|
||
if (res['data']['data']['length'] && res['data']['data'] != undefined) {
|
||
this['LikeList'].push(this.arrObtain('like'));
|
||
this['LoadType'] = '';
|
||
} else {
|
||
this['LoadType'] = 'store';
|
||
}
|
||
|
||
})
|
||
},
|
||
|
||
// scroll-view触底
|
||
scrolltolower() {
|
||
let key = this['$refs']['Head']['tabsconfig']['index'];
|
||
console.log(key,'key');
|
||
if (key == 0) {
|
||
this['ShopList'].push(this.arrObtain('list'));
|
||
} else {
|
||
this['LikeList'].push(this.arrObtain('like'));
|
||
}
|
||
},
|
||
|
||
// tabs切换事件(如果有的话)
|
||
_Change(index) {
|
||
// this['TabIndex'] =
|
||
// let key;
|
||
// try {
|
||
// key = this['$refs']['Head']['tabsconfig']['index'];
|
||
// } catch (e) {
|
||
// key = 0;
|
||
// //TODO handle the exception
|
||
// }
|
||
this['index'] = index;
|
||
if (index == 0) {
|
||
this['ShopList'] = [];
|
||
this.GetList();
|
||
} else {
|
||
this['LikeList'] = [];
|
||
this.GetstoreCollectionList();
|
||
}
|
||
},
|
||
|
||
// 输入框确认事件
|
||
_Search(value) {
|
||
this.GetList(value)
|
||
},
|
||
|
||
// 获取数据前十个
|
||
arrObtain(key) {
|
||
let arr = this[key].splice(0, 20);
|
||
console.log(this[key]['length'], '剩余数量');
|
||
return arr;
|
||
},
|
||
|
||
// 进入店铺
|
||
HomePage(item) {
|
||
console.log(item,'item');
|
||
// 奈雪品牌店铺即使闭店也能进入店铺详情,下单时会出现错误,所以在此处拦截一下
|
||
if(this['BrandInfor']['brand_id'] == 2 && !item['is_open']){
|
||
uni.showToast({
|
||
title:'店铺未开业',
|
||
icon:'none'
|
||
});
|
||
return
|
||
};
|
||
// 设置店铺信息
|
||
this.SETSHOPDETAIL(item);
|
||
if (this['BrandInfor']['brand_id'] == 1 || this['BrandInfor']['brand_id'] == 5) {
|
||
// 打开就餐方式弹框
|
||
this['eattypeShow'] = true;
|
||
} else if (this['BrandInfor']['brand_id'] == 13 || this['BrandInfor']['brand_id'] == 10 || this['BrandInfor']['brand_id'] == 2) {
|
||
// 打开提示
|
||
this['eattypeShow2'] = true;
|
||
}
|
||
},
|
||
|
||
// 设置就餐方式
|
||
SetEatMode(type) {
|
||
this.SETMODE(type);
|
||
uni.navigateTo({
|
||
url: `/pages/restaurant/home/shop_home/shop_home?restaurant_id=${this['GetShopInfor']['restaurant_id']}`,
|
||
success: () => {
|
||
this['eattypeShow'] = false;
|
||
}
|
||
})
|
||
}
|
||
},
|
||
// 滑动
|
||
onPageScroll(e) {
|
||
this['backgroundcolor'] = e['scrollTop'] / 150;
|
||
},
|
||
|
||
// 触底
|
||
onReachBottom() {
|
||
if (self['orders']['List']['length'] >= self['orders']['last_page']) {
|
||
self['orders']['status'] = 'nomore';
|
||
return;
|
||
};
|
||
this.GetorderList();
|
||
|
||
},
|
||
|
||
|
||
// 分享
|
||
onShareAppMessage() {
|
||
if (this['BrandInfor']['brand_id'] == 1) {
|
||
return KFCrestaurant();
|
||
} else if (this['BrandInfor']['brand_id'] == 10) {
|
||
return XBKSharing();
|
||
}
|
||
if (this['BrandInfor']['brand_id'] == 13) {
|
||
return RXrestaurant();
|
||
}
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
width: 100%;
|
||
min-height: 100%;
|
||
height: auto;
|
||
background-color: #f9f9f9;
|
||
}
|
||
|
||
.scroll-Y {
|
||
position: relative;
|
||
}
|
||
|
||
/deep/ .uni-scroll-view-content {
|
||
padding: 32rpx;
|
||
height: auto;
|
||
}
|
||
|
||
.Nav {
|
||
width: 100%;
|
||
height: auto;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
}
|
||
|
||
|
||
.Store-List {
|
||
width: 100%;
|
||
|
||
// 肯德基店铺样式
|
||
&-Shop-MDL {
|
||
padding: 30rpx;
|
||
width: 100%;
|
||
background-color: #ffffff;
|
||
border-radius: 14rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
&-Top {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin-bottom: 30rpx;
|
||
|
||
&-Name {
|
||
font-size: 30rpx;
|
||
color: $THEMECOLOR4;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
&-State {
|
||
min-width: 100rpx;
|
||
text-align: center;
|
||
background: #C63836;
|
||
border-radius: 2rpx;
|
||
color: #ffffff;
|
||
font-size: 20rpx;
|
||
}
|
||
&-State2{
|
||
min-width: 100rpx;
|
||
text-align: center;
|
||
background: #8f8f8f;
|
||
border-radius: 2rpx;
|
||
color: #ffffff;
|
||
font-size: 20rpx;
|
||
}
|
||
|
||
&-distance {
|
||
min-width: 230rpx;
|
||
font-size: 26rpx;
|
||
color: #777777;
|
||
flex: 1;
|
||
text-align: right;
|
||
}
|
||
}
|
||
|
||
&-Address {
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
}
|
||
}
|
||
// 肯德基
|
||
&-Shop-KDJ {
|
||
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;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
|
||
&-distance {
|
||
min-width: 230rpx;
|
||
font-size: $FONTSIZE26;
|
||
color: $THEMECOLOR5;
|
||
flex: 1;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
}
|
||
|
||
&-Area {
|
||
font-size: $FONTSIZE26;
|
||
}
|
||
}
|
||
// 星巴克
|
||
&-Shop-XBK {
|
||
width: 100%;
|
||
height: auto;
|
||
background-color: #ffffff;
|
||
min-height: 155rpx;
|
||
padding: 32rpx;
|
||
margin-top: 20rpx;
|
||
border-bottom: 1rpx solid #cccccc;
|
||
|
||
&-Top {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin-bottom: 30rpx;
|
||
|
||
&-Name {
|
||
font-size: $FONTSIZE30;
|
||
color: $THEMECOLOR4;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
&-distance {
|
||
min-width: 230rpx;
|
||
font-size: $FONTSIZE26;
|
||
color: $THEMECOLOR5;
|
||
flex: 1;
|
||
text-align: right;
|
||
}
|
||
}
|
||
|
||
&-Area {
|
||
font-size: $FONTSIZE26;
|
||
}
|
||
}
|
||
// 瑞幸咖啡样式
|
||
&-Shop-RX {
|
||
background-color: #ffffff;
|
||
padding: 30rpx 32rpx;
|
||
margin-bottom: 30rpx;
|
||
border-radius: 15rpx;
|
||
|
||
&-Top-RX {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 30rpx;
|
||
|
||
&-Left {
|
||
font-size: $FONTSIZE30;
|
||
color: $THEMECOLOR4;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
&-Title {
|
||
margin-bottom: 20rpx;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
&-Right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
color: $THEMECOLOR6;
|
||
font-size: 26rpx;
|
||
|
||
.img {
|
||
max-width: 64rpx;
|
||
min-width: 64rpx;
|
||
min-height: 64rpx;
|
||
max-height: 64rpx;
|
||
}
|
||
|
||
&-distance {
|
||
min-width: 230rpx;
|
||
margin-top: 15rpx;
|
||
text-align: right;
|
||
}
|
||
}
|
||
}
|
||
|
||
&-Area-RX {
|
||
color: #999999;
|
||
font-size: $FONTSIZE24;
|
||
padding-top: 22rpx;
|
||
border-top: 1rpx solid #EDEEF0;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
|
||
&-text {
|
||
word-break: break-all;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 1;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.img {
|
||
max-width: 22rpx;
|
||
min-width: 22rpx;
|
||
min-height: 26rpx;
|
||
max-height: 26rpx;
|
||
margin-right: 15rpx;
|
||
}
|
||
}
|
||
}
|
||
// 瑞幸咖啡样式
|
||
&-Shop-NX {
|
||
background-color: #ffffff;
|
||
padding: 30rpx 32rpx;
|
||
margin-bottom: 30rpx;
|
||
border-radius: 15rpx;
|
||
|
||
&-Top-NX {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 30rpx;
|
||
|
||
&-Left {
|
||
font-size: $FONTSIZE30;
|
||
color: $THEMECOLOR4;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
&-Title {
|
||
margin-bottom: 20rpx;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
&-Right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
color: #a7d500;
|
||
font-size: 26rpx;
|
||
|
||
.img {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
max-width: 64rpx;
|
||
min-width: 64rpx;
|
||
min-height: 64rpx;
|
||
max-height: 64rpx;
|
||
|
||
}
|
||
|
||
&-distance {
|
||
min-width: 230rpx;
|
||
margin-top: 15rpx;
|
||
text-align: right;
|
||
}
|
||
}
|
||
}
|
||
|
||
&-Area-NX {
|
||
color: #999999;
|
||
font-size: $FONTSIZE24;
|
||
padding-top: 22rpx;
|
||
border-top: 1rpx solid #EDEEF0;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
|
||
&-text {
|
||
word-break: break-all;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 1;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.img {
|
||
width: 22rpx;
|
||
height: 26rpx;
|
||
max-width: 22rpx;
|
||
min-width: 22rpx;
|
||
min-height: 26rpx;
|
||
max-height: 26rpx;
|
||
margin-right: 15rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.grey {
|
||
background-color: #f9f9f9;
|
||
}
|
||
|
||
.MDLBACK {
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
// 订单页面
|
||
.Orders {
|
||
padding: 32rpx 32rpx 0 32rpx;
|
||
min-height: 100%;
|
||
|
||
&-Toggle-Type {
|
||
width: 100%;
|
||
position: fixed;
|
||
z-index: 10;
|
||
top: 0;
|
||
left: 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 32rpx 32rpx 15rpx 32rpx;
|
||
|
||
&-Item {
|
||
width: 320rpx;
|
||
height: 91rpx;
|
||
background: #FFFFFF;
|
||
border: 1rpx solid #DEDEDE;
|
||
border-radius: 20rpx;
|
||
text-align: center;
|
||
line-height: 91rpx;
|
||
color: #333333;
|
||
font-size: $FONTSIZE24;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
// 就餐方式弹框
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 温馨提示弹框
|
||
// 就餐方式弹框
|
||
.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>
|