caimei-applets-hehe/components/cm-module/cm-product-params/cm-product-params.vue

<template>
    <cm-drawer title="商品参数" :visible="visible" @close="$emit('close')" position="bottom">
        <scroll-view scroll-y="true" class="cm-product-params">
            <view class="content-tr">
                <view class="content-td">品牌：</view>
                <view class="content-th">{{ productInfo.brandName == null ? '其他' : productInfo.brandName }}</view>
            </view>
            <view class="content-tr">
                <view class="content-td">包装规格：</view> <view class="content-th">{{ productInfo.unit }}</view>
            </view>
            <view class="content-tr">
                <view class="content-td">库存：</view> <view class="content-th">{{ productInfo.stock }}</view>
            </view>
            <view
                class="content-tr"
                v-if="productInfo.parametersList.length > 0"
                v-for="(item, index) in productInfo.parametersList"
                :key="index"
            >
                <view class="content-td">{{ item.paramsName }}：</view>
                <view class="content-th">{{ item.paramsContent }}</view>
            </view>
            <view class="btn" @click="$emit('close')">了解</view>
        </scroll-view>
    </cm-drawer>
</template>

<script>
import CmDrawer from '../cm-drawer/cm-drawer.vue'
export default {
    components: {
        CmDrawer
    },
    props: {
        productInfo: {
            type: Object,
            default: () => {}
        },
        visible: {
            type: Boolean,
            default: false
        }
    }
}
</script>

<style lang="scss" scoped>
.cm-product-params {
    width: 100%;
    padding-top: 24rpx;
    height: 320rpx;
    .content-tr {
        width: 100%;
        min-height: 58rpx;
        line-height: 58rpx;
        display: flex;
        .content-td {
            display: flex;
            flex: 3;
            font-size: 26rpx;
            color: #999999;
            line-height: 58rpx;
            text-align: right;
        }
        .content-th {
            display: flex;
            flex: 7;
            font-size: 26rpx;
            color: #333333;
            line-height: 58rpx;
            text-align: left;
            padding-left: 10rpx;
        }
    }
}
.btn {
    width: 100%;
    height: 88rpx;
    margin-top: 32px;
    background: #ff457b;
    line-height: 88rpx;
    text-align: center;
    color: #ffffff;
    font-size: 28rpx;
    border-radius: 44rpx;
}
</style>