matterDetails.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. <template>
  2. <view class="matter-page">
  3. <scroll-view scroll-y="true" class="matter-scroll">
  4. <view class="matter-item" v-if="info.handleMethod">
  5. <view class="matter-label">办理方式</view>
  6. <view class="matter-val">{{info.handleMethod}}</view>
  7. </view>
  8. <view class="matter-item" v-if="info.serviceObject">
  9. <view class="matter-label">服务对象</view>
  10. <view class="matter-val">{{info.serviceObject}}</view>
  11. </view>
  12. <view class="matter-item" v-if="info.processingConditions">
  13. <view class="matter-label">办理条件</view>
  14. <view class="matter-val" v-html="info.processingConditions"></view>
  15. </view>
  16. <view class="matter-item" v-if="info.processingMaterial">
  17. <view class="matter-label">办理材料</view>
  18. <view class="matter-val" v-html="info.processingMaterial"></view>
  19. </view>
  20. <view class="matter-item" v-if="info.processingDays">
  21. <view class="matter-label">办理时间</view>
  22. <view class="matter-val">{{info.processingDays}}天(工作日)</view>
  23. </view>
  24. <!-- <view class="distance-btn" @click.stop="goTransact()">
  25. <text>去办理</text>
  26. </view> -->
  27. </scroll-view>
  28. </view>
  29. </template>
  30. <script>
  31. export default {
  32. data() {
  33. return {
  34. info: {}
  35. }
  36. },
  37. onLoad() {
  38. const eventChannel = this.getOpenerEventChannel();
  39. eventChannel.on('acceptDataFromOpenerPage', data => {
  40. this.info = data || {}
  41. uni.setNavigationBarTitle({
  42. title: data.name
  43. });
  44. })
  45. },
  46. methods: {
  47. goTransact() {
  48. window.location = 'https://wsgaj.chutianyun.gov.cn/weixin/#/'
  49. }
  50. }
  51. }
  52. </script>
  53. <style lang="scss" scoped>
  54. .matter-page {
  55. width: 100%;
  56. // min-height: 100vh;
  57. background-color: #F2F2F2;
  58. .matter-scroll {
  59. width: 100%;
  60. height: 100vh;
  61. padding: 30rpx;
  62. }
  63. .matter-item {
  64. width: 100%;
  65. border: 1rpx solid #E0DDDD;
  66. display: flex;
  67. justify-content: space-between;
  68. align-items: stretch;
  69. margin-bottom: 30rpx;
  70. .matter-label,
  71. .matter-val {
  72. flex-shrink: 0;
  73. padding: 20rpx;
  74. }
  75. .matter-label {
  76. width: 30%;
  77. background-color: #fff;
  78. display: flex;
  79. justify-content: center;
  80. align-items: center;
  81. }
  82. .matter-val {
  83. // display: flex;
  84. // justify-content: center;
  85. // align-items: center;
  86. // flex-wrap: wrap;
  87. border-left: 1rpx solid #E0DDDD;
  88. width: 70%;
  89. background-color: #F4FAFF;
  90. white-space: pre-wrap;
  91. overflow-wrap: break-word;
  92. }
  93. }
  94. }
  95. ::v-deep img,
  96. ::v-deep video,
  97. ::v-deep audio {
  98. max-width: 100%;
  99. }
  100. .distance-btn {
  101. margin: 50rpx auto 0;
  102. width: 150rpx;
  103. height: 60rpx;
  104. border-radius: 10rpx;
  105. background-color: #61A8FF;
  106. display: flex;
  107. justify-content: center;
  108. align-items: center;
  109. font-size: 22rpx;
  110. font-weight: 700;
  111. color: #ffffff;
  112. }
  113. </style>