mobile_uniapp_mmhy/pages/flow/flow.vue

<template>
	<view class="flow">
		<!-- #ifdef H5 -->
		<u-navbar v-if="mixin_type=='H5'" back-text=" " :custom-back='goBack' title="流量卡" :border-bottom="false" :background="{backgroundColor: '#d52e4c'}" back-icon-color="#fff" title-color="#fff"></u-navbar>
		<!-- #endif -->
		<view class="share" @tap="Message()" v-if="shareBtn">
			{{shareHideText}}
		</view>
		<view   class="query" @tap.stop="kefu()">
			<image src="../../static/img/lianxikefu@2x.png" mode=""></image>联系客服
			<!-- <button open-type="contact"  class="douyinbutton" v-if="platformType==2&&mixin_type=='TOUTIAO'">
				
			</button> -->
			<button open-type="byteHi" data-im-id='28040772090' class="douyinbutton" v-if="platformType==2&&mixin_type=='TOUTIAO'">
				
			</button>
		</view> 
		<view class="top">
			<button open-type="contact">
				<!-- <image :src="configAll.flow_main_logo" @tap.stop="kefu()" @tap="Herf()" mode="widthFix"></image> -->
				<image :src="configAll.flow_main_logo" @tap.stop="kefu()"  mode="widthFix"></image>
			</button>
		</view>
		<view class="queryLine" @tap="flowOrder()">
			订单查询
		</view>
		<view class="list">
			<view class="box" v-for="(item,index) in boxList" :key="index" @tap="ListClick(item)">
				<view class="mark">{{ index + 1 }}</view>
				<image :src="item.logo" class="img" mode="aspectFill"></image>
				<view class="boxCon">
					<view class="tit">
						{{item.name}}
					</view>
					<text>{{item.summary}}</text>
					<view class="boxBtn">
						立即选购
					</view>
				</view>
			</view>
			<u-loadmore  margin-top="30" margin-bottom="30" :status="status" icon-color="#fff" color="#fff"/>
			
		</view>
		<!-- 联系客服 -->
		<w-Load :wx="wx" :isFlow="true" v-on:childByValue="childByValue"></w-Load>
		<u-popup v-model="copeHide" border-radius="20" mode="center">
			<view class="agreement copeHide">
				<image src="/static/img/up.png" class="label2" @tap="copeHide = false"></image>
					<view class="title">
						温馨提示
					</view>
						<view class="copyText">客服电话:{{configAll.flow_service_tel}}</view>
					<view class="btn" @tap="buttonTypePhone()">
						一键拨打
					</view>
			</view>
		</u-popup> 
	</view>
</template>

<script>
	import wLoad from "@/components/w-load/w-load.vue"
	export default {
		components:{
			wLoad : wLoad
		},
		data() {
			return {
				platformType:'',//平台类型
				wx:false, //微信公众号二维码展示
				copeHide:false,
				status: 'loadmore',
				list: 10,
				page: 1,
				boxList:[],
				shareBtn:false,//按钮是否显示直播  视频
				
				shareHideText:'直播',
				configAll:'',//基本配置
			}
		},
		onShow() {
			console.log(341,getCurrentPages())
			if(this.mixin_type!='TOUTIAO' && this.mixin_type!='H5'){
				console.log(ks.getLaunchOptionsSync().scene)
				let scene=ks.getLaunchOptionsSync().scene
				if(scene=='011041'||scene=='021041'|| scene=='1041'){
					// 直播间
					this.shareHideText='直播'
					this.shareBtn=true
				}else if(scene=='011040'||scene=='021040'||scene=='1040'){
					// 视频
					this.shareHideText='视频'
					this.shareBtn=true
				}
			}
		},
		onBackPress(options) {
			console.log(12,options)
			console.log(34,getCurrentPages())
			if(getCurrentPages().length==1){
				return true;
			}else{
				return false;
			}
		},
		onLoad(option) {
			this.commonConfig()
			if(option.chanId){
				uni.setStorageSync('chanId', option.chanId);
			}else{
				uni.removeStorageSync('chanId');
			}
			this.$http.list({type:2,page:this.page,limit:10})
			.then(res=>{
				console.log(res)
				if(res.data.code==1){
					this.boxList=res.data.data.data
				}
			})
		},
		methods: {
			goBack(){
				
				if(getCurrentPages().length==1){
					return
				}else{
					let chanid=uni.getStorageSync('chanId')?uni.getStorageSync('chanId'):''
						uni.redirectTo({
							url:'/pages/index/index?chanId='+chanid
						})
				}
				
			},
			// 系统配置
			commonConfig(){
				this.$http.commonConfig()
				.then(res=>{
					if(res.data.code==1){
						this.configAll=res.data.data
						// #ifdef MP-TOUTIAO
						this.platformType=	res.data.data.flow_service_dy
						// #endif
						// #ifdef MP-KUAISHOU
						this.platformType=	res.data.data.flow_service_ks	
						// #endif
						// #ifdef H5
						this.platformType=	res.data.data.flow_service_h5
						// #endif
						// if(this.mixin_type!='TOUTIAO' && this.mixin_type!='H5'){
						// 	this.platformType=	res.data.data.flow_service_ks		
						// }if(this.mixin_type=='H5'){
						// 	this.platformType=	res.data.data.flow_service_h5
						// }if(this.mixin_type=='TOUTIAO'){
						// 	this.platformType=	res.data.data.flow_service_dy
						// }
						// uni.showModal({
						// 	title:this.mixin_type+'----'+this.platformType
						// })
					}
				})
			},
			childByValue: function (childValue) {
				this.wx = childValue
			},
			buttonTypePhone(){
				if(this.mixin_type!='TOUTIAO' && this.mixin_type!='H5'){
					ks.makePhoneCall({
						phoneNumber: this.configAll.flow_service_tel, // 仅为示例，并非真实的电话号码
					});	
				}else{
					uni.makePhoneCall({
						phoneNumber: this.configAll.flow_service_tel
					});
				}
			},
			kefu(){
				// if(this.mixin_type!='TOUTIAO' && this.mixin_type!='H5'){
				// 	this.copeHide=true;				
				// }else if(this.mixin_type=='H5'){
				// 	this.wx=true;
				// }
				if(this.platformType==1){
					
					this.copeHide=true;	
					
				}
				if(this.platformType==2&&this.mixin_type!='TOUTIAO'){
					if(this.mixin_type=='H5'){
						window.location.href=this.configAll.flow_service_link
					}else{
						uni.navigateTo({
							url:'/pages/webview/webview?url='+encodeURIComponent(JSON.stringify(this.configAll.flow_service_link))
						})
					}
					
					
				}
				if(this.platformType==3){
					this.wx=true;
				}
			},
			// H5 跳转
			Herf(url){
				if(!this.platformType){
					//#ifdef H5
					window.location.href = this.configAll.flow_main_link
					//#endif
				}else{
					this.kefu()
				}
				
			},
			// 跳转到直播设置界面
			Message(){
				uni.navigateTo({
				  url: '/pages/Message/Message?url='+'/pages/flow/flow',
				})
			},
			flowHref(){
				this.url = decodeURIComponent(this.configAll.flow_main_link)
			},
			// 号码详情
			ListClick(item){
				if(item.link){
						if(this.mixin_type=='H5'){
							window.location.href=item.link
						}else{
							uni.navigateTo({
								url:'/pages/webview/webview?url='+encodeURIComponent(JSON.stringify(item.link))
							})
						}
					
				}else{
					uni.navigateTo({
					  url: '/pages/flowDetails/flowDetails?id='+item.id+'&chanId='+uni.getStorageSync('chanId'),
					})
				}
			     
			},
			// 查询界面
			flowOrder(){
				
				uni.navigateTo({
				  url: '/pages/flowOrder/flowOrder?chanId='+uni.getStorageSync('chanId'),
				})
			},
		},
		onReachBottom() {
			this.status = 'loading';
			this.page = ++ this.page;
			this.$http.list({type:2,page:this.page,limit:10}).then(res=>{
				// console.log(res)
				if(res.data.code==1){
					if(this.page<res.data.data.per_page || this.page == res.data.data.per_page){
						let arr=this.boxList.concat(res.data.data.data)
						this.boxList=arr;
					}
					this.status = 'nomore'								
				}else{
					this.status = 'nomore'
				}
			})

		}
	}
</script>

<style lang="scss">
	@import '../index/index.scss';
	.agreement{
		width: 600rpx;
		max-height: 930rpx;
		padding:0 30rpx;
		// box-sizing: border-box;
		.copyText{
			margin: 60rpx 0;
			text-align: center;
			font-size: 36rpx;
			// font-weight: 700;
		}
		.label2{
			float: right;
			width: 21rpx;
			height: 21rpx;
			margin-top:28rpx;
		}
		.title{
			font-size: 30rpx;
			font-weight: 700;
			margin:20rpx 0;
			text-align: center;
		}
		/deep/ .u-drawer__scroll-view{
			position: relative;
		}
		.btn{
			padding: 20rpx;
			border-radius: 10rpx;
			text-align: center;
			border:1rpx solid #d8d8d8;
			font-size: 28rpx;
			width: 100%;
			margin-bottom: 10rpx;
			background-color: $uni-color-BGC;
			color: #fff;
		}
	}
	page{
		min-height: 100%;
		display: flex;
		background-color: #5a70f8;
	}
	.flow{
		background-color: #5a70f8;
		flex: 1;
		.share{
			position: fixed;
			right: 30rpx;
			bottom: 360rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			width: 100rpx;
			background-color: $uni-color-BGC;
			font-size: 30rpx;
			color: #fff;
			border-radius: 50%;
			z-index: 111;
		}
		.query{
			.douyinbutton{
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				opacity: 0;
			}
			image{
				width: 28rpx;
				height: 28rpx;
				margin-right: 8rpx;
				vertical-align: middle;
			}
			position: fixed;
			top: 160rpx;
			right: -20rpx;
			width: 180rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border-radius: 24rpx;
			font-size: 24rpx;
			color: #fff;
			background-color: $uni-color-BGC;
			z-index: 100;
			box-shadow: 10rpx 1rpx 10rpx 1rpx rgba(0,0,0,0.5)
		}
		.top{
			button{
				background: transparent;
				line-height: 1;
				padding: 0;
				border: 0;
			}
			button::after{
				display: none;
			}
			image{
				width: 100%;
			}
		}
		.queryLine{
			width: 670rpx;
			margin: 30rpx auto 0;
			background-color: $uni-color-BGC;
			border-radius: 26rpx;
			font-size: 34rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
		}
		.list{
			width: 670rpx;
			margin: 20rpx auto;
			.box{
				position: relative;
				background-color: #fff;
				border-radius: 10rpx;
				box-sizing: border-box;
				padding: 20rpx 30rpx;
				padding-left: 290rpx;
				padding-bottom: 100rpx;
				margin-bottom: 20rpx;
				.mark{
					background:rgba(0,0,0,0.5);
					color: white;
					position: absolute;
					left: 0;
					top: 0;
					border-radius:10rpx 0 10rpx 0 ;
					width: 50rpx;
					text-align: center;
				}
				.img{
					position: absolute;
					width: 220rpx;
					height: 140rpx;
					left: 30rpx;
					top: 50%;
					transform: translateY(-50%);
				}
				.tit{
					font-weight: bold;
					font-size: 26rpx;
					color: #2A2A2A;
					margin-bottom: 20rpx;
				}
				text{
					display: inline-block;
					font-size: 24rpx;
					color: #7A7A7A;
					height: 50rpx;
				}
				.boxBtn{
					margin-top: 30rpx;
					width: 170rpx;
					height: 47rpx;
					line-height: 47rpx;
					text-align: center;
					background: $uni-color-BGC;
					border-radius: 10rpx;
					font-size: 26rpx;
					color: #fff;
					float: right;
				}
			}
		}
	}
</style>