header-title.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. <template>
  2. <view class="header">
  3. <image src="../../static/images/skm_fn_bg.png" mode="aspectFill" class="bg-img"></image>
  4. <view class="info-block flex-row-between">
  5. <view class="info">
  6. <view class="title">{{title}}</view>
  7. <view class="desc">{{$test.$desc}}</view>
  8. </view>
  9. <view v-if="title=='收款码'+$test.$test" @click="look" class="btn flex-center">查看指引 <image class="zhiyin" src="../../static/images/zhiyin.png"
  10. mode=""></image>
  11. </view>
  12. <view v-if="title=='普通二维码'+$test.$test" @click="lookCode" class="btn flex-center">查看指引 <image class="zhiyin" src="../../static/images/zhiyin.png"
  13. mode=""></image>
  14. </view>
  15. </view>
  16. </view>
  17. </template>
  18. <script>
  19. export default {
  20. name: 'headerTitle',
  21. props: {
  22. title: {
  23. type: String,
  24. default () {
  25. return ""
  26. },
  27. }
  28. },
  29. data() {
  30. return {
  31. $test:this.$test.$test,
  32. }
  33. },
  34. methods: {
  35. look() {
  36. uni.showModal({
  37. title: '温馨提示',
  38. content: '上传多张收款码视为多码合一,请勿上传第三方聚合收款码。多码合一只支持支付宝收款二维码、云闪付钱包收款二维码',
  39. showCancel: false,
  40. cancelText: '',
  41. confirmText: '好的',
  42. success: res => {},
  43. fail: () => {},
  44. complete: () => {}
  45. });
  46. },
  47. lookCode() {
  48. uni.showModal({
  49. title: '温馨提示',
  50. content: `图片${this.$test.$test}只支持能有效进行访问的网址链接,非网址链接的二维码,不建议进行${this.$test.$test}操作。`,
  51. showCancel: false,
  52. cancelText: '',
  53. confirmText: '好的',
  54. success: res => {},
  55. fail: () => {},
  56. complete: () => {}
  57. });
  58. },
  59. }
  60. }
  61. </script>
  62. <style>
  63. .header {
  64. width: 100%;
  65. height: 198rpx;
  66. position: relative;
  67. }
  68. .header .bg-img {
  69. display: block;
  70. position: absolute;
  71. left: 0;
  72. top: 0;
  73. z-index: -1;
  74. width: 100%;
  75. height: 198rpx;
  76. }
  77. .header .info-block {
  78. padding: 0 40rpx 0 48rpx;
  79. height: 198rpx;
  80. }
  81. .header .info-block .title {
  82. font-size: 36rpx;
  83. color: #fff;
  84. font-weight: 500;
  85. line-height: 50rpx;
  86. }
  87. .header .info-block .desc {
  88. font-size: 28rpx;
  89. font-weight: 500;
  90. color: #fff;
  91. line-height: 40rpx;
  92. margin-top: 8rpx;
  93. }
  94. .header .info-block .btn {
  95. width: 176rpx;
  96. height: 56rpx;
  97. border: 2rpx solid #fff;
  98. border-radius: 28rpx;
  99. text-align: center;
  100. line-height: 52rpx;
  101. font-size: 28rpx;
  102. font-weight: 500;
  103. color: #fff;
  104. }
  105. .zhiyin {
  106. width: 28rpx;
  107. height: 28rpx;
  108. margin-left: 6rpx;
  109. }
  110. </style>