H5-ThreeDoorder/components/b-page-orders/b-page-orders.vue

303 lines
7.3 KiB
Vue

<template>
<view class="content">
<view class="OrderToggleType">
<view class="typebtn" @tap="Typetoggle(0)">
待结算{{count['un_commission_total']}}
</view>
<view class="typebtn" @tap="Typetoggle(1)">
已结算{{count['commission_total']}}
</view>
</view>
<view class="order-list">
<scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y"
:style="{'height':`${scrollHeight}rpx`}"
@scrolltolower="GetorderList">
<template v-for="(item,index) in List">
<!-- 肯德基 -->
<template v-if="item['brand_id'] == 1 || item['brand_id'] == 5">
<b-orders-kfc :key="index" :index="index" :item="item">
</b-orders-kfc>
</template>
<!-- 瑞幸 -->
<template v-if="item['brand_id'] == 13">
<b-orders-rx :key="index" :index="index" :item="item">
</b-orders-rx>
</template>
<!-- 星巴克 -->
<template v-if="item['brand_id'] == 10">
<b-orders-xbk :key="index" :index="index" :item="item">
</b-orders-xbk>
</template>
</template>
<template v-if="List['length'] <= 0">
<b-shop-load width="161" height="148" type="orders" :offset="['25%','0']"></b-shop-load>
</template>
</scroll-view>
</view>
<!-- 加载状态 -->
<b-load :show="loading" width="79" height="80" background="rgba(0,0,0,0.3)" type="load"></b-load>
</view>
</template>
<script>
import {
orderListAPI,
agOrderPayAPI,
cancelOrderAPI
} from '@/request/restaurant/index.js';
import bOrdersKfc from '@/components/b-orders/b-orders-kfc.vue'
import bOrdersRx from '@/components/b-orders/b-orders-rx.vue'
import bOrdersXbk from '@/components/b-orders/b-orders-xbk.vue'
import {
mapMutations,
mapGetters,
mapActions
} from 'vuex';
import mixin from '@/static/js/mixin/mixin.js';
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
export default {
name: "b-page-orders",
mixins:[mixin,restaurantmixins],
components: {
bOrdersKfc,
bOrdersRx,
bOrdersXbk
},
provide() {
return {
// 取消订单
cancel: this.cancel,
// 重新下单
Reorder: this.Reorder,
// 再次支付
payments: this.payments
}
},
data() {
return {
List: [],
page: 1,
total: 0,
scrollHeight: 0,
// 记录上次点击切换的type
last_time_toggle:'',
type: '',
count: {
un_commission_total: 0,
commission_total: 0
},
// 加载状态
loading:false
};
},
watch: {
// 顶部筛选时切换
// type() {
// this['page'] = 1;
// this.GetorderList();
// },
// // 底部tab切换时重新刷新数据
// Getnavindex(){
// this['page'] = 1;
// this.GetorderList();
// },
Getnavindex(val) {
// 每次进入订单列表都将重新请求
if (val != 0) {
this['type'] = '';
this.GetorderList();
}else{
this['loading'] = true;
this['page'] = 1;
this['List'] = [];
}
}
},
mounted() {
let self = this;
this['loading'] = true;
// 设置scollview高度之前必须得到底部导航高度
console.log(self['NAVHEIGHT'],'------------');
setTimeout(()=>{
this.initScrollView({
el: 'OrderToggleType',
}).then(res => {
self.scrollHeight = res;
self.GetorderList();
})
},1000)
},
methods: {
/**
* @顶部选项
* */
Typetoggle(type){
// 如果上次切换与本次切换类型一致则代表用户点击了两次,此时需要将列表切换至所有列表
console.log(this['last_time_toggle'],type);
if(this['last_time_toggle'] === type){
this['type'] = '';
}else{
this['type'] = type;
}
this['page'] = 1;
this['List'] = [];
this.GetorderList();
this['last_time_toggle'] = this['type'];
},
/**
* @获取订单列表
* */
GetorderList() {
// uni.showLoading({
// title: '加载中...'
// });
let self = this;
orderListAPI({
page: this['page'],
type: this['type'],
brand_id: this['BrandInfor']['brand_id']
}).then(data => {
if (self['page'] == 1) {
self['List'] = [];
};
self['count'] = data['data']['count'];
self['List'].push(...data['data']['data']['data']);
self['total'] = data['data']['data']['total'];
self['page'] += 1;
// uni.hideLoading();
this['loading'] = false;
})
},
/**
* @再次支付
* */
payments(order_sn, restaurant_id) {
let self = this;
this.againpayment(order_sn)
// let redirect_url;
// // 肯德基
// if (self['BrandInfor']['brand_id'] == 1) {
// redirect_url = `/pages/restaurant/order/order-status/order-status?order=${order_sn}`
// } else if (self['BrandInfor']['brand_id'] == 10) {
// // 星巴克
// redirect_url = `/pages/restaurant/order/order-details/xbk-orders-details?order=${order_sn}`
// } else if (self['BrandInfor']['brand_id'] == 13) {
// // 瑞幸
// redirect_url = `/pages/restaurant/order/order-details/rx-orders-details?order=${order_sn}`
// }
// agOrderPayAPI({
// order_sn,
// type:3,
// redirect_url
// }).then(data => {
// location.href = data['data']['redirect_url'];
// })
},
/**
* @取消订单
* */
cancel(order_sn, index) {
cancelOrderAPI({
order_sn
}).then(data => {
this.$set(this['List'][index], 'status', 5);
this.$forceUpdate();
})
},
/**
* @重新下单
* */
Reorder(commodity) {
console.log(commodity,'重新下单商品');
uni.showLoading({
title:'加载中...',
})
let self = this;
let index = 0;
// 创建进入餐厅所需要的参数对象
let {
restaurant_id,
latitude,
longitude,
restaurant_address,
restaurant_name
} = commodity[0];
this.SETSHOPDETAIL({
city_name: "",
close_time: "",
distance: "",
latitude,
longitude,
open_time: "",
province_name: "",
regoin_name: "",
restaurant_address,
restaurant_id,
restaurant_name,
special: false,
});
let add = function(){
console.log(`第${index}个,总共有${commodity['length']-1}`);
self.ADD_CART({
commodity: commodity[index]
}).then(()=>{
if(index >= commodity['length']-1) {
uni.hideLoading();
uni.navigateTo({
url: `/pages/restaurant/home/shop_home/shop_home?restaurant_id=${restaurant_id}`
});
return;
};
index += 1;
add();
})
}
this.EMPTY(commodity[0]['restaurant_id']).then( res => {
console.log(res);
setTimeout( () => {
add();
}, 1000);
})
},
}
}
</script>
<style lang="scss">
.content {
padding: 0 19rpx;
}
.scroll-Y{
box-sizing: border-box;
padding-top:30rpx;
position: relative;
}
.OrderToggleType {
display: flex;
justify-content: space-between;
.typebtn {
width: 347rpx;
height: 91rpx;
background: #FFFFFF;
border: 1rpx solid #DEDEDE;
border-radius: 20rpx;
text-align: center;
line-height: 91rpx;
color: #333333;
font-size: $FONTSIZE24;
}
}
</style>