phone.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. <template>
  2. <view class="phone-box">
  3. <block v-for="(item ,index) in telList">
  4. <view class="phone-item-box">
  5. <view class="pnone-headline">
  6. {{item.name}}
  7. </view>
  8. <block v-for="(subItem ,subIndex ) in item.list">
  9. <view class="sub-item">
  10. <view class="sub-item-label">{{subItem.label}}</view>
  11. <view class="sub-item-phone">
  12. <block v-for="(telItem ,telIndex ) in subItem.tel_list">
  13. <view class="phone-item" @click.stop="makingCall(telItem.tel)">
  14. <view class="phone-info">
  15. <text class="phone-num">{{telItem.tel}}</text>
  16. <text class="phone-hint" v-if="telItem.hint">{{telItem.hint}}</text>
  17. </view>
  18. <image v-if="telItem.tel" class="phone-icon" src="../static/phone.png"
  19. mode="aspectFit" />
  20. </view>
  21. </block>
  22. </view>
  23. </view>
  24. </block>
  25. </view>
  26. </block>
  27. </view>
  28. </template>
  29. <script>
  30. import phoneList from "./../json/phone.json"
  31. export default {
  32. data() {
  33. return {
  34. telList: []
  35. }
  36. },
  37. onLoad() {
  38. this.telList = phoneList.pnone || [];
  39. },
  40. methods: {
  41. makingCall(tel) {
  42. uni.makePhoneCall({
  43. phoneNumber: tel
  44. });
  45. }
  46. }
  47. }
  48. </script>
  49. <style lang="scss" scoped>
  50. $h_num: 50rpx;
  51. .phone-box {
  52. padding: 30rpx;
  53. .phone-item-box {
  54. border-bottom: 1rpx solid #f9f7f7;
  55. padding: 30rpx 0;
  56. }
  57. .pnone-headline {
  58. line-height: 1.2;
  59. padding: 20rpx 0 20rpx 20rpx;
  60. // border-left: 10rpx solid skyblue;
  61. position: relative;
  62. display: flex;
  63. align-items: center;
  64. font-size: 36rpx;
  65. font-weight: 600;
  66. color: #1a1a1a;
  67. &::before {
  68. position: absolute;
  69. left: 0;
  70. top: 50%;
  71. transform: translateY(-50%);
  72. content: '';
  73. width: 10rpx;
  74. height: 60%;
  75. background-color: #3CBACF;
  76. }
  77. }
  78. .sub-item {
  79. width: 100%;
  80. font-size: 28rpx;
  81. padding: 10rpx 0;
  82. display: flex;
  83. .sub-item-label {
  84. flex-shrink: 0;
  85. width: 150rpx;
  86. height: $h_num;
  87. line-height: $h_num;
  88. color: #999999;
  89. }
  90. .sub-item-phone {
  91. width: calc(100% - 150rpx);
  92. color: #3CBACF;
  93. .phone-item {
  94. flex-shrink: 0;
  95. min-width: 51%;
  96. max-width: 100%;
  97. line-height: $h_num;
  98. display: inline-flex;
  99. align-items: center;
  100. flex-wrap: wrap;
  101. .phone-info {
  102. max-width: calc(100% - 40rpx);
  103. text {
  104. margin-right: 20rpx;
  105. }
  106. }
  107. .phone-icon {
  108. width: 40rpx;
  109. height: 40rpx;
  110. }
  111. }
  112. // <view class="phone-item">
  113. // <text class="phone-num">{{telItem.tel}}</text>
  114. // <text class="phone-hint"></text>
  115. // </view>
  116. // <image class="phone-icon" src="../static/phone.png" mode="aspectFit"></image>
  117. }
  118. }
  119. }
  120. </style>