学员端小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

603 lines
14 KiB

1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
  1. <template>
  2. <view class="main pageBg">
  3. <view style="background-color: #2170FD; width: 100%;height: 20rpx;"></view>
  4. <!-- <u-navbar title=" " :bgColor="bgColor" :autoBack="false">
  5. <view class="" slot="left">
  6. <view class="flex">
  7. <view class="adrsIcon">
  8. <image src="@/static/images/index/dingwei.png" mode=""></image>
  9. </view>
  10. <view class="adr">{{ vuex_cityInfo.city }} </view>
  11. </view>
  12. </view>
  13. <view class="rightScan" slot="right">
  14. <view class="scan" @click="scanCodeFn">
  15. <image src="@/static/images/index/scan.png" mode=""></image>
  16. </view>
  17. </view>
  18. </u-navbar> -->
  19. <button @click="refereshFn">刷新token</button>
  20. <view class="TopCon">
  21. <view class="status_bar"></view>
  22. <!-- 地址扫一扫 -->
  23. <view class="flex-b">
  24. <view class="flex">
  25. <view class="adrsIcon">
  26. <image src="@/static/images/index/dingwei.png" mode=""></image>
  27. </view>
  28. <view class="adr">{{ vuex_cityInfo.city }} </view>
  29. </view>
  30. <view class="scan" @click="scanCodeFn">
  31. <image src="@/static/images/index/scan.png" mode=""></image>
  32. </view>
  33. </view>
  34. <!-- 搜索 -->
  35. <view class="searchCon">
  36. <searchRow placeholder="搜索驾校、教练…" @click.native="$goPage('/pages/indexEntry/findShcool/searchShcool/searchShcool')"></searchRow>
  37. </view>
  38. </view>
  39. <view class="pad">
  40. <!-- 精钢区 -->
  41. <view class="card traTop">
  42. <view class="ul">
  43. <view class="li" v-for="(item,index) in entrySection" :key="index" @click="item.click(item)">
  44. <view class="icon">
  45. <image :src="item.icon" mode=""></image>
  46. </view>
  47. <view class="name">{{ item.text }}</view>
  48. </view>
  49. </view>
  50. </view>
  51. <!-- 更多入口 -->
  52. <view class="card">
  53. <view class="ul3">
  54. <view class="li3" v-for="(item,index) in moreSection" :key="index" @click="goPageSection(item)">
  55. <view class="icon">
  56. <image :src="item.icon" mode=""></image>
  57. </view>
  58. <view class="name">{{ item.text }}</view>
  59. </view>
  60. </view>
  61. </view>
  62. <!-- 行业资讯 -->
  63. <view class="card">
  64. <view class="information">
  65. <view class="flex-b border">
  66. <view class="h1">行业资讯</view>
  67. <view class="more" @click="$goPage('/pages/indexEntry/iIndustryInfo/iIndustryInfo')">
  68. <view class="text">更多</view>
  69. <view class="icon">
  70. <u-icon name="arrow-right"></u-icon>
  71. </view>
  72. </view>
  73. </view>
  74. <uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="swiperInfo"
  75. :current="current" :mode="mode" style="height: 230rpx;" :dots-styles="dotsStyles"
  76. field="content">
  77. <swiper class="swiper-box" @change="change" :current="swiperDotIndex" style="height: 230rpx;">
  78. <swiper-item v-for="(item, index) in swiperInfo" :key="index" @click="$goPage('/pages/indexEntry/examines/newsDetail/newsDetail')">
  79. <view class="swiper-item" :class="'swiper-item' + index">
  80. <view class="flex-b">
  81. <view class="imgBox">
  82. <image src="../../../static/images/logo.png" mode=""></image>
  83. </view>
  84. <view class="rightText">
  85. <view class="text towRowText">{{ item.text }}</view>
  86. <view class="date">{{ item.date}}</view>
  87. </view>
  88. </view>
  89. </view>
  90. </swiper-item>
  91. </swiper>
  92. </uni-swiper-dot>
  93. </view>
  94. </view>
  95. <!-- 服务专区 -->
  96. <view class="card serviceCon">
  97. <view class="h1">服务专区</view>
  98. <view class="ul2">
  99. <view class="li2" v-for="(item,index) in serviceSector" :key="index" :class="'li2Bg' + index" @click="$goPage(item.url)">
  100. <view class="icon">
  101. <image :src="item.icon" mode=""></image>
  102. </view>
  103. <view class="textCon">
  104. <view class="text">{{ item.text }}</view>
  105. <view class="tps">{{ item.tps}}</view>
  106. </view>
  107. </view>
  108. </view>
  109. </view>
  110. <view style="height: 20rpx;width: 100%;"></view>
  111. </view>
  112. <u-popup :show="showPrivacy" mode="center" :round="20" >
  113. <privacyPopup @disagree="showPrivacy=false" @agree="showPrivacy=false"></privacyPopup>
  114. </u-popup>
  115. </view>
  116. </template>
  117. <script>
  118. export default {
  119. data() {
  120. return {
  121. showPrivacy: false,
  122. keywords: '',
  123. entrySection: [{
  124. text: '我要报名',
  125. icon: require('../../../static/images/index/ic_baoming.png'),
  126. url: '/pages/indexEntry/enroll/enroll',
  127. click: (item)=>{
  128. this.$goPage(item.url)
  129. }
  130. },
  131. {
  132. text: '找驾校',
  133. icon: require('../../../static/images/index/ic_jiaxiao.png'),
  134. url: '/pages/indexEntry/findShcool/findShcool',
  135. click: (item)=>{
  136. this.$goPage(item.url)
  137. }
  138. },
  139. {
  140. text: '找考场',
  141. icon: require('../../../static/images/index/ic_kaochang.png'),
  142. url: '/pages/indexEntry/examines/examines',
  143. click: (item)=>{
  144. this.$goPage(item.url)
  145. }
  146. },
  147. {
  148. text: '找驾驶馆',
  149. icon: require('../../../static/images/index/ic_jsg.png'),
  150. url: '/pages/carEntry/simulateAppointment/simulateAppointment',
  151. click: (item)=>{
  152. this.$goPage(item.url)
  153. }
  154. },
  155. {
  156. text: '找陪练',
  157. icon: require('../../../static/images/index/ic_peilian.png'),
  158. click: (item)=>{
  159. this.$u.toast('正在开发中,敬请期待...')
  160. }
  161. },
  162. {
  163. text: '理论学习',
  164. icon: require('../../../static/images/index/ic_lilun.png'),
  165. url: '/pages/indexEntry/theory/theory',
  166. click: (item)=>{
  167. this.$goPage(item.url)
  168. }
  169. },
  170. ],
  171. moreSection: [{
  172. text: '摩托车业务',
  173. icon: require('../../../static/images/index/btn_motuoche.png'),
  174. url: '/pages/indexEntry/enroll/enroll'
  175. },
  176. {
  177. text: '考试预约',
  178. icon: require('../../../static/images/index/btn_yuyue.png'),
  179. url: '/pages/indexEntry/findShcool/findShcool'
  180. },
  181. {
  182. text: '交通求助',
  183. icon: require('../../../static/images/index/btn_jiuzhu.png'),
  184. url: '/pages/indexEntry/examines/examines'
  185. },
  186. {
  187. text: '学驾保险',
  188. icon: require('../../../static/images/index/btn_baoxian.png'),
  189. },
  190. {
  191. text: '更多',
  192. icon: require('../../../static/images/index/btn_gengduo.png'),
  193. url: '/pages/indexEntry/theory/theory'
  194. },
  195. ],
  196. serviceSector: [{
  197. text: '学车指南',
  198. tps: '政府平台 一站服务',
  199. icon: require('../../../static/images/index/img_1@2x.png'),
  200. url: ''
  201. },
  202. {
  203. text: '公益视频',
  204. tps: '立体呈现 学驾无忧',
  205. icon: require('../../../static/images/index/img_2@2x.png'),
  206. url: '/pages/indexEntry/publicVideo/publicVideo'
  207. },
  208. {
  209. text: '合格率排行',
  210. tps: '官方数据 阳光透明',
  211. icon: require('../../../static/images/index/img_3@2x.png'),
  212. url: '/pages/indexEntry/credit/credit?type=1'
  213. },
  214. {
  215. text: '行业政策',
  216. tps: '权威发布 精准解读',
  217. icon: require('../../../static/images/index/img_4@2x.png'),
  218. url: '/pages/indexEntry/industryPolicy/industryPolicy'
  219. },
  220. {
  221. text: '质量信誉排行',
  222. tps: '官方数据 阳光透明',
  223. icon: require('../../../static/images/index/img_5@2x.png'),
  224. url: '/pages/indexEntry/credit/credit'
  225. },
  226. {
  227. text: '咨询投诉',
  228. tps: '畅达沟通 听取民声',
  229. icon: require('../../../static/images/index/img_6@2x.png'),
  230. url: '/pages/indexEntry/consult/consult'
  231. },
  232. {
  233. text: '满分学习考试',
  234. tps: '网络教育 数据联网',
  235. icon: require('../../../static/images/index/img_7@2x.png'),
  236. url: ''
  237. },
  238. {
  239. text: '送考卷下乡',
  240. tps: '便民利民 就近考试',
  241. icon: require('../../../static/images/index/img_8@2x.png'),
  242. url: ''
  243. },
  244. ],
  245. swiperDotIndex: 1,
  246. current: 1,
  247. mode: 'default',
  248. swiperInfo: [{
  249. img: require('../../../static/images/index/ic_lilun.png'),
  250. text: '2023年6月份江西省机动车驾驶培训机构考试合格率的通报',
  251. date: '2023/08/09'
  252. },
  253. {
  254. img: require('../../../static/images/index/ic_lilun.png'),
  255. text: '2023年6月份江西省机动车驾驶培训机构考试合格率的通报',
  256. date: '2023/08/10'
  257. },
  258. {
  259. img: require('../../../static/images/index/ic_lilun.png'),
  260. text: '2023年6月份江西省机动车驾驶培训机构考试合格率的通报',
  261. date: '2023/08/11'
  262. },
  263. ],
  264. dotsStyles: {
  265. backgroundColor: '#E8E9EC',
  266. border: '1px #E8E9EC solid',
  267. color: '#fff',
  268. selectedBackgroundColor: '#1989FA',
  269. selectedBorder: '1px #1989FA solid'
  270. },
  271. bgColor: 'transparent'
  272. }
  273. },
  274. async onLoad() {
  275. // await this.$store.dispatch('getCity')
  276. // console.log('有 啦')
  277. // console.log(this.$store.state.user.vuex_cityInfo.city)
  278. },
  279. onShow() {
  280. },
  281. computed: {
  282. // joe() {
  283. // return '我的名字'
  284. // }
  285. },
  286. methods: {
  287. refereshFn() {
  288. this.$store.dispatch('refreshToken')
  289. // this.$store.dispatch('getUserInfo')
  290. },
  291. close() {
  292. },
  293. goPageSection(item) {
  294. uni.navigateTo({
  295. url:item.url
  296. })
  297. },
  298. // 扫码
  299. scanCodeFn() {
  300. let _this = this
  301. uni.scanCode({
  302. success: function(res) {
  303. console.log('条码类型:' + res.scanType);
  304. console.log('条码内容:' + res.result);
  305. _this.$store.commit('updateWebVeiwUrl', res.result)
  306. uni.navigateTo({
  307. url: '/pages/other/webView/webView'
  308. })
  309. }
  310. });
  311. },
  312. clickItem(e) {
  313. this.swiperDotIndex = e
  314. },
  315. change(e) {
  316. this.current = e.detail.current
  317. },
  318. goPage() {
  319. uni.navigateTo({
  320. url: '/pages/userCenter/login/loginByPhone'
  321. })
  322. },
  323. initFn() {
  324. uni.requestSubscribeMessage({
  325. tmplIds: ['0yaIdyI9NlHvGYwb3IIaIQq6uBhulYGN-rGVnJk4hZ4'],
  326. success(res) {
  327. console.log('消息是否有权限呢')
  328. console.log(res)
  329. }
  330. })
  331. }
  332. }
  333. }
  334. </script>
  335. <style lang="scss" scoped>
  336. .main {
  337. width: 100%;
  338. .flex {
  339. .adrsIcon {
  340. width: 26rpx;
  341. height: 38rpx;
  342. margin-top: 4rpx;
  343. }
  344. .adr {
  345. padding-left: 14rpx;
  346. font-size: 28rpx;
  347. color: #fff;
  348. }
  349. }
  350. .rightScan {
  351. padding-right: 190rpx;
  352. }
  353. .scan {
  354. width: 64rpx;
  355. height: 64rpx;
  356. }
  357. .TopCon {
  358. width: 100%;
  359. height: 476rpx;
  360. // background: url('../../../static/images/bigImg/index_banner.png') no-repeat;
  361. background: url('http://192.168.1.20:81/zhili/image/20230809/e7086ccf82ed4aa09d156f2590a50fba.png') no-repeat;
  362. background-size: 100% 100%;
  363. position: relative;
  364. .flex-b {
  365. padding: 10rpx 212rpx 0 50rpx;
  366. }
  367. .searchCon {
  368. position: absolute;
  369. left: 0;
  370. bottom: 68rpx;
  371. padding: 0 28rpx;
  372. width: 100%;
  373. }
  374. }
  375. .card {
  376. background: #FFFFFF;
  377. border-radius: 16rpx;
  378. margin-bottom: 20rpx;
  379. &.traTop {
  380. // transform: translateY(-40rpx);
  381. margin-top: -40rpx;
  382. position: relative;
  383. z-index: 9;
  384. }
  385. .ul {
  386. height: 236rpx;
  387. display: flex;
  388. justify-content: space-between;
  389. align-items: center;
  390. padding: 0 20rpx;
  391. .li {
  392. flex: 1;
  393. display: flex;
  394. align-items: center;
  395. flex-direction: column;
  396. .icon {
  397. width: 92rpx;
  398. height: 92rpx;
  399. }
  400. .name {
  401. font-size: 26rpx;
  402. color: #333;
  403. padding-top: 20rpx;
  404. text-align: center;
  405. }
  406. }
  407. }
  408. .ul3 {
  409. height: 128rpx;
  410. display: flex;
  411. justify-content: space-between;
  412. align-items: center;
  413. padding: 0 30rpx;
  414. border: 2rpx solid #E8E9EC;
  415. border-radius: 16rpx;
  416. .li3 {
  417. // flex: 1;
  418. display: flex;
  419. align-items: center;
  420. flex-direction: column;
  421. .icon {
  422. width: 52rpx;
  423. height: 52rpx;
  424. }
  425. .name {
  426. font-size: 22rpx;
  427. color: #686B73;
  428. padding-top: 2rpx;
  429. text-align: center;
  430. }
  431. }
  432. }
  433. }
  434. .information {
  435. padding: 0 20rpx;
  436. height: 320rpx;
  437. .border {
  438. height: 86rpx;
  439. border-bottom: 2px dashed #E8E9EC;
  440. .h1 {
  441. font-size: 28rpx;
  442. color: #333;
  443. }
  444. .more {
  445. font-size: 24rpx;
  446. display: flex;
  447. .text {
  448. // margin-right: 8rpx;
  449. color: #686B73;
  450. }
  451. }
  452. }
  453. .swiper-item {
  454. height: 148rpx;
  455. .flex-b {
  456. padding: 30rpx 0 28rpx 0;
  457. .imgBox {
  458. width: 184rpx;
  459. height: 148rpx;
  460. background: linear-gradient(180deg, rgba(0, 122, 255, 0.5) 0%, #007AFF 100%);
  461. border-radius: 6rpx;
  462. overflow: hidden;
  463. }
  464. .rightText {
  465. flex: 1;
  466. padding: 0 0 0 30rpx;
  467. height: 148rpx;
  468. display: flex;
  469. flex-direction: column;
  470. justify-content: space-between;
  471. .text {
  472. font-size: 24rpx;
  473. color: #333;
  474. }
  475. .date {
  476. text-align: right;
  477. font-size: 20rpx;
  478. color: #686B73;
  479. }
  480. }
  481. }
  482. }
  483. }
  484. .serviceCon {
  485. width: 100%;
  486. padding: 0 20rpx 20rpx 20rpx;
  487. .h1 {
  488. font-size: 28rpx;
  489. color: #333;
  490. padding: 0 0 0 20rpx;
  491. font-weight: 500;
  492. line-height: 90rpx;
  493. }
  494. .ul2 {
  495. display: flex;
  496. flex-wrap: wrap;
  497. justify-content: space-between;
  498. .li2 {
  499. width: 48.8%;
  500. display: flex;
  501. align-items: center;
  502. padding: 14rpx 0 14rpx 14rpx;
  503. margin-bottom: 20rpx;
  504. border-radius: 16rpx;
  505. height: 160rpx;
  506. &.li2Bg0 {
  507. background: linear-gradient(180deg, #F7FBFF 0%, #EFF6FF 100%);
  508. }
  509. &.li2Bg1 {
  510. background: linear-gradient(180deg, #FFFAF3 0%, #FFF4EA 100%);
  511. }
  512. &.li2Bg2 {
  513. background: linear-gradient(180deg, #F4FFF5 0%, #F3FFED 100%);
  514. }
  515. &.li2Bg3 {
  516. background: linear-gradient(180deg, #EFFFF9 0%, #E3FFF5 100%);
  517. }
  518. &.li2Bg4 {
  519. background: linear-gradient(180deg, #FAF9FF 0%, #F9F5FF 100%);
  520. }
  521. &.li2Bg5 {
  522. background: linear-gradient(180deg, #FCF9FB 0%, #FFF5F8 100%);
  523. }
  524. &.li2Bg6 {
  525. background: linear-gradient(180deg, #FDFFF3 0%, #F5FFE1 100%);
  526. }
  527. &.li2Bg7 {
  528. background: linear-gradient(180deg, #EDF7FF 0%, #F3F1FF 100%);
  529. }
  530. .icon {
  531. width: 80rpx;
  532. height: 80rpx;
  533. }
  534. .textCon {
  535. // flex: 1;
  536. padding-left: 10rpx;
  537. .text {
  538. font-size: 32rpx;
  539. color: #333;
  540. font-weight: 500;
  541. }
  542. .tps {
  543. margin-top: 6rpx;
  544. font-size: 20rpx;
  545. color: #949494;
  546. }
  547. }
  548. }
  549. }
  550. }
  551. }
  552. </style>