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