football/pages/app_admin/send/send.vue

<template>
    <app-layout>
        <view class="title">选择发货商品<text>默认全选</text></view>
        <view v-if="detail.detail.length > 0" class="goods-list">
            <view class="dir-left-nowrap cross-center goods-item" v-for="item in detail.detail" :key="item.id">
                <image class="active-icon" style="background-color: #E2E2E2" v-if="item.choose == 2 && order_refund_id == 0" src="/static/image/icon/form-er.png"></image>
                <image v-else-if="item.choose" class="active-icon" @click='chooseAddress(item)' src="./../image/active.png"></image>
                <image class="active-icon" v-else @click='chooseAddress(item)' src="/static/image/icon/form-er.png"></image>
                <view class="dir-left-nowrap goods">
                    <image class="goods-img" :src="item.goods_info.goods_attr.pic_url ? item.goods_info.goods_attr.pic_url : item.goods_info.goods_attr.cover_pic"></image>
                    <view class="goods-info">
                        <view class="t-omit-two goods-name">{{item.goods_info.goods_attr.name}}</view>
                        <view class="goods-attr t-omit">
                            <text v-for="(attr,index) in item.goods_info.attr_list" :key="index">{{attr.attr_group_name}}:{{attr.attr_name}}</text>
                        </view>
                        <view class="main-between cross-bottom">
                            <view class="goods-num">x{{item.num}}</view>
                            <view>￥{{item.total_price}}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="title">填写物流信息</view>
        <view class="input-list">
            <view class="main-between input-item">
                <view class='label'>选择发货方式</view>
                <view class="type dir-left-nowrap">
                    <view @click="toggleExpress(1)" :class="is_express == 1 ? 'active': ''">快递配送</view>
                    <view @click="toggleExpress(0)" :class="is_express == 0 ? 'active': ''">无需物流</view>
                </view>
            </view>
            <view v-if="is_express == 1" class="dir-left-nowrap input-item">
                <view class='label'>快递公司</view>
                <view @click='toPick' width="width:30%;" class="dir-right-nowrap cross-center">
                    <image class="to-more" src='/static/image/icon/arrow-right.png'></image>
                    <text>{{express}}</text>
                </view>
            </view>
            <view v-if="is_express == 1" class="dir-left-nowrap input-item" style='position:relative'>
                <view class='label'>快递单号</view>
                <input class="express-no" v-model="express_no"></input>
                <text v-if="id > 0" @click="getExpressNo" class='get'>获取面单</text>
            </view>
            <view class="dir-left-nowrap input-item" v-if="express == '京东物流' && is_express == 1">
                <view class='label'>商家编码</view>
                <input v-model="customer_name"></input>
            </view>
            <view v-if="is_express == 1" class="dir-left-nowrap input-item">
                <view class='label'>收件人邮编</view>
                <input type="number" v-model="code"></input>
            </view>
            <view v-if="is_express == 1" class="dir-left-nowrap input-item">
                <view class='label'>商家留言</view>
                <input v-model="words"></input>
            </view>
            <view v-if="is_express == 0" class="dir-left-nowrap input-item">
                <view class='label'>物流内容</view>
                <input placeholder="请输入物流内容" v-model="express_content"></input>
            </view>
        </view>
        <button @click="saveAddress" class='address-bottom'>确认发货</button>
        <!-- 选择列表 -->
        <view class="dialog" v-if="dialog">
            <view class="picker-list">
                <view class="main-between picker-header">
                    <view @click="toPick(2)">取消</view>
                    <view @click="toPick(1)">确定</view>
                </view>
                <picker-view indicator-style="height: 36px;" class="pick" :value="[index]" @change="bindChange">
                    <picker-view-column>
                        <view v-for="item in list" class="pick-view" :key="item.name">{{item.name}}</view>
                    </picker-view-column>
                </picker-view>
            </view>
        </view>
    </app-layout>
</template>

<script>
    import { mapState } from "vuex";

    export default {
        data() {
            return {
                express_no: '',
                express: '',
                customer_name: '',
                express_content: '',
                code: '',
                words: '',
                list: [],
                detail: {},
                dialog: false,
                id: '',
                value: 0,
                is_express: 1,
                is_send: 0,
                order_refund_id: 0,
                express_single: {},
            }
        },
        computed: {
            ...mapState({
                theme: state => state.mallConfig.theme,
                userInfo: state => state.user.info,
                adminImg: state => state.mallConfig.__wxapp_img.app_admin,
            })
        },
        methods: {
            chooseAddress(item) {
                item.choose = !item.choose;
                this.$forceUpdate();
            },

            toggleExpress(item) {
                this.is_express = item;
            },

            bindChange(e) {
                let index = e.detail.value[0]
                this.express = this.list[index].name
            },
            toPick() {
                let that = this;
                that.customer_name = '';
                that.list.forEach(function(row, index) {
                    if (that.list[index].name == that.express) {
                        if (that.list[index].name == '京东物流' || that.list[index].name == '京东快运') {
                            that.getCustomer();
                        }
                        that.value = index;
                    }
                })
                that.dialog = !that.dialog;
            },
            getExpressNo() {
                let that = this;
                uni.showLoading({
                    title: '加载中...'
                });
                that.$request({
                    url: that.$api.app_admin.print,
                    data: {
                        express: that.express,
                        code: that.code,
                        order_id: that.id
                    },
                }).then(response=>{
                    uni.hideLoading();
                    if(response.code == 0) {
                        that.express_no = response.data.Order.LogisticCode;
                        that.express_single = response.data.express_single
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(response => {
                    uni.hideLoading();
                });
            },
            getCustomer() {
                let that = this;
                uni.showLoading({
                    title: '加载中...'
                });
                that.$request({
                    url: that.$api.order.customer,
                    data: {
                        keyword: that.express
                    },
                }).then(response=>{
                    uni.hideLoading();
                    if(response.code == 0) {
                        that.customer_name = response.data.customer_account;
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(response => {
                    uni.hideLoading();
                });
            },
            getExpress() {
                let that = this;
                uni.showLoading({
                    title: '加载中...'
                });
                that.$request({
                    url: that.$api.app_admin.express
                }).then(response=>{
                    uni.hideLoading();
                    if(response.code == 0) {
                        that.list = response.data.list;
                        that.getList();
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(response => {
                    uni.hideLoading();
                });
            },
            getList() {
                let that = this;
                uni.showLoading({
                    title: '加载中...'
                });
                that.$request({
                    url: that.$api.app_admin.detail,
                    data: {
                        order_id: that.id
                    },
                    method: 'post'
                }).then(response=>{
                    uni.hideLoading();
                    if(response.code == 0) {
                        that.detail = response.data.order;
                        for(let i in that.detail.detail) {
                            that.detail.detail[i].choose = true;
                        }
                        if(that.detail.detailExpress.length > 0) {
                            that.detail.detail.forEach( row => {
                                for(let i in that.detail.detailExpress) {
                                    for(let x in that.detail.detailExpress[i].expressRelation) {
                                        if(that.detail.detailExpress[i].expressRelation[x].order_detail_id == row.id) {
                                            row.choose = 2;
                                        }
                                    }
                                }
                            })
                        }
                        if(that.is_send > 0) {
                            that.express = response.data.order.express;
                            that.express_no = response.data.order.express_no;
                            that.customer_name = response.data.order.customer_name;
                            that.code = '';
                            that.words = response.data.order.merchant_remark;
                            if(response.data.order.code > 0) {
                                that.code = response.data.order.code
                            }
                        } else {
                            that.express = that.list[0].name
                        }
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(response => {
                    uni.hideLoading();
                });
            },
            saveAddress: function (e) {
                let that = this;
                if (that.is_express == 1 && !that.express_no) {
                    uni.showToast({
                        title: '快递单号不得为空',
                        icon: 'none',
                        duration: 1000,
                    });
                    return;
                }
                let id_list = [];
                for(let i in that.detail.detail) {
                    if(that.detail.detail[i].choose && that.detail.detail[i].choose != 2) {
                        id_list.push(that.detail.detail[i].id)
                    }
                }
                if (id_list.length == 0 && that.order_refund_id == 0) {
                    uni.showToast({
                        title: '请选择发货商品',
                        icon: 'none',
                        duration: 1000,
                    });
                    return;
                }
                uni.showLoading({
                    title: '提交中...'
                });
                let para = {
                    is_express: 1,
                    order_id: that.id,
                    express_no: that.express_no,
                    express: that.express,
                    code: that.code,
                    customer_name: that.customer_name,
                    merchant_remark: that.words,
                    express_content: '',
                    order_detail_id: JSON.stringify(id_list),
                    express_single_id: that.express_single.id ? that.express_single.id : 0,
                }
                if(that.is_express == 0) {
                    para = {
                        is_express: 2,
                        order_id: that.id,
                        express_content: that.express_content,
                        order_detail_id: JSON.stringify(id_list)
                    }
                }
                if(that.order_refund_id > 0) { 
                    that.$request({
                        url: that.$api.app_admin.refund_handle,
                        method: "POST",
                        data: {
                            is_express: 1,
                            type: 2,
                            is_agree: 1,
                            order_refund_id: that.order_refund_id,
                            express_no: that.express_no,
                            express: that.express,
                            merchant_remark: that.words,
                        }
                    }).then(response => {
                        uni.hideLoading();
                        if (response.code == 0) {
                            let msg = response.msg;
                            uni.showToast({
                                title: msg,
                                duration: 1000,
                                icon: 'success',
                                mask: false
                            });
                            setTimeout(function(){
                                uni.navigateBack();
                            },500)
                        } else {
                            uni.showToast({
                                title: response.msg,
                                icon: 'none',
                                duration: 1000
                            });
                        }
                    }).catch(response => {
                        uni.hideLoading();
                        uni.showToast({
                            title: response,
                            icon: 'none',
                            duration: 1000
                        });
                    });
                }else {
                    that.$request({
                        url: that.$api.app_admin.send,
                        method: "POST",
                        data: para
                    }).then(response => {
                        uni.hideLoading();
                        if (response.code == 0) {
                            let msg = response.msg;
                            if(that.is_send == 2) {
                                msg = '修改成功'
                            }
                            uni.showToast({
                                title: msg,
                                duration: 1000,
                                icon: 'success',
                                mask: false
                            });
                            setTimeout(function(){
                                uni.navigateBack();
                            },500)
                        } else {
                            uni.showToast({
                                title: response.msg,
                                icon: 'none',
                                duration: 1000
                            });
                        }
                    }).catch(response => {
                        uni.hideLoading();
                        uni.showToast({
                            title: response,
                            icon: 'none',
                            duration: 1000
                        });
                    }); 
                }
            },
        },

        onLoad(options) {
            let that = this;
            if (options.id > 0) {
                that.id = options.id
            }
            if (options.order_refund_id > 0) {
                that.order_refund_id = options.order_refund_id
            }
            that.getExpress();
            if (options.is_send > 0) {
                that.is_send = options.is_send
            }
        }
    }
</script>

<style scoped lang="scss">
    .title {
        padding: #{28rpx} #{24rpx} #{24rpx};
        font-size: #{28rpx};
        color: #353535;
        text {
            margin-left: #{16rpx};
            color: #999999;
        }
    }

    .goods-list {
        background-color: #fff;
        margin: 0 #{24rpx} #{28rpx};
        padding: #{32rpx} #{24rpx};
        border-radius: #{16rpx};
        .goods-item {
            margin-top: #{24rpx};
        }
        .goods-item:first-of-type {
            margin-top: 0;
        }
        .active-icon {
            height: #{36rpx};
            width: #{36rpx};
            border-radius: #{18rpx};
            margin-right: #{24rpx};
        }
        .goods {
            width: #{600rpx};
        }
        .goods-img {
            flex-shrink: 0;
            width: #{160rpx};
            height: #{160rpx};
            margin-right: #{20rpx};
        }
        .goods-info {
            font-size: #{24rpx};
            width: #{414rpx};
            color: #353535;
            .goods-name {
                height: #{64rpx};
                margin-top: #{5rpx};
                width: #{414rpx};
            }
            .goods-attr {
                color: #999999;
                width: 95%;
                margin-top: #{18rpx};
                margin-bottom: #{12rpx};
                text {
                    margin-right: #{5rpx};
                }
            }
            .goods-num {
                color: #999999;
            }
        }
    }

    .pick {
        width: 100%;
        height: #{440rpx}
    }

    .pick-view {
        line-height: #{72rpx};
        text-align:center;
        color:#446dfd;
        font-size: #{32rpx};
    }

    .express-no {
        padding-right: #{180rpx};
    }

    .address-bottom {
        width: #{702rpx};
        height: #{80rpx};
        line-height: #{80rpx};
        border-radius: #{40rpx};
        padding: 0;
        text-align: center;
        margin: #{40rpx} auto;
        color: #fff;
        z-index: 7;
        font-size: #{28rpx};
        background-color: #446dfd;
    }

    .to-more {
        height: #{24rpx};
        width: #{12rpx};
        margin-left: #{10rpx};
    }

    .input-list {
        background-color: #fff;
        margin: 0 #{24rpx};
        border-radius: #{16rpx};
        padding: 0 #{24rpx};
        .input-item {
            border-top: #{1rpx} solid #eee;
            padding: #{24rpx} 0;
            height: #{96rpx};
            font-size: #{28rpx};
            color: #495060;
            .type {
                width: #{328rpx};
                view {
                    padding: 0 #{20rpx};
                    height: #{48rpx};
                    line-height: #{48rpx};
                    margin-left: #{16rpx};
                    background-color: #fff;
                    border-radius: #{26rpx};
                    border: #{2rpx} solid #e2e2e2;
                    color: #666666;
                    display: inline-block;
                    width: auto;
                    font-size: #{26rpx};
                }
                .active {
                    background-color: #446dfd;
                    border: 0;
                    color: #fff;
                }
            }
            .label {
                width: #{200rpx};
                height: #{48rpx};
                line-height: #{48rpx};
            }
            input {
                width: #{550rpx};
                height: #{48rpx};
                line-height: #{48rpx};
                font-size: #{28rpx};
            }
            view {
                width: #{550rpx};
                height: #{48rpx};
                line-height: #{48rpx};
                font-size: #{28rpx};
            }
        }
        .input-item:first-of-type {
            border-top: 0;
        }
    }

    .dialog {
        position: fixed;
        height: 100%;
        width: 100%;
        bottom: #{96rpx};
        left: 0;
        z-index: 10;
        background-color: rgba(0, 0, 0, .3);
    }

    .picker-list {
        background-color: #fff;
        padding-top: #{20rpx};
        position: fixed;
        bottom: #{96rpx};
        left: 0;
        width: 100%;
    }

    .picker-header {
        padding: 0 #{24rpx};
        color: #446dfd;
        font-size: #{32rpx};
    }

    .get {
        width: #{160rpx};
        height: #{48rpx};
        line-height: #{48rpx};
        text-align: center;
        border: #{1rpx} solid #446dfd;
        border-radius: #{24rpx};
        position: absolute;
        top: #{20rpx};
        right: 0;
        display: block;
        color: #446dfd;
    }
</style>