caimei-applets-store/pages/views/order/components/order-invalid-modal/order-invalid-modal.vue

<template>
    <!-- 再次购买部分商品失效弹窗 -->
    <tui-modal :show="visible" @cancel="$emit('cancel')" :custom="true">
        <view class="tui-modal">
            <view class="goods-list">
                <view class="title">以下商品已失效，不能进行购买；是否先将其他商品加入购物车？</view>
                <scroll-view scroll-y class="goods-list-scroll">
                    <view class="goods-section" v-for="(goods, index) in goodsList" :key="index">
                        <image :src="goods.productImage" class="goods-cover"></image>
                        <view class="goods-title">{{ goods.name }}</view>
                    </view>
                </scroll-view>
            </view>
            <view class="tui-modal-button">
                <button class="modal-button cancel" @click="handleClick(0)">我再想想</button>
                <button class="modal-button confirm" @click="handleClick(1)">加入购物车</button>
            </view>
        </view>
    </tui-modal>
</template>

<script>
export default {
    name: 'order-invalid-modal',
    props: {
        goodsList: {
            type: Array,
            default: () => []
        },
        visible: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        handleClick(type) {
            this.$emit('confirm', { index: type })
        }
    }
}
</script>

<style lang="scss" scoped>
.tui-modal {
    .goods-list {
        margin-bottom: 30rpx;

        .title {
            width: 100%;
            height: auto;
            font-size: 30rpx;
            text-align: justify;
            color: #333333;
            line-height: 1.6;
            margin-bottom: 30rpx;
        }

        .goods-list-scroll {
            width: 100%;
            max-height: 350rpx;

            .goods-section {
                width: 100%;
                
                display: flex;
                justify-content: space-between;
                align-items: center;

                margin-top: 24rpx;
                
                &:first-child{
                    margin-top: 0;
                }

                .goods-cover {
                    display: block;
                    width: 86rpx;
                    height: 86rpx;

                    border-radius: 6rpx;
                    border: 1px solid #e1e1e1;
                    box-sizing: border-box;
                }

                .goods-title {
                    flex: 1;
                    height: 86rpx;
                    margin-left: 18rpx;
                    line-height: 1.6;
                    font-size: 26rpx;
                    color: #666666;
                    text-overflow: ellipsis;
                    text-align: justify;
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
            }
        }
    }
    .tui-modal-button {
        width: 100%;
        height: 72rpx;
        display: flex;
        .modal-button {
            width: 200rpx;
            height: 72rpx;
            line-height: 72rpx;
            border-radius: 36rpx;
            box-sizing: border-box;
            &.cancel {
                border: 1px solid #b2b2b2;
                background: #ffffff;
                color: #333333;
            }
            &.confirm {
                background: linear-gradient(270deg, #f83c6c 0%, #fc32b4 100%);
                color: #ffffff;
            }
        }
    }
}
</style>