cardDetails.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. <template>
  2. <view class="">
  3. <navbar :config="config" backColor="#666"></navbar>
  4. <view class="card-content" v-if="dataVal">
  5. <card showCardNo :cardInfo="dataVal" />
  6. <view class="module">
  7. <view class="module-title">
  8. <text class="title-line title-line-left"></text>
  9. <text class="title-name">卡片说明</text>
  10. <text class="title-line title-line-right"></text>
  11. </view>
  12. <view class="module-content">
  13. <view class="module-item">
  14. <text class="module-lable">发卡单位:</text>
  15. <text class="module-text">{{ dataVal.csmNameList }}</text>
  16. </view>
  17. <view class="module-item">
  18. <text class="module-lable">发卡时间:</text>
  19. <text class="module-text">{{ dataVal.activeTime }}</text>
  20. </view>
  21. <view class="module-item">
  22. <text class="module-lable">可用范围:</text>
  23. <text class="module-text">{{ dataVal.orgName }}</text>
  24. </view>
  25. </view>
  26. </view>
  27. <view class="module">
  28. <view class="module-title">
  29. <text class="title-line title-line-left"></text>
  30. <text class="title-name">使用须知</text>
  31. <text class="title-line title-line-right"></text>
  32. </view>
  33. <view class="module-content">
  34. {{ dataVal.useNotice }}
  35. </view>
  36. </view>
  37. </view>
  38. <view class="card-btns" v-if="dataVal && dataVal.status === 'ACTIVED'">
  39. <view class="card-btn-box">
  40. <view class="card-btn" @click.stop="onEmploy()">
  41. 使用
  42. </view>
  43. </view>
  44. </view>
  45. </view>
  46. </template>
  47. <script>
  48. import { getYimaCard } from "@/api/government.js"
  49. import card from "./card.vue"
  50. export default {
  51. components: { card },
  52. data() {
  53. return {
  54. cardNo: null,
  55. config: {
  56. back: true,
  57. title: '权益卡详情',
  58. color: '#1a1a1a',
  59. backgroundColor: [1, '#fff'],
  60. statusBarFontColor: 'black'
  61. },
  62. dataVal: null
  63. }
  64. },
  65. onLoad(opt) {
  66. this.cardNo = opt.cardNo;
  67. this.getCard();
  68. },
  69. onPullDownRefresh() {
  70. if (this.loadingStatus = 'loading') {
  71. uni.stopPullDownRefresh();
  72. return
  73. }
  74. this.getCard();
  75. },
  76. methods: {
  77. onEmploy() {
  78. uni.redirectTo({
  79. url: "/pages/code/index?codeType=市民码"
  80. });
  81. },
  82. getCard() {
  83. this.loadingStatus = 'loading'
  84. getYimaCard().then(res => {
  85. if (res.code == 200) {
  86. const { outAppCardVoList } = res.data || []
  87. try {
  88. outAppCardVoList.forEach(el => {
  89. if (el.cardNo == this.cardNo) {
  90. this.dataVal = el;
  91. throw new Error('')
  92. }
  93. })
  94. } catch (e) {
  95. //TODO handle the exception
  96. }
  97. }
  98. }).finally(() => {
  99. setTimeout(() => {
  100. this.loadingStatus = 'noMore';
  101. uni.stopPullDownRefresh();
  102. }, 300)
  103. })
  104. },
  105. }
  106. }
  107. </script>
  108. <style lang="scss" scoped>
  109. .card-content {
  110. padding: 60rpx;
  111. .module {
  112. width: 100%;
  113. padding-top: 30rpx;
  114. .module-title {
  115. display: flex;
  116. justify-content: center;
  117. align-items: center;
  118. .title-line {
  119. width: 95rpx;
  120. height: 4rpx;
  121. border-radius: 2rpx;
  122. }
  123. .title-line-left {
  124. background: linear-gradient(90deg, rgba(41, 171, 168, 0.00) 13%, #29aba8);
  125. }
  126. .title-line-right {
  127. background: linear-gradient(270deg, rgba(41, 171, 168, 0.00) 13%, #29aba8);
  128. }
  129. .title-name {
  130. padding: 0 20rpx;
  131. font-size: 34rpx;
  132. font-family: PingFang SC, PingFang SC-Bold;
  133. font-weight: 700;
  134. color: #29aba8;
  135. }
  136. }
  137. .module-content {
  138. padding-top: 15rpx;
  139. line-height: 1.4;
  140. font-size: 24rpx;
  141. font-family: PingFang SC, PingFang SC-Regular;
  142. font-weight: 400;
  143. padding-bottom: 10rpx;
  144. color: #666666;
  145. .module-item {
  146. display: flex;
  147. font-size: 24rpx;
  148. font-family: PingFang SC, PingFang SC-Regular;
  149. font-weight: 400;
  150. padding-bottom: 10rpx;
  151. .module-lable {
  152. color: #1a1a1a;
  153. flex-shrink: 0;
  154. }
  155. .module-text {
  156. color: #666666;
  157. }
  158. }
  159. }
  160. }
  161. }
  162. .card-btns {
  163. width: 100%;
  164. height: 148rpx;
  165. .card-btn-box {
  166. position: fixed;
  167. left: 0;
  168. bottom: 0;
  169. right: 0;
  170. width: 100%;
  171. height: 148rpx;
  172. z-index: 1;
  173. .card-btn {
  174. width: 690rpx;
  175. height: 80rpx;
  176. background: linear-gradient(92deg, #3cb7d2 2%, #44c5d5 98%);
  177. border-radius: 40rpx;
  178. margin: 34rpx auto;
  179. text-align: center;
  180. line-height: 80rpx;
  181. font-size: 32rpx;
  182. font-family: PingFang SC, PingFang SC-Regular;
  183. font-weight: 400;
  184. color: #ffffff;
  185. }
  186. }
  187. }
  188. </style>