index.vue 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. <template>
  2. <view class="global-search">
  3. <view class="global-search_input">
  4. <image class="image" src="/static/c+unselected.svg" mode="widthFix" />
  5. <view style="flex:1">
  6. <My_search placeholder="搜索全站关键字" @onSearch="onSearch"></My_search>
  7. </view>
  8. </view>
  9. <view class="content">
  10. <view class="type-tabs">
  11. <u-tabs :scrollable="false" lineColor="#C30D23" :activeStyle="{ color: '#C30D23', fontWeight: 'bold' }" :list="types"
  12. @click="changeType" :current="current" />
  13. </view>
  14. <My_listbox ref="List" @getlist="getList" :bottomHeight="70">
  15. <view class="list-box">
  16. <navigator class="item-box" :url="calcUrl(item)"
  17. v-for="item in list" :key="item.sa_fadid"
  18. hover-class="navigator-hover">
  19. <view class="item">
  20. <u--image radius="5" :lazy-load="true" :width="tovw(100)" :height="tovw(100)" :src="calcImage(item)">
  21. <template v-slot:loading>
  22. <u-loading-icon color="red"></u-loading-icon>
  23. </template>
  24. </u--image>
  25. <view class="title">
  26. {{ item.title }}
  27. </view>
  28. </view>
  29. </navigator>
  30. </view>
  31. </My_listbox>
  32. </view>
  33. </view>
  34. </template>
  35. <script>
  36. import { formattedFiles } from '../../utils/settleFiles.js'
  37. export default {
  38. data() {
  39. return {
  40. types: [
  41. {
  42. name:'产品',
  43. value:1,
  44. },
  45. {
  46. name:'效果图',
  47. value:2,
  48. },
  49. {
  50. name:'课件',
  51. value:3,
  52. },
  53. {
  54. name:'资料',
  55. value:4,
  56. }
  57. ],
  58. content: {
  59. "type": 1,
  60. //1:产品:来源单品、案例-电器系统
  61. //2:效果图:来源效果图管理;
  62. //3:课件:来源商学院授权可查看的课程中的课件;
  63. //4:资料:来源装备资源库授权可查看的资料;
  64. "pageNumber": 1,
  65. "pageSize": 12,
  66. "where": {
  67. "condition": ""
  68. }
  69. },
  70. list:[],
  71. current:0,
  72. avatar:''
  73. }
  74. },
  75. methods: {
  76. onSearch (condition) {
  77. this.content.where.condition = condition
  78. this.getList(true)
  79. },
  80. changeType (type) {
  81. this.current = type.index
  82. this.content.type = type.value
  83. this.getList(true)
  84. },
  85. getList(init = false) {
  86. return new Promise((resolve, reject) => {
  87. if (this.paging(this.content, init)) return resolve();
  88. this.$Http.basic({
  89. "id": "20240513085802",
  90. content: this.content
  91. }).then(res => {
  92. this.$refs.List.setHeight()
  93. this.$refs.List.RefreshToComplete()
  94. resolve();
  95. if (this.cutoff(res.msg)) return;
  96. res.data.forEach(item => {
  97. item.attinfos = formattedFiles(item.attinfos)
  98. })
  99. this.list = res.pageNumber == 1 ? res.data : this.list.concat(res.data);
  100. this.content = this.$refs.List.paging(this.content, res)
  101. console.log(this.list,'数据');
  102. })
  103. })
  104. },
  105. },
  106. computed: {
  107. calcUrl () {
  108. return (data) => {
  109. switch (this.current) {
  110. case 0:
  111. return '/packageCase/product/detail?id='+data.sa_fadid
  112. break;
  113. case 1:
  114. return '/packageCase/imgs/detail?id='+data.sat_sharematerialid
  115. break;
  116. case 2:
  117. return '/packageA/course/detail?id='+data.sat_coursewaredetailid
  118. break;
  119. case 3:
  120. return '/packageA/resourceLibrary/detail?id='+data.sat_sharematerialid
  121. break;
  122. default:
  123. break;
  124. }
  125. }
  126. },
  127. calcImage () {
  128. return (data) => {
  129. if (data.attinfos.length) {
  130. if (data.attinfos[0].fileType == 'video') {
  131. return data.attinfos[0].subfiles[0].url
  132. } else if (data.attinfos[0].fileType == 'image') {
  133. return data.attinfos[0].url
  134. } else {
  135. return this.avatar
  136. }
  137. } else {
  138. return this.avatar
  139. }
  140. }
  141. }
  142. },
  143. onLoad () {
  144. uni.setNavigationBarTitle({
  145. title: '全站搜索'
  146. });
  147. },
  148. created() {
  149. this.avatar = uni.getStorageSync("site").logo
  150. this.getList()
  151. },
  152. }
  153. </script>
  154. <style lang="scss">
  155. .global-search {
  156. .global-search_input {
  157. margin: 10px;
  158. display: flex;
  159. align-items: center;
  160. .image{
  161. width: 40px;
  162. height: 20px;
  163. margin-right: 10px;
  164. }
  165. }
  166. .content {
  167. background: #ffffff;
  168. .type-tabs {
  169. margin-bottom: 10px;
  170. }
  171. .list-box {
  172. .item-box{
  173. padding: 0 10px;
  174. .item {
  175. display: flex;
  176. align-items: center;
  177. align-content: center;
  178. border-bottom: 0.5px solid #DDDDDd;
  179. padding: 10px 0;
  180. .image-box {
  181. margin-right: 10px;
  182. width: 100px;
  183. height: 100px;
  184. padding: 18px;
  185. background: #F5F5F5;
  186. .image{
  187. width: 100%;
  188. height: 100%;
  189. }
  190. }
  191. .title{
  192. font-family: PingFang SC, PingFang SC;
  193. font-weight: 400;
  194. font-size: 14px;
  195. color: #333333;
  196. margin-left: 10px;
  197. }
  198. }
  199. }
  200. }
  201. }
  202. }
  203. </style>