home.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343
  1. <template>
  2. <view class="container home clearfix" :style="{paddingTop:CustomBar+'px'}">
  3. <customer ref="customer" :navbar-data='nvabarData'></customer>
  4. <!-- 主页内容 -->
  5. <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading ="true" :loadingType="5"></tui-skeleton>
  6. <view class="container-home tui-skeleton">
  7. <!-- 轮播 -->
  8. <banner :list="bannerImageList" v-if="isRequest"></banner>
  9. <!-- 金刚区菜单 -->
  10. <navbars :list="navBarsList" v-if="isRequest"></navbars>
  11. </view>
  12. <view class="container-section tui-skeleton">
  13. <!-- 推荐专区 -->
  14. <hot-product :list="RecommendList" :userIdentity="userIdentity" v-if="isRequest"></hot-product>
  15. <!-- 楼层 -->
  16. <pages-product :list="pagesList" v-if="isRequest"></pages-product>
  17. <!-- 商品专题 -->
  18. <special-product :list="specialList" :listB="specialProList" v-if="isRequest"></special-product>
  19. <!-- 供应商专题 -->
  20. <supplier-list :list="supplierList" v-if="isRequest"></supplier-list>
  21. </view>
  22. <!-- 侧边 -->
  23. <scroll-top v-if="isScrollTop"></scroll-top>
  24. </view>
  25. </template>
  26. <script>
  27. import tuiSkeleton from "@/components/tui-skeleton/tui-skeleton"
  28. import authorize from '@/common/config/authorize.js'
  29. import customer from '@/components/cm-module/homeIndex/customer.vue'
  30. import banner from '@/components/cm-module/homeIndex/banner.vue'
  31. import navbars from '@/components/cm-module/homeIndex/navbars.vue'
  32. import hotProduct from '@/components/cm-module/homeIndex/hotProduct.vue'
  33. import pagesProduct from '@/components/cm-module/homeIndex/pagesProduct.vue'
  34. import specialProduct from '@/components/cm-module/homeIndex/specialProduct.vue'
  35. import supplierList from '@/components/cm-module/homeIndex/supplierList.vue'
  36. import { userInfoLogin } from "@/api/use.js"
  37. import { mapState,mapMutations} from 'vuex';
  38. export default {
  39. components:{
  40. tuiSkeleton,
  41. customer,
  42. hotProduct,
  43. banner,
  44. navbars,
  45. pagesProduct,
  46. specialProduct,
  47. supplierList
  48. },
  49. data() {
  50. return {
  51. webviewStyles: {
  52. progress: {
  53. color: '#FF3333'
  54. }
  55. },
  56. nvabarData: {//顶部自定义导航
  57. showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示,
  58. showSearch: 0,
  59. title: '采美采购商城', // 导航栏 中间的标题
  60. haveBack:false,
  61. textLeft:this.$store.state.isIphone,
  62. textColor:'#FFFFFF'
  63. },
  64. CustomBar:this.CustomBar,// 顶部导航栏高度
  65. userID:0,
  66. clubStatus:'',
  67. current:0,
  68. mode:'round',
  69. modallayer:false,
  70. isLogin:false,
  71. skeletonShow: true,
  72. userIdentity:'',
  73. bannerImageList:[],//轮播
  74. navBarsList:[],//导航分类
  75. pagesList:[],//楼层
  76. RecommendList:[],//热门推荐
  77. specialList:[],//商品专题轮播
  78. specialProList:[],//商品专题商品
  79. supplierList:[],//供应商列表
  80. organizeProducts:[],//常用商品
  81. productsClassifyList:[
  82. {classifyImage:'https://admin-b.caimei365.com/userfiles/1/images/photo/2020/04/%E7%BB%84%201238.png',classifyName:'采美'},
  83. {classifyImage:'https://admin-b.caimei365.com/userfiles/1/images/photo/2020/04/%E7%BB%84%201238.png',classifyName:'采美'},
  84. {classifyImage:'https://admin-b.caimei365.com/userfiles/1/images/photo/2020/04/%E7%BB%84%201238.png',classifyName:'采美'},
  85. {classifyImage:'https://admin-b.caimei365.com/userfiles/1/images/photo/2020/04/%E7%BB%84%201238.png',classifyName:'采美'},
  86. {classifyImage:'https://admin-b.caimei365.com/userfiles/1/images/photo/2020/04/%E7%BB%84%201238.png',classifyName:'采美'}
  87. ],//分类导航
  88. firstModulesName:'https://img.caimei365.com/group1/M00/03/8C/Cmis215XHXSAAZU0AACaPrfbB8I435.png', //优惠模块1
  89. secondModulesName:'', //优惠模块2
  90. firstModulesImage:'https://img.caimei365.com/group1/M00/03/8C/Cmis215XHXSAAZU0AACaPrfbB8I435.png',//优惠模块icon1
  91. secondModulesImage:'',//优惠模块icon2
  92. thirdModulesName:'', //优惠模块3
  93. navInforList:[
  94. {text:'会员中心',icon:'https://img.caimei365.com/group1/M00/03/B0/Cmis217Z9LCABdf_AAAfdMmM_xY655.png'},
  95. {text:'在线客服',icon:'https://img.caimei365.com/group1/M00/03/B0/Cmis217Z9BSAXPobAAApo6I0Tlo684.png'}
  96. ],
  97. navServerList:[
  98. {text:'会员优惠',icon:'../../../static/temp/server1@2x.png',path:'/pages/service/member'},
  99. {text:'售后无忧',icon:'../../../static/temp/server2@2x.png',path:'/pages/service/aftersale'},
  100. {text:'购物须知',icon:'../../../static/temp/server3@2x.png',path:'/pages/service/shoppingnotice'},
  101. {text:'联系我们',icon:'../../../static/temp/server4@2x.png',path:''},
  102. ],
  103. isScrollTop:false,
  104. isRequest:false
  105. }
  106. },
  107. created() {
  108. this.$api.getStorage().then((resolve) =>{
  109. this.userID = resolve.userID
  110. this.userIdentity = resolve.userIdentity
  111. this.GetHomeFloorInfo()
  112. this.getHomeInformation()
  113. })
  114. },
  115. filters: {
  116. NumFormat:function(text) {//处理金额
  117. return Number(text).toFixed(2);
  118. },
  119. },
  120. computed: {
  121. ...mapState(['hasLogin','userInfo','isActivity'])
  122. },
  123. methods: {
  124. ...mapMutations(['login','logout']),
  125. GetHomeInit(){//金刚区分类
  126. this.CommonService.GetHomeInit({}).then(response =>{
  127. let data = response.data
  128. this.navBarsList = data.topMenuList
  129. }).catch(error =>{
  130. this.$util.msg(error.msg,2000)
  131. })
  132. },
  133. GetHomeFloorInfo(){//初始化首页楼层数据
  134. this.CommonService.GetHomeFloorInfo({}).then(response =>{
  135. let data = response.data
  136. data.forEach((item,index) => {
  137. switch(item.type){
  138. case 3:
  139. this.supplierList = item.floorData
  140. break;
  141. case 4:
  142. this.specialList = item.floorData
  143. break;
  144. case 5:
  145. this.specialProList = item.floorData
  146. break;
  147. case 6:
  148. this.pagesList = item.subFloors
  149. break;
  150. }
  151. })
  152. }).catch(error =>{
  153. this.$util.msg(error.msg,2000)
  154. })
  155. },
  156. getHomeInformation(){//初始化首页数据
  157. this.CommonService.GetHomeModulesDataInfo({ userId:this.userID }).then(res =>{
  158. let data = res.data;
  159. this.bannerImageList = data.bannerImageList
  160. this.mallPageModules = data.mallPageModules
  161. this.firstModulesName= data.firstModulesName
  162. this.secondModulesName= data.secondModulesName
  163. this.firstModulesImage= data.firstModulesImage
  164. this.secondModulesImage= data.secondModulesImage
  165. this.thirdModulesName= data.thirdModulesName
  166. this.productsClassifyList = data.productsClassifyList
  167. this.$store.commit('updateAllNum',data.shoppingCartCount)
  168. this.GetHomeInit();
  169. this.GetHomeRecommendInfo()
  170. }).catch(error =>{
  171. this.$util.msg(error.msg,2000)
  172. })
  173. },
  174. GetHomeRecommendInfo(){//首页热门推荐
  175. this.CommonService.GetHomeRecommendInfo().then(response =>{
  176. this.RecommendList = response.data
  177. this.GetProductPrice()
  178. })
  179. },
  180. GetProductPrice(){//获取商品或者活动价格
  181. let productIdArr = [];
  182. let productIds ='';
  183. this.RecommendList.map(item=>{// 0公开价格 1不公开价格 2仅对会员机构公开
  184. productIdArr.push(item.id)
  185. })
  186. productIds = productIdArr.join(",");
  187. this.ProductService.querySearchProductPrice({userId: this.userID,productIds:productIds}).then(response =>{
  188. this.RecommendList = this.ReturnNewProducts(this.RecommendList,response.data);
  189. this.skeletonShow = false;
  190. this.isRequest = true
  191. }).catch(error =>{
  192. this.$util.msg(error.msg,2000)
  193. })
  194. },
  195. ReturnNewProducts(Array,list){
  196. let NewArray = []
  197. Array.map(item=>{
  198. for (let i = 0; i < list.length; i++) {
  199. if( item.id == list[i].productId ){
  200. NewArray.push(Object.assign(item,list[i]))
  201. }
  202. }
  203. });
  204. return NewArray
  205. },
  206. PromotionsFormat(promo){//促销活动类型数据处理
  207. if(promo!=null){
  208. if(promo.type == 1 && promo.mode == 1){
  209. return true
  210. }else{
  211. return false
  212. }
  213. }
  214. return false
  215. },
  216. //轮播图切换修改背景色
  217. swiperChange(e) {
  218. const index = e.detail.current;
  219. this.current = index;
  220. },
  221. formatMoney(num){
  222. return num.toString().replace(/\d+/, function (n) { // 先提取整数部分
  223. return n.replace(/(\d)(?=(\d{3})+$)/g, function ($1) { // 对整数部分添加分隔符
  224. return $1 + ",";
  225. });
  226. });
  227. },
  228. handleBannerActivity(item,index){
  229. switch(index){
  230. case 0:
  231. this.$api.navigateTo(`/h5/pages/activity/activity_mid`)
  232. break;
  233. }
  234. },
  235. handleClick(data){
  236. this.$api.navigateTo(`/h5/pages/activity/activity_mid`)
  237. this.$store.commit('setActivity',data)
  238. },
  239. handleCancelClick(data){
  240. this.$store.commit('setActivity',data)
  241. },
  242. navToListPage(nav){//三个分类模块跳转
  243. let self = this;
  244. uni.setStorage({
  245. key: 'commodity_id',
  246. data: nav.id,
  247. success: function () {
  248. self.$api.navToListPage({type:'0',value:nav.classifyName,id:nav.id});
  249. }
  250. })
  251. },
  252. navigateToGoods(nav){//分类导航跳转
  253. let self = this;
  254. uni.setStorage({
  255. key: 'commodity_id',
  256. data: nav.id,
  257. success: function () {
  258. self.$api.navigateToGoods({type:'0',value:nav.classifyName,id:nav.id});
  259. }
  260. })
  261. },
  262. navToDetailPage(id) {//跳转商品详情页
  263. this.modallayer = true;
  264. this.$api.navigateTo(`/pages/goods/product?id=${id}`)
  265. },
  266. handleContact(e){
  267. console.log(e.detail.path)
  268. console.log(e.detail.query)
  269. },
  270. showTost(){
  271. this.$util.msg("功能开发中,敬请期待~",2000)
  272. // this.$api.navigateTo(`/seller/pages/login/login`)
  273. // uni.navigateToMiniProgram({
  274. // appId: 'wx5a5cda32926f55ac',
  275. // path: '/pages/tabBar/home/index',
  276. // extraData: {
  277. // 'data1': 'test'
  278. // },
  279. // envVersion: 'develop',
  280. // success(res) {
  281. // console.log(res)
  282. // // 打开成功
  283. // }
  284. // })
  285. },
  286. navto(url){
  287. this.$api.navigateTo(url)
  288. },
  289. swiperNavtopage(link){
  290. this.$api.navigateTo(`/h5/pages/activity/activity?productID=4204&path=${link}`)
  291. },
  292. telPhoneTo(){
  293. let self = this;
  294. this.$api.get('/home/afterSale',{organizeID:this.userOrganizeID},
  295. response => {
  296. console.log(response.data.contactNumber)
  297. uni.makePhoneCall({
  298. phoneNumber:response.data.contactNumber //仅为示例
  299. });
  300. }
  301. )
  302. }
  303. },
  304. onPageScroll(e){//实时获取到滚动的值
  305. if(e.scrollTop>50){
  306. this.inputActive = 'fixed'
  307. }else{
  308. this.inputActive = 'float'
  309. }
  310. if(e.scrollTop>400){
  311. this.isScrollTop = true
  312. }else{
  313. this.isScrollTop = false
  314. }
  315. },
  316. onPullDownRefresh() {//下拉刷新
  317. this.getHomeInformation()
  318. uni.stopPullDownRefresh()
  319. },
  320. onShareAppMessage(res){//分享转发
  321. if (res.from === 'button') {
  322. // 来自页面内转发按钮
  323. }
  324. return {
  325. title: '采美采购商城-生美/医美采购服务平台',
  326. path: 'pages/tabBar/home/home',
  327. imageUrl:'https://img.caimei365.com/group1/M00/03/8C/Cmis215XHXSAWWkhAAXDP4-6m_c397.png'
  328. }
  329. }
  330. }
  331. </script>
  332. <style lang="scss">
  333. page{
  334. background-color: #FFFFFF;
  335. }
  336. .container-section{
  337. width: 100%;
  338. height: auto;
  339. background-color: #F7F7F7;
  340. }
  341. </style>