home.vue 17 KB

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