list.vue 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302
  1. <template>
  2. <view>
  3. <!-- 头部背景和搜索 -->
  4. <view>
  5. <image src="/static/images/list-bg.png" class="top-image w-full" id="top-image" mode="widthFix"></image>
  6. </view>
  7. <!-- 搜索 -->
  8. <view class="content">
  9. <block v-if="policyCengci.length > 0">
  10. <view class="flex row-center white lg bold">
  11. <u-icon name="checkmark-circle-fill" size="48"></u-icon>
  12. <view class="m-l-12">匹配成功</view>
  13. </view>
  14. <view class="flex row-center m-t-14 white p-l-20 p-r-20">根据您的条件AI智能计算可能符合以下政策,具体以实际申报为准</view>
  15. <view class="m-t-22 p-l-24 p-r-24">
  16. <view class="top-line"></view>
  17. <view class="list">
  18. <view class="bg-white p-t-18 p-l-24 p-r-24 p-b-34">
  19. <!-- 人才层次标签 -->
  20. <u-tabs :list="policyCengci" name="level" :is-scroll="true" :current="currentTab"
  21. :bold="true" active-color="#DD4250" height="80" bar-width="80" font-size="32"
  22. @change="changeTab" />
  23. <view class="p-15 m-t-20" style="border: 1px solid #DD4250;box-shadow: 0px 3px 6px 1px rgba(243,113,113,0.39);border-radius: 9px;">
  24. <view class="bold">您可能符合的认定条款:</view>
  25. <view class="m-t-10 primary bold">
  26. <rich-text :nodes="policyCengci[currentTab].title"></rich-text>
  27. </view>
  28. <view class="m-t-10 tips" v-if="policyCengci[currentTab].content.length > 0">
  29. <rich-text :nodes="policyCengci[currentTab].content"></rich-text>
  30. </view>
  31. </view>
  32. <!-- 政策列表 -->
  33. <view class="flex flex-wrap m-t-30">
  34. <view class="tag-item" :class="{ 'tat-active': activeIndex == index }"
  35. v-for="(item, index) in policyList" :key="index" @tap="changeTag(index)">
  36. {{ item.title }}
  37. </view>
  38. </view>
  39. <view v-for="(item, index) in policyList" :key="index" v-if="activeIndex == index">
  40. <!-- <view class="detail">{{ item.content }}</view> -->
  41. <rich-text :nodes="item.content"></rich-text>
  42. <view class="flex row-center">
  43. <view class="user-logout flex col-center row-center white" @tap="goDetail(item)">
  44. <view class="m-r-12">查看“{{ item.title }}”详情</view>
  45. <u-icon name="arrow-rightward" size="28"></u-icon>
  46. </view>
  47. </view>
  48. </view>
  49. </view>
  50. </view>
  51. </view>
  52. </block>
  53. <view class="flex row-center white lg bold" v-else>
  54. <u-icon name="close-circle" size="48"></u-icon>
  55. <view class="m-l-12">暂未匹配到政策</view>
  56. </view>
  57. </view>
  58. </view>
  59. </template>
  60. <script>
  61. import {
  62. mapGetters,
  63. mapActions
  64. } from 'vuex'
  65. import {
  66. pxToRpx
  67. } from '@/utils/tools'
  68. const app = getApp()
  69. const homeItem = {
  70. name: '首页'
  71. }
  72. export default {
  73. data() {
  74. return {
  75. activeIndex: 0,
  76. policyList: [],
  77. policyCengci: [],
  78. currentTab: 0,
  79. }
  80. },
  81. onLoad(option) {
  82. this.policyList = uni.getStorageSync('policyList');
  83. this.policyCengci = uni.getStorageSync('policyCengci');
  84. },
  85. onShow() {
  86. // this.getHomeFun();
  87. // this.getUser();
  88. },
  89. onHide() {},
  90. onPullDownRefresh() {
  91. // this.getUser().then(() => {
  92. // uni.stopPullDownRefresh();
  93. // })
  94. },
  95. methods: {
  96. // ...mapActions(['getUser']),
  97. changeTag(index) {
  98. this.activeIndex = index;
  99. },
  100. goDetail(item) {
  101. uni.setStorageSync('policyDetail', item);
  102. uni.navigateTo({
  103. url: '/pages/policy/detail?id=' + item.id + '&title=' + item.title,
  104. })
  105. },
  106. // 改变当前的Tabs位置
  107. changeTab(index) {
  108. this.currentTab = index;
  109. //todo 切换关联的政策列表
  110. },
  111. },
  112. computed: {
  113. ...mapGetters(['appConfig']),
  114. }
  115. }
  116. </script>
  117. <style lang="less" scoped>
  118. .huodong-details {
  119. padding-bottom: calc(200rpx + env(safe-area-inset-bottom));
  120. }
  121. .content {
  122. position: absolute;
  123. top: 54rpx;
  124. width: 100%;
  125. .detail {
  126. background: #F7F7F7;
  127. border-radius: 0rpx 0rpx 0rpx 0rpx;
  128. margin: 24rpx 0;
  129. padding: 24rpx;
  130. }
  131. .top-line {
  132. width: 100%;
  133. height: 24rpx;
  134. background: #DD4250;
  135. border-radius: 10rpx 10rpx 10rpx 10rpx;
  136. opacity: 1;
  137. border: 2rpx solid #B50818;
  138. }
  139. .list {
  140. margin-top: -12rpx;
  141. padding: 0 20rpx;
  142. }
  143. .tag-item {
  144. margin: 8rpx;
  145. padding: 16rpx 28rpx;
  146. background: #F7F8FA;
  147. border-radius: 8rpx 8rpx 8rpx 8rpx;
  148. opacity: 1;
  149. }
  150. .tat-active {
  151. color: #FFFFFF;
  152. background: #DD4250;
  153. border-radius: 8rpx 8rpx 8rpx 8rpx;
  154. }
  155. .user-logout {
  156. padding: 12rpx 32rpx;
  157. background: #DD4250;
  158. box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(221, 66, 80, 0.32);
  159. border-radius: 40rpx 40rpx 40rpx 40rpx;
  160. opacity: 1;
  161. }
  162. }
  163. .details-images {
  164. height: 408rpx;
  165. border-radius: 20rpx;
  166. overflow: hidden;
  167. width: 100%;
  168. image {
  169. width: 100%;
  170. height: 100%;
  171. }
  172. }
  173. .detail-title {
  174. // font-size: 36rpx;
  175. font-weight: bold;
  176. // padding: 30rpx 0;
  177. }
  178. .detail-cell {
  179. display: flex;
  180. // align-items: center;
  181. padding: 30rpx 0;
  182. .cell-img {
  183. padding: 5rpx 0;
  184. image {
  185. width: 48rpx;
  186. height: 48rpx;
  187. display: block
  188. }
  189. }
  190. }
  191. // .muted {
  192. // color: #989898;
  193. // padding-left: 10rpx;
  194. // }
  195. .detail-biaoti {
  196. // font-size: 36rpx;
  197. height: 88rpx;
  198. line-height: 88rpx;
  199. }
  200. .bj-w {
  201. background-color: #fff;
  202. }
  203. .padding-30 {
  204. padding: 0 30rpx !important;
  205. }
  206. .content-box {
  207. padding: 0 24rpx;
  208. box-shadow: 0rpx 8rpx 16rpx 2rpx rgba(0, 0, 0, 0.03);
  209. border-radius: 12rpx 12rpx 12rpx 12rpx;
  210. input {
  211. font-size: 28rpx;
  212. }
  213. textarea {
  214. width: 100%;
  215. height: 100rpx;
  216. font-size: 28rpx;
  217. }
  218. }
  219. .btn-r-border {
  220. position: relative;
  221. &::after {
  222. content: ' ';
  223. width: 1rpx;
  224. height: 36rpx;
  225. background-color: #CCCCCC;
  226. right: 0;
  227. top: 50%;
  228. margin-top: -18rpx;
  229. position: absolute;
  230. }
  231. }
  232. .width75 {
  233. width: 150rpx;
  234. font-weight: bold;
  235. }
  236. </style>
  237. <style lang="scss">
  238. .footer {
  239. left: 0%;
  240. bottom: 150rpx;
  241. width: 100%;
  242. padding: 0 24rpx;
  243. position: fixed;
  244. z-index: 99;
  245. .btn {
  246. height: 84rpx;
  247. line-height: 84rpx;
  248. background-color: $-color-primary;
  249. box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(243, 113, 113, 0.39);
  250. border-radius: 18rpx 18rpx 18rpx 18rpx;
  251. }
  252. }
  253. page {
  254. padding: 0;
  255. }
  256. .talent-tab {
  257. .title {
  258. font-size: 36rpx;
  259. font-weight: 400;
  260. color: #333333;
  261. }
  262. }
  263. </style>