details.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411
  1. <template>
  2. <view style="padding-top: 20rpx; width: 100vw; height: 100vh; overflow: hidden">
  3. <view style="width: 100%; height: 100%; overflow:scroll">
  4. <view class="Wrapper">
  5. <image src="/static/img/Location.png" class="Wrapper-img" />
  6. <span class="Wrapper-content">重庆</span>
  7. <vie class="input-container">
  8. <up-input v-model="value" @click.native="goToDetail" placeholder="请输入内容" prefixIcon="search"
  9. :customStyle="inputStyle"></up-input>
  10. </vie>
  11. </view>
  12. <view class="tabs-container">
  13. <view class="tabs-wrapper">
  14. <!-- 可滑动的 tabs 区域 -->
  15. <scroll-view scroll-x class="tabs-scroll">
  16. <up-tabs :list="list1" @change="handlTabs" keyName="businessName"
  17. class="tabs-content"></up-tabs>
  18. </scroll-view>
  19. <!-- 固定不动的图标 -->
  20. <image ref="iconRef" src="/static/img/分类or广场or其他.png" class="fixed-icon" @click="toggleDropdown" />
  21. </view>
  22. <view v-if="showDropdown" class="custom-dropdown">
  23. <up-tabs :list="list2" @change="clickList2" class="tabs-content" :current="currentTabs2"
  24. keyName="businessName" />
  25. <!-- <up-tabs :list="list3" @click="click" class="tabs-content" keyName="businessName" /> -->
  26. </view>
  27. </view>
  28. <!-- 瀑布流 -->
  29. <view v-if="userType == '1'">
  30. <up-waterfall v-model="flowList">
  31. <template #left>
  32. <view class="demo-warter" v-for="(item, index) in leftList" :key="index"
  33. @click="goToDetail(item)">
  34. <up-lazy-load threshold="-450" border-radius="10" :image="item.volunteerPicture"
  35. :index="index"></up-lazy-load>
  36. <view class="demo-title">
  37. {{item.businessTierName}}
  38. </view>
  39. <view class="demo-skillDescribe">
  40. {{item.skillDescribe}}
  41. </view>
  42. <view class="demo-PriceDome">
  43. <view class="demo-price">
  44. <image :src="item.volunteerPicture" class="name-image"></image>
  45. {{item.name}}
  46. </view>
  47. </view>
  48. </view>
  49. </template>
  50. <template #right>
  51. <view class="demo-warter" v-for="(item, index) in rightList" :key="index"
  52. @click="goToDetail(item)">
  53. <up-lazy-load threshold="-450" border-radius="10" :image="item.volunteerPicture"
  54. :index="index"></up-lazy-load>
  55. <view class="demo-title">
  56. {{item.businessTierName}}
  57. </view>
  58. <view class="demo-skillDescribe">
  59. {{item.skillDescribe}}
  60. </view>
  61. <view class="demo-PriceDome">
  62. <view class="demo-price">
  63. <image :src="item.volunteerPicture" class="name-image"></image>
  64. {{item.name}}
  65. </view>
  66. </view>
  67. </view>
  68. </template>
  69. </up-waterfall>
  70. </view>
  71. <up-loadmore style="margin-top: 40rpx;" :status="loadmoreInfo.status"
  72. :loadmoreText="loadmoreInfo.loadingText" :loadingText="loadmoreInfo.loadmoreText"
  73. :nomoreText="loadmoreInfo.nomoreText" @loadmore="handleLoadmore" v-if="userType == 1" />
  74. </view>
  75. </view>
  76. </template>
  77. <script setup>
  78. import {
  79. ref,
  80. onMounted,
  81. reactive,
  82. nextTick
  83. } from 'vue';
  84. import {
  85. onLoad,
  86. onShow,
  87. onReachBottom
  88. } from "@dcloudio/uni-app";
  89. import {
  90. typeOptionSelect,
  91. volunteerInfoList,
  92. getDetailsvolunteerId,
  93. dictListlrRstudy,
  94. dictListlrData,
  95. volunteerSeachgetTreeList,
  96. volunteerinfolist
  97. } from "@/api/volunteerDetailsApi/details.js"
  98. const value1 = ref(1)
  99. const value2 = ref(2)
  100. const list1 = ref([])
  101. const list2 = ref([])
  102. const flowList = ref([]); //list数据
  103. const listData = ref([])
  104. const rightList = ref([])
  105. const currentTabs2 = ref(0)
  106. const total = ref(0)
  107. const serviceCategory = ref('')
  108. const leftList = ref([])
  109. const showDropdown = ref(false)
  110. const defaultTab = ref({
  111. dictValue: 1
  112. });
  113. const userType = uni.getStorageSync('userType') //读取本地存储
  114. // 用户/志愿者 识别标识
  115. const userOrWorker = uni.getStorageSync('storage_data').vuex_userOrWorker //读取本地存储
  116. function handlTabs(item, index) {
  117. currentTabs2.value = 0
  118. list2.value = item.children
  119. }
  120. function clickList2(item, index) {
  121. currentTabs2.value = index
  122. }
  123. function toggleDropdown() {
  124. showDropdown.value = !showDropdown.value
  125. }
  126. const goToDetail = async (item) => {
  127. const params = {
  128. volunteerId: item.volunteerId, // 获取 volunteerId
  129. serviceCategory: item.serviceCategory, // 获取 serviceCategory
  130. businessManagementId: item.businessManagementId, //获取 businessManagementId
  131. };
  132. uni.navigateTo({
  133. url: `/pages_home/pages/Volunteerside/goodsDetails?params=${JSON.stringify(params)}`
  134. });
  135. }
  136. const inputStyle = { //input輸入框樣式設置
  137. borderRadius: '140rpx',
  138. border: '1rpx solid #ccc',
  139. height: '70rpx',
  140. paddingLeft: '30rpx',
  141. width: '600rpx',
  142. }
  143. onLoad((options) => {
  144. const dataList = JSON.parse(decodeURIComponent(options.dataList));
  145. list1.value = dataList
  146. list2.value = dataList[0].children
  147. })
  148. // 分页
  149. const pages = ref({
  150. current: 1,
  151. pageSize: 10,
  152. total: 0
  153. })
  154. const loadmoreInfo = ref({
  155. status: 'loadmore',
  156. loadingText: '努力加载中...',
  157. loadmoreText: '点击加载更多~',
  158. nomoreText: '已经到底啦~'
  159. })
  160. // 加载更多
  161. async function handleLoadmore(e) {
  162. if (pages.value.current < Math.ceil(pages.value.total / pages.value.pageSize)) {
  163. pages.value.current += 1;
  164. loadmoreInfo.value.status = 'loading';
  165. await getList();
  166. } else {
  167. loadmoreInfo.value.status = 'nomore';
  168. }
  169. }
  170. // const getListAdderss = async () => {
  171. // const res = await volunteerDataList()
  172. // console.log(res, 'volunteerDataList>>>>>>>>>>')
  173. // }
  174. const getList = async () => {
  175. try {
  176. loadmoreInfo.value.status = 'loading';
  177. // 请求时传递分页参数
  178. const res = await volunteerinfolist({
  179. pageNum: pages.value.current, // 当前页码
  180. pageSize: pages.value.pageSize, // 每页大小
  181. serviceCategory: serviceCategory.value
  182. });
  183. console.log(res, '>>>>>>>res');
  184. if (!res || !res.rows) {
  185. return;
  186. }
  187. // 判断是否已经到了最后一页
  188. if (pages.value.current >= Math.ceil(res.total / pages.value.pageSize)) {
  189. loadmoreInfo.value.status = 'nomore';
  190. } else {
  191. loadmoreInfo.value.status = 'loadmore';
  192. }
  193. // 将数据分成左右两列
  194. res.rows.forEach((item, index) => {
  195. index % 2 !== 0 ? leftList.value.push(item) : rightList.value.push(item);
  196. });
  197. pages.value.total = res.total;
  198. } catch (error) {
  199. leftList.value = [];
  200. rightList.value = [];
  201. loadmoreInfo.value.status = 'loadmore';
  202. pages.value.total = 0;
  203. console.error('Error fetching data:', error);
  204. }
  205. };
  206. onReachBottom(() => {
  207. if (loadmoreInfo.value.status !== 'nomore') { // 更宽松的条件
  208. loadmoreInfo.value.status = 'loading';
  209. pages.value.current += 1;
  210. getList();
  211. }
  212. })
  213. onMounted(() => {
  214. getList()
  215. })
  216. </script>
  217. <style scoped>
  218. .Wrapper {
  219. display: flex;
  220. align-items: center;
  221. gap: 10rpx;
  222. }
  223. .Wrapper-img {
  224. width: 50rpx;
  225. height: 50rpx;
  226. margin-left: 10rpx;
  227. }
  228. .Wrapper-content {
  229. color: rgba(16, 16, 16, 1);
  230. font-size: 25rpx;
  231. font-family: PingFangSC-regular;
  232. line-height: 20rpx;
  233. }
  234. /* 外层容器 */
  235. .tabs-container {
  236. width: 100%;
  237. background: #fff;
  238. padding: 10px 0;
  239. }
  240. /* Flex 布局容器 */
  241. .tabs-wrapper {
  242. display: flex;
  243. align-items: center;
  244. position: relative;
  245. }
  246. /* 可横向滚动的 scroll-view */
  247. .tabs-scroll {
  248. flex: 1;
  249. /* 占据剩余空间 */
  250. overflow-x: auto;
  251. /* 允许横向滚动 */
  252. white-space: nowrap;
  253. /* 禁止换行 */
  254. -webkit-overflow-scrolling: touch;
  255. /* iOS 平滑滚动 */
  256. }
  257. /* 隐藏滚动条(可选) */
  258. .tabs-scroll::-webkit-scrollbar {
  259. display: none;
  260. }
  261. /* 固定图标(始终显示在右侧) */
  262. .fixed-icon {
  263. width: 30px;
  264. height: 30px;
  265. margin-left: 10px;
  266. /* 与 tabs 的间距 */
  267. flex-shrink: 0;
  268. /* 禁止压缩 */
  269. }
  270. .demo-warter {
  271. border-radius: 8px;
  272. margin: 5px;
  273. background-color: #ffffff;
  274. padding: 5px;
  275. }
  276. .u-close {
  277. position: absolute;
  278. top: 32rpx;
  279. right: 32rpx;
  280. }
  281. .demo-image {
  282. width: 100%;
  283. border-radius: 4px;
  284. }
  285. .demo-title {
  286. font-size: 25rpx;
  287. margin-top: 5px;
  288. color: #ccc;
  289. /* margin-left: 15rpx; */
  290. display: -webkit-box;
  291. -webkit-box-orient: vertical;
  292. -webkit-line-clamp: 3;
  293. overflow: hidden;
  294. text-overflow: ellipsis;
  295. word-break: break-all;
  296. }
  297. .demo-skillDescribe {
  298. font-size: 30rpx;
  299. margin-top: 5px;
  300. color: black;
  301. /* margin-left: 15rpx; */
  302. display: -webkit-box;
  303. -webkit-box-orient: vertical;
  304. -webkit-line-clamp: 3;
  305. overflow: hidden;
  306. text-overflow: ellipsis;
  307. word-break: break-all;
  308. }
  309. .demo-img {
  310. width: 40rpx;
  311. height: 40rpx;
  312. border-radius: 50%;
  313. }
  314. .demo-PriceDome {
  315. display: flex;
  316. justify-content: space-between;
  317. align-items: center;
  318. width: 100%;
  319. margin-top: 15rpx;
  320. }
  321. .demo-price {
  322. display: flex;
  323. align-items: center;
  324. flex: 1;
  325. overflow: hidden;
  326. /* 防止内容溢出 */
  327. }
  328. .name-image {
  329. width: 40rpx;
  330. height: 40rpx;
  331. margin-right: 10rpx;
  332. border-radius: 50%;
  333. }
  334. .name-text {
  335. white-space: nowrap;
  336. /* 禁止换行 */
  337. overflow: hidden;
  338. /* 超出部分隐藏 */
  339. text-overflow: ellipsis;
  340. /* 显示省略号 */
  341. max-width: 120rpx;
  342. /* 6个中文字符大约占120rpx */
  343. }
  344. </style>