home.vue 17 KB

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