chat.vue 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
  1. <template>
  2. <view class="container">
  3. <view class="search-box">
  4. <u-search
  5. v-model="searchForm.keyword"
  6. :clearabled="true"
  7. bg-color="#E5E5E5"
  8. :input-style="searchInputStyle"
  9. placeholder="请输入搜索内容"
  10. @search="onSearchConfirm"
  11. @custom="onSearchConfirm"
  12. @clear="onSearchClear"
  13. ></u-search>
  14. </view>
  15. <u-empty
  16. mode="data"
  17. v-if="list.length === 0"
  18. iconSize="120"
  19. textSize="58"
  20. text="暂无数据"
  21. >
  22. </u-empty>
  23. <view class="list-box">
  24. <view class="list-item-box" v-for="(item, index) in list" :key="item.id" @click="onChatClick(item, index)">
  25. <view class="main-box">
  26. <view class="content-box">
  27. <view class="title">
  28. {{item.title}}
  29. </view>
  30. <view class="text">
  31. {{item.content}}
  32. </view>
  33. <view class="tag" v-show="!item.read"></view>
  34. </view>
  35. <view class="other-box">
  36. <view class="date">
  37. {{item.createTime}}
  38. </view>
  39. </view>
  40. </view>
  41. <view class="line-box"></view>
  42. </view>
  43. </view>
  44. <uni-load-more v-show="visualLoadMore" :status="loadMoreStatus"></uni-load-more>
  45. <!-- 与包裹页面所有内容的元素u-page同级,且在它的下方 -->
  46. <u-tabbar v-model="tabbarCurrentIndex" :list="tabbarList" icon-size="50" :active-color="tabbarActiveColor" :inactive-color="tabbarInactiveColor"></u-tabbar>
  47. </view>
  48. </template>
  49. <script setup>
  50. import { ref, computed } from 'vue'
  51. import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
  52. import { query, count } from '@/api/chat.js'
  53. import { useTabbarStore } from '@/store/tabbarStore.js'
  54. const tabbarStore = useTabbarStore()
  55. // 底部导航栏数据
  56. const tabbarList = computed(() => {
  57. return tabbarStore.list
  58. })
  59. // 底部导航栏选中颜色
  60. const tabbarActiveColor = computed(() => {
  61. return tabbarStore.activeColor
  62. })
  63. // 底部导航栏未选中颜色
  64. const tabbarInactiveColor = computed(() => {
  65. return tabbarStore.inactiveColor
  66. })
  67. const tabbarCurrentIndex = 1
  68. const uToast = ref()
  69. const searchInputStyle = {
  70. backgroundColor: '#E5E5E5'
  71. }
  72. const pageNum = ref(1)
  73. const pageSize = ref(10)
  74. const visualLoadMore = ref(false)
  75. const loadMoreStatus = ref('more')
  76. const searchForm = ref({
  77. keyword: '',
  78. pageNumber: 1,
  79. pageSize: 10
  80. })
  81. const list = ref([])
  82. function onSearchConfirm() {
  83. searchForm.value.pageNumber = 1
  84. pageNum.value = 1
  85. onSearch()
  86. }
  87. function onSearchClear() {
  88. searchForm.value.keyword = null
  89. searchForm.value.pageNumber = 1
  90. pageNum.value = 1
  91. onSearch()
  92. }
  93. function onSearch() {
  94. loadMoreStatus.value = 'more'
  95. query(searchForm.value).then(res => {
  96. if (res && res.message === 'success') {
  97. list.value = res.data
  98. if (res.count === 0) {
  99. visualLoadMore.value = false
  100. }
  101. }
  102. })
  103. }
  104. function onChatClick(chat, index) {
  105. list.value[index].read = true
  106. tabbarStore.setMessageCountRead()
  107. uni.navigateTo({
  108. url: `/pages/chatDetail/chatDetail?id=${chat.id}&title=${chat.title}`
  109. })
  110. }
  111. onPullDownRefresh((e) => {
  112. searchForm.value.pageNumber = 1
  113. loadMoreStatus.value = 'more'
  114. query(searchForm.value).then(res => {
  115. if (res && res.message === 'success') {
  116. list.value = res.data
  117. if (res.count === 0) {
  118. visualLoadMore.value = false
  119. }
  120. uni.showToast({
  121. title: '刷新成功',
  122. icon: 'success',
  123. duration: 2000
  124. })
  125. }
  126. uni.stopPullDownRefresh()
  127. })
  128. })
  129. onReachBottom(async () => {
  130. if (loadMoreStatus.value === 'noMore') {
  131. uni.showToast({
  132. title: '没有更多啦>﹏<',
  133. icon: 'none'
  134. })
  135. return
  136. }
  137. visualLoadMore.value = true
  138. loadMoreStatus.value = 'loading'
  139. searchForm.value.pageNum++
  140. query(searchForm.value).then(res => {
  141. if (res && res.message === 'success') {
  142. if (res.data) {
  143. if (res.count >= list.value.length) {
  144. if (list.value.length === res.count) {
  145. loadMoreStatus.value = 'noMore'
  146. visualLoadMore.value = true
  147. } else {
  148. list.value.push(...res.data)
  149. loadMoreStatus.value = 'more'
  150. visualLoadMore.value = false
  151. }
  152. } else {
  153. loadMoreStatus.value = 'noMore'
  154. visualLoadMore.value = true
  155. }
  156. } else {
  157. loadMoreStatus.value = 'noMore'
  158. visualLoadMore.value = true
  159. }
  160. }
  161. })
  162. })
  163. onLoad(() => {
  164. onSearch()
  165. count().then(res => {
  166. if (res && res.message === 'success') {
  167. tabbarStore.setMessageCount(res.data.amount)
  168. uni.setTabBarBadge({ //显示数字
  169. index: 1, //tabbar下标
  170. text: `${res.data.amount}` ?? '0' //数字
  171. })
  172. }
  173. })
  174. })
  175. </script>
  176. <style lang="scss" scoped>
  177. .container {
  178. height: 100vh;
  179. width: 100vw;
  180. background-color: $uni-bg-color;
  181. padding: 0 20rpx;
  182. .search-box {
  183. margin-bottom: 20rpx;
  184. @include topMagnet();
  185. ::v-deep(.u-search) {
  186. background-color: #e5e5e5;
  187. border-radius: 50rpx;
  188. .u-action {
  189. width: 18%;
  190. background-color: $uni-color-primary;
  191. border-radius: 50rpx;
  192. color: $uni-text-color-inverse;
  193. margin-right: 8rpx;
  194. font-size: 28rpx;
  195. line-height: 50rpx;
  196. letter-spacing: 3rpx;
  197. text-align: center;
  198. }
  199. }
  200. }
  201. .list-box {
  202. padding: 0 20rpx;
  203. .list-item-box {
  204. .main-box {
  205. display: flex;
  206. justify-content: space-between;
  207. align-items: center;
  208. padding: 30rpx 0;
  209. &:active {
  210. background-color: $uni-bg-color-hover;
  211. }
  212. // .icon-box {
  213. // width: 15%;
  214. // display: flex;
  215. // justify-content: center;
  216. // align-items: center;
  217. // position: relative;
  218. // .icon {
  219. // width: 70rpx;
  220. // height: 70rpx;
  221. // }
  222. // .tag {
  223. // position: absolute;
  224. // right: 5rpx;
  225. // top: -3rpx;
  226. // width: 15rpx;
  227. // height: 15rpx;
  228. // background-color: $uni-color-error;
  229. // border-radius: 50%;
  230. // }
  231. // }
  232. .content-box {
  233. width: 85%;
  234. display: flex;
  235. flex-direction: column;
  236. justify-content: space-around;
  237. gap: 10rpx;
  238. position: relative;
  239. .title {
  240. height: calc(70% - 5rpx);
  241. font-size: $uni-title-font-size-2;
  242. font-weight: bold;
  243. }
  244. .text {
  245. height: calc(30% - 5rpx);
  246. font-size: $uni-font-size-2;
  247. color: $uni-text-color-grey;
  248. @include text-overflow();
  249. }
  250. .tag {
  251. position: absolute;
  252. left: -14rpx;
  253. top: -3rpx;
  254. width: 15rpx;
  255. height: 15rpx;
  256. background-color: $uni-color-error;
  257. border-radius: 50%;
  258. }
  259. }
  260. .other-box {
  261. width: 15%;
  262. display: flex;
  263. flex-direction: column;
  264. justify-content: flex-end;
  265. align-items: center;
  266. gap: 10rpx;
  267. .date {
  268. font-size: $uni-font-size-2;
  269. color: $uni-text-color-grey;
  270. }
  271. }
  272. }
  273. .line-box {
  274. height: 1rpx;
  275. width: 80%;
  276. background-color: #E5E5E5;
  277. margin: 0 auto;
  278. }
  279. }
  280. }
  281. }
  282. </style>