cbsl-app/pages/simpleResviror/zrtx/card.vue

<template>
  <view class="zrtx-box">
    <view class="title" style="text-align: center; font-size: 20px; font-weight: bold;">
      {{ dic }}
    </view>
    <view class="table_cur">
      <table style="width:100%;display:block">
        <tr>
          <th style="width: 50px;">
            姓名
          </th>
          <th style="width: 130px">单位</th>
          <th style="width: 80px;">
            职务
          </th>
          <th style="width: 100px;">
            联系方式
          </th>
        </tr>
        <tr>
          <td style="width: 50px; white-space: nowrap;">{{ info.personName }}</td>
          <td style="width: 130px; white-space: pre-wrap; line-height: 1.5;">{{ info.orgName }}</td>
          <td style="width: 80px; white-space: nowrap;">{{ info.position }}</td>
          <td style="width: 100px;color: #62bafa; white-space: nowrap;" @click="show = true">{{ info.tel }}</td>
        </tr>
      </table>

    </view>
    <u-action-sheet :actions="list" :title="title" :show="show" :description="info.tel" @select="selectClick"
      :closeOnClickOverlay="true" :closeOnClickAction="true"></u-action-sheet>
  </view>
</template>

<script>
import { repDict } from "../../utils/dicType.js"
export default {
  props: {
    info: Object,
    default: {}
  },
  data() {
    return {
      show: false,
      title: "",
      list: [
        {
          name: '呼叫'
        },
        {
          name: '复制'
        },
        {
          name: '取消'
        },
      ],
    }
  },
  computed: {
    dic() {
      return repDict(this.info.repType)
    }
  },
  methods: {
    selectClick(obj) {
      if (obj.name == "呼叫") {
        uni.makePhoneCall({
          phoneNumber: this.info.tel,
        });
        this.show = false
      } else if (obj.name == "复制") {
        uni.setClipboardData({
          data: this.info.tel,
          showToast: true
        })
        this.show = false
      }
      // else if(obj.name == "保存至手机通讯录"){
      //   uni.addPhoneContact({
      //   	lastName: this.info.personName.substr(0,1),
      //   	firstName: this.info.personName.substr(1),
      //   	mobilePhoneNumber: this.info.tel,
      //   	success: function () {
      //       uni.$showMsg("保存成功")
      //   	},
      //   	fail: function () {
      //   		console.log('fail');
      //   	}
      //   });
      // }
      else {
        this.show = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.zrtx-box {
  border: 1px solid #c1f2ce;
  border-radius: 2px;
  padding: 10px 10px 5px 10px;
  background-color: #ebfbef;
  margin-bottom: 10px;

  .table_div {
    height: 100%;
    max-width: calc(100% - 0px);
    max-height: calc(100vh);
    flex: 1;
    padding-top: 0px;
    overflow-x: scroll;
  }

  /*table样式*/
  .table_cur {
    margin-top: 20px;
    width: 100%;
    empty-cells: show;
    border-collapse: collapse;
    font-size: 14px;
  }

  .scroll-table {
    height: calc(100vh - 125px);
    overflow-y: auto;
    width: '100%'
  }

  .table_cur tr {
    display: flex;
    align-items: center;
    min-height: 65rpx;
  }

  .table_cur th {
    height: 65rpx;
    font-size: 14px;
    // font-weight: bold;

    font-weight: 100;
    padding: 0px 10px;
    box-sizing: border-box;
    white-space: nowrap;
    text-align: center !important;
  }

  .table_cur td {
    min-height: 65rpx;
    height: auto;
    // border-bottom: 1px solid #d8ddeb;
    font-size: 14px;
    color: #2f4056;
    padding: 10px;
    box-sizing: border-box;
    text-align: center !important;
    vertical-align: middle;
    word-break: break-all;
  }
}
</style>