index.vue 11 KB

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