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

<template>
    <view class="container order clearfix" :style="{ paddingBottom: isIphoneX ? '170rpx' : '134rpx' }">
        <!-- 地址选择 v-if="isAddress" -->
        <choice-address ref="choiceAddress" :addressData="addressData"></choice-address>
        <!-- 商品 -->
        <goodsList
            ref="goods"
            v-if="isRequest"
            :goodsData="goodsData"
            @handleGoodList="handChangeInputGoodsList"
        ></goodsList>
        <!-- 选择优惠券 TODO-->
        <view class="select-coupon" @click="couponVisible = true" v-if="receiveCouponList.length > 0">
            <view class="left-title">优惠券</view>
            <view class="right-content">
                <view class="coupon-amount">-￥{{ couponAmount | NumFormat }}</view>
                <view class="iconfont icon-chakangengduo"></view>
            </view>
        </view>
        <!-- 优惠券列表 TODO-->
        <cm-coupon-list
            title="优惠券"
            listType="use"
            :visible="couponVisible"
            @close="closeCouponList"
            :chooseAble="true"
            :showStatus="false"
            :couponList="receiveCouponList"
            @chooseCoupon="chooseCoupon"
            :currentId="currentCouponId"
        ></cm-coupon-list>
        <!-- 运费 -->
        <seller-freight ref="freight" v-if="isRequest" :freightDatas="freightData"> </seller-freight>
        <!-- 底部 -->
        <view class="footer" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }">
            <view class="footer-le">
                <view class="footer-count">
                    <text>共{{ allCount }}件商品</text>
                </view>
                <view class="footer-price">
                    <view class="sum" :class="totalFullReduction == 0 ? 'none' : ''">
                        <view class="price">总价:￥{{ payAllPrice | NumFormat }}</view>
                        <view class="discount">共减 ￥{{ discountedPrice | NumFormat }}</view>
                    </view>
                </view>
            </view>
            <view class="footer-submit" @click.stop="orderSubmitMit">
                <view class="btn" :class="isSubLoading ? 'disabled' : ''">提交订单</view>
            </view>
        </view>
    </view>
</template>

<script>
import authorize from '@/common/authorize.js'
import choiceAddress from '@/components/cm-module/createOrder/address'
import goodsList from '@/components/cm-module/createOrder/goodsList'
import sellerFreight from '@/components/cm-module/createOrder/sellerFreight'
import CmCouponList from '@/components/cm-module/cm-coupon-list/cm-coupon-list'
import { mapGetters } from 'vuex'
export default {
    components: {
        choiceAddress,
        goodsList,
        sellerFreight,
        CmCouponList
    },
    data() {
        return {
            couponVisible: false,
            isSubLoading: false,
            productIds: '', //获取上一级页面商品信息
            productCount: '', //获取上一级页面商品数量
            allCount: 1, //订单提交总数量
            totalOriginalPrice: 0, //订单总原价(划线部分)
            totalFullReduction: 0, //满减金额
            allPrice: 0.0, //订单总金额
            townId: '', //区ID
            isRequest: false, //是否加载完成渲染子组件
            isFreight: false, //是否加载完成渲染子组件
            isAddress: false, //是否加载完成地址
            ischecked: false, //是否勾选余额
            addressData: {}, //初始化地址信息
            goodsData: [], //初始化商品信息
            freightData: {}, //邮费数据
            isIphoneX: this.$store.getters.isIphoneX,
            productsList: [],
            params: {
                userId: 0
            },
            subParams: {
                userId: 0,
                orderInfo: [], //提交的商品信息
                addressId: 0,
                cartType: 0,
                payInfo: {
                    orderShouldPayFee: 0
                }
            },
            orderInfo: '',
            receiveCouponList: [],
            currentCouponId: -1,
            currentCoupon: null
        }
    },
    onLoad(option) {
        //商品数据
        let data = JSON.parse(option.data)
        this.allCount = data.data.allCount
        if (option.type == 'prodcut') {
            this.subParams.cartType = 2
            this.params.productCount = data.data.productCount
            this.params.productId = data.data.productId
            this.params.heUserId = data.data.heUserId ? data.data.heUserId : 0
            this.productIds = data.data.productId.toString()
        } else {
            this.subParams.cartType = 1
            this.params.cartIds = data.data.cartIds
            this.productIds = data.data.productIds
        }
        this.params.userId = this.userId
        this.subParams.userId = this.userId
        this.getInitCrearOrder(this.params)
    },
    computed: {
        ...mapGetters(['userId']),
        // 选中的优惠券的金额
        couponAmount() {
            return this.currentCoupon ? this.currentCoupon.couponAmount : 0
        },
        // 优惠价格
        discountedPrice() {
            return this.couponAmount
        },
        // 支付金额
        payAllPrice() {
            return this.allPrice - this.couponAmount
        }
    },
    filters: {
        NumFormat(value) {
            //处理金额
            return Number(value).toFixed(2)
        }
    },
    methods: {
        closeCouponList() {
            this.couponVisible = false
        },
        // 获取可用优惠券
        fetchCouponList() {
            this.CouponService.GetCouponByProductIds({ userId: this.userId, productIds: this.productIds }).then(res => {
                this.receiveCouponList = res.data.receiveCouponList
                this.filterCouponList()
            })
        },
        // 对优惠券进行分类排序
        filterCouponList() {
            const productList = []
            this.goodsData.forEach(shop => productList.push(...shop.productList.map(prod => prod)))
            let canUseCouponList = []
            let notUseCouponList = []
            this.list = this.receiveCouponList.forEach(coupon => {
                if (
                    coupon.noThresholdFlag === 1 ||
                    (coupon.productType === 1 && this.allProdoceUseCheck(productList, coupon)) ||
                    (coupon.productType === 2 && this.someProductUseCheck(productList, coupon))
                ) {
                    coupon.canSelect = true
                    canUseCouponList.push(coupon)
                } else {
                    coupon.canSelect = false
                    notUseCouponList.push(coupon)
                }
            })
            // 金额高的拍前面
            canUseCouponList = canUseCouponList.sort((a, b) => b.couponAmount - a.couponAmount)
            notUseCouponList = notUseCouponList.sort((a, b) => b.couponAmount - a.couponAmount)
            this.receiveCouponList = [...canUseCouponList, ...notUseCouponList]
            // 当有可用优惠券时 默认选取第一个最优惠的
            if (this.receiveCouponList.length > 0) {
                this.currentCouponId = this.receiveCouponList[0].couponId
                this.currentCoupon = this.receiveCouponList[0]
            }
        },
        // 判断全部商品可用 是否可勾选使用
        allProdoceUseCheck(productList, coupon) {
            return productList.some(prod => prod.price * prod.productCount >= coupon.couponAmount)
        },
        // 判断指定商品可用 是否可勾选使用
        someProductUseCheck(productList, coupon) {
            return productList.some(
                prod =>
                    coupon.productIds.indexOf(prod.productId.toString()) > -1 &&
                    prod.price * prod.productCount >= coupon.couponAmount
            )
        },
        // 选中优惠券
        chooseCoupon(coupon) {
            if (coupon.couponId > -1) {
                this.currentCoupon = coupon
                this.currentCouponId = coupon.couponId
            } else {
                this.currentCoupon = null
                this.currentCouponId = -1
            }
            this.couponVisible = false
            console.log(coupon)
        },
        //确认订单初始化信息
        getInitCrearOrder(params) {
            this.OrderService.QueryOrderConfirm(params)
                .then(response => {
                    let data = response.data
                    this.isRequest = true
                    this.goodsData = data.shopList
                    this.allPrice = data.totalPrice
                    
                    this.fetchCouponList()
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        //获取地址信息
        getAddressData() {
            this.UserService.QueryAddressList({ pageNum: 1, pageSize: 1, userId: this.userId }).then(response => {
                this.isAddress = true
                this.addressData = {}
                if (response.data.list != '') {
                    this.subParams.addressId = response.data.list[0].addressId
                    this.townId = response.data.list[0].townId
                    this.addressData = response.data.list[0]
                } else {
                    this.addressData = this.addressData
                }
            })
        },
        handChangeInputGoodsList(data) {
            //对应供应商的留言信息
            this.goodsData = data
        },
        orderSubmitMit() {
            //提交订单
            if (this.isSubLoading) return
            if (this.subParams.addressId == '') return this.$util.msg('请先添加收货地址～', 2000)
            // 选中的优惠券id
            this.subParams.couponId = this.currentCouponId === -1 ? '' : this.currentCouponId
            this.subParams.payInfo.orderShouldPayFee = this.payAllPrice
            // 处理商品信息及留言
            this.subParams.orderInfo = this.goodsData.map(el => {
                let productInfo = []
                el.productList.forEach(pros => {
                    productInfo.push({
                        productId: pros.productId,
                        productNum: pros.productCount,
                        heUserId: pros.heUserId
                    })
                })
                return { shopId: el.shopId, note: el.note ? el.note : '', productInfo: productInfo }
            })
            debugger
            this.isSubLoading = true
            this.OrderService.CreatedOrderSubmit(this.subParams)
                .then(response => {
                    const data = response.data
                    this.orderInfo = response.data
                    setTimeout(() => {
                        this.isSubLoading = false
                    }, 2000)
                    this.MiniWxPayFor(data)
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        MiniWxPayFor(data) {
            this.PayService.PayOrderOnLineSwitch().then(response => {
                if (response.data === 1) {
                    this.WeChatMiniWxPay(data)
                } else {
                    this.$api.navigateTo(`/pages/user/order/order-payment?money=${data.payableAmount}`)
                }
            })
        },
        async WeChatMiniWxPay(data) {
            const wechatCode = await authorize.getCode('weixin')
            this.PayService.WeChatMiniWxPay({
                payAmount: data.payableAmount * 100,
                payWay: 'WEIXIN',
                code: wechatCode,
                orderId: data.orderId
            })
                .then(response => {
                    let PayInfo = JSON.parse(response.data.data.payInfo)
                    this.WxRequestPayment(PayInfo)
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        WxRequestPayment(data) {
            let self = this
            wx.requestPayment({
                timeStamp: data.timeStamp,
                nonceStr: data.nonceStr,
                package: data.package,
                signType: data.signType,
                paySign: data.paySign,
                success: function(res) {
                    wx.reLaunch({ url: '/pages/tabBar/index/index' })
                },
                fail: function(res) {
                    self.$api.redirectTo(`/pages/user/order/success?data=${JSON.stringify({ data: self.orderInfo })}`)
                },
                complete: function(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.subParams.addressId = SelectData.addressId
            this.addressData = SelectData
        } else {
            this.getAddressData()
        }
    }
}
</script>

<style lang="scss" scoped>
page {
    height: auto;
    background: #f7f7f7;
}
.container {
    height: initial;
}
.btn-hover {
    background: #ffffff;
}
.animation {
    /* transition: transform 0.3s ease;*/
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}
.invoice-freight {
    width: 702rpx;
    padding: 0 24rpx;
    height: 86rpx;
    line-height: 86rpx;
    font-size: $font-size-28;
    color: $text-color;
    background: #ffffff;
    float: left;
    font-weight: bold;
    .freight-left {
        float: left;
        .icon-yunfeishuoming {
            height: 100%;
            padding: 0 15rpx;
            color: $color-system;
            font-weight: normal;
        }
    }
    .freight-right {
        float: right;
        color: #2a81ff;
    }
}

.select-coupon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24rpx;
    margin: 24rpx 0;
    height: 90rpx;
    background: #fff;
    .left-title {
        font-weight: bold;
        color: #333333;
        font-size: 28rpx;
    }
    .right-content {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .coupon-amount {
            font-size: 28rpx;
            color: #ff457b;
            margin-right: 12rpx;
        }
        .iconfont {
            font-size: 28rpx;
            color: #b2b2b2;
        }
    }
}

.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;
                    padding: 5rpx;
                }
            }
        }
    }
    .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 {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 995;
    display: flex;
    align-items: center;
    width: 100%;
    height: 110rpx;
    justify-content: space-between;
    font-size: $font-size-28;
    background-color: #ffffff;
    z-index: 998;
    color: $text-color;
    border-top: 1px solid #f7f7f7;
    .footer-le {
        width: 570rpx;
        height: 100%;
        float: left;
    }
    .footer-count {
        float: left;
        padding-left: 24rpx;
        line-height: 110rpx;
        width: 170rpx;
        box-sizing: border-box;
        font-size: $font-size-26;
    }
    .footer-price {
        float: right;
        text-align: right;
        color: $text-color;
        padding-right: 20rpx;
        box-sizing: border-box;
        width: 370rpx;
        padding-left: 24rpx;
        .sum {
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
            height: 110rpx;
            .price {
                font-size: $font-size-32;
                color: $color-system;
            }
            .discount {
                // margin-top: 32rpx;
                font-size: $font-size-24;
                color: #ff457b;
            }
        }
    }
    .footer-submit {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 210rpx;
        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;
            }
        }
    }
}
.Rebate {
    width: 702rpx;
    height: auto;
    padding: 0 24rpx;
    background: #ffffff;
    float: left;
    margin-bottom: 24rpx;
    margin-bottom: 24rpx;
    line-height: 86rpx;
    .rebate-title {
        float: left;
        font-weight: bold;
        color: #333333;
        font-size: $font-size-28;
    }
    .iconfont {
        float: right;
        color: #b2b2b2;
        font-size: 40rpx;
        &.icon-yixuanze {
            color: $color-system;
        }
    }
}
</style>