caimei-applets-mcare/pages/user/order/create-order.vue

<template>
    <view class="container order clearfix" :style="{ paddingBottom: isIphoneX ? '200rpx' : '164rpx' }">
        <!-- 地址选择 -->
        <cm-address-temp ref="choiceAddress" v-if="isRequest" :addressData="addressData" />
        <!-- 商品 -->
        <cm-goods-temp
            ref="goods"
            v-if="isRequest"
            :goodsData="goodsData"
            @handleGoodList="handChangeInputGoodsList"
            :freightData="freightData"
            :coldChain="handleColdChain"
            @show-freight="showFreight"
        />
        <!-- 发票信息 -->
        <cm-invice-popup
            ref="invoice"
            v-if="isRequest"
            :invoiceDatas="invoiceData"
            @handleChoiceaInvoice="handleChoiceaInvoiceData"
        />
        <!-- 底部 -->
        <view class="footer-wrapper" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }">
            <view class="footer">
                <view class="footer-le">
                    <view class="footer-count">
                        <text>共{{ totalCount }}件商品</text>
                    </view>
                    <view class="footer-price">
                        <view class="sum none">
                            总价:
                            <text class="price">￥{{ orderShouldPayFee | NumFormat }}</text>
                        </view>
                    </view>
                </view>
                <view class="footer-submit" @click.stop="orderSubmitMit">
                    <view class="btn" :class="isSubLoading ? 'disabled' : ''">提交订单</view>
                </view>
            </view>
        </view>
        <!-- 提示弹窗 -->
        <tui-modal
            :show="showModal"
            @click="handleClick"
            @cancel="hideMobel"
            :content="contentModalText"
            :button="modalButton"
            color="#333"
            :size="28"
            shape="circle"
            :maskClosable="false"
        />
    </view>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import cmAddressTemp from './components/cm-address-temp'
import cmGoodsTemp from './components/cm-goods-temp'
import cmInvicePopup from './components/cm-invice-popup'
export default {
    components: {
        cmAddressTemp,
        cmGoodsTemp,
        cmInvicePopup
    },
    data() {
        return {
            skeletonShow: true,
            isIphoneX: this.$store.state.isIphoneX,
            isSubLoading: false,
            confirmType: 1,
            orderID: 0,
            cartParam: {
                // 购物车立即结算确认订单参数
                skuIds: 0, // 商品Id(逗号隔开)
                source: 2, // 来源：1WWW 2小程序
                userId: 0 ,// 用户Id
                townId: '', // 区域id
            },
            productParam: {
                // 商品立即购买确认订单参数
                productCount: 0, // 商品数量
                productId: 0, // 商品Id
                source: 2, // 来源：1WWW 2小程序
                userId: 0 ,// 用户Id
                townId: '', // 区域id
            },
            supportParm: {
                // 组合商品立即购买确认订单参数
                productInfo: '',
                source: 2, // 来源：1WWW 2小程序
                userId: 0 ,// 用户Id
                townId: '', // 区域id
            },
            postageParam: {
                // 邮费计算参数
                skuIds: 0, // 商品Id(逗号隔开)
                userId: 0, // 用户Id
                townId: 0 // 地区Id
            },
            confirmParam: {
                cartType: 1, // 购买类型:（1自主下单, 3协销下单）
                orderMiniType: 0, // 订单提交状态 0初始提交 1 继续提交
                orderSource: 6, // 订单来源 1WWW 6小程序[采美,星范]
                addressId: 0, // 收货地址Id
                clubCouponId: 0, // 关联优惠券Id
                clubId: 0, // 机构Id
                orderInfo: [], // 订单商品数据
                orderInvoice: { type: 0 }, // 订单发票信息
                payInfo: {
                    // 订单金额数据
                    orderShouldPayFee: 0, // 订单最终支付金额
                    balancePayFlag: 0, // 勾选余额的状态(1使用，0不使用)
                    clauseId: 0, // 条款Id
                    postage: '0.00', // 运费金额
                    postageFlag: 0, // 运费类型
                    userBeans: 0, // 抵扣采美豆数量
                    rebateFlag: 0 // 是否返佣订单
                },
                unionId: uni.getStorageSync('unionId') // 用户unionId
            }, // 提交订单参数
            productIds: '', // 获取上一级页面商品信息
            submitState: '', // 提交状态
            totalCount: 1, // 订单提交总数量
            allPrice: 0.0, // 订单总金额
            orderShouldPayFee: 0, // 订单最终支付金额
            isRequest: false, // 是否加载完成渲染子组件
            isFreight: false, // 是否加载完成渲染子组件
            isAddress: false, // 是否加载完成地址
            isExchangePopup: false, // 控制兑换优惠券弹窗
            designatedFlag: '', // 是否为指定商品 1.仅为指定商品 2.仅为供应商商品 3.指定商品+供应商商品
            hanldFreePostFlag: '', // 邮费状态
            hanldFreight: '', // 邮费
            addressData: {}, // 初始化地址信息
            goodsData: [], // 初始化商品信息
            goodsCloneData: [], // 初始化商品信息
            couponList: [], // 初始化优惠券信息
            invoiceData: { type: 0 }, // 初始化发票信息
            freightData: {}, // 邮费数据
            orderInfo: [], // 提交的商品信息
            handleColdChain: 0, // 指定商品冷链费
            freightColdChain: 0, // 存储冷链费
            contentModalText: '采购金额过小，将扣除500采美豆，建议您前往采美旗下“颜选美学”小程序购买小额商品。', //操作文字提示语句
            modalButton: [
                {
                    text: '前往颜选美学',
                    type: 'gray',
                    plain: true //是否空心
                },
                {
                    text: '继续提交',
                    customStyle: {
                        color: '#fff',
                        bgColor: 'linear-gradient(90deg, #F28F31 0%, #F3B574 100%)'
                    },
                    plain: false
                }
            ],
            showModal: false,
            showModalstauts: 0,
            popupShow: false ,// 运费选择弹窗
            storeOptions: {}, // 上一页商品数据
        }
    },
    onLoad(option) {
        //商品数据
        this.storeOptions = option
        this.initCreateOrderInfo(option)
    },
    filters: {
        NumFormat(value) {
            //处理金额
            return Number(value).toFixed(2)
        }
    },
    methods: {
        // 运费底部上拉框
        showFreight($event) {
            this.popupShow = $event
        },
        async initCreateOrderInfo(option) {
            const data = JSON.parse(option.data)
            const userInfo = await this.$api.getStorage()
            this.productParam.userId = this.cartParam.userId = userInfo.userId
            this.supportParm.userId = this.postageParam.userId = userInfo.userId
            this.confirmParam.clubId = userInfo.clubId
            switch (option.type) {
                case '1': // 商品详情立即购买
                    this.confirmParam.cartType = 2
                    this.productParam.productCount = data.data.productCount
                    this.productParam.productId = data.data.productIds
                    this.productParam.skuId = data.data.skuId
                    this.productIds = data.data.productIds
                    this.getAddressData(userInfo.userId,1)
                    break
                case '2': // 购物车结算
                    this.confirmParam.cartType = 1
                    this.confirmType = 2
                    this.cartParam.skuIds = data.data.skuIds
                    this.getAddressData(userInfo.userId,2)
                    break
                case '3': // 组合商品立即购买
                    this.confirmParam.cartType = 2
                    this.confirmType = 2
                    this.supportParm.productInfo = JSON.stringify(data.data)
                    this.getAddressData(userInfo.userId,3)
            }
        },
        // 商品立即购买确认订单数据初始化
        async GetProductCreateOrderInfo() {
            try {
                const res = await this.OrderService.ProductCreateOrderInfo(this.productParam)
                this.setCreatDataInfo(res.data)
            } catch (error) {
                console.log('商品立即购买订单初始化异常')
            }
        },
        // 组合商品立即购买确认订单数据初始化
        async GetOrderClubProductSupporting() {
            try {
                const res = await this.OrderService.OrderClubProductSupporting(this.supportParm)
                this.setCreatDataInfo(res.data)
            } catch (error) {
                console.log('组合商品立即购买订单初始化异常')
            }
        },
        // 购物车去结算确认订单数据初始化
        async CartCreateOrderInfo() {
            try {
                const res = await this.OrderService.CartCreateOrderInfo(this.cartParam)
                this.setCreatDataInfo(res.data)
            } catch (error) {
                console.log('购物车结算订单初始化异常')
            }
        },
        // 公共初始化数据
        setCreatDataInfo(data) {
            this.isRequest = true
            this.goodsData = data.list
            if(uni.getStorageSync('goodsData')) {
                uni.removeStorageSync('goodsData')
            }
            uni.setStorageSync('goodsData', JSON.stringify(data.list))
            // console.log(JSON.parse(uni.getStorageSync('goodsData')))
            this.goodsCloneData = data.list
            this.couponList = data.couponList
            this.handleColdChain = this.freightColdChain = data.coldChain
            this.userMoney = data.userMoney
            this.totalCount = data.totalCount
            this.allPrice = data.totalPrice
            this.orderShouldPayFee = this.allPrice
        },
        // 获取订单SKUId列表
        getProductIds(list) {
            const skuId = []
            list.forEach(function(supplier) {
                supplier.cartList.forEach(function(product) {
                    skuId.push(product.skuId)
                })
            })
            // console.log(list);
            return skuId.join(',')
        },
        //获取地址信息
        async getAddressData(userId, type) {
            try {
                const userInfo = await this.$api.getStorage()
                const res = await this.UserService.QueryAddressList({
                    pageNum: 1,
                    pageSize: 1,
                    userId: userId
                })
                const data = res.data
                if (data.list.length > 0) {
                    this.isAddress = true
                    this.addressData = {}
                    this.confirmParam.addressId = data.list[0].addressId
                    this.productParam.townId = data.list[0].townId
                    this.cartParam.townId = data.list[0].townId
                    this.supportParm.townId = data.list[0].townId
                    this.addressData = data.list[0]
                }
                // 根据类型调方法
                if (type === 1) {
                    //立即都买提交
                    this.GetProductCreateOrderInfo()
                }
                if (type === 2) {
                    //购物车提交
                    this.CartCreateOrderInfo()
                }
                if (type === 3) {
                    //组合商品提交
                    this.GetOrderClubProductSupporting()
                }
            } catch (error) {
                console.log('error', error)
            }
        },
        //对应供应商的留言信息
        handChangeInputGoodsList(data) {
            this.goodsCloneData = data
            this.orderShouldPayFee = 0
            data.forEach(i => {
                this.orderShouldPayFee += i.totalPrice
            })
            this.confirmParam.payInfo.orderShouldPayFee = this.orderShouldPayFee
        },
        //获取发票信息
        handleChoiceaInvoiceData(data) {
            this.confirmParam.orderInvoice = data
        },
        // 提交订单按钮点击事件
        orderSubmitMit() {
            this.handleClickOrderSubmitMit()
        },
        // 提交订单
        handleClickOrderSubmitMit() {
            if (this.isSubLoading) {
                return
            }
            if (this.confirmParam.addressId === 0) {
                this.$util.msg('请先添加收货地址～', 2000)
                return
            }
            this.confirmParam.orderInfo = this.goodsCloneData.map(el => {
                let productInfo = []
                el.cartList.forEach(pros => {
                    productInfo.push({
                        skuId: pros.skuId,
                        productNum: pros.number,
                        presentNum: 0,
                        productType: pros.giftType
                    })
                })
                return {
                    splitCode: el.splitCode,
                    shopId: el.shopId,
                    note: el.note ? el.note : '',
                    // postage: el.isColdChina ? (el.postage + el.coldChain).toFixed(2) : el.postage.toFixed(2),
                    postage: el.postage.toFixed(2),
                    postageFlag: el.postageFlag,
                    isColdChina: el.isColdChina ? 1 : 0,
                    productInfo: productInfo
                }
            })
            this.confirmParam.payInfo.orderShouldPayFee = this.orderShouldPayFee.toFixed(2)
            this.confirmParam.payInfo = JSON.stringify(this.confirmParam.payInfo)
            this.confirmParam.orderInfo = JSON.stringify(this.confirmParam.orderInfo)
            this.confirmParam.orderInvoice = JSON.stringify(this.confirmParam.orderInvoice)
            console.log(this.confirmParam)
            this.isSubLoading = true
            this.hanldeOrderSubmit(this.confirmParam)
        },
        async hanldeOrderSubmit(params) {
            // 提交订单
            try {
                const res = await this.OrderService.CreatedOrderSubmit(params)
                const data = res.data
                if (data.code === 1) {
                    this.submitState = 'success'
                    setTimeout(() => {
                        this.isSubLoading = false
                    }, 2000)
                    this.$api.redirectTo(
                        `/pages/user/order/success?data=${JSON.stringify({ data: { orderId: data.orderId } })}`
                    )
                } else {
                    this.submitState = 'confirm'
                    this.$util.msg('订单提交成功', 2000, true, 'success')
                    setTimeout(() => {
                        this.isSubLoading = false
                        this.$api.redirectTo(`/pages/user/order/order-pay-list?orderId=${data.orderId}`)
                    }, 2000)
                }
            } catch (error) {
                console.log(error)
                this.formatConfirmParam()
                this.isSubLoading = false
            }
        },
        formatConfirmParam() {
            // 还原提交订单参数格式
            this.confirmParam.payInfo = JSON.parse(this.confirmParam.payInfo)
            this.confirmParam.orderInfo = JSON.parse(this.confirmParam.orderInfo)
            this.confirmParam.orderInvoice = JSON.parse(this.confirmParam.orderInvoice)
        },
        handleClick(e) {
            // 采购量过小提示弹窗
            if (e.index === 1) {
                if (this.showModalstauts === 1) {
                    this.showModal = false
                    this.confirmParam.orderMiniType = 1
                    this.handleClickOrderSubmitMit()
                } else if (this.showModalstauts === 2) {
                    this.showModal = false
                    this.isSubLoading = false
                    this.$api.navigateTo('/pages/login/apply')
                } else {
                    this.showModal = false
                    this.handleClickHeHeMiniApplet()
                }
            } else {
                if (this.showModalstauts == 1) {
                    this.showModal = false
                    this.handleClickHeHeMiniApplet()
                } else if (this.showModalstauts === 2) {
                    this.showModal = false
                    this.confirmParam.orderMiniType = 2
                    this.handleClickOrderSubmitMit()
                } else {
                    this.showModal = false
                }
            }
        },
        handleClickHeHeMiniApplet() {
            // 跳转颜选美学小程序
            uni.navigateToMiniProgram({
                appId: 'wx2c3b0a7f343235b1',
                path: '/pages/tabBar/index/index',
                extraData: {
                    data1: 'test'
                },
                envVersion: 'develop',
                success(res) {
                    // 打开成功
                    console.log(res)
                }
            })
        }
    },
    onShow() {
        let pages = getCurrentPages()
        let currPage = pages[pages.length - 1]
        if (currPage.data.select == 'select') {
            this.isAddress = true
            let SelectData = uni.getStorageSync('selectAddress')
            this.confirmParam.addressId = SelectData.addressId
            this.productParam.townId = SelectData.townId
            this.cartParam.townId = SelectData.townId
            this.supportParm.townId = SelectData.townId
            this.addressData = SelectData
            if (this.storeOptions.type == 1) {
                //立即都买提交
                this.GetProductCreateOrderInfo()
            }
            if (this.storeOptions.type == 2) {
                //购物车提交
                this.CartCreateOrderInfo()
            }
            if (this.storeOptions.type == 3) {
                //组合商品提交
                this.GetOrderClubProductSupporting()
            }
        }
    }
}
</script>

<style lang="scss">
page {
    height: auto;
    background: #f7f7f7;
}
.btn-hover {
    background: #ffffff;
}
.animation {
    /* transition: transform 0.3s ease;*/
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}
.order {
    padding-bottom: 134rpx;
}
.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;
                    color: $color-system;
                }
            }
        }
    }
    .balabce-b {
        width: 100%;
        float: left;
        overflow: hidden;
        .balabce-b-text {
            width: 100%;
            line-height: 58rpx;
            font-size: $font-size-24;
            color: #ff2a2a;
            text-align: right;
            float: right;
        }
        &.balabce-b--hide {
            padding: 0 0;
            height: 0px;
            line-height: 0px;
        }
    }
}
.footer-wrapper {
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #ffffff;
    z-index: 990;
    .footer {
        display: flex;
        align-items: center;
        width: 100%;
        height: 110rpx;
        line-height: 110rpx;
        justify-content: space-between;
        font-size: $font-size-28;
        color: $text-color;
    }
    .footer-le {
        width: 570rpx;
        height: 100%;
        float: left;
    }
    .footer-count {
        float: left;
        padding-left: 24rpx;
        box-sizing: border-box;
    }
    .footer-price {
        width: 370rpx;
        float: right;
        text-align: right;
        color: $text-color;
        padding: 10rpx 20rpx 10rpx 0;
        box-sizing: border-box;
        .sum-none {
            width: 100%;
            height: 45rpx;
            line-height: 45rpx;
            color: $text-color;
            float: left;
            text-align: right;
            .money {
                font-size: $font-size-26;
                color: #999999;
                text-decoration: line-through;
            }
            .money-sign {
                font-size: $font-size-26;
                color: #999999;
                text-decoration: line-through;
            }
            .money-reduced {
                margin-left: 10rpx;
                font-size: $font-size-26;
                color: #ff2a2a;
            }
        }
        .sum {
            width: 100%;
            height: 45rpx;
            line-height: 45rpx;
            float: left;
            &.none {
                height: 90rpx;
                line-height: 90rpx;
            }
            .price {
                font-size: $font-size-32;
                color: #ff2a2a;
            }
        }
    }
    .footer-submit {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 180rpx;
        height: 100%;
        box-sizing: border-box;
        padding: 15rpx 5rpx;
        .btn {
            width: 100%;
            height: 100%;
            color: #ffffff;
            background: $btn-confirm;
            font-size: $font-size-26;
            text-align: center;
            line-height: 80rpx;
            border-radius: 40rpx;
            &.disabled {
                background: #e4e8eb;
                color: #999999;
            }
        }
    }
}
.coupon-content-model {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 8888;
    transition: all 0.4s;
    .coupon-alert-content {
        width: 600rpx;
        height: 612rpx;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        box-sizing: border-box;
        padding-top: 92rpx;
        .coupon {
            width: 600rpx;
            height: 522rpx;
            background: url(https://static.caimei365.com/app/img/icon/icon-coupon-alertbg@2x.png);
            background-size: cover;
            box-sizing: border-box;
            padding: 230rpx 40rpx 0 40rpx;
            .coupon-list {
                width: 100%;
                height: 147rpx;
                margin-bottom: 32rpx;
                box-sizing: border-box;
                background: url(https://static.caimei365.com/app/img/icon/icon-coupon-bg@2x.png);
                background-size: cover;
                position: relative;
                .list-cell-tags {
                    display: inline-block;
                    padding: 0 10rpx;
                    height: 32rpx;
                    line-height: 32rpx;
                    background-color: #f94b4b;
                    color: #ffffff;
                    font-size: 18rpx;
                    border-radius: 16rpx 0 16rpx 0;
                    text-align: center;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
                .list-cell-le {
                    width: 154rpx;
                    height: 100%;
                    box-sizing: border-box;
                    padding: 30rpx 0;
                    float: left;
                    .coupon-maxMoney {
                        width: 100%;
                        height: 54rpx;
                        line-height: 54rpx;
                        font-size: 42rpx;
                        color: #f94b4b;
                        text-align: center;
                        margin-top: 10rpx;
                        .small {
                            font-size: $font-size-20;
                        }
                    }
                    .coupon-minMoney {
                        width: 100%;
                        height: 28rpx;
                        float: left;
                        box-sizing: border-box;
                        padding-left: 24rpx;
                        .txt {
                            display: block;
                            height: 28rpx;
                            line-height: 28rpx;
                            font-size: 16rpx;
                            color: #f94b4b;
                            text-align: center;
                            padding: 0 5rpx;
                            background-color: #fff1eb;
                            border-radius: 4rpx;
                            float: left;
                        }
                    }
                }
                .list-cell-ri {
                    width: 366rpx;
                    height: 100%;
                    box-sizing: border-box;
                    padding: 30rpx 20rpx;
                    float: left;
                    .list-cell-top {
                        width: 100%;
                        height: 64rpx;
                        line-height: 64rpx;
                        font-size: $font-size-26;
                        color: #333333;
                        float: left;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        word-break: break-all;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 1;
                        overflow: hidden;
                    }
                    .list-cell-time {
                        width: 100%;
                        height: 28rpx;
                        line-height: 28rpx;
                        text-align: left;
                        font-size: $font-size-20;
                        color: #999999;
                    }
                }
            }
            .coupon-btn {
                width: 100%;
                height: 78rpx;
                background: url(https://static.caimei365.com/app/img/icon/icon-coupon-alertbtnbg@2x.png);
                background-size: cover;
                line-height: 78rpx;
                text-align: center;
                color: #ffffff;
                font-size: $font-size-36;
            }
        }
    }
}
</style>