// +---------------------------------------------------------------------- // | likeshop开源商城系统
// +---------------------------------------------------------------------- // |
欢迎阅读学习系统程序代码，建议反馈是我们前进的动力 // | gitee下载：https://gitee.com/likeshop_gitee
// | github下载：https://github.com/likeshop-github // | 访问官网：https://www.likeshop.cn // |
访问社区：https://home.likeshop.cn // | 访问手册：http://doc.likeshop.cn // |
微信公众号：likeshop技术社区 // |
likeshop系列产品在gitee、github等公开渠道开源版本可免费商用，未经许可不能去除前后端官方版权标识 // |
likeshop系列产品收费版本务必购买商业授权，购买去版权授权后，方可去除前后端官方版权标识 // |
禁止对系统程序代码以任何目的，任何形式的再发布 // | likeshop团队版权所有并拥有最终解释权 //
+---------------------------------------------------------------------- // | author:
likeshop.cn.team // +----------------------------------------------------------------------

<template>
    <view>
        <view class="confirm-order">
            <view class="confirm-con">
                <!-- 收货方式 -->
                <view class="contain">
                    <u-tabs
                        :list="addressTabsList"
                        :is-scroll="addressTabsList.length === 1"
                        :current="addressTabsIndex"
                        :active-color="primaryColor"
                        bar-width="100"
                        :bar-style="{ top: '100%' }"
                        @change="changeDelivery"
                    />
                    <!-- 快递配送 -->
                    <view
                        v-show="addressTabsList[addressTabsIndex]['sign'] === 'express'"
                        class="receiving-card"
                        @click="onAddressExpress"
                    >
                        <u-image
                            class="icon-md mr20"
                            width="44"
                            height="44"
                            src="/static/images/icon_address.png"
                            mode="scaleToFill"
                        />
                        <view class="receiving-content">
                            <template v-if="address.id">
                                <view class="md black bold">
                                    <text>{{ address.contact }}</text>
                                    <text class="ml10">{{ address.telephone }}</text>
                                </view>
                                <view class="xs black mt10">{{
                                    address.province +
                                    address.city +
                                    address.district +
                                    address.address
                                }}</view>
                            </template>
                            <template v-else>
                                <view>请选择收货地址</view>
                            </template>
                        </view>
                        <u-icon name="arrow-right" />
                    </view>
                    <!-- 门店自提 -->
                    <view
                        v-show="addressTabsList[addressTabsIndex]['sign'] === 'store'"
                        class="receiving-card"
                        @click="onAddressStore"
                    >
                        <u-image
                            class="icon-md mr20"
                            width="44"
                            height="44"
                            src="/static/images/icon_address.png"
                            mode="scaleToFill"
                        />
                        <view class="receiving-content">
                            <template v-if="storeInfo.id">
                                <text class="md black bold">{{ storeInfo.name }}</text>
                                <text class="xs black mt10">{{ storeInfo.shop_address }}</text>
                                <text class="xs muted mt10">
                                    <text>营业时间：</text>
                                    <text
                                        >{{ storeInfo.business_start_time }} -
                                        {{ storeInfo.business_end_time }}</text
                                    >
                                </text>
                            </template>
                            <template v-else>
                                <view>请选择门店地址</view>
                            </template>
                        </view>
                        <u-icon name="arrow-right" />
                    </view>
                </view>

                <!-- 门店自提表单 -->
                <view
                    v-show="addressTabsList[addressTabsIndex]['sign'] === 'store'"
                    class="contain store-from"
                >
                    <view class="store-from-item">
                        <text>提货人</text>
                        <u-input
                            v-model="userConsignee"
                            class="flex1"
                            type="text"
                            input-align="right"
                            :clearable="false"
                            placeholder="请输入提货人"
                        />
                    </view>
                    <view class="store-from-item">
                        <text>联系方式</text>
                        <u-input
                            v-model="userMobile"
                            class="flex1"
                            type="text"
                            input-align="right"
                            :clearable="false"
                            placeholder="请输入联系方式"
                        />
                    </view>
                </view>

                <view class="goods contain">
                    <order-goods
                        :team="{ need: orderInfo.team_need }"
                        :list="goodsLists"
                        :delivery="delivery"
                        :order_type="orderInfo.order_type"
                        mode="comfirm"
                    ></order-goods>
                    <!-- <view class="item row-between">
						<view>配送方式</view>
						<view>快递</view>
					</view> -->
                    <view class="item row-between">
                        <view>买家留言</view>
                        <u-input
                            v-model="userRemark"
                            class="flex1 ml20"
                            :clearable="false"
                            placeholder="请添加备注（150字以内）"
                        ></u-input>
                    </view>
                </view>
                <view class="contain benefit" v-if="orderInfo.order_type == 0">
                    <view class="item row-between" @tap="showCoupon = true">
                        <view>优惠券</view>
                        <view class="row">
                            <text class="primary" v-if="orderInfo.discount_amount"
                                >-￥{{ orderInfo.discount_amount }}</text
                            >
                            <text v-else-if="usableCoupon.length" class="primary">{{
                                usableCoupon.length + '张可用'
                            }}</text>
                            <text v-else class="muted">无优惠券可用</text>
                            <image
                                class="icon-sm ml20"
                                src="/static/images/arrow_right.png"
                            ></image>
                        </view>
                    </view>
                    <view class="item row" @tap="changeIntegral" v-if="orderInfo.integral_switch">
                        <view>积分抵扣</view>
                        <view class="ml20 muted xs row" style="flex: 1">
                            共{{ orderInfo.user_integral }}积分{{
                                orderInfo.user_integral < orderInfo.integral_limit
                                    ? '，满' + orderInfo.integral_limit + '可用'
                                    : ''
                            }}
                            <view style="margin-top: 10rpx" @tap.stop="dialogIntegralDesc">
                                <u-icon
                                    class="ml10"
                                    color="#999"
                                    size="30"
                                    name="question-circle"
                                ></u-icon>
                            </view>
                        </view>
                        <checkbox
                            :disabled="
                                orderInfo.user_integral < orderInfo.integral_limit ||
                                orderInfo.integral_config == 0
                            "
                            :checked="Boolean(useIntegral)"
                        >
                        </checkbox>
                    </view>
                </view>

                <view class="price contain">
                    <view class="item row-between">
                        <view>商品金额</view>
                        <view>¥{{ orderInfo.total_goods_price }}</view>
                    </view>
                    <view class="item row-between">
                        <view>运费</view>
                        <view>¥{{ orderInfo.shipping_price }}</view>
                    </view>
                    <view class="item row-between" v-if="orderInfo.discount_amount">
                        <view>优惠券</view>
                        <view class="primary">-¥{{ orderInfo.discount_amount }}</view>
                    </view>
                    <view class="item row-between" v-if="orderInfo.integral_amount">
                        <view>积分抵扣</view>
                        <view class="primary">-¥{{ orderInfo.integral_amount }}</view>
                    </view>
                </view>
            </view>
            <view class="footer bg-white row-between fixed">
                <view class="all-price lg row">
                    <text>合计：</text>
                    <view class="primary">
                        <price-format
                            :first-size="36"
                            :second-size="36"
                            :price="orderInfo.order_amount"
                        ></price-format>
                    </view>
                </view>
                <button class="btn br60 white" size="md" hover-class="none" @tap="onSubmitOrder">
                    提交订单
                </button>
            </view>
        </view>
        <loading-view v-if="showLoading" background-color="transparent" :size="50"></loading-view>
        <loading-view v-if="isFirstLoading"></loading-view>
        <u-popup v-model="showCoupon" border-radius="14" mode="bottom" closeable>
            <view class="pop-title row-between">
                <view class="title">优惠券</view>
            </view>
            <view v-if="showCoupon">
                <tabs :active="couponTabsIndex" :config="{ underLineWidth: 100 }">
                    <tab :title="'可使用优惠券 (' + usableCoupon.length + ')'">
                        <coupon-obj
                            :list="usableCoupon"
                            :type="0"
                            @change="onSelectCoupon"
                            :coupon-id="couponId"
                        ></coupon-obj>
                    </tab>
                    <tab :title="'不可用优惠券 (' + unusableCoupon.length + ')'">
                        <coupon-obj
                            :list="unusableCoupon"
                            :type="1"
                            @change="onSelectCoupon"
                        ></coupon-obj>
                    </tab>
                </tabs>
            </view>
        </u-popup>
    </view>
</template>

<script>
import { orderBuy, getOrderCoupon, getDelivery } from '@/api/order'
import { teamBuy } from '@/api/activity'
import { prepay, getMnpNotice, getPayway } from '@/api/app'
import { wxpay, alipay } from '@/utils/pay'

export default {
    data() {
        return {
            isFirstLoading: true, // 首次页面加载loading
            showLoading: false, // Loading: 显示 | 隐藏
            address: {}, // 收货地址信息
            orderInfo: {}, // 订单信息
            goodsLists: [], // 商品列表
            addressId: '', // 收货地址ID
            useIntegral: 0, // 使用积分
            userRemark: '', // 用户留言
            userConsignee: '', // 取货人
            userMobile: '', // 联系电话

            storeInfo: {}, // 门店信息

            couponId: '', // 优惠券ID
            showCoupon: false, // 显示优惠券Popup
            couponTabsIndex: 0, // 优惠券Tabs索引
            usableCoupon: [], // 优惠券--可使用
            unusableCoupon: [], // 优惠券--不可用

            bargainLaunchId: -1,

            addressTabsIndex: 0, // 地址Tabs索引
            // 地址Tabs列表
            addressTabsList: [
                {
                    id: 1,
                    sign: 'express',
                    name: '快递配送'
                },
                {
                    id: 2,
                    sign: 'store',
                    name: '门店自提'
                }
            ]
        }
    },

    computed: {
        delivery() {
            return this.addressTabsList[this.addressTabsIndex]['id']
        }
    },

    onLoad(options) {
        const data = JSON.parse(decodeURIComponent(options.data))

        this.goods = data.goods
        this.type = data.type
        this.teamId = data.teamId
        this.bargainLaunchId = options.bargain_launch_id
        this.foundId = data.foundId || 0

        // 配送方式
        getDelivery()
            // 请求结果判断
            .then(({ code, data, msg }) => {
                if (code != 1) throw new Error(msg)
                return data
            })
            // 配送方式Tabs处理
            .then((data) => {
                // 快递
                if (!data.is_express) {
                    this.addressTabsList = this.addressTabsList.filter(
                        (item) => item.sign !== 'express'
                    )
                }
                // 自提
                if (!data.is_selffetch) {
                    this.addressTabsList = this.addressTabsList.filter(
                        (item) => item.sign !== 'store'
                    )
                }
            })
            // 页面数据初始化
            .then(() => {
                this.handleOrderMethods('info')
                this.initCouponData()
            })
            // 监听全局事件
            .then(() => {
                uni.$on('selectaddress', (params) => {
                    this.addressId = params.id
                    this.handleOrderMethods('info')
                })

                uni.$on('payment', (params) => {
                    setTimeout(() => {
                        uni.$off('payment')

                        if (params.result) {
                            uni.redirectTo({
                                url: `/pages/pay_result/pay_result?id=${params.order_id}`
                            })
                        } else {
                            uni.redirectTo({
                                url: '/pages/user_order/user_order'
                            })
                        }
                    }, 500)
                })

                uni.$on('store', (params) => {
                    this.storeInfo = params
                })
            })
            .catch((err) => {
                console.log(err)
            })
    },

    onUnload() {
        // 取消全局监听
        uni.$off(['selectaddress', 'store'])
    },

    methods: {
        // 更改配送方式
        changeDelivery(index) {
            this.addressTabsIndex = index
            this.handleOrderMethods('info')
        },

        // 点击选择收货地址
        onAddressExpress() {
            uni.navigateTo({
                url: `/pages/user_address/user_address?type=${1}`
            })
        },

        // 点击门店自提
        onAddressStore() {
            uni.navigateTo({
                url: `/bundle/pages/store_list/store_list`
            })
        },

        // 更改积分使用
        changeIntegral() {
            const useIntegral = this.useIntegral

            const orderInfo = this.orderInfo
            const integral_limit = orderInfo.integral_limit
            const user_integral = orderInfo.user_integral

            if (integral_limit > user_integral) return this.$toast({ title: '未满足使用条件' })

            this.useIntegral = useIntegral ? 0 : 1
            this.$nextTick(() => this.handleOrderMethods('info'))
        },

        // 积分使用说明Dialog
        dialogIntegralDesc() {
            const desc = this.orderInfo.integral_desc

            uni.showModal({
                title: '积分使用说明',
                content: desc,
                confirmColor: '#FF2C3C',
                showCancel: false
            })
        },

        // 选择优惠券
        onSelectCoupon(value) {
            this.couponId = value
            this.showCoupon = false
            this.handleOrderMethods('info')
        },

        // 获取微信授权
        authWechatMessage() {
            return new Promise((resolve, reject) => {
                getMnpNotice({
                    scene: 1
                })
                    .then(({ code, data, msg }) => {
                        if (code != 1) throw new Error(msg)
                        return data
                    })
                    .then((data) => {
                        if (!data.length) return reject()
                        uni.requestSubscribeMessage({
                            tmplIds: data,
                            success(res) {
                                resolve(res)
                            },
                            fail(err) {
                                reject(err)
                            }
                        })
                    })
                    .catch((err) => {
                        reject(err)
                    })
            })
        },

        // 点击订单提交
        onSubmitOrder() {
            uni.showModal({
                title: '温馨提示',
                content: '是否确认下单?',
                confirmColor: '#FF2C3C',
                success: ({ confirm }) => {
                    if (!confirm) return

                    // #ifdef MP-WEIXIN
                    this.authWechatMessage()
                        .catch((err) => {
                            console.log(err)
                        })
                        .finally(() => {
                            this.handleOrderMethods('submit')
                        })
                    // #endif

                    // #ifndef MP-WEIXIN
                    this.handleOrderMethods('submit')
                    // #endif
                }
            })
        },

        // 初始化优惠券数据
        initCouponData() {
            getOrderCoupon({
                goods: this.goods
            })
                .then(({ code, data, msg }) => {
                    if (code != 1) throw new Error(msg)
                    return data
                })
                .then((data) => {
                    this.usableCoupon = data.usable
                    this.unusableCoupon = data.unusable
                })
                .catch((err) => {
                    console.log(err)
                })
        },

        // 初始化页面数据
        async initPageData(from) {
            this.showLoading = true

            try {
                const { code, data, msg } = this.teamId ? await teamBuy(from) : await orderBuy(from)

                if (code == 1) {
                    this.address = data.address
                    this.goodsLists = data.goods_lists
                    //TODO
                    if (data.selffetch_info) {
                        console.log(456)
                        this.storeInfo = data.selffetch_info.selffetch_shop
                            ? data.selffetch_info.selffetch_shop
                            : {}
                        this.userConsignee = data.selffetch_info.contact
                        this.userMobile = data.selffetch_info.mobile
                    }

                    this.orderInfo = data
                    this.$nextTick(() => {
                        this.isFirstLoading = false
                    })
                } else {
                    throw new Error(msg)
                }
            } catch (err) {
                console.log(err)
                this.$toast({ title: '网络异常，请重新进入页面' })
            } finally {
                this.showLoading = false
            }
        },

        // 订单提交
        async handleOrderSubmit(from) {
            this.showLoading = true

            from.remark = this.userRemark
            from.type = this.type

            try {
                const { code, data, msg } = this.teamId ? await teamBuy(from) : await orderBuy(from)

                if (code == 1) {
                    uni.redirectTo({
                        url: `/pages/payment/payment?from=${data.type}&order_id=${data.order_id}`
                    })
                } else {
                    throw new Error(msg)
                }
            } catch (err) {
                console.log(err)
                // this.$toast({ title: '下单异常，请重新操作' })
            } finally {
                this.showLoading = false
            }
        },

        // 订单处理
        handleOrderMethods(action) {
            // 订单提交数据
            const orderFrom = {
                action,
                goods: this.goods,
                delivery_type: this.delivery,
                use_integral: this.useIntegral,
                address_id: this.addressId,
                coupon_id: this.couponId,
                bargain_launch_id: this.bargainLaunchId == -1 ? '' : this.bargainLaunchId
            }

            // 门店自提
            if (this.addressTabsList[this.addressTabsIndex]['sign'] === 'store') {
                orderFrom.selffetch_shop_id = this.storeInfo.id
                orderFrom.consignee = this.userConsignee
                orderFrom.mobile = this.userMobile
            }

            // 拼团
            if (this.teamId) {
                const goods = this.goods[0]

                delete orderFrom.goods

                orderFrom.item_id = goods.item_id
                orderFrom.goods_num = goods.num
                orderFrom.team_id = this.teamId
                orderFrom.found_id = this.foundId
            }

            switch (action) {
                case 'info':
                    this.initPageData(orderFrom)
                    break
                case 'submit':
                    this.handleOrderSubmit(orderFrom)
                    break
            }
        }
    }
}
</script>
<style>
.confirm-order .confirm-con {
    overflow: hidden;
    padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
}

.confirm-order .contain {
    border-radius: 14rpx;
    margin: 20rpx 20rpx 0;
    background-color: #fff;
    overflow: hidden;
}

.confirm-order .img-line {
    height: 1.5px;
    width: 100%;
    display: block;
}

.confirm-order .coupons {
    height: 100rpx;
    padding: 0 24rpx;
}

.goods .title {
    padding: 22rpx 24rpx;
    border-bottom: 1px solid #f6f6f6;
}

.goods .all-num {
    padding: 22rpx 24rpx;
    border-bottom: 1px dotted #f6f6f6;
}

.confirm-order .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100rpx;
    padding: 0 30rpx;
    box-sizing: content-box;
    padding-bottom: env(safe-area-inset-bottom);
}

.confirm-order .price {
    padding: 28rpx 20rpx;
}

.confirm-order .price .item:not(:last-of-type) {
    margin-bottom: 20rpx;
}

.confirm-order .goods > .item,
.confirm-order .benefit > .item {
    padding: 0 24rpx;
    height: 80rpx;
}

.confirm-order .btn {
    background: linear-gradient(90deg, rgba(249, 95, 47, 1) 0%, rgba(255, 44, 60, 1) 100%);
    padding: 0 50rpx;
}

.confirm-order .van-cell:after {
    border: none;
}

.goods .shop-icon {
    width: 40rpx;
    height: 40rpx;
}

.pop-title {
    height: 100rpx;
    border-bottom: 1rpx solid #f2f2f2;
}

.pop-title .title {
    margin-left: 30rpx;
    font-size: 34rpx;
    font-weight: bold;
    line-height: 36rpx;
}

.receiving-way {
    margin: 20rpx 20rpx 0 20rpx;
    border-radius: 7px;
    background-color: #ffffff;
    overflow: hidden;
}

.receiving-card {
    display: flex;
    align-items: center;
    min-height: 160rpx;
    padding: 20rpx;
    border-top: 1px solid #f2f2f2;
}

.receiving-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.store-from {
    padding: 0 20rpx;
    font-size: 28rpx;
}

.store-from-item {
    display: flex;
    align-items: center;
    height: 100rpx;
}

.store-from-item:nth-child(n + 2) {
    border-top: 1px dashed #f2f2f2;
}
</style>