shop4.3.57/pages/share/order/order.vue

<template>
    <app-layout>
        <view class="search-area">
            <view v-if="search.keyword || search.dateArr[0] || search.dateArr[1]" class="search be-search dir-left-nowrap" @click="toSearch">
                <image class="icon-search" src="/static/image/icon/icon-search.png"></image>
                <view v-if="search.dateArr[0]">{{search.dateArr[0]}}</view>
                <view v-if="search.dateArr[1]"><text v-if="search.dateArr[0]">至</text>{{search.dateArr[1]}}</view>
                <view v-if="search.keyword"><text v-if="search.dateArr[0] || search.dateArr[1]">,</text>{{search.keyword}}</view>
            </view>
            <view v-else class="search main-center" @click="toSearch">
                <image class="icon-search" src="/static/image/icon/icon-search.png"></image>
                <text>搜索</text>
            </view>
        </view>
        <app-tab-nav
                :tabList="tabList"
                :activeItem="activeTab"
                padding="0"
                @click="tabStatus"
                setTop="88"
                :border="false"
                :shadow="false"
                :theme="getTheme"
        ></app-tab-nav>
        <view class="list" style="margin-top: 100rpx;">
            <view class="item" v-for="item in list" :key="item.id" @click="toDetail(item.id)">
                <view class="item-top main-between">
                    <text>订单号：{{item.order_no}}{{item.is_recommend?'[系统推荐]':''}}</text>
                    <text>{{item.status}}</text>
                </view>
                <view class="order" v-for="goods in item.detail" :key="goods.id">
                    <view @click="toGoods(goods.id,item)">
                        <image class="goods-img" :src="goods.cover_pic"></image>
                        <view class="t-omit goods-name">{{goods.name}}</view>
                        <view style="color: #999999;"><text v-for="attr in goods.attr_list" :key="attr.attr_group_id">{{attr.attr_group_name}}:{{attr.attr_name}}</text></view>
                        <view class="dir-left-nowrap">
                            <view class="box-grow-1" style="color: #999999;">x{{goods.num}}</view>
                            <view class="box-grow-0">¥{{goods.total_price}}</view>
                        </view>
                    </view>
                </view>
               <view @click="open(item.id)">
                    <view class="item-bottom dir-left-nowrap">
                        <image class="avatar" :src="item.avatar"></image>
                        <view class="t-omit name">{{item.nickname}}</view>
                        <view class="t-omit type">{{item.share_status}}</view>
                        <view class="money">{{item.is_sale == 1 ? "已得佣金:" : "预计佣金:"}}
                            <text class="red-color">{{item.share_money}}</text>元</view>
                    </view>
                </view>
            </view>
        </view>
    </app-layout>
</template>

<script>
    import appTabNav from "../../../components/basic-component/app-tab-nav/app-tab-nav.vue";
    import appOrderGoodsInfo from '../../../components/page-component/app-order-goods-info/app-order-goods-info.vue';

    import { mapState,mapGetters } from "vuex";

    export default {
        data() {
            return {
                search: {
                    keyword: '',
                    dateArr: []
                },
                tabList: [ // 兼容处理
                    {id:0, name: '全部'},
                    {id:1, name: '待付款'},
                    {id:4, name: '待发货'},
                    {id:5, name: '待收货'},
                    {id:3, name: '已完成'},
                    {id:6, name: '售后中'},
                ],
                loading: null,
                list: [],
                activeTab: 0,
                id: null,
                page: 2,
                bgColor: '#f7f7f7',
            }
        },
        components: {
            "app-tab-nav": appTabNav,
            'app-order-goods-info': appOrderGoodsInfo,
        },
        computed: {
            ...mapState({
                mall: state => state.mallConfig.mall,
                custom_setting: state => state.mallConfig.share_setting_custom,
                share_setting: state => state.mallConfig.share_setting,
            }),
            ...mapGetters('mallConfig', {
                tabBarNavs: 'getNavBar',
                getTheme: 'getTheme',
            })
        },
        methods: {
            toDetail(id){
                uni.navigateTo({
                    url: `/pages/order/order-detail/order-detail?id=${id}&is_share=1`
                })
            },
            toSearch() {
                uni.navigateTo({
                    url: `/pages/order/search/search`
                })
            },
            open(e) {
                if(this.id != e) {
                    this.id = e;
                }else {
                    this.id = null;
                }
            },

            tabStatus(e) {
                this.list = [];
                this.page = 2;
                this.activeTab = e.currentTarget.dataset.id;
                uni.showLoading({
                    title: '加载中...'
                });
                this.getList();
            },
            getList() {
                let that = this;
                that.$request({
                    url: that.$api.share.share_order,
                    data: {
                        status: that.activeTab,
                        keyword: this.search ? this.search.keyword : '',
                        dateArr: this.search ? JSON.stringify(this.search.dateArr) : JSON.stringify([]),
                    },
                }).then(response=>{
                    that.$hideLoading();
                    uni.hideLoading();
                    if(response.code == 0) {
                        that.list = response.data.list;
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(() => {
                    that.$hideLoading();
                    uni.hideLoading();
                    that.$event.on(that.$const.EVENT_USER_LOGIN).then(()=>{
                        that.getList();
                    });
                });
            },
            getMore() {
                let that = this;
                let url;
                uni.showLoading({
                    title: '加载中...'
                });
                that.$request({
                    url: that.$api.share.share_order,
                    data: {
                        status: that.activeTab,
                        page: that.page
                    },
                }).then(response=>{
                    uni.hideLoading();
                    if(response.code == 0) {
                        if(response.data.list.length > 0) {
                            that.loading = null;
                            that.list = that.list.concat(response.data.list);
                            that.page++;
                        }
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(e => {
                    uni.hideLoading();
                });
            },
            toGoods(id,item) {
                return true;
                if(item.mch_id > 0) {
                    uni.navigateTo({
                        url: '/plugins/mch/goods/goods?id=' + id +'&mch_id=' + item.mch_id
                    });
                }else if(item.sign =='advance') {
                    uni.navigateTo({
                        url: '/plugins/advance/detail/detail?id=' + id
                    });
                }else if(item.sign =='pintuan') {
                    uni.navigateTo({
                        url: '/plugins/pt/goods/goods?goods_id=' + id
                    });
                }else if(item.sign =='miaosha') {
                    uni.navigateTo({
                        url: '/plugins/miaosha/goods/goods?id=' + id
                    });
                } else if(item.sign =='gift') {
                    uni.navigateTo({
                        url: '/plugins/gift/goods/goods?id=' + id
                    });
                } else if(item.sign =='advance') {
                    uni.navigateTo({
                        url: '/plugins/advance/detail/detail?id=' + item.goods_id
                    });
                }  else if(item.sign =='booking') {
                    uni.navigateTo({
                        url: '/plugins/book/goods/goods?goods_id=' + id
                    });
                } else if(item.sign =='') {
                    uni.navigateTo({
                        url: '/pages/goods/goods?id=' + id
                    });
                } else if(item.sign == 'vip_card') {
                    return false
                }else {
                    uni.navigateTo({
                        url: '/plugins/'+item.sign+'/goods/goods?goods_id=' + id
                    });
                }

            },
        },

        onLoad(options) {
            let that = this;
            uni.setNavigationBarTitle({
                title: that.custom_setting.menus.order.name
            });
        },
        onShow(){
            let that = this;
            uni.getStorage({
                key: 'search',
                success(res) {
                    that.search = res.data;
                    that.$showLoading({
                        type: 'global',
                        text: '加载中...'
                    });
                    that.getList();
                },
                fail() {
                    that.$showLoading({
                        type: 'global',
                        text: '加载中...'
                    });
                    that.getList();
                }
            });
        },
        onReachBottom() {
            this.getMore();
        }
    }
</script>

<style scoped lang="scss">
    .search-area {
        position: fixed;
        z-index: 3;
        top: 0;
        left: 0;
        right: 0;
        height: #{88rpx};
        line-height: #{88rpx};
        width: 100%;
        background-color: #efeff4;
        padding: #{12rpx} #{24rpx};

        .search {
            height: #{64rpx};
            line-height: #{64rpx};
            border-radius: #{32rpx};
            background-color: #fff;
            color: #b2b2b2;
            font-size:#{26rpx};

            &.be-search {
                color: #353535;
                padding-left: 32rpx;

                .icon-search {
                    margin-right: 10rpx;
                }
            }

            .icon-search {
                height: #{24rpx};
                width: #{24rpx};
                margin-top: #{20rpx};

                &+text {
                    color: #b2b2b2;
                    margin:0 #{8rpx};
                }
            }
        }
    }
    .item {
        background-color: #fff;
        color: #353535;
        padding: 0 #{24rpx};
        font-size: #{24rpx};
        margin: 0 #{24rpx} #{30rpx};
        border-radius: #{16rpx};
        box-shadow: 1rpx 1rpx 10rpx rgba(0, 0, 0, 0.06);
    }

    .status {
        float: right;
    }

    .item-top {
        padding: #{24rpx} 0;
    }

    .item-bottom {
        height: #{90rpx};
        line-height: #{66rpx};
        padding: #{12rpx} 0;
    }

    .avatar {
        height: #{64rpx};
        width: #{64rpx};
        float: left;
        margin-right: #{10rpx};
    }

    .item-bottom .name {
        width: 20%;
    }

    .item-bottom .type {
        width: 25%;
        margin-left: #{20rpx};
    }

    .item-bottom .money {
        width: 35%;
        text-align: right;
    }

    .open {
        float: right;
        margin: #{20rpx} #{10rpx} 0 #{20rpx};
        height: #{26rpx};
        width: #{16rpx};
    }

    .close {
        float: right;
        margin: #{25rpx} #{10rpx};
        height: #{16rpx};
        width: #{26rpx};
    }

    .order {
        border-top: #{1rpx} solid #e2e2e2;
        height: #{164rpx};
        padding: #{30rpx} 0;
    }

    .goods-img {
        height: #{104rpx};
        width: #{104rpx};
        margin-right: #{50rpx};
        float: left;
    }

    .goods-name {
        width: 75%;
        margin-bottom: #{5rpx};
    }
    .red-color {
        color: #ff4544;
    }
</style>