yinchuan-community-all/mini-program/smart-city-yinchuan-wx/pagesM/comps/dt_menu_list.vue

<template>
    <view class="menu-wrap">
        <view v-for="(item, idx) in itemData" :key="idx">
            <view
                    v-if="item.isMarginTop"
                    class="space-line"
                    :style="{
          'background-color': menuStyle.spaceColor,
          height: spaceHeightCal
        }"
            ></view>
            <view
                    @click="tapItem(item)"
                    class="comp-listItem"
                    :style="{ 'border-bottom-color': menuStyle.splitLineColor, 'height':itemHeight }"
            >
                <view class="leftItem">
                    <image v-if="item.image" :src="item.image" mode="aspectFit"></image>
                    <text>{{ item.title }}</text>
                </view>
                <view class="rightItem">
                    <text>{{ item.value }}</text>
                    <image
                            v-if="!item.hideArrow"
                            src="https://szsq.nxzhsq.cn/community/miniofile/image/arrow.png"
                    ></image>
                </view>
                <!-- 微信客服 -->
                <button
                        v-if="item.isWxService"
                        class="customer-service"
                        open-type="contact"
                        session-from="weapp"
                ></button>
                <!-- 微信授权 -->
                <button
                        v-if="item.isOpenSetting"
                        class="customer-service"
                        open-type="openSetting"
                        @opensetting="tapOpenSetting"
                ></button>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        props: {
            menuStyle: {
                type: Object,
                default: {
                    spaceColor: '',
                    splitLineColor: '',
                    spaceHeight: '',
                    height: ''
                }
            },
            itemData: {
                type: Array,
                value: [{
                    id: 0,
                    title: '',
                    value: '',
                    isMarginTop: false,
                    hideArrow: false,
                    isWxService: false,
                    isOpenSetting: false
                }]
            }
        },
        data() {
            return {}
        },
        computed: {
            itemHeight() {
                if (this.menuStyle.height) {
                    return uni.upx2px(this.menuStyle.height) + 'px'
                }
                return ''
            },
            spaceHeightCal() {
                if (this.menuStyle.spaceHeight) {
                    return uni.upx2px(this.menuStyle.spaceHeight) + 'px'
                }
                return ''
            }
        },
        methods: {
            tapItem(item) {
                if (!item.isWxService || !item.isOpenSetting) {
                    this.$emit('tapitem', item)
                }
            },
            tapOpenSetting() {
                try {
                    uni.openSetting()
                } catch (ex) {
                }
            }
        }
    }
</script>
<style lang="scss">
    .menu-wrap {
        .space-line {
            height: 20 upx;
        }

        .comp-listItem {
            position: relative;
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 0 30 upx;
            color: #353535;
            font-size: 30 upx;
            justify-content: space-between;
            margin-top: 0;
            height: 100 upx;
            border-bottom: 2 upx solid #f5f5f5;
            background: #fff;

            .customer-service {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
            }
        }

        .comp-listItem .leftItem {
            display: flex;
            align-items: center;
        }

        .comp-listItem .leftItem text {
            max-height: 100%;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-overflow: ellipsis;
        }

        .comp-listItem .leftItem image {
            width: 40 upx;
            height: 40 upx;
            margin-right: 20 upx;
        }

        .comp-listItem .rightItem {
            display: flex;
            align-items: center;
        }

        .comp-listItem .rightItem text {
            color: #999999;
        }

        .comp-listItem .rightItem image {
            margin-left: 20 upx;
            width: 13 upx;
            height: 24 upx;
        }
    }
</style>