qingyuan/pages/mainPages/notOpen/notOpen.vue

<template>
	<!-- 城市代理 -->
	<view class="container">
		<loadlogo v-if="!loadlogo" />
		<view class="page-index" :style="'background-color: '+datas.page.background" :class="!!bottomMenu?'bottomPadding':''"
		 v-if="loadlogo">
		 <far-bottom></far-bottom>
			<Advert class="advert" :advertData="datas.adv" v-if="!!datas.adv" />
			<diypages :diypagesData="diypagesData" :pageData="datas.page" :btngroupData="btngroup" />
			<view class="audio-main" @click="playAudio" v-if="!!pageInfo.music">
				<view class="audio-bg" :class="{'stop-audio':!play_Audio}">
					<view class="audio-gif" :style="{'background-image':'url('+imageRoot+'musicgif.gif)'}">
						<view class="audio-png" :style="{'background-image':'url('+imageRoot+'music.png)'}"></view>
					</view>
				</view>
			</view>
		</view>

		<!-- 1=显示加盟申请；2=显示暂未开通 OR 加载总后台数据 -->
		<!-- 显示加盟申请 -->
		<view class="applyJoin" v-if="cityAgentStatus == 1">
			<view class="applyJoin-image" :style="{'background-image':'url('+imageUrl+')'}"></view>
			<view class="text">代理<view class="inlineblock">{{TextSubstitution.sysname}}</view>，携手<view class="inlineblock">共赢未来</view>
				<view class="apply" @click="callphone()">
					<view>申请成为城市代理</view>
				</view>
			</view>

			<!-- 显示暂未开通 -->
			
		</view>
		
		<view class="notOpen" v-if="cityAgentStatus == 2">
			<view class="notOpen-image" :style="{'background-image':'url('+imageUrl+')'}"></view>
			<view class="text">附近暂时没有商家，马上就来哦！</view>
		</view>
	</view>
</template>
<script>
	let innerAudioContext = uni.createInnerAudioContext();
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		RUZHU,
		KEFU
	} from '@/store/mutation-types'
	import App from '@/common/js/app.js'
	import Loadlogo from '@/components/template/loadlogo.vue'
	import diypages from '@/components/template/diypages.vue'
	// #ifdef H5
	import wxApi from '@/common/js/wxApi.js';
	// #endif
	export default {
		data() {
			return {
				loadlogo: false,
				swiperI: 1,
				loadAgain: false,
				datas: {
					basic: [],
					adv: '',
					page: {},
				},
				diypagesData: [{
					currentTime: 1571394201,
					group_key: 1,
					group_name: "search",
					id: "search2",
					params: {
						areaname: "",
						placeholder: "请输入关键字进行搜索",
						url: "pages/subPages/search/search",
					},
					style: {
						areaColor: "#333333",
						background: "#FFFFFF",
						color: "#999999",
						iconcolor: "#b4b4b4",
						inputbackground: "#F7F7F7",
						marginBottom: 0,
						searchstyle: "round",
						textalign: "left"
					}
				}],
				richtext: {
					imageProp: {
						mode: 'widthFix'
					}
				},
				pageInfo: {},
				btngroup: {
					backgroundColor: '#ffffff',
					btnBordeRadius: '',
					displayMode: '',
					eachLineNum: '',
					eachPageNum: '',
					list: [],
					indicatorDots: true,
					duration: 300,
					btngroupHandleData: [],
					swiperHeight: '',
					phone: null,
				},
				//城市代理
				cityAgentStatus: 1, //1=显示加盟申请；2=显示暂未开通 OR 加载总后台数据
				cityAgentName: '智慧城市', //平台名称
				joinPhone: null //电话
			}
		},
		components: {
			diypages,
		},
		computed: {
			...mapState([
				'ruzhushow', 'kefushow'
			]),
			imageUrl() {
				let platformInfor = uni.getStorageSync('platformInfor');
				let agent_iamge = platformInfor.agent_iamge;
				return this.cityAgentStatus == 1 ? agent_iamge || this.imageRoot + 'apply_city.png' : this.imageRoot + 'not_shop.png'
			},
			TextSubstitution() {
				return uni.getStorageSync('TextSubstitution')
			},
		},
		onLoad(e) {
			//城市代理
			let {
				city_agent_status,
				city_agent_name,
				joinPhone
			} = e;
			this.setData({
				cityAgentStatus: city_agent_status,
				city_agent_name: city_agent_name,
				joinPhone
			});
			console.info('cityAgentStatus',this.cityAgentStatus)
			//diy
			let location = uni.getStorageSync('location'),
				client = App.getClientType(),
				getBrowser = App.getBrowser(),
				_this = this,
				{
					id,
					type
				} = e;
			if (getBrowser === "chrome53.0") {
				_this.loadlogo = true;
				uni.showModal({
					content: '微信浏览器版本过低,请使用系统浏览器',
					showCancel: false
				})
				return false
			}
			_this.phone = uni.getStorageSync('phone');
			
			_this.loadAgain = true
			_this.loadlogo = true;
			_this.pageType = type;
		},
		methods: {
			callphone() {
				let _this = this,
					phone = _this.phone;
				if (!!phone) {
					uni.makePhoneCall({
						phoneNumber: phone
					});
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.applyJoin {
		width: 100vw;

		>view {
			text-align: center;
		}

		.applyJoin-image {
			width: 500upx;
			height: 500upx;
			background-size: 500upx 500upx;
			background-repeat: no-repeat;
			margin: 0 auto;
		}

		.text {
			height: 60upx;
			line-height: 60upx;
			font-size: 32upx;
			width: 100vw;
			margin: 10px 0px;
		}

		.apply {
			width: 100vw;
			height: 60upx;
			line-height: 60upx;
			font-size: 28upx;

			>view {
				border: 2upx solid #FF4444;
				border-radius: 100upx;
				width: auto;
				display: inline-block;
				padding: 10upx 40upx;
				color: #FF4444;
				font-size: 28upx;
				margin: 20upx 0upx;


			}
		}
	}

	.inlineblock {
		display: inline-block;
		color: #FF4444;
	}

	.notOpen {
		margin-top: 232upx;

		.notOpen-image {
			width: 440upx;
			height: 320upx;
			background-size: 440upx 320upx;
			background-repeat: no-repeat;
			margin: 0 auto;
		}

		>view {
			width: 100vw;
			text-align: center;
			font-size: 24upx;
			color: #999999;
		}

		.text {
			height: 60upx;
			line-height: 60upx;
		}
	}
</style>