glhcp/uniapp/components/order-shop/order-shop.vue

<template>
    <view class="order-shop">
        <view class="m-l-20">
            <shop-title :shop="{shop_name:item.shop_name}" :is-link="false"></shop-title>
        </view>
        <view class="order-goods">
            <order-goods :list="item.goods"></order-goods>
        </view>
        <view class="item flex row-between" @tap="onShowCoupon" v-if="orderType == 0">
            <view>店铺优惠券</view>
            <view class="flex">
                <text class="primary" v-if="item.discount_amount">-￥{{item.discount_amount }}</text>
                <text v-else class="muted">请选择</text>
                <u-icon name="arrow-right muted" size="24" class="m-l-10"></u-icon>
            </view>
        </view>
        <view class="item flex">
            <view>配送方式</view>
            <view class="flex-1 m-l-20 muted">{{item.delivery_type_text}}</view>
            <view>
                <price-format :price="item.shipping_price"></price-format>
            </view>
        </view>
        <view class="item flex row-between col-top m-t-20" @tap="handleInvoice(item.shop_id)" v-if="item.open_invoice">
            <view>开具发票</view>
            <view class="invoice col-top">
                <text class="muted invoice--text">{{ getCurrentShopInvoice }}</text>
                <u-icon name="arrow-right muted" size="24" class="m-t-10 m-l-10"></u-icon>
            </view>
        </view>
        <view class="item flex row-between">
            <view>买家留言</view>
            <u-input v-model="remark" class="flex-1 m-l-20" :clearable="false" placeholder="请添加备注（150字以内）"></u-input>
        </view>
        <view class="item flex row-right">
            共{{item.total_num || (item.goods && item.goods[0].count)}}件，合计： <price-format weight="500"
                :color="colorConfig.primary" :first-size="36" :second-size="36"
                :price="item.total_amount || (item.goods && item.goods[0].team_price)"></price-format>
        </view>
        <u-popup v-if="orderType == 0" v-model="showCoupon" border-radius="14" mode="bottom" closeable
            :safe-area-inset-bottom="true">
            <view class="p-30">
                <view class="title">优惠券</view>
            </view>
            <view v-if="showCoupon">
                <tabs :current="active" :bar-width="100" :is-scroll="false">
                    <tab :name="'可使用优惠券 (' + usableCoupon.length + ')'">
                        <coupon-order :list="usableCoupon" :type="0" @change="onSelectCoupon" :coupon-id="couponId">
                        </coupon-order>
                    </tab>
                    <tab :name="'不可用优惠券 (' + unusableCoupon.length + ')'">
                        <coupon-order :list="unusableCoupon" :type="1" @change="showCoupon = false"></coupon-order>
                    </tab>
                </tabs>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import {
        getOrderCoupon
    } from '@/api/activity'
    import { invoiceType } from "@/utils/type.js"
    export default {
        name: "order-shop",
        props: {
            item: {
                type: [Object, Array]
            },
            orderType: {
                type: Number
            },
            invoice: {
                type: [Object, Array]
            }
        },
        data() {
            return {
                active: 0,
                remark: '',
                showCoupon: false,
                usableCoupon: [],
                unusableCoupon: [],
                usableCouponL: 0,
                unusableCouponL: 0,
                isRequest: false,
                couponId: '',
                invoiceInfo: {} // 发票内容
            };
        },
        computed: {
            // 获取当前发票选择显示在视图上
            getCurrentShopInvoice() {
                const invoice = this.invoiceInfo;
                if (invoice.name) {
                    return `${ invoice.type == 0 ? '普通发票' : '专用发票' } - ${ invoice.header_type == 0 ? '个人' : '企业' } - ${ invoice.name }`
                } else {
                    return '不开发票'
                }
            }
        },
        methods: {
            onShowCoupon() {
                if (!this.isRequest) {
                    uni.showLoading({
                        title: '加载中...'
                    })
                    this.getCoupon()
                } else {
                    this.showCoupon = true
                }
            },
            async getCoupon() {
                const {
                    item: {
                        goods,
                        shop_id
                    }
                } = this
                const params = goods.map(({
                    item_id,
                    num,
                    goods_id
                }) => ({
                    item_id,
                    num,
                    goods_id
                }))
                const {
                    data,
                    code
                } = await getOrderCoupon({
                    goods: params,
                    shop_id: shop_id
                })
                if (code == 1) {
                    this.isRequest = true
                    this.usableCoupon = data.suit
                    this.usableCouponL = data.suit.length
                    this.unusableCoupon = data.un_suit
                    this.unusableCouponL = data.un_suit.length
                    this.showCoupon = true
                    uni.hideLoading()
                }
            },
            // 选择发票
            handleInvoice(shopId) {
                this.$Router.push({
                    path: '/bundle/pages/invoice/invoice',
                    query: {
                        shop_id: shopId,
                        invoice: JSON.stringify(this.invoiceInfo),
                        type: invoiceType['SETTLEMENT']
                    }
                })
            },
            onSelectCoupon(e) {
                this.couponId = e
                this.$emit('changecoupon', e)
                this.showCoupon = false
            }
        },
        watch: {
            remark(val) {
                this.$emit('changeremark', {
                    shop_id: this.item.shop_id,
                    remark: val
                })
            },
            invoice(val) {
                console.log(val);
                const res = val.filter(el => el.shop_id == this.item.shop_id)
                if (res.length) {
                    this.invoiceInfo = res[0];
                } else {
                    this.invoiceInfo = {};
                }
            }
        }
    }
</script>

<style lang="scss">
    .order-shop {
        .order-goods {
            border-top: $-solid-border;
        }

        .item {
            height: 88rpx;
            padding: 0 24rpx;
            
            .invoice {
                display: flex;
                &--text {
                    width: 300rpx;
                    text-align: right;
                }
            }
        }
    }
</style>