CommunityApp/pages/demo/demo2.vue

<template>
	<view class="">
		<view class="bg-white " >
				<view style="margin: 0 0rpx 40rpx;">
					<image style="width: 100%;" mode="widthFix" src="http://139.9.103.171:8888/group1/M00/00/01/iwlnq1-_4mqAf_t4AAKPnq9axkQ981.png" ></image>
				</view>
				<view class="bg-white" style="padding-top: 20rpx;position: relative;top:-20rpx;">
					<view class="common-service" >
						<text>通用服务</text>
					</view>
					<view class="cu-list grid col-4 no-border " style="border-radius: 50rpx;">
						<view class="cu-item" @click="goDetail(item)" v-for="(item,index) in commonList" :key="index">
							<view class="grid-icon ">
								<image  :src="item.icon" mode="widthFix"/>
							</view>
							<text class="text-sm ">{{item.title}}</text>
						</view>
					</view>
				</view>
				
				<view class="common-service">
					<text>手机服务</text>
				</view>
				<view class="cu-list grid col-4 no-border " style="border-radius: 50rpx;">
					<view class="cu-item" @click="goDetail(item)" v-for="(item,index) in mobileList" :key="index">
						<view class="grid-icon ">
							<image  :src="item.icon" mode="widthFix"/>
						</view>
						<text class="text-sm ">{{item.title}}</text>
					</view>
				</view>
			</view>
			<view class="bg-white" style="padding-top: 20rpx;position: relative;top:-10rpx;">
				<view class="common-service">
					<text>宽带服务</text>
				</view>
				<view class="cu-list grid col-4 no-border " style="border-radius: 50rpx;">
					<view class="cu-item" @click="goDetail(item)" v-for="(item,index) in broadbandList" :key="index">
						<view class="grid-icon ">
							<image   :src="item.icon" mode="widthFix"/>
						</view>
						<text class="text-sm ">{{item.title}}</text>
					</view>
				</view>
			</view>
			<view style="height: 80rpx;">
				<u-divider bgColor="#f1f1f1;"  height="80">到底了</u-divider>
			</view>
		
	</view>
</template>

<script>
export default {
	name: '',
	data() {
		return {
			// 卡片列表
			cardList:[
				{
					title:'热门活动',
					subTiltle:'优惠多多',
					type:'url',
					target:'https://yx.nx.189.cn/u/public/index.php/index/index/rmhd.html'
				},
				{
					title:'充值交费',
					subTiltle:'用于充值交费',
					type:'url',
					target:'https://mp.weixin.qq.com/s/oGB5l9lZCQHHJJuXT0umRw'
				},
				{
					title:'宽带预约',
					subTiltle:'用于宽带预约',
					type:'url',
					target:'https://wap.nx.189.cn/pages/market/html/market.html'
				},
				{
					title:'充30减2',
					subTiltle:'手机充值满减活动',
					type:'url',
					target:'https://yx.nx.189.cn/t/public/index.php/dyq/index'
				},
				{
					title:'抽话费',
					subTiltle:'用于抽话费',
					type:'url',
					target:'https://pms.189.cn/cljy-web/static/chfchf/chfchf_zc_index.html?shopid=2000118600000002&cmpid=dp-002&number=undefined'
				},
				{
					title:'流量超市',
					subTiltle:'用于充值流量',
					type:'url',
					target:'https://yx.nx.189.cn/t/public/index.php/flowcs/index'
				},
				
			],
			commonList:[
				{
					icon:'../../static/telecom/paihao.png',
					title:"营业厅排号",
					badge:0,
					type:'url',
					target:'https://pdweb.360sides.com/?qudao=ningxia'
				},
				{
					icon:'../../static/telecom/xiaohu.png',
					title:"销户服务",
					badge:0,
					type:'url',
					target:'https://yx.nx.189.cn/t/public/index.php/hd2020zzyw/kuandai'
				},
				{
					icon:'../../static/telecom/tuiding-zengzhi.png',
					title:"增值服务退订",
					badge:0,
					type:'url',
					target:'http://im.189.cn/cw/index.html?cf=1&cid=6400'
				},
				{
					icon:'../../static/telecom/tuiding1.png',
					title:"应用功能退订",
					badge:0,
					type:'url',
					target:'https://yx.nx.189.cn/t/public/index.php/hd2020zzyw/yy'
				}
			],
			mobileList:[
				{
					icon:'../../static/telecom/chongzhi.png',
					title:"话费充值",
					badge:0,
					type:'applet',
					target:'wxd4daf5a66b681275'
				},
				{
					icon:'../../static/telecom/liuliang.png',
					title:"流量充值",
					badge:0,
					type:'url',
					target:'https://yx.nx.189.cn/t/public/index.php/flowcs/index'
				},
				{
					icon:'../../static/telecom/icon21.png',
					title:"号卡精选",
					badge:0,
					type:'url',
					target:'https://yx.nx.189.cn/t/public/index.php/hkcs/index'
				},
				{
					icon:'../../static/telecom/xiehao.png',
					title:"携号转网",
					badge:0,
					type:'url',
					target:'https://yx.nx.189.cn/m_lx2020xhzw/login_xhzw.do'
				},
				{
					icon:'../../static/telecom/icon25.png',
					title:"手机挂失",
					badge:0,
					type:'url',
					target:'https://yx.nx.189.cn/t/public/index.php/hd2020zzyw/guashi.html'
				},
				{
					icon:'../../static/telecom/icon26.png',
					title:"手机补换卡",
					badge:0,
					type:'url',
					target:'https://yx.nx.189.cn/t/public/index.php/hd2020zzyw/buhuanka'
				},
				{
					icon:'../../static/telecom/icon24.png',
					title:"彩铃功能",
					badge:0,
					type:'url',
					target:'https://yx.nx.189.cn/t/public/index.php/hd2020zzyw/cailing'
				},
			],
			
			broadbandList:[
				{
					icon:'../../static/telecom/icon31.png',
					title:"宽带订单查询",
					badge:0,
					type:'url',
					target:'https://yx.nx.189.cn/x/kd_yj/order.php'
				},
				{
					icon:'../../static/telecom/icon32.png',
					title:"宽带自助排障",
					badge:0,
					type:'url',
					target:'https://x.189.cn/tykf-services/sso?channel=NX_WEIXIN_Soo&reqMode=5&reqParam=hK8dQ%2F1J63ieVlPpE55UzGkn6hYdnMN25CW93bWD%2FTnwiQ2lOVtZ3E3higHv+%2BXd4tUIpuOnSY%2BVYTLziitWtYd2sArB68J422bltp46KFKLbr%2Fpx6l2JOKRI+a6OaIxCk'
				},
				{
					icon:'../../static/telecom/icon33.png',
					title:"宽带升级",
					badge:0,
					type:'url',
					target:'http://hd.nxeb.cc/pages/market/html/modify.html?client=0'
				},
				{
					icon:'../../static/telecom/icon34.png',
					title:"宽带移机",
					badge:0,
					type:'url',
					target:'https://yx.nx.189.cn/x/kd_yj/'
				},
				{
					icon:'../../static/telecom/icon35.png',
					title:"宽带超市",
					badge:0,
					type:'url',
					target:'http://hd.nxeb.cc/pages/market/html/market.html?rand=1535419737668&client=0'
				}
			]
		};
	},
	onLoad() {
		
	},
	methods:{
		goDetail(item){
			if (this.$isEmpty(item.type)) {
				uni.showToast({
					title:"即将推出",
					icon:"none"
				})
				return
			}
			if (item.type=='applet') {
				//小程序跳转
				uni.navigateToMiniProgram({
				  appId: item.target,
				  path: 'pages/index/index'
				})
			}else{
				//h5跳转
				uni.navigateTo({
					url:"../webview/webview?url="+item.target
				})
			}
		},
	}
};
</script>

<style lang="scss" scoped>
	.bg-white {
	  background-color: #FFFFFF;
	}
	.grid-icon image {
	  width: 56rpx;
	  height: 56rpx;
	}
	.text-sm {
	  font-size: 24rpx;
	}
	.common-service {
	  font-weight: 800;
	  font-size: 32rpx;
	  margin-left: 40rpx;
	  margin-bottom: 10rpx;
	}
	.cu-list.grid.no-border {
	  padding: 10px 5px;
	}
	.cu-list.grid {
	  background-color: #ffffff;
	  text-align: center;
	}
	.cu-list.grid.no-border {
	  padding: 10px 5px;
	}
	.grid {
	  /* display: -webkit-box; */
	  /* display: -webkit-flex; */
	  display: -webkit-box;
	  display: -webkit-flex;
	  display: flex;
	  /* -webkit-flex-wrap: wrap; */
	  -webkit-flex-wrap: wrap;
	          flex-wrap: wrap;
	}

	
</style>