caimei-applets-store/pages/views/goods/components/goods-params-section/goods-params-section.vue

<template>
    <view class="params-section" v-if="paramList">
        <view class="section" @click="onShowDetail">
            <view class="label">参数：</view>
            <view class="list">
                <text>品牌</text>
                <text>分类...</text>
            </view>
            <view class="iconfont icon-chakangengduo"></view>
        </view>
        <uni-popup ref="popup" type="bottom">
            <view class="popup-content" :style="{ paddingBottom: safeArea ? 0 : '32rpx' }">
                <view class="close iconfont icon-iconfontguanbi" @click="$refs.popup.close()"></view>
                <view class="title">商品参数</view>
                <view class="content">
                    <view class="params-list">
                        <view class="row" v-for="item in paramList" :key="item.id">
                            <text class="label" v-text="item.paramsName"></text>
                            <text class="content" v-text="item.paramsContent"></text>
                        </view>
                    </view>
                    <tui-button
                        type="base"
                        width="600rpx"
                        height="90rpx"
                        @click="$refs.popup.close()"
                        shape="circle"
                        :size="26"
                    >
                        了解
                    </tui-button>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    name: 'goods-params-section',
    props: {
        paramList: {
            type: [Array, Object],
            default: null
        }
    },
    computed: {
        ...mapGetters(['safeArea'])
    },
    methods: {
        onShowDetail() {
            this.$refs.popup.open()
        }
    }
}
</script>

<style lang="scss" scoped>
.params-section {
    padding: 24rpx;
    background-color: #fff;
    .section {
        @extend .cm-flex-between;
        font-size: 28rpx;

        .label {
            color: #666;
        }

        .list {
            flex: 1;
            margin: 0 24rpx;
            color: #333;

            text {
                margin-right: 24rpx;
            }
        }
        .iconfont {
            font-size: 28rpx;
            color: #666;
        }
    }
}

.popup-content {
    position: relative;
    padding: 32rpx;

    background-color: #fff;
    border-radius: 16rpx 16rpx 0 0;

    &::after {
        position: absolute;
        content: '';
        width: 100%;
        height: 80rpx;
        bottom: -80rpx;
        left: 0;
        background-color: #fff;
    }

    .close {
        position: absolute;
        right: 24rpx;
        top: 24rpx;
        color: #999;
        font-size: 32rpx;
    }
    .title {
        text-align: center;
        font-size: 32rpx;
        color: #333;
    }

    .content {
        @extend .cm-flex-center;
        flex-direction: column;

        .params-list {
            width: 100%;
            padding: 24rpx 0;
            .row {
                @extend .cm-flex-between;
                justify-content: flex-start;
                padding: 12rpx 0;
                line-height: 1.6;
                font-size: 24rpx;

                .label {
                    width: 160rpx;
                    color: #999;
                    &::after {
                        content: '：';
                    }
                }

                .content {
                    color: #333;
                }
            }
        }
    }
}
</style>