home.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627
  1. <template>
  2. <view class="container home clearfix">
  3. <!-- 头部轮播 -->
  4. <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading ="true" :loadingType="9"></tui-skeleton>
  5. <view :class="'container-home-'+ inputActive" class="tui-skeleton">
  6. <view :class="'search-input-' + inputActive">
  7. <bt-search :clickPath="clickPath" :toestText='hotSearchText'></bt-search>
  8. </view>
  9. <view class="banner-section">
  10. <!-- <uni-swiper-dot :info="bannerList" :current="current" field="content" :mode="mode" > -->
  11. <swiper class="banner tui-banner tui-skeleton-rect" circular @change="swiperChange" :autoplay="true" :interval="5000" :duration="500" :circular="false">
  12. <swiper-item v-for="(item, index) in bannerImageList" :key="index" class="banner-item">
  13. <image :src="item" />
  14. </swiper-item>
  15. </swiper>
  16. <view class="swiper__dots-box" v-if="bannerImageList.length > 1">
  17. <view v-for="(item,idx) in bannerImageList"
  18. :key="idx"
  19. :class="[idx===current?'swiper__dots-long':'none']"
  20. :data-index="current" class="swiper__dots-item" />
  21. </view>
  22. <!-- </uni-swiper-dot> -->
  23. </view>
  24. <view class="cate-section clearfix">
  25. <!-- 自定义分类导航栏 -->
  26. <view class="tabbar clearfix">
  27. <view class="cate-item" v-for="(nav,idx) in productsClassify" :key="idx" @click.stop="navToListPage(nav)">
  28. <image class="tui-skeleton-fillet" :src="nav.classifyImage"></image>
  29. <text class="tui-skeleton-rect">{{nav.classifyName}}</text>
  30. </view>
  31. </view>
  32. <!-- 优选分类 -->
  33. <view class="tabbar clearfix">
  34. <view class="cate-item-info" @click.stop="this.$api.navToListPage({type:'1',value:mallPageModules.firstModulesName})">
  35. <image class="tui-skeleton-fillet" :src="mallPageModules.firstModulesImage"></image>
  36. <text class="tui-skeleton-fillet">{{mallPageModules.firstModulesName}}</text>
  37. </view>
  38. <view class="cate-item-info" @click.stop="this.$api.navToListPage({type:'2',value:mallPageModules.secondModulesName})">
  39. <image class="tui-skeleton-fillet" :src="mallPageModules.secondModulesImage"></image>
  40. <text class="tui-skeleton-fillet">{{mallPageModules.secondModulesName}}</text>
  41. </view>
  42. <view class="cate-item-info" @click="showTost">
  43. <image class="tui-skeleton-fillet" :src="navInforList[0].icon"></image>
  44. <text class="tui-skeleton-fillet">{{navInforList[0].text}}</text>
  45. </view>
  46. <view class="cate-item-info">
  47. <!-- #ifdef MP-WEIXIN -->
  48. <button class="contact-btn" open-type="contact" @bindcontact="handleContact">
  49. <image class="tui-skeleton-fillet" :src="navInforList[1].icon"></image>
  50. </button>
  51. <!-- #endif -->
  52. <text class="tui-skeleton-fillet">{{navInforList[1].text}}</text>
  53. </view>
  54. </view>
  55. </view>
  56. <!-- 热销商品 -->
  57. <view class="hotgoods-section">
  58. <view class="s-header" @click="this.$api.navToListPage({type:'3',value:mallPageModules.thirdModulesName})">
  59. <text class="tip tui-skeleton-fillet">{{mallPageModules.thirdModulesName}}</text>
  60. <text class="tit tui-skeleton-fillet">更多</text>
  61. <text class="iconfont icon-xiayibu"></text>
  62. </view>
  63. <view class="hotgoods-swiper">
  64. <scroll-view class="floor-list" scroll-x>
  65. <view class="scoll-wrapper">
  66. <view
  67. v-for="(item, index) in organizeProducts" :key="index"
  68. class="floor-item"
  69. @click.stop="navToDetailPage(item.id)"
  70. >
  71. <image class="tui-skeleton-fillet" :src="item.mainImage" mode="aspectFill"></image>
  72. <view class="title tui-skeleton-rect">
  73. <text class="mclap">{{item.name}}</text>
  74. </view>
  75. <view v-if="isLogin" class="price tui-skeleton-rect">
  76. <text class="p sm">¥</text>
  77. <text class="p big">{{item.retailPrice.toFixed(2)}}</text>
  78. </view>
  79. <view v-else class="no-price">
  80. <text vi-else class="p-no tui-skeleton-rect" @click.stop="navto('/pages/login/login?type=3')">登录查看价格<text class="iconfont icon-xiayibu" style="font-size: 22rpx;margin: 0 6rpx;"></text></text>
  81. </view>
  82. </view>
  83. </view>
  84. </scroll-view>
  85. </view>
  86. </view>
  87. <!-- 底部 -->
  88. <view class="footer-section ">
  89. <view class="s-header tui-skeleton-fillet">
  90. <text class="tip">医美机构正品联盟</text>
  91. </view>
  92. <view class="f-content tui-skeleton-fillet" @click="navto('/pages/service/member')">
  93. <image class="tui-banner" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AEwQlAAjGFdpI2LM357.png" mode=""></image>
  94. </view>
  95. <view class="f-tab-section">
  96. <!-- 优选分类 -->
  97. <view class="tabbar clearfix">
  98. <view class="cate-item" @click="showTost">
  99. <image class="tui-skeleton-fillet" :src="navServerList[0].icon"></image>
  100. <text class="tui-skeleton-fillet">{{navServerList[0].text}}</text>
  101. </view>
  102. <view class="cate-item" @click="navto(navServerList[1].path)">
  103. <image class="tui-skeleton-fillet" :src="navServerList[1].icon"></image>
  104. <text class="tui-skeleton-fillet">{{navServerList[1].text}}</text>
  105. </view>
  106. <view class="cate-item" @click="navto(navServerList[2].path)">
  107. <image class="tui-skeleton-fillet" :src="navServerList[2].icon"></image>
  108. <text class="tui-skeleton-fillet">{{navServerList[2].text}}</text>
  109. </view>
  110. <view class="cate-item" @click="telPhoneTo">
  111. <image class="tui-skeleton-fillet" :src="navServerList[3].icon"></image>
  112. <text class="tui-skeleton-fillet">{{navServerList[3].text}}</text>
  113. </view>
  114. </view>
  115. </view>
  116. <view class="f-text tui-skeleton-fillet">
  117. <view class="">
  118. <image class="logo" src="../../../static/logo-c@2x.png" mode=""></image>
  119. <text class="">采美365网</text>
  120. </view>
  121. </view>
  122. </view>
  123. </view>
  124. <!-- 透明模态层 -->
  125. <modal-layer v-if='modallayer'></modal-layer>
  126. </view>
  127. </template>
  128. <script>
  129. import tuiSkeleton from "@/components/tui-skeleton/tui-skeleton"
  130. import authorize from '@/config/authorize.js'
  131. import modalLayer from "@/components/modal-layer"
  132. import btSearch from '@/components/uni-search/bt-search.vue'
  133. import { mapMutations} from 'vuex';
  134. export default {
  135. components:{
  136. tuiSkeleton,
  137. modalLayer,
  138. btSearch
  139. },
  140. data() {
  141. return {
  142. userID:'',
  143. inputActive:'float',
  144. hotSearchText:'你想要的这里都有',
  145. clickPath:'/pages/search/search',
  146. current:0,
  147. mode:'round',
  148. modallayer:false,
  149. isLogin:false,
  150. bannerImageList:[],
  151. hotGoodsList:[],
  152. skeletonShow: true,
  153. organizeProducts:[],//常用商品
  154. productsClassify:[], //导航分类
  155. mallPageModules:'', //优惠模块分类
  156. navInforList:[
  157. {text:'会员中心',icon:'https://img.caimei365.com/group1/M00/03/8C/Cmis215XHXSAAZU0AACaPrfbB8I435.png'},
  158. {text:'在线客服',icon:'https://img.caimei365.com/group1/M00/03/8D/Cmis215XHXWABv0rAACt9b8scec656.png'}
  159. ],
  160. navServerList:[
  161. {text:'会员优惠',icon:'../../../static/temp/server1@2x.png',path:'/pages/service/member'},
  162. {text:'售后无忧',icon:'../../../static/temp/server2@2x.png',path:'/pages/service/aftersale'},
  163. {text:'购物须知',icon:'../../../static/temp/server3@2x.png',path:'/pages/service/shoppingnotice'},
  164. {text:'联系我们',icon:'../../../static/temp/server4@2x.png',path:''},
  165. ]
  166. }
  167. },
  168. onLoad() {
  169. this.initData()
  170. },
  171. methods: {
  172. async initData(){
  173. this.skeletonShow = true;
  174. let hotGoodsList = await this.$util.json('hotGoodsList');
  175. this.hotGoodsList = hotGoodsList;
  176. },
  177. getCheekeyCode(){
  178. authorize.getCode('weixin').then(wechatcode =>{
  179. // console.log(wechatcode);
  180. // 根据微信的code获取用户登录状态:1已登录过 -1未登录过
  181. this.$api.get('/login/doLogin',{userOrganizeID:this.userOrganizeID,code:wechatcode},
  182. response =>{
  183. // console.log(response);
  184. if(response.code == '1'){
  185. this.isLogin = true;
  186. this.userID = response.data.userID;
  187. let user_key = {code:response.code,openid:response.data.openid,userID:response.data.userID}
  188. this.$store.commit('updateStatus',user_key)
  189. uni.setStorageSync('cookieKey','JSESSIONID='+response.data.sessionId)
  190. this.getHomeInformation()
  191. }else{
  192. this.isLogin = false;
  193. this.userID ='';
  194. let user_key = {code:response.code,tel:response.data,userID:this.userID,openid:''}
  195. this.$store.commit('updateStatus',user_key)
  196. this.getHomeInformation()
  197. // this.$store.commit('updateAllNum',0)
  198. }
  199. }
  200. )
  201. })
  202. },
  203. getHomeInformation(){
  204. this.$api.get('/home/information',{userID:this.userID,organizeID:this.userOrganizeID},
  205. response => {
  206. if(response.code =='1'){
  207. let data = response.data;
  208. this.organizeProducts = data.organizeProducts
  209. this.productsClassify = data.productsClassify
  210. this.bannerImageList = data.bannerImageList
  211. this.mallPageModules = data.mallPageModules
  212. this.$store.commit('updateAllNum',response.data.count)
  213. }
  214. this.skeletonShow = false
  215. }
  216. )
  217. },
  218. //轮播图切换修改背景色
  219. swiperChange(e) {
  220. const index = e.detail.current;
  221. this.current = index;
  222. // console.log('current',this.current)
  223. // this.titleNViewBackground = this.carouselList[index].background;
  224. },
  225. formatMoney(num){
  226. return num.toString().replace(/\d+/, function (n) { // 先提取整数部分
  227. return n.replace(/(\d)(?=(\d{3})+$)/g, function ($1) { // 对整数部分添加分隔符
  228. return $1 + ",";
  229. });
  230. });
  231. },
  232. //分类导航跳转
  233. navToListPage(nav){
  234. let self = this;
  235. uni.setStorage({
  236. key: 'commodity_id',
  237. data: nav.id,
  238. success: function () {
  239. self.$api.navToListPage({type:'商品分类',value:nav.classifyName,id:nav.id});
  240. }
  241. })
  242. },
  243. navToDetailPage(id) {//跳转商品详情页
  244. this.modallayer = true;
  245. this.$api.navigateTo(`/pages/goods/product?id=${id}`)
  246. },
  247. handleContact(e){
  248. console.log(e.detail.path)
  249. console.log(e.detail.query)
  250. },
  251. showTost(){
  252. this.$util.msg("正在开发中,敬请期待~",2000);
  253. },
  254. navto(url){
  255. this.$api.navigateTo(url)
  256. },
  257. telPhoneTo(){
  258. let self = this;
  259. this.$api.get('/home/afterSale',{organizeID:this.userOrganizeID},
  260. response => {
  261. console.log(response.data.contactNumber)
  262. uni.makePhoneCall({
  263. phoneNumber:response.data.contactNumber //仅为示例
  264. });
  265. }
  266. )
  267. }
  268. },
  269. onPageScroll(e){
  270. // console.log(e.scrollTop);//实时获取到滚动的值
  271. if(e.scrollTop>50){
  272. this.inputActive = 'fixed'
  273. }else{
  274. this.inputActive = 'float'
  275. }
  276. },
  277. onPullDownRefresh() {//下拉刷新
  278. this.getHomeInformation()
  279. uni.stopPullDownRefresh()
  280. },
  281. onShareAppMessage(res){//分享转发
  282. if (res.from === 'button') {
  283. // 来自页面内转发按钮
  284. console.log(res.target)
  285. }
  286. return {
  287. title: '采美采购商城-生美/医美采购服务平台',
  288. path: 'pages/tabBar/home/home',
  289. imageUrl:'https://img.caimei365.com/group1/M00/03/8C/Cmis215XHXSAWWkhAAXDP4-6m_c397.png'
  290. }
  291. },
  292. onShow(){
  293. this.modallayer = false;
  294. this.getCheekeyCode()
  295. }
  296. }
  297. </script>
  298. <style lang="scss">
  299. page,.home{
  300. width: 100%;
  301. height: auto;
  302. }
  303. .container-home-float{
  304. padding-top: 0;
  305. }
  306. .container-home-fixed{
  307. padding-top: 100rpx;
  308. }
  309. .search-input-float{
  310. width: 100%;
  311. height:auto;
  312. }
  313. .search-input-fixed{
  314. width: 100%;
  315. height:auto;
  316. position: fixed;
  317. top: 0;
  318. left: 0;
  319. z-index: 1000;
  320. background: #FFFFFF;
  321. }
  322. .banner-section{
  323. width: 100%;
  324. height: 366rpx;
  325. position: relative;
  326. }
  327. .banner{
  328. width: 100%;
  329. height: 366rpx;
  330. image {
  331. width: 100%;
  332. height: 100%;
  333. }
  334. }
  335. .swiper__dots-box{
  336. position: absolute;
  337. bottom: 10px;
  338. left: 0;
  339. right: 0;
  340. /* #ifndef APP-NVUE */
  341. display: flex;
  342. /* #endif */
  343. flex: 1;
  344. flex-direction: row;
  345. justify-content: center;
  346. align-items: center;
  347. .swiper__dots-item{
  348. width: 8rpx;
  349. height: 8rpx;
  350. border-radius: 100%;
  351. margin-left: 6px;
  352. background-color:rgba(255,255,255,.7);
  353. }
  354. .swiper__dots-long{
  355. width: 32rpx;
  356. height: 8rpx;
  357. border-radius: 4rpx;
  358. background-color: #ffff;
  359. transition: all 0.4s;
  360. }
  361. }
  362. /* 分类 */
  363. .cate-section {
  364. width: 702rpx;
  365. height: auto;
  366. padding: 48rpx 24rpx;
  367. background: #fff;
  368. .tabbar{
  369. margin-bottom: 26rpx;
  370. }
  371. .cate-item {
  372. width: 118rpx;
  373. margin-right:28rpx;
  374. margin-bottom:28rpx;
  375. display: flex;
  376. float: left;
  377. flex-direction: column;
  378. align-items: center;
  379. font-size: $font-size-sb;
  380. color: $text-color;
  381. line-height: 36rpx;
  382. &:last-child{
  383. margin-right: 0;
  384. }
  385. &:nth-child(5n){
  386. margin-right: 0;
  387. }
  388. image {
  389. width: 90rpx;
  390. height: 90rpx;
  391. margin-bottom: 8rpx;
  392. }
  393. }
  394. .cate-item-info {
  395. width: 160rpx;
  396. margin-right:20.666rpx;
  397. display: flex;
  398. float: left;
  399. flex-direction: column;
  400. align-items: center;
  401. font-size: $font-size-sb;
  402. color: $text-color;
  403. line-height: 36rpx;
  404. &:last-child{
  405. margin-right: 0;
  406. }
  407. image {
  408. width: 160rpx;
  409. height: 90rpx;
  410. margin-bottom: 16rpx;
  411. }
  412. button.contact-btn{
  413. width: 160rpx;
  414. height: 90rpx;
  415. margin: 0;
  416. padding: 0;
  417. display: flex;
  418. flex-direction: column;
  419. align-items: center;
  420. box-sizing: border-box;
  421. text-align: center;
  422. text-decoration: none;
  423. border-radius: 0;
  424. -webkit-tap-highlight-color: transparent;
  425. overflow: hidden;
  426. background-color:#FFFFFF;
  427. margin-bottom: 16rpx;
  428. image{
  429. width: 160rpx;
  430. height: 90rpx;
  431. margin-bottom: 0;
  432. }
  433. }
  434. }
  435. }
  436. /* 活动 */
  437. .hot-section{
  438. padding:0 24rpx 48rpx 24rpx;
  439. background: #FFFFFF;
  440. .ht-l{
  441. width: 339rpx;
  442. height: 188rpx;
  443. float: left;
  444. image{
  445. width: 339rpx;
  446. height: 188rpx;
  447. border-radius:10rpx;
  448. }
  449. }
  450. .ht-r{
  451. width: 339rpx;
  452. height: 188rpx;
  453. float: right;
  454. image{
  455. width: 339rpx;
  456. height: 188rpx;
  457. border-radius:10rpx;
  458. }
  459. }
  460. }
  461. .hotgoods-section{
  462. padding: 4rpx 0 24rpx 24rpx;
  463. background: #fff;
  464. .s-header{
  465. display:flex;
  466. align-items:center;
  467. height: 40rpx;
  468. line-height: 40rpx;
  469. .tip{
  470. flex: 4;
  471. font-size: 30rpx;
  472. color: $text-color;
  473. font-weight: bolder;
  474. }
  475. .tit{
  476. flex: 4.4;
  477. font-size: $font-size-base;
  478. color: $text-color;
  479. text-align: right;
  480. }
  481. .icon-xiayibu{
  482. flex: 0.6;
  483. color: $text-color;
  484. text-align: left;
  485. font-size: $font-size-sm;
  486. }
  487. }
  488. }
  489. .hotgoods-swiper{
  490. width: 100%;
  491. height: auto;
  492. overflow: hidden;
  493. scroll-view{
  494. padding: 26rpx 0;
  495. width: 100%;
  496. }
  497. .scoll-wrapper{
  498. display:flex;
  499. align-items: flex-start;
  500. }
  501. .floor-item{
  502. width: 210rpx;
  503. padding-right: 24rpx;
  504. font-size: $font-size-sm;
  505. color: $text-color;
  506. line-height: 36rpx;
  507. border-radius: 10rpx;
  508. image{
  509. width: 210rpx;
  510. height: 217rpx;
  511. border-radius: 10rpx;
  512. }
  513. .title{
  514. width: 210rpx;
  515. height: 72rpx;
  516. display: flex;
  517. flex-direction: column;
  518. .mclap{
  519. width: 100%;
  520. line-height: 36rpx;
  521. text-overflow:ellipsis;
  522. display: -webkit-box;
  523. word-break: break-all;
  524. -webkit-box-orient: vertical;
  525. -webkit-line-clamp: 2;
  526. overflow: hidden;
  527. font-size: 26rpx;
  528. }
  529. }
  530. .no-price{
  531. height: 36rpx;
  532. line-height: 36rpx;
  533. display: flex;
  534. margin-top: 8rpx;
  535. .p-no{
  536. font-size: $font-size-sm;
  537. color: #F8C499;
  538. margin-left: 10rpx;
  539. }
  540. image{
  541. width:30rpx;
  542. height: 36rpx;
  543. }
  544. }
  545. .price{
  546. color:#FF2A2A;
  547. line-height: 20rpx;
  548. margin-top: 18rpx;
  549. .sm{
  550. font-size: $font-size-sm;
  551. }
  552. .big{
  553. font-size: $font-size-base;
  554. }
  555. }
  556. }
  557. }
  558. .footer-section{
  559. width: 702rpx;
  560. padding: 0 24rpx 30rpx 24rpx;
  561. .s-header{
  562. display:flex;
  563. align-items:center;
  564. height: 40rpx;
  565. line-height: 40rpx;
  566. margin-bottom: 38rpx;
  567. .tip{
  568. flex: 1;
  569. font-size: 30rpx;
  570. color: $text-color;
  571. font-weight: bolder;
  572. }
  573. }
  574. .f-content{
  575. width: 100%;
  576. image{
  577. width: 100%;
  578. height: 350rpx;
  579. }
  580. }
  581. /*底部服务导航*/
  582. .f-tab-section {
  583. width: 100%;
  584. height: auto;
  585. padding: 38rpx 0;
  586. background: #fff;
  587. /*底部服务导航*/
  588. .cate-item {
  589. width: 99rpx;
  590. margin-right: 102rpx;
  591. float: left;
  592. display: flex;
  593. flex-direction: column;
  594. align-items: center;
  595. font-size: $font-size-sm;
  596. color: $text-color;
  597. &:last-child{
  598. margin-right: 0;
  599. }
  600. image {
  601. width: 75rpx;
  602. height: 75rpx;
  603. margin-bottom: 8rpx;
  604. border-radius: 50%;
  605. }
  606. }
  607. }
  608. .f-text{
  609. .logo{
  610. width: 80rpx;
  611. height: 80rpx;
  612. float: left;
  613. margin: 0 6rpx;
  614. }
  615. display: flex;
  616. flex-direction: column;
  617. align-items: center;
  618. font-size: $font-size-sm;
  619. color: $text-color;
  620. line-height: 80rpx;
  621. padding-top: 20rpx;
  622. }
  623. }
  624. </style>