hytc-customer/pages/index/index.vue

<template>
	<view class="content">
		<view class="con_top_warp">
			<view class="con_top_right" @click="logOut" style="margin-top: 50px;">
				<image src="/static/img/logout.png" class="outimg" mode=""></image>
			</view>
		</view>
		<view class="topwarp">
			<view class="infowarp">
				<image :src="info.user_logo" class="infoimg" mode=""></image>
				<view class="infoname">{{info.user_name}}</view>
			</view>
		</view>
		
		<view class="tabwarp">
			<view class="tabli" @click="subServe">
				<image src="/static/img/icon1.png" class="tabimg" mode=""></image>
				<view class="tabtext">{{i18n['提交服务']}}</view>
			</view>
			<view class="tabli" @click="toProcess">
				<image src="/static/img/icon2.png" class="tabimg" mode=""></image>
				<view class="tabtext">{{i18n['查看进度']}}</view>
			</view>
			<view class="tabli" @click="toEvaluate">
				<image src="/static/img/icon3.png" class="tabimg" mode=""></image>
				<view class="tabtext">{{i18n['服务评价']}}</view>
			</view>
			<view class="tabli" @click="toKnowledge">
				<image src="/static/img/icon5.png" class="tabimg" mode=""></image>
				<view class="tabtext">{{i18n['知识库']}}</view>
			</view>
		</view>
		
		<view class="companyInfo">
			<view class="companyli" @click="toCall">
				<image src="/static/img/phone.png" class="phoneimg" mode=""></image>
				{{info.user_phone?info.user_phone:''}}
			</view>
			<view class="companyli">
				<image src="/static/img/email.png" class="phoneimg" mode=""></image>
				{{info.user_email ? info.user_email : ''}}
			</view>
			<view class="companyli" @click="toAddress">
				<image src="/static/img/address.png" style="height:54rpx" class="phoneimg" mode=""></image>
				{{info.user_address?info.user_address:''}}
			</view>
			
			<view class="companyli" @click="scanCode">
				<image src="/static/img/qqrcode.png" style="height:54rpx" class="phoneimg" mode=""></image>
					扫一扫
			</view>
		</view>
	</view>
</template>

<script>
	import { netCompanyInfo, netInfo, netLogOut } from '@/api/api.js'
	
	export default {
		data() {
			return {
				info:{},
				isChinese:false
			}
		},
		onLoad() {
			
		},
		computed:{
			i18n() {
				return this.$t("index")
			}
		},
		onLoad() {
			
		},
		onShow() {
			console.log(uni.getStorageSync('locale') == 'zh')
			this.isChinese = !uni.getStorageSync('locale') || uni.getStorageSync('locale') == 'zh' ? true : false
			this.getInfo()
		},
		methods: {
			//退出 登录
			logOut() {
				uni.showModal({
					title:this.i18n['提示'],
					content:this.i18n['请确认是否退出登录?'],
					success:(res)=>{
						if(res.confirm){
							netLogOut().then(res=>{
								uni.removeStorageSync('token')
								uni.redirectTo({
									url:'/pages/login/index'
								})
							})
						}
					}
				})
			},
			// 扫码
				scanCode() {
					// #ifdef MP-WEIXIN
					// 允许从相机和相册扫码
					uni.scanCode({
						scanType: ["qrCode"],
						success: (res) => {
							if (res.result) {
								const val = res.result;
								console.log(val)
								uni.navigateTo({
									url:'/pages/index/qrcode?id='+val
								})
						
							} else {
								console.log('请重新扫描');
								return false;
							}
						},
						fail: (res) => {
							console.log('未识别到二维码');
						}
					})
					// #endif    
						
				},
			changeLan(item) {
				this.isChinese = !this.isChinese
				this.$i18n.locale = item
				uni.setStorageSync('locale', item)
			},
			toCall() {
				uni.makePhoneCall({
					phoneNumber: this.info.user_phone
				})
			},
			toAddress() {
				uni.openLocation({
					latitude:this.info.user_lat,
					longitude:this.info.user_lag,
				})
			},
			getInfo() {
				netInfo().then(res=>{
					this.info = res.data
					uni.setNavigationBarTitle({
						title: res.data.user_name
					})
				})
			},
			toLogin() {
				uni.navigateTo({
					url:'/pages/login/index'
				})
			},
			subServe() {
				uni.navigateTo({
					url:'/pages/submit_server/index'
				})
			},
			//查看进度
			toProcess() {
				uni.navigateTo({
					url:'/pages/see_progress/index'
				})
			},
			//评价
			toEvaluate() {
				uni.navigateTo({
					url:'/pages/evaluate/index'
				})
			},
			//知识库
			toKnowledge() {
				uni.navigateTo({
					url:'/pages/knowledge_base/list'
				})
			},
			//服务商城
			toServiceMall() {
				uni.navigateTo({
					url:'/pages/serviceMall/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		position: relative;
		background: linear-gradient(180deg, #DFF0FF 0%, #F4F4F4 100%);
		.con_top_warp{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			position: absolute;
			top:30rpx;
			left:0;
			z-index: 1;
			width:100%;
			padding:0 45rpx;
			.langbox{
				.lanimg{
					width:44rpx;
					height:44rpx;
				}
			}
			.con_top_right{
				width:43rpx;
				height:43rpx;
				border-radius: 50%;
				.outimg{
					width:43rpx;
					height:43rpx;
					border-radius: 50%;
				}
			}
		}
	}
	
	.topwarp{
		width:750rpx;
		padding-top:80rpx;
		position: relative;
		.infowarp{
			text-align: center;
			.infoimg{
				width:160rpx;
				height:160rpx;
				border-radius: 50%;
				margin:0 auto 15rpx;
			}
			.infoname{
				font-size:30rpx;
				color:#666;
			}
		}
	}
	
	.tabwarp{
		width:690rpx;
		background:#fff;
		border-radius: 20rpx;
		padding:30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin:80rpx auto 0;
		.tabli{
			flex-shrink: 0;
			text-align: center;
			width:100rpx;
			.tabimg{
				width:80rpx;
				height:80rpx;
				margin-bottom:15rpx;
			}
			.tabtext{
				font-size:24rpx;
				color:#333;
			}
		}
	}
	.companyInfo{
		width:690rpx;
		background:#fff;
		border-radius: 20rpx;
		padding:0 30rpx;
		margin:30rpx auto 0;
		.companyli{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding:24rpx 0;
			border-bottom:1rpx solid #EDEDED;
			font-size:24rpx;
			color:#666;
			.phoneimg{
				width:50rpx;
				height:50rpx;
				margin-right:15rpx;
			}
		}
	}
</style>