details.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456
  1. <template>
  2. <view class="main-content">
  3. <view class="content-box">
  4. <view class="tabs-container">
  5. <Tabs :list="list1" @change="handlTabs" ref="tabRef" />
  6. </view>
  7. <!-- 瀑布流 -->
  8. <view v-if="userType == '1'">
  9. <up-waterfall v-model="flowList" v-if="pages.total >0">
  10. <template #left>
  11. <view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="goToDetail(item)">
  12. <up-lazy-load threshold="-450" border-radius="10" :image="item.volunteerPicture"
  13. :index="index"></up-lazy-load>
  14. <view class="demo-title-container">
  15. <view class="demo-title">
  16. {{ item.businessTierName }}
  17. </view>
  18. </view>
  19. <view class="demo-skillDescribe">
  20. {{item.skillDescribe}}
  21. </view>
  22. <view class="demo-PriceDome">
  23. <view class="demo-price">
  24. <image :src="item.volunteerPicture" class="name-image"></image>
  25. <text class="name-text">{{ item.name }}</text>
  26. </view>
  27. <view class="demo-price">
  28. <image src="/static/img/1x.png" class="image-1x"></image>
  29. <text class="name-textNumber">1w</text>
  30. </view>
  31. </view>
  32. </view>
  33. </template>
  34. <template #right>
  35. <view class="demo-warter" v-for="(item, index) in rightList" :key="index" @click="goToDetail(item)">
  36. <up-lazy-load threshold="-450" border-radius="10" :image="item.volunteerPicture"
  37. :index="index"></up-lazy-load>
  38. <view class="demo-title-container">
  39. <view class="demo-title">
  40. {{ item.businessTierName }}
  41. </view>
  42. </view>
  43. <view class="demo-skillDescribe">
  44. {{item.skillDescribe}}
  45. </view>
  46. <view class="demo-PriceDome">
  47. <view class="demo-price">
  48. <image :src="item.volunteerPicture" class="name-image"></image>
  49. <text class="name-text">{{ item.name }}</text>
  50. </view>
  51. <view class="demo-price">
  52. <image src="/static/img/1x.png" class="image-1x"></image>
  53. <text class="name-textNumber">1w</text>
  54. </view>
  55. </view>
  56. </view>
  57. </template>
  58. </up-waterfall>
  59. <view v-else>
  60. <NoneView />
  61. </view>
  62. </view>
  63. <up-loadmore style="margin-top: 40rpx;" :status="loadmoreInfo.status" :loadmoreText="loadmoreInfo.loadingText"
  64. :loadingText="loadmoreInfo.loadmoreText" :nomoreText="loadmoreInfo.nomoreText" @loadmore="handleLoadmore"
  65. v-if="userType == 1 && pages.total >0" />
  66. </view>
  67. </view>
  68. </template>
  69. <script setup>
  70. import {
  71. ref,
  72. onMounted,
  73. reactive,
  74. } from 'vue';
  75. import {
  76. onLoad,
  77. onReachBottom
  78. } from "@dcloudio/uni-app";
  79. import {
  80. volunteerinfolist
  81. } from "@/api/volunteerDetailsApi/details.js"
  82. import store from '@/store'
  83. import Tabs from "@/pages_home/components/tabs/index.vue"
  84. import NoneView from '@/components/NoneView/index.vue'
  85. const list1 = ref([])
  86. const list2 = ref([])
  87. const flowList = ref([]); //list数据
  88. const rightList = ref([])
  89. const currentTabs2 = ref(0)
  90. const serviceCategory = ref('')
  91. const leftList = ref([])
  92. const showDropdown = ref(false)
  93. const tabRef = ref(null)
  94. const businessManagementId = ref(null)
  95. const data = reactive({
  96. address: store.state.user.addressInfo,
  97. })
  98. const userType = uni.getStorageSync('userType') //读取本地存储
  99. function handlTabs(record) {
  100. clearList();
  101. serviceCategory.value = record.parentId;
  102. businessManagementId.value = record.id;
  103. // 重置分页状态
  104. pages.value.current = 1;
  105. pages.value.total = 0;
  106. loadmoreInfo.value.status = 'loadmore';
  107. getList();
  108. }
  109. const goToDetail = async (item) => {
  110. const params = {
  111. volunteerId: item.volunteerId, // 获取 volunteerId
  112. serviceCategory: item.serviceCategory, // 获取 serviceCategory
  113. businessManagementId: item.businessManagementId, //获取 businessManagementId
  114. };
  115. uni.navigateTo({
  116. url: `/pages_home/pages/Volunteerside/goodsDetails?params=${JSON.stringify(params)}`
  117. });
  118. }
  119. onLoad((options) => {
  120. const dataList = JSON.parse(decodeURIComponent(options.dataList));
  121. serviceCategory.value = options.serviceCategory
  122. list1.value = dataList
  123. list2.value = dataList[0].children
  124. // 新增:动态设置顶部标题
  125. if (options.title) {
  126. uni.setNavigationBarTitle({ title: decodeURIComponent(options.title) });
  127. }
  128. })
  129. // 分页
  130. const pages = ref({
  131. current: 1,
  132. pageSize: 10,
  133. total: 0
  134. })
  135. const loadmoreInfo = ref({
  136. status: 'loadmore',
  137. loadingText: '努力加载中...',
  138. loadmoreText: '点击加载更多~',
  139. nomoreText: '已经到底啦~'
  140. })
  141. // 加载更多
  142. async function handleLoadmore(e) {
  143. if (pages.value.current < Math.ceil(pages.value.total / pages.value.pageSize)) {
  144. pages.value.current += 1;
  145. loadmoreInfo.value.status = 'loading';
  146. await getList();
  147. } else {
  148. loadmoreInfo.value.status = 'nomore';
  149. }
  150. }
  151. const getList = async () => {
  152. try {
  153. loadmoreInfo.value.status = 'loading';
  154. // 检查 businessManagementId 是否存在
  155. if (!businessManagementId.value) {
  156. console.log('No businessManagementId selected');
  157. return;
  158. }
  159. const { address } = data
  160. const { cityCode, latitude, longitude } = address
  161. console.log('volunteerinfolist ==>',address);
  162. // 请求时传递分页参数
  163. const res = await volunteerinfolist({
  164. pageNum: pages.value.current, // 当前页码
  165. pageSize: pages.value.pageSize, // 每页大小
  166. businessManagementId: businessManagementId.value,
  167. provinceName: cityCode.data[0], // 省
  168. provinceCode: cityCode.code[0],
  169. cityName: cityCode.data[1], // 市
  170. cityCode: cityCode.code[1],
  171. districtName: cityCode.data[2],
  172. districtCode: cityCode.code[2],
  173. latitude,
  174. longitude,
  175. });
  176. if (!res || !res.rows) {
  177. return;
  178. }
  179. // 如果是第一页,先清空
  180. if (pages.value.current === 1) {
  181. leftList.value = [];
  182. rightList.value = [];
  183. }
  184. // 将数据分成左右两列
  185. res.rows.forEach((item, index) => {
  186. index % 2 !== 0 ? rightList.value.push(item) : leftList.value.push(item);
  187. });
  188. pages.value.total = res.total;
  189. // 判断是否已经到了最后一页
  190. if (pages.value.current >= Math.ceil(res.total / pages.value.pageSize)) {
  191. loadmoreInfo.value.status = 'nomore';
  192. } else {
  193. loadmoreInfo.value.status = 'loadmore';
  194. }
  195. } catch (error) {
  196. clearList();
  197. console.error('Error fetching data:', error);
  198. }
  199. };
  200. const clearList = () => {
  201. leftList.value = [];
  202. rightList.value = [];
  203. loadmoreInfo.value.status = 'loadmore';
  204. pages.value.total = 0;
  205. }
  206. onReachBottom(() => {
  207. if (pages.value.current < Math.ceil(pages.value.total / pages.value.pageSize)) {
  208. pages.value.current += 1;
  209. loadmoreInfo.value.status = 'loading';
  210. getList();
  211. }
  212. })
  213. onMounted(() => {
  214. // 如果有默认选中的 tab,则初始化数据
  215. if (list1.value.length > 0) {
  216. const defaultTab = list1.value[0];
  217. businessManagementId.value = defaultTab.id;
  218. getList();
  219. }
  220. })
  221. </script>
  222. <style scoped lang="scss">
  223. .main-content {
  224. width: 100%;
  225. height: 100vh;
  226. background: #fff;
  227. }
  228. .content-box {
  229. width: 100%;
  230. height: 100%;
  231. padding-bottom: 40rpx;
  232. }
  233. .Wrapper {
  234. display: flex;
  235. align-items: center;
  236. gap: 10rpx;
  237. }
  238. .Wrapper-img {
  239. width: 50rpx;
  240. height: 50rpx;
  241. margin-left: 10rpx;
  242. }
  243. .Wrapper-content {
  244. color: rgba(16, 16, 16, 1);
  245. font-size: 25rpx;
  246. font-family: PingFangSC-regular;
  247. line-height: 20rpx;
  248. }
  249. /* 外层容器 */
  250. .tabs-container {
  251. width: 100%;
  252. background: #fff;
  253. padding: 10px 0;
  254. }
  255. /* Flex 布局容器 */
  256. .tabs-wrapper {
  257. display: flex;
  258. align-items: center;
  259. position: relative;
  260. }
  261. /* 可横向滚动的 scroll-view */
  262. .tabs-scroll {
  263. flex: 1;
  264. /* 占据剩余空间 */
  265. overflow-x: auto;
  266. /* 允许横向滚动 */
  267. white-space: nowrap;
  268. /* 禁止换行 */
  269. -webkit-overflow-scrolling: touch;
  270. /* iOS 平滑滚动 */
  271. }
  272. /* 隐藏滚动条(可选) */
  273. .tabs-scroll::-webkit-scrollbar {
  274. display: none;
  275. }
  276. /* 固定图标(始终显示在右侧) */
  277. .fixed-icon {
  278. width: 30px;
  279. height: 30px;
  280. margin-left: 10px;
  281. /* 与 tabs 的间距 */
  282. flex-shrink: 0;
  283. /* 禁止压缩 */
  284. }
  285. .demo-warter {
  286. border-radius: 8px;
  287. margin: 5px;
  288. background-color: #ffffff;
  289. }
  290. .u-close {
  291. position: absolute;
  292. top: 32rpx;
  293. right: 32rpx;
  294. }
  295. .demo-image {
  296. width: 100%;
  297. border-radius: 4px;
  298. }
  299. .demo-title-container {
  300. display: flex;
  301. flex-direction: column;
  302. justify-content: center;
  303. align-items: center;
  304. padding: 4rpx 12rpx;
  305. /* z-index: 0; */
  306. margin-top: 10rpx;
  307. border-radius: 10rpx;
  308. box-sizing: border-box;
  309. border: 1rpx solid rgba(237, 93, 49, 0.8);
  310. }
  311. .demo-title {
  312. font-size: 22rpx;
  313. color: #ED5D31;
  314. display: -webkit-box;
  315. -webkit-box-orient: vertical;
  316. -webkit-line-clamp: 3;
  317. overflow: hidden;
  318. text-overflow: ellipsis;
  319. word-break: break-all;
  320. }
  321. .demo-skillDescribe {
  322. width: 298rpx;
  323. font-family: PingFang SC;
  324. font-size: 26rpx;
  325. font-weight: 500;
  326. line-height: 36rpx;
  327. letter-spacing: normal;
  328. color: #141414;
  329. margin-top: 5px;
  330. display: -webkit-box;
  331. -webkit-box-orient: vertical;
  332. -webkit-line-clamp: 2;
  333. overflow: hidden;
  334. text-overflow: ellipsis;
  335. word-break: break-all;
  336. }
  337. .demo-img {
  338. width: 40rpx;
  339. height: 40rpx;
  340. border-radius: 50%;
  341. }
  342. .demo-PriceDome {
  343. display: flex;
  344. justify-content: space-between;
  345. align-items: center;
  346. width: 100%;
  347. margin-top: 15rpx;
  348. }
  349. .demo-price {
  350. display: flex;
  351. align-items: center;
  352. overflow: hidden;
  353. /* 防止内容溢出 */
  354. }
  355. .image-1x {
  356. width: 20rpx;
  357. height: 20rpx;
  358. z-index: 0;
  359. }
  360. .name-textNumber {
  361. font-size: 22rpx;
  362. font-weight: normal;
  363. line-height: 24rpx;
  364. text-align: right;
  365. letter-spacing: -0.04em;
  366. color: #FF6E51;
  367. }
  368. .name-text {
  369. width: 117rpx;
  370. height: 34rpx;
  371. font-family: PingFang SC;
  372. font-size: 24rpx;
  373. font-weight: normal;
  374. line-height: 34rpx;
  375. letter-spacing: -0.04em;
  376. color: rgba(0, 0, 0, 0.8);
  377. }
  378. .name-image {
  379. width: 40rpx;
  380. height: 40rpx;
  381. margin-right: 10rpx;
  382. border-radius: 50%;
  383. }
  384. .name-text {
  385. white-space: nowrap;
  386. /* 禁止换行 */
  387. overflow: hidden;
  388. /* 超出部分隐藏 */
  389. text-overflow: ellipsis;
  390. /* 显示省略号 */
  391. max-width: 120rpx;
  392. /* 6个中文字符大约占120rpx */
  393. }
  394. </style>