index.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646
  1. <template>
  2. <view class="container" :style="{backgroundColor: `${backgroundColor}`}">
  3. <u-navbar :is-back="false" title="" :style="{backgroundColor: `${backgroundColor}`}" :border-bottom="false">
  4. <view class="slot-wrap">
  5. <image :src="`${FILE_URL}/login-icon.png`"
  6. mode="aspectFit" style="width: 300rpx;"></image>
  7. </view>
  8. </u-navbar>
  9. <view class="page-content">
  10. <swiper class="swiper" circular indicator-dots style="border-radius: 20rpx;overflow: hidden;height: 200px">
  11. <swiper-item v-for="(data, index) in swiperList" style="width: 100%;height: 100%;" :key="index">
  12. <view class="swiper-item" style="width: 100%;height: 100%;" @click="itemClick(data)">
  13. <image :src="data.imgUrl" mode="aspectFill" style="width: 100%;height: 100%;"></image>
  14. </view>
  15. </swiper-item>
  16. </swiper>
  17. <u-grid :col="4" :border="false" style="margin: 10rpx 0 ;">
  18. <template v-for="(item,index) in navList" :key="index">
  19. <u-grid-item bg-color="none" @click="jumpToPage(item)" class="menu-item">
  20. <i :class="['iconfont', `${item.icon}`]" :style="{ color: `${tabbarActiveColor}` }"></i>
  21. <view class="grid-text">{{item.title}}</view>
  22. </u-grid-item>
  23. </template>
  24. </u-grid>
  25. <u-card padding="20" margin="0rpx 0rpx 30rpx" border-radius="20"
  26. box-shadow="0px 2px 5px rgba(0, 0, 0, 0.1)">
  27. <template v-slot:head>
  28. <u-section title="课程预告" sub-title="查看更多" sub-color="#000000" @click="toPage('/pages/goOnEdu/index')"></u-section>
  29. </template>
  30. <template v-slot:body>
  31. <lg-swiper v-if="courseList.length!=0"
  32. :sildeItems="courseList"
  33. @swiperClick="swiperClick"
  34. image="courseImg" title="courseName"></lg-swiper>
  35. <u-empty text="暂无内容" mode="data" v-else></u-empty>
  36. </template>
  37. </u-card>
  38. <u-card padding="30" margin="0rpx 0rpx 30rpx" border-radius="20"
  39. box-shadow="0px 2px 5px rgba(0, 0, 0, 0.1)">
  40. <template v-slot:head>
  41. <u-section title="研究报告" sub-title="查看更多" sub-color="#000000" @click="toPage('/pages/researchReport/reportHome/reportHome')"></u-section>
  42. </template>
  43. <template v-slot:body>
  44. <view v-if="reportList.length!=0">
  45. <view v-for="(data,index) in reportList" :key="index" class="u-body-item u-flex u-p-t-0 "
  46. style="align-items: inherit;" @click="toReport(data.id, data.title)">
  47. <image :src="data.imgUrl" mode="aspectFill"></image>
  48. <view class="u-body-item-content">
  49. <view class="item-content">
  50. <text class="item-content-title text-ellipsis">{{data.title}}</text>
  51. <text class="item-content-type">{{data.type}}</text>
  52. </view>
  53. <view class="item-button">
  54. <view v-if="data.viewMode==='1'" class="func-box" style="justify-content: flex-end;">
  55. <view class="button free" >免费</view>
  56. </view>
  57. <view v-else-if="data.viewMode==='2' && isMember" class="func-box">
  58. <view class="price">¥{{ data.price }}元</view>
  59. <view class="button member-free">会员免费</view>
  60. </view>
  61. <view v-else-if="data.viewMode==='2' && !isMember" class="func-box">
  62. <view style="flex: 0 0 auto;display: flex;align-items: center;">
  63. <view class="member-free">
  64. 会员免费
  65. </view>
  66. <view class="not-member-price">
  67. 非会员:¥{{data.price}}元
  68. </view>
  69. </view>
  70. <view :class="['button', data.hasBuy ? 'free' : 'buy']">
  71. {{data.hasBuy ? '已购买' : '立即购买'}}
  72. </view>
  73. </view>
  74. <view v-else-if="data.viewMode==='3' && data.price===data.priceMember" class="func-box">
  75. <view class="price">¥{{ data.price }}元</view>
  76. <view :class="['button', data.hasBuy ? 'free' : 'buy']">
  77. {{data.hasBuy ? '已购买' : '立即购买'}}
  78. </view>
  79. </view>
  80. <view v-else-if="data.viewMode==='3' && data.price!==data.priceMember" class="func-box">
  81. <view style="flex: 0 0 auto;display: flex;align-items: center;">
  82. <view class="member-free">
  83. {{`会员:${data.priceMember}元`}}
  84. </view>
  85. <view class="not-member-price">
  86. 非会员:¥{{data.price}}元
  87. </view>
  88. </view>
  89. <view :class="['button', data.hasBuy ? 'free' : 'buy']">
  90. {{data.hasBuy ? '已购买' : '立即购买'}}
  91. </view>
  92. </view>
  93. </view>
  94. </view>
  95. </view>
  96. </view>
  97. <u-empty text="暂无内容" mode="data" v-else></u-empty>
  98. </template>
  99. </u-card>
  100. </view>
  101. <u-modal v-model="loginModal" mask-close-able class="modal" show-cancel-button
  102. :title-style="{fontWeight: 'bold'}" @confirm="confirmModal">
  103. <view class="modal-content">
  104. <text>请登录后使用该功能</text>
  105. </view>
  106. </u-modal>
  107. <!-- 与包裹页面所有内容的元素u-page同级,且在它的下方 -->
  108. <u-tabbar v-model="tabbarCurrentIndex"
  109. :list="tabbarList" icon-size="50"
  110. :active-color="tabbarActiveColor"
  111. :inactive-color="tabbarInactiveColor"></u-tabbar>
  112. </view>
  113. </template>
  114. <script setup>
  115. import lgSwiper from '@/components/lgSwiper.vue'
  116. import {
  117. onMounted,
  118. ref,
  119. computed
  120. } from 'vue'
  121. import {
  122. onReady,
  123. onLoad,
  124. onShow
  125. } from '@dcloudio/uni-app'
  126. import {
  127. useAuthStore
  128. } from '@/store/authStore'
  129. import {
  130. count
  131. } from '@/api/chat.js'
  132. import {
  133. homeCourseList,
  134. homeReportList,
  135. homeSetting,
  136. homeSwiperList
  137. } from '@/api/home.js'
  138. import {
  139. me
  140. } from '@/api/user.js'
  141. import configService from '@/utils/baseurl.js'
  142. const FILE_URL = configService.FILE_URL;
  143. import { useTabbarStore } from '@/store/tabbarStore.js'
  144. const tabbarStore = useTabbarStore()
  145. // 底部导航栏数据
  146. const tabbarList = computed(() => {
  147. return tabbarStore.list
  148. })
  149. // 底部导航栏选中颜色
  150. const tabbarActiveColor = computed(() => {
  151. return tabbarStore.activeColor
  152. })
  153. const backgroundColor = computed(() => {
  154. return tabbarStore.backgroundColor
  155. })
  156. // 底部导航栏未选中颜色
  157. const tabbarInactiveColor = computed(() => {
  158. return tabbarStore.inactiveColor
  159. })
  160. const tabbarCurrentIndex = 0
  161. const authStore = useAuthStore()
  162. // 屏幕状态栏高度
  163. const statusBarHeight = ref(0)
  164. // 顶部导航栏高度
  165. const navBarHeight = ref(0)
  166. // 是否登录
  167. const loginModal = ref(false)
  168. // 是否为会员,从缓存里拿取用户信息
  169. // const userInfo = uni.getStorageSync("userinfo") || {}
  170. const isMemberMap = {
  171. 0: true,
  172. 1: false
  173. }
  174. const isMember = ref(false)
  175. // 首页-轮播图
  176. const swiperList = ref([{
  177. imgUrl: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.YKoZzgmubNBxQ8j-mmoTKAHaEK?rs=1&pid=ImgDetMain',
  178. id: 1
  179. },
  180. {
  181. imgUrl: 'https://pic3.zhimg.com/v2-e52354ffdbd94a8e0a7649eacd34a788_r.jpg?source=1940ef5c',
  182. id: 2
  183. },
  184. {
  185. imgUrl: 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g4/M03/00/0C/Cg-4zFS8bC-Ie9zBADCvovJAqiEAATJ8wDX__cAMK-6184.jpg',
  186. id: 3
  187. },
  188. ])
  189. const courseList = ref([{
  190. courseImg: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.YKoZzgmubNBxQ8j-mmoTKAHaEK?rs=1&pid=ImgDetMain',
  191. id: 1,
  192. courseName: '【8月8日】房地产经纪进阶培训班'
  193. },
  194. {
  195. courseImg: 'https://pic3.zhimg.com/v2-e52354ffdbd94a8e0a7649eacd34a788_r.jpg?source=1940ef5c',
  196. id: 2,
  197. courseName: '【8月9日】《房地产中介服务规范》培训'
  198. },
  199. {
  200. courseImg: 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g4/M03/00/0C/Cg-4zFS8bC-Ie9zBADCvovJAqiEAATJ8wDX__cAMK-6184.jpg',
  201. id: 3,
  202. courseName: '【已结束】《广州市房屋租赁管理规定》'
  203. },
  204. ])
  205. // 首页-导航栏
  206. const navList = ref([{
  207. id: 'notice',
  208. title: '通知公告',
  209. icon: 'icon-xiaoxitongzhi',
  210. url: '/pages/notice/notice/notice',
  211. toOtherApp: false,
  212. otherAppId: '其他小程序的appid'
  213. },
  214. {
  215. id: 'dynamic',
  216. title: '协会动态',
  217. icon: 'icon-xinxisousuo-01',
  218. url: '/pages/dynamic/dynamic/dynamic',
  219. toOtherApp: false,
  220. otherAppId: '其他小程序的appid'
  221. },
  222. {
  223. id: 'guide',
  224. title: '办事指引',
  225. icon: 'icon-caidanguanli',
  226. url: '/pages/guide/guide/guide',
  227. toOtherApp: false,
  228. otherAppId: '其他小程序的appid'
  229. },
  230. {
  231. id: 'edu',
  232. title: '继续教育',
  233. icon: 'icon-xueshimao1',
  234. url: '/pages/goOnEdu/index',
  235. toOtherApp: false,
  236. otherAppId: '其他小程序的appid'
  237. },
  238. {
  239. id: 'level',
  240. title: '水平认证',
  241. icon: 'icon-zhengshu-copy',
  242. url: '跳转页面的路径',
  243. toOtherApp: true,
  244. otherAppId: '其他小程序的appid'
  245. },
  246. {
  247. id: 'report',
  248. title: '研究报告',
  249. icon: 'icon-circular',
  250. url: '/pages/researchReport/reportHome/reportHome',
  251. toOtherApp: false,
  252. otherAppId: '其他小程序的appid'
  253. },
  254. {
  255. id: 'index',
  256. title: '经理人指数',
  257. icon: 'icon-zhishu',
  258. url: '跳转页面的路径',
  259. toOtherApp: true,
  260. otherAppId: '其他小程序的appid'
  261. },
  262. {
  263. id: 'pay',
  264. title: '会费缴交',
  265. icon: 'icon-jinqian-jiage',
  266. url: '跳转页面的路径',
  267. toOtherApp: true,
  268. otherAppId: '其他小程序的appid'
  269. }
  270. ])
  271. const reportList = ref(
  272. [])
  273. // 跳转页面
  274. const jumpToPage = (data) => {
  275. if (data.toOtherApp) {
  276. // 跳转其他小程序
  277. console.log("跳转至其他小程序", data.otherAppId)
  278. return
  279. }
  280. if (!authStore.isAuthenticated) {
  281. loginModal.value = true
  282. return
  283. }
  284. uni.navigateTo({
  285. url: data.url
  286. })
  287. }
  288. // 确认跳转至登录
  289. const confirmModal = () => {
  290. uni.navigateTo({
  291. url: "/pages/initial/initial"
  292. })
  293. }
  294. const toPage = (url) => {
  295. if (!authStore.isAuthenticated) {
  296. loginModal.value = true
  297. return
  298. }
  299. uni.navigateTo({
  300. url: url
  301. })
  302. }
  303. const itemClick = (data) =>{
  304. // console.log("轮播图swiper", data)
  305. if (!authStore.isAuthenticated) {
  306. loginModal.value = true
  307. return
  308. }
  309. uni.navigateTo({
  310. url: "/pages/swiperDetail/swiperDetail?id=" + data.id
  311. })
  312. }
  313. const swiperClick = (data) => {
  314. // console.log(data, "课程预告数据")
  315. if (!authStore.isAuthenticated) {
  316. loginModal.value = true
  317. return
  318. }
  319. uni.navigateTo({
  320. url: `/pages/goOnEdu/course/courseDetail/courseDetail?id=${data.id}&name=${data.courseName}`
  321. });
  322. }
  323. function initUser() {
  324. me().then(res => {
  325. if (res?.data) {
  326. authStore.setUserInfo(res.data);
  327. isMember.value = res.data.isMember;
  328. }
  329. })
  330. }
  331. function init() {
  332. homeSwiperList().then(res => {
  333. if (res?.data) {
  334. swiperList.value = res.data
  335. }
  336. })
  337. homeCourseList().then(res => {
  338. // console.log(1000, res.data)
  339. if (res?.data) {
  340. courseList.value = res.data
  341. }
  342. })
  343. homeReportList().then(res => {
  344. if (res?.data) {
  345. reportList.value = res.data
  346. }
  347. })
  348. // homeSetting().then(res=>{
  349. // console.log(res)
  350. // })
  351. }
  352. function getCharCount() {
  353. count().then(res => {
  354. if (res && res.message === 'success') {
  355. tabbarStore.setMessageCount(res.data.amount)
  356. uni.setTabBarBadge({ //显示数字
  357. index: 1, //tabbar下标
  358. text: `${res.data.amount}` ?? '0' //数字
  359. })
  360. }
  361. })
  362. }
  363. function toReport(id, title){
  364. if (!authStore.isAuthenticated) {
  365. loginModal.value = true
  366. return
  367. }
  368. uni.navigateTo({
  369. url:"/pages/reportDetail/reportDetail?id="+id+"&title="+title
  370. })
  371. }
  372. onReady(() => {
  373. uni.getSystemInfo({
  374. success(e) {
  375. statusBarHeight.value = e.statusBarHeight;
  376. let custom = uni.getMenuButtonBoundingClientRect();
  377. navBarHeight.value = custom.height + (custom.top - e.statusBarHeight) * 2;
  378. }
  379. })
  380. })
  381. onLoad(() => {
  382. init()
  383. // uni.setBackgroundColor({
  384. // backgroundColor: '#ffff7f',
  385. // });
  386. // initUser()
  387. })
  388. onShow(() => {
  389. const isLogin = authStore.isAuthenticated;
  390. const isUserInfo = authStore.isUserInfo;
  391. if (isLogin) {
  392. // 登录后才请求消息数量
  393. getCharCount()
  394. // 没有用户信息就加载一边
  395. if (!isUserInfo) {
  396. initUser();
  397. } else {
  398. isMember.value = authStore.userInfo.isMember==='0'?false:true;
  399. }
  400. }
  401. })
  402. </script>
  403. <style lang="scss" scoped>
  404. .container {
  405. width: 100vw;
  406. // background-color: $uni-bg-color;
  407. padding: 0 20rpx 5rpx;
  408. }
  409. .slot-wrap {
  410. padding-left: 20rpx;
  411. }
  412. .menu-item{
  413. .iconfont{
  414. font-size: 60rpx;
  415. }
  416. }
  417. .grid-text {
  418. font-size: 28rpx;
  419. margin-top: 4rpx;
  420. color: $uni-text-color;
  421. }
  422. .u-card-wrap {
  423. background-color: $u-bg-color;
  424. padding: 1px;
  425. }
  426. .u-body-item {
  427. font-size: 32rpx;
  428. color: #333;
  429. margin-bottom: 30rpx;
  430. height: 140rpx;
  431. &:last-of-type {
  432. margin-bottom: 0;
  433. }
  434. .u-body-item-content {
  435. position: relative;
  436. flex: 1;
  437. /* 剩余空间占用 Flex 规则 */
  438. min-width: 0;
  439. // width: 100%;
  440. height: inherit;
  441. .item-content text {
  442. width: inherit;
  443. font-size: $uni-font-size-2;
  444. display: block;
  445. margin: 10rpx;
  446. color: $uni-text-color;
  447. }
  448. .item-content .item-content-title {
  449. font-size: $uni-title-font-size-2;
  450. }
  451. .item-content .item-content-price {
  452. color: $uni-color-error;
  453. // font-weight: bold;
  454. }
  455. .item-button {
  456. width: 100%;
  457. .item-button-huiyuan {
  458. padding: 15rpx 0 5rpx;
  459. text-align: center;
  460. width: 150rpx;
  461. background-image: url('http://www.gzrea.org.cn:8543/icon/wxmp/bg-label.png');
  462. background-size: cover;
  463. background-repeat: no-repeat;
  464. // background-position: center;
  465. }
  466. .item-button-goumai {
  467. padding: 5rpx 0;
  468. text-align: center;
  469. width: 150rpx;
  470. background-color: #fe0000;
  471. border-radius: 30rpx;
  472. color: #fff;
  473. }
  474. .item-button-yiGouMai {
  475. text-align: center;
  476. width: 150rpx;
  477. padding: 5rpx 0;
  478. background-color: #006af4;
  479. border-radius: 30rpx;
  480. color: #fff;
  481. }
  482. }
  483. }
  484. image {
  485. width: 200rpx;
  486. flex: 0 0 200rpx;
  487. height: 100%;
  488. border-radius: 20rpx;
  489. margin-right: 12rpx;
  490. }
  491. }
  492. .course-swiper {
  493. height: 200px;
  494. .swiper-item {
  495. width: 33.33%;
  496. height: 200px;
  497. /* 三个一排,宽度为三分之一 */
  498. transition: transform 0.3s ease;
  499. /* 加入过渡效果 */
  500. display: flex;
  501. flex-direction: column;
  502. align-items: center;
  503. justify-content: center;
  504. }
  505. .swiper-item.active {
  506. transform: scale(2);
  507. /* 主项放大 */
  508. }
  509. image {
  510. width: 80%;
  511. /* 图片宽度 */
  512. height: auto;
  513. }
  514. text {
  515. margin-top: 10px;
  516. }
  517. }
  518. .text-ellipsis {
  519. overflow: hidden;
  520. /* 隐藏超出内容 */
  521. white-space: nowrap;
  522. /* 禁止换行 */
  523. text-overflow: ellipsis;
  524. }
  525. .swiper-container {
  526. perspective: 1000px;
  527. }
  528. .swiper-item {
  529. transition: transform 0.5s;
  530. transform-style: preserve-3d;
  531. /* 其他样式 */
  532. }
  533. .content {
  534. backface-visibility: hidden;
  535. /* 确保背面不可见 */
  536. display: flex;
  537. justify-content: center;
  538. align-items: center;
  539. height: 200px;
  540. /* 设置高度 */
  541. font-size: 24px;
  542. color: white;
  543. background: linear-gradient(45deg, #ff5858, #f09819);
  544. /* 示例背景 */
  545. }
  546. // 登录模拟态
  547. .modal {
  548. .modal-content {
  549. padding: 50rpx;
  550. .content-a {
  551. color: #2979ff;
  552. }
  553. }
  554. }
  555. .item-button {
  556. display: flex;
  557. justify-content: space-between;
  558. align-items: flex-end;
  559. font-size: $uni-font-size-2;
  560. font-weight: bold;
  561. margin-top: 10rpx;
  562. .func-box {
  563. display: flex;
  564. justify-content: space-between;
  565. width: 100%;
  566. align-items: center;
  567. }
  568. .button {
  569. text-align: center;
  570. width: 130rpx;
  571. }
  572. .price {
  573. color: $uni-color-error;
  574. font-size: $uni-title-font-size-3;
  575. }
  576. .not-member-price {
  577. font-size: $uni-font-size-4;
  578. color: $uni-text-color-grey;
  579. text-align: end;
  580. }
  581. .buy {
  582. padding: 6rpx 25rpx;
  583. background-color: $uni-color-error;
  584. border-radius: $uni-card-border-radius;
  585. color: $uni-text-color-inverse;
  586. }
  587. .free {
  588. padding: 6rpx 25rpx;
  589. background-color: $uni-color-primary;
  590. border-radius: $uni-card-border-radius;
  591. color: $uni-text-color-inverse;
  592. }
  593. .member-free {
  594. padding: 10rpx 20rpx;
  595. @include backgroundImg('http://www.gzrea.org.cn:8543/icon/wxmp/bg-label.png');
  596. color: $uni-text-color;
  597. }
  598. }
  599. </style>