caimei-applets-hehe/pages/user/order/order-details.vue

<template>
    <view class="container details clearfix" :style="{ paddingBottom: isIphoneX ? 130 + 68 + 'rpx' : '130rpx' }">
        <!-- 自定义返回 -->
        <header-order
            :systeminfo="systeminfo"
            :navbar-data="nvabarData"
            :headerBtnPosi="headerBtnPosi"
            :isShare="isOrderShare"
        >
        </header-order>
        <view class="container-details" :style="{ paddingTop: navbarHeight + 'px' }">
            <view class="status-text">
                <view class="view-type">{{ information.status | TextFormat }}</view>
            </view>
            <!-- 地址选择 -->
            <order-address ref="orderAddress" v-if="isRequest" :addressData="addressData"></order-address>
            <!-- 商品 -->
            <goods-list
                ref="goods"
                v-if="isRequest"
                :shopOrderData="shopOrderData"
                :information="information"
                @popupClick="hanldePopupFn"
            ></goods-list>
            <!-- 订单信息 -->
            <order-information ref="information" v-if="isRequest" :information="information"></order-information>
            <!-- 底部button -->
            <order-button
                ref="orderButton"
                v-if="isRequest"
                :status="btnStatus"
                :shareCode="shareCode"
                :order="orderInfo"
                @buttonConfirm="handButtonConfirm"
            >
            </order-button>
        </view>
        <!-- 操作弹窗 -->
        <tui-modal
            :show="modal"
            @click="handleClick"
            @cancel="hideMobel(1)"
            :content="contentModalText"
            color="#333"
            :size="32"
            shape="circle"
            :maskClosable="false"
        ></tui-modal>
        <!-- 再次购买订单商品全部下架弹窗 -->
        <tui-modal
            :show="modal2"
            @click="handleClick2"
            @cancel="hideMobel(2)"
            shape="circle"
            content="订单内商品已全部下架，不能购买！"
            :button="button"
        ></tui-modal>
        <!-- 再次购买部分商品失效弹窗 -->
        <tui-modal :show="modal3" @cancel="hideMobel(3)" :custom="true">
            <view class="tui-modal-custom">
                <view class="tui-modal-custom-text">
                    <view class="title">以下商品已失效，不能进行购买；是否先将其他商品加入购物车？</view>
                    <scroll-view scroll-y class="tui-modal-custom-list">
                        <view class="custom-list" v-for="(invalid, index) in invalidList" :key="index">
                            <view class="custom-list-image"><image :src="invalid.productImage" mode=""></image></view>
                            <view class="custom-list-name">{{ invalid.name }}</view>
                        </view>
                    </scroll-view>
                </view>
                <view class="tui-modal-button">
                    <button class="modal-button cancel" @click="hideMobel(3)">我再想想</button>
                    <button class="modal-button confirm" @click="handleClick3">加入购物车</button>
                </view>
            </view>
        </tui-modal>
        <!-- 促销活动弹窗 -->
        <activi-popup :Promotion="handlerPros" :popupShow="popupShow"></activi-popup>
        <!-- 加载中 -->
        <cm-loading :visible="isSubLoading" :text="loadingText"></cm-loading>
    </view>
</template>

<script>
import authorize from '@/common/authorize.js'
import HeaderOrder from '@/components/cm-module/headerNavbar/header-order' //自定义导航
import orderAddress from '@/components/cm-module/orderDetails/orderAddress' //地址信息
import goodsList from '@/components/cm-module/orderDetails/goodsList' //商品列表
import orderInformation from '@/components/cm-module/orderDetails/orderInformation' //订单信息
import transfeRecord from '@/components/cm-module/orderDetails/transfeRecord' //转账信息
import paymentRecord from '@/components/cm-module/orderDetails/paymentRecord' //支付记录
import refundRecord from '@/components/cm-module/orderDetails/refundRecord' //退款记录
import orderButton from '@/components/cm-module/orderDetails/orderButton' //底部按钮
import CmLoading from '@/components/cm-module/cm-loading/cm-loading.vue'
import wechatPay from '@/mixins/wechatPay.js'
export default {
    components: {
        HeaderOrder,
        orderInformation,
        orderAddress,
        goodsList,
        CmLoading,
        transfeRecord,
        paymentRecord,
        refundRecord,
        orderButton
    },
    // 混入
    mixins: [wechatPay],
    data() {
        return {
            state: 0,
            orderId: '',
            shareCode: '', //分享码
            shareType: '', //分享登录页过来记录的状态
            cellPhone: '', //客服电话
            payStatus: 0,
            btnStatus: 0, //按钮组件状态
            onlinePayFlag: '',
            isRequest: false, //是否加载完成渲染子组件
            isOrderShare: false,
            isConfim: false,
            modelType: 0,
            orderInfo: {},
            alertOrderInfo: {},
            addressData: {}, //地址信息初始化
            information: {}, //订单信息初始化
            shopOrderData: {}, //商品信息初始化
            orderInvoice: {}, //发票信息初始化
            returnedPurchaseList: {}, //退款信息初始化
            discernReceiptList: {}, //支付信息初始化
            receiptAmount: 0, //支付金额
            returnedPurchaseFee: 0, //退款金额
            navbarHeight: '',
            headerBtnPosi: this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
            systeminfo: this.setSysteminfo(), //获取设备信息
            isIphoneX: this.$store.getters.isIphoneX,
            CustomBar: this.CustomBar, // 顶部导航栏高度
            popupShow: false,
            handlerPros: {},
            nvabarData: {
                //顶部自定义导航
                showCapsule: 1, // 是否显示左上角图标   1表示显示    0表示不显示
                title: '订单详情' // 导航栏 中间的标题
            },
            clauseData: {},
            orderSubmitType: false, //自主订单
            userId: 0,
            modal: false,
            modal2: false,
            modal3: false,
            OperationType: '',
            contentModalText: '',
            button: [
                {
                    text: '确定',
                    type: 'danger'
                }
            ],
            invalidList: [],
        }
    },
    onLoad(option) {
        console.log(option)
        this.$api.getStorage().then(resolve => {
            this.userId = resolve.userId ? resolve.userId : 0
        })
        this.shareType = option.type
        this.orderId = option.orderId
        if (this.shareType === 'share') {
            this.state = 0
            this.isOrderShare = true
        } else if (option.type === 'confim' || option.type === 'search') {
            this.state = 0
            this.isConfim = true
        } else {
            this.state = option.state
        }
        this.getHeaderTopHeight()
        this.GetOrderDetaileData()
    },
    filters: {
        TextFormat(status) {
            //处理金额
            let HtmlText,
                typeTextObject = {
                    4: '交易完成',
                    5: '订单完成',
                    6: '已关闭',
                    7: '交易全退',
                    77: '交易全退',
                    11: '待付款待发货',
                    12: '待付款部分发货',
                    13: '待付款已发货',
                    21: '部分付款待发货',
                    22: '部分付款部分发货',
                    23: '部分付款已发货',
                    31: '已付款待发货',
                    32: '已付款部分发货',
                    33: '已付款已发货',
                    111: '待付款待发货'
                }
            Object.keys(typeTextObject).forEach(key => {
                if (key == status) {
                    HtmlText = typeTextObject[key]
                }
            })
            return HtmlText
        }
    },
    methods: {
        openclauseConten(id) {
            this.$api.navigateTo(`/pages/service/sellconten?clauseId=${id}`)
        },
        GetOrderDetaileData() {
            //初始化页面数据@参数：订单ID
            this.OrderService.QueryOrderDetails({ orderId: this.orderId })
                .then(response => {
                    let resData = response.data
                    this.isRequest = true
                    this.orderInfo = resData.order
                    this.userId = resData.order.userId
                    this.shareCode = resData.shareCode
                    this.addressData = resData.userInfo
                    this.information = resData.order
                    this.btnStatus = resData.order.status
                    this.payStatus = resData.order.payStatus
                    this.payableAmount = resData.order.payableAmount
                    this.shopOrderData = resData.shopOrderList
                    this.orderInvoice = resData.orderInvoice
                    this.onlinePayFlag = resData.order.onlinePayFlag
                    this.returnedPurchaseList = resData.returnedPurchaseList
                    this.discernReceiptList = resData.discernReceiptList
                    this.receiptAmount = resData.order.receiptAmount
                    this.returnedPurchaseFee = resData.order.returnedPurchaseFee
                    this.clauseData = resData.clause
                    if (
                        this.information.orderSubmitType == 0 ||
                        this.information.orderSubmitType == 1 ||
                        this.information.orderSubmitType == 2
                    ) {
                        this.orderSubmitType = true
                    } else {
                        this.orderSubmitType = false
                    }
                })
                .catch(error => {
                    this.$util.modal('提示', '订单查询失败，请稍后重试~', '确定', '', false, () => {
                        this.$api.switchTabTo('/pages/tabBar/index/index')
                    })
                })
        },
        handButtonConfirm(data) {
            //获取点击
            console.log(data)
            this.hanldOrder = data
            this.btnoRderID = data.orderId
            this.OperationType = data.type
            this.handShowAlert(data)
        },
        handShowAlert(data) {
            //执行
            switch (data.type) {
                case 'cancel':
                    this.modal = true
                    this.contentModalText = '确认取消该订单吗？'
                    break
                case 'delete':
                    this.modal = true
                    this.contentModalText = '确认删除该订单吗？'
                    break
                case 'confirm':
                    this.modal = true
                    this.contentModalText = '是否确认收货？'
                    break
                case 'query':
                    this.isModalLayer = true
                    this.$api.navigateTo('/pages/user/order/order-logistics?orderId=' + data.orderId)
                    break
                case 'again':
                    this.handBuyAgainInfo()
                    break
                case 'pay':
                    this.miniWxPayFor(data.order)
                    break
            }
        },
        handleClick(e) {
            //用户操作订单
            let index = e.index
            if (index == 1) {
                switch (this.OperationType) {
                    case 'delete':
                        this.handOrderDetele(this.orderId)
                        break
                    case 'cancel':
                        this.handCenceConfirm(this.orderId)
                        break
                    case 'confirm':
                        this.handOrderConfirm(this.orderId)
                        break
                }
            }
            this.modal = false
        },
        handleClick2() {
            this.modal2 = false
        },
        handleClick3() {
            this.handShoppingAgainCart()
            this.modal3 = false
        },
        hideMobel(index) {
            switch (index) {
                case 1:
                    this.modal = false
                    break
                case 2:
                    this.modal2 = false
                    break
                case 3:
                    this.modal3 = false
                    break
            }
        },
        handBuyAgainInfo() {
            //再次购买初始化查询订单商品信息
            this.OrderService.GetOrderBuyAgain({
                orderId: this.orderId
            })
                .then(response => {
                    this.handShoppingAgainCart()
                })
                .catch(error => {
                    console.log(error.data)
                    if (error.data && error.data.length > 0) {
                        this.modal3 = true
                        this.invalidList = error.data
                    } else {
                        this.modal2 = true
                    }
                })
        },
        handShoppingAgainCart() {
            //一键加入购物车
            this.ProductService.ShoppingAgainCart({
                orderId: this.orderId
            })
                .then(response => {
                    this.ProductService.QueryShoppingQuantity({ userId: this.userId })
                        .then(response => {
                            this.$api.switchTabTo('/pages/tabBar/cart/index')
                        })
                        .catch(error => {
                            console.log('查询购物车数量错误信息', error)
                        })
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        handOrderConfirm(id) {
            //确认收货
            this.OrderService.ConfirmReceipt({ orderId: id })
                .then(response => {
                    this.$util.msg(response.msg, 2000, true, 'success')
                    setTimeout(() => {
                        this.GetOrderDetaileData(this.currentTab)
                    }, 2000)
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        handOrderDetele(id) {
            //删除订单
            this.OrderService.DeleteOrder({ orderId: id })
                .then(response => {
                    this.$util.msg(response.msg, 2000, true, 'success')
                    setTimeout(() => {
                        uni.navigateBack({
                            delta: 1
                        })
                    }, 2000)
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        handCenceConfirm(id) {
            //取消订单
            this.OrderService.CancelOrder({ orderId: id })
                .then(response => {
                    this.$util.msg(response.msg, 2000, true, 'success')
                    setTimeout(() => {
                        this.GetOrderDetaileData(this.currentTab)
                    }, 2000)
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        hanldePopupFn(data) {
            //监听活动内容
            this.popupShow = true
            this.handlerPros = data
        },
        getHeaderTopHeight() {
            let statusBarHeight = this.systeminfo.statusBarHeight // 状态栏高度
            let headerPosi = this.headerBtnPosi
            let btnPosi = {
                // 胶囊实际位置，坐标信息不是左上角原点
                height: headerPosi.height,
                width: headerPosi.width,
                // 胶囊top - 状态栏高度
                top: headerPosi.top - statusBarHeight,
                // 胶囊bottom - 胶囊height - 状态栏height （现胶囊bottom 为距离导航栏底部的长度）
                bottom: headerPosi.bottom - headerPosi.height - statusBarHeight,
                // 屏幕宽度 - 胶囊right
                right: this.systeminfo.screenWidth - headerPosi.right
            }
            this.navbarHeight = headerPosi.bottom + btnPosi.bottom // 原胶囊bottom + 现胶囊bottom
        },
        setHeaderBtnPosi() {
            // 获得胶囊按钮位置信息
            let headerBtnPosi = uni.getMenuButtonBoundingClientRect()
            return headerBtnPosi
        },
        setSysteminfo() {
            let systeminfo
            uni.getSystemInfo({
                // 获取设备信息
                success: res => {
                    systeminfo = res
                }
            })
            return systeminfo
        }
    },
    onShow() {}
}
</script>

<style lang="scss">
page {
    height: auto;
    background: #f7f7f7;
}
.details {
    padding-bottom: 130rpx;
}
.btn-hover {
    background: #ffffff;
}
.animation {
    /* transition: transform 0.3s ease;*/
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}
.invoice-balance {
    width: 702rpx;
    height: auto;
    padding: 0 24rpx;
    background: #ffffff;
    float: left;
    margin-top: 24rpx;
    margin-bottom: 24rpx;
    .balabce-t {
        width: 100%;
        height: 86rpx;
        line-height: 86rpx;
        font-size: $font-size-28;
        color: $text-color;
        float: left;
        .balabce-t-le {
            float: left;
            font-weight: bold;
        }
        .balabce-t-ri {
            float: right;
            display: flex;
            align-items: center;
            .money {
                display: flex;
                float: left;
            }
            .checkbox-box {
                display: flex;
                width: 60rpx;
                float: left;
                height: 100%;
                font-size: $font-size-24;
                .checkbox {
                    width: 40rpx;
                    text-align: right;
                    box-sizing: border-box;
                    text-align: center;
                    text-decoration: none;
                    border-radius: 0;
                    -webkit-tap-highlight-color: transparent;
                    overflow: hidden;
                }
            }
        }
    }
    .balabce-b {
        width: 100%;
        float: left;
        overflow: hidden;
        .balabce-b-text {
            width: 100%;
            line-height: 58rpx;
            font-size: $font-size-24;
            color: #ff457b;
            text-align: right;
            float: right;
        }
        &.balabce-b--hide {
            padding: 0 0;
            height: 0px;
            line-height: 0px;
        }
    }
}
.clause {
    float: right;
    font-size: 24rpx;
    color: #999999;
    margin-top: 60rpx;
    margin-right: 24rpx;
    &.noclick {
        pointer-events: none;
    }
    .text {
        color: #1890f9;
        &.color-bg {
            color: #333333;
        }
    }
}
.status-text {
    overflow: hidden;
    padding: 0 24rpx;
    background: #fff;
    font-size: $font-size-26;
    .view-type {
        float: left;
        color: $color-system;
    }
}
.tui-modal-custom-text {
    min-height: 300rpx;
    margin-bottom: 30rpx;
    .title {
        width: 100%;
        height: auto;
        font-size: $font-size-30;
        text-align: justify;
        color: #333333;
        line-height: 40rpx;
        margin-bottom: 30rpx;
    }
    .tui-modal-custom-list {
        width: 100%;
        height: 350rpx;
        overflow: hidden;
        .custom-list {
            width: 100%;
            height: 117rpx;
            box-sizing: border-box;
            float: left;
            padding: 15rpx 0;
            .custom-list-image {
                width: 86rpx;
                height: 86rpx;
                float: left;
                border-radius: 6rpx;
                box-sizing: border-box;
                border: 1px solid #e1e1e1;
                image {
                    width: 84rpx;
                    height: 84rpx;
                    border-radius: 6rpx;
                    display: block;
                }
            }
            .custom-list-name {
                width: 400rpx;
                height: 86rpx;
                float: right;
                line-height: 43rpx;
                font-size: $font-size-26;
                color: #666666;
                text-overflow: ellipsis;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
            }
        }
    }
}
.tui-modal-button {
    width: 100%;
    height: 72rpx;
    display: flex;
    .modal-button {
        width: 200rpx;
        height: 72rpx;
        line-height: 72rpx;
        border-radius: 36rpx;
        box-sizing: border-box;
        &.cancel {
            border: 1px solid #b2b2b2;
            background: #ffffff;
            color: #333333;
        }
        &.confirm {
            background: $btn-confirm;
            color: #ffffff;
        }
    }
}
</style>