123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402 |
- <template>
- <view class="container">
- <view class="tab-h flex flex-nowarp flex-y-center">
- <view :class="['item',tabActive == 1?'active':'']" :style="[tabActive == 1?{color:setColor}:'']"
- @click="changeTab(1)">待付款</view>
- <view :class="['item',tabActive == 2?'active':'']" :style="[tabActive == 2?{color:setColor}:'']"
- @click="changeTab(2)">已支付</view>
- <view :class="['item',tabActive == 3?'active':'']" :style="[tabActive == 3?{color:setColor}:'']"
- @click="changeTab(3)">待收货</view>
- <view :class="['item',tabActive == 4?'active':'']" :style="[tabActive == 4?{color:setColor}:'']"
- @click="changeTab(4)">已完成</view>
- <view class="tab-h-border"
- :style="{'background-color':setColor,left:tabActive==1?'22%':tabActive==2?'47%':tabActive==3?'71.5%':'98%'}"></view>
- </view>
- <view class="tab-b">
- <no-none v-if="orderList.length<=0"></no-none>
- <block v-else>
- <block v-for="(item,index) in orderList" :key="index">
- <!-- 自提订单 -->
- <block v-if="tabActive==3">
- <navigator :url="`/pages/orderDetail/orderDetail?order_id=${item.id}`" v-if="item.state==3"
- class="item">
- <!-- block v-if="item.state==3" -->
- <view class="top flex flex-x-between flex-nowarp">
- <view class="order-info">
- <view class="order-title">
- {{item.storename}}({{item.type == 3?'自助结账':item.tablename}})
- </view>
- <view class="order-title" v-if="item.is_pay == 1&&item.state==3">
- 取单号:{{item.number||item.id}}
- </view>
- <view class="time">{{item.create_time}}</view>
- </view>
- <view class="order-status">
- <view>
- {{item.state==3?'打包带走':''}}
- </view>
- <view :style="{color:setColor}">
- {{
- item.cancel_status==2 ?'订单已退款':
- item.order_status== 0?'待支付':item.order_status== 1?'待配送':
- item.order_status== 2?'配送中':item.order_status== 3?'已完成':
- item.order_status== 4?'已取消':
- item.order_status== 5?'已退款':
- item.order_status== 6?'部分退款':
- item.order_status== 7?'待自提':''
- }}
- <!-- order_status订单状态 0:待支付 1:待配送 2:配送中 3:已完成 4:已取消 5:已退款 6:部分退款 7:待自提 -->
- </view>
- </view>
- </view>
- <view class="goods-list" v-if="item.type != 3">
- <view class="goods flex flex-x-between flex-nowarp flex-y-center"
- v-for="(goods,index2) in item.goods" :key="index2">
- <view class="text-nowarp">{{goods.name}} {{getGoodsSpec(goods.spec)}}</view>
- <view>×{{goods.num}}</view>
- <view class="rebate-info" v-if="goods.user_rebate == 1">会员折扣</view>
- <view>¥{{goods.total_price}}</view>
- </view>
- </view>
- <view class="total-block">
- <block v-if="item.type != 3">共 {{item.count}} 件商品,</block>实付:¥{{item.pay_price}}
- </view>
- </navigator>
- </block>
- <navigator v-else :url="`/pages/orderDetail/orderDetail?order_id=${item.id}`" class="item">
- <view class="top flex flex-x-between flex-nowarp">
- <view class="order-info">
- <view class="order-title">
- {{item.storename}}
- <block v-if="item.type == 3">
- ({{item.type == 3?'自助结账':item.tablename||''}})
- </block>
- <block v-if="item.type != 3 && item.state!=2 && item.tablename">
- ({{item.tablename}})
- </block>
- </view>
- <view class="order-title" v-if="item.is_pay == 1&&item.state!=2">
- 取单号:{{item.number||item.id}}
- </view>
- <view class="time">{{item.create_time}}</view>
- </view>
- <view class="order-status">
- <block v-if="item.type!=3">
- <!--type 3 ==自助结账 2==餐后付款
- state 2==外卖订单 1 ==店内就餐 3==打包带走; is_send 已配送 is_dd==1达达配送,2聚合配送-->
- <block v-if="item.state==2">
- <view>{{descFood.food2}}订单</view>
- <view :style="{color:setColor}">
- <block v-if="item.is_send==1&&item.is_dd==1">
-
- {{
- item.cancel_status==2 ?'订单已退款':
- item.order_status== 0?'待支付':
- item.order_status== 1?'待配送':
- item.order_status== 2?'配送中':
- item.order_status== 3?'已完成':
- item.order_status== 4?'已取消':
- item.order_status== 5?'已退款':
- item.order_status== 6?'部分退款':
- item.order_status== 7?'待自提':
- '达达配送'
- }}
-
-
- </block>
- <block v-if="item.is_send==1&&item.is_dd==2">
- {{
- item.cancel_status==2 ?'订单已退款':
- item.order_status== 0?'待支付':item.order_status== 1?'待配送':
- item.order_status== 2?'配送中':item.order_status== 3?'已完成':
- item.order_status== 4?'已取消':
- item.order_status== 5?'已退款':
- item.order_status== 6?'部分退款':
- item.order_status== 7?'待自提':
- '聚合配送'
- }}
- </block>
- <block v-if="item.is_dd==0&&item.is_send==0">
- {{
- item.cancel_status==2 ?'订单已退款':
- item.order_status== 0?'待支付':item.order_status== 1?'待配送':
- item.order_status== 2?'配送中':item.order_status== 3?'已完成':
- item.order_status== 4?'已取消':
- item.order_status== 5?'已退款':
- item.order_status== 6?'部分退款':
- item.order_status== 7?'待自提':
- '待配送'
- }}
- </block>
- </view>
- </block>
- <!-- {{item.cancel_status==2 ?'订单已退款': item.is_pay == 1?'订单已完成':'待支付'}} -->
- <block v-else>
- <view>
- {{item.state==1?descOrder.food1:item.state==3?descOrder.food2:''}}
- </view>
- <view :style="{color:setColor}">
- {{
- item.cancel_status==2 ?'订单已退款':
- item.order_status== 0?'待支付':item.order_status== 1?'待配送':
- item.order_status== 2?'配送中':item.order_status== 3?'已完成':
- item.order_status== 4?'已取消':
- item.order_status== 5?'已退款':
- item.order_status== 6?'部分退款':
- item.order_status== 7?'待自提':''
- }}
- </view>
- </block>
- </block>
- <block v-if="item.type==3">
- {{
- item.cancel_status==2 ?'订单已退款':
- item.order_status== 0?'待支付':item.order_status== 1?'待配送':
- item.order_status== 2?'配送中':item.order_status== 3?'已完成':
- item.order_status== 4?'已取消':
- item.order_status== 5?'已退款':
- item.order_status== 6?'部分退款':
- item.order_status== 7?'待自提':''
- }}
- </block>
- </view>
- </view>
- <view class="goods-list" v-if="item.type != 3">
- <view class="goods flex flex-x-between flex-nowarp flex-y-center"
- v-for="(goods,index2) in item.goods" :key="index2">
- <view class="text-nowarp">{{goods.name}} {{getGoodsSpec(goods.spec)}}</view>
- <view>×{{goods.num}}</view>
- <view>¥{{goods.total_price}}</view>
- </view>
- </view>
- <view class="total-block">
- <block v-if="item.type != 3">共 {{item.count}} 件商品,</block>实付:¥{{item.pay_price}}
- </view>
- </navigator>
- </block>
- <view class="no-more" v-if="is_bottom">
- ~没有更多了~
- </view>
- </block>
- </view>
- <view class="hg100">
- </view>
- <page-btm-bar :active="3" />
- </view>
- </template>
- <script>
- let hideLoading = true;
- import {
- mapState
- } from 'vuex'
- export default {
- data() {
- return {
- userInfo: {},
- tabActive: 1,
- page: 1,
- is_bottom: false,
- orderList: [],
- orderNum: 0,
- setColor: "",
- store_id:'',
- }
- },
- computed: {
- ...mapState(['descOrder','descFood'])
- },
-
- onLoad(e) {
- uni.hideTabBar();
- this.userInfo = uni.getStorageSync('userInfo');
- this.store_id=this.$store.state.store_id;
- this.tabActive = this.$store.state.tabActive;
- console.log(this.tabActive)
- // e.tabActive ? e.tabActive : 1;
- uni.setNavigationBarColor({
- frontColor: '#ffffff',
- backgroundColor: this.$store.state.color,
- })
- this.setColor = this.$store.state.color;
- },
- // onReady() {
- // uni.getSystemInfo({
- // success: (e) => {
- // console.log("getSystemInfo", e)
- // }
- // })
- // },
- onShow() {
- this.getMyOrderList(1);
- },
- onReachBottom() {
- if (!this.is_bottom) {
- this.getMyOrderList(this.page + 1)
- }
- },
- onShareAppMessage() {},
- onPullDownRefresh() {
- this.orderList = [];
- this.getMyOrderList(1)
- },
- onShareTimeline() {},
- methods: {
- getGoodsSpec(spec) {
- spec = spec.split(',')
- let specList = []
- for (let i in spec) {
- specList.push(spec[i].split(':')[1])
- }
- return specList.join(',')
- },
- changeTab(index) {
- if (index != this.tabActive) {
- this.tabActive = index
- this.getMyOrderList(1)
- }
- },
- getMyOrderList(page) {
- this.$http.request('xcx/orderlists', {
- user_id: this.userInfo.id,
- page: page,
- store_id:this.store_id,
- type: this.tabActive == 3 ? 1 : this.tabActive
- }, "", "", hideLoading).then(res => {
- if (page == 1) {
- this.orderNum = res.data.count
- this.orderList = res.data.list.length ? res.data.list : []
- } else if (res.data.list && res.data.list.length) {
- this.orderList = this.orderList.concat(res.data.list)
- this.page++
- }
- if (res.data.list.length == 0) {
- this.is_bottom = true
- } else {
- this.is_bottom = false
- }
- })
- },
- }
- }
- </script>
- <style lang="scss">
- page {
- background-color: #eee;
- }
- .text-nowarp {
- width: 55%;
- }
- .hg100 {
- height: 100rpx;
- height: calc(100rpx + constant(safe-area-inset-bottom));
- height: calc(100rpx + env(safe-area-inset-bottom));
- }
- .tab-h {
- background-color: #fff;
- position: sticky;
- top: 0;
- z-index: 900;
- box-shadow: 0 10rpx 20rpx #eee;
- }
- .tab-h .item {
- height: 100rpx;
- line-height: 100rpx;
- text-align: center;
- font-size: 30rpx;
- font-weight: 500;
- flex: none;
- width: 25%;
- }
- .tab-h .item.active {
- color: $theme-color;
- }
- .tab-h .tab-h-border {
- height: 4rpx;
- width: 10%;
- background-color: $theme-color;
- border-radius: 2rpx;
- position: absolute;
- bottom: 0;
- margin-left: -15%;
- transition: left 0.3s;
- }
- .tab-b {
- padding: 20rpx;
- }
- .tab-b .item {
- background-color: #fff;
- padding: 20rpx 20rpx 0;
- border-radius: 10rpx;
- margin-bottom: 20rpx;
- }
- .tab-b .item .top {
- padding: 10rpx 0 20rpx;
- }
- .tab-b .item .top .order-title {
- font-size: 30rpx;
- font-weight: bold;
- color: #555;
- }
- .tab-b .item .top .time {
- font-size: 26rpx;
- color: #555;
- line-height: 1;
- margin-top: 10rpx;
- }
- .tab-b .item .top .order-status {
- font-size: 26rpx;
- color: #666;
- text-align: center;
- }
- .tab-b .item .goods-list {
- padding: 0 20rpx;
- border-top: 1rpx solid #eee;
- }
- .tab-b .item .goods {
- padding: 20rpx 0;
- font-size: 26rpx;
- color: #666;
- }
- .tab-b .item .total-block {
- height: 100rpx;
- line-height: 100rpx;
- text-align: right;
- border-top: 1rpx solid #eee;
- font-size: 30rpx;
- font-weight: bold;
- color: #555;
- }
- .rebate-info {
- display: inline-block;
- font-size: 24rpx;
- padding: 2rpx 10rpx;
- background: red;
- color: #fff;
- border-radius: 8rpx;
- }
- </style>
|