purchase-let/components/goodPopup.vue

<template>
    <up-popup :show="show" closeable round="10" @close="close" :safeAreaInsetBottom="false">
        <view class="good-popup">
            <view class="head-title">
                {{datas.is_bulk ? '称重商品' : '计件商品'}}
            </view>
            <view class="row">
                <view>商品名称</view>
                <view>{{datas.name || datas.goods_name || datas.store_name}}</view>
            </view>
            <view class="row">
                <view>商品单位</view>
                <view>{{datas.unit_name}}</view>
            </view>
            <view class="row">
                <view>商品价格</view>
                <view>¥ {{datas.price}}</view>
            </view>
            <view class="row">
                <view>小计</view>
                <view style="color: #F55726;" v-if="+datas.cart_num<+datas.batch">
                    {{`${datas.batch}${datas.unit_name}起批`}}
                </view>
                <view style="color: #F55726;" v-else>¥ {{subtotal}}</view>
            </view>
            <view v-if="datas.is_bulk" class="row">
                <view>购买重量<text style="color: #F55726;">*</text></view>
                <view style="flex: 1;">
                    <up-input v-model="datas.cart_num" :cursorSpacing='120' type="number" border="none"
                        placeholder="请输入购买重量" inputAlign="right"></up-input>
                </view>
            </view>
            <view v-else class="row">
                <view>购买数量<text style="color: #F55726;">*</text></view>
                <view style="flex: 1;">
                    <up-input v-model="datas.cart_num" :cursorSpacing='120' type="number" border="none"
                        placeholder="请输入购买数量" inputAlign="right">
                        <template #suffix>
                            <span style="color: #20b128;">{{datas.unit_name}}</span>
                        </template>
                    </up-input>
                </view>
            </view>
            <view class="row" style="padding-top: 30px;padding-bottom: 30rpx;">
                <view style="width: 30%;margin-right: 30rpx;">
                    <up-button @click="close" color="#f7f7f7"><text style="color: #333;">取消</text></up-button>
                </view>
                <view style="flex: 1;">
                    <up-button @click="change" color="#20b128">确定</up-button>
                </view>
            </view>
        </view>
    </up-popup>
</template>

<script setup>
    import {
        computed,
        ref
    } from "vue"
    import {
        toast
    } from "../uni_modules/uview-plus";

    const props = defineProps({
        show: {
            type: Boolean,
            default: false
        },
    })

    const datas = ref({
        cart_num: ''
    });
    const setData = (e) => {
        console.log(e);
        datas.value = e;
        if (e.batch) datas.value.cart_num = e.batch;
        else datas.value.cart_num = '';
    }

    const emit = defineEmits(['close', 'change']);
    const close = () => {
        emit('close');
    }

    const change = () => {
        if (+datas.value.cart_num < +datas.value.batch) return uni.$u.toast(
            `购买数量不能小于${datas.value.batch}${datas.value.unit_name}`);
        if (subtotal.value <= 0) {
            uni.$u.toast('金额不可小于等于0');
            datas.value.cart_num = '';
            return;
        }
        emit('change', datas.value);
    }

    const subtotal = computed(() => {
        let num = +datas.value.cart_num || 0;
        let sell = +datas.value.sell || datas.value.price;
        return Math.ceil(num * sell * 100) / 100
    })

    defineExpose({
        setData
    })
</script>

<style scoped lang="scss">
    .good-popup {
        padding: 30rpx;

        .head-title {
            font-weight: bold;
            text-align: center;
            margin-bottom: 20rpx;
        }

        .row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 20rpx;
            border-bottom: 1rpx solid #f6f6f6;
            margin-bottom: 20rpx;

            &:last-child {
                border-bottom: none;
                margin-bottom: 0;
            }

            .content {
                .top {
                    display: flex;

                    view {
                        margin-right: 20rpx;
                    }
                }

                .bottom {}
            }

            image {
                width: 40rpx;
                height: 40rpx;
                flex-shrink: 0;
            }
        }
    }

    @keyframes disappear {
        to {
            opacity: 0;
            /* 渐隐 */
            transform: scale(0);
            /* 缩小 */
        }
    }
</style>