wangluohuoyun-huozhuapp/pages/mine/company/index.vue

<template>
	<view>
		<view v-if='company.length==0' style='text-align:center;transform: translateY(30%);'>
			<image class='image zanwu' :showLoading="true" src="../../../static/mine/company/zanwu.png"></image>
			<view style='font-size:13px;'>您还没有公司哦，快来添加吧~</view>
			<view @click="goDetailPage('/pages/mine/company/addcompany')" class='add'>去添加</view>
		</view>
		<view v-else class='content'>
			<view class='content1'>所属公司（{{company.length}}）</view>
			<view v-for='item in company' class='wrap'>
				<view class='flex flex-space-between'>
					<view>{{item.companyName}}</view>
					<view v-if='item.status=="已认证"' class='status passed'>{{item.status}}</view>
					<view v-if='item.status=="审核中"' class='status aduit'>{{item.status}}</view>
					<view v-if='item.status=="已驳回"' class='status reject'>{{item.status}}</view>
				</view>
				<view class="row2">
					<image v-if='item.status!="审核中"' @click='edit(item)' style='width:17px;height:17px;margin:0 10px;' src="@/static/mine/company/edit.png"></image>
					<image @click='del(item)' style='width:17px;height:17px;margin:0 10px;' src="@/static/mine/company/del.png"></image>
				</view>
			</view>
			<view class='footer'>
				<view @click="goDetailPage('/pages/mine/company/addcompany')" class='newlyIncreased'>新增</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		
		data() {
			return {
				company:[]
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		onLoad(){
			var _this = this;
			if (!this.hasLogin) {
				uni.$u.route('/pages/public/login');
			}
			this.getList()
		},
		methods: {
			goDetailPage(src) {
				uni.$u.route(src);
			},
			edit(item){
				this.goDetailPage('/pages/mine/company/editcompany?id='+item.id)
			},
			del(item){
				uni.showLoading({
					title: '加载中',
					mask:true
				})
				var _this=this
				this.$request.baseRequest('post', '/companyInfo/api/deleteCompany', {id:item.id}).then(res => {
					uni.hideLoading()
					uni.$u.toast('删除成功')
					this.getList()
				})
				.catch(res => {
					uni.hideLoading()
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 2000
					})
				});
			},
			goDetailPage(src){
				uni.$u.route(src);
			},
			getList(){
				uni.showLoading({
					title: '加载中',
					mask:true
				})
				var _this=this
				this.$request.baseRequest('get', '/companyInfo/selectCompany', {commonId:this.userInfo.id}).then(res => {
					uni.hideLoading()
					this.company=res.data
				})
				.catch(res => {
					uni.hideLoading()
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 2000
					})
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background:#F5F6FA;
	}
	.zanwu{
		width:235px;
		height:235px;
	}
	.add{
		width:106px;height:42px;
		margin:36px auto 0;
		color:#fff;
		
		background:url(../../../static/mine/company/Mask@3x.png);
		background-size:100%;
		line-height:42px ;
	}
	.wrap{
		background:#fff;
		border-radius:10rpx;
		padding:24rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		.row2{
			margin-top: 112rpx;
			display: flex;
			justify-content: flex-end;
		}
		
	}
	.status{
		font-size:26rpx;
		padding:5rpx 18rpx;
		color:#fff;
		border-radius:20rpx;
	}
	.status.passed{
		background:#25E491;
	}
	.status.aduit{
		background:#FE8031;
	}
	.status.reject{
		background:#FC5A51;
	}
	.content{
		padding: 20rpx;
	}
	.footer{
		position:fixed;
		background:#fff;
		width:100%;
		bottom:0;
		left:0;
		padding:15px 15px 30px;
		box-sizing: border-box;
	}
	.newlyIncreased{
		width: 100%;
		height: 80rpx;
		margin: 0 auto;
		text-align: center;
		color: #fff;
		background: #2772FB;
		background-size: 100%;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>