fourPayProject/51uni/pages/index/index.vue

<template>
	<view class="content">
		<home ref="homeRef" v-show="actindex == 1"></home>
		<my ref="myRef" v-show="actindex == 2"></my>
		<!--  -->
		<view class="bar">
			<view class="barbox" @click="gogogo(1)">
				<view class="bar-img">
<!--					<u-icon name="home-fill" color="#E4612E" size="28" v-if="actindex == 1"></u-icon>-->
<!--					<u-icon name="home" size="25" v-if="actindex != 1"></u-icon>-->
          <image src="/static/home/tarBarHome1.png" v-if="actindex == 1"></image>
          <image src="/static/home/tarBarHome2.png" v-if="actindex != 1"></image>
				</view>
				<view class="">首页</view>
			</view>
			<view class="barbox" @click="gogogo(2)">
				<view class="bar-img">
<!--					<u-icon name="account-fill" color="#E4612E" size="28" v-if="actindex == 2"></u-icon>-->
<!--					<u-icon name="account" size="25" v-if="actindex != 2"></u-icon>-->
          <image src="/static/home/tarBarMy1.png" v-if="actindex == 2"></image>
          <image src="/static/home/tarBarMy2.png" v-if="actindex != 2"></image>

				</view>
				<view class="">我的</view>
			</view>

		</view>
		<u-modal :show="show" :title="title" :showCancelButton="true" @confirm="confirm" @cancel="cancel"></u-modal>
	</view>
</template>

<script>
	import headers from '../../components/header/headers.vue'
	import tabbar from '../../components/tabbar/tabbar.vue'
	import home from '../components/index.vue'
	import my from '../components/my.vue'
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				titles: "首页",
				title: '您是否要更新',
				actindex: 1,

				dataList: [],
				show: false,
				status: 'loading',
				type: 'Android',
				firm: '',
				typeStr: '0',
				apkUrl: '',
				userType: '0',
				formData: {
					agentGroupTradeCount: null,
					agentMerchantCountMonth: null,
					agentShouYiMonth: null
				}

			}
		},
		mounted() {

			this.$refs.homeRef.appVersionPost()
			this.$refs.homeRef.uaMerIndex()
			this.$refs.homeRef.getNotificationList()
			this.$refs.myRef.getInfo()


		},
		onShow() {
			this.$refs.homeRef.getNotificationList()
		},
		onPullDownRefresh() {
			this.$refs.homeRef.uaMerIndex()

			uni.stopPullDownRefresh()
		},
		components: {
			headers,
			tabbar,
			home,
			my


		},
		methods: {
			gogogo(id) {
				this.actindex = id
			},
			goH5(type) {
				if (type == 'zjgl') {
					uni.navigateTo({
						url: '/components/h5/webView'
					})
				}
			},
			goManage() {
				uni.navigateTo({
					url: '/homePages/Manage/Manage'
				})
			},
			goAgent() {
				uni.navigateTo({
					url: '/homePages/Agent/Agent'
				})
			},
			goAddMerchant() {
				uni.navigateTo({
					url: '/homePages/addMerchant/addMerchant'
				})
			},
			goMerchantManage() {
				uni.navigateTo({
					url: '/homePages/Manage/Manage'
				})
			},
			goGuideList() {
				uni.navigateTo({
					url: '/homePages/GuideList/GuideList'
				})
			},
			goTobeImproved() {
				uni.navigateTo({
					url: '/homePages/TobeImproved/TobeImproved'
				})
			},
			goPerformance() {
				uni.navigateTo({
					url: '/homePages/performance/performance'
				})
			},
			goEquipmentManagement() {
				uni.navigateTo({
					url: '/homePages/EquipmentManagement/list'
				})
			},
			confirm() {
				this.show = false
				// #ifdef APP-PLUS
				plus.runtime.openURL(this.apkUrl)
				// #endif
			},
			cancel() {
				this.show = false
				uni.showToast({
					title: '您已取消更新',
					icon: 'error'
				})
			},
			uaAgentIndex() {
				request({
					url: 'app/uaAgent/index',
					method: 'post',
					data: {},
				}).then(res => {
					this.formData.agentGroupTradeCount = res.agentGroupTradeCount
					this.formData.agentMerchantCountMonth = res.agentMerchantCountMonth
					this.formData.agentShouYiMonth = res.agentShouYiMonth
				})
			},
			goback() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		// background: #f4f5f6;

		height: 100vh;
	}

	.container {
		width: 100%;
		// background: #f4f5f6;
		box-sizing: border-box;
		padding-top: 88px;
	}

	.top_box {
		width: 95%;
		border-radius: 10px;
		box-sizing: border-box;
		padding: 15px;
		background: linear-gradient(180deg, #33db8c 0%, #16ad96 100%);
		margin: 15px auto;
		color: white;
	}

	.b_top_ {
		width: 100%;
		text-align: center;
	}

	.b_bottom_ {
		width: 100%;
		display: flex;
		justify-content: space-around;
		margin-top: 15px;
	}

	.sizei {
		font-size: 12px;
		margin-bottom: 5px;
	}

	.button {
		border: 1px solid #fff;
		box-sizing: border-box;
		padding: 2px 10px;
		border-radius: 6px;
		font-size: 12px;
		margin-top: 5px;
	}

	.center_box {
		width: 95%;
		margin: 10px auto;
		display: flex;

		flex-wrap: wrap;

	}

	.four-box {
		width: 25%;
		text-align: center;
		font-size: 12px;
		margin-bottom: 15px;

		image {
			width: 40px;
			height: 40px;
			margin: 5px auto;
		}
	}

	.bar {
		width: 100%;
		height: 68px;
		background-color: white;
		position: fixed;
		bottom: 0px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 12px;
		font-weight: 400;
		color: #666666;
		box-shadow: 0px -3px 13px 0px rgba(0, 0, 0, 0.1);
		// border-radius: 22px 22px 0px 0px;
	}

	.barbox {
		width: 33%;
		text-align: center;
	}

	.centerbox {
		width: 50px;
		height: 50px;
		background-color: white;
		border-radius: 50%;
		margin: 0 auto;
		margin-top: -30px;
		box-sizing: border-box;
		padding: 5px;


	}

	.qiu {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background: linear-gradient(135deg, #2FF7D3 0%, #2F72F7 100%);
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 20px;
			height: 20px;
		}

	}

	.bar-img {
		width: 25px;
		height: 25px;
		margin: 0px auto;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>