CommunityApp/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="http://139.9.103.171:1888/img/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: 20upx;
  }

  .comp-listItem {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 30upx;
    color: #353535;
    font-size: 30upx;
    justify-content: space-between;
    margin-top: 0;
    height: 100upx;
    border-bottom: 2upx 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: 40upx;
    height: 40upx;
    margin-right: 20upx;
  }
  .comp-listItem .rightItem {
    display: flex;
    align-items: center;
  }
  .comp-listItem .rightItem text {
    color: #999999;
  }
  .comp-listItem .rightItem image {
    margin-left: 20upx;
    width: 13upx;
    height: 24upx;
  }
}
</style>