index.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528
  1. <template>
  2. <div class="page">
  3. <van-list
  4. v-model="isLoadingMore"
  5. :finished="finished"
  6. :immediate-check="false"
  7. :finished-text="total ? '没有更多了' : ''"
  8. @load="onLoadMore"
  9. >
  10. <div class="page-top"></div>
  11. <div class="page-content">
  12. <!-- 搜索区域 -->
  13. <div class="search flex justify-center">
  14. <input
  15. type="text"
  16. placeholder="搜索店铺"
  17. v-model="listQuery.clubName"
  18. @keyup.enter="onSearch"
  19. />
  20. </div>
  21. <!-- 地区筛选 -->
  22. <div class="city">
  23. <LdmCity
  24. @change="onCityChange"
  25. :options="cityList"
  26. labelName="name"
  27. valueName="id"
  28. ></LdmCity>
  29. </div>
  30. <!-- 标题 -->
  31. <div class="title">距你最近...</div>
  32. <!-- 机构列表 -->
  33. <div class="list">
  34. <div
  35. class="section flex items-center"
  36. v-for="item in list"
  37. :key="item.authId"
  38. @click="toDetail(item)"
  39. >
  40. <img class="cover" :src="item.logo || drawLogo(item.clubName)" />
  41. <div class="info">
  42. <div class="name" v-text="item.clubName"></div>
  43. <div class="line"></div>
  44. <div class="mobile">{{ item.mobile || '未知' }}</div>
  45. <div class="address">
  46. {{ formatAddress(item.area, item.address) }}
  47. </div>
  48. <div
  49. class="distance"
  50. v-text="item.distance + 'km'"
  51. v-if="item.distance && item.distance !== 99999"
  52. ></div>
  53. </div>
  54. </div>
  55. </div>
  56. <!-- 列表为空 -->
  57. <LdmEmpty v-if="!total && !isRequest" name="ldm-empty.png"></LdmEmpty>
  58. </div>
  59. </van-list>
  60. </div>
  61. </template>
  62. <script>
  63. import { mapGetters } from 'vuex'
  64. import { loactionSelf } from '@/utils/map-utils'
  65. import { debounce, drawLogo } from '@/utils'
  66. export default {
  67. layout: 'app-ldm',
  68. data() {
  69. return {
  70. isLoadingMore: true,
  71. finished: false,
  72. isRequest: true,
  73. list: [],
  74. listQuery: {
  75. authUserId: '',
  76. lngAndLat: '',
  77. clubName: '',
  78. provinceId: '',
  79. cityId: '',
  80. townId: '',
  81. pageNum: 1,
  82. pageSize: 4,
  83. },
  84. total: 0,
  85. cityList: [],
  86. }
  87. },
  88. computed: {
  89. ...mapGetters(['supplierInfo', 'authUserId']),
  90. emptyList() {
  91. return 3 - (this.list.length % 3)
  92. },
  93. },
  94. mounted() {
  95. this.initData()
  96. this.fetchCityList()
  97. },
  98. methods: {
  99. // 绘制logo的方法
  100. drawLogo,
  101. // 查看详情
  102. toDetail(item) {
  103. localStorage.setItem('clubInfo', JSON.stringify(item))
  104. const authUserId = this.$store.getters.authUserId
  105. this.$router.push(
  106. `/${authUserId}/ldm/approve/club/detail?id=${item.authId}`
  107. )
  108. },
  109. // 初始化页面数据
  110. async initData() {
  111. // 自定义加载图标
  112. this.$toast.loading({
  113. message: '正在获取您附近的机构...',
  114. duration: 0,
  115. })
  116. const locations = localStorage.getItem('zp-locations')
  117. if (!locations) {
  118. // 获取定位信息 百度坐标转高德坐标
  119. try {
  120. const location = await loactionSelf()
  121. const result = await this.$http.api.assistant({
  122. key: '1bcc97330f6cf517e8dd9d5278957e67',
  123. locations: `${location.point.lng},${location.point.lat}`,
  124. coordsys: 'baidu',
  125. output: 'JSON',
  126. })
  127. const res = await result.json()
  128. this.listQuery.lngAndLat = res.locations
  129. localStorage.setItem('zp-locations', res.locations)
  130. } catch (error) {
  131. this.$toast.clear()
  132. this.$toast('获取定位信息失败,请确保您开启的定位权限并保存网络畅通')
  133. this.isRequest = false
  134. }
  135. } else {
  136. this.listQuery.lngAndLat = locations
  137. }
  138. this.listQuery.authUserId = this.authUserId
  139. // 获取机构列表
  140. this.fetchList()
  141. },
  142. // 获取机构列表
  143. fetchList: debounce(async function () {
  144. try {
  145. this.isLoadingMore = true
  146. const res = await this.$http.api.getAuthClubList(this.listQuery)
  147. this.total = res.data.total
  148. this.list = [...this.list, ...res.data.list]
  149. this.finished = !res.data.hasNextPage
  150. this.isLoadingMore = false
  151. this.listQuery.pageNum += 1
  152. } catch (error) {
  153. console.log(error)
  154. } finally {
  155. this.$toast.clear()
  156. this.isRequest = false
  157. }
  158. }, 400),
  159. // 获取地址列表
  160. fetchCityList() {
  161. this.$http.api.fetchAllCityList().then((res) => {
  162. this.cityList = res.data
  163. })
  164. },
  165. // 城市变化
  166. onCityChange(selectValue) {
  167. this.listQuery.provinceId = ''
  168. this.listQuery.cityId = ''
  169. this.listQuery.townId = ''
  170. selectValue.map((item, index) => {
  171. if (index === 0) {
  172. this.listQuery.provinceId = item.id
  173. } else if (index === 1) {
  174. this.listQuery.cityId = item.id
  175. } else {
  176. this.listQuery.townId = item.id
  177. }
  178. })
  179. this.listQuery.pageNum = 1
  180. this.list = []
  181. this.fetchList()
  182. },
  183. // 搜索
  184. onSearch() {
  185. this.listQuery.pageNum = 1
  186. this.list = []
  187. this.fetchList()
  188. },
  189. // 页码变化
  190. onPagiantionChange(index) {},
  191. // 格式化地址
  192. formatAddress(a1, a2) {
  193. let resutl = ''
  194. if (typeof a1 === 'string') {
  195. resutl += a1
  196. }
  197. if (typeof a2 === 'string') {
  198. resutl += a2
  199. }
  200. return resutl || '未知'
  201. },
  202. // 加载更多
  203. onLoadMore() {
  204. if (this.isRequest) return
  205. this.fetchList()
  206. },
  207. },
  208. beforeDestroy() {
  209. this.$toast.clear()
  210. },
  211. }
  212. </script>
  213. <style scoped lang="scss">
  214. @media screen and (min-width: 768px) {
  215. .page-top {
  216. height: 596px;
  217. background: url(https://static.caimei365.com/www/authentic/pc/ldm-bg-club.png)
  218. no-repeat center;
  219. background-size: auto 596px;
  220. }
  221. .page-content {
  222. width: 836px;
  223. margin: 0 auto;
  224. overflow: hidden;
  225. .city {
  226. position: relative;
  227. z-index: 99;
  228. }
  229. .search {
  230. width: 836px;
  231. position: relative;
  232. margin: 69px auto 40px;
  233. input {
  234. display: block;
  235. width: 100%;
  236. height: 56px;
  237. border: 0.1vw solid #000000;
  238. box-sizing: border-box;
  239. padding-left: 80px;
  240. font-size: 24px;
  241. }
  242. &::after {
  243. position: absolute;
  244. left: 33px;
  245. top: 50%;
  246. transform: translateY(-50%);
  247. content: '';
  248. display: block;
  249. width: 37px;
  250. height: 37px;
  251. background: url(https://static.caimei365.com/www/authentic/pc/ldm-icon-search.png)
  252. no-repeat center;
  253. background-size: 37px;
  254. }
  255. }
  256. .title {
  257. text-align: right;
  258. font-size: 22px;
  259. color: #000;
  260. }
  261. .list {
  262. padding-top: 24px;
  263. display: flex;
  264. align-items: center;
  265. justify-content: space-between;
  266. flex-wrap: wrap;
  267. .section {
  268. width: 409px;
  269. background: #f1f1f1;
  270. border-radius: 20px;
  271. padding: 16px;
  272. box-sizing: border-box;
  273. margin-bottom: 20px;
  274. cursor: pointer;
  275. .cover {
  276. width: 92px;
  277. height: 92px;
  278. border-radius: 17px;
  279. }
  280. .info {
  281. position: relative;
  282. width: 263px;
  283. margin-left: 23px;
  284. .name {
  285. width: 200px;
  286. position: relative;
  287. font-size: 15px;
  288. color: #000;
  289. font-weight: bold;
  290. text-overflow: ellipsis;
  291. white-space: nowrap;
  292. overflow: hidden;
  293. padding-left: 20px;
  294. line-height: 20px;
  295. &::after {
  296. content: '';
  297. display: block;
  298. width: 20px;
  299. height: 20px;
  300. position: absolute;
  301. left: 0;
  302. top: 50%;
  303. transform: translateY(-50%);
  304. background-size: 14px 14px;
  305. background-repeat: no-repeat;
  306. background-position: left center;
  307. }
  308. }
  309. .name {
  310. &::after {
  311. background-image: url(https://static.caimei365.com/www/authentic/pc/ldm-icon-store.png);
  312. }
  313. }
  314. .line {
  315. height: 1px;
  316. margin: 14px 0;
  317. background: rgba(0, 0, 0, 0.169);
  318. }
  319. .mobile,
  320. .address {
  321. position: relative;
  322. font-size: 12px;
  323. color: #000000;
  324. padding-left: 20px;
  325. line-height: 20px;
  326. text-overflow: ellipsis;
  327. white-space: nowrap;
  328. overflow: hidden;
  329. &::after {
  330. content: '';
  331. display: block;
  332. width: 20px;
  333. height: 20px;
  334. position: absolute;
  335. left: 0;
  336. top: 50%;
  337. transform: translateY(-50%);
  338. background-size: 14px 14px;
  339. background-repeat: no-repeat;
  340. background-position: left center;
  341. }
  342. }
  343. .mobile {
  344. &::after {
  345. background-image: url(https://static.caimei365.com/www/authentic/pc/ldm-icon-contact.png);
  346. }
  347. }
  348. .address {
  349. &::after {
  350. background-image: url(https://static.caimei365.com/www/authentic/pc/ldm-icon-address.png);
  351. }
  352. }
  353. .distance {
  354. position: absolute;
  355. font-size: 12px;
  356. color: #404040;
  357. top: 0.2vw;
  358. right: 0;
  359. }
  360. }
  361. }
  362. }
  363. }
  364. }
  365. @media screen and (max-width: 768px) {
  366. .page-top {
  367. height: 59.6vw;
  368. background: url(https://static.caimei365.com/www/authentic/h5/ldm-bg-club.png);
  369. background-size: auto 59.6vw;
  370. }
  371. .page-content {
  372. overflow: hidden;
  373. .search {
  374. width: 86vw;
  375. position: relative;
  376. margin: 7.6vw auto 5.6vw;
  377. input {
  378. display: block;
  379. width: 100%;
  380. height: 8vw;
  381. border: 0.1vw solid #000000;
  382. box-sizing: border-box;
  383. padding-left: 10.5vw;
  384. }
  385. &::after {
  386. position: absolute;
  387. left: 2.9vw;
  388. top: 50%;
  389. transform: translateY(-50%);
  390. content: '';
  391. display: block;
  392. width: 5.4vw;
  393. height: 5.4vw;
  394. background: url(https://static.caimei365.com/www/authentic/h5/ldm-icon-search.png)
  395. no-repeat center;
  396. background-size: 5.4vw;
  397. }
  398. }
  399. .title {
  400. text-align: right;
  401. padding-right: 6.6vw;
  402. font-size: 3.5vw;
  403. color: #000;
  404. }
  405. .list {
  406. display: flex;
  407. flex-direction: column;
  408. align-items: center;
  409. .section {
  410. width: 95.1vw;
  411. background: #f1f1f1;
  412. border-radius: 2vw;
  413. padding: 3.2vw;
  414. box-sizing: border-box;
  415. margin-top: 5.7vw;
  416. .cover {
  417. width: 21.5vw;
  418. height: 21.5vw;
  419. border-radius: 1.7vw;
  420. }
  421. .info {
  422. position: relative;
  423. width: 61.3vw;
  424. margin-left: 5.8vw;
  425. .name {
  426. width: 46vw;
  427. position: relative;
  428. font-size: 3.5vw;
  429. color: #000;
  430. font-weight: bold;
  431. text-overflow: ellipsis;
  432. white-space: nowrap;
  433. overflow: hidden;
  434. padding-left: 5vw;
  435. line-height: 5vw;
  436. &::after {
  437. content: '';
  438. display: block;
  439. width: 4vw;
  440. height: 4vw;
  441. position: absolute;
  442. left: 0;
  443. top: 50%;
  444. transform: translateY(-50%);
  445. background-size: 3.6vw 3.6vw;
  446. background-repeat: no-repeat;
  447. }
  448. }
  449. .name {
  450. &::after {
  451. background-image: url(https://static.caimei365.com/www/authentic/h5/ldm-icon-store.png);
  452. }
  453. }
  454. .line {
  455. height: 0.1vw;
  456. margin: 2.8vw 0;
  457. background: rgba(0, 0, 0, 0.169);
  458. }
  459. .mobile,
  460. .address {
  461. position: relative;
  462. font-size: 3vw;
  463. color: #000000;
  464. padding-left: 5vw;
  465. line-height: 5vw;
  466. text-overflow: ellipsis;
  467. white-space: nowrap;
  468. overflow: hidden;
  469. &::after {
  470. content: '';
  471. display: block;
  472. width: 4vw;
  473. height: 4vw;
  474. position: absolute;
  475. left: 0;
  476. top: 50%;
  477. transform: translateY(-50%);
  478. background-size: 3.6vw 3.6vw;
  479. background-repeat: no-repeat;
  480. }
  481. }
  482. .mobile {
  483. &::after {
  484. background-image: url(https://static.caimei365.com/www/authentic/h5/ldm-icon-contact.png);
  485. }
  486. }
  487. .address {
  488. &::after {
  489. background-image: url(https://static.caimei365.com/www/authentic/h5/ldm-icon-address.png);
  490. }
  491. }
  492. .distance {
  493. position: absolute;
  494. font-size: 3vw;
  495. color: #404040;
  496. top: 0.2vw;
  497. right: 0;
  498. }
  499. }
  500. }
  501. }
  502. }
  503. }
  504. </style>