caimei-applets-caimei/components/cm-module/homeIndex/index.vue

<template>
	<view>
		<view class="container-home tui-skeleton">
			<view class="cate-section clearfix">
				<!-- 自定义分类导航栏 -->
				<view class="tabbar clearfix">
					<view class="cate-item" v-for="(nav,idx) in productsClassifyList" :key="idx" @click.stop="navigateToGoods(nav)">
						<image class="tui-skeleton-circular" :src="nav.classifyImage"></image>
						<text class="tui-skeleton-fillet">{{nav.classifyName}}</text>
					</view>
				</view>
				<!-- 优选分类 -->
				<view class="tabbar bot clearfix">
					<view class="cate-item-info" @click.stop="this.$api.navToListPage({type:'1',value:firstModulesName})">
						<image class="tui-skeleton-circular" :src="firstModulesImage"></image>
						<text class="tui-skeleton-fillet">{{firstModulesName}}</text>
					</view>
					<view class="cate-item-info" @click.stop="this.$api.navToListPage({type:'2',value:secondModulesName})">
						<image class="tui-skeleton-circular" :src="secondModulesImage"></image>
						<text class="tui-skeleton-fillet">{{secondModulesName}}</text>
					</view>
					<view class="cate-item-info" @click="showTost">
						<image class="tui-skeleton-circular" :src="navInforList[0].icon"></image>
						<text class="tui-skeleton-fillet">{{navInforList[0].text}}</text>
					</view>
					<view class="cate-item-info">
						<!-- #ifdef MP-WEIXIN -->
						<button class="contact-btn" open-type="contact" @bindcontact="handleContact">
							<image class="tui-skeleton-circular" :src="navInforList[1].icon"></image>
						</button>	
						<!-- #endif -->
						<text class="tui-skeleton-fillet">{{navInforList[1].text}}</text>
					</view>
				</view>
			</view>
			<!-- 热销商品 -->
			<view class="hotgoods-section">
				<view class="s-header" @click="this.$api.navToListPage({type:'3',value:thirdModulesName})">
					<text class="tip tui-skeleton-fillet">{{thirdModulesName}}</text>
					<text class="tit tui-skeleton-fillet">更多</text>
					<text class="iconfont icon-xiayibu"></text>
				</view>
				<view class="hotgoods-swiper">
					<view class="scoll-wrapper clearfix">
						<view class="floor-item" v-for="(item, index) in organizeProducts" :key="index" @click.stop="navToDetailPage(item.productID)">
							<image class="tui-skeleton-fillet" :src="item.mainImage" mode="aspectFill"></image>
							<view class="floor-item-content">
								<view class="title tui-skeleton-rect">
									<text class="mclap">{{item.name}}</text>
								</view>
								<view class="floor-item-act">
									<template v-if="item.actStatus==1">
										<view class="floor-tags" v-if="PromotionsFormat(item.promotions)">
											{{item.promotions.name}}<text v-if="hasLogin && item.price1TextFlag != '1'">:￥{{item.price | NumFormat}}</text>
										</view>
										<view class="floor-tags" v-else>{{item.promotions.name}}</view>	
									</template>
									<template v-if="item.actStatus ==0  &&  item.ladderPriceFlag==1">
										<view class="floor-tags">阶梯价格</view>	
									</template>	
								</view>
								<view class="" v-if="hasLogin">
									<view v-if="userIdentity == 4">
										<view class="title-none" v-show="item.price1TextFlag == '1'">
											<text class="p big">￥未公开价格</text>
										</view>
										<view class="title-none" v-show="item.price1TextFlag == '2'">
											<text class="p big">￥价格仅会员可见</text>
										</view>
										<view class="price tui-skeleton-rect" v-show="item.price1TextFlag == '0'" :class="PromotionsFormat(item.promotions) ? 'none' : ''">
											<text class="p sm">￥</text>
											<text class="p big">{{ (PromotionsFormat(item.promotions) ? item.originalPrice : item.price ) | NumFormat}}</text>
										</view>
									</view>
									<view v-else>
										<view class="title-none" v-if="item.price1TextFlag == '1'">
											<text class="p big">未公开价格</text>
										</view>
										<view class="price tui-skeleton-rect" v-else :class="PromotionsFormat(item.promotions) ? 'none' : ''">
											<text class="p sm">￥</text>
											<text class="p big">{{ (PromotionsFormat(item.promotions) ? item.originalPrice : item.price ) | NumFormat}}</text>
										</view>
									</view>
								</view>
								<view v-else class="no-price">
									<view class="p-stars">
										<text class="p-no">￥</text>
										<uni-stars :stars="parseInt(item.price1Grade)" :fontSize="36" :widthInfo="180"></uni-stars>
									</view>
								</view>	
							</view>
						</view>
					</view>
				</view>	
			</view>
			<!-- 底部 -->
			<view class="footer-section ">
				<view class="s-header member  tui-skeleton-fillet">
					<text class="tip">医美机构正品联盟</text>
				</view>
				<view class="f-content tui-skeleton-fillet" @click="navto('/pages/service/member')">
					<image class="tui-banner" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AEwQlAAjGFdpI2LM357.png" mode="scaleToFill"></image>
				</view>
				<view class="f-tab-section">
					<!-- 优选分类 -->
					<view class="tabbar clearfix">
						<view class="cate-item" @click="showTost">
							<image class="tui-skeleton-circular" :src="navServerList[0].icon"></image>
							<text class="tui-skeleton-fillet">{{navServerList[0].text}}</text>
						</view>
						<view class="cate-item" @click="navto(navServerList[1].path)">
							<image class="tui-skeleton-circular" :src="navServerList[1].icon"></image>
							<text class="tui-skeleton-fillet">{{navServerList[1].text}}</text>
						</view>
						<view class="cate-item" @click="navto(navServerList[2].path)">
							<image class="tui-skeleton-circular" :src="navServerList[2].icon"></image>
							<text class="tui-skeleton-fillet">{{navServerList[2].text}}</text>
						</view>
						<view class="cate-item" @click="telPhoneTo">
							<image class="tui-skeleton-circular" :src="navServerList[3].icon"></image>
							<text class="tui-skeleton-fillet">{{navServerList[3].text}}</text>
						</view>
					</view>
				</view>
				<view class="f-text tui-skeleton-fillet">
					<view class="">
						<image class="logo" src="http://static-b.caimei365.com/app/img/icon/logo-c@2x.png" mode=""></image>
						<text class="">采美365网</text>
					</view>
				</view>
			</view>	
		</view>
		<!-- 透明模态层 -->
		<modal-layer v-if='modallayer'></modal-layer>
	</view>
</template>

<script>
	import tuiSkeleton from "@/components/tui-skeleton/tui-skeleton"
	import authorize from '@/common/config/authorize.js'
	import modalLayer from "@/components/modal-layer"
	import cmCustom from '@/components/cm-module/homeIndex/customer.vue'
	import activityAlert from '@/components/cm-module/activity/activity_on_1.vue'
	import uniStars from '@/components/uni-stars/uni-stars.vue'
	import { userInfoLogin } from "@/api/use.js"
	import { mapState,mapMutations} from 'vuex';
	export default {
		components:{
			tuiSkeleton,
			modalLayer,
			cmCustom,
			uniStars,
			activityAlert,
		},
		data() {
			return {
				webviewStyles: {
					progress: {
						color: '#FF3333'
					}
				},
				nvabarData: {//顶部自定义导航
					showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
					showSearch: 0,
					title: '采美采购商城', // 导航栏 中间的标题
					haveBack:false,
					textLeft:this.$store.state.isIphone,
					textColor:'#FFFFFF'
				},
				CustomBar:this.CustomBar,// 顶部导航栏高度
				userID:0,
				clubStatus:'',
				current:0,
				mode:'round',
				modallayer:false,
				isLogin:false,
				bannerImageList:[],
				skeletonShow: true,
				userIdentity:'',
				organizeProducts:[],//常用商品
				productsClassifyList:[
					{classifyImage:'https://admin-b.caimei365.com/userfiles/1/images/photo/2020/04/%E7%BB%84%201238.png',classifyName:'采美'},
					{classifyImage:'https://admin-b.caimei365.com/userfiles/1/images/photo/2020/04/%E7%BB%84%201238.png',classifyName:'采美'},
					{classifyImage:'https://admin-b.caimei365.com/userfiles/1/images/photo/2020/04/%E7%BB%84%201238.png',classifyName:'采美'},
					{classifyImage:'https://admin-b.caimei365.com/userfiles/1/images/photo/2020/04/%E7%BB%84%201238.png',classifyName:'采美'},
					{classifyImage:'https://admin-b.caimei365.com/userfiles/1/images/photo/2020/04/%E7%BB%84%201238.png',classifyName:'采美'}
				],//分类导航
				firstModulesName:'https://img.caimei365.com/group1/M00/03/8C/Cmis215XHXSAAZU0AACaPrfbB8I435.png', //优惠模块1
				secondModulesName:'', //优惠模块2
				firstModulesImage:'https://img.caimei365.com/group1/M00/03/8C/Cmis215XHXSAAZU0AACaPrfbB8I435.png',//优惠模块icon1
				secondModulesImage:'',//优惠模块icon2
				thirdModulesName:'', //优惠模块3
				navInforList:[
					{text:'会员中心',icon:'https://img.caimei365.com/group1/M00/03/B0/Cmis217Z9LCABdf_AAAfdMmM_xY655.png'},
					{text:'在线客服',icon:'https://img.caimei365.com/group1/M00/03/B0/Cmis217Z9BSAXPobAAApo6I0Tlo684.png'}
				],
				navServerList:[
					{text:'会员优惠',icon:'../../../static/temp/server1@2x.png',path:'/pages/service/member'},
					{text:'售后无忧',icon:'../../../static/temp/server2@2x.png',path:'/pages/service/aftersale'},
					{text:'购物须知',icon:'../../../static/temp/server3@2x.png',path:'/pages/service/shoppingnotice'},
					{text:'联系我们',icon:'../../../static/temp/server4@2x.png',path:''},
				],
				isScrollTop:false
			}
		},
		created() {
			this.modallayer = false;
			authorize.getSetting().then(res =>{// console.log('是否已授权',res);//0:为取消授权 1:为已授权 2:为未操作
				if(res == 1){
					this.getWxAuthorize()
				}else{
					this.$api.getComStorage('userInfo').then((resolve) =>{
						this.userID = resolve.userID ? resolve.userID :0;
						this.getHomeInformation()
						this.getOrganizeProducts()
					}).catch(error =>{
						this.getHomeInformation()
						this.getOrganizeProducts()
					})
			
				}
			})			
		},
		filters: {
			NumFormat:function(text) {//处理金额
				return Number(text).toFixed(2);
			},
		},
		computed: {
			...mapState(['hasLogin','userInfo','isActivity'])
		},
		methods: {
			...mapMutations(['login','logout']),
			getWxAuthorize(){
				authorize.getCode('weixin').then(wechatcode =>{// 根据微信的code获取用户登录状态:1已登录过 -1未登录过
					authorize.getUserInfo('weixin').then(wxResponse =>{
						userInfoLogin({code:wechatcode,encryptedData:wxResponse.encryptedData,iv:wxResponse.iv}).then(response =>{
							this.isLogin = true;
							this.userID = response.data.userID;						
							this.userIdentity = response.data.userIdentity;						
							this.clubStatus = response.data.clubStatus;						
							this.$store.commit('updateStatus',response.data)
							this.login(response.data);
							uni.setStorageSync('token',response.data.token)
							uni.removeStorageSync('sessionid')
							uni.setStorageSync('sessionid','JSESSIONID='+response.data.sessionId)
							if(response.data.userIdentity ==1){
								this.$api.navigateTo('/seller/pages/index/index')
							}
							this.getHomeInformation()
							this.getOrganizeProducts()
						}).catch(error =>{
							this.isLogin = false;
							this.logout()
							uni.removeStorageSync('sessionid')
							uni.setStorageSync('sessionid','JSESSIONID='+error.data)
							this.$store.commit('updateStatus',error.data)
							this.getHomeInformation()
							this.getOrganizeProducts()
						})
					})
				})
			},		
			getHomeInformation(){//初始化首页数据	
				this.CommonService.GetHomeModulesDataInfo({ userId:this.userID }).then(res =>{
					let data = res.data;
					this.bannerImageList = data.bannerImageList
					this.mallPageModules = data.mallPageModules
					this.firstModulesName= data.firstModulesName
					this.secondModulesName= data.secondModulesName
					this.firstModulesImage= data.firstModulesImage
					this.secondModulesImage= data.secondModulesImage
					this.thirdModulesName= data.thirdModulesName
					this.productsClassifyList = data.productsClassifyList
					this.$store.commit('updateAllNum',data.shoppingCartCount)
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			getOrganizeProducts(){//获取模块三商品
				this.ProductService.queryProductPreferred({userId:this.userID,preferredFlag:100,pageNum:1,pageSize:6}).then(res =>{
					this.organizeProducts = res.data.results
					this.getProductPrice()
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			getProductPrice(){//获取商品或者活动价格
				let productIdArr = [];
				let productIds ='';
				this.organizeProducts.map(item=>{// 0公开价格 1不公开价格 2仅对会员机构公开
					productIdArr.push(item.productID)
				})
				productIds = productIdArr.join(",");
				this.ProductService.querySearchProductPrice({userId: this.userID,productIds:productIds}).then(response =>{
					this.organizeProducts = this.ReturnNewProducts(this.organizeProducts,response.data);
					this.skeletonShow = false;
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			ReturnNewProducts(Array,list){
				let NewArray = []
				Array.map(item=>{
					for (let i = 0; i < list.length; i++) {
						if( item.productID == list[i].productId ){
							NewArray.push(Object.assign(item,list[i])) 
						}
					}
				});
				return NewArray
			},
			PromotionsFormat(promo){//促销活动类型数据处理
				if(promo!=null){
					if(promo.type == 1 && promo.mode == 1){
						return true
					}else{
						return false
					}
				}
				return false
			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.current = index;
			},
			formatMoney(num){
				return num.toString().replace(/\d+/, function (n) { // 先提取整数部分
					return n.replace(/(\d)(?=(\d{3})+$)/g, function ($1) { // 对整数部分添加分隔符
						return $1 + ",";
					});
				});
			},
			handleBannerActivity(item,index){
				switch(index){
					case 0:
						this.$api.navigateTo(`/h5/pages/activity/activity_mid`)
						break;
				}
			},
			handleClick(data){
				this.$api.navigateTo(`/h5/pages/activity/activity_mid`)
				this.$store.commit('setActivity',data)
			},
			handleCancelClick(data){
				this.$store.commit('setActivity',data)
			},
			navToListPage(nav){//三个分类模块跳转
				let self = this;
				uni.setStorage({
					key: 'commodity_id',
					data: nav.id,
					success: function () {
						self.$api.navToListPage({type:'0',value:nav.classifyName,id:nav.id});
					}
				})
			},
			navigateToGoods(nav){//分类导航跳转
				let self = this;
				uni.setStorage({
					key: 'commodity_id',
					data: nav.id,
					success: function () {
						self.$api.navigateToGoods({type:'0',value:nav.classifyName,id:nav.id});
					}
				})
			},
			navToDetailPage(id) {//跳转商品详情页
				this.modallayer = true;
				this.$api.navigateTo(`/pages/goods/product?id=${id}`)
			},
			handleContact(e){
				console.log(e.detail.path)
				console.log(e.detail.query)
			},
			showTost(){
				this.$util.msg("功能开发中，敬请期待~",2000)
				// this.$api.navigateTo(`/seller/pages/login/login`)
				// uni.navigateToMiniProgram({
				// 	appId: 'wx5a5cda32926f55ac',
				// 	path: '/pages/tabBar/home/index',
				// 	extraData: {
				// 		'data1': 'test'
				// 	},
				// 	envVersion: 'develop',
				// 	success(res) {
				// 		console.log(res)
				// 		// 打开成功
				// 	}
				// })
			},
			navto(url){
				this.$api.navigateTo(url)
			},
			swiperNavtopage(link){
				this.$api.navigateTo(`/h5/pages/activity/activity?productID=4204&path=${link}`)
			},
			telPhoneTo(){
				let self = this;
				this.$api.get('/home/afterSale',{organizeID:this.userOrganizeID}, 
					response => {
						console.log(response.data.contactNumber)
						uni.makePhoneCall({
							phoneNumber:response.data.contactNumber //仅为示例
						});
					}
				)	
			}
		},
		onPageScroll(e){//实时获取到滚动的值
			if(e.scrollTop>50){
				this.inputActive = 'fixed'
			}else{
				this.inputActive = 'float'
			}	
			if(e.scrollTop>600){
				this.isScrollTop = true
			}else{
				this.isScrollTop = false
			}	
		},
		onPullDownRefresh() {//下拉刷新
			this.getHomeInformation()
			this.getOrganizeProducts()
			uni.stopPullDownRefresh()
		},
		onShareAppMessage(res){//分享转发
			if (res.from === 'button') {
		      // 来自页面内转发按钮
		    }
			return {
			  title: '采美采购商城-生美/医美采购服务平台',
			  path: 'pages/tabBar/home/home',
			  imageUrl:'https://img.caimei365.com/group1/M00/03/8C/Cmis215XHXSAWWkhAAXDP4-6m_c397.png'
			}
		}
	}
</script>

<style>
	
</style>